Iron Health PrimeReact Theme

This package was bootstrapped using the React Storybook boilerplate: https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

It contains a custom Prime React theme for Iron Health's applications with an importable component library.

Commands

Storybook

These commands allow you to run and develop React Components with storybook. While this repo's focus is a PrimeReact theme, we demo common PrimeReact components to illustrate overall styling.

Commands:

• $ npm i to install all the packages in the root of this folder
• $ npm run storybook which will launch an interactive dashboard

NPM Actions

Configuring the workflow to publish npm (./github/workflows/build-npm.yml)

The NPM Publishing workflow requires a NPM_AUTH_TOKEN environment variable, to generate one:

• Login to https://npm.js.com
• Go to settings and select Access Tokens
• Click generate new Classic Token with an automation type
• Set that token as a variable, https://github.com/Iron-Health/ironhealth/settings/secrets/actions in with the name NPM_AUTH_TOKEN

NPM Publish

To add or update a package, run the following:

• First, login to NPM: $ npm login
• Run $ npm publish --access public

There is a github action workflow publish-NPM-dependencies, which can be run manually on the branch to publish the version. The following step needs to be done first. If there are multiple versions published at the same time from branches, there may need to be updates to the latest published version to follow what has been merged from main.

Incrementing the version

To increment the version, run $ npm version xyz.

NPM Unpublish

To unpublish and remove a package, run the following:

• First, login to NPM: $ npm login
• Run $ npm unpublish @ironhealth.io/[email protected] --force

Theme implementation

PrimeReact Theme

In your target application, run the following commands:

• npm install -D @ironhealth/ih-component-library@latest"
• Open vite.config.ts in your target application and add the following config block:

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@ironhealth.io/ih-component-library/dist/main.scss"; ',
      },
    },
  },

React Components

In your target application, run the following commands:

• npm install @ironhealth.io/ih-component-library@latest"
• Add import { Test } from "@ironhealth/ih-component-library at the top of your javascript file

Local

If you want to test your changes in the application before publishing, run npm link in this directory. Then from your application folder, run npm link @ironhealth.io/ih-component-library.