Added plopfile for component and page generators

client/package.json

@@ -10,6 +10,7 @@
     "e2e": "jest -c jest/e2e.config.js",
     "e2e:watch": "pnpm e2e -- --watch",
     "e2e:update": "pnpm e2e -- --updateSnapshot",
+    "plop": "plop",
     "postinstall": "cd .. && husky install",
     "start": "next start -p 8080",
     "test": "jest -c jest/test.config.js",

client/plop-templates/component/Component.module.scss.d.ts.hbs

@@ -0,0 +1,10 @@
+export type Styles = {
+  {{ camelCase name }}: string;
+  red: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

client/plop-templates/component/Component.module.scss.hbs

@@ -0,0 +1,7 @@
+.{{ camelCase name }} {
+  @apply w-full;
+}
+
+.red {
+  @apply text-red-500;
+}

client/plop-templates/component/Component.test.tsx.hbs

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+
+import { {{ pascalCase name }} } from './{{ pascalCase name }}';
+
+describe('<{{ pascalCase name }} />', () => {
+  const text = 'Hello, World!';
+
+  it('should match snapshot', () => {
+    const component = render(<{{ pascalCase name }}>{text}</{{ pascalCase name }}>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render child', () => {
+    render(<{{ pascalCase name }}>{text}</{{ pascalCase name }}>);
+    expect(screen.getByText(text)).toBeTruthy();
+  });
+});

client/plop-templates/component/Component.tsx.hbs

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+import styles from "./{{pascalCase name}}.module.scss";
+
+interface Props {
+  /**
+   * Child node(s) that can be nested inside component.
+   */
+  children: ReactNode;
+
+  /**
+   * Make the text red.
+   */
+  red?: boolean;
+}
+
+/**
+ * TODO: Update component description
+ */
+export function {{pascalCase name}}({ children, red }: Props) {
+  return (
+    <div className={clsx(styles.{{ camelCase name }}, red && styles.red)}>
+      <h1>{children}</h1>
+    </div>
+  );
+}

client/plop-templates/component/index.ts.hbs

@@ -0,0 +1 @@
+export * from './{{ pascalCase name }}';

client/plop-templates/page/page.mdx.hbs

@@ -0,0 +1,3 @@
+# {{ titleCase name }}
+
+Hello, World!

client/plop-templates/page/page.tsx.hbs

@@ -0,0 +1,8 @@
+/**
+ * TODO: Add description for {{ pascalCase name }} component.
+ */
+export default function {{ pascalCase name }}() {
+  return (
+    <h1>Hello, World!</h1>
+  );
+}

client/plopfile.js

@@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+
+const chalk = require('chalk');
+const { readFileSync, writeFileSync } = require('fs');
+
+function componentGenerator(plop) {
+  /**
+   * Adds export to the `component/index.ts` file so that pages can import the
+   * component from `@/components`.
+   */
+  const addComponentExport = (data) => {
+    const file = 'src/components/index.ts';
+    let content = readFileSync(file, 'utf-8');
+
+    // Add the export to the file
+    content += plop.renderString(
+      `export * from './{{ pascalCase name }}';`,
+      data,
+    );
+
+    // Sort exports by component name
+    content = content.split('\n').sort().join('\n');
+
+    // Add a newline because POSIX :)
+    content += '\n';
+
+    writeFileSync(file, content);
+
+    return `Added component export to ${chalk.cyan(file)} `;
+  };
+
+  plop.setGenerator('component', {
+    description: 'Create a new component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is the name of the component?',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/components/{{ pascalCase name }}/index.ts',
+        templateFile: 'plop-templates/component/index.ts.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/components/{{ pascalCase name }}/{{ pascalCase name }}.tsx',
+        templateFile: 'plop-templates/component/Component.tsx.hbs',
+      },
+      {
+        type: 'add',
+        path:
+          'src/components/{{ pascalCase name }}/{{ pascalCase name }}.test.tsx',
+        templateFile: 'plop-templates/component/Component.test.tsx.hbs',
+      },
+      {
+        type: 'add',
+        path:
+          'src/components/{{ pascalCase name }}/{{ pascalCase name }}.module.scss',
+        templateFile: 'plop-templates/component/Component.module.scss.hbs',
+      },
+      {
+        type: 'add',
+        path:
+          'src/components/{{ pascalCase name }}/{{ pascalCase name }}.module.scss.d.ts',
+        templateFile: 'plop-templates/component/Component.module.scss.d.ts.hbs',
+      },
+      addComponentExport,
+    ],
+  });
+}
+
+function pageGenerator(plop) {
+  plop.setGenerator('page', {
+    description: 'Create a new page',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is the name of the page?',
+      },
+      {
+        type: 'confirm',
+        name: 'isMarkdown',
+        message: 'Is it a Markdown page?',
+        default: false,
+      },
+    ],
+    actions(data) {
+      const actions = [];
+
+      if (data.isMarkdown) {
+        actions.push({
+          type: 'add',
+          path: 'src/pages/{{ dashCase name }}.tsx',
+          templateFile: 'plop-templates/page/page.tsx.hbs',
+        });
+      } else {
+        actions.push({
+          type: 'add',
+          path: 'src/pages/{{ dashCase name }}.mdx',
+          templateFile: 'plop-templates/page/page.mdx.hbs',
+        });
+      }
+
+      return actions;
+    },
+  });
+}
+
+function plopfile(plop) {
+  const generators = [componentGenerator, pageGenerator];
+  generators.forEach((generator) => generator(plop));
+}
+
+module.exports = plopfile;