[Feature] 스토리 코드 생성 자동화 (#52)

* feat: story docs 자동화 추가

* docs: 스토리북 문서 자잘한 수정

* chore: button 타입 style로 네이밍 변경

* chore: codegen 시 validation 추가

* chore: 불필요한 부분 삭제

* docs: eslint 규칙 따르도록 double quote로 변경

packages/codegen/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "codegen",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "plop": "^4.0.1"
+  }
+}

packages/codegen/plopfile.js

@@ -0,0 +1,33 @@
+import { promises as fs } from "fs";
+import { exit } from "process";
+
+export default async function async(plop) {
+  const COMPONENT_DIR = "../wow-ui/src/components";
+  const files = await fs.readdir(COMPONENT_DIR);
+
+  plop.setGenerator("Story", {
+    description: "Create a story file",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "스토리를 작성할 컴포넌트 이름을 입력해주세요",
+        validate: (input) => {
+          if (!files.includes(input)) {
+            console.log("\n만들어진 컴포넌트 이름을 입력해주세요.");
+            exit(1);
+          }
+
+          return true;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "../wow-ui/src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx",
+        templateFile: "templates/Story.tsx.hbs",
+      },
+    ],
+  });
+}

packages/codegen/templates/Story.tsx.hbs

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {{pascalCase name}} from "@/components/{{pascalCase name}}";
+
+const meta = {
+  title: "UI/{{pascalCase name}}",
+  component: {{pascalCase name}},
+  tags: ["autodocs"],
+  parameters: {
+    // 컴포넌트 부제목 작성 ex. 버튼 컴포넌트
+    componentSubtitle: "",
+    // 색 대조 관련 웹 접근성 테스트 불가하게 하는 속성
+    // 필요 없으면 지우기
+    //a11y: {
+    //  config: {
+    //    rules: [{ id: "color-contrast", enabled: false }],
+    //  },
+    //},
+  },
+  argTypes: {
+    props1: {
+      description: "props1은 default 값이 있는 필수적인 속성입니다."",
+      table: {
+        // type, 필수가 아닐 경우 required 삭제
+        type: { summary: "string", required: true },
+        // defaultValue (Optional)
+        defaultValue: { summary: "기본 값" },
+      },
+      control: {
+        // Args Table에서 사용자가 조작할 수 있는 타입
+        // select일 경우 options를 배열로 제공
+        // 그 외 text, number, boolean, color, check, radio 등 존재
+        // control 불가능하게 하고 싶을 경우 객체가 아니라 false로 설정
+        // ex. control: false, 
+        // 참고 : https://storybook.js.org/docs/react/essentials/controls
+        type: "select",
+        options: ["option1", "option2"],
+      },
+    },
+  },
+  // decorators (Optional)
+  // 공통적으로 적용하고 싶은 컴포넌트 설정
+  decorators: [
+    (Story) => (
+      <>
+        {Story()}
+      </>
+    ),
+  ],
+} satisfies Meta<typeof {{pascalCase name}}>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};

packages/wow-ui/package.json

@@ -70,7 +70,8 @@
     "build-storybook": "storybook build",
     "generate:build-config": "tsx ../scripts/generateBuildConfig.ts && prettier --write ./rollup.config.js ./package.json",
     "test-storybook": "test-storybook --browsers firefox chromium webkit",
-    "test": "jest"
+    "test": "jest",
+    "create:story-file": "plop --plopfile ../codegen/plopfile.js"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
@@ -93,6 +94,7 @@
     "chromatic": "^11.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "plop": "^4.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.5.3",
     "typescript": "^5.3.3"

packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -48,9 +48,7 @@ const meta = {
         type: { summary: "ReactNode" },
         defaultValue: { summary: null },
       },
-      control: {
-        type: "text",
-      },
+      control: false,
     },
     onChange: {
       description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
@@ -122,19 +120,15 @@ const meta = {
         type: { summary: "InputHTMLAttributes<HTMLInputElement>" },
         defaultValue: { summary: "{}" },
       },
-      control: {
-        type: "object",
-      },
+      control: false,
     },
     style: {
       description: "체크박스의 커스텀 스타일을 설정합니다.",
       table: {
         type: { summary: "CSSProperties" },
         defaultValue: { summary: "{}" },
       },
-      control: {
-        type: "object",
-      },
+      control: false,
     },
   },
 } satisfies Meta<typeof Checkbox>;

packages/wow-ui/src/components/Chip/Chip.stories.ts

@@ -14,7 +14,6 @@ const meta = {
       },
     },
   },
-
   argTypes: {
     disabled: {
       description: "disabled는 칩 버튼이 비활성화 상태인지 여부를 나타냅니다.",
@@ -37,7 +36,6 @@ const meta = {
         type: "boolean",
       },
     },
-
     isChecked: {
       description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
       table: {
@@ -61,11 +59,7 @@ const meta = {
     label: {
       description: "칩에 들어가게 될 텍스트입니다.",
       table: {
-        type: { summary: "string" },
-      },
-      type: {
-        name: "string",
-        required: true,
+        type: { summary: "string", required: true },
       },
       control: {
         type: "text",
@@ -75,29 +69,37 @@ const meta = {
       description: "칩 클릭 시 동작할 이벤트입니다.",
       table: {
         type: { summary: "() => void" },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onDelete: {
       description: "칩에 대한 필터를 제거하기 위한 함수입니다.",
       table: {
         type: { summary: "() => void" },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onKeyDown: {
       description:
         "칩이 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
       table: {
         type: { summary: "() => void" },
-        control: {
-          type: "function",
-        },
       },
+      control: {
+        type: "function",
+      },
+    },
+    style: {
+      description: "칩의 커스텀 스타일을 설정합니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
     },
   },
 } satisfies Meta<typeof Chip>;

packages/wow-ui/src/components/Switch/Switch.stories.tsx

@@ -58,19 +58,19 @@ const meta = {
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onClick: {
       description: "스위치 클릭 시 동작할 이벤트입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onKeyDown: {
@@ -79,9 +79,9 @@ const meta = {
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
   },

packages/wow-ui/src/components/TextField/TextField.stories.tsx

@@ -19,16 +19,12 @@ const meta = {
     label: {
       description: "텍스트필드의 라벨입니다.",
       table: {
-        type: { summary: "string" },
+        type: { summary: "string", required: true },
         defaultValue: { summary: null },
       },
       control: {
         type: "text",
       },
-      type: {
-        name: "string",
-        required: true,
-      },
     },
     placeholder: {
       description: "텍스트필드의 플레이스홀더 텍스트입니다.",
@@ -96,68 +92,62 @@ const meta = {
         type: { summary: "ReactNode" },
         defaultValue: { summary: null },
       },
-      control: {
-        type: "text",
-      },
+      control: false,
     },
     onChange: {
       description: "외부 활성 상태가 변경될 때 호출될 콜백 함수입니다.",
       table: {
         type: { summary: "(value: string) => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onBlur: {
       description: "텍스트필드가 포커스를 잃을 때 호출될 콜백 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onFocus: {
       description: "텍스트필드가 포커스됐을 때 호출될 콜백 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     textareaProps: {
       description: "텍스트필드에 전달할 추가 textarea 속성입니다.",
       table: {
         type: { summary: "TextareaHTMLAttributes<HTMLTextAreaElement>" },
         defaultValue: { summary: null },
-        control: {
-          type: "object",
-        },
       },
+      control: false,
     },
     style: {
       description: "텍스트필드의 커스텀 스타일 속성입니다.",
       table: {
         type: { summary: "CSSProperties" },
         defaultValue: { summary: null },
-        control: {
-          type: "object",
-        },
       },
+      control: false,
     },
     className: {
       description: "텍스트필드에 전달하는 커스텀 클래스명입니다.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: null },
-        control: {
-          type: "text",
-        },
+      },
+      control: {
+        type: "text",
       },
     },
   },

packages/wow-ui/src/types/button.ts

@@ -33,7 +33,7 @@ export interface BasicButtonProps {
    * wow-ds에서 지정하고 있는 스타일을 제외하고 사용자가 React 스타일 객체를 이용하여 커스텀하게 스타일을 적용할 수 있도록 합니다.
    */
 
-  customStyle?: CSSProperties;
+  style?: CSSProperties;
 
   /**
    * 버튼이 클릭되었을때 호출되는 함수입니다.