feat(#126): add tool to generate stories

README.md

@@ -94,6 +94,13 @@ yarn theme:generate-icons
 
 > ⚠️ All svg icons should be svg files prefixed by `icon-` (example: `icon-externel-link`) with **24x24px** size, only **one shape** and **filled with `#000` color** (will be replaced by `currentColor`).
 
+### Generate Storybook documentation for components
+
+Using fuzzy finding, you can search for components and generate the stories for it.
+
+```bash
+yarn plop
+```
 
 ### Development with [MirageJS](https://miragejs.com/) (mock)
 

generators/docs.stories.tsx.hbs

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { {{ properCase ( getName path ) }} } from '@/{{ getFolder path }}';
+
+export default {
+  title: '{{ directoryCase ( getFolder path ) }}',
+} as ComponentMeta<typeof {{ properCase ( getName path ) }}>;
+
+export const Default = () => (
+  <{{ properCase ( getName path ) }} />
+)

generators/story.js

@@ -0,0 +1,19 @@
+module.exports = {
+  description: 'Component Story Generator',
+  prompts: [
+    {
+      type: 'fuzzypath',
+      message: 'Component name for story',
+      name: 'path',
+      rootPath: 'src',
+      itemType: 'file',
+    },
+  ],
+  actions: [
+    {
+      type: 'add',
+      path: 'src/{{getFolder path}}/docs.stories.tsx',
+      templateFile: 'generators/docs.stories.tsx.hbs',
+    },
+  ],
+};

package.json

@@ -99,8 +99,10 @@
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.1",
+    "inquirer-fuzzy-path": "2.3.0",
     "lint-staged": "13.0.3",
     "miragejs": "0.1.45",
+    "plop": "3.1.1",
     "prettier": "2.7.1",
     "react-is": "18.2.0",
     "storybook-dark-mode": "1.1.0",

plopfile.js

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const inquirerFuzzyPath = require('inquirer-fuzzy-path');
+const storyGenerator = require('./generators/story');
+
+module.exports = function (plop) {
+  plop.setGenerator('stories', storyGenerator);
+
+  //#region  //*=========== Handlebars Helper ===========
+  /**
+   * Generate story component route
+   * @see https://stackoverflow.com/questions/41490076/capitalize-every-letter-after-and-characters
+   */
+  plop.setHelper('directoryCase', function (title) {
+    return title.replace(/(^|\/|-)(\S)/g, (s) => s.toUpperCase());
+  });
+
+  /**
+   * Remove 'src', and file name from path
+   */
+  plop.setHelper('getFolder', (path) => {
+    const split = path.split('/');
+    // remove filename
+    split.pop();
+    if (split[0] === 'src') split.splice(0, 1);
+    return split.join('/');
+  });
+
+  /**
+   * Remove file name from path and get the parent folder name
+   */
+  plop.setHelper('getName', (path) => {
+    const split = path.split('/');
+    // remove filename
+    split.pop();
+    // get the parent folder name
+    return split.pop();
+  });
+  //#endregion  //*======== Handlebars Helper ===========
+
+  //#region  //*=========== Inquirer Prompt ===========
+  plop.setPrompt('fuzzypath', inquirerFuzzyPath);
+  //#endregion  //*======== Inquirer Prompt ===========
+};

tsconfig.json

@@ -22,6 +22,12 @@
     "incremental": false,
     "typeRoots": ["node_modules/@types", "src/types"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "generators/story.js",
+    "plopfile.js"
+  ],
+  "exclude": ["node_modules", "generators/**/*", "plopfile.js"]
 }