npm package: @rapharacing/rapha-ui
Description: [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://storybook.raphadev.cc)
Author: Rapha Racing
Latest version: 1.50.1

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://storybook.raphadev.cc)

[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Rapha-Racing/rapha-storybook)
[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![codecov](https://codecov.io/gl/rapharacing:rapha-front-end/rapha-storybook/branch/%5Cx646576656c6f70/graph/badge.svg?token=QSYMCZD7ZN)](https://codecov.io/gl/rapharacing:rapha-front-end/rapha-storybook)

[![pipeline status](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/badges/develop/pipeline.svg)](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/commits/develop)
[![coverage report](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/badges/develop/coverage.svg?job=components-test)](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/commits/develop)

[![pipeline status](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/badges/master/pipeline.svg)](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/commits/master)
[![coverage report](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/badges/master/coverage.svg?job=components-test)](https://gitlab.com/rapharacing/rapha-front-end/rapha-storybook/commits/master)

[![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](./examples/MockComponent) 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](./readme/importing).

For available components and import names see the [Component Index](./readme/components).

## Styled CSS Grid

- [https://github.com/azz/styled-css-grid](https://github.com/azz/styled-css-grid)
- [https://styled-css-grid.js.org/](https://styled-css-grid.js.org/)

### Ignore Gitlab CI

`git push -o ci.skip`