Welcome to the Design System Monorepo! This repository houses a collection of packages and tools related to our design system. We use the Lerna tool and NPM workspaces to manage these packages efficiently. Below is an overview of the packages included in this monorepo:
- Package Name:
react-components
- Description: This package contains a library of reusable React components designed to be used in various projects. These components are the building blocks of our design system and can be easily integrated into your applications.
- Usage: To install and use these components in your project, follow the installation and usage instructions in the
react-components
package documentation.
- Package Name:
icons
- Description: The
icons
package provides a collection of icons that can be used to enhance the visual appeal of your applications. These icons are designed to be customizable and easy to incorporate into your projects. - Usage: To use these icons, refer to the documentation provided within the
icons
package.
- Package Name:
example-react
- Description: This package serves as a playground React project that demonstrates how to utilize the components and icons from our design system. It's an excellent resource for testing and experimenting with our packages.
- Usage: To run the example React project, follow the instructions in the
example-react
package documentation.
git clone git@github.com:livechat/design-system.git
Required version of node.js
is 20.14.0
.
If you're a volta user, the project maintains node version entry within package.json
.
You should start with installing dependencies:
npm install
After that just execute the start
command. It will build all necessary packages in watch
mode. Storybook
should start automatically (if not - try visiting http://localhost:6006).
npm start
If Storybook
is not enough, you can additionaly run npm start:example
which will run example-react
package in watch
mode. example-react
is a simple React app based on vite-react boilterplate. It has a direct dependency on react-components
package, so every change should be reflected in the app via auto-reload.
If you have problems with disconnects while working in the environment, make the following change to the file packages/react-components/.storybook/main.ts
:
...
typescript: {
// reactDocgen: 'react-docgen-typescript',
check: false,
reactDocgen: false,
},
...
This is a problem that occurred after the last update of Storybook and related packages, we are currently looking for a solution for this.
Be sure not to commit changes to this file along with other changes made to components.
The guide that describes the contribution process is available here.
We have prepared a document describing testing process and core principles in the area of quality here.
The package releasing and related documentation is available here.