[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/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -9,7 +9,6 @@ import {
 } from '@floating-ui/react';
 import React, { useCallback, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { AppTooltip, MenuItem, MenuItemSelect, SelectOption } from 'twenty-ui';
 import { ReadonlyDeep } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -21,6 +20,9 @@ import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContaine
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useLingui } from '@lingui/react/macro';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
+import { AppTooltip } from 'twenty-ui/display';
+import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
+import { SelectOption } from 'twenty-ui/input';
 
 const StyledFloatingDropdown = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};

packages/twenty-front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
-import { IconButton, IconX } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 import { useLingui } from '@lingui/react/macro';
+import { IconButton } from 'twenty-ui/input';
+import { IconX } from 'twenty-ui/display';
 
 const StyledCloseButtonContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ModalCloseButton } from './ModalCloseButton';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledModal = styled(Modal)`
   height: 61%;

packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx

@@ -2,9 +2,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 // @ts-expect-error  // Todo: remove usage of react-data-grid
 import DataGrid, { DataGridProps } from 'react-data-grid';
-import { RGBA } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
+import { RGBA } from 'twenty-ui/theme';
 
 const StyledDataGrid = styled(DataGrid)`
   --rdg-background-color: ${({ theme }) => theme.background.primary};

packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import { CircularProgressBar, MainButton } from 'twenty-ui';
-
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { CircularProgressBar } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledFooter = styled(Modal.Footer)`
   gap: ${({ theme }) => theme.spacing(2.5)};

packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { SpreadsheetImportDialogOptions } from '../types';
+import { createState } from 'twenty-ui/utilities';
 
 export type SpreadsheetImportDialogState<T extends string> = {
   isOpen: boolean;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx

@@ -14,7 +14,9 @@ import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/Spreadshee
 import { SelectInput } from '@/ui/input/components/SelectInput';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useEffect, useState } from 'react';
-import { IconChevronDown, SelectOption, Tag, TagColor } from 'twenty-ui';
+import { IconChevronDown } from 'twenty-ui/display';
+import { SelectOption } from 'twenty-ui/input';
+import { Tag, TagColor } from 'twenty-ui/components';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { IconForbid } from 'twenty-ui';
 
 import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
@@ -7,6 +6,7 @@ import { SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumn
 import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
 import { useLingui } from '@lingui/react/macro';
 import { FieldMetadataType } from 'twenty-shared/types';
+import { IconForbid } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { AnimatedExpandableContainer } from 'twenty-ui';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 
 const getExpandableContainerTitle = <T extends string>(
   fields: SpreadsheetImportFields<T>,

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui';
+import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
 
 const StyledBanner = styled(Banner)`
   background: ${({ theme }) => theme.accent.secondary};

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx

@@ -2,7 +2,7 @@
 import { Column, FormatterProps, useRowSelection } from 'react-data-grid';
 
 import { ImportedRow } from '@/spreadsheet-import/types';
-import { Radio } from 'twenty-ui';
+import { Radio } from 'twenty-ui/input';
 
 const SELECT_COLUMN_KEY = 'select-row';
 

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -8,11 +8,11 @@ import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/Spreadsh
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
 import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
 import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
-import { Radio, RadioGroup } from 'twenty-ui';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useLingui } from '@lingui/react/macro';
 import { WorkBook } from 'xlsx-ugnis';
+import { Radio, RadioGroup } from 'twenty-ui/input';
 
 const StyledContent = styled(Modal.Content)`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx

@@ -6,7 +6,6 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
-import { CircularProgressBar } from 'twenty-ui';
 
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
@@ -15,6 +14,7 @@ import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep';
 import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';
 import { UploadStep } from './UploadStep/UploadStep';
 import { ValidationStep } from './ValidationStep/ValidationStep';
+import { CircularProgressBar } from 'twenty-ui/feedback';
 
 const StyledProgressBarContainer = styled(Modal.Content)`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
@@ -10,6 +9,7 @@ import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useLingui } from '@lingui/react/macro';
 import { SpreadsheetImportStepper } from './SpreadsheetImportStepper';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledHeader = styled(Modal.Header)`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -8,7 +8,7 @@ import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { MainButton } from 'twenty-ui';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx

@@ -2,9 +2,9 @@ import styled from '@emotion/styled';
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column } from 'react-data-grid';
 import { createPortal } from 'react-dom';
-import { AppTooltip } from 'twenty-ui';
 
 import { SpreadsheetImportFields } from '@/spreadsheet-import/types';
+import { AppTooltip } from 'twenty-ui/display';
 
 const StyledHeaderContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -25,9 +25,10 @@ import {
 // @ts-expect-error Todo: remove usage of react-data-grid`
 import { RowsChangeData } from 'react-data-grid';
 import { isDefined } from 'twenty-shared/utils';
-import { Button, IconTrash, Toggle } from 'twenty-ui';
 import { generateColumns } from './components/columns';
 import { ImportedStructuredRowMetadata } from './types';
+import { Button, Toggle } from 'twenty-ui/input';
+import { IconTrash } from 'twenty-ui/display';
 
 const StyledContent = styled(Modal.Content)`
   padding-left: ${({ theme }) => theme.spacing(6)};

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
-import { AppTooltip, Checkbox, CheckboxVariant, Toggle } from 'twenty-ui';
 
 import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import {
@@ -13,6 +12,8 @@ import { TextInput } from '@/ui/input/components/TextInput';
 
 import { isDefined } from 'twenty-shared/utils';
 import { ImportedStructuredRowMetadata } from '../types';
+import { AppTooltip } from 'twenty-ui/display';
+import { Checkbox, CheckboxVariant, Toggle } from 'twenty-ui/input';
 
 const StyledHeaderContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/types/SpreadsheetImportField.ts

@@ -1,7 +1,7 @@
 import { SpreadsheetImportFieldType } from '@/spreadsheet-import/types/SpreadsheetImportFieldType';
 import { SpreadsheetImportFieldValidationDefinition } from '@/spreadsheet-import/types/SpreadsheetImportFieldValidationDefinition';
 import { FieldMetadataType } from 'twenty-shared/types';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
 
 export type SpreadsheetImportField<T extends string> = {
   // Icon

packages/twenty-front/src/modules/spreadsheet-import/types/SpreadsheetImportFieldType.ts

@@ -1,5 +1,4 @@
-import { SelectOption } from 'twenty-ui';
-
+import { SelectOption } from 'twenty-ui/input';
 export type SpreadsheetImportCheckbox = {
   type: 'checkbox';
   // Alternate values to be treated as booleans, e.g. {yes: true, no: false}