feat(plopfile): add file generator with plopfile

add file templates from a standard component for automatic generation using plopfile.

generators/plopfile.js

@@ -0,0 +1,36 @@
+module.exports = function (plop) {
+  plop.setGenerator('component', {
+    description: 'application component',
+
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'component name?'
+      }
+    ],
+
+    actions: [
+      {
+        type: 'add',
+        path: '../src/components/{{pascalCase name}}/index.tsx',
+        templateFile: 'templates/index.tsx.hbs'
+      },
+      {
+        type: 'add',
+        path: '../src/components/{{pascalCase name}}/index.stories.tsx',
+        templateFile: 'templates/index.stories.tsx.hbs'
+      },
+      {
+        type: 'add',
+        path: '../src/components/{{pascalCase name}}/styles.ts',
+        templateFile: 'templates/styles.ts.hbs'
+      },
+      {
+        type: 'add',
+        path: '../src/components/{{pascalCase name}}/test.tsx',
+        templateFile: 'templates/test.tsx.hbs'
+      }
+    ]
+  });
+};

generators/templates/index.stories.tsx.hbs

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/react';
+
+import { {{pascalCase name}} } from '.';
+
+export default {
+  title: '{{pascalCase name}}',
+  component: {{pascalCase name}},
+} as Meta;
+
+export const Default: Story = args => {
+  return <{{pascalCase name}} {...args} />;
+};
+

generators/templates/index.tsx.hbs

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import * as S from './styles';
+
+export const {{pascalCase name}} = () => {
+  return (
+    <S.Wrapper>
+      <h1>{{pascalCase name}}</h1>
+    </S.Wrapper>
+  );
+};

generators/templates/styles.ts.hbs

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div``;
+

generators/templates/test.tsx.hbs

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+
+import { {{pascalCase name}} } from '.';
+
+describe('<{{pascalCase name}} />', () => {
+  it('should render the heading', () => {
+    render(<{{pascalCase name}} />);
+
+    expect(
+      screen.getByRole('heading', { name: /{{pascalCase name}}/i })
+    ).toBeInTheDocument();
+  });
+});

package.json

@@ -12,6 +12,7 @@
     "release": "semantic-release --no-ci",
     "test": "jest",
     "test:watch": "yarn test --watch",
+    "generate": "yarn plop --plopfile ./generators/plopfile.js",
     "storybook": "start-storybook -s ./public -p 6006",
     "build-storybook": "build-storybook -s ./public"
   },
@@ -66,6 +67,7 @@
     "jest-styled-components": "^7.0.5",
     "jest-svg-transformer": "^1.0.0",
     "lint-staged": "^11.0.1",
+    "plop": "^2.7.4",
     "prettier": "^2.3.2",
     "semantic-release": "^17.4.4",
     "typescript": "4.3.5",