[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/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts

@@ -52,7 +52,7 @@ import {
   IconTrash,
   IconTrashX,
   IconUser,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const DEFAULT_RECORD_ACTIONS_CONFIG: Record<
   | NoSelectionRecordActionKeys

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts

@@ -26,7 +26,7 @@ import {
   IconPlayerPlay,
   IconPower,
   IconVersions,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const WORKFLOW_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({
   config: {

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts

@@ -12,7 +12,7 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { msg } from '@lingui/core/macro';
-import { IconSettingsAutomation, IconVersions } from 'twenty-ui';
+import { IconSettingsAutomation, IconVersions } from 'twenty-ui/display';
 
 export const WORKFLOW_RUNS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({
   config: {

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts

@@ -22,7 +22,7 @@ import {
   IconPencil,
   IconSettingsAutomation,
   IconVersions,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const WORKFLOW_VERSIONS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig(
   {

packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx

@@ -12,8 +12,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { msg } from '@lingui/core/macro';
 
 import { useRecoilValue } from 'recoil';
-import { IconSettingsAutomation } from 'twenty-ui';
 import { capitalize, isDefined } from 'twenty-shared/utils';
+import { IconSettingsAutomation } from 'twenty-ui/display';
 
 export const useWorkflowRunRecordActions = ({
   objectMetadataItem,

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts

@@ -7,7 +7,7 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { msg } from '@lingui/core/macro';
-import { IconSearch } from 'twenty-ui';
+import { IconSearch } from 'twenty-ui/display';
 
 export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record<
   string,

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts

@@ -1,6 +1,6 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconSearch } from 'twenty-ui';
+import { IconSearch } from 'twenty-ui/display';
 
 export const useSearchRecordsRecordAgnosticAction = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx

@@ -7,8 +7,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { msg } from '@lingui/core/macro';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { IconSettingsAutomation } from 'twenty-ui/display';
 
 export const useRunWorkflowActions = () => {
   const isWorkflowEnabled = useIsFeatureEnabled(

packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts

@@ -6,7 +6,8 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { MessageDescriptor } from '@lingui/core';
-import { IconComponent, MenuItemAccent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 export type RecordConfigAction = {
   type: ActionMenuEntryType;

packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx

@@ -1,7 +1,8 @@
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { Key } from 'ts-key-enum';
-import { Button, getOsControlSymbol } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
 
 export const CmdEnterActionButton = ({
   title,

packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx

@@ -12,7 +12,9 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
 import { i18n } from '@lingui/core';
-import { Button, getOsControlSymbol, MenuItem } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuActionMenuDropdown = () => {
   const actionMenuEntries = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx

@@ -2,13 +2,8 @@ import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionM
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
-import {
-  AppTooltip,
-  Button,
-  IconButton,
-  TooltipDelay,
-  TooltipPosition,
-} from 'twenty-ui';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { Button, IconButton } from 'twenty-ui/input';
 
 const StyledWrapper = styled.div`
   font-size: ${({ theme }) => theme.font.size.md};

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -11,8 +11,8 @@ import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/recor
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
   const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx

@@ -1,7 +1,8 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLayoutSidebarRightExpand, getOsControlSymbol } from 'twenty-ui';
+import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
 
 const StyledButton = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -17,7 +17,8 @@ import { extractComponentState } from '@/ui/utilities/state/component-state/util
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
 import { useRecoilValue } from 'recoil';
-import { IconLayoutSidebarRightExpand, MenuItem } from 'twenty-ui';
+import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
 
 const StyledDropdownMenuContainer = styled.div`
   width: 100%;

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx

@@ -8,8 +8,8 @@ import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordShowActionMenu = () => {
   const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx

@@ -21,8 +21,11 @@ import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { Button } from 'twenty-ui/input';
+import { IconBrowserMaximize } from 'twenty-ui/display';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
+
 const StyledLink = styled(Link)`
   text-decoration: none;
 `;

packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx

@@ -14,15 +14,13 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { msg } from '@lingui/core/macro';
 import { userEvent, waitFor, within } from '@storybook/test';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import {
   ComponentDecorator,
-  IconFileExport,
-  IconHeart,
-  IconTrash,
-  MenuItemAccent,
   getCanvasElementForDropdownTesting,
-} from 'twenty-ui';
-import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+} from 'twenty-ui/testing';
+import { IconFileExport, IconHeart, IconTrash } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 const deleteMock = jest.fn();
 const addToFavoritesMock = jest.fn();

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx

@@ -7,8 +7,9 @@ import { msg } from '@lingui/core/macro';
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconCheckbox, IconTrash } from 'twenty-ui/display';
 
 const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
   title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry',

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -15,13 +15,9 @@ import {
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { msg } from '@lingui/core/macro';
-import {
-  IconCheckbox,
-  IconHeart,
-  IconTrash,
-  getCanvasElementForDropdownTesting,
-} from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui/display';
+import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
 
 const deleteMock = jest.fn();
 const markAsDoneMock = jest.fn();

packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts

@@ -2,7 +2,8 @@ import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
 import { ConfirmationModalProps } from '@/ui/layout/modal/components/ConfirmationModal';
 import { MessageDescriptor } from '@lingui/core';
 import { MouseEvent, ReactElement } from 'react';
-import { IconComponent, MenuItemAccent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 export enum ActionMenuEntryType {
   Standard = 'Standard',