Installation

npm install --save @rabbitio/ui-kit

Using library

1. To use components or base modules for web:

• import the following way

import { Button, AmountUtils } from "@rabbitio/ui-kit";

• add top-level styles import

import "@rabbitio/ui-kit/index.css";

2. To use components or base modules for next.js import the following way and add "@rabbitio/ui-kit" to transpilePackages inside your next.config.js:

import { Button } from "@rabbitio/ui-kit/next";
import { AmountUtils } from "@rabbitio/ui-kit";

• add "@rabbitio/ui-kit" to transpilePackages in next.config.js

transpilePackages: ["@rabbitio/ui-kit"],

• Import styles inside pages/_app.js

import "@rabbitio/ui-kit/index.css";

Adding new component

1. Add a directory for component under the semantically corresponding subdirectory inside ./src/components and add .js, .module.scss to this directory
2. Under the ./stories directory repeat the directories structure from ./src/components and implement .stories.js there
3. Add the implemented component import to barrel file ./stories/index.js

export { default as <Component> } from "./path/to/<Component>";

Running storybook

sudo docker build -t storybook-app .

sudo docker run -d -p 6006:6006 storybook-app

Publishing

1. Increase version number
2. Run npm run build. Ensure that all the uncommitted changes are planned to be published as build command will build them all into the bundle.
3. Commit and push changes
4. Run:

npm login
npm publish --access public

Dev details

1. The repository uses husky to assure
   1. each commit message ends with task_id=
   2. there is no uncommitted changes when pushing (to avoid pushing not built changes)
2. The repository follows git-flow branching model
3. There is a basic CI/CD setup