npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sonarsource/echoes-react

v0.11.1

Published

React implementation of Echoes, SONAR's Design System

Downloads

2,266

Readme

echoes-react

A React implementation of Echoes, Sonar's Design System.

Installation

yarn add @sonarsource/echoes-react

Usage

Providers

Make sure to setup the following Providers at the root of your app:

Intl Provider

The IntlProvider from react-intl is necessary for translations. See this page for more information. The i18n keys file contains the list of keys that should be translated.

Tooltip Provider

The TooltipProvider is required to allow the Tooltips to work.

import { TooltipProvider } from '@sonarsource/echoes-react'; and wrap the root of your app.

Use components

import { Checkbox } from '@sonarsource/echoes-react';

See available components and usage in storybook: https://echoes-react.netlify.app/

Tooltips and stacking context

If tooltips do not appear above the rest of the UI, read the jsdoc of Tooltips

Make it work in Jest

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)`],

Local Development

VSCode Configuration

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.

You should also set up your vscode to work with the yarn pnp setup, using the following command: yarn dlx @yarnpkg/sdks vscode

Run storybook

Use the following command to run both the build watcher and the storybook server in dev mode:

yarn dev

Tests

To run tests, run:

yarn test

Build

To build the lib, run:

yarn build

Generated files

The 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.

Generated Icons font

We 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.

If you add new icons you must run the following command to generate the new optimized font:

yarn build-fonts

Generated Design Tokens

Our 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.

If new design tokens are added to the raw Figma file, we must run the following command to generate the new design tokens css variables:

yarn build-tokens

Generated i18n keys file

We 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.

If you add new translation keys, you must run the following command to generate the new i18n/keys.json file:

yarn build-intl-keys

Deployment

Release process definition

License

Copyright 2023-2024 SonarSource. Licensed under the GNU Lesser General Public License, Version 3.0