twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-06 03:45:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

add new storybook for MenuItems component (#1898)

Browse Source
This commit is contained in:
Alfred Louis 2023-10-06 17:02:19 +07:00 committed by GitHub
parent 10c39e4501
commit da68654caf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 264 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx Normal file
View File

@ -0,0 +1,84 @@
import { Meta, StoryObj } from '@storybook/react';
import { Avatar } from '@/users/components/Avatar';
import {
CatalogDecorator,
CatalogDimension,
CatalogOptions,
} from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { avatarUrl } from '~/testing/mock-data/users';
import { CatalogStory } from '~/testing/types';
import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
const meta: Meta<typeof MenuItemMultiSelectAvatar> = {
title: 'UI/MenuItem/MenuItemMultiSelectAvatar',
component: MenuItemMultiSelectAvatar,
};
export default meta;
type Story = StoryObj<typeof MenuItemMultiSelectAvatar>;
export const Default: Story = {
args: {
text: 'First option',
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
},
decorators: [ComponentDecorator],
};
export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
args: { text: 'Menu item' },
argTypes: {
className: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
catalog: {
dimensions: [
{
name: 'withAvatar',
values: [true, false],
props: (withAvatar: boolean) => ({
avatar: withAvatar ? (
<Avatar avatarUrl={avatarUrl} placeholder="L" />
) : (
<Avatar avatarUrl={''} placeholder="L" />
),
}),
labels: (withAvatar: boolean) =>
withAvatar ? 'With avatar' : 'Without avatar',
},
{
name: 'selected',
values: [true, false],
props: (selected: boolean) => ({ selected }),
labels: (selected: boolean) =>
selected ? 'Selected' : 'Not selected',
},
{
name: 'states',
values: ['default', 'hover'],
props: (state: string) => {
switch (state) {
case 'default':
return {};
case 'hover':
return { className: state };
default:
return {};
}
},
},
] as CatalogDimension[],
options: {
elementContainer: {
width: 200,
},
} as CatalogOptions,
},
},
decorators: [CatalogDecorator],
};

93
front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx Normal file
View File

@ -0,0 +1,93 @@
import { Meta, StoryObj } from '@storybook/react';
import { Avatar } from '@/users/components/Avatar';
import {
CatalogDecorator,
CatalogDimension,
CatalogOptions,
} from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { avatarUrl } from '~/testing/mock-data/users';
import { CatalogStory } from '~/testing/types';
import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
const meta: Meta<typeof MenuItemSelectAvatar> = {
title: 'UI/MenuItem/MenuItemSelectAvatar',
component: MenuItemSelectAvatar,
};
export default meta;
type Story = StoryObj<typeof MenuItemSelectAvatar>;
export const Default: Story = {
args: {
text: 'First option',
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
},
argTypes: {
className: { control: false },
},
decorators: [ComponentDecorator],
};
export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
args: { text: 'Menu item' },
argTypes: {
className: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
catalog: {
dimensions: [
{
name: 'withAvatar',
values: [true, false],
props: (withAvatar: boolean) => ({
avatar: withAvatar ? (
<Avatar avatarUrl={avatarUrl} placeholder="L" />
) : (
<Avatar avatarUrl={''} placeholder="L" />
),
}),
labels: (withAvatar: boolean) =>
withAvatar ? 'With avatar' : 'Without avatar',
},
{
name: 'states',
values: [
'default',
'hover',
'disabled',
'selected',
'hover+selected',
],
props: (state: string) => {
switch (state) {
case 'default':
return {};
case 'hover':
return { className: 'hover' };
case 'disabled':
return { disabled: true };
case 'selected':
return { selected: true };
case 'hover+selected':
return { className: 'hover', selected: true };
default:
return {};
}
},
},
] as CatalogDimension[],
options: {
elementContainer: {
width: 200,
},
} as CatalogOptions,
},
},
decorators: [CatalogDecorator],
};

87
front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx Normal file
View File

@ -0,0 +1,87 @@
import { Meta, StoryObj } from '@storybook/react';
import { tagLight } from '@/ui/theme/constants/tag';
import {
CatalogDecorator,
CatalogDimension,
CatalogOptions,
} from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { CatalogStory } from '~/testing/types';
import { MenuItemSelectColor } from '../MenuItemSelectColor';
const meta: Meta<typeof MenuItemSelectColor> = {
title: 'UI/MenuItem/MenuItemSelectColor',
component: MenuItemSelectColor,
};
export default meta;
type Story = StoryObj<typeof MenuItemSelectColor>;
export const Default: Story = {
args: {
text: 'First option',
color: 'green',
},
argTypes: {
className: { control: false },
},
decorators: [ComponentDecorator],
};
export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
args: { text: 'Menu item' },
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,
},
{
name: 'states',
values: [
'default',
'hover',
'disabled',
'selected',
'hover+selected',
],
props: (state: string) => {
switch (state) {
case 'default':
return {};
case 'hover':
return { className: 'hover' };
case 'disabled':
return { disabled: true };
case 'selected':
return { selected: true };
case 'hover+selected':
return { className: 'hover', selected: true };
default:
return {};
}
},
},
] as CatalogDimension[],
options: {
elementContainer: {
width: 200,
},
} as CatalogOptions,
},
},
decorators: [CatalogDecorator],
};