[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;