Storybook: Use plop file generator for creating new Stories

package.json

@@ -7,6 +7,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
+    "plop": "plop",
     "dev:nextjs": "pnpm run --filter ./packages/nextjs dev",
     "next:dev": "pnpm run --filter ./packages/nextjs next:dev",
     "next:dev:mock": "pnpm run --filter ./packages/nextjs next:dev:mock",
@@ -30,8 +31,11 @@
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "glob": "^10.3.4",
     "husky": "^8.0.3",
+    "inquirer-autocomplete-prompt": "^3.0.0",
     "lint-staged": "^13.1.0",
+    "plop": "^4.0.0",
     "prettier": "^2.8.2",
     "start-server-and-test": "^1.15.2",
     "typescript": "4.9.4"

packages/nextjs/__plop_templates/COMPONENT.stories.tsx.hbs

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from ".storybook/types";
+
+import { screen, userEvent, waitFor, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+import { {{COMPONENT.BASENAME}} } from "./{{COMPONENT.BASENAME}}";
+
+const meta: Meta<typeof {{COMPONENT.BASENAME}}> = {
+  component: {{COMPONENT.BASENAME}},
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof {{COMPONENT.BASENAME}}>;
+
+export const Default: Story = {
+  async play({ canvasElement, step }) {
+    const ui = wrap(canvasElement);
+    await step("TODO: add unit tests", async () => {
+      expect(ui.TODO).toBeVisible();
+    });
+  },
+};
+
+export const Variant: Story = {
+  args: {
+    // TODO: Customize the variant args here
+  },
+  async play({ canvasElement, step }) {
+    const ui = wrap(canvasElement);
+    await step("TODO: add unit tests", async () => {
+      expect(ui.TODO).toBeVisible();
+    });
+  },
+};
+
+/** Encapsulate all UI elements here for easier testing */
+function wrap(canvasElement: HTMLElement) {
+  const container = within(canvasElement);
+  return {
+    get TODO() {
+      return container.getByRole("TODO");
+    },
+  };
+}

plopfile.mjs

@@ -0,0 +1,56 @@
+import path from "node:path";
+import * as glob from "glob";
+import autocompletePrompt from "inquirer-autocomplete-prompt";
+
+const PACKAGES_NEXTJS = "./packages/nextjs";
+
+/**
+ * @param {import("plop").NodePlopAPI} plop
+ */
+export default function (plop) {
+  plop.setPrompt("autocomplete", autocompletePrompt);
+  plop.setGenerator("stories", {
+    description: "Generates a Storybook stories file for a component",
+    prompts: [
+      {
+        name: "COMPONENT",
+        message: "Create a Stories file for which component? (you can search with wildcards)",
+        type: "autocomplete",
+        loop: false,
+        async source(answers, searchTerms) {
+          return glob
+            .sync(`components/**/*${searchTerms || ""}*`, {
+              cwd: PACKAGES_NEXTJS,
+              nodir: true,
+              nocase: true,
+            })
+            .map((file) => {
+              const COMPONENT = {
+                FILE: file,
+                DIRNAME: path.dirname(file),
+                BASENAME: path.basename(file, path.extname(file)),
+              };
+              return {
+                name: file,
+                value: COMPONENT,
+              };
+            });
+        },
+        validate(input, _answers) {
+          const COMPONENT = input.value;
+          if ([".stories", ".test"].some((end) => COMPONENT.BASENAME.endsWith(end))) {
+            return `This does not appear to be a Component file: "${input.name}"`;
+          }
+          return true;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        templateFile: `${PACKAGES_NEXTJS}/__plop_templates/COMPONENT.stories.tsx.hbs`,
+        path: `${PACKAGES_NEXTJS}/{{COMPONENT.DIRNAME}}/{{COMPONENT.BASENAME}}.stories.tsx`,
+      },
+    ],
+  });
+}