既存コンポーネントをStorybook上に表示する（/common）

view/next-project/src/components/common/index.ts

@@ -13,6 +13,7 @@ export { default as OutlinePrimaryButton } from './OutlinePrimaryButton';
 export { default as OpenModalButton } from './OpenModalButton';
 export { default as PrimaryButton } from './PrimaryButton';
 export { default as PullDown } from './PullDown';
+export { default as PulldownButton } from './PulldownButton';
 export { default as Radio } from './Radio';
 export { default as RedButton } from './RedButton';
 export { default as RegistButton } from './RegistButton';

view/next-project/src/stories/OpenModalButton.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { OpenModalButton } from '@components/common';
 
 const meta: Meta<typeof OpenModalButton> = {
-  title: 'FinanSu/OpenModalButton',
+  title: 'FinanSu/common/OpenModalButton',
   component: OpenModalButton,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/common/AddButton.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { AddButton } from '@components/common';
+
+const meta: Meta<typeof AddButton> = {
+  title: 'FinanSu/common/AddButton',
+  component: AddButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/BureauLabel.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { BureauLabel } from '@components/common';
+
+const meta: Meta<typeof BureauLabel> = {
+  title: 'FinanSu/common/BureauLabel',
+  component: BureauLabel,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/Button.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { Button } from '@components/common';
+
+const meta: Meta<typeof Button> = {
+  title: 'FinanSu/common/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/Card.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { Card } from '@components/common';
+
+const meta: Meta<typeof Card> = {
+  title: 'FinanSu/common/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/ChakraUIDropdown.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { ChakraUIDropdown } from '@components/common';
+
+const meta: Meta<typeof ChakraUIDropdown> = {
+  title: 'FinanSu/common/ChakraUIDropdown',
+  component: ChakraUIDropdown,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof ChakraUIDropdown> = (args) => <ChakraUIDropdown {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'title',
+  children: <h1>children</h1>,
+};

view/next-project/src/stories/common/Checkbox.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react';
+import { Checkbox } from '@components/common';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'FinanSu/common/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    placeholder: 'placeholder',
+    value: 0,
+    checked: true,
+    disabled: true,
+  },
+};

view/next-project/src/stories/CloseButton.stories.tsx → view/next-project/src/stories/common/CloseButton.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { CloseButton } from '@components/common';
 
 const meta: Meta<typeof CloseButton> = {
-  title: 'FinanSu/CloseButton',
+  title: 'FinanSu/common/CloseButton',
   component: CloseButton,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/DeleteButton.stories.tsx → view/next-project/src/stories/common/DeleteButton.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { DeleteButton } from '@components/common';
 
 const meta: Meta<typeof DeleteButton> = {
-  title: 'FinanSu/DeleteButton',
+  title: 'FinanSu/common/DeleteButton',
   component: DeleteButton,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/Dropdown.stories.tsx → view/next-project/src/stories/common/Dropdown.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { Dropdown } from '@components/common';
 
 const meta: Meta<typeof Dropdown> = {
-  title: 'FinanSu/Dropdown',
+  title: 'FinanSu/common/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/EditButton.stories.tsx → view/next-project/src/stories/common/EditButton.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { EditButton } from '@components/common';
 
 const meta: Meta<typeof EditButton> = {
-  title: 'FinanSu/EditButton',
+  title: 'FinanSu/common/EditButton',
   component: EditButton,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/common/Header.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { Header } from '@components/common';
+
+const meta: Meta<typeof Header> = {
+  title: 'FinanSu/common/Header',
+  component: Header,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  onSideNavOpen: () => console.log('SideNav is opened'),
+};
+
+export const WithoutSideNav = Template.bind({});
+WithoutSideNav.args = {};

view/next-project/src/stories/common/Input.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react';
+import { Input } from '@components/common';
+
+const meta: Meta<typeof Input> = {
+  title: 'FinanSu/common/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    placeholder: 'placeholder',
+    id: 0,
+    value: 100,
+    type: 'text',
+  },
+};

view/next-project/src/stories/common/Label.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { Label } from '@components/common';
+
+const meta: Meta<typeof Label> = {
+  title: 'FinanSu/common/Label',
+  component: Label,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/Link.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { Link } from '@components/common';
+
+const meta: Meta<typeof Link> = {
+  title: 'FinanSu/common/Link',
+  component: Link,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/Loading.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react';
+import { Loading } from '@components/common';
+
+const meta: Meta<typeof Loading> = {
+  title: 'FinanSu/common/Loading',
+  component: Loading,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    text: '読み込み中',
+  },
+};

view/next-project/src/stories/LoadingButton.stories.tsx → view/next-project/src/stories/common/LoadingButton.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { LoadingButton } from '@components/common';
 
 const meta: Meta<typeof LoadingButton> = {
-  title: 'FinanSu/LoadingButton',
+  title: 'FinanSu/common/LoadingButton',
   component: LoadingButton,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/Modal.stories.tsx → view/next-project/src/stories/common/Modal.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { Modal } from '@components/common';
 
 const meta: Meta<typeof Modal> = {
-  title: 'FinanSu/Modal',
+  title: 'FinanSu/common/Modal',
   component: Modal,
   tags: ['autodocs'],
   argTypes: {},

view/next-project/src/stories/common/MultiSelect.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { MultiSelect } from '@components/common';
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'FinanSu/common/MultiSelect',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    options: [
+      {
+        value: 'value1',
+        label: 'label1',
+      },
+      {
+        value: 'value2',
+        label: 'label2',
+      },
+    ],
+    placeholder: 'placeholder',
+  },
+};

view/next-project/src/stories/common/OutlinePrimaryButton.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OutlinePrimaryButton } from '@components/common';
+
+const meta: Meta<typeof OutlinePrimaryButton> = {
+  title: 'FinanSu/common/OutlinePrimaryButton',
+  component: OutlinePrimaryButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/PrimaryButton.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { PrimaryButton } from '@components/common';
+
+const meta: Meta<typeof PrimaryButton> = {
+  title: 'FinanSu/common/PrimaryButton',
+  component: PrimaryButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};

view/next-project/src/stories/common/PrimaryLink.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { PrimaryLink } from '@components/common';
+
+const meta: Meta<typeof PrimaryLink> = {
+  title: 'FinanSu/common/PrimaryLink',
+  component: PrimaryLink,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};