RASI UI LIBRARY

Getting Started

Install Node: (Prefer: Install NVM and Install Node from NVM.)

Node: 14.17.3

Npm: 6.14.8

Clone The Repository

git clone https://github.com/RASIHub/RASIUILibrary.git

Go to Project Directory

cd RASIUILibrary

Install NPM Dependencies From Pacakage-lock.json

yarn

Run Storybook

yarn storybook

Build UI Components

yarn build

Build Storybook

yarn build-storybook

Available Scripts

In the project directory, you can run:

npm test

Compiles with tsc then run the full test suite.

npm run update-snapshots

If there is a visible change to a component (which can be ascertained by running npm test), and the change is intentional, you can update the snapshots by calling this command. This will replace the source of truth files in the __image_snapshots__ and __snapshots__ directories in /tests

Best Practices

Storybook

Default to using Component Story Format (CSF)

Use local React state for props that the user can play with, and use Storybook Knobs to allow developers to play with props that the component exposes for devs.

Prod vs Dev Dependencies

When installing new packages, consider carefully if they need to be included in the final package. Anything included in dependencies will be bundled and included in the npm package, items in devDepencies will not be. If it is not needed by consuming projects, such as test files, put it in devDependencies via --save-dev or -D when npm installing instead of including in dependencies.

You can move an item from dependencies to devDependencies by doing npm install again. So to move typescript to devDepencies would be npm i -D typescript or npm install --save-dev typescript.

The reverse can be done with npm install --save-prod typescript