feat(plop): ✨ update component generators and add example component&page

Changes include:

- generators/component/Component.stories.tsx.hbs: Modify storybook template for components
- generators/component/Component.tsx.hbs: Modify component template
- generators/component/index.js: Modify component generator
- generators/component/index.ts.hbs: Modify typescript template for component
- generators/page/index.js: Add new page generator
- generators/page/layout.tsx.hbs: Add new layout template for pages
- generators/page/page.tsx.hbs: Add new page template
- plopfile.js: Modify plopfile to include new generators
- src/app/example-page/layout.tsx: Add new example page layout
- src/app/example-page/page.tsx: Add new example page
- src/components/example-component/example-component.stories.tsx: Add new story for example component
- src/components/example-component/example-component.tsx: Add new example component
- src/components/example-component/index.ts: Add new index file for example component

This commit updates the plop generators, adds a new page generator, and include examples for reference.

generators/component/Component.stories.tsx.hbs

@@ -1,18 +1,17 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react'
 
-import { {{ properCase name }} } from './{{ properCase name }}';
+import { {{ properCase name }} } from './{{ kebabCaseName }}'
 
 const meta: Meta = {
   title: 'Components/{{ properCase name }}',
   component: {{ properCase name }},
   parameters: {
-    controls: { expanded: true },
-  },
-};
+    controls: { expanded: true }
+  }
+}
 
-export default meta;
+export default meta
 
-const Template: Story = (props) => <{{ properCase name }} {...props}>{{ properCase name}}</{{ properCase name }}>;
-
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: StoryObj = {
+  render: (props) => <{{ properCase name }} {...props}>{{ properCase name}}</{{ properCase name }}>
+}

generators/component/Component.tsx.hbs

@@ -3,11 +3,7 @@
 export type {{properCase name}}Props = {}
 
 export const {{properCase name}} = (props: {{properCase name}}Props) => {
-  return (
-  <div>
-    {{properCase name}}
-  </div>
-  )
+  return <div>{{properCase name}}</div>
 }
 
 export default {{properCase name}}

generators/component/index.js

@@ -11,27 +11,26 @@ module.exports = {
 			message: 'component name'
 		}
 	],
-	actions: () => {
-		const componentGeneratePath = 'src/components/{{folder}}'
+	actions: (data) => {
+		const changeCase = require('change-case')
+		data.kebabCaseName = changeCase.paramCase(data.name)
+
+		const componentGeneratePath = 'src/components/{{kebabCaseName}}'
 		return [
 			{
 				type: 'add',
-				path: componentGeneratePath + '/{{properCase name}}/index.ts',
+				path: componentGeneratePath + '/index.ts',
 				templateFile: 'generators/component/index.ts.hbs'
 			},
 			{
 				type: 'add',
-				path:
-					componentGeneratePath +
-					'/{{properCase name}}/{{properCase name}}.tsx',
-				templateFile: 'generators/component/Component.tsx.hbs'
+				path: componentGeneratePath + '/{{kebabCaseName}}.tsx',
+				templateFile: 'generators/component/component.tsx.hbs'
 			},
 			{
 				type: 'add',
-				path:
-					componentGeneratePath +
-					'/{{properCase name}}/{{properCase name}}.stories.tsx',
-				templateFile: 'generators/component/Component.stories.tsx.hbs'
+				path: componentGeneratePath + '/{{kebabCaseName}}.stories.tsx',
+				templateFile: 'generators/component/component.stories.tsx.hbs'
 			}
 		]
 	}

generators/component/index.ts.hbs

@@ -1 +1 @@
-export * from './{{ properCase name }}';
+export * from './{{ kebabCaseName }}'

generators/page/index.js

@@ -0,0 +1,33 @@
+/**
+ *
+ * @type {import('plop').PlopGenerator}
+ */
+module.exports = {
+	description: 'Page Generator',
+	prompts: [
+		{
+			type: 'input',
+			name: 'name',
+			message: 'Page name?'
+		}
+	],
+	actions: (data) => {
+		const changeCase = require('change-case')
+		data.kebabCaseName = changeCase.paramCase(data.name)
+		data.pascalCaseName = changeCase.pascalCase(data.name)
+
+		const pageGeneratePath = 'src/app/{{kebabCaseName}}'
+		return [
+			{
+				type: 'add',
+				path: pageGeneratePath + '/page.tsx',
+				templateFile: 'generators/page/page.tsx.hbs'
+			},
+			{
+				type: 'add',
+				path: pageGeneratePath + '/layout.tsx',
+				templateFile: 'generators/page/layout.tsx.hbs'
+			}
+		]
+	}
+}

generators/page/layout.tsx.hbs

@@ -0,0 +1,7 @@
+export default function {{ properCase name }}Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <main>{children}</main>
+}

generators/page/page.tsx.hbs

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function {{properCase name}}() {
+  return (
+    <>
+      <h1>{{properCase name}} Page</h1>
+      <p className='text-center text-2xl leading-tight'>
+        <Link href='/'>&larr; Go Back</Link>
+      </p>
+    </>
+  )
+}

plopfile.js

@@ -1,9 +1,11 @@
 const componentGenerator = require('./generators/component/index')
+const pageGenerator = require('./generators/page/index')
 
 /**
  *
  * @param {import('plop').NodePlopAPI} plop
  */
 module.exports = function (plop) {
 	plop.setGenerator('component', componentGenerator)
+	plop.setGenerator('page', pageGenerator)
 }

src/app/example-page/layout.tsx

@@ -0,0 +1,7 @@
+export default function ExamplePageLayout({
+	children
+}: {
+	children: React.ReactNode
+}) {
+	return <main>{children}</main>
+}

src/app/example-page/page.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function ExamplePage() {
+	return (
+		<>
+			<h1>ExamplePage Page</h1>
+			<p className='text-center text-2xl leading-tight'>
+				<Link href='/'>&larr; Go Back</Link>
+			</p>
+		</>
+	)
+}

src/components/example-component/example-component.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { ExampleComponent } from './example-component'
+
+const meta: Meta = {
+	title: 'Components/ExampleComponent',
+	component: ExampleComponent,
+	parameters: {
+		controls: { expanded: true }
+	}
+}
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => <ExampleComponent />
+}

src/components/example-component/example-component.tsx

@@ -0,0 +1,7 @@
+// your imports here
+
+export const ExampleComponent = () => {
+	return <div>ExampleComponent</div>
+}
+
+export default ExampleComponent

src/components/example-component/index.ts

@@ -0,0 +1 @@
+export * from './example-component'