{"id":28495953,"url":"https://github.com/sonarsource/echoes-react","last_synced_at":"2026-04-17T11:00:52.404Z","repository":{"id":207180510,"uuid":"718621393","full_name":"SonarSource/echoes-react","owner":"SonarSource","description":"A React implementation of Echoes, Sonar's design system.","archived":false,"fork":false,"pushed_at":"2026-04-16T12:37:47.000Z","size":856944,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":15,"default_branch":"main","last_synced_at":"2026-04-16T12:37:52.423Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SonarSource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"NOTICE.txt","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-14T13:18:31.000Z","updated_at":"2026-04-14T12:59:07.000Z","dependencies_parsed_at":"2025-10-17T05:24:02.575Z","dependency_job_id":"c541a85b-348b-4a13-9bdd-0159901577c2","html_url":"https://github.com/SonarSource/echoes-react","commit_stats":null,"previous_names":["sonarsource/echoes-react"],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/SonarSource/echoes-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonarSource%2Fechoes-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonarSource%2Fechoes-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonarSource%2Fechoes-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonarSource%2Fechoes-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SonarSource","download_url":"https://codeload.github.com/SonarSource/echoes-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonarSource%2Fechoes-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31926260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T10:35:34.458Z","status":"ssl_error","status_checked_at":"2026-04-17T10:35:09.472Z","response_time":62,"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":"2025-06-08T11:38:13.812Z","updated_at":"2026-04-17T11:00:52.398Z","avatar_url":"https://github.com/SonarSource.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# echoes-react\n\n[![Build Status](https://github.com/SonarSource/echoes-react/actions/workflows/build.yml/badge.svg)](https://github.com/SonarSource/echoes-react/actions/workflows/build.yml)\n[![Releasability status](https://github.com/SonarSource/echoes-react/actions/workflows/releasability.yml/badge.svg)](https://github.com/SonarSource/echoes-react/actions/workflows/releasability.yml)\n[![Quality Gate Status](https://next.sonarqube.com/sonarqube/api/project_badges/measure?project=SonarSource_echoes-react\u0026metric=alert_status\u0026token=sqb_ced4ef7f562917d10af6bb2e9f1649c62a882ff9)](https://next.sonarqube.com/sonarqube/dashboard?id=SonarSource_echoes-react)\n\nA React implementation of Echoes, Sonar's Design System.\n\n## Installation\n\n### Requirements\n\nThis library requires to be installed with **Yarn** to work properly due to a patch applied to one of our dependencies. Using npm or other package managers is not currently supported.\n\n### Install the library\n\n```bash\nyarn add @sonarsource/echoes-react\n```\n\n### Install peer dependencies\n\nEchoes React has several peer dependencies that must be installed in your project:\n\n```bash\nyarn add @emotion/react @emotion/styled react-intl react-router-dom\n```\n\nThese dependencies are required for:\n\n- **@emotion/react \u0026 @emotion/styled**: CSS-in-JS styling\n- **react-intl**: Internationalization support\n- **react-router-dom**: Routing functionality for certain components (Links, Breadcrumbs, etc.)\n\n## Usage\n\n### Providers\n\nMake sure to setup the following Providers at the root of your app:\n\n#### Echoes Provider\n\nThe `EchoesProvider` is required to provide theming and configuration context for all Echoes components.\n\n#### Intl Provider\n\nThe `IntlProvider` from `react-intl` is necessary for translations. See [this page](https://formatjs.github.io/docs/react-intl/components#intlprovider) for more information.\nThe [i18n keys file](i18n/keys.json) contains the list of keys that should be translated and provided by your `IntlProvider`.\nMake sure to have the `IntlProvider` wrapping the `EchoesProvider`.\n\n#### Router Provider\n\nThe `BrowserRouter` (or other router) from `react-router-dom` is required for components that use routing functionality (such as Links, Breadcrumbs, etc.).\nMake sure to have the Router wrapping the `EchoesProvider`.\n\n#### Stacking Context\n\nIn order to have tooltips and other overlay components appear above the rest of the UI, it is probably necessary to have a [Stacking Context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) for your app. This means the root app component should define a new one, or be wrapped in a component that does it.\n\nThe easiest way to start a new Stacking Context is to provide your app root with the following CSS properties:\n\n```css\nisolation: isolate;\nposition: relative;\n```\n\n#### Complete Setup Example\n\n```tsx\nimport { BrowserRouter } from 'react-router-dom';\nimport { IntlProvider } from 'react-intl';\nimport { EchoesProvider } from '@sonarsource/echoes-react';\n\nfunction App() {\n  return (\n    \u003cIntlProvider locale=\"en\" messages={messages}\u003e\n      \u003cBrowserRouter\u003e\n        \u003cEchoesProvider\u003e\n          \u003cdiv className=\"app-root\" style={{ isolation: 'isolate', position: 'relative' }}\u003e\n            \u003cYourAppRoot /\u003e\n          \u003c/div\u003e\n        \u003c/EchoesProvider\u003e\n      \u003c/BrowserRouter\u003e\n    \u003c/IntlProvider\u003e\n  );\n}\n```\n\n### Use components\n\n```ts\nimport { Checkbox } from '@sonarsource/echoes-react';\n```\n\nSee available components and usage in storybook: \u003chttps://echoes-react.netlify.app/\u003e\n\n### Testing with Echoes components in your app\n\n#### Rendering components\n\nTo render app components that use Echoes components internally you need to make sure your test render function also provides the necessary context providers detailed in the [Providers](#providers) section above.\nYou can also configure the `EchoesProvider` with `tooltipsDelayDuration={0}` to disable the tooltip delay during tests, which can help avoid flaky tests due to tooltips not appearing on time.\n\n#### Jest\n\nThe lib only provides an ES module bundle. If you use Jest for your tests (or a similar library) make sure your transform preprocessor goes through `@sonarsource/echoes-react` to make it runnable on Node.js.\nYou can do that by adding an exception in your `transformIgnorePatterns`, for example:\n\n```js\ntransformIgnorePatterns: [`/node_modules/(?!@sonarsource/echoes-react)`],\n```\n\n## Contributing\n\n### VSCode Configuration\n\nWe recommend VSCode to work on this project.\nThere is a `.vscode` folder containing:\n\n- A list of recommended extensions\n  - Install them through the marketplace\n- A template for necessary (and recommended) settings: `settings.template.json`\n  - Copy it and save it as `settings.json`\n  - You must open the project directly. Adding its folder in an existing workspace might not work, as the typescript configuration must be defined at workspace level.\n\n### Run storybook\n\nUse the following command to run both the build watcher and the storybook server in `dev` mode:\n\n```bash\nyarn dev\n```\n\n### Tests\n\nTo run tests, use the following command:\n\n```bash\nyarn jest\n```\n\n### Build\n\nTo build the lib, use the following command:\n\n```bash\nyarn build\n```\n\n### Generated files\n\nThe lib is built on top of some generated files like the design-tokens or the icons fonts. These generated files are versioned in the `src/generated` and `i18n` folders.\n\n#### Generated Icons font\n\nWe generated an optimized version of the material-symbold-rounded font that we use for our icons. The whole font contains thousands of icons and weighs more than 4Mb, so we generate a subset of it containing only the icons we use in the design system, reducing its size to a few Kb.\n\nIf you add new icons you must run the following command to generate the new optimized font:\n\n```bash\nyarn build-fonts\n```\n\n#### Generated Design Tokens\n\nOur raw design tokens files that are created on Figma are stored inside the `design-tokens/tokens` folder. We can't use these tokens as is, so we transform them using `style-dictionary` to css variable format and store them in the `src/generated` folder. We also generate a few other files to help us with typings.\n\nIf new design tokens are added to the raw Figma file, we must run the following command to generate the new design tokens css variables:\n\n```bash\nyarn build-tokens\n```\n\n#### Generated i18n keys file\n\nWe use the `react-intl` library for internationalization. We store our translations in the `i18n/keys.json` file. This file is generated based on all the translation keys contained in our components. This file is mainly useful for the products that use the lib to know what keys they should translate.\n\nIf you add new translation keys, you must run the following command to generate the new `i18n/keys.json` file:\n\n```bash\nyarn build-intl-keys\n```\n\n### Releasing\n\n[Release process](docs/RELEASING.md)\n\n## Troubleshooting\n\n### Common Issues\n\n#### \"Cannot resolve module\" errors with Vite/Webpack\n\nMake sure all peer dependencies are installed, see the [Installation](#installation) section above.\n\n#### Missing component styles or functionality\n\nEnsure you have wrapped your app with all required providers in the correct order and configured a proper stacking context, see [Providers](#providers) section above.\n\n#### Tooltips not appearing above other UI elements\n\nIf tooltips or other overlay components don't appear correctly, ensure you have configured a stacking context, see [Providers](#providers) section above.\n\n#### Router context errors\n\nIf you encounter errors about missing router context when using Link components or other routing-related components, make sure you have wrapped your app with a Router provider from `react-router-dom` (e.g., `BrowserRouter`, `HashRouter`, or `MemoryRouter`).\n\n## License\n\nCopyright 2023-2025 SonarSource.\nLicensed under the [GNU Lesser General Public License, Version 3.0](http://www.gnu.org/licenses/lgpl.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonarsource%2Fechoes-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonarsource%2Fechoes-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonarsource%2Fechoes-react/lists"}