chore: add plop command to generate component docs

Author: segunadebayo

.prettierignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 .next
-build
+build
+*.hbs

package.json

@@ -6,7 +6,6 @@
     "build": "next build",
     "lint": "next lint",
     "prepare": "husky install",
-    "postinstall": "pnpm-deduplicate",
     "gen:theme-typings": "chakra-cli tokens theme.ts",
     "avatars:gen": "tsx scripts/avatars.ts",
     "members:gen": "tsx scripts/all-members.ts",
@@ -18,6 +17,7 @@
     "clean": "rm -rf pnpm-lock.yaml node_modules",
     "reinstall": "pnpm clean && pnpm i",
     "deps": "pnpm up '@chakra-ui/*' --latest",
+    "create:docs": "plop component",
     "content": "contentlayer build --clearCache"
   },
   "dependencies": {
@@ -54,6 +54,7 @@
     "next-contentlayer": "0.3.0",
     "next-seo": "^5.4.0",
     "octokit": "^2.0.4",
+    "plop": "^3.1.2",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

plop/component/props.mdx.hbs

@@ -0,0 +1,10 @@
+---
+id: {{componentName}}
+scope: props
+---
+
+## Props
+
+### {{component}} Props
+
+<PropsTable of='{{component}}' />

plop/component/theming.mdx.hbs

@@ -0,0 +1,16 @@
+---
+id: accordion
+scope: theming
+---
+
+## Theming
+
+The `${{component}}` component is a multipart component. The styling needs to be
+applied to each part specifically.
+
+> To learn more about styling multipart components, visit the
+> [Component Style](/docs/styled-system/component-style#styling-multipart-components)
+> page.
+
+### Anatomy
+

plop/component/usage.mdx.hbs

@@ -0,0 +1,19 @@
+---
+id: accordion
+title: {{component}}
+category: 'disclosure'
+package: '@chakra-ui/{{componentName}}'
+description: TODO
+---
+
+## Import
+
+Chakra UI exports the followings components:
+
+- `{{component}}`: Add description
+
+```js
+import { {{component}} } from '@chakra-ui/react'
+```
+
+## Usage

plopfile.js

@@ -0,0 +1,36 @@
+const dashCase = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/**
+ * @param {import("plop").NodePlopAPI} plop
+ */
+module.exports = function main(plop) {
+  plop.setGenerator('component', {
+    description: 'Document a component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'component',
+        message: 'Enter component name:',
+      },
+    ],
+    actions(answers) {
+      const actions = []
+      if (!answers) return actions
+
+      const { component } = answers
+
+      actions.push({
+        type: 'addMany',
+        templateFiles: 'plop/component/**',
+        destination: `./content/docs/components/{{dashCase component}}`,
+        base: 'plop/component',
+        data: { component, componentName: dashCase(component) },
+        abortOnFail: true,
+      })
+
+      return actions
+    },
+  })
+}