@changeinc/components NPM

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

Ensure all requirements are met (see 'Requirements' below).
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.