[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/index.ts

@@ -1,30 +1,65 @@
-export * from './link/components/ActionLink';
-export * from './link/components/AdvancedSettingsToggle';
-export * from './link/components/ContactLink';
-export * from './link/components/GithubVersionLink';
-export * from './link/components/RawLink';
-export * from './link/components/RoundedLink';
-export * from './link/components/SocialLink';
-export * from './link/components/UndecoratedLink';
-export * from './link/constants/Cal';
-export * from './link/constants/GithubLink';
-export * from './menu-item/components/MenuItem';
-export * from './menu-item/components/MenuItemAvatar';
-export * from './menu-item/components/MenuItemCommand';
-export * from './menu-item/components/MenuItemCommandHotKeys';
-export * from './menu-item/components/MenuItemDraggable';
-export * from './menu-item/components/MenuItemMultiSelect';
-export * from './menu-item/components/MenuItemMultiSelectAvatar';
-export * from './menu-item/components/MenuItemMultiSelectTag';
-export * from './menu-item/components/MenuItemNavigate';
-export * from './menu-item/components/MenuItemSelect';
-export * from './menu-item/components/MenuItemSelectAvatar';
-export * from './menu-item/components/MenuItemSelectColor';
-export * from './menu-item/components/MenuItemSelectTag';
-export * from './menu-item/components/MenuItemSuggestion';
-export * from './menu-item/components/MenuItemToggle';
-export * from './menu-item/internals/components/MenuItemLeftContent';
-export * from './menu-item/internals/components/StyledMenuItemBase';
-export * from './menu-item/types/MenuItemAccent';
-export * from './navigation-bar/components/NavigationBar';
-export * from './navigation-bar/components/NavigationBarItem';
+/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, |
+ *                              |___/
+ */
+
+export { ActionLink } from './link/components/ActionLink';
+export { AdvancedSettingsToggle } from './link/components/AdvancedSettingsToggle';
+export { ContactLink } from './link/components/ContactLink';
+export { GithubVersionLink } from './link/components/GithubVersionLink';
+export { RawLink } from './link/components/RawLink';
+export { RoundedLink } from './link/components/RoundedLink';
+export { LinkType, SocialLink } from './link/components/SocialLink';
+export { UndecoratedLink } from './link/components/UndecoratedLink';
+export { CAL_LINK } from './link/constants/Cal';
+export { GITHUB_LINK } from './link/constants/GithubLink';
+export type {
+  MenuItemIconButton,
+  MenuItemProps,
+} from './menu-item/components/MenuItem';
+export { MenuItem } from './menu-item/components/MenuItem';
+export type { MenuItemAvatarProps } from './menu-item/components/MenuItemAvatar';
+export { MenuItemAvatar } from './menu-item/components/MenuItemAvatar';
+export type { MenuItemCommandProps } from './menu-item/components/MenuItemCommand';
+export { MenuItemCommand } from './menu-item/components/MenuItemCommand';
+export type { MenuItemCommandHotKeysProps } from './menu-item/components/MenuItemCommandHotKeys';
+export { MenuItemCommandHotKeys } from './menu-item/components/MenuItemCommandHotKeys';
+export type { MenuItemDraggableProps } from './menu-item/components/MenuItemDraggable';
+export { MenuItemDraggable } from './menu-item/components/MenuItemDraggable';
+export { MenuItemMultiSelect } from './menu-item/components/MenuItemMultiSelect';
+export { MenuItemMultiSelectAvatar } from './menu-item/components/MenuItemMultiSelectAvatar';
+export { MenuItemMultiSelectTag } from './menu-item/components/MenuItemMultiSelectTag';
+export type { MenuItemNavigateProps } from './menu-item/components/MenuItemNavigate';
+export { MenuItemNavigate } from './menu-item/components/MenuItemNavigate';
+export {
+  StyledMenuItemSelect,
+  MenuItemSelect,
+} from './menu-item/components/MenuItemSelect';
+export { MenuItemSelectAvatar } from './menu-item/components/MenuItemSelectAvatar';
+export {
+  colorLabels,
+  MenuItemSelectColor,
+} from './menu-item/components/MenuItemSelectColor';
+export { MenuItemSelectTag } from './menu-item/components/MenuItemSelectTag';
+export type { MenuItemSuggestionProps } from './menu-item/components/MenuItemSuggestion';
+export { MenuItemSuggestion } from './menu-item/components/MenuItemSuggestion';
+export { MenuItemToggle } from './menu-item/components/MenuItemToggle';
+export { MenuItemLeftContent } from './menu-item/internals/components/MenuItemLeftContent';
+export type { MenuItemBaseProps } from './menu-item/internals/components/StyledMenuItemBase';
+export {
+  StyledMenuItemBase,
+  StyledMenuItemLabel,
+  StyledNoIconFiller,
+  StyledMenuItemLeftContent,
+  StyledMenuItemRightContent,
+  StyledDraggableItem,
+  StyledHoverableMenuItemBase,
+  StyledMenuItemIconCheck,
+} from './menu-item/internals/components/StyledMenuItemBase';
+export type { MenuItemAccent } from './menu-item/types/MenuItemAccent';
+export { NavigationBar } from './navigation-bar/components/NavigationBar';
+export { NavigationBarItem } from './navigation-bar/components/NavigationBarItem';

packages/twenty-ui/src/navigation/link/components/SocialLink.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
+import { RoundedLink } from '@ui/navigation/link/components/RoundedLink';
 import { getDisplayValueByUrlType } from '@ui/utilities';
-import { RoundedLink } from './RoundedLink';
 
 export enum LinkType {
   Url = 'url',

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],
 };