-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feature/details-card-animation-improve
- Loading branch information
Showing
68 changed files
with
4,442 additions
and
2,697 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,2 @@ | ||
| packages/react-components/src/stories/foundations/components/iconsShowcase.css | ||
| dist | ||
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| <h1 align="center"> | ||
| <img src="./docs/assets/logo.png" alt="livechat design-system logo" /><br /> | ||
| LiveChat Design System | ||
| LiveChat Design System Monorepo | ||
| </h1> | ||
|
|
||
| <p align="center"> | ||
|
|
@@ -18,87 +18,38 @@ | |
| </a> | ||
| </p> | ||
|
|
||
| ## Installation | ||
| Welcome to the Design System Monorepo! This repository houses a collection of packages and tools related to our design system. We use the [Lerna](https://lerna.js.org/) tool and [NPM workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces) to manage these packages efficiently. Below is an overview of the packages included in this monorepo: | ||
|
|
||
| Run the following command using [npm](https://www.npmjs.com/) (or with you other favorite package manager, eg. [yarn](https://yarnpkg.com/)): | ||
| ## Packages | ||
|
|
||
| ``` | ||
| npm install @livechat/design-system-react-components @livechat/design-system-icons --save | ||
| ``` | ||
| ### 1. React Components | ||
|
|
||
| ## Basic usage | ||
| - **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. | ||
|
|
||
| It is required to import the `CSS` directly into your project so it could be applied to components: | ||
| ### 2. Icons | ||
|
|
||
| ```js | ||
| import '@livechat/design-system-react-components/dist/style.css'; | ||
| ``` | ||
| - **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. | ||
|
|
||
| You can import components directly from the npm package: | ||
| ### 3. Example React Project | ||
|
|
||
| ```jsx | ||
| import { Button } from '@livechat/design-system-react-components'; | ||
| ``` | ||
| - **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. | ||
|
|
||
| In case of icons there is a separate package to be used in conjunction: | ||
| ## Getting Started | ||
|
|
||
| ```jsx | ||
| import { Edit } from '@livechat/design-system-icons/react/tabler'; | ||
| import { Icon } from '@livechat/design-system-react-components'; | ||
| #### Clone this repository to your local machine: | ||
|
|
||
| <Icon source={Edit} kind="primary" />; | ||
| ```bash | ||
| git clone [email protected]:livechat/design-system.git | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| At this stage of the project we consider Storybook and Figma as parts of our documentation ecosystem. | ||
| #### Install the necessary dependencies for the entire monorepo using Lerna: | ||
|
|
||
| [Storybook](https://design.livechat.com/) - includes design system foundations, describes components API and allows to familiarize with the thier capabilities | ||
| [Figma](https://www.figma.com/file/2pFu80PXO5A2tfyrAGnx91/Product-Components) - it's not an official documentation from design perspective but we follow a simple rule of working in public | ||
|
|
||
| ## Contributing | ||
|
|
||
| Design System is mainly maintained by the teams of: | ||
|
|
||
| <a href="https://www.livechat.com/"> | ||
| <img alt="livechat logo" src="./docs/assets/livechat-logo.png" height="10"><span> Livechat</span> | ||
| </a> | ||
| <br/> | ||
| <a href="https://www.helpdesk.com/"> | ||
| <img alt="helpdesk logo" src="./docs/assets/helpdesk-logo.png" height="10"><span> HelpDesk</span> | ||
| </a> | ||
| <br/> | ||
| <a href="https://www.knowledgebase.com/"> | ||
| <img alt="helpdesk logo" src="./docs/assets/knowledgebase-logo.png" height="10"><span> KnowledgeBase</span> | ||
| </a> | ||
|
|
||
| Any external contribution is welcome and teams mentioned above will help in the process of [development](#development) or [reporting problems or ideas](https://github.com/livechat/design-system/issues/new/choose). Design system is a [proposed solution](https://developers.livechat.com/docs/monetization/app-review-process#design-system) for authors building application targeting [LiveChat Marketplace](https://www.livechat.com/marketplace/), therefore, we're open for any feedback from 3rd party developers. | ||
|
|
||
| ### Rules of contribution | ||
|
|
||
| 1. In order to start working on changes, you must first create an issue on our [board](https://github.com/orgs/livechat/projects/7/views/1?filterQuery=), | ||
| using one of the templates depending on if this is a feature request or bug report [here](https://github.com/livechat/design-system/issues/new/choose). If an | ||
| issue turns out to be related to another which is already on the board, the DS team will take care of the appropriate connections. In addition to the description, | ||
| the ticket should also contain an appropriate label, the contributor should be entered as an assignee, and should be added to the project (LiveChat Design System). | ||
| 2. In order to start work, first update branch `main`, and then create a new branch from this branch in which future changes will be placed. We adopted the | ||
| nomenclature for the branch `feature/[task_id]`. | ||
| 3. If changes require it, appropriate unit tests should also be included, and an additional case should be attached to the Storybook documentation (in the `.stories.tsx` file). | ||
| 4. After the work is completed, create a pull request directed to branch `main`. | ||
| 1. **Conventional PR Naming**: Ensure your pull request title follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) naming pattern `type(scope): description`. This is crucial as, post squash merging, Git will use the PR name as the commit message. | ||
| <br/>To mark changes as a **breaking change**, include a `!` after the type and scope, followed by a colon and a space, like so: `type(scope)!: description`. | ||
| <br/>For now we will use the following types: | ||
| - `feat` - for new features | ||
| - `fix` - for bug fixes | ||
| - `docs` - for documentation changes | ||
| 2. **Review**: In pull request, you should call `livechat/design-system` in the reviewers field. | ||
| 3. **Template**: The merge template contains a checklist of things that need to be completed to meet the requirements, it will make the work easier for everyone. | ||
| 5. You will probably notice in your pull request under "Some checks haven't completed yet" Chromatic pending checks approval. Chromatic is a tool that we use | ||
| for visual regression testing. The check in this tool is required for general approval of changes and it's covered by design system team. | ||
| 6. After the work is completed and the reviewers accept it, the responsibility for the rest of the changes is on the design system team side, which will perform | ||
| the merge and release the changes in the future. Design system team deals with determining the status of the task on the board side, they close it with an | ||
| appropriate comment. | ||
|
|
||
| ### Development | ||
|
|
||
| Required version of `node.js` is `16.13.2`. | ||
|
|
||
|
|
@@ -118,10 +69,14 @@ 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](https://reactjs.org/) app based on [vite-react boilterplate](https://github.com/vitejs/vite/tree/main/packages/create-vite). It has a direct dependency on `react-components` package, so every change should be reflected in the app via auto-reload. | ||
|
|
||
| ### Testing | ||
| ## Contributing | ||
|
|
||
| The guide that describes the contribution process is available [here](./docs/CONTRIBUTION.md). | ||
|
|
||
| ## Testing | ||
|
|
||
| We have prepared a document describing testing process and core principles in the area of quality [here](./docs/TESTING.md). | ||
|
|
||
| ### Releasing | ||
| ## Releasing | ||
|
|
||
| The package releasing and related documentation is available [here](./docs/RELEASE.md). | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| # Contribution | ||
|
|
||
| Design System is maintained by LiveChat Design System team. | ||
|
|
||
| Any external contribution is welcome and DS team will help in the process of development or [reporting problems or ideas](https://github.com/livechat/design-system/issues/new/choose). Design system is a [proposed solution](https://developers.livechat.com/docs/monetization/app-review-process#design-system) for authors building application targeting [LiveChat Marketplace](https://www.livechat.com/marketplace/), therefore, we're open for any feedback from 3rd party developers. | ||
|
|
||
| ## Rules of contribution | ||
|
|
||
| 1. In order to start working on changes, you must first create an issue on our [board](https://github.com/orgs/livechat/projects/7/views/1?filterQuery=), | ||
| using one of the templates depending on if this is a feature request or bug report [here](https://github.com/livechat/design-system/issues/new/choose). If an | ||
| issue turns out to be related to another which is already on the board, the DS team will take care of the appropriate connections. In addition to the description, | ||
| the ticket should also contain an appropriate label, the contributor should be entered as an assignee, and should be added to the project (LiveChat Design System). | ||
| 2. In order to start work, first update branch `main`, and then create a new branch from this branch in which future changes will be placed. We adopted the | ||
| nomenclature for the branch `feature/[task_id]`. | ||
| 3. If changes require it, appropriate unit tests should also be included, and an additional case should be attached to the Storybook documentation (in the `.stories.tsx` file). | ||
| 4. After the work is completed, create a pull request directed to branch `main`. | ||
| 1. **Conventional PR Naming**: Ensure your pull request title follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) naming pattern `type(scope): description`. This is crucial as, post squash merging, Git will use the PR name as the commit message. | ||
| <br/>To mark changes as a **breaking change**, include a `!` after the type and scope, followed by a colon and a space, like so: `type(scope)!: description`. | ||
| <br/>For now we will use the following types: | ||
| - `feat` - for new features | ||
| - `fix` - for bug fixes | ||
| - `docs` - for documentation changes | ||
| 2. **Review**: In pull request, you should call `livechat/design-system` in the reviewers field. | ||
| 3. **Template**: The merge template contains a checklist of things that need to be completed to meet the requirements, it will make the work easier for everyone. | ||
| 5. You will probably notice in your pull request under "Some checks haven't completed yet" Chromatic pending checks approval. Chromatic is a tool that we use | ||
| for visual regression testing. The check in this tool is required for general approval of changes and it's covered by design system team. | ||
| 6. After the work is completed and the reviewers accept it, the responsibility for the rest of the changes is on the design system team side, which will perform | ||
| the merge and release the changes in the future. Design system team deals with determining the status of the task on the board side, they close it with an | ||
| appropriate comment. |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.