refactor: extract constants into separate files

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

@@ -1,22 +1,17 @@
+import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
+import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
+import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
+import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
+import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize } from 'twenty-shared';
-import { isDefined, OverflowingTextWithTooltip, THEME_COMMON } from 'twenty-ui';
+import { isDefined, OverflowingTextWithTooltip } from 'twenty-ui';
 
 type Variant = 'placeholder';
 
-const NODE_HANDLE_WIDTH_PX = 4;
-const NODE_HANDLE_HEIGHT_PX = NODE_HANDLE_WIDTH_PX;
-export const NODE_ICON_WIDTH = Number(
-  THEME_COMMON.spacing(6).replace('px', ''),
-);
-export const NODE_ICON_LEFT_MARGIN = Number(
-  THEME_COMMON.spacing(2).replace('px', ''),
-);
-export const NODE_BORDER_WIDTH = 1;
-
 const StyledStepNodeContainer = styled.div`
   display: flex;
   flex-direction: column;

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

@@ -1,9 +1,7 @@
-import {
-  NODE_BORDER_WIDTH,
-  NODE_ICON_LEFT_MARGIN,
-  NODE_ICON_WIDTH,
-  StyledHandle,
-} from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
+import { StyledHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
+import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
+import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
+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';

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

@@ -0,0 +1 @@
+export const NODE_BORDER_WIDTH = 1;

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

@@ -0,0 +1,3 @@
+import { NODE_HANDLE_WIDTH_PX } from './NodeHandleWidthPx';
+
+export const NODE_HANDLE_HEIGHT_PX = NODE_HANDLE_WIDTH_PX;

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

@@ -0,0 +1 @@
+export const NODE_HANDLE_WIDTH_PX = 4;

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

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

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

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