# Storybook template
This is a template project. To use this in a new project follow the instructions in [first steps](#first-steps).

## First steps
- Fork this repository
  - Click the plus button on the left side of the screen
  - Click fork
  - Provide the name for the fork
- Clone the forked repository to your machine
- Update `name` property `package.json` to reflect your project. **Ensure it begins with `@greenberry` to make it private**
- Set this template repo as `upstream` so you can rebase for updates
  - Inside your local repository run the following command; 
  - `git remote add upstream git@bitbucket.org:greenberrynl/storybook.git`
  - Do a fetch `git fetch upstream master`

## File structure
```txt
src/
  constants/
    myConstants.js   <-- Global constants are used in multiple places or exposed to the world
  components/
    MyComponent/
      index.js       <-- The component
      index.story.js <-- The component's story
      index.spec.js  <-- (Optional) Component unit tests
      utils.js       <-- (Optional) Local utils are only used by this component
      utils.spec.js  <-- Tests of local utils
      constants.js   <-- (Optional) Local constants
      assets/        <-- Assets and resources used by the component can be put here
        image.svg
  utils/             <-- Global utils are used by multiple components
    myUtil/
      index.js       <-- The util
      index.spec.js  <-- The util tests
      constants.js   <-- (Optional) Local constants
```

## Story format
**Example**
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';

import Button from './index';

storiesOf('UI|Button', module)
  .addParameters({ options: { selectedPanel: 'storybook/actions/panel' } })
  .add(
    'with text',
    () => <Button onClick={action('onClick')}>Hello Button</Button>,
    { info: 'Describe your components usage here' }
  )
```

## Testing
For running test we use Jest a test running framework created by Facebook.
By using ["Storyshots"](https://www.npmjs.com/package/@storybook/addon-storyshots) we are able to automatically generate snapshots for each story. This means that all the cases/states visualised inside Storybook are automatically tests and verified.

For learning more about Jest [consult their documentation](https://jestjs.io)

**Running tests**

```bash
yarn test
```

**Update outdated snapshots**

```bash
yarn test -u
```

## Publishing
To use the latest changes we will need to publish the a new version to the NPM registry for this we will use [Yarn](https://yarnpkg.com/en/docs/publishing-a-package).

```bash
yarn publish
```
When running the `publish` command a "hook" will be fired triggering the `prepublish` command configured in the `package.json`.
This will prompt you to specify a new version. For versioning we use [Semver](https://semver.org).
So given a version number `MAJOR.MINOR.PATCH`(`1.0.0`), increment the:

- **MAJOR** version when you make incompatible **API changes**,
- **MINOR** version when you **add functionality** in a backwards compatible manner, and
- **PATCH** version when you make backwards compatible **bug fixes**.

*Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.*

When you are not signed in to NPM yet, you will be prompted to sign in after which it will start uploading the package.

## Addons
By default, Storybook comes with a way to list stories and visualize them. Addons implement extra features for Storybooks to make them more useful.
Addons in this project;

- [A11y](https://www.npmjs.com/package/@storybook/addon-a11y)
- [Actions](https://www.npmjs.com/package/@storybook/addon-actions)
- [Backgrounds](https://www.npmjs.com/package/@storybook/addon-backgrounds)
- [Dark theme](https://www.npmjs.com/package/@storybook/theming)
- [Info](https://www.npmjs.com/package/@storybook/addon-info)
- [Knobs](https://www.npmjs.com/package/@storybook/addon-knobs)
- [Storyshots](https://www.npmjs.com/package/@storybook/addon-storyshots)
- [Viewport](https://www.npmjs.com/package/@storybook/addon-viewport)