add new storybook for MenuItems component (#1898)

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<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],
+};

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<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],
+};

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<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],
+};