refacto: Story generator

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
@@ -94,13 +104,6 @@ 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)
 
@@ -125,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).
@@ -133,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
@@ -223,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.js → generators/story/index.js

@@ -7,13 +7,15 @@ module.exports = {
       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/docs.stories.tsx.hbs',
+      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": {

plopfile.js

@@ -3,7 +3,7 @@ const inquirerFuzzyPath = require('inquirer-fuzzy-path');
 const storyGenerator = require('./generators/story');
 
 module.exports = function (plop) {
-  plop.setGenerator('stories', storyGenerator);
+  plop.setGenerator('story', storyGenerator);
 
   //#region  //*=========== Handlebars Helper ===========
   /**