Merge pull request #855 from NUTFes/feat/kobayashi/CreatingstoriesFil…

…e/yearperiods-810

既存コンポーネントを表示する.storiesファイルを追加する（/yearperiods）

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

@@ -0,0 +1,6 @@
+export { default as AddModal } from './AddModal';
+export { default as DeleteModal } from './DeleteModal';
+export { default as EditModal } from './EditModal';
+export { default as OpenAddModalButton } from './OpenAddModalButton';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';

view/next-project/src/stories/yearperiods/AddModal.stories.tsx

@@ -0,0 +1,52 @@
+// /Users/kobayashiryota/Workspace/FinanSu/view/next-project/src/stories/yearperiods/AddModal.stories.tsx
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { AddModal } from '@components/yearperiods';
+
+const meta: Meta<typeof AddModal> = {
+  title: 'FinanSu/yearperiods/AddModal',
+  component: AddModal,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  argTypes: {},
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryFn = (args) => (
+  <AddModal
+    {...args}
+    setShowModal={() => {
+      console.log;
+    }}
+  />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  setShowModal: true,
+  yearPeriods: [
+    {
+      id: 0,
+      year: 2021,
+      startedAt: '2021-01-01T00:00:00',
+      endedAt: '2021-01-01T00:00:00',
+      createdAt: '2021-01-01T00:00:00',
+      updatedAt: '2021-01-01T00:00:00',
+    },
+    {
+      id: 1,
+      year: 2022,
+      startedAt: '2021-01-01T00:00:00',
+      endedAt: '2021-01-01T00:00:00',
+      createdAt: '2021-01-01T00:00:00',
+      updatedAt: '2021-01-01T00:00:00',
+    },
+  ],
+};

view/next-project/src/stories/yearperiods/DeleteModal.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react';
+import { DeleteModal } from '@components/yearperiods';
+
+const meta: Meta<typeof DeleteModal> = {
+  title: 'FinanSu/yearperiods/DeleteModal',
+  component: DeleteModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    setShowModal: true,
+    id: '0',
+    yearPeriod: {
+      id: 0,
+      year: 2021,
+      startedAt: '2021-01-01T00:00:00',
+      endedAt: '2021-01-01T00:00:00',
+      createdAt: '2021-01-01T00:00:00',
+      updatedAt: '2021-01-01T00:00:00',
+    },
+  },
+};

view/next-project/src/stories/yearperiods/EditModal.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/react';
+import { EditModal } from '@components/yearperiods';
+
+const meta: Meta<typeof EditModal> = {
+  title: 'FinanSu/yearperiods/EditModal',
+  component: EditModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    setShowModal: true,
+    id: '0',
+    yearPeriod: {
+      id: 0,
+      year: 2021,
+      startedAt: '2021-01-01T00:00:00',
+      endedAt: '2021-01-01T00:00:00',
+      createdAt: '2021-01-01T00:00:00',
+      updatedAt: '2021-01-01T00:00:00',
+    },
+    yearPeriods: [
+      {
+        id: 0,
+        year: 2021,
+        startedAt: '2021-01-01T00:00:00',
+        endedAt: '2021-01-01T00:00:00',
+        createdAt: '2021-01-01T00:00:00',
+        updatedAt: '2021-01-01T00:00:00',
+      },
+      {
+        id: 1,
+        year: 2022,
+        startedAt: '2021-01-01T00:00:00',
+        endedAt: '2021-01-01T00:00:00',
+        createdAt: '2021-01-01T00:00:00',
+        updatedAt: '2021-01-01T00:00:00',
+      },
+    ],
+  },
+};

view/next-project/src/stories/yearperiods/OpenAddModalButton.stories.tsx

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

view/next-project/src/stories/yearperiods/OpenDeleteModalButton.stories.tsx

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

view/next-project/src/stories/yearperiods/OpenEditModalButton.stories.tsx

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