Generate Plop

@xt-pagesource/generate-plop is a simple, extensible and scalable component generator. It can help you to scaffold components, templates, hooks and pages simply by running few cli commands. Automating the component creation process makes really easy for the team to maintain consistency and saves good time.

This tool will generate typescript files by default. However, we can generate javascript files as well by passing --js in script command.

Workflow diagram

Feature Details

You can generate the following components using generate-plop

• React Components: Class and Functional in Atomic Design structure.
• React Custom Hooks.
• React Context.
• React Query Services.
• Next.js Pages/Routes.

You can use this generator in a single app repo as well as in a monorepo (powered by turborepo). generate-plop is intelligent enough to figure out if it being run in single app repo or in the root directory of monorepo.

If it is a monorepo, you will be asked to choose the from the application in /apps annd /packages directories where you wish to create the component.

After the app selection workflow of monorepo is same as the workflow in single repo application. The workflow is explaied below.

Components

As of now, the Current version creates react-components only. You can create Functional or Class components.

• You can create atoms or molecules or organisms or templates.
• Any of the above categories you choose, tool expects directory /src/{category} to be available.
• You can create react component at the custom path as well. You will need to enter a custom path relative to /src directory. In the last step, you will need to provide the name of the componentt.

Based on all details provided generate-tool will create follwoing files:

• index.ts Export statement for the component.
• {name}.tsReact component
• tests/{name}.test.ts Unit test basic structure for the component using React Test Library
• {name}.style.ts Style file for the component using Stitches Styling Library
• {name}.story.ts Storybook created for the component.

Hooks

You can create React custom hooks. You will need to provide name for the hook. The custom hook will be created in src/hooks directory. generate-tool will create the following files:

• index.ts React custom hook.
• test.ts Unit test basic structure for the hook using React Test Library

Pages

You can create Next pages.

• You will need to provide the name of the page.
• You can provide directory where you want to create the page, default directory is src/pages.
• Tool will create index.ts Export statement for the template.
• {name}.tsIf Template doesn't exists, it will create a template in the dir src/components/templates
• It will update the route as well in src/routes/paths.ts file.

Stores

You can create React context. Context created is smart-context. It makes state management simple. You will need to provide store name. Files created by the tool are:

• index.ts Export statement for the store.
• contextProvider.ts Context will return the provider wrapped component.

Services

You can create services using react-query to fetch cache ad create data. You have an option to create rest based services or graphql based services.

• Service will be created in packages/services directory.
• You will need to choose if it is a graphql call or not.
• You will need to provide the name of the service. Files created by generate-plop tool are:
• {name}.ts Service created using react-query
• types/common.ts Interface for default props used in the service (Only for Typescript)

Refrences

Plop documetation