twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 20:42:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: pick select field option colors (#2748)

Browse Source 
Closes #2433

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs 2023-11-29 12:49:41 +01:00 committed by GitHub
parent aa4bd0146b
commit 3617abb0e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 186 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts
View File

@ -8,7 +8,7 @@ import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/stat
import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
import { savedBoardColumnsState } from '@/ui/object/record-board/states/savedBoardColumnsState';
import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
import { isThemeColor } from '@/ui/theme/utils/castStringAsThemeColor';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { logError } from '~/utils/logError';
@ -90,7 +90,11 @@ export const useUpdateCompanyBoard = () =>
const newBoardColumns: BoardColumnDefinition[] =
orderedPipelineSteps?.map((pipelineStep) => {
if (!isThemeColor(pipelineStep.color)) {
const colorValidationResult = themeColorSchema.safeParse(
pipelineStep.color,
);
if (!colorValidationResult.success) {
logError(
`Color ${pipelineStep.color} is not recognized in useUpdateCompanyBoard.`,
);
@ -99,8 +103,8 @@ export const useUpdateCompanyBoard = () =>
return {
id: pipelineStep.id,
title: pipelineStep.name,
colorCode: isThemeColor(pipelineStep.color)
? pipelineStep.color
colorCode: colorValidationResult.success
? colorValidationResult.data
: undefined,
position: pipelineStep.position ?? 0,
};

10
front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@ -46,9 +46,11 @@ const StyledButton = styled(Button)`
`;
const getNextColor = (currentColor: ThemeColor) => {
const colors = Object.keys(mainColors) as ThemeColor[];
const currentColorIndex = colors.findIndex((color) => color === currentColor);
return colors[(currentColorIndex + 1) % colors.length];
const currentColorIndex = mainColorNames.findIndex(
(color) => color === currentColor,
);
const nextColorIndex = (currentColorIndex + 1) % mainColorNames.length;
return mainColorNames[nextColorIndex];
};
export const SettingsObjectFieldSelectForm = ({

56
front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
View File

@ -2,6 +2,7 @@ import { useMemo } from 'react';
import styled from '@emotion/styled';
import { v4 } from 'uuid';
import { ColorSample } from '@/ui/display/color/components/ColorSample';
import {
IconCheck,
IconDotsVertical,
@ -16,6 +17,8 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { mainColorNames } from '@/ui/theme/constants/colors';
import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@ -33,6 +36,11 @@ const StyledRow = styled.div`
padding: ${({ theme }) => theme.spacing(1)} 0;
`;
const StyledColorSample = styled(ColorSample)`
cursor: pointer;
margin-right: 14px;
`;
const StyledOptionInput = styled(TextInput)`
flex: 1 0 auto;
margin-right: ${({ theme }) => theme.spacing(2)};
@ -48,22 +56,56 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
onRemove,
option,
}: SettingsObjectFieldSelectFormOptionRowProps) => {
const dropdownScopeId = useMemo(() => `select-field-option-row-${v4()}`, []);
const dropdownScopeIds = useMemo(() => {
const baseScopeId = `select-field-option-row-${v4()}`;
return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` };
}, []);
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown: closeColorDropdown } = useDropdown({
dropdownScopeId: dropdownScopeIds.color,
});
const { closeDropdown: closeActionsDropdown } = useDropdown({
dropdownScopeId: dropdownScopeIds.actions,
});
return (
<StyledRow>
<DropdownScope dropdownScopeId={dropdownScopeIds.color}>
<Dropdown
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: dropdownScopeIds.color,
}}
clickableComponent={<StyledColorSample colorName={option.color} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{mainColorNames.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
}}
color={colorName}
selected={colorName === option.color}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</DropdownScope>
<StyledOptionInput
value={option.label}
onChange={(label) => onChange({ ...option, label })}
RightIcon={isDefault ? IconCheck : undefined}
/>
<DropdownScope dropdownScopeId={dropdownScopeId}>
<DropdownScope dropdownScopeId={dropdownScopeIds.actions}>
<Dropdown
dropdownPlacement="right-start"
dropdownHotkeyScope={{
scope: dropdownScopeId,
scope: dropdownScopeIds.actions,
}}
clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
dropdownComponents={
@ -75,7 +117,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
text="Remove as default"
onClick={() => {
onChange({ ...option, isDefault: false });
closeDropdown();
closeActionsDropdown();
}}
/>
) : (
@ -84,7 +126,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
text="Set as default"
onClick={() => {
onChange({ ...option, isDefault: true });
closeDropdown();
closeActionsDropdown();
}}
/>
)}
@ -95,7 +137,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
text="Remove option"
onClick={() => {
onRemove();
closeDropdown();
closeActionsDropdown();
}}
/>
)}

6
front/src/modules/settings/data-model/hooks/useFieldMetadataForm.ts
View File

@ -2,7 +2,7 @@ import { useState } from 'react';
import { DeepPartial } from 'react-hook-form';
import { z } from 'zod';
import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
import {
FieldMetadataType,
RelationMetadataType,
@ -59,9 +59,7 @@ const selectSchema = fieldSchema.merge(
select: z
.array(
z.object({
color: z.enum(
Object.keys(mainColors) as [ThemeColor, ...ThemeColor[]],
),
color: themeColorSchema,
isDefault: z.boolean().optional(),
label: z.string().min(1),
}),

39
front/src/modules/ui/display/color/components/ColorSample.tsx Normal file
View File

@ -0,0 +1,39 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { ThemeColor } from '@/ui/theme/constants/colors';
export type ColorSampleVariant = 'default' | 'pipeline';
const StyledColorSample = styled.div<{
colorName: ThemeColor;
variant?: ColorSampleVariant;
}>`
background-color: ${({ theme, colorName }) =>
theme.tag.background[colorName]};
border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};
border-radius: 60px;
height: ${({ theme }) => theme.spacing(4)};
width: ${({ theme }) => theme.spacing(3)};
${({ colorName, theme, variant }) => {
if (variant === 'pipeline')
return css`
align-items: center;
border: 0;
display: flex;
justify-content: center;
&:after {
background-color: ${theme.tag.text[colorName]};
border-radius: ${theme.border.radius.rounded};
content: '';
display: block;
height: ${theme.spacing(1)};
width: ${theme.spacing(1)};
}
`;
}}
`;
export { StyledColorSample as ColorSample };

25
front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ColorSample } from '../ColorSample';
const meta: Meta<typeof ColorSample> = {
title: 'UI/Display/Color/ColorSample',
component: ColorSample,
decorators: [ComponentDecorator],
args: { colorName: 'green' },
argTypes: {
as: { control: false },
theme: { control: false },
},
};
export default meta;
type Story = StoryObj<typeof ColorSample>;
export const Default: Story = {};
export const Pipeline: Story = {
args: { variant: 'pipeline' },
};

37
front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx
View File

@ -1,6 +1,9 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
ColorSample,
ColorSampleVariant,
} from '@/ui/display/color/components/ColorSample';
import { IconCheck } from '@/ui/display/icon';
import { ThemeColor } from '@/ui/theme/constants/colors';
@ -11,33 +14,37 @@ import {
import { StyledMenuItemSelect } from './MenuItemSelect';
const StyledColorSample = styled.div<{ colorName: ThemeColor }>`
background-color: ${({ theme, colorName }) =>
theme.tag.background[colorName]};
border: 1px solid ${({ theme, colorName }) => theme.color[colorName]};
border-radius: ${({ theme }) => theme.border.radius.sm};
height: 12px;
width: 12px;
`;
type MenuItemSelectColorProps = {
selected: boolean;
text: string;
className?: string;
onClick?: () => void;
disabled?: boolean;
hovered?: boolean;
color: ThemeColor;
variant?: ColorSampleVariant;
};
export const colorLabels: Record<ThemeColor, string> = {
green: 'Green',
turquoise: 'Turquoise',
sky: 'Sky',
blue: 'Blue',
purple: 'Purple',
pink: 'Pink',
red: 'Red',
orange: 'Orange',
yellow: 'Yellow',
gray: 'Gray',
};
export const MenuItemSelectColor = ({
color,
text,
selected,
className,
onClick,
disabled,
hovered,
variant = 'default',
}: MenuItemSelectColorProps) => {
const theme = useTheme();
@ -50,8 +57,10 @@ export const MenuItemSelectColor = ({
hovered={hovered}
>
<StyledMenuItemLeftContent>
<StyledColorSample colorName={color} />
<StyledMenuItemLabel hasLeftIcon={true}>{text}</StyledMenuItemLabel>
<ColorSample colorName={color} variant={variant} />
<StyledMenuItemLabel hasLeftIcon={true}>
{colorLabels[color]}
</StyledMenuItemLabel>
</StyledMenuItemLeftContent>
{selected && <IconCheck size={theme.icon.size.sm} />}
</StyledMenuItemSelect>

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

@ -1,6 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { tagLight } from '@/ui/theme/constants/tag';
import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import {
CatalogDecorator,
CatalogDimension,
@ -21,32 +22,22 @@ export default meta;
type Story = StoryObj<typeof MenuItemSelectColor>;
export const Default: Story = {
args: {
text: 'First option',
color: 'green',
},
argTypes: {
className: { control: false },
},
args: { color: 'green' },
argTypes: { className: { control: false } },
decorators: [ComponentDecorator],
};
export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
args: { text: 'Menu item' },
argTypes: {
className: { control: false },
},
argTypes: { className: { control: false } },
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
catalog: {
dimensions: [
{
name: 'color',
values: Object.keys(tagLight.background),
props: (color: string) => ({
color: color,
}),
labels: (color: string) => color,
values: mainColorNames,
props: (color: ThemeColor) => ({ color }),
labels: (color: ThemeColor) => color,
},
{
name: 'states',
@ -75,6 +66,12 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
}
},
},
{
name: 'variant',
values: ['default', 'pipeline'],
props: (variant: ColorSampleVariant) => ({ variant }),
labels: (variant: ColorSampleVariant) => variant,
},
] as CatalogDimension[],
options: {
elementContainer: {

5
front/src/modules/ui/object/field/types/guards/isFieldSelectValue.ts
View File

@ -1,10 +1,9 @@
import { z } from 'zod';
import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
const selectColors = Object.keys(mainColors) as [ThemeColor, ...ThemeColor[]];
const selectValueSchema = z.object({
color: z.enum(selectColors),
color: themeColorSchema,
label: z.string(),
});

34
front/src/modules/ui/object/record-board/components/RecordBoardColumnEditTitleMenu.tsx
View File

@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { debounce } from '~/utils/debounce';
@ -49,24 +49,6 @@ type RecordBoardColumnEditTitleMenuProps = {
stageId: string;
};
type ColumnColorOption = {
name: string;
id: ThemeColor;
};
export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
{ name: 'Green', id: 'green' },
{ name: 'Turquoise', id: 'turquoise' },
{ name: 'Sky', id: 'sky' },
{ name: 'Blue', id: 'blue' },
{ name: 'Purple', id: 'purple' },
{ name: 'Pink', id: 'pink' },
{ name: 'Red', id: 'red' },
{ name: 'Orange', id: 'orange' },
{ name: 'Yellow', id: 'yellow' },
{ name: 'Gray', id: 'gray' },
];
export const RecordBoardColumnEditTitleMenu = ({
onClose,
onDelete,
@ -124,15 +106,13 @@ export const RecordBoardColumnEditTitleMenu = ({
/>
</StyledEditTitleContainer>
<DropdownMenuSeparator />
{COLUMN_COLOR_OPTIONS.map((colorOption) => (
{mainColorNames.map((colorName) => (
<MenuItemSelectColor
key={colorOption.name}
onClick={() => {
handleColorChange(colorOption.id);
}}
color={colorOption.id}
selected={colorOption.id === color}
text={colorOption.name}
key={colorName}
onClick={() => handleColorChange(colorName)}
color={colorName}
selected={colorName === color}
variant="pipeline"
/>
))}
<DropdownMenuSeparator />

11
front/src/modules/ui/object/record-board/components/__stories__/RecordBoardColumnEditTitleMenu.stories.tsx
View File

@ -2,21 +2,12 @@ import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import {
COLUMN_COLOR_OPTIONS,
RecordBoardColumnEditTitleMenu,
} from '../RecordBoardColumnEditTitleMenu';
import { RecordBoardColumnEditTitleMenu } from '../RecordBoardColumnEditTitleMenu';
const meta: Meta<typeof RecordBoardColumnEditTitleMenu> = {
title: 'UI/Layout/Board/BoardColumnMenu',
component: RecordBoardColumnEditTitleMenu,
decorators: [ComponentDecorator],
argTypes: {
color: {
control: 'select',
options: COLUMN_COLOR_OPTIONS.map(({ id }) => id),
},
},
args: { color: 'green', title: 'Column title' },
};

4
front/src/modules/ui/theme/constants/colors.ts
View File

@ -24,7 +24,6 @@ export const grayScale = {
};
export const mainColors = {
yellow: '#ffd338',
green: '#55ef3c',
turquoise: '#15de8f',
sky: '#00e0ff',
@ -33,11 +32,14 @@ export const mainColors = {
pink: '#f54bd0',
red: '#f83e3e',
orange: '#ff7222',
yellow: '#ffd338',
gray: grayScale.gray30,
};
export type ThemeColor = keyof typeof mainColors;
export const mainColorNames = Object.keys(mainColors) as ThemeColor[];
export const secondaryColors = {
yellow80: '#2e2a1a',
yellow70: '#453d1e',

6
front/src/modules/ui/theme/utils/castStringAsThemeColor.ts
View File

@ -1,6 +0,0 @@
import { mainColors, ThemeColor } from '../constants/colors';
export const COLORS = Object.keys(mainColors);
export const isThemeColor = (color: string): color is ThemeColor =>
COLORS.includes(color);

7
front/src/modules/ui/theme/utils/themeColorSchema.ts Normal file
View File

@ -0,0 +1,7 @@
import { z } from 'zod';
import { mainColorNames, ThemeColor } from '../constants/colors';
export const themeColorSchema = z.enum(
mainColorNames as [ThemeColor, ...ThemeColor[]],
);