[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/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx

@@ -9,9 +9,10 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
 import { ReactElement, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { H2Title, IconComponent, IconKey, Section } from 'twenty-ui';
 import { IdentityProviderType } from '~/generated/graphql';
 import { t } from '@lingui/core/macro';
+import { H2Title, IconComponent, IconKey } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledInputsContainer = styled.div`
   display: grid;

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx

@@ -14,9 +14,9 @@ import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { IconKey } from 'twenty-ui';
 import { useGetSsoIdentityProvidersQuery } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { IconKey } from 'twenty-ui/display';
 
 const StyledLink = styled(Link, {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'isDisabled',

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentityProviderRowRightContainer.tsx

@@ -3,9 +3,9 @@
 import { SettingsSecuritySSORowDropdownMenu } from '@/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
 import { getColorBySSOIdentityProviderStatus } from '@/settings/security/utils/getColorBySSOIdentityProviderStatus';
-import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 import { UnwrapRecoilValue } from 'recoil';
+import { Status } from 'twenty-ui/display';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx

@@ -7,8 +7,10 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { Controller, useFormContext } from 'react-hook-form';
-import { Button, H2Title, IconCopy, Section } from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { Button } from 'twenty-ui/input';
+import { H2Title, IconCopy } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledInputsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx

@@ -9,18 +9,18 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { ChangeEvent, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
 import {
-  Button,
   H2Title,
   HorizontalSeparator,
   IconCheck,
   IconCopy,
   IconDownload,
   IconUpload,
-  Section,
-} from 'twenty-ui';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { isDefined } from 'twenty-shared/utils';
+} from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledUploadFileContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx

@@ -1,13 +1,3 @@
-/* @license Enterprise */
-
-import {
-  IconArchive,
-  IconDotsVertical,
-  IconTrash,
-  LightIconButton,
-  MenuItem,
-} from 'twenty-ui';
-
 import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider';
 import { useUpdateSSOIdentityProvider } from '@/settings/security/hooks/useUpdateSSOIdentityProvider';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
@@ -20,6 +10,9 @@ import { useLingui } from '@lingui/react/macro';
 import { UnwrapRecoilValue } from 'recoil';
 import { SsoIdentityProviderStatus } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { IconArchive, IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type SettingsSecuritySSORowDropdownMenuProps = {
   SSOIdp: UnwrapRecoilValue<typeof SSOIdentitiesProvidersState>[0];

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityAuthProvidersOptionsList.tsx

@@ -7,17 +7,17 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  Card,
-  IconGoogle,
-  IconLink,
-  IconMicrosoft,
-  IconPassword,
-} from 'twenty-ui';
 import { AuthProviders } from '~/generated-metadata/graphql';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 import { capitalize } from 'twenty-shared/utils';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { Card } from 'twenty-ui/layout';
+import {
+  IconGoogle,
+  IconLink,
+  IconMicrosoft,
+  IconPassword,
+} from 'twenty-ui/display';
 
 const StyledSettingsSecurityOptionsList = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx

@@ -8,7 +8,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilState } from 'recoil';
-import { IconAt, IconMailCog, Status } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
@@ -16,6 +15,7 @@ import { SettingsSecurityApprovedAccessDomainRowDropdownMenu } from '@/settings/
 import { SettingsSecurityApprovedAccessDomainValidationEffect } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect';
 import { useGetApprovedAccessDomainsQuery } from '~/generated/graphql';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+import { IconAt, IconMailCog, Status } from 'twenty-ui/display';
 
 const StyledLink = styled(Link)`
   text-decoration: none;

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu.tsx

@@ -1,10 +1,3 @@
-import {
-  IconDotsVertical,
-  IconTrash,
-  LightIconButton,
-  MenuItem,
-} from 'twenty-ui';
-
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -14,6 +7,9 @@ import { UnwrapRecoilValue, useSetRecoilState } from 'recoil';
 import { useDeleteApprovedAccessDomainMutation } from '~/generated/graphql';
 import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
 import { isDefined } from 'twenty-shared/utils';
+import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type SettingsSecurityApprovedAccessDomainRowDropdownMenuProps = {
   approvedAccessDomain: UnwrapRecoilValue<typeof approvedAccessDomainsState>[0];

packages/twenty-front/src/modules/settings/security/states/ApprovedAccessDomainsState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { ApprovedAccessDomain } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export const approvedAccessDomainsState = createState<
   Omit<ApprovedAccessDomain, '__typename'>[]

packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts

@@ -1,7 +1,7 @@
 /* @license Enterprise */
 
 import { SSOIdentityProvider } from '@/settings/security/types/SSOIdentityProvider';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const SSOIdentitiesProvidersState = createState<
   Omit<SSOIdentityProvider, '__typename'>[]

packages/twenty-front/src/modules/settings/security/utils/getColorBySSOIdentityProviderStatus.ts

@@ -1,7 +1,5 @@
-/* @license Enterprise */
-
-import { ThemeColor } from 'twenty-ui';
 import { SsoIdentityProviderStatus } from '~/generated/graphql';
+import { ThemeColor } from 'twenty-ui/theme';
 
 export const getColorBySSOIdentityProviderStatus: Record<
   SsoIdentityProviderStatus,

packages/twenty-front/src/modules/settings/security/utils/guessSSOIdentityProviderIconByUrl.ts

@@ -1,12 +1,9 @@
-/* @license Enterprise */
-
 import {
   IconComponent,
   IconGoogle,
   IconKey,
   IconMicrosoftOutlook,
-} from 'twenty-ui';
-
+} from 'twenty-ui/display';
 export const guessSSOIdentityProviderIconByUrl = (
   url: string,
 ): IconComponent => {