From da68654cafd161115f590b58cbec345f3767f02c Mon Sep 17 00:00:00 2001 From: Alfred Louis Date: Fri, 6 Oct 2023 17:02:19 +0700 Subject: [PATCH] add new storybook for MenuItems component (#1898) --- .../MenuItemMultiSelectAvatar.stories.tsx | 84 +++++++++++++++++ .../MenuItemSelectAvatar.stories.tsx | 93 +++++++++++++++++++ .../MenuItemSelectColor.stories.tsx | 87 +++++++++++++++++ 3 files changed, 264 insertions(+) create mode 100644 front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx create mode 100644 front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx create mode 100644 front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx new file mode 100644 index 000000000..6167e6266 --- /dev/null +++ b/front/src/modules/ui/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx @@ -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 = { + title: 'UI/MenuItem/MenuItemMultiSelectAvatar', + component: MenuItemMultiSelectAvatar, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'First option', + avatar: , + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + 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 ? ( + + ) : ( + + ), + }), + 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], +}; diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx new file mode 100644 index 000000000..64c6becbb --- /dev/null +++ b/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx @@ -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 = { + title: 'UI/MenuItem/MenuItemSelectAvatar', + component: MenuItemSelectAvatar, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'First option', + avatar: , + }, + argTypes: { + className: { control: false }, + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + 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 ? ( + + ) : ( + + ), + }), + 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], +}; diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx new file mode 100644 index 000000000..56ae7240d --- /dev/null +++ b/front/src/modules/ui/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx @@ -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 = { + title: 'UI/MenuItem/MenuItemSelectColor', + component: MenuItemSelectColor, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'First option', + color: 'green', + }, + argTypes: { + className: { control: false }, + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + 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], +};