A React implementation of Echoes, Sonar's Design System.
yarn add @sonarsource/echoes-react
Make sure to setup the IntlProvider
from react-intl
at the root of your app. See this page for more information.
Use components from the lib:
import { Checkbox } from '@sonarsource/echoes-react';
See available components and usage in storybook: https://echoes-react.netlify.app/
The lib only provides es module bundle. If you use Jest for your tests (or a similar library) make sure your transform preprocessor goes through echoes-react
to make it runnable on Node.js.
You can do that by adding an exception in your transformIgnorePatterns
, for example:
transformIgnorePatterns: [`/node_modules/(?!@sonarsource/echoes-react)`],
We recommend VSCode to work on this project.
There is a .vscode
folder containing:
- A list of recommended extensions
- Install them through the marketplace
- A template for necessary (and recommended) settings:
settings.template.json
- Copy it and save it as
settings.json
- 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.
- Copy it and save it as
You should also set up your vscode to work with the yarn
pnp setup, using the following command: yarn dlx @yarnpkg/sdks vscode
Use the following command to run both the build watcher and the storybook server in dev
mode:
yarn dev
To run tests, run:
yarn test
To build the lib, run:
yarn build