13 apply plopjs

package.json

@@ -27,7 +27,8 @@
     "test": "jest --passWithNoTests",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "plop": "plop"
   },
   "dependencies": {
     "d3": "^7.9.0",
@@ -69,6 +70,7 @@
     "eslint-plugin-testing-library": "^6.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "plop": "^4.0.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "storybook": "^8.1.1",

plop_templates/component/__test__/{{upperCamel name}}.test.tsx.hbs

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import {{upperCamel name}} from "../{{upperCamel name}}";
+
+describe("{{name}}", () => {
+  // eslint-disable-next-line jest/expect-expect
+  it("에러 없이 렌더링되어야 합니다.", () => {
+    render(<{{upperCamel name}} />);
+  });
+});

plop_templates/component/index.ts.hbs

@@ -0,0 +1,9 @@
+import {{upperCamel name}} from "./{{upperCamel name}}";
+import { {{upperCamel name}}Variants } from "./{{upperCamel name}}.styles";
+import type { {{upperCamel name}}Props } from "./{{upperCamel name}}.types";
+
+export type { {{upperCamel name}}Props };
+
+export { {{upperCamel name}}Variants };
+
+export default {{upperCamel name}}

plop_templates/component/{{upperCamel name}}.stories.tsx.hbs

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {{upperCamel name}} from "./{{upperCamel name}}";
+
+const meta = {
+  title: "{{category}}/{{upperCamel name}}",
+  component: {{upperCamel name}},
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof {{upperCamel name}}>;
+
+export default meta;
+type Story = StoryObj<typeof {{upperCamel name}}>;
+
+export const Default: Story = {
+  render: () => <{{upperCamel name}} />,
+};

plop_templates/component/{{upperCamel name}}.styles.ts.hbs

@@ -0,0 +1,5 @@
+import { tv } from "@utils/customTV";
+
+export const {{upperCamel name}}Variants = tv({
+  base: "",
+});

plop_templates/component/{{upperCamel name}}.tsx.hbs

@@ -0,0 +1,8 @@
+import { {{upperCamel name}}Variants } from "./{{upperCamel name}}.styles";
+import { {{upperCamel name}}Props } from "./{{upperCamel name}}.types";
+
+const {{upperCamel name}} = ({ className, ...props }: {{upperCamel name}}Props) => {
+  return <{{tag}} className={ {{upperCamel name}}Variants({ className })} {...props}></{{tag}}>;
+};
+
+export default {{upperCamel name}};

plop_templates/component/{{upperCamel name}}.types.ts.hbs

@@ -0,0 +1,3 @@
+import { ComponentPropsWithInnerRef } from "@customTypes/utilType";
+
+export type {{upperCamel name}}Props = ComponentPropsWithInnerRef<"{{tag}}">;

plopfile.js

@@ -0,0 +1,43 @@
+export default function (plop) {
+  // create your generators here
+  plop.setGenerator("components", {
+    description: "React component using Typescript",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "Name: ",
+      },
+      {
+        type: "list",
+        name: "category",
+        message: "Which category type do you need?",
+        choices: ["atoms", "molecules", "organisms", "charts"],
+      },
+      {
+        type: "input",
+        name: "tag",
+        message: "Tag name: ",
+      },
+    ],
+    actions: [
+      {
+        type: "addMany",
+        destination: "src/components/{{category}}/{{upperCamel name}}",
+        templateFiles: "plop_templates/component/**/*.hbs",
+        base: "plop_templates/component",
+      },
+    ],
+  });
+
+  plop.setHelper("upperCamel", (txt) =>
+    txt
+      .split(" ")
+      .map((word) =>
+        Array.from(word)
+          .map((char, idx) => (idx === 0 ? char.toUpperCase() : char.toLowerCase()))
+          .join(""),
+      )
+      .join(""),
+  );
+}