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

## 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
@@ -34,7 +34,7 @@ import {
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from 'twenty-ui/layout';
} from 'twenty-ui-deprecated/layout';
import { FieldDisplayMode } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`
@@ -5,9 +5,9 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin
import { useOpenFieldWidgetFieldInputEditMode } from '@/page-layout/widgets/field/hooks/useOpenFieldWidgetFieldInputEditMode';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { styled } from '@linaria/react';
import { IconPencil } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { IconPencil } from 'twenty-ui-deprecated/display';
import { LightIconButton } from 'twenty-ui-deprecated/input';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledEditButtonWrapper = styled.div<{ isMobile: boolean }>`
opacity: ${({ isMobile }) => (isMobile ? '1' : '0')};
@@ -5,7 +5,7 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFocus';
import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledValueContainer = styled.div<{ readonly: boolean }>`
display: flex;
@@ -26,7 +26,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledShowMoreButtonContainer = styled.div`
padding-top: ${themeCssVariables.spacing[2]};
@@ -7,7 +7,7 @@ import { getJunctionConfig } from '@/object-record/record-field/ui/utils/junctio
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledContainer = styled.div`
box-sizing: border-box;
@@ -25,7 +25,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledShowMoreButtonContainer = styled.div`
padding-top: ${themeCssVariables.spacing[2]};
@@ -4,7 +4,7 @@ import { type FieldDefinition } from '@/object-record/record-field/ui/types/Fiel
import { type FieldMorphRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledContainer = styled.div`
box-sizing: border-box;
@@ -23,7 +23,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledShowMoreButtonContainer = styled.div`
padding-top: ${themeCssVariables.spacing[2]};
@@ -20,8 +20,8 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { styled } from '@linaria/react';
import { CustomError, isDefined } from 'twenty-shared/utils';
import { IconPencil, IconPlus } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { IconPencil, IconPlus } from 'twenty-ui-deprecated/display';
import { LightIconButton } from 'twenty-ui-deprecated/input';
import { RelationType } from '~/generated-metadata/graphql';
type FieldWidgetRelationEditActionProps = {
@@ -4,7 +4,7 @@ import { type FieldRelationMetadata } from '@/object-record/record-field/ui/type
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledContainer = styled.div`
box-sizing: border-box;
@@ -8,7 +8,10 @@ import { styled } from '@linaria/react';
import { lazy, Suspense, useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { isUndefined } from '@sniptt/guards';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import {
ThemeContext,
themeCssVariables,
} from 'twenty-ui-deprecated/theme-constants';
const RichTextFieldEditor = lazy(() =>
import('@/object-record/record-field/ui/meta-types/input/components/RichTextFieldEditor').then(
@@ -1,8 +1,8 @@
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { IconChevronDown } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { IconChevronDown } from 'twenty-ui-deprecated/display';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
type FieldWidgetShowMoreButtonProps = {
remainingCount: number;
@@ -8,7 +8,7 @@ import { TextArea } from '@/ui/input/components/TextArea';
import { useAtomFamilySelectorState } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorState';
import { styled } from '@linaria/react';
import { useCallback, useEffect } from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { useDebouncedCallback } from 'use-debounce';
const StyledContainer = styled.div`
@@ -22,7 +22,7 @@ import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/con
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { ComponentDecorator } from 'twenty-ui/testing';
import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
import {
FieldDisplayMode,
PageLayoutTabLayoutMode,