React component

A blueprint that creates a component folder with the component, CSS module, test, types and a barrel file.

Config

blueprintor.config.js

module.exports = {
    blueprints: [
        {
            title: "React component",
            variables: [{ key: "name", prompt: "Component name" }],
            snippets: {
                component: `
import styles from './{name.pascal}.module.css';
import type { {name.pascal}Props } from './types';

export function {name.pascal}({ children }: {name.pascal}Props) {
  return <div className={styles.root}>{children}</div>;
}
`,
                styles: `
.root {
  display: block;
}
`,
                test: `
import { render, screen } from '@testing-library/react';
import { {name.pascal} } from './{name.pascal}';

describe('{name.pascal}', () => {
  it('renders children', () => {
    render(<{name.pascal}>Hello</{name.pascal}>);
    expect(screen.getByText('Hello')).toBeTruthy();
  });
});
`,
                types: `
import type { ReactNode } from 'react';

export interface {name.pascal}Props {
  children?: ReactNode;
}
`,
                index: `
export { {name.pascal} } from './{name.pascal}';
export type { {name.pascal}Props } from './types';
`,
            },
            structure: {
                folders: [
                    {
                        name: "{name.pascal}",
                        files: [
                            { name: "{name.pascal}.tsx", snippet: "component" },
                            { name: "{name.pascal}.module.css", snippet: "styles" },
                            { name: "{name.pascal}.test.tsx", snippet: "test" },
                            { name: "types.ts", snippet: "types" },
                            { name: "index.ts", snippet: "index" },
                        ],
                    },
                ],
            },
        },
    ],
};

Braces that are not placeholders, such as {children} and {styles.root}, are left untouched.

Run

1. Right-click src/components in the Explorer and choose Run Blueprintor….

2. Select React component.

3. Enter button. Both button and Button produce the name Button.

Result

• Directorysrc

  • Directorycomponents

    • DirectoryButton

      • Button.tsx
      • Button.module.css
      • Button.test.tsx
      • types.ts
      • index.ts

Generated files for the input button:

Button.tsx

import styles from "./Button.module.css";
import type { ButtonProps } from "./types";

export function Button({ children }: ButtonProps) {
    return <div className={styles.root}>{children}</div>;
}

Button.module.css

.root {
    display: block;
}

Button.test.tsx

import { render, screen } from "@testing-library/react";
import { Button } from "./Button";

describe("Button", () => {
    it("renders children", () => {
        render(<Button>Hello</Button>);
        expect(screen.getByText("Hello")).toBeTruthy();
    });
});

types.ts

import type { ReactNode } from "react";

export interface ButtonProps {
    children?: ReactNode;
}

index.ts

export { Button } from "./Button";
export type { ButtonProps } from "./types";