admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[REFACTOR] Twenty UI multi barrel (#11301)

Browse Source 
# 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
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowVersion.tsx
View File

@ -4,11 +4,11 @@ import { RUN_WORKFLOW_VERSION } from '@/workflow/graphql/mutations/runWorkflowVe
import { useApolloClient, useMutation } from '@apollo/client';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { IconSettingsAutomation } from 'twenty-ui';
import {
RunWorkflowVersionMutation,
RunWorkflowVersionMutationVariables,
} from '~/generated/graphql';
import { IconSettingsAutomation } from 'twenty-ui/display';
export const useRunWorkflowVersion = () => {
const apolloClient = useApolloClient();

2
packages/twenty-front/src/modules/workflow/states/flowState.ts
View File

@ -1,5 +1,5 @@
import { WorkflowAction, WorkflowTrigger } from '@/workflow/types/Workflow';
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const flowState = createState<
| {

3
packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
View File

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

3
packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
View File

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

3
packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
View File

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

3
packages/twenty-front/src/modules/workflow/states/workflowRunIdState.ts
View File

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

3
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
View File

@ -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%;

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

@ -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();

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

@ -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();

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

@ -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)};

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

@ -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;

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

@ -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,

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

@ -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;

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

@ -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};

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

@ -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();

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

@ -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)};

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

@ -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',

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

@ -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',

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

@ -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';

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

@ -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', ''),
);

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

@ -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', ''),
);

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

@ -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;

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

@ -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',

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

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

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

@ -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>({

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

@ -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,

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

@ -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,

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

@ -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,

5
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepInputDetail.tsx
View File

@ -12,13 +12,12 @@ import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconBrackets, useIcons } from 'twenty-ui/display';
import {
IconBrackets,
JsonNestedNode,
JsonTreeContextProvider,
ShouldExpandNodeInitiallyProps,
useIcons,
} from 'twenty-ui';
} from 'twenty-ui/json-visualizer';
export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
const { t, i18n } = useLingui();

4
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepOutputDetail.tsx
View File

@ -13,8 +13,8 @@ import {
GetJsonNodeHighlighting,
isTwoFirstDepths,
JsonTree,
useIcons,
} from 'twenty-ui';
} from 'twenty-ui/json-visualizer';
import { useIcons } from 'twenty-ui/display';
export const WorkflowRunStepOutputDetail = ({ stepId }: { stepId: string }) => {
const { t, i18n } = useLingui();

3
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx
View File

@ -3,7 +3,8 @@ import { TitleInput } from '@/ui/input/components/TitleInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
const StyledHeader = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};

4
packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx
View File

@ -1,7 +1,9 @@
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
import { ComponentDecorator, IconPlus, THEME_LIGHT } from 'twenty-ui';
import { WorkflowStepHeader } from '../WorkflowStepHeader';
import { ComponentDecorator } from 'twenty-ui/testing';
import { IconPlus } from 'twenty-ui/display';
import { THEME_LIGHT } from 'twenty-ui/theme';
const meta: Meta<typeof WorkflowStepHeader> = {
title: 'Modules/Workflow/WorkflowStepHeader',

3
packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
View File

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

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
View File

@ -37,9 +37,10 @@ import { editor } from 'monaco-editor';
import { AutoTypings } from 'monaco-editor-auto-typings';
import { useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { CodeEditor, IconCode, IconPlayerPlay, useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { isDefined } from 'twenty-shared/utils';
import { CodeEditor } from 'twenty-ui/input';
import { IconCode, IconPlayerPlay, useIcons } from 'twenty-ui/display';
const StyledCodeEditorContainer = styled.div`
display: flex;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowReadonlyActionServerlessFunction.tsx
View File

@ -14,8 +14,9 @@ import styled from '@emotion/styled';
import { Monaco } from '@monaco-editor/react';
import { editor } from 'monaco-editor';
import { AutoTypings } from 'monaco-editor-auto-typings';
import { CodeEditor, useIcons } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { CodeEditor } from 'twenty-ui/input';
import { useIcons } from 'twenty-ui/display';
const StyledCodeEditorContainer = styled.div`
display: flex;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
View File

@ -13,10 +13,11 @@ import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, SelectOption, useIcons } from 'twenty-ui';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { FieldMetadataType } from '~/generated/graphql';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type WorkflowEditActionCreateRecordProps = {
action: WorkflowCreateRecordAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
View File

@ -11,9 +11,10 @@ import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, SelectOption, useIcons } from 'twenty-ui';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type WorkflowEditActionDeleteRecordProps = {
action: WorkflowDeleteRecordAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords.tsx
View File

@ -10,8 +10,9 @@ import { useActionHeaderTypeOrThrow } from '@/workflow/workflow-steps/workflow-a
import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionIconColorOrThrow';
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, SelectOption, useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type WorkflowEditActionFindRecordsProps = {
action: WorkflowFindRecordsAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
View File

@ -20,10 +20,11 @@ import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { ConnectedAccountProvider } from 'twenty-shared/types';
import { assertUnreachable, isDefined } from 'twenty-shared/utils';
import { IconPlus, SelectOption, useIcons } from 'twenty-ui';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { IconPlus, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type WorkflowEditActionSendEmailProps = {
action: WorkflowSendEmailAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx
View File

@ -14,10 +14,11 @@ import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, SelectOption, useIcons } from 'twenty-ui';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type WorkflowEditActionUpdateRecordProps = {
action: WorkflowUpdateRecordAction;

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionCreateRecord.stories.tsx
View File

@ -1,7 +1,6 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -11,6 +10,7 @@ import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { WorkflowEditActionCreateRecord } from '../WorkflowEditActionCreateRecord';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof WorkflowEditActionCreateRecord> = {
title: 'Modules/Workflow/WorkflowEditActionCreateRecord',

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionDeleteRecord.stories.tsx
View File

@ -1,7 +1,6 @@
import { WorkflowDeleteRecordAction } from '@/workflow/types/Workflow';
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -12,6 +11,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
import { allMockPersonRecords } from '~/testing/mock-data/people';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { WorkflowEditActionDeleteRecord } from '../WorkflowEditActionDeleteRecord';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const DEFAULT_ACTION = {
id: getWorkflowNodeIdMock(),

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionFindRecords.stories.tsx
View File

@ -2,7 +2,6 @@ import { WorkflowFindRecordsAction } from '@/workflow/types/Workflow';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -11,6 +10,7 @@ import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorato
import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const DEFAULT_ACTION = {
id: getWorkflowNodeIdMock(),

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx
View File

@ -1,7 +1,6 @@
import { WorkflowUpdateRecordAction } from '@/workflow/types/Workflow';
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -12,6 +11,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
import { allMockPersonRecords } from '~/testing/mock-data/people';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { WorkflowEditActionUpdateRecord } from '../WorkflowEditActionUpdateRecord';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const DEFAULT_ACTION = {
id: getWorkflowNodeIdMock(),

7
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
View File

@ -15,13 +15,18 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useEffect, useState } from 'react';
import { IconChevronDown, IconPlus, IconTrash, useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { isNonEmptyString } from '@sniptt/guards';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import {
IconChevronDown,
IconPlus,
IconTrash,
useIcons,
} from 'twenty-ui/display';
export type WorkflowEditActionFormBuilderProps = {
action: WorkflowFormAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx
View File

@ -10,7 +10,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import camelCase from 'lodash.camelcase';
import { IconSettingsAutomation, IconX, LightIconButton } from 'twenty-ui';
import { IconSettingsAutomation, IconX } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
type WorkflowEditActionFormFieldSettingsProps = {
field: WorkflowFormActionField;

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx
View File

@ -16,8 +16,8 @@ import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/
import { useTheme } from '@emotion/react';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { useIcons } from 'twenty-ui/display';
export type WorkflowEditActionFormFillerProps = {
action: WorkflowFormAction;

3
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
View File

@ -5,7 +5,8 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
import { Select } from '@/ui/input/components/Select';
import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
import styled from '@emotion/styled';
import { SelectOption, useIcons } from 'twenty-ui';
import { SelectOption } from 'twenty-ui/input';
import { useIcons } from 'twenty-ui/display';
type WorkflowFormFieldSettingsRecordPickerProps = {
label?: string;

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormBuilder.stories.tsx
View File

@ -4,11 +4,11 @@ import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, within } from '@storybook/test';
import { userEvent } from '@storybook/testing-library';
import { FieldMetadataType } from 'twenty-shared/types';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const DEFAULT_ACTION = {
id: getWorkflowNodeIdMock(),

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx
View File

@ -2,11 +2,11 @@ import { WorkflowFormAction } from '@/workflow/types/Workflow';
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { FieldMetadataType } from 'twenty-shared/types';
import { ComponentDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
import { WorkflowEditActionFormFieldSettings } from '../WorkflowEditActionFormFieldSettings';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof WorkflowEditActionFormFieldSettings> = {
title: 'Modules/Workflow/Actions/Form/WorkflowEditActionFormFieldSettings',

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx
View File

@ -2,7 +2,6 @@ import { WorkflowFormAction } from '@/workflow/types/Workflow';
import { Meta, StoryObj } from '@storybook/react';
import { expect, within } from '@storybook/test';
import { FieldMetadataType } from 'twenty-shared/types';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
@ -10,6 +9,7 @@ import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorato
import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { WorkflowEditActionFormFiller } from '../WorkflowEditActionFormFiller';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof WorkflowEditActionFormFiller> = {
title: 'Modules/Workflow/Actions/Form/WorkflowEditActionFormFiller',

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions.ts
View File

@ -6,8 +6,8 @@ import {
IllustrationIconNumbers,
IllustrationIconOneToMany,
IllustrationIconText,
SelectOption,
} from 'twenty-ui';
} from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export const FORM_SELECT_FIELD_TYPE_OPTIONS: SelectOption<WorkflowFormFieldType>[] =
[

3
packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
View File

@ -13,7 +13,8 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt
import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
import { useSetRecoilState } from 'recoil';
import { MenuItemCommand, useIcons } from 'twenty-ui';
import { MenuItemCommand } from 'twenty-ui/navigation';
import { useIcons } from 'twenty-ui/display';
export const RightDrawerWorkflowSelectTriggerTypeContent = ({
workflow,

2
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm.tsx
View File

@ -12,8 +12,8 @@ import { useTheme } from '@emotion/react';
import { isNumber } from '@sniptt/guards';
import cron from 'cron-validate';
import { useState } from 'react';
import { useIcons } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
type WorkflowEditTriggerCronFormProps = {
trigger: WorkflowCronTrigger;

3
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
View File

@ -18,7 +18,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Trans } from '@lingui/react/macro';
import { useCallback, useMemo, useState } from 'react';
import { IconChevronLeft, IconSettings, MenuItem, useIcons } from 'twenty-ui';
import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};

3
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
View File

@ -11,7 +11,8 @@ import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/uti
import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
import { useTheme } from '@emotion/react';
import { isDefined } from 'twenty-shared/utils';
import { SelectOption, useIcons } from 'twenty-ui';
import { SelectOption } from 'twenty-ui/input';
import { useIcons } from 'twenty-ui/display';
type WorkflowEditTriggerManualFormProps = {
trigger: WorkflowManualTrigger;

2
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx
View File

@ -1,6 +1,5 @@
import { WorkflowWebhookTrigger } from '@/workflow/types/Workflow';
import { useTheme } from '@emotion/react';
import { useIcons, IconCopy } from 'twenty-ui';
import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
@ -14,6 +13,7 @@ import { workflowIdState } from '@/workflow/states/workflowIdState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { isDefined } from 'twenty-shared/utils';
import { useIcons, IconCopy } from 'twenty-ui/display';
type WorkflowEditTriggerWebhookFormProps = {
trigger: WorkflowWebhookTrigger;

3
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CronTriggerIntervalOptions.ts
View File

@ -4,8 +4,7 @@ import {
IconHours24,
IconTimeDuration60,
IconBrandDaysCounter,
} from 'twenty-ui';
} from 'twenty-ui/display';
export type CronTriggerInterval = 'DAYS' | 'HOURS' | 'MINUTES' | 'CUSTOM';
export const CRON_TRIGGER_INTERVAL_OPTIONS: Array<{

2
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions.ts
View File

@ -1,5 +1,5 @@
import { WorkflowManualTriggerAvailability } from '@/workflow/types/Workflow';
import { IconCheckbox, IconComponent, IconSquare } from 'twenty-ui';
import { IconCheckbox, IconComponent, IconSquare } from 'twenty-ui/display';
export const MANUAL_TRIGGER_AVAILABILITY_OPTIONS: Array<{
label: string;

2
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
View File

@ -11,8 +11,8 @@ import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutput
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { IconVariablePlus } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { IconVariablePlus } from 'twenty-ui/display';
const StyledDropdownVariableButtonContainer = styled(
StyledDropdownButtonContainer,

4
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
View File

@ -23,10 +23,10 @@ import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import {
IconChevronLeft,
MenuItemSelect,
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
type WorkflowVariablesDropdownFieldItemsProps = {
step: StepOutputSchema;

4
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
View File

@ -12,10 +12,10 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
import { useState } from 'react';
import {
IconChevronLeft,
MenuItemSelect,
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
type WorkflowVariablesDropdownObjectItemsProps = {
step: StepOutputSchema;

9
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
View File

@ -6,13 +6,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
import { useState } from 'react';
import {
IconX,
MenuItem,
MenuItemSelect,
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
import { IconX, OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
type WorkflowVariablesDropdownWorkflowStepItemsProps = {
dropdownId: string;