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`.
2026-06-08 18:12:28 +02:00
parent a91e737e69
commit c596a5e342
2320 changed files with 6313 additions and 4856 deletions
@@ -1,9 +1,9 @@
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconCopy } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconCopy } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';

 const StyledContainer = styled.div`
@@ -5,7 +5,7 @@ import { useDebouncedCallback } from 'use-debounce';

 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useMutation } from '@apollo/client/react';
 import { UpdateApiKeyDocument } from '~/generated-metadata/graphql';

@@ -7,8 +7,8 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { IconChevronRight } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { IconChevronRight } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { type ApiKey } from '~/generated-metadata/graphql';

 const StyledEllipsisLabel = styled.div`
@@ -7,7 +7,7 @@ import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useQuery } from '@apollo/client/react';
 import { GetApiKeysDocument } from '~/generated-metadata/graphql';

@@ -1,6 +1,6 @@
 import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers';
 import { Select } from '@/ui/input/components/Select';
-import { type IconComponent, useIcons } from 'twenty-ui/display';
+import { type IconComponent, useIcons } from 'twenty-ui-deprecated/display';

 type SettingsDevelopersRoleSelectorProps = {
  value?: string | null | undefined;
@@ -18,9 +18,9 @@ import {
  isDefined,
  isValidUrl,
 } from 'twenty-shared/utils';
-import { H2Title, IconTrash } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { Section } from 'twenty-ui/layout';
+import { H2Title, IconTrash } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { Section } from 'twenty-ui-deprecated/layout';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { SettingsDatabaseEventsForm } from '@/settings/components/SettingsDatabaseEventsForm';

@@ -7,9 +7,12 @@ import { getUrlHostnameOrThrow, isValidUrl } from 'twenty-shared/utils';
 import {
  IconChevronRight,
  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { useContext } from 'react';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { type Webhook } from '~/generated-metadata/graphql';

 const StyledIconChevronRightContainer = styled.span`
@@ -8,7 +8,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useQuery } from '@apollo/client/react';
 import { GetWebhooksDocument } from '~/generated-metadata/graphql';

@@ -24,10 +24,13 @@ import {
  IconNorthStar,
  IconSettings,
  IconTable,
-} from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const WEBHOOK_ENTITY_DROPDOWN_ID = 'webhook-entity-select';

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

 const meta: Meta<typeof ApiKeyInput> = {
@@ -1,7 +1,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import {
+  ComponentDecorator,
+  RouterDecorator,
+} from 'twenty-ui-deprecated/testing';

 const meta: Meta<typeof SettingsApiKeysFieldItemTableRow> = {
  title: 'Modules/Settings/Developers/ApiKeys/SettingsApiKeysFieldItemTableRow',
@@ -3,7 +3,10 @@ import { expect, within } from 'storybook/test';

 import { SettingsDevelopersWebhookForm } from '@/settings/developers/components/SettingsDevelopersWebhookForm';
 import { WebhookFormMode } from '@/settings/developers/constants/WebhookFormMode';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import {
+  ComponentDecorator,
+  RouterDecorator,
+} from 'twenty-ui-deprecated/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';