[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/command-menu/components/CommandGroup.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
-import { Label } from 'twenty-ui';
+import { Label } from 'twenty-ui/display';
 
 const StyledGroupHeading = styled(Label)`
   align-items: center;

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -32,8 +32,8 @@ import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 const StyledCommandMenu = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from '@ui/display';
 import { Fragment } from 'react/jsx-runtime';
 import { isDefined } from 'twenty-shared/utils';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 const StyledChip = styled.button<{
   withText: boolean;

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx

@@ -4,11 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItem } from 'twenty-ui';
 import {
   CommandMenuContextChip,
   CommandMenuContextChipProps,
 } from './CommandMenuContextChip';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuContextChipGroups = ({
   contextChips,

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx

@@ -4,7 +4,7 @@ import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
+import { Avatar } from 'twenty-ui/display';
 
 const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
   background: ${({ theme, withIconBackground }) =>

packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,10 +1,11 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui';
 
 import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { ReactNode } from 'react';
+import { IconArrowUpRight, IconComponent } from 'twenty-ui/display';
+import { MenuItemCommand } from 'twenty-ui/navigation';
 
 export type CommandMenuItemProps = {
   label: string;

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -15,7 +15,7 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
 

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -20,14 +20,10 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  Button,
-  IconChevronLeft,
-  IconX,
-  getOsControlSymbol,
-  useIsMobile,
-} from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
+import { IconChevronLeft, IconX } from 'twenty-ui/display';
+import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
 const StyledInputContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx

@@ -9,8 +9,8 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
-import { IconArrowBackUp } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { IconArrowBackUp } from 'twenty-ui/display';
 
 export const ResetContextToSelectionCommandButton = () => {
   const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -26,10 +26,10 @@ import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/reco
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { HttpResponse, graphql } from 'msw';
-import { IconDotsVertical } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';
+import { IconDotsVertical } from 'twenty-ui/display';
 
 const openTimeout = 50;
 

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx

@@ -1,11 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  ComponentDecorator,
-  IconBuildingSkyscraper,
-  IconUser,
-} from 'twenty-ui';
 import { CommandMenuContextChip } from '../CommandMenuContextChip';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconBuildingSkyscraper, IconUser } from 'twenty-ui/display';
 
 const meta: Meta<typeof CommandMenuContextChip> = {
   title: 'Modules/CommandMenu/CommandMenuContextChip',

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import styled from '@emotion/styled';
+import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import {
-  ComponentDecorator,
   IconBuildingSkyscraper,
   IconSearch,
   IconSettingsAutomation,
   IconUser,
-} from 'twenty-ui';
-import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups';
+} from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx

@@ -6,10 +6,10 @@ import { PreComputedChipGeneratorsContext } from '@/object-metadata/contexts/Pre
 import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { ComponentDecorator } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const FIND_MANY_COMPANIES = gql`
   query FindManyCompanies(