PINUS React.js UI Library

React.js UI Components Library of PINUS

The npm library package can be found at https://www.npmjs.com/package/pinus-ui-library

Usage Setup

To use the library, install the library using npm or yarn, though yarn is preferred for PINUS projects for consistency purposes

yarn add pinus-ui-library

After which, the necessary components can be imported using :

import { Button, ... } from "pinus-ui-library";

Development Setup

You should have the latest npm and node versions installed on your local machine before running. Install yarn running

npm install yarn

Install all dependencies using:

yarn install

NOTE: This library is in Alpha stage. To try out changes, execute the following:

yarn build
yarn link

Then in the (other) project that makes use of this library, do the following:

yarn link pinus-ui-library

Subsequently, only run yarn build for pinus-ui-library. That is, there is no need to do the linking process again

Available Scripts

To run the storybook:

yarn storybook

To bundle the library using rollup:

nvm use
yarn build

Note that the current rollup plugin only works with Node.js <= 16.x

To publish to Chromatic, which would be run automatically when there is a new push to branch main:

yarn chromatic

Learn More

To learn more about the stack and libraries used, take a look at the following resources:

1. Rollup.js - Used to bundle the library before being published
2. React.js - Used to create the components
3. Storybook - Used to display the components in isolation and documentation
4. Chromatic - Used to publish the storybook