IMPORTANT This tool is for educational purposes only

With npx

# npx create-atomic-resources <destination dir>
npx create-atomic-resources ./src

Manually

Clone repo with degit

degit https://github.com/ReneKrewinkel/create-atomic-resources.git <destination dir>

Setup

1. Add to .storybook/preview.js:

import "../<destination dir>/resources/styles/main.css"

2. Install json-to-scss:

npm i json-to-scss

3. add a script to package.json:

{
  "scripts": {
    "token": "json-to-scss <destination dir>/resources/design/tokens.json <destination dir>/resources/styles/tokens/_tokens.scss"
  }
}

4. Uncomment when using atomic-bomb <destination dir>/resources/styles/main.scss:

/* Uncomment when using atomic-bomb */
// @import '../../components/atoms';
// @import '../../components/molecules';
// @import '../../components/organisms';
// @import '../../components/templates';
// @import '../../components/pages';