Feat: Add automation script to generate component

generators/plopfile.ts

@@ -0,0 +1,69 @@
+import type { NodePlopAPI } from 'plop'
+
+export default (plop: NodePlopAPI) => {
+  plop.setGenerator('component', {
+    description: 'Create a component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is your component name?',
+      },
+      {
+        type: 'list',
+        name: 'atomicGroup',
+        message: 'What is your component atomic group?',
+        choices: ['atoms', 'molecules', 'organisms'],
+      },
+    ],
+    actions(data) {
+      const actions = [
+        {
+          type: 'add',
+          path:
+            '../packages/ui/src/{{atomicGroup}}/{{pascalCase name}}/{{pascalCase name}}.tsx',
+          templateFile: 'templates/Component.tsx.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            '../packages/ui/src/{{atomicGroup}}/{{pascalCase name}}/index.tsx',
+          templateFile: 'templates/index.tsx.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            '../themes/theme-b2c-tailwind/src/{{atomicGroup}}/{{kebabCase name}}.css',
+          templateFile: 'templates/style.css.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            '../packages/ui/src/{{atomicGroup}}/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
+          templateFile: 'templates/test.tsx.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            '../packages/ui/src/{{atomicGroup}}/{{pascalCase name}}/stories/{{pascalCase name}}.stories.tsx',
+          templateFile: 'templates/stories.tsx.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            '../packages/ui/src/{{atomicGroup}}/{{pascalCase name}}/stories/{{pascalCase name}}.mdx',
+          templateFile: 'templates/stories.mdx.hbs',
+        },
+      ]
+
+      actions.push({
+        type: 'append',
+        path: '../packages/ui/src/index.ts',
+        pattern: new RegExp(`// ${data?.atomicGroup}`, 'i'),
+        templateFile: 'templates/exportToIndex.hbs',
+      } as any)
+
+      return actions
+    },
+  })
+}

generators/templates/Component.tsx.hbs

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export interface {{pascalCase name}}Props {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  children?: React.ReactNode
+}
+
+const {{pascalCase name}} = ({ testId = 'store-{{kebabCase name}}', children }: {{pascalCase name}}Props) => {
+  return (
+    <div data-store-{{kebabCase name}} data-testid={testId}>
+      {children}
+    </div>
+  )
+}
+
+export default {{pascalCase name}}

generators/templates/exportToIndex.hbs

@@ -0,0 +1,2 @@
+export { default as {{pascalCase name}} } from './{{atomicGroup}}/{{pascalCase name}}'
+export type { {{pascalCase name}}Props } from './{{atomicGroup}}/{{pascalCase name}}'

generators/templates/index.tsx.hbs

@@ -0,0 +1,2 @@
+export { default } from './{{pascalCase name}}'
+export type { {{pascalCase name}}Props } from './{{pascalCase name}}'

generators/templates/stories.mdx.hbs

@@ -0,0 +1,20 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import {{pascalCase name}} from '../{{pascalCase name}}'
+
+# {{pascalCase name}}
+
+<Canvas>
+  <Story id="{{kebabCase atomicGroup}}-{{lowerCase name}}--{{kebabCase name}}" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ {{pascalCase name}} } />
+
+## CSS Selectors
+
+```css
+[data-store-{{kebabCase name}}] {
+}
+```

generators/templates/stories.tsx.hbs

@@ -0,0 +1,22 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { {{pascalCase name}}Props } from '../{{pascalCase name}}'
+import Component from '../{{pascalCase name}}'
+import mdx from './{{pascalCase name}}.mdx'
+
+const {{pascalCase name}}Template: Story<{{pascalCase name}}Props> = ({ testId }) => (
+  <Component testId={testId}>{{pascalCase name}}</Component>
+)
+
+export const {{pascalCase name}} = {{pascalCase name}}Template.bind({})
+{{pascalCase name}}.storyName = '{{pascalCase name}}'
+
+export default {
+  title: '{{pascalCase atomicGroup}}/{{pascalCase name}}',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta

generators/templates/style.css.hbs

@@ -0,0 +1,3 @@
+[data-store-{{kebabCase name}}] {
+
+}

generators/templates/test.tsx.hbs

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import {{pascalCase name}} from './{{pascalCase name}}'
+
+describe('{{pascalCase name}}', () => {
+  it('should have `data-store-{{kebabCase name}}` attribute', () => {
+    const { getByTestId } = render(<{{pascalCase name}}>Testing</{{pascalCase name}}>)
+
+    expect(getByTestId('store-{{kebabCase name}}')).toHaveAttribute('data-store-{{kebabCase name}}')
+  })
+
+  describe('Accessibility', () => {
+    it('should have no violations', async () => {
+      const { getByTestId } = render(<{{pascalCase name}}>Testing</{{pascalCase name}}>)
+
+      expect(await axe(getByTestId('store-{{kebabCase name}}'))).toHaveNoViolations()
+    })
+  })
+})

package.json

@@ -17,7 +17,8 @@
     "test": "lerna run test --",
     "bootstrap": "lerna bootstrap",
     "release": "lerna version minor --yes && lerna publish from-git --yes",
-    "size": "lerna run size"
+    "size": "lerna run size",
+    "generate": "yarn plop --plopfile generators/plopfile.ts"
   },
   "workspaces": [
     "packages/*",
@@ -48,6 +49,7 @@
     "husky": "^4.3.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.1",
+    "plop": "^2.7.6",
     "prettier": "^2.2.1",
     "typescript": "^4.1.2"
   },
@@ -56,4 +58,3 @@
     "@typescript-eslint/parser": "^4"
   }
 }
-

packages/ui/src/index.ts

@@ -96,6 +96,8 @@ export type {
 export { default as Form } from './molecules/Form'
 export type { FormProps } from './molecules/Form'
 
+// Organisms
+
 // Hooks
 export { default as useSlider } from './hooks/useSlider'
 export type {