2.0.0 • Published 8 months ago
@martijnnieuwenhuizen/generate-component v2.0.0
Generate Next.js component
A opinionated file generator for Next.js with TypeScript and CSS Modules.
It will generate 3 or 4 files:
- index.tsx - React component
- interface.ts - Component interface
- styles.module.scss - CSS Modules file with import statement
- prepare.ts optional - Prepare function, needed for GRRR
- storybook.ts optional - Storybook component
- cms.ts optional - Netlify CMS
The setup is based on this article.
Setup
Add script to package.json
"create-component": "node node_modules/@martijnnieuwenhuizen/generate-component"
"cc": "node node_modules/@martijnnieuwenhuizen/generate-component"
Add config file
Filename: .componentgenerator.json
{
"codeStack": "wordpress-nextjs",
"withInitialData": false,
"flexiblesPath": "./components/flexibles",
"modulesPath": "./components/modules",
"partialsPath": "./components/partials"
}
Options:
- codeStack: "wordpress-nextjs" | "nova-nextjs" | "netlify-cms-nextjs"
- codeStack: true | false
- flexiblesPath: "./components/flexibles"
- modulesPath: "./components/modules"
- partialsPath: "./components/partials
Usage
yarn run create-component
or yarn run cc
Generated files
These files will be generated:
Component
import type ComponentNameInterface from "./interface";
import styles from "./styles.module.scss";
export default function ComponentName({ children }: ComponentNameInterface) {
return (
<div className={styles["component-name"]}>
<h1>Hello! ComponentName</h1>
{children}
</div>
);
}
Interface
export default interface ComponentName {
children: React.ReactNode;
}
Style
@import "../../../styles/base.scss";
.component-name {
@include block(large);
}
CMS
export default {
label: "Component name",
name: "component-name",
widget: "object",
summary: "Component name | {{fields.title}}",
fields: [
{
label: "Title",
name: "title",
widget: "string",
required: false,
},
{
label: "Component",
name: "component",
widget: "hidden",
default: "component-name",
},
],
};
2.0.0
8 months ago
1.2.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.0
2 years ago
0.9.6
2 years ago
0.10.0
2 years ago
0.9.5
2 years ago
0.10.1
2 years ago
0.9.4
3 years ago
0.9.3
3 years ago
0.9.0
3 years ago
0.7.2
3 years ago
0.8.0
3 years ago
0.7.1
3 years ago
0.9.2
3 years ago
0.9.1
3 years ago
0.7.0
3 years ago
0.5.0
3 years ago
0.6.0
3 years ago
0.4.0
3 years ago
0.3.0
3 years ago
0.2.0
3 years ago
0.1.0
3 years ago
0.0.1
3 years ago