Automatizando a criação de arquivos com Plop.js

package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "storybook": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook",
-    "jest": "jest"
+    "jest": "jest --watch",
+    "plop": "plop"
   },
   "dependencies": {
     "@emotion/css": "^11.9.0",
@@ -44,6 +45,7 @@
     "eslint-config-next": "12.2.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "plop": "^3.1.1",
     "typescript": "4.7.4"
   }
 }

plop/components/component-generator.js

@@ -0,0 +1,62 @@
+module.exports = (plop) => {
+  plop.setGenerator('component', {
+    description: 'Componente',
+    prompts: [
+      {
+        name: 'name',
+        type: 'input',
+        message: 'Nome do Componente: ',
+      },
+      {
+        name: 'type',
+        type: 'list',
+        message: 'Tipo do Componente: ',
+        choices: [
+          {
+            name: 'Data Display',
+            value: 'data-display',
+          },
+          {
+            name: 'Feedback',
+            value: 'feedback',
+          },
+          {
+            name: 'Navigation',
+            value: 'navigation',
+          },
+          {
+            name: 'Surfaces',
+            value: 'surfaces',
+          },
+        ],
+      },
+    ],
+    actions(data) {
+      const basePath = `src/ui/components/${data.type}/${data.name}`;
+      const actions = [
+        {
+          type: 'add',
+          path: `${basePath}/${data.name}.tsx`,
+          templateFile: `plop/components/component-template.hbs`,
+        },
+        {
+          type: 'add',
+          path: `${basePath}/${data.name}.styled.tsx`,
+          templateFile: `plop/components/component-style-template.hbs`,
+        },
+        {
+          type: 'add',
+          path: `${basePath}/${data.name}.stories.tsx`,
+          templateFile: `plop/components/component-story-template.hbs`,
+        },
+        {
+          type: 'add',
+          path: `${basePath}/${data.name}.test.tsx`,
+          templateFile: `plop/components/component-test-template.hbs`,
+        },
+      ];
+
+      return actions;
+    },
+  });
+};

plop/components/component-story-template.hbs

@@ -0,0 +1,15 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {{name}} from './{{name}}';
+
+export default {
+  title: '{{type}}/{{name}}',
+  component: {{name}},
+} as ComponentMeta<typeof {{name}}>;
+
+const Template: ComponentStory<typeof {{name}}> = (args) => 
+    <{{name}} {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {};

plop/components/component-style-template.hbs

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+//import { } from '@mui/material';
+//import { {{name}}Props } from './{{name}}';
+
+//export const Component = styled('div')`
+  //margin: ${({ theme }) => theme.spacing(5, 0)};
+  //text-align: center;
+//`;

plop/components/component-template.hbs

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from 'react';
+// import {} from '@mui/material';
+// import {} from './{{ name }}.styled';
+
+
+export interface {{name}}Props {}
+
+const {{ name }}:React.FC<PropsWithChildren<{{name}}Props>> = () => {
+
+    return (
+        <div>{{name}}</div>
+    )    
+}
+
+
+export default {{name}}

plop/components/component-test-template.hbs

@@ -0,0 +1,14 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+
+import {{name}} from './{{name}}';
+
+test('shows a {{name}}', () => {
+    // render(<{{name}}></{{name}}>);
+    // fireEvent.click(screen.getByLabelText(text));
+    // fireEvent.click(screen.getByText(text));
+    // expect(screen.queryByText(testMessage)).toBeNull()
+    // expect(screen.getByText(testMessage)).toBeInTheDocument()
+    // expect(screen.queryByText(text)).toBeVisible();
+
+    expect(true).toBe(true);
+});

plop/page/page-generator.js

@@ -0,0 +1,33 @@
+module.exports = (plop, handlers) => {
+  plop.setGenerator('page', {
+    description: 'Página',
+    prompts: [
+      {
+        name: 'name',
+        type: 'input',
+        message: 'Nome da Página: ',
+      },
+      {
+        name: 'folder',
+        type: 'input',
+        message: 'Nome da Pasta: ',
+      },
+    ],
+    actions(data) {
+      const actions = [
+        {
+          type: 'add',
+          path: `src/pages/${data.folder.toLowerCase()}/${handlers.createFilename(data.name)}.tsx`,
+          templateFile: 'plop/page/page-template.hbs',
+        },
+        {
+          type: 'add',
+          path: `src/ui/styles/pages/${data.folder.toLowerCase()}/${handlers.createFilename(data.name)}.styled.tsx`,
+          templateFile: 'plop/page/page-style-template.hbs',
+        },
+      ];
+
+      return actions;
+    },
+  });
+};

plop/page/page-style-template.hbs

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+// import { } from '@mui/material';
+
+
+export const Component = styled('div')`
+  background-color: white;
+  color: black;
+`;

plop/page/page-template.hbs

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GetStaticProps } from 'next';
+
+// import { Component } from '@styles/pages/{{getPath folder (createFilename name)}}.styled';
+
+export const getStaticProps: GetStaticProps = async () => {
+    return {
+        props: {
+            title: '{{name}}',
+        },
+    };
+};
+
+const {{name}}: React.FC = () => {
+    return (
+        <div>
+            <div>{{name}}</div>
+        </div>
+    );
+};
+
+export default {{name}};

plop/page/partial-generator.js

@@ -0,0 +1,33 @@
+module.exports = (plop, handlers) => {
+  plop.setGenerator('partial', {
+    description: 'Partial',
+    prompts: [
+      {
+        name: 'name',
+        type: 'input',
+        message: 'Nome da Partial: ',
+      },
+      {
+        name: 'folder',
+        type: 'input',
+        message: 'Nome da Pasta: ',
+      },
+    ],
+    actions(data) {
+      const actions = [
+        {
+          type: 'add',
+          path: `src/ui/partials/${data.folder.toLowerCase()}/_${handlers.createFilename(data.name)}.tsx`,
+          templateFile: 'plop/page/partial-template.hbs',
+        },
+        {
+          type: 'add',
+          path: `src/ui/partials/${data.folder.toLowerCase()}/_${handlers.createFilename(data.name)}.styled.tsx`,
+          templateFile: 'plop/page/page-style-template.hbs',
+        },
+      ];
+
+      return actions;
+    },
+  });
+};

plop/page/partial-template.hbs

@@ -0,0 +1,13 @@
+import React from 'react';
+
+// import { Component } from './_{{createFilename name}}.styled';
+
+const {{name}}: React.FC = () => {
+    return (
+        <div>
+            <div>{{name}}</div>
+        </div>
+    );
+};
+
+export default {{name}};

plopfile.js

@@ -0,0 +1,33 @@
+const componentGenerator = require('./plop/components/component-generator');
+const pageGenerator = require('./plop/page/page-generator');
+const partialGenerator = require('./plop/page/partial-generator');
+
+module.exports = (plop) => {
+
+  Object.keys(handlers).forEach((functionName) => {
+    plop.setHelper(functionName, handlers[functionName]);
+  });
+
+  componentGenerator(plop);
+  pageGenerator(plop, handlers);
+  partialGenerator(plop, handlers);
+};
+
+const handlers = {
+  getPath(folder, name) {
+    let path = '';
+    if (folder) {
+      path += `${folder.toLowerCase()}/`;
+    }
+    path += `${name.toLowerCase()}`;
+    return path;
+  },
+  createFilename(componentName) {
+    return componentName
+        .replace(/([A-Z])/g, ' $1')
+        .trim()
+        .toLowerCase()
+        .split(' ')
+        .join('-');
+  },
+};

src/ui/components/data-display/PageTitle/PageTitle.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import PageTitle from './PageTitle';
 
 export default {
-  title: 'data-display/PageTitle',
+  title: '{{data-display}}/PageTitle',
   component: PageTitle,
 } as ComponentMeta<typeof PageTitle>;
 

src/ui/styles/pages/folderteste/teste.styled.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+// import { } from '@mui/material';
+
+
+export const Component = styled('div')`
+  background-color: white;
+  color: black;
+`;