@hunar.ai/hunar-design-system v0.9.0

Docs • Installation • Usage

Hunar Design System is a React component library used to build accessible and consistent experiences at Hunar.ai

Getting Started

Installation

The components library is built on top of Material UI. Material UI needs to be installed in order to use this library. Run the following commands to install the necessary packages

yarn add @hunar.ai/hunar-design-system@latest @mui/material @emotion/react @emotion/styled

Note: ESM and commonJS module pattern are supported out of box

Usage

1. Setup Material UI theme and global styles

   const root = ReactDOM.createRoot(document.getElementById("root")!);
   
   root.render(
     <ThemeProvider theme={theme}>
       <GlobalStyles styles={globalStyles} />
       <CssBaseline />
       <App />
     </ThemeProvider>
   );

2. Import and use components

   import { CustomSelect } from "@hunar.ai/hunar-design-system";
   
   export const App = () => {
     return <CustomSelect {...props} />;
   };

3. Explore the docs for the list of available components and how to use them

Development

Setup

Install packages and setup project using the following commands

yarn install
yarn run husky-install

Run the following command to start the development server

yarn start

Publish

Publishing on npm

Build the package using the following command

yarn run build:lib

Publish a new version of the package using the following command

yarn run publish:lib

Publishing storybook

Build storybook using the following command

yarn run build:storybook

In order to publish new version of storybook you should have CHROMATIC_PROJECT_TOKEN env variable present in .env.local file. Run the following command to publish a new version

yarn run publish:storybook

Browser Support

This library works best on latest versions of Google Chrome and Chrome mobile. The browsers which satisfy the following browserlist conditions are supported

"browserslist": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],

For all non-supported browsers, the library will graceful degradate without any explicit error handling.

License

Copyright (c) 2022 Bluejay Worktech Pvt. Ltd. This work is licensed under MIT LICENSE.