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 or npm run dev is you only need to run in watch mode

Use local package in external application

Using npm link

First, make sure the ui library and app you're working on are running the same Node version. If not, the app will select the version that matches, i.e. the one in its node_modules. Simply update .nvmrc in the ui library locally if needed and remember to not commit it unless needed.

In the UI library folder:

npm link

In the app folder:

npm link @solace-health/ui

Voila! Next will hot reload changes made in the ui library as long as it is running npm run dev.

🚨 If you are running into issues with dependencies Add a webpack alias if duplicate dependencies are causing issues. More info

const nextConfig = {
  // the rest of the config
  webpack: (config) => {
    const newConfig = {...config};

    newConfig.resolve.alias = {
      ...(config.resolve.alias || {}),
      "@emotion/react": path.resolve("./node_modules/@emotion/react"),
    };
    return newConfig;
  },
}

Using yalc

This legacy method is not as reliable but previously the only way to link the ui library with the app. If possible, try to use npm link first.

Install yalc globally

npm i yalc -g

Navigate to the solace-health-ui package

cd solace-health-ui

Publish package to yalc

npx yalc publish

Navigate to solace-health-app

cd solace-health-app

🚨 Before the next step, make sure solace-health-app is not currently running, otherwise you'll have to restart after linking

Link the local package to solace-health-app/solace-health-admin

npx yalc link @solace-health/ui

solace-health-app will now be using your local version of solace-health-ui. Hot reloading is not currently enabled so after every change to your local solace-health-ui, run the following command to see the changes reflected in the app.

🗒️ This command assumes that the application and solace-health-ui are within the same directory.

(cd ../solace-health-ui; npm run build && npx yalc publish;) && npx yalc update

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.