feat(#126): add tool to generate stories

README.md

@@ -3,6 +3,8 @@
 🚀 Start UI <small>[web]</small> is an opinionated frontend starter repository created & maintained by the [BearStudio Team](https://www.bearstudio.fr/team) and other contributors.
 It represents our team's up-to-date stack that we use when creating web apps for our clients.
 
+---
+
 ## Getting Started
 
 ```bash
@@ -17,6 +19,8 @@ cd myApp
 yarn dev
 ```
 
+---
+
 ## Technology
 
 - 🟦 [TypeScript](https://www.typescriptlang.org/)
@@ -40,6 +44,8 @@ yarn dev
 
 ℹ️ API calls are mapped on a [JHipster](https://www.jhipster.tech/) backend application.
 
+---
+
 ## Features
 
 - Reponsive layout / navigation.
@@ -55,13 +61,17 @@ yarn dev
 - API Schema documentation via [Swagger UI React](https://github.com/swagger-api/swagger-ui).
 - API Mocking with persisting state via [MirageJS](https://miragejs.com/).
 
+---
+
 ## Installation
 
 ```bash
 yarn install
 yarn build
 ```
 
+---
+
 ## Development
 
 ```bash
@@ -118,6 +128,20 @@ NEXT_PUBLIC_DEV_ENV_NAME=staging
 NEXT_PUBLIC_DEV_ENV_COLOR_SCHEME=teal
 ```
 
+---
+
+## Generators
+
+### Generate Storybook documentation for components
+
+Using fuzzy finding, you can search for components and generate the stories for it.
+
+```bash
+yarn new:story
+```
+
+---
+
 ## API Documentation
 
 API documentation is accessible by admins in the app with [Swagger-UI](https://www.npmjs.com/package/swagger-ui-react).
@@ -126,6 +150,8 @@ yarn docs:build
 ```
 This will build the json documentation from the main file `/src/mocks/openapi/openapi.yaml`.
 
+---
+
 ## Translations
 
 ### Setup the i18n Ally extension
@@ -216,6 +242,8 @@ t('account:resetPassword.actions.reset')
 
 - Use the common workspace only for VERY generic translations. By default, use specific namespaces to allow easy update on large code base without unwanted side-effects.
 
+---
+
 ## Production
 
 ### NodeJS (recommended)

generators/story/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/index.js

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

package.json

@@ -26,6 +26,7 @@
     "static:serve": "yarn static:build && npx servor out app.html 5000",
     "theme:generate-typing": "chakra-cli tokens ./src/theme/theme.ts",
     "theme:generate-icons": "svgr --config-file src/components/Icons/svgr.config.js src/components/Icons/svg-sources",
+    "new:story": "plop story",
     "docs:build": "swagger-cli bundle src/mocks/openapi/openapi.yaml -t json --outfile public/open-api.json"
   },
   "lint-staged": {
@@ -99,8 +100,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('story', 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"]
 }