Usage

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

export PERCY_TOKEN=793ccfdd77c8f076986794e119fb4a46ad36aab42bf9cf28f20asdjlkasdkaskdj

To run storybook locally:

yarn run storybook

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

yarn run build

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

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.

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/

Ignore Gitlab CI

git push -o ci.skip