[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/accounts/components/SettingsAccountsBlocklistInput.tsx

@@ -7,8 +7,8 @@ import { z } from 'zod';
 
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useLingui } from '@lingui/react/macro';
-import { Button } from 'twenty-ui';
 import { isValidHostname } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx

@@ -1,5 +1,4 @@
 import { useRecoilValue } from 'recoil';
-import { H2Title, Section } from 'twenty-ui';
 
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -11,6 +10,8 @@ import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/S
 import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 export const SettingsAccountsBlocklistSection = () => {
   const { t } = useLingui();

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx

@@ -1,8 +1,9 @@
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { IconButton, IconX, OverflowingTextWithTooltip } from 'twenty-ui';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { IconButton } from 'twenty-ui/input';
+import { IconX, OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type SettingsAccountsBlocklistTableRowProps = {
   blocklistItem: BlocklistItem;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -5,9 +5,10 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { Card, H2Title, IconUserPlus } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 import { t } from '@lingui/core/macro';
+import { Card } from 'twenty-ui/layout';
+import { H2Title, IconUserPlus } from 'twenty-ui/display';
 
 const StyledDetailsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx

@@ -6,12 +6,12 @@ import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
 import { useRecoilValue } from 'recoil';
-import { H2Title } from 'twenty-ui';
 import {
   CalendarChannelVisibility,
   TimelineCalendarEvent,
 } from '~/generated/graphql';
 import { t } from '@lingui/core/macro';
+import { H2Title } from 'twenty-ui/display';
 
 const StyledGeneralContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx

@@ -1,5 +1,3 @@
-import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui';
-
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +6,7 @@ import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/a
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { SettingsListCard } from '../../components/SettingsListCard';
 import { useLingui } from '@lingui/react/macro';
+import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui/display';
 
 const ProviderIcons: { [k: string]: IconComponent } = {
   google: IconGoogle,

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

@@ -2,9 +2,9 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
 import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
-import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
+import { Status } from 'twenty-ui/display';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -6,15 +6,10 @@ import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAut
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  IconGoogle,
-  IconMicrosoft,
-} from 'twenty-ui';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { Button } from 'twenty-ui/input';
+import { Card, CardContent, CardHeader } from 'twenty-ui/layout';
+import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { Card, H2Title, IconBriefcase, IconUsers, Section } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -12,6 +11,8 @@ import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/compo
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 import { t } from '@lingui/core/macro';
+import { Card, Section } from 'twenty-ui/layout';
+import { H2Title, IconBriefcase, IconUsers } from 'twenty-ui/display';
 
 type SettingsAccountsMessageChannelDetailsProps = {
   messageChannel: Pick<

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { MessageDescriptor } from '@lingui/core';
 import { Trans } from '@lingui/react';
 import { ReactNode } from 'react';
-
-import { Card, CardContent, Radio } from 'twenty-ui';
+import { Card, CardContent } from 'twenty-ui/layout';
+import { Radio } from 'twenty-ui/input';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -1,13 +1,4 @@
 import { useState } from 'react';
-import {
-  IconCalendarEvent,
-  IconDotsVertical,
-  IconMail,
-  IconRefresh,
-  IconTrash,
-  LightIconButton,
-  MenuItem,
-} from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -20,6 +11,15 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import {
+  IconCalendarEvent,
+  IconDotsVertical,
+  IconMail,
+  IconRefresh,
+  IconTrash,
+} from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type SettingsAccountsRowDropdownMenuProps = {
   account: ConnectedAccount;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx

@@ -1,18 +1,14 @@
 import styled from '@emotion/styled';
-import {
-  H2Title,
-  IconCalendarEvent,
-  IconMailCog,
-  MOBILE_VIEWPORT,
-  Section,
-  UndecoratedLink,
-} from 'twenty-ui';
 
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui/display';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Section } from 'twenty-ui/layout';
+import { UndecoratedLink } from 'twenty-ui/navigation';
 
 const StyledCardsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-
-import { Card, CardContent, Toggle } from 'twenty-ui';
+import { Card, CardContent } from 'twenty-ui/layout';
+import { Toggle } from 'twenty-ui/input';
 
 type Parameter = {
   value: boolean;

packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx

@@ -1,7 +1,7 @@
-import { H2Title, Section } from 'twenty-ui';
-
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { t } from '@lingui/core/macro';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 export const SettingsNewAccountSection = () => {
   return (

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistInput.stories.tsx

@@ -1,9 +1,9 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const updateBlockedEmailListJestFn = fn();
 

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistSection.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
 import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof SettingsAccountsBlocklistSection> = {
   title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistSection',

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTable.stories.tsx

@@ -1,10 +1,10 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
 import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const handleBlockedEmailRemoveJestFn = fn();
 

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx

@@ -1,10 +1,10 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
 import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const onRemoveJestFn = fn();
 

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelDetails.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/components/SettingsAccountsCalendarChannelDetails';
 import { CalendarChannelVisibility } from '~/generated/graphql';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof SettingsAccountsCalendarChannelDetails> = {
   title:

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelsGeneral.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof SettingsAccountsCalendarChannelsGeneral> = {
   title:

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
@@ -7,6 +6,7 @@ import { MessageChannelVisibility } from '~/generated/graphql';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof SettingsAccountsMessageChannelDetails> = {
   title: