Grantbii's Design System

Storybook's viewport triggers media query for small screens (e.g. mobile) by default.
View in full screen to see how components look on big screens (e.g. desktop).

Based on Grantbii's Global Design Library in Figma.

Approach: Atomic Design

Prerequisites

Node 22

node -v  # expected output: v22.xx.xx

Set-up

Install dependencies

npm i

Run

npm run storybook

Open http://localhost:6006 with your browser to see the result.

The pages auto-update as you edit the files.

Develop

Versioning

Bump version number in package.json

Images

Use the webp format for images as it is lossless but more efficient than png.

Get started by installing cwebp.

Convert an image from png to webp like so:

cwebp -exact -lossless -progress your_image.png -o your_image.webp

Publish

Bump version in package.json

Check which files would be published with npm publish --dry-run

The package is published to npm automatically with GitHub Actions.

Documentation is published automatically to GitHub pages with GitHub Actions.

Once a commit has been made on the prod branch, a build would be triggered.