[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/ui/field/display/components/ActorDisplay.tsx

@@ -1,8 +1,9 @@
 import { FieldActorValue } from '@/object-record/record-field/types/FieldMetadata';
 
 import { useMemo } from 'react';
+import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { AvatarChip } from 'twenty-ui/components';
 import {
-  AvatarChip,
   IconApi,
   IconCalendar,
   IconCsv,
@@ -14,8 +15,7 @@ import {
   IconRobot,
   IconSettingsAutomation,
   IconWebhook,
-} from 'twenty-ui';
-import { ConnectedAccountProvider } from 'twenty-shared/types';
+} from 'twenty-ui/display';
 
 type ActorDisplayProps = Partial<FieldActorValue> & {
   avatarUrl?: string | null;

packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx

@@ -1,7 +1,6 @@
-import { Chip, ChipVariant } from 'twenty-ui';
-
 import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { Chip, ChipVariant } from 'twenty-ui/components';
 
 type ArrayDisplayProps = {
   value: FieldArrayValue;

packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@linaria/react';
-import { IconCheck, IconX, THEME_COMMON } from 'twenty-ui';
+import { IconCheck, IconX } from 'twenty-ui/display';
+import { THEME_COMMON } from 'twenty-ui/theme';
 
 const spacing = THEME_COMMON.spacingMultiplicator * 1;
 const iconSizeSm = THEME_COMMON.icon.size.sm;

packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx

@@ -1,8 +1,7 @@
 import { MouseEvent } from 'react';
-
-import { ContactLink } from 'twenty-ui';
 import { EllipsisDisplay } from './EllipsisDisplay';
 import { isDefined } from 'twenty-shared/utils';
+import { ContactLink } from 'twenty-ui/navigation';
 
 const validateEmail = (email: string) => {
   // const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
-import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
+import { RoundedLink } from 'twenty-ui/navigation';
+import { THEME_COMMON } from 'twenty-ui/theme';
 
 type EmailsDisplayProps = {
   value?: FieldEmailsValue;

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -1,5 +1,5 @@
 import { isNonEmptyString } from '@sniptt/guards';
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
 
 type LinkDisplayProps = {
   value?: { url: string; label?: string };

packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
 
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@@ -9,6 +8,7 @@ import {
   getUrlHostnameOrThrow,
   isDefined,
 } from 'twenty-shared/utils';
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
 
 type LinksDisplayProps = {
   value?: FieldLinksValue;

packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx

@@ -1,7 +1,9 @@
-import { SelectOption, Tag, THEME_COMMON } from 'twenty-ui';
-
 import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
 import styled from '@emotion/styled';
+import { SelectOption } from 'twenty-ui/input';
+import { Tag } from 'twenty-ui/components';
+import { THEME_COMMON } from 'twenty-ui/theme';
+
 const spacing1 = THEME_COMMON.spacing(1);
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx

@@ -1,7 +1,7 @@
 import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
 import { MouseEvent } from 'react';
-import { ContactLink } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { ContactLink } from 'twenty-ui/navigation';
 
 interface PhoneDisplayProps {
   value: PhoneDisplayValueProps;

packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import React, { useMemo } from 'react';
-import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@@ -9,6 +8,8 @@ import { DEFAULT_PHONE_CALLING_CODE } from '@/object-record/record-field/meta-ty
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { logError } from '~/utils/logError';
 import { isDefined } from 'twenty-shared/utils';
+import { RoundedLink } from 'twenty-ui/navigation';
+import { THEME_COMMON } from 'twenty-ui/theme';
 
 type PhonesDisplayProps = {
   value?: FieldPhonesValue;

packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx

@@ -1,4 +1,6 @@
-import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { Tag } from 'twenty-ui/components';
+import { ThemeColor } from 'twenty-ui/theme';
 
 type SelectDisplayProps = {
   color: ThemeColor | 'transparent';

packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -1,5 +1,5 @@
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type TextDisplayProps = {
   text: string;

packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx

@@ -2,9 +2,8 @@ import styled from '@emotion/styled';
 import { MouseEvent } from 'react';
 
 import { checkUrlType } from '~/utils/checkUrlType';
-
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
 import { EllipsisDisplay } from './EllipsisDisplay';
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
 
 const StyledRawLink = styled(RoundedLink)`
   overflow: hidden;

packages/twenty-front/src/modules/ui/field/display/components/__stories__/ActorDisplay.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
 import { ActorDisplay } from '@/ui/field/display/components/ActorDisplay';
-import { CatalogDecorator } from 'twenty-ui';
+import { CatalogDecorator } from 'twenty-ui/testing';
 
 const meta: Meta = {
   title: 'UI/Display/ActorDisplay',

packages/twenty-front/src/modules/ui/field/display/components/__stories__/perf/EllipsisDisplay.perf.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta = {
   title: 'UI/Input/EllipsisDisplay/EllipsisDisplay',

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -12,8 +12,8 @@ import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDr
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilValue } from 'recoil';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledAddressContainer = styled.div`
   padding: 4px 8px;

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -2,11 +2,12 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { IMaskInput, IMaskInputProps } from 'react-imask';
-import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
+import { IconComponent } from 'twenty-ui/display';
+import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 
 type StyledInputProps = React.ComponentProps<'input'> &
   IMaskInputProps<HTMLInputElement>;

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react';
-import { Nullable } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import {
@@ -9,6 +8,7 @@ import {
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { Nullable } from 'twenty-ui/utilities';
 
 export type DateInputProps = {
   value: Nullable<Date>;

packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx

@@ -13,8 +13,9 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemMultiSelectTag, SelectOption } from 'twenty-ui';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
+import { MenuItemMultiSelectTag } from 'twenty-ui/navigation';
+import { SelectOption } from 'twenty-ui/input';
 
 type MultiSelectInputProps = {
   selectableListComponentInstanceId: string;

packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx

@@ -1,10 +1,11 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
-import { IconTwentyStarFilled, THEME_COMMON, ThemeContext } from 'twenty-ui';
 
 import { useClearField } from '@/object-record/record-field/hooks/useClearField';
 import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
 import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
+import { IconTwentyStarFilled } from 'twenty-ui/display';
+import { THEME_COMMON, ThemeContext } from 'twenty-ui/theme';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/field/input/components/SelectInput.tsx

@@ -1,6 +1,6 @@
 import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { SelectOption } from 'twenty-ui';
+import { SelectOption } from 'twenty-ui/input';
 
 type SelectInputProps = {
   selectableListComponentInstanceId: string;

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { isDefined } from 'twenty-shared/utils';
+import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 
 export type TextAreaInputProps = {
   disabled?: boolean;

packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
+import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 
 export const StyledTextInput = styled.input`
   margin: 0;