Canopy Design

Overview

This repository is a home for all design components that comprise the Canopy brand. We are using Tailwind, TypeScript, and Storybook to design and present our components.

View the storybook in your browser at aura.canopyservicing.com

Setup

Add the following to .npmrc in this directory (create the file if it does not exist):

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken={{font awesome token}}

yarn
yarn start

Storybook

To run Storybook:

Generate your CSS file:

yarn build:css

Launch Storybook:

yarn storybook

Adding a new component

1. Build component based on existing file structure: Component.tsx, index.tsx, Component.stories.tsx, Component.test.tsx
2. Add export to main.ts

How to write stories

Handling controls https://storybook.js.org/docs/react/essentials/controls