From b8eef213433921088929494312ec85b48c60d237 Mon Sep 17 00:00:00 2001 From: Abdullah <125115953+mabdullahabaid@users.noreply.github.com> Date: Thu, 23 May 2024 10:46:31 +0500 Subject: [PATCH] [UI] Extract our ColorSample and Tag components from twenty-front to twenty-ui. (#5543) Two more components extracted out of twenty-front: `ColorSample` and `Tag`. --- .../emails/components/EmailThreadHeader.tsx | 3 +- .../components/RecordBoardColumnHeader.tsx | 3 +- .../components/MultiSelectFieldDisplay.tsx | 3 +- .../display/components/SelectFieldDisplay.tsx | 2 +- ...tingsDataModelFieldSelectFormOptionRow.tsx | 2 +- .../SettingsDataModelObjectTypeTag.tsx | 3 +- .../button/components/ColorPickerButton.tsx | 5 +- .../__stories__/ExpandableList.stories.tsx | 3 +- .../components/MenuItemMultiSelect.tsx | 3 +- .../components/MenuItemMultiSelectTag.tsx | 3 +- .../components/MenuItemSelectColor.tsx | 6 +- .../components/MenuItemSelectTag.tsx | 3 +- .../MenuItemSelectColor.stories.tsx | 2 +- packages/twenty-front/tsup.ui.index.tsx | 61 +++++++++---------- .../display/color/components/ColorSample.tsx | 2 +- .../__stories__/ColorSample.stories.tsx | 3 +- packages/twenty-ui/src/display/index.ts | 2 + .../src}/display/tag/components/Tag.tsx | 5 +- .../components/__stories__/Tag.stories.tsx | 9 +-- packages/twenty-ui/src/theme/index.ts | 1 + .../src/theme/utils/themeColorSchema.ts | 7 +++ 21 files changed, 66 insertions(+), 65 deletions(-) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/color/components/ColorSample.tsx (94%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/color/components/__stories__/ColorSample.stories.tsx (91%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tag/components/Tag.tsx (89%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/display/tag/components/__stories__/Tag.stories.tsx (88%) create mode 100644 packages/twenty-ui/src/theme/utils/themeColorSchema.ts diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx index 2dcc73c58..7063110ac 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; -import { IconMail } from 'twenty-ui'; +import { IconMail, Tag } from 'twenty-ui'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; type EmailThreadHeaderProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx index 25d6f7c1b..e4f59a85a 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx @@ -1,11 +1,10 @@ import React, { useContext, useState } from 'react'; import styled from '@emotion/styled'; -import { IconDotsVertical } from 'twenty-ui'; +import { IconDotsVertical, Tag } from 'twenty-ui'; import { RecordBoardColumnDropdownMenu } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx index 1dde1eca8..5dc2be72a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx @@ -1,5 +1,6 @@ +import { Tag } from 'twenty-ui'; + import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; type MultiSelectFieldDisplayProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx index 6181a9eaa..403fb268f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx @@ -1,4 +1,4 @@ -import { Tag } from '@/ui/display/tag/components/Tag'; +import { Tag } from 'twenty-ui'; import { useSelectField } from '../../hooks/useSelectField'; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx index b5f85cf60..933e4e7e5 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -2,6 +2,7 @@ import { useMemo } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { + ColorSample, IconCheck, IconDotsVertical, IconGripVertical, @@ -12,7 +13,6 @@ import { v4 } from 'uuid'; import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem'; import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/utils/getOptionValueFromLabel'; -import { ColorSample } from '@/ui/display/color/components/ColorSample'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { TextInput } from '@/ui/input/components/TextInput'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx index e077383c4..0af9646eb 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx @@ -1,5 +1,6 @@ +import { Tag } from 'twenty-ui'; + import { ObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel'; -import { Tag } from '@/ui/display/tag/components/Tag'; type SettingsDataModelObjectTypeTagProps = { objectTypeLabel: ObjectTypeLabel; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx index e4042580c..9a7f9fdb1 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx @@ -1,10 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { ColorSample, ColorSampleProps } from 'twenty-ui'; -import { - ColorSample, - ColorSampleProps, -} from '@/ui/display/color/components/ColorSample'; import { LightIconButton, LightIconButtonProps, diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx index 9294f2625..4ccb01805 100644 --- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx @@ -2,9 +2,8 @@ import styled from '@emotion/styled'; import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/test'; -import { ComponentDecorator } from 'packages/twenty-ui'; +import { ComponentDecorator, Tag } from 'twenty-ui'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx index 44ff578cf..e2b1b00d9 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent, Tag } from 'twenty-ui'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx index 14ebec217..bd6a9b5ef 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx @@ -1,4 +1,5 @@ -import { Tag } from '@/ui/display/tag/components/Tag'; +import { Tag } from 'twenty-ui'; + import { Checkbox, CheckboxShape, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx index e22b91f5d..3f4f3426f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx @@ -1,10 +1,6 @@ import { useTheme } from '@emotion/react'; -import { IconCheck } from 'twenty-ui'; +import { ColorSample, ColorSampleVariant, IconCheck } from 'twenty-ui'; -import { - ColorSample, - ColorSampleVariant, -} from '@/ui/display/color/components/ColorSample'; import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx index 2f6baf22c..889465823 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; -import { IconCheck } from 'twenty-ui'; +import { IconCheck, Tag } from 'twenty-ui'; -import { Tag } from '@/ui/display/tag/components/Tag'; import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx index 015ab7f9e..be234750b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx @@ -4,10 +4,10 @@ import { CatalogDimension, CatalogOptions, CatalogStory, + ColorSampleVariant, ComponentDecorator, } from 'twenty-ui'; -import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample'; import { MAIN_COLOR_NAMES, ThemeColor, diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index ce31aa7a3..88c77cb2e 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/packages/twenty-front/tsup.ui.index.tsx @@ -11,35 +11,34 @@ declare module '@emotion/react' { } export * from 'twenty-ui'; -export * from './src/modules/ui/display/tag/components/Tag' -export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar' -export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar' -export * from './src/modules/ui/input/button/components/Button' -export * from './src/modules/ui/input/button/components/ButtonGroup' -export * from './src/modules/ui/input/button/components/FloatingButton' -export * from './src/modules/ui/input/button/components/FloatingButtonGroup' -export * from './src/modules/ui/input/button/components/FloatingIconButton' -export * from './src/modules/ui/input/button/components/FloatingIconButtonGroup' -export * from './src/modules/ui/input/button/components/LightButton' -export * from './src/modules/ui/navigation/link/components/ActionLink' -export * from './src/modules/ui/input/button/components/LightIconButton' -export * from './src/modules/ui/input/button/components/MainButton' -export * from './src/modules/ui/input/button/components/RoundedIconButton' -export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard' -export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker' -export * from './src/modules/ui/input/components/AutosizeTextInput' -export * from './src/modules/ui/input/components/Checkbox' -export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput' -export * from './src/modules/ui/input/components/IconPicker' -export * from './src/modules/ui/input/components/ImageInput' -export * from './src/modules/ui/input/components/Radio' -export * from './src/modules/ui/input/components/RadioGroup' +export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar'; +export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar'; export * from './src/modules/ui/input/button/components/Button'; -export * from './src/modules/ui/input/components/Select' -export * from './src/modules/ui/input/components/TextArea' -export * from './src/modules/ui/input/components/TextInput' -export * from './src/modules/ui/input/components/Toggle' -export * from './src/modules/ui/input/editor/components/BlockEditor' +export * from './src/modules/ui/input/button/components/ButtonGroup'; +export * from './src/modules/ui/input/button/components/FloatingButton'; +export * from './src/modules/ui/input/button/components/FloatingButtonGroup'; +export * from './src/modules/ui/input/button/components/FloatingIconButton'; +export * from './src/modules/ui/input/button/components/FloatingIconButtonGroup'; +export * from './src/modules/ui/input/button/components/LightButton'; +export * from './src/modules/ui/navigation/link/components/ActionLink'; +export * from './src/modules/ui/input/button/components/LightIconButton'; +export * from './src/modules/ui/input/button/components/MainButton'; +export * from './src/modules/ui/input/button/components/RoundedIconButton'; +export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard'; +export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker'; +export * from './src/modules/ui/input/components/AutosizeTextInput'; +export * from './src/modules/ui/input/components/Checkbox'; +export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput'; +export * from './src/modules/ui/input/components/IconPicker'; +export * from './src/modules/ui/input/components/ImageInput'; +export * from './src/modules/ui/input/components/Radio'; +export * from './src/modules/ui/input/components/RadioGroup'; +export * from './src/modules/ui/input/button/components/Button'; +export * from './src/modules/ui/input/components/Select'; +export * from './src/modules/ui/input/components/TextArea'; +export * from './src/modules/ui/input/components/TextInput'; +export * from './src/modules/ui/input/components/Toggle'; +export * from './src/modules/ui/input/editor/components/BlockEditor'; export * from './src/modules/ui/navigation/link/components/ContactLink'; export * from './src/modules/ui/navigation/link/components/RawLink'; export * from './src/modules/ui/navigation/link/components/RoundedLink'; @@ -54,6 +53,6 @@ export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect'; export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar'; export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor'; export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle'; -export * from './src/modules/ui/navigation/bread-crumb/components/Breadcrumb' -export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar' -export * from './src/modules/ui/navigation/step-bar/components/StepBar' +export * from './src/modules/ui/navigation/bread-crumb/components/Breadcrumb'; +export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar'; +export * from './src/modules/ui/navigation/step-bar/components/StepBar'; diff --git a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx b/packages/twenty-ui/src/display/color/components/ColorSample.tsx similarity index 94% rename from packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx rename to packages/twenty-ui/src/display/color/components/ColorSample.tsx index 9b1a41e05..3fbac7f13 100644 --- a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx +++ b/packages/twenty-ui/src/display/color/components/ColorSample.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; +import { ThemeColor } from '@ui/theme'; export type ColorSampleVariant = 'default' | 'pipeline'; diff --git a/packages/twenty-front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx b/packages/twenty-ui/src/display/color/components/__stories__/ColorSample.stories.tsx similarity index 91% rename from packages/twenty-front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx rename to packages/twenty-ui/src/display/color/components/__stories__/ColorSample.stories.tsx index e1d9491f1..aebee622f 100644 --- a/packages/twenty-front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx +++ b/packages/twenty-ui/src/display/color/components/__stories__/ColorSample.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; + +import { ComponentDecorator } from '@ui/testing'; import { ColorSample } from '../ColorSample'; diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index df849749b..74833f5db 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -4,6 +4,7 @@ export * from './checkmark/components/AnimatedCheckmark'; export * from './checkmark/components/Checkmark'; export * from './chip/components/Chip'; export * from './chip/components/EntityChip'; +export * from './color/components/ColorSample'; export * from './icon/components/IconAddressBook'; export * from './icon/components/IconGmail'; export * from './icon/components/IconGoogle'; @@ -16,6 +17,7 @@ export * from './icon/hooks/useIcons'; export * from './icon/providers/IconsProvider'; export * from './icon/states/iconsState'; export * from './icon/types/IconComponent'; +export * from './tag/components/Tag'; export * from './tooltip/AppTooltip'; export * from './tooltip/OverflowingTextWithTooltip'; export * from './typography/components/H1Title'; diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx b/packages/twenty-ui/src/display/tag/components/Tag.tsx similarity index 89% rename from packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx rename to packages/twenty-ui/src/display/tag/components/Tag.tsx index 2df73fd35..a75143807 100644 --- a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx +++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx @@ -1,9 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconComponent, OverflowingTextWithTooltip } from 'twenty-ui'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; -import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; +import { IconComponent, OverflowingTextWithTooltip } from '@ui/display'; +import { ThemeColor, themeColorSchema } from '@ui/theme'; const StyledTag = styled.h3<{ color: ThemeColor; diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx b/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx similarity index 88% rename from packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx rename to packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx index 00e62f750..010892377 100644 --- a/packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx +++ b/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui'; import { - MAIN_COLOR_NAMES, - ThemeColor, -} from '@/ui/theme/constants/MainColorNames'; + CatalogDecorator, + CatalogStory, + ComponentDecorator, +} from '@ui/testing'; +import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme'; import { Tag } from '../Tag'; diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts index 883ecca32..ca92f2bd6 100644 --- a/packages/twenty-ui/src/theme/index.ts +++ b/packages/twenty-ui/src/theme/index.ts @@ -33,3 +33,4 @@ export * from './constants/ThemeLight'; export * from './provider/ThemeProvider'; export * from './types/ThemeType'; export * from './utils/getNextThemeColor'; +export * from './utils/themeColorSchema'; diff --git a/packages/twenty-ui/src/theme/utils/themeColorSchema.ts b/packages/twenty-ui/src/theme/utils/themeColorSchema.ts new file mode 100644 index 000000000..050179b0d --- /dev/null +++ b/packages/twenty-ui/src/theme/utils/themeColorSchema.ts @@ -0,0 +1,7 @@ +import { z } from 'zod'; + +import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme'; + +export const themeColorSchema = z.enum( + MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]], +);