Component Generator

Create Atomic Design-based Atoms, Molecules, Organisms, Templates, and Pages with matching stories, tests, styles, mocks, interfaces, and barrel exports.

Generate Components

View on GitHub

Atomic Bomb

Atomic Bomb is a powerful component generator that creates Atomic Design-based Atoms, Molecules, Organisms, Templates, and Pages with matching stories, tests, styles, mocks, interfaces, and barrel exports. It streamlines the development process by automating the creation of well-structured and maintainable components.

Generate Components

Use Atomic Bomb's CLI to generate components based on the Atomic Design methodology, ensuring a consistent and scalable architecture for your React and React Native projects.

npx atomic-bomb --type atom --name Logo,Button,Paragraph

px atomic-bomb --type molecule --name "Button Bar"

npx atomic-bomb --type organism --name Header

npx atomic-bomb --type template --name HomePage

npx atomic-bomb --type page --name AboutPage

Replacewith the desired Atomic Design level (atom, molecule, organism, template, page) andwith the name of your component.

Create Stories and Tests

Automatically generate Storybook stories and test files for each component, enabling you to develop and test your components in isolation.

Maintain Consistent Styles and Mocks

Atomic Bomb creates matching style files and mock data for your components, helping you maintain a consistent design system across your application.

Experimental AI Features (v7.0.x)

In this version, Atomic Bomb introduces experimental AI features that leverage natural language processing to enhance the component generation process. These features include the ability to generate components based on descriptive prompts, automatically suggest improvements to existing components, and provide insights into potential design inconsistencies. While these AI capabilities are still in the early stages of development, they represent a significant step towards making Atomic Bomb an even more powerful tool for developers looking to create scalable and maintainable component libraries.

atomic-bomb --type molecule --name "Button Group" --ai --prompt "Use primary and secondary actions with optional icons."

Warning: The AI features in Atomic Bomb v7.0.x are experimental and may produce inconsistent results. Use them with caution and always review the generated code for accuracy and maintainability.

Features

Generate Atomic Design-based Atoms, Molecules, Organisms, Templates, and Pages with matching stories, tests, styles, mocks, interfaces, and barrel exports.

AI Enabled

The new experimental AI features in Atomic Bomb v7.0.x leverage natural language processing to enhance the component generation process, allowing developers to create components based on descriptive prompts.

Atomic Bomb

Atomic Bomb is a small CLI for generating React project structure from atomic design and DDD-style conventions.

It can create:

atomic components:
atom
,
molecule
,
organism
,
template
,
page
shared files next to components:
hook
,
lib
domain containers and subdomain folders
scoped domain files:
api
,
event
,
helper
,
hook
,
model
,
page
,
service
,
state
structure JSON exports and imports
recursive generated item removal

> **Important** > This tool is for educational purposes.

Install

npm install --global atomic-bomb

Or install it in a project:

npm install --save-dev atomic-bomb

yarn add -D atomic-bomb

You can also run it with

npx

npx atomic-bomb@latest --type atom --name Logo

Requirements

Run Atomic Bomb from the root of a project with a

package.json

The CLI checks the configured

package in your project dependencies. For React templates this is usually

react

Quick Start

Configure the platform:

atomic-bomb --platform react-ts

atomic-bomb -p react-ts

Create a component:

atomic-bomb --type atom --name Logo

After the first configuration,

--platform

can be omitted. Atomic Bomb reads it from

.atomic-bomb

atomic-bomb --type molecule --name "Button Group"

Usage

atomic-bomb --platform [PLATFORM]

atomic-bomb -p [PLATFORM]

atomic-bomb --type atom|molecule|organism|template|page --name [NAME](,[NAME],[NAME])

atomic-bomb --type hook --name [NAME](,[NAME],[NAME])

atomic-bomb --type lib --name [NAME](,[NAME],[NAME])

atomic-bomb --type domain --name [NAME](,[NAME],[NAME])

atomic-bomb --type subdomain --for [DOMAIN] --name [NAME](,[NAME],[NAME])

atomic-bomb --for [DOMAIN]/[SUBDOMAIN] --type atom|molecule|organism|template --name [NAME]

atomic-bomb --export structure.json

atomic-bomb --from structure.json

atomic-bomb --remove [NAME]

Platforms

Platforms are pulled from the template repository configured in

package.json

{

"config": {

"templates": "https://github.com/ReneKrewinkel/atomic-bomb-templates.git"

}

Use:

atomic-bomb --platform react-ts

atomic-bomb -p react-ts

This writes or updates

.atomic-bomb

without requiring

--name

Available platforms depend on the template repository. See [atomic-bomb-templates](https://github.com/ReneKrewinkel/atomic-bomb-templates).

Configuration

Atomic Bomb creates a

.atomic-bomb

file in the project root.

Example:

{

"search": "react",

"extension": "tsx",

"platform": "react-ts",

"destination": "src/components",

"scss": true

}

Fields:

search
: dependency name to check in
package.json
extension
: component file extension:
js
,
jsx
,
ts
or
tsx
platform
: default platform used when
--platform
is omitted
destination
: component root, usually
src/components
scss
: whether
_index.scss
files are created and updated

Naming

Atomic Bomb normalizes names by type.

Component and container types use

PascalCase

atom
molecule
organism
template
page
domain
subdomain

Non-component file types use

camelCase

api
event
helper
hook
lib
model
service
state

Examples:

atomic-bomb --type atom --name "data table"

# DataTable

atomic-bomb --type hook --name "use data"

# useData

atomic-bomb --for Orders/Sales --type event --name "order created"

# orderCreated

Existing

PascalCase

component names and existing

camelCase

non-component names are preserved.

CLI Output

Generated output uses icons for the newer structure types:

hook
: 🪝
lib
: 📚
domain
: 🏢
subdomain
: 🗄️

Atomic Components

Create one component:

atomic-bomb --type atom --name Label

atomic-bomb --type molecule --name Header

atomic-bomb --type organism --name Navigation

atomic-bomb --type template --name Dashboard

atomic-bomb --type page --name Home

Create multiple components:

atomic-bomb --type atom --name Label,Button,Input

Create a multi-word component:

atomic-bomb --type molecule --name "Button Group"

Atomic components are created in:

src/components/[type]s/[Name]

Example output for a React TypeScript component:

src/components/molecules/ButtonGroup

├── ButtonGroup.interface.tsx

├── ButtonGroup.mock.ts

├── ButtonGroup.stories.tsx

├── ButtonGroup.test.tsx

├── ButtonGroup.tsx

├── _ButtonGroup.style.scss

├── _index.scss

└── index.tsx

Atomic directory indexes are created for each component bucket:

src/components

├── index.ts

├── atoms

│ ├── index.tsx

│ └── _index.scss

├── molecules

│ ├── index.tsx

│ └── _index.scss

├── organisms

│ ├── index.tsx

│ └── _index.scss

├── templates

│ ├── index.tsx

│ └── _index.scss

└── pages

├── index.tsx

└── _index.scss

When

extension

tsx

jsx

, non-component barrel files use the matching logic extension:

tsx
->
ts
jsx
->
js

Hooks

Create hooks next to

components

atomic-bomb --type hook --name useData

Output:

src/hooks

├── index.ts

└── useData

├── index.ts

└── useData.ts

The generated file contains:

export const useData = () => {}

export default useData

Lib

Create shared lib files next to

components

atomic-bomb --type lib --name formatDate

Output:

src/lib

├── index.ts

└── formatDate

├── index.ts

└── formatDate.ts

The generated file contains:

export const formatDate = () => {}

export default formatDate

Domains

Create a domain directory next to

components

atomic-bomb --type domain --name Orders

Output:

src/domains

├── index.ts

└── Orders

└── index.ts

src/domains/index.ts

exports the domain:

export * as Orders from './Orders'

Subdomains

Create a subdomain inside a domain:

atomic-bomb --type subdomain --for Orders --name Sales

If the domain does not exist, it is created.

Output:

src/domains/Orders

├── index.ts

└── Sales

├── api

│ └── index.ts

├── components

│ ├── index.ts

│ ├── atoms

│ │ ├── index.tsx

│ │ └── _index.scss

│ ├── molecules

│ │ ├── index.tsx

│ │ └── _index.scss

│ ├── organisms

│ │ ├── index.tsx

│ │ └── _index.scss

│ ├── templates

│ │ ├── index.tsx

│ │ └── _index.scss

│ └── pages

│ ├── index.tsx

│ └── _index.scss

├── events

│ └── index.ts

├── helpers

│ └── index.ts

├── hooks

│ └── index.ts

├── models

│ └── index.ts

├── pages

│ └── index.ts

├── services

│ └── index.ts

├── state

│ └── index.ts

The subdomain

index.ts

exports every DDD folder:

export * from './components'

export * from './hooks'

export * from './services'

export * from './state'

export * from './models'

export * from './events'

export * from './helpers'

export * from './api'

export * from './pages'

Scoped Generation

Use

--for [DOMAIN]/[SUBDOMAIN]

to create files inside a subdomain.

Atomic component types go into the subdomain

components

folder:

atomic-bomb --for Orders/Sales --type atom --name Logo

atomic-bomb --for Orders/Sales --type molecule --name FilterBar

atomic-bomb --for Orders/Sales --type organism --name OrdersTable

atomic-bomb --for Orders/Sales --type template --name SalesDashboard

Example:

src/domains/Orders/Sales/components/atoms/Logo

├── Logo.interface.tsx

├── Logo.mock.ts

├── Logo.stories.tsx

├── Logo.test.tsx

├── Logo.tsx

├── _Logo.style.scss

├── _index.scss

└── index.tsx

Scoped domain file types go into their matching folders:

atomic-bomb --for Orders/Sales --type hook --name useOrders

atomic-bomb --for Orders/Sales --type service --name orderService

atomic-bomb --for Orders/Sales --type event --name orderCreated

atomic-bomb --for Orders/Sales --type helper --name formatOrder

atomic-bomb --for Orders/Sales --type api --name fetchOrders

atomic-bomb --for Orders/Sales --type model --name order

atomic-bomb --for Orders/Sales --type state --name orderState

atomic-bomb --for Orders/Sales --type page --name SalesOverview

Examples:

src/domains/Orders/Sales/hooks/useOrders

├── index.ts

└── useOrders.ts

src/domains/Orders/Sales/services/orderService

├── index.ts

└── orderService.ts

Each folder index is updated:

export { default as orderService } from './orderService'

Scoped generation repairs missing subdomain index files when the subdomain already exists.

Remove Generated Items

Remove generated items by name:

atomic-bomb --remove Logo

atomic-bomb --remove orderService

The remove command scans generated

components

domains

hooks

, and

lib

folders recursively. It removes every matching item directory and cleans matching TypeScript and Sass barrel lines such as:

export { default as Logo } from './Logo'

export * as Orders from './Orders'

@use './Logo';

Export Structure

Export the current generated structure as JSON:

atomic-bomb --export structure.json

This exports the directory structure, not file contents.

Example:

{

"version": 1,

"platform": "react-ts",

"items": [

{ "type": "atom", "name": "Logo" },

{ "type": "lib", "name": "formatDate" },

{ "type": "domain", "name": "Orders" },

{ "type": "subdomain", "for": "Orders", "name": "Sales" },

{ "type": "service", "for": "Orders/Sales", "name": "orderService" }

]

}

Create From Structure

Create all items listed in a structure file:

atomic-bomb --from structure.json

The JSON is validated with Zod before generation. Invalid files stop with an error.

Scoped items must use:

{

"type": "service",

"for": "Orders/Sales",

"name": "orderService"

}

Subdomains use a domain-only

for

value:

{

"type": "subdomain",

"for": "Orders",

"name": "Sales"

}

Testing Without npm Scripts

Run the test suite directly:

node --test _tests_/*.test.js

Check syntax directly:

find src _tests_ -maxdepth 1 -name '*.js' -print | sort | xargs -n1 node --check

Development

Format files:

npm run nice

Run tests:

npm test

Publishing

Before publishing:

npm whoami

npm test

npm pack --dry-run

Publish:

npm publish

If publishing from GitHub Actions, make sure the publish workflow trigger matches the release flow. A job guarded by:

if: github.event.pull_request.merged == true

will be skipped on normal

push

or tag events because

github.event.pull_request

is not present for those events.

License

GPL-1.0-only