[UI] Extract our ColorSample and Tag components from twenty-front to …

…twenty-ui. (twentyhq#5543) Two more components extracted out of twenty-front: `ColorSample` and `Tag`.
synapsenet-arena · May 23, 2024 · b8eef21 · b8eef21
1 parent 6b1d4e0
commit b8eef21
Show file tree

Hide file tree

Showing 21 changed files with 66 additions and 65 deletions.
diff --git 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/...les/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/...les/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/...ules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx b/...ules/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/...c/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx b/...c/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/...s/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx b/...s/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/...s/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx b/...s/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
@@ -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/...t/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx b/...t/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
@@ -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/...es/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/...es/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
@@ -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
@@ -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/...rc/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/...rc/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
@@ -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/.../display/color/components/ColorSample.tsx → .../display/color/components/ColorSample.tsx b/.../display/color/components/ColorSample.tsx → .../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/...nents/__stories__/ColorSample.stories.tsx → ...nents/__stories__/ColorSample.stories.tsx b/...nents/__stories__/ColorSample.stories.tsx → ...nents/__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
@@ -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/...modules/ui/display/tag/components/Tag.tsx → ...nty-ui/src/display/tag/components/Tag.tsx b/...modules/ui/display/tag/components/Tag.tsx → ...nty-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/...ag/components/__stories__/Tag.stories.tsx → ...ag/components/__stories__/Tag.stories.tsx b/...ag/components/__stories__/Tag.stories.tsx → ...ag/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
@@ -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
@@ -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[]],
+);