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

[UI] Extract our ColorSample and Tag components from twenty-front to twenty-ui. (#5543)

Browse Source 
Two more components extracted out of twenty-front: `ColorSample` and
`Tag`.
This commit is contained in:
Abdullah
2024-05-23 10:46:31 +05:00
committed by GitHub
parent 6b1d4e0744
commit b8eef21343
21 changed files with 66 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx
View File

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

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
View File

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

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx
View File

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

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx
View File

@ -1,4 +1,4 @@
import { Tag } from '@/ui/display/tag/components/Tag';
import { Tag } from 'twenty-ui';
import { useSelectField } from '../../hooks/useSelectField';

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

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

3
packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectTypeTag.tsx
View File

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

5
packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx
View File

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

3
packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx
View File

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

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
View File

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

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
View File

@ -1,4 +1,5 @@
import { Tag } from '@/ui/display/tag/components/Tag';
import { Tag } from 'twenty-ui';
import {
Checkbox,
CheckboxShape,

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx
View File

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

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx
View File

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

2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
View File

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

61
packages/twenty-front/tsup.ui.index.tsx
View File

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

2
packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx → packages/twenty-ui/src/display/color/components/ColorSample.tsx
View File

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

3
packages/twenty-front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx → packages/twenty-ui/src/display/color/components/__stories__/ColorSample.stories.tsx
View File

@ -1,5 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { ComponentDecorator } from '@ui/testing';
import { ColorSample } from '../ColorSample';

2
packages/twenty-ui/src/display/index.ts
View File

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

5
packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx → packages/twenty-ui/src/display/tag/components/Tag.tsx
View File

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

9
packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx → packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx
View File

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

1
packages/twenty-ui/src/theme/index.ts
View File

@ -33,3 +33,4 @@ export * from './constants/ThemeLight';
export * from './provider/ThemeProvider';
export * from './types/ThemeType';
export * from './utils/getNextThemeColor';
export * from './utils/themeColorSchema';

7
packages/twenty-ui/src/theme/utils/themeColorSchema.ts Normal file
View File

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