docs: use ComponentDecorator (#800)

Related to #702

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -45,7 +45,7 @@ const StyledColorSample = styled.div<{ colorName: string }>`
   width: 12px;
 `;
 
-const COLOR_OPTIONS = [
+export const COLOR_OPTIONS = [
   { name: 'Green', id: 'green' },
   { name: 'Turquoise', id: 'turquoise' },
   { name: 'Sky', id: 'sky' },

front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators';
+
+import {
+  BoardColumnEditTitleMenu,
+  COLOR_OPTIONS,
+} from '../BoardColumnEditTitleMenu';
+
+const meta: Meta<typeof BoardColumnEditTitleMenu> = {
+  title: 'UI/Board/BoardColumnMenu',
+  component: BoardColumnEditTitleMenu,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: COLOR_OPTIONS.map(({ id }) => id),
+    },
+  },
+  args: { color: 'green', title: 'Column title' },
+};
+
+export default meta;
+type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
+
+export const AllTags: Story = {};

front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.story.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { BoardColumnEditTitleMenu } from '../BoardColumnEditTitleMenu';
-
-const meta: Meta<typeof BoardColumnEditTitleMenu> = {
-  title: 'UI/Board/BoardColumnMenu',
-  component: BoardColumnEditTitleMenu,
-};
-
-export default meta;
-type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
-
-export const AllTags: Story = {
-  render: getRenderWrapperForComponent(
-    <BoardColumnEditTitleMenu
-      color="green"
-      title={'Column title'}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onClose={() => {}}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onTitleEdit={() => {}}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onColumnColorEdit={() => {}}
-    />,
-  ),
-};