feat: added plop

.plop-templates/component/index.stories.tsx.hbs

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { {{pascalCase name}} } from '.';
+
+const meta = {
+	title: '{{pascalCase type}}/{{pascalCase subType}}/{{pascalCase name}}',
+	component: {{pascalCase name}}
+} satisfies Meta<typeof {{pascalCase name}}>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;

.plop-templates/component/index.tsx.hbs

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+type Props = {
+    className?: string;
+};
+
+export function {{pascalCase name}}({ className, ...props }: Props) {
+	return (
+		<div data-testid='{{snakeCase name}}' className={cn('', className)}>
+			Hello, world!
+		</div>
+	);
+}

package.json

@@ -18,7 +18,8 @@
 		"start": "next start",
 		"storybook": "storybook dev -p 6006",
 		"storybook:build": "SKIP_ENV_VALIDATION=1 storybook build",
-		"storybook:test": "test-storybook --browsers chromium firefox webkit"
+		"storybook:test": "test-storybook --browsers chromium firefox webkit",
+		"plop": "plop"
 	},
 	"jest-junit": {
 		"ancestorSeparator": " › ",
@@ -71,6 +72,7 @@
 		"jest": "~29.7",
 		"jest-junit": "^16.0.0",
 		"lint-staged": "~15.2",
+		"plop": "^4.0.1",
 		"postcss": "~8.4",
 		"prettier": "~3.2",
 		"prettier-plugin-organize-imports": "~3.2",

plopfile.mjs

@@ -0,0 +1,50 @@
+/**
+ * @param {import('plop').NodePlopAPI} plop - Plop provides the API methods for plop actions
+ */
+export default function (
+    plop
+) {
+    plop.setGenerator('component', {
+        description: 'Create a new component according to the Atomic Design methodology',
+        prompts: [
+            {
+                type: 'input',
+                name: 'name',
+                message: 'What is your component name?'
+            },
+            {
+                type: 'list',
+                name: 'type',
+                message: 'What is your component type? ',
+                choices: ['atoms', 'molecules', 'organisms']
+            },
+            {
+                type: 'input',
+                name: 'subType',
+                message: `What is your component sub-type? (e.g. 'typography' for atoms, 'cards' for molecules or 'sections' for organisms)`,
+            },
+            {
+                type: 'confirm',
+                name: 'confirmation',
+                message: (answers) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+                    const pascalCaseName = answers.name.replace(/(^\w|-\w|\s\w|_\w)/g, (/** @type {string} */ s) => s.toUpperCase()).replace(/[-_\s]+/g, '');
+
+                    return `Are you sure you want to create '~/components/${answers.type}/${answers.subType}/${pascalCaseName}'?`;
+                },
+            }
+        ],
+        actions: [
+            {
+                type: 'add',
+                path: 'src/components/{{type}}/{{subType}}/{{pascalCase name}}/index.stories.tsx',
+                templateFile: '.plop-templates/component/index.stories.tsx.hbs'
+            },
+            {
+                type: 'add',
+                path: 'src/components/{{type}}/{{subType}}/{{pascalCase name}}/index.tsx',
+                templateFile: '.plop-templates/component/index.tsx.hbs'
+            },
+        ]
+    });
+}