houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)

Browse Source 
## Description

Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name
**`twenty-ui`** (v0.1.0, publishable) and renames the old package to
**`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports →
`twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates
twenty-front's `Toggle` to the new package (first consumer) as a
drop-in.

## Next steps
- Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` +
`.yarnrc.yml`), then tag `ui/v0.1.0` to publish.
- Continue migrating components from `twenty-ui-deprecated` →
`twenty-ui`.
This commit is contained in:
Raphaël Bosi
2026-06-08 18:12:28 +02:00
committed by GitHub
parent a91e737e69
commit c596a5e342
2320 changed files with 6313 additions and 4856 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu-item/components/RecordIndexCommandMenu.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsMobile } from 'twenty-ui/utilities';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
export const RecordIndexCommandMenu = () => {
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
packages/twenty-front/src/modules/command-menu-item/components/RecordIndexCommandMenuDropdown.tsx
+2 -2
View File
@@ -17,8 +17,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useContext } from 'react';
import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { IconLayoutSidebarRightExpand } from 'twenty-ui-deprecated/display';
import { MenuItem } from 'twenty-ui-deprecated/navigation';
import { CommandMenuItemAvailabilityType } from '~/generated-metadata/graphql';
const StyledDropdownMenuContainer = styled.div`
packages/twenty-front/src/modules/command-menu-item/components/RecordPageSidePanelCommandMenuDropdown.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ import { sidePanelWidgetFooterCommandMenuItemsState } from '@/ui/layout/side-pan
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useContext, useMemo } from 'react';
import { HorizontalSeparator } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { HorizontalSeparator } from 'twenty-ui-deprecated/display';
import { MenuItem } from 'twenty-ui-deprecated/navigation';
import { CommandMenuItemAvailabilityType } from '~/generated-metadata/graphql';
export const RecordPageSidePanelCommandMenuDropdown = () => {
packages/twenty-front/src/modules/command-menu-item/components/RecordShowCommandMenu.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsMobile } from 'twenty-ui/utilities';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
export const RecordShowCommandMenu = () => {
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
packages/twenty-front/src/modules/command-menu-item/components/RecordShowSidePanelOpenRecordButton.tsx
+3 -3
View File
@@ -23,9 +23,9 @@ import { t } from '@lingui/core/macro';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconBrowserMaximize } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { getOsControlSymbol } from 'twenty-ui/utilities';
import { IconBrowserMaximize } from 'twenty-ui-deprecated/display';
import { Button } from 'twenty-ui-deprecated/input';
import { getOsControlSymbol } from 'twenty-ui-deprecated/utilities';
import { useNavigateApp } from '~/hooks/useNavigateApp';
type RecordShowSidePanelOpenRecordButtonProps = {
packages/twenty-front/src/modules/command-menu-item/components/StandalonePageCommandMenu.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ import {
type CommandMenuContextApi,
} from 'twenty-shared/types';
import { evaluateConditionalAvailabilityExpression } from 'twenty-shared/utils';
import { useIsMobile } from 'twenty-ui/utilities';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
import { CommandMenuItemAvailabilityType } from '~/generated-metadata/graphql';
export const StandalonePageCommandMenu = () => {
packages/twenty-front/src/modules/command-menu-item/components/__stories__/RecordIndexCommandMenuDropdown.stories.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { CommandMenuComponentInstanceContext } from '@/command-menu/states/conte
import { EMPTY_COMMAND_MENU_CONTEXT_API } from '@/command-menu-item/constants/EmptyCommandMenuContextApi';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { RouterDecorator } from 'twenty-ui/testing';
import { RouterDecorator } from 'twenty-ui-deprecated/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
packages/twenty-front/src/modules/command-menu-item/components/__stories__/RecordShowSidePanelCommandMenuDropdown.stories.tsx
+4 -1
View File
@@ -10,7 +10,10 @@ import { CommandMenuComponentInstanceContext } from '@/command-menu/states/conte
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
import {
ComponentDecorator,
RouterDecorator,
} from 'twenty-ui-deprecated/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
packages/twenty-front/src/modules/command-menu-item/confirmation-modal/states/commandMenuItemConfirmationModalState.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { type ReactNode } from 'react';
import { type ConfirmationModalCaller } from 'twenty-shared/types';
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
import { type ButtonAccent } from 'twenty-ui/input';
import { type ButtonAccent } from 'twenty-ui-deprecated/input';
export type CommandMenuItemConfirmationModalConfig = {
caller: ConfirmationModalCaller;
packages/twenty-front/src/modules/command-menu-item/display/components/CommandListItemLoader.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { Loader } from 'twenty-ui/feedback';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { Loader } from 'twenty-ui-deprecated/feedback';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledContainer = styled.div`
align-items: center;
packages/twenty-front/src/modules/command-menu-item/display/components/CommandMenuItemRenderer.tsx
+3 -3
View File
@@ -16,9 +16,9 @@ import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { assertUnreachable, isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { Loader } from 'twenty-ui/feedback';
import { MenuItem } from 'twenty-ui/navigation';
import { useIcons } from 'twenty-ui-deprecated/display';
import { Loader } from 'twenty-ui-deprecated/feedback';
import { MenuItem } from 'twenty-ui-deprecated/navigation';
import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
const StyledPreviewWrapper = styled.div`
packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { NodeDimension } from '@/ui/utilities/dimensions/components/NodeDimensio
import { styled } from '@linaria/react';
import { motion } from 'framer-motion';
import { useContext, useMemo } from 'react';
import { ThemeContext } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
const StyledCommandMenuItemContainer = styled(motion.div)`
align-items: center;
packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemsInlineMeasurements.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { NodeDimension } from '@/ui/utilities/dimensions/components/NodeDimensio
import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { useIcons } from 'twenty-ui/display';
import { useIcons } from 'twenty-ui-deprecated/display';
import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
type ElementDimensions = {
packages/twenty-front/src/modules/command-menu-item/edit/components/CommandMenuItemEditButton.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { AnimatedIconCrossfade } from 'twenty-ui/utilities';
import { AnimatedIconCrossfade } from 'twenty-ui-deprecated/utilities';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
@@ -7,8 +7,8 @@ import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useLingui } from '@lingui/react/macro';
import { SidePanelPages } from 'twenty-shared/types';
import { IconPencil, IconX } from 'twenty-ui/display';
import { AnimatedButton } from 'twenty-ui/input';
import { IconPencil, IconX } from 'twenty-ui-deprecated/display';
import { AnimatedButton } from 'twenty-ui-deprecated/input';
export const CommandMenuItemEditButton = () => {
const { t } = useLingui();
packages/twenty-front/src/modules/command-menu-item/edit/components/CommandMenuItemEditRecordSelectionDropdown.tsx
+6 -3
View File
@@ -16,9 +16,12 @@ import {
IconChevronDown,
IconSquareCheck,
IconSquareX,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
} from 'twenty-ui-deprecated/display';
import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
import {
ThemeContext,
themeCssVariables,
} from 'twenty-ui-deprecated/theme-constants';
const DROPDOWN_ID = 'command-menu-edit-record-selection-dropdown';
packages/twenty-front/src/modules/command-menu-item/edit/components/CommandMenuItemOptionsDropdown.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useLingui } from '@lingui/react/macro';
import { type ReactElement } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconRefresh, IconTag } from 'twenty-ui/display';
import { MenuItem, MenuItemToggle } from 'twenty-ui/navigation';
import { IconRefresh, IconTag } from 'twenty-ui-deprecated/display';
import { MenuItem, MenuItemToggle } from 'twenty-ui-deprecated/navigation';
import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
type CommandMenuItemOptionsDropdownProps = Pick<
packages/twenty-front/src/modules/command-menu-item/edit/components/SidePanelCommandMenuItemEditPage.tsx
+4 -4
View File
@@ -30,10 +30,10 @@ import {
IconPinnedOff,
IconRefresh,
useIcons,
} from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { MenuItem, MenuItemDraggable } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
} from 'twenty-ui-deprecated/display';
import { Button } from 'twenty-ui-deprecated/input';
import { MenuItem, MenuItemDraggable } from 'twenty-ui-deprecated/navigation';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
import { normalizeSearchText } from '~/utils/normalizeSearchText';
packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { type CommandMenuConfirmationModalResultBrowserEventDetail } from '@/com
import { useUnmountCommand } from '@/command-menu-item/engine-command/hooks/useUnmountEngineCommand';
import { CommandComponentInstanceContext } from '@/command-menu-item/engine-command/states/contexts/CommandComponentInstanceContext';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { type ButtonAccent } from 'twenty-ui/input';
import { type ButtonAccent } from 'twenty-ui-deprecated/input';
export type HeadlessConfirmationModalEngineCommandEffectProps = {
title: string;
packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessOpenSidePanelPageEngineCommand.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
import { type MessageDescriptor } from '@lingui/core';
import { t } from '@lingui/core/macro';
import { type SidePanelPages } from 'twenty-shared/types';
import { type IconComponent } from 'twenty-ui/display';
import { type IconComponent } from 'twenty-ui-deprecated/display';
export const HeadlessOpenSidePanelPageEngineCommand = ({
page,
packages/twenty-front/src/modules/command-menu-item/engine-command/constants/EngineComponentKeyHeadlessComponentMap.tsx
+5 -1
View File
@@ -46,7 +46,11 @@ import { TidyUpWorkflowSingleRecordCommand } from '@/command-menu-item/engine-co
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { msg } from '@lingui/core/macro';
import { AppPath, SettingsPath, SidePanelPages } from 'twenty-shared/types';
import { IconHistory, IconSearch, IconSparkles } from 'twenty-ui/display';
import {
IconHistory,
IconSearch,
IconSparkles,
} from 'twenty-ui-deprecated/display';
import { EngineComponentKey } from '~/generated-metadata/graphql';
export const ENGINE_COMPONENT_KEY_COMPONENT_MAP: Record<
packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/EditDashboardSingleRecordCommand.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-c
import { useHeadlessCommandContextApi } from '@/command-menu-item/engine-command/hooks/useHeadlessCommandContextApi';
import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
import { isDefined } from 'twenty-shared/utils';
import { useResetLocationHash } from 'twenty-ui/utilities';
import { useResetLocationHash } from 'twenty-ui-deprecated/utilities';
export const EditDashboardSingleRecordCommand = () => {
const { selectedRecords } = useHeadlessCommandContextApi();
packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/EditRecordPageLayoutSingleRecordCommand.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
import { useEnterLayoutCustomizationMode } from '@/layout-customization/hooks/useEnterLayoutCustomizationMode';
import { useResetLocationHash } from 'twenty-ui/utilities';
import { useResetLocationHash } from 'twenty-ui-deprecated/utilities';
export const EditRecordPageLayoutSingleRecordCommand = () => {
const { enterLayoutCustomizationMode } = useEnterLayoutCustomizationMode();
packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemClick.ts
+1 -1
View File
@@ -10,7 +10,7 @@ import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/use
import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { type IconComponent } from 'twenty-ui/display';
import { type IconComponent } from 'twenty-ui-deprecated/display';
import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
export const useCommandMenuItemClick = ({