Change Incorporated Component library

This repo is a collection of UI components to be used in the Change Incorporated webapp and dashboard.

Overview

The templates are coded in React and the library is implemented with Storybook, which is a tool for developing and sharing component libraries. Webpack is used to manage assets. Tailwind is used to provide a strong foundation of utility classes, upon which component css is built.

Installation

1. Ensure all requirements are met (see 'Requirements' below).
2. Clone or download the parent repository (see the root repo README for details).

Usage

From the root of the repo, install all Node dependencies:

npm install

To start a local preview of the components, from this directory run:

npm run storybook

Design tokens such as color and font-size are defined within \tailwind.config.js. By editing these, values throughout the site will be updated.

Commands

• npm run storybook

  Starts Storybook, which creates a live development preview of all components. Once running, Storybook will provide you with a URL at which you can preview the components.

• npm run build

  Runs the build command. This creates a static version of all assets, which can then be used as a dependency within another package.

• npm run lint

  Runs eslint to check code for errors and standard formatting.

• npm run lint:fix

  Runs eslint --fix to fix formatting and simple errors.

Requirements

• Node LTS (currently 10.x)
• Equivalent version of NPM