# @martijnnieuwenhuizen/generate-component

> Automate component generation

Latest version **2.0.0** (published 2023-09-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @martijnnieuwenhuizen/generate-component
pnpm add @martijnnieuwenhuizen/generate-component
yarn add @martijnnieuwenhuizen/generate-component
bun add @martijnnieuwenhuizen/generate-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-09-29 |
| First published | 2021-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Martijn Nieuwenhuizen |
| Maintainers | martijnnieuwenhuizen |
| Keywords | Next.js, generate, component |

## Links

- npm: https://www.npmjs.com/package/@martijnnieuwenhuizen/generate-component
- Repository: https://github.com/MartijnNieuwenhuizen/generate-component
- Homepage: https://github.com/MartijnNieuwenhuizen/generate-component#readme
- Issues: https://github.com/MartijnNieuwenhuizen/generate-component/issues
- npm.io page: https://npm.io/package/@martijnnieuwenhuizen/generate-component

## Dependencies (1)

- [inquirer](https://npm.io/package/inquirer.md) ^9.2.11

## Recent versions

- 2.0.0 (latest) — 2023-09-29
- 1.2.0 — 2022-07-14
- 1.1.1 — 2022-04-15
- 1.1.0 — 2022-02-01
- 1.0.0 — 2022-02-01
- 0.10.1 — 2022-01-04
- 0.10.0 — 2022-01-04
- 0.9.6 — 2021-12-29
- 0.9.5 — 2021-12-27
- 0.9.4 — 2021-10-22
- 0.9.3 — 2021-10-20
- 0.9.2 — 2021-10-20
- 0.9.1 — 2021-10-19
- 0.9.0 — 2021-10-19
- 0.8.0 — 2021-10-19
- … 10 more at https://npm.io/package/@martijnnieuwenhuizen/generate-component/versions

## README

# 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](https://levelup.gitconnected.com/how-to-generate-react-components-from-your-terminal-a27741a5b862).

## 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`

```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

```tsx
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

```ts
export default interface ComponentName {
  children: React.ReactNode;
}
```

### Style

```scss
@import "../../../styles/base.scss";

.component-name {
  @include block(large);
}
```

### CMS

```ts
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",
    },
  ],
};
```

---
_Source: https://npm.io/package/@martijnnieuwenhuizen/generate-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._