[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/admin-panel/components/SettingsAdminContent.tsx

@@ -5,7 +5,7 @@ import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/Setting
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
-import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui';
+import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui/display';
 
 export const SettingsAdminContent = () => {
   const currentUser = useRecoilValue(currentUserState);

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvCopyableText.tsx

@@ -3,8 +3,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { IconCopy, OverflowingTextWithTooltip } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
+import { IconCopy, OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 const StyledEllipsisLabel = styled.div`
   white-space: nowrap;

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx

@@ -5,10 +5,10 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-
-import { Card, H2Title, IconHeartRateMonitor, Section } from 'twenty-ui';
 import { useGetEnvironmentVariablesGroupedQuery } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { Card, Section } from 'twenty-ui/layout';
+import { H2Title, IconHeartRateMonitor } from 'twenty-ui/display';
 
 const StyledGroupContainer = styled.div``;
 

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariablesRow.tsx

@@ -6,13 +6,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import {
-  AnimatedExpandableContainer,
-  IconChevronRight,
-  IconEye,
-  IconEyeOff,
-  LightIconButton,
-} from 'twenty-ui';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
+import { IconChevronRight, IconEye, IconEyeOff } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
 
 type SettingsAdminEnvVariablesRowProps = {
   variable: {

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -11,15 +11,6 @@ import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  Button,
-  H2Title,
-  IconId,
-  IconMail,
-  IconSearch,
-  IconUser,
-  Section,
-} from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useUserLookupAdminPanelMutation } from '~/generated/graphql';
 
@@ -30,6 +21,15 @@ import { SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID } from '@/settings/admin-p
 import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
+import {
+  H2Title,
+  IconId,
+  IconMail,
+  IconSearch,
+  IconUser,
+} from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx

@@ -4,7 +4,8 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Card, IconComponent } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
+import { IconComponent } from 'twenty-ui/display';
 
 const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionContainer.tsx

@@ -3,10 +3,10 @@ import { checkTwentyVersionExists } from '@/settings/admin-panel/utils/checkTwen
 import { fetchLatestTwentyRelease } from '@/settings/admin-panel/utils/fetchLatestTwentyRelease';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-import { GITHUB_LINK } from '@ui/navigation/link/constants/GithubLink';
 import { useEffect, useState } from 'react';
-import { IconCircleDot, IconStatusChange } from 'twenty-ui';
 import packageJson from '../../../../../package.json';
+import { GITHUB_LINK } from 'twenty-ui/navigation';
+import { IconCircleDot, IconStatusChange } from 'twenty-ui/display';
 
 const StyledActionLink = styled.a`
   align-items: center;

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -1,15 +1,3 @@
-import {
-  AvatarChip,
-  Button,
-  H2Title,
-  IconEyeShare,
-  IconHome,
-  IconId,
-  IconUser,
-  Section,
-  Toggle,
-} from 'twenty-ui';
-
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
@@ -39,6 +27,16 @@ import {
   useUpdateWorkspaceFeatureFlagMutation,
 } from '~/generated/graphql';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
+import { AvatarChip } from 'twenty-ui/components';
+import { Button, Toggle } from 'twenty-ui/input';
+import {
+  H2Title,
+  IconEyeShare,
+  IconHome,
+  IconId,
+  IconUser,
+} from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 type SettingsAdminWorkspaceContentProps = {
   activeWorkspace: WorkspaceInfo | undefined;

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/JsonDataIndicatorHealthStatus.tsx

@@ -2,8 +2,9 @@ import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/heal
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { JsonTree, Section } from 'twenty-ui';
 import { AdminPanelHealthServiceStatus } from '~/generated/graphql';
+import { JsonTree } from 'twenty-ui/json-visualizer';
+import { Section } from 'twenty-ui/layout';
 
 const StyledDetailsContainer = styled.div`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx

@@ -1,6 +1,7 @@
 import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
 import styled from '@emotion/styled';
-import { H2Title, Section } from 'twenty-ui';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
   padding-left: ${({ theme }) => theme.spacing(2)};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatus.tsx

@@ -1,8 +1,9 @@
 import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader';
 import { SettingsHealthStatusListCard } from '@/settings/admin-panel/health-status/components/SettingsHealthStatusListCard';
 import { t } from '@lingui/core/macro';
-import { H2Title, Section } from 'twenty-ui';
 import { useGetSystemHealthStatusQuery } from '~/generated/graphql';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 export const SettingsAdminHealthStatus = () => {
   const { data, loading: loadingHealthStatus } = useGetSystemHealthStatusQuery({

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusRightContainer.tsx

@@ -1,5 +1,5 @@
-import { Status } from 'twenty-ui';
 import { AdminPanelHealthServiceStatus } from '~/generated/graphql';
+import { Status } from 'twenty-ui/display';
 
 export const SettingsAdminHealthStatusRightContainer = ({
   status,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsHealthStatusListCard.tsx

@@ -1,6 +1,9 @@
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useTheme } from '@emotion/react';
+import { HealthIndicatorId, SystemHealthService } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { SettingsAdminHealthStatusRightContainer } from './SettingsAdminHealthStatusRightContainer';
 import {
   IconAppWindow,
   IconComponent,
@@ -8,10 +11,7 @@ import {
   IconServer2,
   IconTool,
   IconUserCircle,
-} from 'twenty-ui';
-import { HealthIndicatorId, SystemHealthService } from '~/generated/graphql';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { SettingsAdminHealthStatusRightContainer } from './SettingsAdminHealthStatusRightContainer';
+} from 'twenty-ui/display';
 
 const HealthStatusIcons: { [k in HealthIndicatorId]: IconComponent } = {
   [HealthIndicatorId.database]: IconDatabase,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx

@@ -2,12 +2,13 @@ import { Select } from '@/ui/input/components/Select';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { H2Title, Section } from 'twenty-ui';
 import {
   AdminPanelWorkerQueueHealth,
   QueueMetricsTimeRange,
 } from '~/generated/graphql';
 import { WorkerMetricsGraph } from './WorkerMetricsGraph';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 type WorkerQueueMetricsSectionProps = {
   queue: AdminPanelWorkerQueueHealth;