Official React Solace Component Library

Changelogs

Checkout the changelogs per release here!

Getting Started

Install the @solace-health/ui package

npm install @solace-health/ui

For Development

1. Run npm i
2. Run npm run storybook

Use local package in external application

Using yalc

Note: This method requires the consumer app to match the exact version of the library.

Example: in solace-health/app/package.json: "@solace-health/ui": "0.10.406" matches this repo's version from package.json:

  "name": "@solace-health/ui",
  "version": "0.10.406"

1. Build and Publish package to yalc

npm run build

npx yalc publish

3. Link the UI repo to the consumer apps (e.g. solace-health-app)

cd solace-health-app

npx yalc link @solace-health/ui

solace-health-app will now be using your local version of solace-health-ui.

NOTE: Make sure the package versions match between the UI library and the consuming app, otherwise linking may not work as expected.

4. Reloading the consumer app

To build and publish new changes to all consumer apps, run the following command:

npm run yalc:publish

This makes a production build, updating the dist folder, and then publishes the library with yalc.

Consumer apps will see the changed dist folder and will reload themselves.

On the consumer app, if it's a next.js app, you have to clear the cache first in order to see yalc'd changes. For Vite apps, you can force a build of all deps with the --force flag.

npm run dev -- --force

5. Remove the link

To remove the link on the consumer app, run:

yalc remove @solace-health/ui

Deploy to NPM

Simply cut a new release in github with an appropriate semantic version. There is a github action that will fire when it detects a new cut tag. From there it will build and deploy using the tag from github and mark it as latest. Once that is complete, the action will update the version in package.json. No need for any manual updates on the code side.

We use release drafter to scaffold the upcoming releases. You rarely will need to draft a new release manually.

V2 Components

The V2 components are located in the src/v2 directory, and are powered by Shadcn.

Please refer to the Shadcn docs to add more components.

V2 Component Requirements on the Consumer Apps

To use the V2 components, consumer apps must install tailwindcss, include the tailwindTheme.css file provided by this repo, and configure tailwind to scan the source files of @solace-health/ui in their node_modules directory.

E.g. for @solace-health/ui, in the globals.css file:

@source "../../node_modules/@solace-health/ui/dist";
@import "@solace-health/ui/tailwindTheme.css";