[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/data-model/objects/components/SettingsDataModelObjectSummary.tsx

@@ -1,10 +1,10 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
+import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
 
 export type SettingsDataModelObjectSummaryProps = {
   className?: string;

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectTypeTag.tsx

@@ -1,5 +1,5 @@
-import { Tag } from 'twenty-ui';
 import { ObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
+import { Tag } from 'twenty-ui/components';
 
 type SettingsDataModelObjectTypeTagProps = {
   objectTypeLabel: ObjectTypeLabel;

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
-import { Card, FloatingButton, IconEye } from 'twenty-ui';
 
 import { SettingsPath } from '@/types/SettingsPath';
 import { useLingui } from '@lingui/react/macro';
 import DarkCoverImage from '../../assets/cover-dark.png';
 import LightCoverImage from '../../assets/cover-light.png';
+import { Card } from 'twenty-ui/layout';
+import { FloatingButton } from 'twenty-ui/input';
+import { IconEye } from 'twenty-ui/display';
 
 const StyledCoverImageContainer = styled(Card)`
   align-items: center;

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx

@@ -1,14 +1,9 @@
-import {
-  IconArchiveOff,
-  IconDotsVertical,
-  IconTrash,
-  LightIconButton,
-  MenuItem,
-} from 'twenty-ui';
-
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type SettingsObjectInactiveMenuDropDownProps = {
   isCustomObject: boolean;

packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx

@@ -1,8 +1,8 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsObjectInactiveMenuDropDown } from '../SettingsObjectInactiveMenuDropDown';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const handleActivateMockFunction = fn();
 const handleDeleteMockFunction = fn();

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -12,15 +12,15 @@ import { useLingui } from '@lingui/react/macro';
 import { plural } from 'pluralize';
 import { Controller, useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared/utils';
+import { StringKeyOf } from 'type-fest';
+import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 import {
   AppTooltip,
-  Card,
   IconInfoCircle,
   IconRefresh,
   TooltipDelay,
-} from 'twenty-ui';
-import { StringKeyOf } from 'type-fest';
-import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
+} from 'twenty-ui/display';
+import { Card } from 'twenty-ui/layout';
 
 type SettingsDataModelObjectAboutFormProps = {
   disableEdition?: boolean;

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { IconCircleOff, SelectOption, useIcons } from 'twenty-ui';
 import { ZodError, isDirty, z } from 'zod';
 
 import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
@@ -14,6 +13,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Select } from '@/ui/input/components/Select';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
+import { IconCircleOff, useIcons } from 'twenty-ui/display';
+import { SelectOption } from 'twenty-ui/input';
 
 export const settingsDataModelObjectIdentifiersFormSchema =
   objectMetadataItemSchema.pick({

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx

@@ -8,7 +8,7 @@ import { SettingsDataModelFieldPreviewCard } from '@/settings/data-model/fields/
 import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
 import { SettingsDataModelObjectIdentifiersForm } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
 import { Trans } from '@lingui/react/macro';
-import { Card, CardContent } from 'twenty-ui';
+import { Card, CardContent } from 'twenty-ui/layout';
 
 type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/__stories__/SettingsDataModelObjectAboutForm.stories.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -8,6 +7,8 @@ import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecora
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
+import { ComponentDecorator } from 'twenty-ui/testing';
+
 const mockedCompanyObjectMetadataItem = generatedMockObjectMetadataItems.find(
   (item) => item.nameSingular === 'company',
 );