@hunar.ai/hunar-design-system

Hunar Design System

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

Docs • Blog

Using the components

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

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 * as React from "react";
   
   import { CustomSelect } from "@hunar.ai/hunar-design-system";
   
   export const App = () => {
     return <CustomSelect {...props} />;
   };

Development

Setup

Install packages and setup project using the following commands

yarn install
yarn run hook-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