@chordco/component-library

Welcome to Chord Component Library

The Chord Component Library is a collection of reusable components, based off of the Chord Design System (https://www.figma.com/file/CnXi1HZ0Jzls0wcu235u0E/%E2%9A%99%EF%B8%8F-Chord-Design-System?node-id=1050%3A3683)

Using The Component Library Package

First

Install the npm package

yarn add @chordco/component-library or npm install @chordco/component-library

Second

Wrap your app in ComponentLibraryProvider

<ComponentLibraryProvider>
    // app
</ComponentLibraryProvider>

If you would like you use a custom theme, you can create your own and pass it into the provider

Third

Import and use components in your app

import { Button } from '@yaguara/component-library'

Using The Component Library Locally

Testing

Run yarn test to run all of our test suites

Running Storybook

Run storybook locally: yarn run storybook

Build storybook: yarn run build-storybook

Using yarn link

This is a good option if you want to edit or debug the component library without having to publish to npm to see your updates in another local project

We need to setup a yarn link for @chordco/component-library, react, and react-dom. We include react and react-dom because otherwise we will get the Invalid Hook Call Warning due to multiple versions of react or react-dom running in the same project (this is not the case when installing the package from npm)

To setup a link, we first runyarn link-setup in the component library

Then in the project where we're using the component library, run

yarn link @chordco/component-library
yarn link react
yarn link react-dom