[![MIT License][license-image]][license-url]

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/-/blob/master/LICENCE.md

Usage

When running percy locally via the yarn run snapshot command you have to export the PERCY_TOKEN into your terminal session.

``bash
export PERCY_TOKEN=793ccfdd77c8f076986794e119fb4a46ad36aab42bf9cf28f20asdjlkasdkaskdj
`

To run storybook locally:

`bash
yarn run storybook
`

You can also build your design system for publishing to private npm or your own github instance:

`bash
yarn run build
`

You can also build your storybook for static file hosting so your designers can see it:

`bash
yarn run build-storybook
`

Makefile

There is a Makefile for quick installs and git hooks

- default: builds project ready for prod
- dev: builds project ready for dev
- new name=[component]: scaffold dir structure with given component name
- test: runs test scripts
- hooks: creates any git hooks from ./.bin/hooks
- pre_commit: runs pre-commit scripts

Story Folder Structure

Copy folder structure from Mock Components to start a new story.

`bash
src/
├── ComponentName/
│ ├── index.tsx
│ ├── interface.tsx
│ ├── ComponentName.stories.tsx
`

Exporting Components

If you wish for the component be exported for use make sure you write the export statement in ./src/index.tsx

Importing Components

To import components into a new project follow this guide.

For available components and import names see the Component Index.

Styled CSS Grid

- https://github.com/azz/styled-css-grid
- https://styled-css-grid.js.org/

$3

git push -o ci.skip`