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/page-layout/components/PageLayoutGridLayout.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ import {
WidthProvider,
} from 'react-grid-layout';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const disabledTransitionsClass = css`
.react-grid-layout {
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTab
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { styled } from '@linaria/react';
import { useMemo } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledGridOverlay = styled.div<{
isDragSelecting?: boolean;
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
+5 -2
View File
@@ -5,8 +5,11 @@ import {
IconRadiusBottomRight,
IconRadiusTopLeft,
IconRadiusTopRight,
} from 'twenty-ui/display';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
} from 'twenty-ui-deprecated/display';
import {
ThemeContext,
themeCssVariables,
} from 'twenty-ui-deprecated/theme-constants';
type WidgetHandleAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
type WidgetHorizontalHandleAxis = 'n' | 's';
type WidgetVerticalHandleAxis = 'e' | 'w';
packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { styled } from '@linaria/react';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledContainer = styled.div`
background: ${themeCssVariables.background.secondary};
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx
+3 -3
View File
@@ -10,8 +10,8 @@ import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { IconPlus, useIcons } from 'twenty-ui/display';
import { TabButton } from 'twenty-ui/input';
import { IconPlus, useIcons } from 'twenty-ui-deprecated/display';
import { TabButton } from 'twenty-ui-deprecated/input';
import { isPageLayoutTabDraggingComponentState } from '@/page-layout/states/isPageLayoutTabDraggingComponentState';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -48,7 +48,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { type PageLayoutType } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListDroppableMoreButton.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { Droppable } from '@hello-pangea/dnd';
import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
import { TabMoreButton } from '@/ui/layout/tab-list/components/TabMoreButton';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
type PageLayoutTabListDroppableMoreButtonProps = {
hiddenTabsCount: number;
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListNewTabDropdownContent.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import { useLingui } from '@lingui/react/macro';
import { useCallback, useMemo } from 'react';
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { IconPlus, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { IconPlus, useIcons } from 'twenty-ui-deprecated/display';
import { MenuItem } from 'twenty-ui-deprecated/navigation';
type PageLayoutTabListNewTabDropdownContentProps = {
onCreate: () => void;
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useContext } from 'react';
import { SidePanelPages } from 'twenty-shared/types';
import { ThemeContext } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
import { type PageLayoutType } from '~/generated-metadata/graphql';
const StyledOverflowDropdownListDraggableWrapper = styled.div`
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx
+2 -2
View File
@@ -4,8 +4,8 @@ import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/stat
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { styled } from '@linaria/react';
import { StyledTabContainer, TabContent } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { StyledTabContainer, TabContent } from 'twenty-ui-deprecated/input';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
type PageLayoutTabListReorderableTabProps = {
tab: SingleTabProps;
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListVisibleTabs.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import {
type DraggableStateSnapshot,
Droppable,
} from '@hello-pangea/dnd';
import { TabButton } from 'twenty-ui/input';
import { TabButton } from 'twenty-ui-deprecated/input';
import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx
+7 -4
View File
@@ -3,15 +3,18 @@ import { type MouseEvent, useContext, useState } from 'react';
import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { IconPencil } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { IconPencil } from 'twenty-ui-deprecated/display';
import { LightIconButton } from 'twenty-ui-deprecated/input';
import {
StyledHoverableMenuItemBase,
StyledMenuItemIconCheck,
StyledMenuItemLabel,
StyledMenuItemLeftContent,
} from 'twenty-ui/navigation';
import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
} from 'twenty-ui-deprecated/navigation';
import {
themeCssVariables,
ThemeContext,
} from 'twenty-ui-deprecated/theme-constants';
const StyledTextContainer = styled.div`
align-items: center;
display: flex;
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx
+3 -3
View File
@@ -8,9 +8,9 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { type DraggableProvided } from '@hello-pangea/dnd';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { StyledTabContainer, TabContent } from 'twenty-ui/input';
import { MenuItemSelectAvatar } from 'twenty-ui/navigation';
import { ThemeContext } from 'twenty-ui/theme-constants';
import { StyledTabContainer, TabContent } from 'twenty-ui-deprecated/input';
import { MenuItemSelectAvatar } from 'twenty-ui-deprecated/navigation';
import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
const StyledDraggableWrapper = styled.div`
cursor: grab;
display: flex;
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabsRenderer.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ import { styled } from '@linaria/react';
import { useMemo } from 'react';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { useIsMobile } from 'twenty-ui/utilities';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
const StyledContainer = styled.div<{ hasPinnedTab: boolean }>`
display: grid;
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
+2 -2
View File
@@ -14,8 +14,8 @@ import {
} from '@hello-pangea/dnd';
import { styled } from '@linaria/react';
import { type ReactNode, useId } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
const StyledVerticalListContainer = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { useIsMobile } from 'twenty-ui/utilities';
import { useIsMobile } from 'twenty-ui-deprecated/utilities';
import { getPageLayoutVerticalListViewerVariant } from '@/page-layout/components/utils/getPageLayoutVerticalListViewerVariant';
import { type PageLayoutVerticalListViewerVariant } from '@/page-layout/types/PageLayoutVerticalListViewerVariant';
@@ -7,7 +7,7 @@ import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledVerticalListContainer = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutTabList.stories.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { type DropResult, type ResponderProvided } from '@hello-pangea/dnd';
import { styled } from '@linaria/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useMemo, useState } from 'react';
import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
import { ComponentWithRouterDecorator } from 'twenty-ui-deprecated/testing';
import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
@@ -11,7 +11,7 @@ import { PageLayoutEditModeProviderContext } from '@/page-layout/contexts/PageLa
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { PageLayoutType } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`