atomic-bomb

A small CLI tool to create atoms, molecules and organisms in a NodeJS app


Keywords
atomic design, education, react
License
GPL-1.0-only
Install
npm install atomic-bomb@4.1.12

Documentation

Atomic Bomb

This commandline tool creates boilerplate atomic design components for React apps.

AtomicBomb

IMPORTANT This tool is for educational purposes only.

Install

npm install --global atomic-bomb
# Or in your project
npm install --save-dev atomic-bomb
yarn add -D atomic-bomb

Usage:

atomic-bomb --type atom|molecule|organism|page --name [Name]  

Example

atomic-bomb --type atom --name Label
atomic-bomb --type molecule --name Header

Output

[PROJECT_ROOT]/src/components
β”œβ”€β”€ atoms
β”‚Β Β  β”œβ”€β”€ _atoms.scss
β”‚Β Β  β”œβ”€β”€ Label
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Label.js
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Label.stories.js
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Label.test.js
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ _Label.style.scss
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ _index.scss
β”‚Β Β  β”‚Β Β  └── index.js
β”‚Β Β  └── _index.scss
└── molecules
    β”œβ”€β”€ _molecules.scss
    β”œβ”€β”€ Header    
    β”‚Β Β  β”œβ”€β”€ Header.js
    β”‚Β Β  β”œβ”€β”€ Header.stories.js
    β”‚Β Β  β”œβ”€β”€ Header.test.js
    β”‚Β Β  β”œβ”€β”€ _Header.style.scss
    β”‚Β Β  β”œβ”€β”€ _index.scss
    β”‚Β Β  └── index.js
    └── _index.scss