Storybookに既存コンポーネントを表示する(/sponsorstyles)

view/next-project/src/components/sponsorstyles/DeleteModal.tsx

@@ -1,10 +1,9 @@
 import { useRouter } from 'next/router';
 import React, { Dispatch, FC, SetStateAction } from 'react';
-
 import { del } from '@api/api_methods';
 import { Modal, CloseButton, OutlinePrimaryButton, PrimaryButton } from '@components/common';
 
-interface ModalProps {
+export interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   children?: React.ReactNode;
   id: number | string;

view/next-project/src/components/sponsorstyles/EditModal.tsx

@@ -5,7 +5,7 @@ import { put } from '@api/api_methods';
 import { PrimaryButton, OutlinePrimaryButton, CloseButton, Input, Modal } from '@components/common';
 import { SponsorStyle } from '@type/common';
 
-interface ModalProps {
+export interface ModalProps {
   sponsorStyleId: number;
   sponsorStyle: SponsorStyle;
   setIsOpen: (isOpen: boolean) => void;

view/next-project/src/components/sponsorstyles/OpenAddModalButton.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import SponsorStyleAddModal from './SponsorStyleAddModal';
 import { AddButton } from '@components/common';
 
-interface Props {
+export interface Props {
   children?: React.ReactNode;
 }
 

view/next-project/src/components/sponsorstyles/OpenDeleteModalButton.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import DeleteModal from './DeleteModal';
 import { DeleteButton } from '@components/common';
 
-interface Props {
+export interface Props {
   children?: React.ReactNode;
   id: number;
 }

view/next-project/src/components/sponsorstyles/OpenEditModalButton.tsx

@@ -5,7 +5,7 @@ import { EditButton } from '@components/common';
 import EditModal from '@components/sponsorstyles/EditModal';
 import { SponsorStyle } from '@type/common';
 
-interface Props {
+export interface Props {
   children?: React.ReactNode;
   id: number;
   sponsorStyle: SponsorStyle;

view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx

@@ -5,7 +5,7 @@ import { post } from '@api/api_methods';
 import { CloseButton, Input, Modal, PrimaryButton } from '@components/common';
 import { SponsorStyle } from '@type/common';
 
-interface ModalProps {
+export interface ModalProps {
   setIsOpen: (isOpen: boolean) => void;
 }
 

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

@@ -0,0 +1,6 @@
+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';
+export { default as SponsorStyleAddModal } from './SponsorStyleAddModal';

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

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

@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+import EditModal from '@components/sponsorstyles/EditModal';
+import { SponsorStyle } from '@type/common'; // SponsorStyle 型のインポートを確認してください
+
+const meta: Meta<typeof EditModal> = {
+  title: 'FinanSu/sponsorstyles/EditModal',
+  component: EditModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof EditModal> = (args) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return <EditModal {...args} setIsOpen={setIsOpen} />;
+};
+
+const sampleSponsorStyle: SponsorStyle = {
+  id: 1,
+  style: 'Premium',
+  feature: 'Featured on homepage',
+  price: 20000,
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  sponsorStyleId: 123,
+  sponsorStyle: sampleSponsorStyle,
+};

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

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

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

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

@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { OpenEditModalButton } from '@components/sponsorstyles';
+import { Props } from '@components/sponsorstyles/OpenEditModalButton';
+import { SponsorStyle } from '@type/common';
+
+// メタデータ定義
+const meta: Meta<typeof OpenEditModalButton> = {
+  title: 'FinanSu/sponsorstyles/OpenEditModalButton',
+  component: OpenEditModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+// 仮のSponsorStyleデータ
+const sampleSponsorStyle: SponsorStyle = {
+  id: 1,
+  style: 'Sample Style',
+  feature: 'Sample Feature',
+  price: 1000,
+};
+
+const Template: StoryFn<Props> = (args) => <OpenEditModalButton {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  id: 1,
+  sponsorStyle: sampleSponsorStyle,
+  children: <h1>Sample Child</h1>,
+};

view/next-project/src/stories/sponsorstyles/SponsorStyleAddModal.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { SponsorStyleAddModal } from '@components/sponsorstyles';
+
+const meta: Meta = {
+  title: 'FinanSu/sponsorstyles/SponsorStyleAddModal',
+  component: SponsorStyleAddModal,
+  argTypes: {},
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryFn<typeof SponsorStyleAddModal> = (args) => <SponsorStyleAddModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};