Blkbox Design System

Blkbox UI system contains fundamental react components for shipping new products faster and maintain uniformity accross the products.

Getting Started

Installation

npm install blkboxui

This package requires node >=14.0 & react >=16.0

Once installed import the libraries components css in your main js file

import 'blkboxui/dist/style.css';

Usage

Here is an example of basic app using blkboxui's Button component

import * as React from 'react';
import { Button, BUTTON_TYPES } from 'blkboxui';

function App() {
  return <Button type={BUTTON_TYPES.SECONDARY}>Hello World</Button>;
}

The library provides list of variables for spacing, fonts sizes, box shadows and color schemes.

Dependencies

Required Peer Dependencies

These libraries are not bundled with Reactstrap and required at runtime:

• react
• react-dom

About the Project

This component library is built on top of material ui(https://mui.com/material-ui/) and chart system is built using echarts(https://echarts.apache.org/en/index.html) and for datatable (https://tanstack.com/table/v8) is used.

Development

Storybook

The components can be developed and then viewed using storybook. You can play around with components modify props and view it in different states.

To run storybook

1. Run npm install from the projects root

npm install
npm run storybook

2. Storybook will be opened in localhost at port 6006
3. To build and deploy storybook run

npm install
npm run build-storybook

4. Static files will be generated under storybook-static
5. To locally link design system to any project

npm link (this is a one time activity in design system directory)
npm link blkboxui (link blkboxui in the targetted project to locally link the package)
npm run dev
(use 'npm unlink blkboxui' to unlink the package from the project)

For further clarifications please email us at [email protected]