chore: Added plop generator for new components STC-699 (#183)

plop-templates/component.hbs

@@ -0,0 +1,21 @@
+/** @jsxImportSource theme-ui */
+import { forwardRef } from "react"
+
+export interface {{pascalCase componentName}}Props {
+  children?: string | React.ReactNode
+}
+
+const {{pascalCase componentName}} = forwardRef<HTMLDivElement, {{pascalCase componentName}}Props>(function {{pascalCase componentName}}(
+  {
+    children,
+  }: {{pascalCase componentName}}Props,
+  ref
+): JSX.Element {
+  return (
+    <div ref={ref}>
+      {children}
+    </div>
+  )
+})
+
+export default {{pascalCase componentName}}

plop-templates/docs/api.hbs

@@ -6,4 +6,4 @@ import { PropTable } from '@site/src/components/PropTable'
 
 ## Examples
 
-- [{{pascalCase componentName}}](/docs/components/{{pascalCase componentName}})
+- [{{pascalCase componentName}}](/docs/components/{{lowerCase componentName}})

plop-templates/docs/component.hbs

@@ -0,0 +1,17 @@
+# {{pascalCase componentName}}
+
+## Component
+
+Here goes the {{pascalCase componentName}} description.
+
+## First level Category
+
+### Second level Category
+```jsx live
+<{{pascalCase componentName}}>Component children</{{pascalCase componentName}}>
+```
+
+## API
+
+- [{{pascalCase componentName}}](/docs/apis/{{lowerCase componentName}})
+

plop-templates/entryPoint.hbs

@@ -0,0 +1,2 @@
+export { default as {{pascalCase componentName}} } from "./{{pascalCase componentName}}/{{pascalCase componentName}}"
+export type { {{pascalCase componentName}}Props } from "./{{pascalCase componentName}}/{{pascalCase componentName}}"

plop-templates/story.hbs

@@ -0,0 +1,13 @@
+/** @jsxImportSource theme-ui */
+import { ComponentMeta } from "@storybook/react"
+
+import {{pascalCase componentName}} from "./{{pascalCase componentName}}"
+
+type StoryMeta = ComponentMeta<typeof {{pascalCase componentName}}>
+
+export default {
+  title: "Design System/{{pascalCase componentName}}",
+  component: {{pascalCase componentName}},
+} as StoryMeta
+
+export const Default = {} as StoryMeta

plop-templates/styleguidist.hbs

@@ -0,0 +1,15 @@
+#### First component variant:
+
+```js
+<{{pascalCase componentName}}>
+  Children
+</{{pascalCase componentName}}>
+```
+
+#### Second component variant:
+
+```js
+<{{pascalCase componentName}}>
+  Children
+</{{pascalCase componentName}}>
+```

plopfile.mjs

@@ -1,18 +1,136 @@
+import { exec } from "child_process"
+import fs from "fs"
+
+const APPEND_STRING = "// appendHere"
+
 export default function (plop) {
+  plop.setActionType("runPrettier", function (answers, config, plop) {
+    try {
+      config.paths.forEach((path) => {
+        exec(`yarn prettier --write ${plop.renderString(path, answers)}`)
+      })
+      return "Prettier ran successfully"
+    } catch (error) {
+      return error
+    }
+  })
+
+  // This action must be reviewed as soon as we have an export that use multiple lines
+  // because it will break for that kind of export
+  plop.setActionType("prepareToAppend", function (answers, _config, plop) {
+    try {
+      const indexData = fs.readFileSync("src/components/index.ts", "utf8")
+      const componentExport = plop.renderString(
+        'export { default as {{pascalCase componentName}} } from "./{{pascalCase componentName}}/{{pascalCase componentName}}"',
+        answers
+      )
+      const linesArray = indexData.toString().split("\n")
+
+      const indexToPrepend = linesArray.findIndex((line) => {
+        return line.startsWith("export { default as ") && line > componentExport
+      })
+
+      if (indexToPrepend === -1) {
+        linesArray.push(APPEND_STRING)
+      } else if (indexToPrepend === 0) {
+        linesArray.unshift(APPEND_STRING)
+      } else {
+        linesArray[indexToPrepend - 1] = `\n${APPEND_STRING}`
+      }
+      fs.writeFileSync("src/components/index.ts", linesArray.join("\n"))
+      return "Prepare to append ran successfully"
+    } catch (error) {
+      return error
+    }
+  })
+
+  plop.setActionType("cleanUp", function () {
+    try {
+      const indexData = fs.readFileSync("src/components/index.ts", "utf8")
+      const linesArray = indexData
+        .toString()
+        .split("\n")
+        .filter((line) => !line.includes(APPEND_STRING))
+      fs.writeFileSync("src/components/index.ts", linesArray.join("\n"))
+      return "Clean up ran successfully"
+    } catch (error) {
+      return error
+    }
+  })
+
   // create your generators here
-  plop.setGenerator('createAPIDoc', {
-    description: 'create API doc page for a component',
+  plop.setGenerator("createAPIDoc", {
+    description: "create API doc page for a component",
     prompts: [
       {
         type: "input",
         name: "componentName",
         message: "What is the component name?",
       },
     ],
-    actions: [{
-      type: 'add',
-      path: 'website/docs/apis/{{pascalCase componentName}}.mdx',
-      templateFile: 'plop-templates/docs/api.hbs'
-    }]
-  });
-};
+    actions: () => {
+      const componentPath =
+        "src/components/{{pascalCase componentName}}/{{pascalCase componentName}}.tsx"
+      const storyPath =
+        "src/components/{{pascalCase componentName}}/{{pascalCase componentName}}.stories.tsx"
+      const styleguidistPath =
+        "src/components/{{pascalCase componentName}}/{{pascalCase componentName}}.md"
+
+      const docusaurusApiPath =
+        "website/docs/apis/{{pascalCase componentName}}.mdx"
+      const docusaurusComponentPath =
+        "website/docs/components/{{pascalCase componentName}}.mdx"
+
+      return [
+        {
+          type: "add",
+          path: componentPath,
+          templateFile: "plop-templates/component.hbs",
+        },
+        {
+          type: "add",
+          path: storyPath,
+          templateFile: "plop-templates/story.hbs",
+        },
+        {
+          type: "add",
+          path: styleguidistPath,
+          templateFile: "plop-templates/styleguidist.hbs",
+        },
+        {
+          type: "add",
+          path: docusaurusApiPath,
+          templateFile: "plop-templates/docs/api.hbs",
+        },
+        {
+          type: "add",
+          path: docusaurusComponentPath,
+          templateFile: "plop-templates/docs/component.hbs",
+        },
+        {
+          type: "prepareToAppend",
+        },
+        {
+          type: "append",
+          pattern: APPEND_STRING,
+          path: "src/components/index.ts",
+          templateFile: "plop-templates/entryPoint.hbs",
+        },
+        {
+          paths: [
+            componentPath,
+            storyPath,
+            styleguidistPath,
+            docusaurusApiPath,
+            docusaurusComponentPath,
+            "src/components/index.ts",
+          ],
+          type: "runPrettier",
+        },
+        {
+          type: "cleanUp",
+        },
+      ]
+    },
+  })
+}