Add support to plop generator

SAKANA7 · Aug 20, 2022 · 5a6e941 · 5a6e941
1 parent b0157f6
commit 5a6e941
Show file tree

Hide file tree

Showing 9 changed files with 841 additions and 17 deletions.
diff --git a/.npmignore b/.npmignore
@@ -8,6 +8,7 @@ storybook-static
 rollup.config.*
 node_modules/
 docs-build/
+generators
 .github
 .tool-versions
 ./**/*/stories.*

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+*.hbs
diff --git a/README.md b/README.md
@@ -58,6 +58,7 @@ You can contribute to this project by opening an issue or creating a pull reques
 - `sb`: run the storybook at the address `localhost:6006`
 - `prettier:check`: check formatting on all `src` directory
 - `prettier:format`: formats all `src` directory
+- `generate <Component name>`: create a component boilerplate
 
 ## Project structure
 

diff --git a/generators/plopfile.js b/generators/plopfile.js
@@ -0,0 +1,33 @@
+module.exports = function (plop) {
+  plop.setGenerator('component', {
+    description: 'application component',
+
+    // inquirer prompts
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'component name?'
+      }
+    ],
+
+    // actions to perform
+    actions: [
+      {
+        type: 'add',
+        path: '../src/packages/{{pascalCase name}}/index.tsx',
+        templateFile: 'templates/index.tsx.hbs'
+      },
+      {
+        type: 'add',
+        path: '../src/packages/{{pascalCase name}}/stories.tsx',
+        templateFile: 'templates/stories.tsx.hbs'
+      },
+      {
+        type: 'add',
+        path: '../src/packages/{{pascalCase name}}/styles.ts',
+        templateFile: 'templates/styles.ts.hbs'
+      }
+    ]
+  })
+}
diff --git a/generators/templates/index.tsx.hbs b/generators/templates/index.tsx.hbs
@@ -0,0 +1,10 @@
+import React from 'react'
+import * as S from './styles'
+
+const {{pascalCase name}} = () => (
+  <S.Wrapper>
+    <h1>{{pascalCase name}}</h1>
+  </S.Wrapper>
+)
+
+export default {{pascalCase name}}
diff --git a/generators/templates/stories.tsx.hbs b/generators/templates/stories.tsx.hbs
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react/types-6-0'
+import Tag from '.'
+
+export default {
+  title: 'Tag',
+  component: Tag
+} as Meta
+
+export const Default: Story = (args) => <Tag {...args} />
diff --git a/generators/templates/styles.ts.hbs b/generators/templates/styles.ts.hbs
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div``
diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
     "prettier:format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "prettier:check": "prettier -c \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "sb": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "generate": "yarn plop --plopfile ./generators/plopfile.js"
   },
   "keywords": [
     "React",
@@ -45,6 +46,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "plop": "^3.1.1",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import styled from 'styled-components'

		export const Wrapper = styled.div``