[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/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -27,8 +27,9 @@ import {
 import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { THEME_COMMON, Tag, TagColor } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { THEME_COMMON } from 'twenty-ui/theme';
+import { Tag, TagColor } from 'twenty-ui/components';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx

@@ -17,8 +17,8 @@ import {
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { isCreateStepNode } from '@/workflow/workflow-diagram/utils/isCreateStepNode';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
-import { useIcons } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 
 export const WorkflowDiagramCanvasEditableEffect = () => {
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx

@@ -10,8 +10,8 @@ import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWor
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useIcons } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 
 export const WorkflowDiagramCanvasReadonlyEffect = () => {
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx

@@ -4,7 +4,8 @@ import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/Nod
 import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import styled from '@emotion/styled';
 import { Position } from '@xyflow/react';
-import { IconButton, IconPlus } from 'twenty-ui';
+import { IconButton } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   padding-top: ${({ theme }) => theme.spacing(3)};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -9,8 +9,9 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
-import { Label, Loader, OverflowingTextWithTooltip } from 'twenty-ui';
 import { capitalize, isDefined } from 'twenty-shared/utils';
+import { Label, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
 
 const StyledStepNodeContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx

@@ -2,7 +2,8 @@ import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/compone
 import { WorkflowDiagramStepNodeIcon } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeIcon';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
-import { FloatingIconButton, IconTrash } from 'twenty-ui';
+import { FloatingIconButton } from 'twenty-ui/input';
+import { IconTrash } from 'twenty-ui/display';
 
 export const WorkflowDiagramStepNodeEditableContent = ({
   data,

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeIcon.tsx

@@ -4,7 +4,7 @@ import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/W
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useIcons } from 'twenty-ui';
+import { useIcons } from 'twenty-ui/display';
 
 const StyledStepNodeLabelIconContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge.tsx

@@ -7,7 +7,7 @@ import {
   EdgeProps,
   getStraightPath,
 } from '@xyflow/react';
-import { Label } from 'twenty-ui';
+import { Label } from 'twenty-ui/display';
 
 const StyledLabel = styled(Label)`
   color: ${({ theme }) => theme.tag.text.turquoise};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramCanvasEffect.tsx

@@ -14,8 +14,8 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { useIcons } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 
 export const WorkflowRunDiagramCanvasEffect = () => {
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunOutputVisualizer.tsx

@@ -1,7 +1,7 @@
 import { useWorkflowRunUnsafe } from '@/workflow/hooks/useWorkflowRunUnsafe';
 import styled from '@emotion/styled';
-import { CodeEditor } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { CodeEditor } from 'twenty-ui/input';
 
 const StyledSourceCodeContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(4)};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramCreateStepNode.stories.tsx

@@ -2,8 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { ComponentDecorator } from 'twenty-ui';
 import { WorkflowDiagramCreateStepNode } from '../WorkflowDiagramCreateStepNode';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof WorkflowDiagramCreateStepNode> = {
   title: 'Modules/Workflow/WorkflowDiagramCreateStepNode',

packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import '@xyflow/react/dist/style.css';
 import { ReactflowDecorator } from '~/testing/decorators/ReactflowDecorator';
 import { WorkflowDiagramEmptyTrigger } from '../WorkflowDiagramEmptyTrigger';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof WorkflowDiagramEmptyTrigger> = {
   title: 'Modules/Workflow/WorkflowDiagramEmptyTrigger',

packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramStepNodeEditableContent.stories.tsx

@@ -5,10 +5,10 @@ import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/Wo
 import { fn } from '@storybook/test';
 import '@xyflow/react/dist/style.css';
 import { ComponentProps } from 'react';
-import { CatalogDecorator, CatalogStory } from 'twenty-ui';
 import { ReactflowDecorator } from '~/testing/decorators/ReactflowDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { WorkflowDiagramStepNodeEditableContent } from '../WorkflowDiagramStepNodeEditableContent';
+import { CatalogDecorator, CatalogStory } from 'twenty-ui/testing';
 
 type ComponentState = 'default' | 'hover' | 'selected';
 

packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts

@@ -1,5 +1,4 @@
-import { THEME_COMMON } from 'twenty-ui';
-
+import { THEME_COMMON } from 'twenty-ui/theme';
 export const NODE_ICON_LEFT_MARGIN = Number(
   THEME_COMMON.spacing(2).replace('px', ''),
 );

packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts

@@ -1,5 +1,4 @@
-import { THEME_COMMON } from 'twenty-ui';
-
+import { THEME_COMMON } from 'twenty-ui/theme';
 export const NODE_ICON_WIDTH = Number(
   THEME_COMMON.spacing(6).replace('px', ''),
 );

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useRightDrawerState.ts

@@ -1,7 +1,7 @@
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { useRecoilValue } from 'recoil';
-import { useIsMobile } from 'twenty-ui';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 export const useRightDrawerState = (): {
   rightDrawerState: CommandMenuAnimationVariant;

packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { createState } from 'twenty-ui/utilities';
 
 export const workflowDiagramState = createState<WorkflowDiagram | undefined>({
   key: 'workflowDiagramState',

packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const workflowDiagramTriggerNodeSelectionState = createState<
   string | undefined
 >({

packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { RefObject } from 'react';
+import { createState } from 'twenty-ui/utilities';
 
 export const workflowReactFlowRefState =
   createState<RefObject<HTMLDivElement> | null>({

packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const workflowSelectedNodeState = createState<string | undefined>({
   key: 'workflowSelectedNodeState',
   defaultValue: undefined,

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowRunStatusTagProps.ts

@@ -1,5 +1,5 @@
 import { WorkflowRunStatus } from '@/workflow/types/Workflow';
-import { TagColor } from 'twenty-ui';
+import { TagColor } from 'twenty-ui/components';
 
 export const getWorkflowRunStatusTagProps = ({
   workflowRunStatus,

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowVersionStatusTagProps.ts

@@ -1,5 +1,5 @@
 import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
-import { TagColor } from 'twenty-ui';
+import { TagColor } from 'twenty-ui/components';
 
 export const getWorkflowVersionStatusTagProps = ({
   workflowVersionStatus,