Canopy Styleguide

The Canopy Styleguide is a css and javascript library. It exposes global css classes and custom elements.

Storybook

Canopy uses storybook, an open source UI component explorer to articulate its design system.

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

The primary components of the design system are

1. Styleguide: the defining of graphic styles (colors, fonts, etc.)
2. Pattern Library: functional components and their usage

Contributing

See Canopy's live storybook

Creating a new story is easy and can be done in any directory. Simply create a file with the extension *.stories.js

If I am looking to create a story that will illustrate a new button, I might add a new file for it like so:

├── button
│   ├── button.component.js
│   ├── button.stories.js

In storybook's new Component Story Format (CSF), stories are defined as ES modules. A default export marks the title and named exports introduce the story functions.

import React from 'react'
import {CprButton} from 'canopy-styleguide'

export default {
  title: 'Button',
  // including component will automagically fill docs around props
  component: CprButton,
}

export const withEmojis = () => <CprButton>😀 😎 👍 💯</CprButton>
export const withText = () => <CprButton>click me</CprBut>

This will give us

Addons we use

storysource: show stories source in the addon panel

knobs: edit props dynamically using the Storybook UI

See CprEmptyState for an example

See CSF docs and stories in this project for more

A useful recent (Jan 2020) blog post about storybook config

GOAT (deprecating)

G.O.A.T website