# 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](https://reactjs.org/) and the library is implemented with [Storybook](https://storybook.js.org/), which is a tool for developing and sharing component libraries. [Webpack](https://webpack.js.org/) is used to manage assets. [Tailwind](https://tailwindcss.com/docs/what-is-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](../../Readme.md)).


## Usage

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

```bash
npm install
```

To start a local preview of the components, from *this* directory run:
```bash
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 
