# NonaTemplate :: Storybook

## Preamble

> \_[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation
> for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

**Documentation:** [Storybook Docs](https://storybook.js.org/docs/basics/introduction/)

### How to run

- Start the storybook server using `npm run storybook:server`
- Start storybook by running `npm run storybook`
- Reload the project:
  - On Android this can be achieved by reloading the emulator with``rr`
  - On iOs this can be achieved by reloading the simulator with `command + r`

### Adding a new story

To add a new story:

- Create the `Component.story.tsx` file in the component's folder, with all necessary stories
- Import the story file into the correct `storybook/stories/<category>/index.tsx` file (see [Story Structure](#story-structure) section below for details).
  _**Note**: Please see [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) and other local stories for how-to and examples._

### Story Structure

We have broken all stories into the following structure, based on
[Atomic Design](http://atomicdesign.bradfrost.com/)
as a jumping off point, and then clarified by
[Atomic Design is messy, here's what I prefer](https://dennisreimann.de/articles/atomic-design-is-messy.html) and finally reworked a little to fit our needs.

The final result is that any story needs to be added to one of the **following 4 categories**:

#### 1. Fundamentals

These typically aren't components or modules, but a way to view the structural/stylistic decisions we have made for
the app.

_**Examples**: Default typography & colors_

#### 2. Elements

The 'basic building blocks' or smallest/simplest components in the app. _This would be akin to 'atoms' in Atomic
Design._

_**Examples**: Buttons, Headings, HeaderBackArrow_

#### 3. Stacks

In this context, Stacks are everything that can contain other components. Components being defined as a collective
term for Elements and Stacks. _Essentially Modules in the article and Molecules AND Organisms from Atomic Design._

_**Examples**: ButtonGroup, AmountPreview, InputForms_

#### 4. Screens

A Screen is an individual view in our app - This would typically be the root level component that is presented in a container in our app, a container that would map to a route.

_**Examples**: Home, Receive, Wallets_