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

…e/purchaseorders-803

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

view/next-project/.storybook/main.ts

@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: [
     '../src/**/*.mdx',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/**/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [

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

@@ -0,0 +1,9 @@
+export { default as DeleteModal } from './DeleteModal';
+export { default as DetailModal } from './DetailModal';
+export { default as ModalProps } from './DetailModal';
+export { default as EditModal } from './EditModal';
+export { default as OpenAddModalButton } from './OpenAddModalButton';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';
+export { default as PurchaseItemNumModal } from './PurchaseItemNumModal';
+export { default as PurchaseOrderAddModal } from './PurchaseOrderAddModal';

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

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

view/next-project/src/stories/purchaseorders/DetailModal.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { DetailModal, ModalProps } from '@components/purchaseorders/';
+
+const meta: Meta = {
+  title: 'FinanSu/purchaseorders/DetailModal',
+  component: DetailModal,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    // 特定のPropsに対する設定が必要な場合はここに追加
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof ModalProps> = (args) => <DetailModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  isOpen: true,
+  id: '123',
+  purchaseOrderViewItem: {
+    purchaseOrder: {
+      id: '12345', // 適切なidを設定
+      expenseID: '123', // 必要に応じて調整
+      createdAt: new Date().toISOString(), // 現在の日付のISO文字列
+      deadline: new Date().toISOString(), // 現在の日付のISO文字列
+    },
+    purchaseItem: [
+      {
+        id: '1',
+        item: 'ポストイット 黄色',
+        price: '6000',
+        quantity: '20',
+        detail: '衛生物品仕分けのため',
+        url: 'https://www.amazon.co.jp/%E3%83%9D%E3%82%B9%E3%83%88%E3%82%A4%E3%83%83%E3%83%88-%E3%82%A4%E3%82%A8%E3%83%AD%E3%83%BC-75%C3%9775mm-90%E6%9E%9A%C3%9710%E3%83%91%E3%83%83%E3%83%89-6541SS-Y/dp/B09RMQKJL5/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=D6173OMOUM5T&dib=eyJ2IjoiMSJ9.27UQkXbp5c3HOdcXxqY7y8lurZZ2fWRkOsTe3OnG9yGEzulWe80kR9f3dwtbRl6_CE91H4xyd9cw4A0qjVXWE9aQI65uLFf6162PSTVYxTCbckLGNZPyXrt6Qs62tpZDweOBdMPnxJnOBCeATox63FfN7ax4wTVS2xozWVR473JM-BgA_PEq6nZW9gKeavZv91Gxw4bVVpD9wFZ9AXw_fgI3Ntdvd1EoDyU7BgsWJD0.4_nNNIuZNJGWWjvn8p7uJcf8OKpkc2pj-rnFj15ePl0&dib_tag=se&keywords=%E3%83%9D%E3%82%B9%E3%83%88%E3%82%A4%E3%83%83%E3%83%88+%E9%BB%84%E8%89%B2&qid=1720144913&s=instant-video&sprefix=%E3%83%9D%E3%82%B9%E3%83%88%E3%82%A4%E3%83%83%E3%83%88+%E9%BB%84%E8%89%B2,instant-video,173&sr=1-3',
+        financeCheck: false,
+      },
+      {
+        id: '2',
+        item: 'ラミネートフィルム',
+        price: '3000',
+        quantity: '1',
+        detail: 'ラミネート看板用の予備',
+        url: 'https://www.amazon.co.jp/Bonsaii-100%CE%BCm%E3%83%95%E3%82%A3%E3%83%AB%E3%83%A0%E5%AF%BE%E5%BF%9C-%E8%A9%B0%E3%81%BE%E3%82%8A%E9%98%B2%E6%AD%A2%E3%83%AC%E3%83%90%E3%83%BC%E6%90%AD%E8%BC%89-%EF%BC%91%E5%88%86%E9%96%93400mm-%E3%82%AB%E3%83%BC%E3%83%89%E3%82%B5%E3%82%A4%E3%82%BA%E5%AF%BE%E5%BF%9C/dp/B07PHSX45C/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1TFXLNS619SWR&dib=eyJ2IjoiMSJ9.mSiLkvsecGF8tVQLpUZmpVkeWWGAf2aCp-ngfpOXY3vIn1D002MPU2kg_LbRpel42f2kowuYQQWH_Jqa12PPmZTtPLa6gQczNGEKIIHcWZCA0ESPm4sCj36lBPcpV30TcQqCw5wFMFse8RzEns8wVOojZU69CHnt8oAapLYKPYFqLtj5nW1RX3Qp8TECj36Nap9b3Aw1yWYDlYOi9_63KkpWwtsRqBHiwJNqb7_vcwY.2krKINDdmAX-06jEu3patfEDv3oPFI32gzXBAwseXHY&dib_tag=se&keywords=%E3%83%A9%E3%83%9F%E3%83%8D%E3%83%BC%E3%83%88&qid=1720145001&s=instant-video&sprefix=%E3%83%A9%E3%83%9F%E3%83%8D%E3%83%BC%E3%83%88,instant-video,175&sr=1-2',
+        financeCheck: true,
+      },
+    ], // 購入項目の配列、必要に応じて詳細を追加
+  },
+  expenses: [
+    {
+      id: '123',
+      name: '総務局',
+    },
+  ],
+  isDelete: false,
+};

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

@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/react';
+import { EditModal } from '@components/purchaseorders';
+import { PurchaseItem } from '@type/common'; // PurchaseItem 型のインポートを確認してください
+
+const meta: Meta<typeof EditModal> = {
+  title: 'FinanSu/purchaseorders/EditModal',
+  component: EditModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+// 仮の購入物品データ
+const samplePurchaseItems: PurchaseItem[] = [
+  {
+    id: 1,
+    item: 'ノートパソコン',
+    price: '100000',
+    quantity: 2,
+    detail: 'ビジネス用',
+    url: 'http://example.com',
+    finance_check: false,
+  },
+];
+
+export const Primary: Story<typeof EditModal> = (args) => <EditModal {...args} />;
+Primary.args = {
+  purchaseOrderId: 123,
+  purchaseItems: samplePurchaseItems,
+  isOpen: true,
+  setIsOpen: (isOpen: boolean) => console.log('Modal is now', isOpen ? 'open' : 'closed'), // モーダルの開閉状態をコンソールで確認
+};

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

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenAddModalButton } from '@components/purchaseorders';
+
+const meta: Meta<typeof OpenAddModalButton> = {
+  title: 'FinanSu/purchaseorders/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/purchaseorders/OpenDeleteModalButton.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenDeleteModalButton } from '@components/purchaseorders';
+
+const meta: Meta<typeof OpenDeleteModalButton> = {
+  title: 'FinanSu/purchaseorders/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/purchaseorders/OpenEditModalButton.stories.tsx

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

view/next-project/src/stories/purchaseorders/PurchaseItemNumModal.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import PurchaseItemNumModal, {
+  PurchaseItemNumModalProps,
+} from '@components/purchaseorders/PurchaseItemNumModal';
+
+const meta: Meta<typeof PurchaseItemNumModal> = {
+  title: 'FinanSu/purchaseorders/PurchaseItemNumModal',
+  component: PurchaseItemNumModal,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  argTypes: {},
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryFn<PurchaseItemNumModalProps> = (args) => <PurchaseItemNumModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  expenses: [], // 必要に応じて適切な配列を設定してください
+  expenseByPeriods: [], // 同上
+  yearPeriods: [], // 同上
+};

view/next-project/src/stories/purchaseorders/PurchaseOrderAddModal.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import PurchaseOrderAddModal from '@components/purchaseorders/PurchaseOrderAddModal';
+
+const meta: Meta = {
+  title: 'FinanSu/purchaseorders/PurchaseOrderAddModal',
+  component: PurchaseOrderAddModal,
+  argTypes: {},
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryFn = (args) => <PurchaseOrderAddModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  purchaseItemNum: { value: 3 }, // 例として購入物品数を3に設定
+  isOpen: true,
+  numModalOnClose: () => console.log('Modal closed'),
+  onClose: () => console.log('Modal closed'),
+  setFormDataList: (list) => console.log('FormDataList set:', list),
+  formDataList: [
+    {
+      id: 1,
+      item: 'Example item 1',
+      price: 100,
+      quantity: 2,
+      detail: 'Example detail',
+      url: 'http://example.com',
+      purchaseOrderID: 1,
+      financeCheck: false,
+      createdAt: '2020-01-01',
+      updatedAt: '2020-01-01',
+    },
+    {
+      id: 2,
+      item: 'Example item 2',
+      price: 150,
+      quantity: 1,
+      detail: 'Example detail',
+      url: 'http://example.com',
+      purchaseOrderID: 1,
+      financeCheck: false,
+      createdAt: '2020-01-01',
+      updatedAt: '2020-01-01',
+    },
+  ],
+  purchaseOrder: {
+    id: 1,
+    deadline: '2023-12-31',
+    userID: 123,
+    financeCheck: true,
+    expenseID: 456,
+  },
+};