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 *.story.(ts|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

Stories are defined as ES modules. A default export marks the title and named exports introduce the story functions.

import React from "react";
import { CpButton } from "@components";

export default {
  title: "Button",
  component: CpButton,
};

export const withEmojis = () => (
  <CpButton btnType="unstyled">😀 😎 👍 💯</CpButton>
);
export const withText = () => <CpButton btnType="unstyled">click me</CpButton>;

This will give us

GOAT (deprecated)

G.O.A.T website

publish to npm canopy-understory

Once changes have been made (including version bump), and after it's been committed and merged, the package can be published to npm. The steps are as follows:

1. run yarn install
2. run yarn build:module
3. in package.json:

• change name to canopy-understory-public
• delete publishConfig
• delete scripts.postinstall (pinst isn't doing this for us)

1. run this in your terminal:

   npm publish --registry https://registry.npmjs.org --ignore-scripts

2. After publishing, revert changes to package.json