[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-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
-import { IconComponent, Tag } from '@ui/display';
+import { Tag } from '@ui/components';
+import { IconComponent } from '@ui/display';
 import { Checkbox } from '@ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { ThemeColor } from '@ui/theme';

packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx

@@ -1,4 +1,5 @@
-import { IconComponent, Tag } from '@ui/display';
+import { Tag } from '@ui/components';
+import { IconComponent } from '@ui/display';
 import { Checkbox, CheckboxShape, CheckboxSize } from '@ui/input';
 import { ThemeColor } from '@ui/theme';
 import {

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx

@@ -5,7 +5,8 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { IconComponent, Tag } from '@ui/display';
+import { Tag } from '@ui/components';
+import { IconComponent } from '@ui/display';
 import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx

@@ -8,6 +8,7 @@ import {
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
+  RecoilRootDecorator,
 } from '@ui/testing';
 import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
 
@@ -25,7 +26,7 @@ export const Default: Story = {
     text: 'First option',
     avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
   },
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, RecoilRootDecorator],
 };
 
 export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
@@ -79,5 +80,5 @@ export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
       } as CatalogOptions,
     },
   },
-  decorators: [CatalogDecorator],
+  decorators: [CatalogDecorator, RecoilRootDecorator],
 };

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx

@@ -8,6 +8,7 @@ import {
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
+  RecoilRootDecorator,
 } from '@ui/testing';
 import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
 
@@ -27,7 +28,7 @@ export const Default: Story = {
   argTypes: {
     className: { control: false },
   },
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, RecoilRootDecorator],
 };
 
 export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
@@ -87,5 +88,5 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
       } as CatalogOptions,
     },
   },
-  decorators: [CatalogDecorator],
+  decorators: [CatalogDecorator, RecoilRootDecorator],
 };