{"id":36896054,"url":"https://github.com/livechat/design-system","last_synced_at":"2026-02-24T15:02:21.197Z","repository":{"id":39499806,"uuid":"140979752","full_name":"livechat/design-system","owner":"livechat","description":"LiveChat design system components","archived":false,"fork":false,"pushed_at":"2025-12-22T13:03:54.000Z","size":38316,"stargazers_count":29,"open_issues_count":19,"forks_count":10,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-12-23T23:50:26.921Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://design.livechat.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/livechat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-07-14T21:39:23.000Z","updated_at":"2025-12-22T13:02:26.000Z","dependencies_parsed_at":"2023-09-29T11:35:44.585Z","dependency_job_id":"1cb6e93f-0dad-4b29-b105-646eab2b2f67","html_url":"https://github.com/livechat/design-system","commit_stats":{"total_commits":924,"total_committers":37,"mean_commits":"24.972972972972972","dds":0.5660173160173161,"last_synced_commit":"fe8c5d2e58fd0a4b82836d2e47808b7c619cf2a7"},"previous_names":[],"tags_count":289,"template":false,"template_full_name":null,"purl":"pkg:github/livechat/design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livechat","download_url":"https://codeload.github.com/livechat/design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livechat%2Fdesign-system/sbom","scorecard":{"id":594209,"data":{"date":"2025-08-11","repo":{"name":"github.com/livechat/design-system","commit":"7edf4dc2279a39857dc07c1aabaa81b61bd8433c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.8,"checks":[{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/check-pr-title.yml:1","Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Warn: no topLevel permission defined: .github/workflows/tests.yml:1","Warn: no topLevel permission defined: .github/workflows/update-pr-description.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":6,"reason":"Found 18/30 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":4,"reason":"4 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/check-pr-title.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/check-pr-title.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/chromatic.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/chromatic.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/chromatic.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-pr-description.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/livechat/design-system/update-pr-description.yml/main?enable=pin","Info:   0 out of   7 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned","Info:   3 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"25 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-9crc-q9x8-hgqq","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T22:44:19.998Z","repository_id":39499806,"created_at":"2025-08-20T22:44:19.998Z","updated_at":"2025-08-20T22:44:19.998Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28341406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T12:22:26.515Z","status":"ssl_error","status_checked_at":"2026-01-12T12:22:10.856Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-12T15:42:12.077Z","updated_at":"2026-01-12T15:42:12.184Z","avatar_url":"https://github.com/livechat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"./docs/assets/logo.png\" alt=\"livechat design-system logo\" /\u003e\u003cbr /\u003e\n  LiveChat Design System Monorepo\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/@livechat/design-system-react-components\"\u003e\n    \u003cimg alt=\"npm version react-components\" src=\"https://img.shields.io/npm/v/@livechat/design-system-react-components.svg?label=react-components\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/@livechat/design-system-icons\"\u003e\n    \u003cimg alt=\"npm version icons\" src=\"https://img.shields.io/npm/v/@livechat/design-system-icons.svg?label=icons\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://design.livechat.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=documentation\u0026message=storybook\u0026color=ff4685\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/livechat/design-system/actions/workflows/tests.yml\"\u003e\n    \u003cimg src=\"https://github.com/livechat/design-system/actions/workflows/tests.yml/badge.svg\" alt=\"Workflow status badge\" loading=\"lazy\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nWelcome 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:\n\n## Packages\n\n### 1. React Components\n\n- **Package Name**: `react-components`\n- **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.\n- **Usage**: To install and use these components in your project, follow the installation and usage instructions in the `react-components` package documentation.\n\n### 2. Icons\n\n- **Package Name**: `icons`\n- **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.\n- **Usage**: To use these icons, refer to the documentation provided within the `icons` package.\n\n### 3. Example React Project\n\n- **Package Name**: `example-react`\n- **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.\n- **Usage**: To run the example React project, follow the instructions in the `example-react` package documentation.\n\n## Getting Started\n\n#### Clone this repository to your local machine:\n\n```bash\ngit clone git@github.com:livechat/design-system.git\n```\n\n#### Install the necessary dependencies for the entire monorepo using Lerna:\n\n\nRequired version of `node.js` is `20.14.0`.\n\nIf you're a [volta](https://volta.sh/) user, the project maintains node version entry within `package.json`.\n\nYou should start with installing dependencies:\n\n```\nnpm install\n```\n\nAfter 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).\n\n```\nnpm start\n```\n\nIf `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.\n\n### 404 and disconnections problems\nIf you have problems with disconnects while working in the environment, make the following change to the file `packages/react-components/.storybook/main.ts`:\n```\n...\ntypescript: {\n// reactDocgen: 'react-docgen-typescript',\n  check: false,\n  reactDocgen: false,\n},\n...\n```\nThis is a problem that occurred after the last update of Storybook and related packages, we are currently looking for a solution for this.\n\n**Be sure not to commit changes to this file along with other changes made to components.**\n\n## Styling the components aka migration to `@emotion`\nWe are transitioning our design system components from SCSS to `@emotion` for styling. This change aims to enhance maintainability, improve performance, and provide a more seamless styling approach within React.\n\n**When updating or contributing to the design system, please use Emotion syntax instead of module SCSS files.**\n\n### What Changes?\nStyles previously written in `.scss` files are now defined using Emotion’s css API.\nComponents no longer import `.scss` files but instead define styles within `styles.ts` files.\n\n### How to Use the Updated Components?\nYou don’t need to make significant changes in consuming applications—components will still expose the same props. However, if you were relying on SCSS class names for custom overrides, you might need to adjust your approach using Emotion’s className prop or theme overrides.\n\n### Example: Before \u0026 After\n\n#### Before\n```tsx\nimport styles from './Accordion.module.scss';\n...\nclassName: cx(styles[`${baseClass}__label`], {\n  [styles[`${baseClass}__label--promo`]]: isPromo,\n}),\n...\n```\n```scss\n...\n\u0026__label {\n  margin: 0;\n  padding: var(--spacing-5) var(--spacing-12) var(--spacing-5)\n    var(--spacing-5);\n\n  \u0026:hover {\n    cursor: pointer;\n  }\n\n  \u0026--promo {\n    padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)\n      var(--spacing-6);\n  }\n}\n...\n```\n\n#### After\n```tsx\nimport * as styles from './styles';\n...\nclassName: styles.label(isPromo),\n...\n```\n```tsx\nexport const label = (isPromo?: boolean) =\u003e css`\n  margin: 0;\n  ${isPromo\n    ? `\n    padding: var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing6});\n  `\n    : `\n    padding: var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing5});\n  `}\n  \u0026:hover {\n    cursor: pointer;\n  }\n`;\n```\n\n## Contributing\n\nThe guide that describes the contribution process is available [here](./docs/CONTRIBUTION.md).\n\n## Testing\n\nWe have prepared a document describing testing process and core principles in the area of quality [here](./docs/TESTING.md).\n\n## Releasing\n\nThe package releasing and related documentation is available [here](./docs/RELEASE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivechat%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivechat%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivechat%2Fdesign-system/lists"}