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
Ignore Gitlab CI
git push -o ci.skip