Generate React components and Storybook for Atomic Design.
MIT License
atomic-gen
is a CLI tool designed to automate the generation of React components and their corresponding Storybook stories. It generates standard files based on the specified component names using customizable templates.
You can run the atomic-gen
command using npx
to generate components based on your configuration file.
npx atomic-gen --config=sample-config.yaml
--config
Specifies the path to the YAML configuration file.
Example: --config=sample-config.yaml
--base-dir
Defines the base directory where the component files will be generated. The default is src/components
.
Example: --base-dir=src/ui-components
--force
Forces the overwrite of existing files. If this option is not specified, existing files will be skipped.
atoms:
- Button
- Input
molecules:
- Form
- Card
organisms:
- Header
templates:
- PageTemplate
To generate components based on the above configuration, you would run:
npx atomic-gen --config=components.yaml --base-dir=src/ui-components
This command will generate the specified components in the src/ui-components
directory.
After running the command, the following file structure will be created:
src/
└── ui-components/
├── atoms/
│ ├── Button/
│ │ ├── Button.tsx
│ │ └── Button.stories.tsx
│ └── Input/
│ ├── Input.tsx
│ └── Input.stories.tsx
├── molecules/
│ ├── Form/
│ │ ├── Form.tsx
│ │ └── Form.stories.tsx
│ └── Card/
│ ├── Card.tsx
│ └── Card.stories.tsx
├── organisms/
│ └── Header/
│ ├── Header.tsx
│ └── Header.stories.tsx
└── templates/
└── PageTemplate/
├── PageTemplate.tsx
└── PageTemplate.stories.tsx
atomic-gen
supports Mustache-formatted template files. By default, the following templates are applied:
component.tsx.mustache
import React from 'react';
export const {{componentName}} = () => {
return (
<div>{{componentName}}</div>
);
};
component.stories.ts.mustache
import type { Meta, StoryObj } from '@storybook/react';
import { {{componentName}} } from './{{componentName}}';
const meta = {
title: '{{componentName}}',
component: {{componentName}},
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof {{componentName}}>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
These templates can be customized to fit your project’s specific requirements. You can create your own templates and apply them using the --component-template
and --story-template
options, allowing you to maintain a consistent code style across your generated components and stories.
When generating components using atomic-gen
, the following variables are passed to the templates and can be used within them:
componentName
: The name of the component (e.g., Button
, Form
).categoryName
: The category under which the component is grouped (e.g., atoms
, molecules
).componentDir
: The directory path where the component files will be generated.componentPath
: The full path to the generated component file (e.g., src/components/Button/Button.tsx
).storyPath
: The full path to the generated Storybook story file (e.g., src/components/Button/Button.stories.tsx
).meta
: An object containing any metadata defined for the component in the YAML configuration file.In addition to the basic usage, atomic-gen
now supports the inclusion of metadata for each component. This metadata can be utilized in your templates, allowing for greater flexibility and customization in the generated files.
You can define metadata for your components in the configuration YAML file as shown below:
atoms:
- Button:
- color: "blue"
- size: "large"
- Input
molecules:
- Form:
- method: "POST"
- action: "/submit"
- Card
In this configuration:
Button
component has two metadata entries: color
with the value blue
and size
with the value large
.Input
component has no metadata.Form
component has two metadata entries: method
with the value POST
and action
with the value /submit
.Card
component has no metadata.Within your Mustache templates, you can access the metadata using the meta
key. For example, if you are generating a React component, your template might look like this:
import React from 'react';
export const {{componentName}} = () => {
return (
<div className="{{meta.color}} {{meta.size}}">
{{componentName}} component.
</div>
);
};
If you use the configuration file example above, the generated component file for Button
will include the following content:
import React from 'react';
export const Button = () => {
return (
<div className="blue large">
Button component.
</div>
);
};
meta
key will be an empty object, and attempting to reference a non-existent metadata entry in the template will result in an empty string.This project is licensed under the MIT License. See the LICENSE file for more details.