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`.

packages/twenty-front/src/modules/auth/components/Logo.tsx

@@ -2,9 +2,9 @@ import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { AppPath } from 'twenty-shared/types';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui/display';
-import { UndecoratedLink } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Avatar } from 'twenty-ui-deprecated/display';
+import { UndecoratedLink } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useRedirectToDefaultDomain } from '~/modules/domain-manager/hooks/useRedirectToDefaultDomain';
 

packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export const StyledOnboardingContentContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[8]};

packages/twenty-front/src/modules/auth/components/SubTitle.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSubTitle = styled.div`
   color: ${themeCssVariables.font.color.secondary};

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { AnimatedEaseIn } from 'twenty-ui-deprecated/utilities';
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -8,7 +8,7 @@ import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { ModalContent } from 'twenty-ui/layout';
+import { ModalContent } from 'twenty-ui-deprecated/layout';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';

packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx

@@ -1,7 +1,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Logo } from '@/auth/components/Logo';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import {
+  ComponentDecorator,
+  RouterDecorator,
+} from 'twenty-ui-deprecated/testing';
 
 const logoUrl = 'https://picsum.photos/192/192';
 

packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx

@@ -5,7 +5,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 // Mock component that just renders the error state of VerifyEmailEffect directly
 // (since normal VerifyEmailEffect has async logic that's hard to test in Storybook)
 import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
-import { ModalContent } from 'twenty-ui/layout';
+import { ModalContent } from 'twenty-ui-deprecated/layout';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => {

packages/twenty-front/src/modules/auth/constants/AuthModalConfig.ts

@@ -1,4 +1,4 @@
-import { type ModalOverlay, type ModalSize } from 'twenty-ui/layout';
+import { type ModalOverlay, type ModalSize } from 'twenty-ui-deprecated/layout';
 import { AppPath } from 'twenty-shared/types';
 
 type AuthModalConfigType = {

packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx

@@ -15,10 +15,10 @@ import {
   IconMail,
   IconMailX,
   IconMicrosoft,
-} from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
+} from 'twenty-ui-deprecated/display';
+import { MainButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { AnimatedEaseIn } from 'twenty-ui-deprecated/utilities';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/auth/sign-in-up/components/FooterNote.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro';
 
 import { useWorkspaceBypass } from '@/auth/sign-in-up/hooks/useWorkspaceBypass';
 import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledCopyContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -4,7 +4,10 @@ import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUr
 import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
-import { ClickToActionLink, UndecoratedLink } from 'twenty-ui/navigation';
+import {
+  ClickToActionLink,
+  UndecoratedLink,
+} from 'twenty-ui-deprecated/navigation';
 
 import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials';
@@ -29,8 +32,11 @@ import {
   HorizontalSeparator,
   IconChevronRight,
   IconPlus,
-} 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';
 import { type AvailableWorkspace } from '~/generated-metadata/graphql';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -12,8 +12,8 @@ import { workspaceAuthBypassProvidersState } from '@/workspace/states/workspaceA
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
-import { HorizontalSeparator } from 'twenty-ui/display';
-import { ClickToActionLink } from 'twenty-ui/navigation';
+import { HorizontalSeparator } from 'twenty-ui-deprecated/display';
+import { ClickToActionLink } from 'twenty-ui-deprecated/navigation';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
 export const SignInUpWorkspaceScopeForm = () => {

packages/twenty-front/src/modules/auth/sign-in-up/components/WorkspaceSelectionFooter.tsx

@@ -1,6 +1,6 @@
 import { useAuth } from '@/auth/hooks/useAuth';
 import { Trans } from '@lingui/react/macro';
-import { ClickToActionLink } from 'twenty-ui/navigation';
+import { ClickToActionLink } from 'twenty-ui-deprecated/navigation';
 
 export const WorkspaceSelectionFooter = () => {
   const { signOut } = useAuth();

packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx

@@ -1,8 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
-import { ModalContent } from 'twenty-ui/layout';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ModalContent } from 'twenty-ui-deprecated/layout';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 const RenderWithModalContent = (

packages/twenty-front/src/modules/auth/sign-in-up/components/__tests__/SignInUpGlobalScopeForm.test.tsx

@@ -3,7 +3,7 @@ import { I18nProvider } from '@lingui/react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Provider as JotaiProvider } from 'jotai';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
-import { ThemeProvider } from 'twenty-ui/theme-constants';
+import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';
 
 import { SignInUpGlobalScopeForm } from '@/auth/sign-in-up/components/SignInUpGlobalScopeForm';
 import {

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { Pill } from 'twenty-ui/components';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Pill } from 'twenty-ui-deprecated/components';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledPillContainer = styled.span`
   position: absolute;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpEmailField.tsx

@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { Controller, useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx

@@ -6,8 +6,11 @@ import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { StyledText } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { StyledText } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx

@@ -7,8 +7,8 @@ import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/gue
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator } from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
+import { HorizontalSeparator } from 'twenty-ui-deprecated/display';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
 export const SignInUpSSOIdentityProviderSelection = () => {

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx

@@ -9,11 +9,14 @@ import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import QRCode from 'react-qr-code';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import { IconCopy } from 'twenty-ui/display';
-import { Loader } from 'twenty-ui/feedback';
-import { MainButton } from 'twenty-ui/input';
+import { IconCopy } from 'twenty-ui-deprecated/display';
+import { Loader } from 'twenty-ui-deprecated/feedback';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { useContext } from 'react';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx

@@ -18,9 +18,9 @@ import { OTPInput, type SlotProps } from 'input-otp';
 import { useState } from 'react';
 import { Controller } from 'react-hook-form';
 import { AppPath } from 'twenty-shared/types';
-import { MainButton } from 'twenty-ui/input';
-import { ClickToActionLink } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MainButton } from 'twenty-ui-deprecated/input';
+import { ClickToActionLink } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithCredentials.tsx

@@ -21,8 +21,8 @@ import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared/utils';
-import { Loader } from 'twenty-ui/feedback';
-import { MainButton } from 'twenty-ui/input';
+import { Loader } from 'twenty-ui-deprecated/feedback';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { InputHint } from '@/ui/input/components/InputHint';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx

@@ -9,13 +9,13 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
 import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useLingui } from '@lingui/react/macro';
 import { memo, useContext } from 'react';
-import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
+import { HorizontalSeparator, IconGoogle } from 'twenty-ui-deprecated/display';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { LastUsedPill } from './LastUsedPill';
 import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 const GoogleIcon = memo(() => {
   const { theme } = useContext(ThemeContext);
   return <IconGoogle size={theme.icon.size.md} />;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx

@@ -9,13 +9,16 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
 import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
+import {
+  HorizontalSeparator,
+  IconMicrosoft,
+} from 'twenty-ui-deprecated/display';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { LastUsedPill } from './LastUsedPill';
 import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 export const SignInUpWithMicrosoft = ({
   action,

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx

@@ -12,12 +12,12 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
+import { HorizontalSeparator, IconLock } from 'twenty-ui-deprecated/display';
+import { MainButton } from 'twenty-ui-deprecated/input';
 import { LastUsedPill } from './LastUsedPill';
 import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 export const SignInUpWithSSO = () => {
   const { theme } = useContext(ThemeContext);