[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
-import { AnimatedEaseIn } from 'twenty-ui';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -4,7 +4,6 @@ import { expect } from '@storybook/test';
 import { ReactNode, act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
-import { iconsState } from 'twenty-ui';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
@@ -15,6 +14,7 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { renderHook } from '@testing-library/react';
 import { email, mocks, password, results, token } from '../__mocks__/useAuth';
+import { iconsState } from 'twenty-ui/display';
 
 const redirectSpy = jest.fn();
 

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -8,7 +8,6 @@ import {
   useRecoilValue,
   useSetRecoilState,
 } from 'recoil';
-import { iconsState } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -65,6 +64,7 @@ import { APP_LOCALES } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
+import { iconsState } from 'twenty-ui/display';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);

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

@@ -4,7 +4,11 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { useHandleResendEmailVerificationToken } from '@/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken';
 import { useTheme } from '@emotion/react';
-import { AnimatedEaseIn, IconMail, Loader, MainButton, RGBA } from 'twenty-ui';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { IconMail } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
+import { RGBA } from 'twenty-ui/theme';
 
 const StyledMailContainer = styled.div`
   align-items: center;

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

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, Loader, MainButton } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
@@ -28,6 +27,9 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

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

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { Controller, useFormContext } from 'react-hook-form';
-import { StyledText } from 'twenty-ui';
+import { StyledText } from 'twenty-ui/display';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

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

@@ -4,11 +4,12 @@ import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, MainButton } from 'twenty-ui';
 
 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';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

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

@@ -15,8 +15,9 @@ import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Loader, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledForm = styled.form`
   align-items: center;

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

@@ -7,7 +7,8 @@ import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconGoogle, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();

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

@@ -6,7 +6,8 @@ import {
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconMicrosoft, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithMicrosoft = () => {
   const theme = useTheme();

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

@@ -7,8 +7,9 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();

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

@@ -11,7 +11,8 @@ import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, HorizontalSeparator } from 'twenty-ui';
+import { ActionLink } from 'twenty-ui/navigation';
+import { HorizontalSeparator } from 'twenty-ui/display';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { UserExists } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export const availableSSOIdentityProvidersForAuthState = createState<
   NonNullable<UserExists['availableWorkspaces']>[0]['sso']

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,7 +1,7 @@
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { createState } from '@ui/utilities/state/utils/createState';
 import { syncEffect } from 'recoil-sync';
+import { createState } from 'twenty-ui/utilities';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { User } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export type CurrentUser = Pick<
   User,

packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { UserWorkspace } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export type CurrentUserWorkspace = Pick<
   UserWorkspace,

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { createState } from 'twenty-ui/utilities';
 
 export type CurrentWorkspaceMember = Omit<
   WorkspaceMember,

packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts

@@ -1,5 +1,5 @@
 import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const currentWorkspaceMembersState = createState<
   CurrentWorkspaceMember[]

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { Role, Workspace } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export type CurrentWorkspace = Pick<
   Workspace,

packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',
   defaultValue: false,

packages/twenty-front/src/modules/auth/states/previousUrlState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',
   defaultValue: '',

packages/twenty-front/src/modules/auth/states/signInUpModeState.ts

@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',

packages/twenty-front/src/modules/auth/states/signInUpStepState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export enum SignInUpStep {
   Init = 'init',
   Email = 'email',

packages/twenty-front/src/modules/auth/states/tokenPairState.ts

@@ -1,7 +1,7 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
+import { createState } from 'twenty-ui/utilities';
+
 export const tokenPairState = createState<AuthTokenPair | null>({
   key: 'tokenPairState',
   defaultValue: null,

packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { PublicWorkspaceDataOutput } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export const workspacePublicDataState =
   createState<PublicWorkspaceDataOutput | null>({

packages/twenty-front/src/modules/auth/states/workspaces.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { Workspace } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export type Workspaces = Pick<
   Workspace,