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