feat: story docs 자동화 추가

packages/codegen/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "codegen",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "plop": "^4.0.1"
+  }
+}

packages/codegen/plopfile.js

@@ -0,0 +1,19 @@
+export default async function (plop) {
+  plop.setGenerator("Story", {
+    description: "Create a story file",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "스토리를 작성할 컴포넌트 이름을 입력해주세요",
+      },
+    ],
+    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/codegen/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  }
+}

packages/wow-ui/package.json

@@ -60,7 +60,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",
@@ -83,6 +84,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"