[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/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -11,8 +11,9 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { AnimatedExpandableContainer, useIcons } from 'twenty-ui';
 import { getAppPath } from '~/utils/navigation/getAppPath';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
+import { useIcons } from 'twenty-ui/display';
 
 export type NavigationDrawerItemForObjectMetadataItemProps = {
   objectMetadataItem: ObjectMetadataItem;

packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const isAppWaitingForFreshObjectMetadataState = createState<boolean>({
   key: 'isAppWaitingForFreshObjectMetadataState',
   defaultValue: false,

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { createState } from 'twenty-ui/utilities';
 
 export const objectMetadataItemsState = createState<ObjectMetadataItem[]>({
   key: 'objectMetadataItemsState',

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -1,11 +1,10 @@
-import { ThemeColor } from 'twenty-ui';
-
 import {
   Field,
   Object as MetadataObject,
   RelationDefinition,
   RelationDefinitionType,
 } from '~/generated-metadata/graphql';
+import { ThemeColor } from 'twenty-ui/theme';
 
 export type FieldMetadataItemOption = {
   color: ThemeColor;

packages/twenty-front/src/modules/object-metadata/utils/getIconForObjectType.ts

@@ -1,5 +1,4 @@
-import { IconCheckbox, IconComponent, IconNotes } from 'twenty-ui';
-
+import { IconCheckbox, IconComponent, IconNotes } from 'twenty-ui/display';
 export const getIconForObjectType = (
   objectType: string,
 ): IconComponent | undefined => {

packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts

@@ -1,4 +1,3 @@
-import { themeColorSchema } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@@ -8,6 +7,7 @@ import {
   RelationDefinitionType,
 } from '~/generated-metadata/graphql';
 import { camelCaseStringSchema } from '~/utils/validation-schemas/camelCaseStringSchema';
+import { themeColorSchema } from 'twenty-ui/theme';
 
 export const fieldMetadataItemSchema = (existingLabels?: string[]) => {
   return z.object({

packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts

@@ -1,8 +1,8 @@
-import { themeColorSchema } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
+import { themeColorSchema } from 'twenty-ui/theme';
 
 const selectOptionSchema = z
   .object({