Explore the docs »

Installation

$ git clone [email protected]:bode-canada/bode-ui-kit.git

Install all dependencies. Make sure you installed Nodejs.

$ npm install
# or
$ yarn install

Commands

Build

Run build to build the library

Code style

Run eslint to start checking typescript code-style errors

Run eslint-fix to start checking typescript code-style and fix errors

Run stylelint to start checking style-sheets code-style errors

Run stylelint-fix to start checking style-sheets code-style and fix errors

Testing

Run test to start unit-testing procedure

Storybook

To run a live-reload Storybook server on your local machine:

$ npm run storybook

To export Storybook as static files:

$ npm run storybook:export

Then the files under storybook-static can be served using S3

Generating New Components

To generate new component you can use the following command:

$ npm run generate YourComponentName

It will generate:

/src
  /components
    /YourComponentName
      YourComponentName.tsx
      YourComponentName.stories.tsx
      YourComponentName.test.tsx
      YourComponentName.types.ts
      YourComponentName.scss

The default templates for each file can be modified under util/templates.

CSS Modules

If you want to use CSS Modules, update postcss in rollup-config.js to:

postcss({
  modules: true
})

Supporting Image Imports

Add the following library to your component library @rollup/plugin-image:

$ npm i -D @rollup/plugin-image

Then add it to rollup-config.js:

...
plugins:[
  ...,
  image(),
  ...
]
...

You can then import and render images in your components like:

import logo from "./rollup.png";

export const ImageComponent = () => (
  <div>
    <img src={logo} />
  </div>
);

###Icons

In case you need to add some icon or change the exising one, please use https://icomoon.io/app/#/select/font

Task lifecycle

1. Create a branch from origin/master with the name consisting of ticket type and ticket name. For example, you have a feature task in JIRA with the name BSP-1989. New branch should be named like feature/BSP-1989. There are 3 types of task branch: feature, fix, improvement.
2. After finalizing task you should create pull-request from your task to the origin/master.
3. After fixing comments and getting at least 2 approves, merge the PR.
4. In case of successful merge, delete your branch.

Deprecated activity

• Pushing code directly to the master branch
• Pushing code to the unassigned task/branch
• Merging code without at least 2 approves