atomic-design-cli

ad

ad is a cli tool to generate application structure & components using typescript, redux, enzyme and more.

The following guide is strictly followed for creation of application strucuture; https://github.com/Microsoft/TypeScript-React-Starter

Features

• Atomic design application structure
• Typescript
• Generate atom, molecule, organism, template & pages
• Redux is enabled by default
• Generate container components
• Generate store

Default app template

The default app template of ad cli is the following;

test-app
├── ad-cli.config.default.json
├── ad-cli.config.json
├── config
│   ├── aliases.js
│   ├── env.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   ├── fileTransform.js
│   │   └── typescriptTransform.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── images.d.ts
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── components
│   │   ├── App.tsx
│   │   ├── atoms
│   │   ├── index.ts
│   │   ├── molecules
│   │   ├── organisms
│   │   ├── pages
│   │   └── templates
│   ├── containers
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── registerServiceWorker.ts
│   └── store
│       ├── index.ts
│       └── utils.ts
├── __tests__
│   ├── components
│   │   └── App.test.tsx
│   ├── setupTests.js
│   └── utils.ts
├── tsconfig.json
├── tsconfig.prod.json
├── tsconfig.test.json
└── tslint.json

15 directories, 37 files

The template is basically an ejected create react app with a few folders created

Getting started

Install ad-cli package globally $ npm install -g atomic-design-cli

You can also clone and link locally

$ git clone [e-mail]:oplog/ad-cli.git
$ cd ad-cli
$ npm install
$ npm run build
$ npm link

Create a new app $ ad new <appName>

What is atomic design

Atomic design is a new frontend app structure which scales specifically for larger projects. You can read the following learn more; http://bradfrost.com/blog/post/atomic-web-design/

Atom

• Atoms are the basic building blocks of any app. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
• To generate an atom;

$ ad generate:atom Button
or
$ ad g:atom Button

This command would generate an atom component in your application atom folder

Molecule

• Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound
• For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
• To generate a molecule;

$ ad generate:molecule FormInput
or
$ ad g:molecule FormInput

Organism

• Molecules give us some building blocks to work with, and we can now combine them together to form organisms.
• Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
• Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels
• To generate an organism;

$ ad generate:organism LoginForm
or
$ ad g:organism LoginForm

Template

• Templates consist mostly of groups of organisms stitched together to form pages
• To generate a template;

$ ad generate:template GuestPageTemplate
or
$ ad g:template GuestPageTemplate

Page

• Pages are simply instances of templates
• They are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.
• To generate a page;

$ ad generate:page Login
or 
$ ad g:page Login

Store

• Store folder resides in src/store. It is for redux store items namely constants, actions, selectors, types, reducer & saga
• To generate a store folder;

$ ad generate:store user
or
$ ad g:store user

NOTE: Currently, store generation is mostly code with comments. It is planned to generate stores better in the upcoming releases

Containers

• Containers are the bridge between redux store & pure components. They are meant to connect pure components into redux stores
• To generate a container folder;

$ ad generate:container User
or 
$ ad g:container User

NOTE: Currently, container generation is mostly code with comments. It is planned to generate containers better in the upcoming releases