fix: storybook argTypes 수정

sopt-makers · Jun 14, 2024 · 1ab2ea5 · 1ab2ea5
1 parent c3353b3
commit 1ab2ea5
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 18 deletions.
diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@sopt-makers/ui';
+import { IconPlus, IconChevronRight } from '@sopt-makers/icons';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
@@ -16,6 +17,13 @@ export default {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] },
+    rounded: { control: 'radio', options: ['md', 'lg'] },
+    LeftIcon: { control: false },
+    RightIcon: { control: false }
+  }
 } as Meta<ButtonStoryProps>;
 
 // 기본 버튼 스토리
@@ -30,22 +38,24 @@ export const Default: StoryObj<ButtonStoryProps> = {
 };
 
 // 커스텀 버튼 스토리
-export const Another: StoryObj<ButtonStoryProps> = {
+export const LeftIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Another Button',
-    size: 'lg',
+    children: 'LeftIcon Button',
+    size: 'sm',
     theme: 'red',
     rounded: 'lg',
     disabled: false,
+    LeftIcon: IconPlus,
   },
 };
 
-export const Disabled: StoryObj<ButtonStoryProps> = {
+export const RightIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Disabled Button',
-    size: 'md',
+    children: 'RightIcon Button',
+    size: 'lg',
     theme: 'blue',
     rounded: 'lg',
-    disabled: true,
+    disabled: false,
+    RightIcon: IconChevronRight,
   },
 };
diff --git a/apps/docs/src/stories/Callout.stories.tsx b/apps/docs/src/stories/Callout.stories.tsx
@@ -14,6 +14,9 @@ export default {
   title: "Components/Callout",
   component: Callout,
   tags: ["autodocs"],
+  argTypes: {
+    type: { control: 'radio', options: ['danger', 'information', 'warning'] },
+  }
 } as Meta<CalloutProps>;
 
 // danger 콜아웃 스토리

diff --git a/apps/docs/src/stories/CheckBox.stories.tsx b/apps/docs/src/stories/CheckBox.stories.tsx
@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/CheckBox",
   component: CheckBox,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof CheckBox>;
 
 export default meta;

diff --git a/apps/docs/src/stories/Chip.stories.tsx b/apps/docs/src/stories/Chip.stories.tsx
@@ -16,6 +16,12 @@ export default {
   title: 'Components/Chip',
   component: Chip,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md'] },
+    iconColor: { control: 'color' },
+    LeftIcon: { control: false },
+    RightIcon: { control: false },
+  }
 } as Meta<ChipStoryProps>;
 
 // 기본 chip 스토리

diff --git a/apps/docs/src/stories/Radio.stories.tsx b/apps/docs/src/stories/Radio.stories.tsx
@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/Radio",
   component: Radio,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof Radio>;
 
 export default meta;

diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx
@@ -17,6 +17,12 @@ export default {
   title: "Components/Tag",
   component: Tag,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    shape: { control: 'radio', options: ['rect', 'pill'] },
+    variant: { control: 'radio', options: ['default', 'primary', 'secondary'] },
+    type: { control: 'radio', options: ['solid', 'line'] },
+  }
 } as Meta<TagStoryProps>;
 
 // 기본 태그 스토리
@@ -29,14 +35,3 @@ export const Default: StoryObj<TagStoryProps> = {
     type: "solid",
   },
 };
-
-// 커스텀 버튼 스토리
-export const Another: StoryObj<TagStoryProps> = {
-  args: {
-    children: "Another Tag",
-    size: "md",
-    shape: "pill",
-    variant: "primary",
-    type: "line",
-  },
-};
diff --git a/apps/docs/src/stories/Toggle.stories.tsx b/apps/docs/src/stories/Toggle.stories.tsx
@@ -5,6 +5,9 @@ const meta = {
   title: "Components/Control/Toggle",
   component: Toggle,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+  }
 } as Meta<typeof Toggle>;
 
 export default meta;