Teal Health Design System

👋 Welcome to Teal Health's Design System guidebook!
Here, you will find an overview of our UI system, including interactive examples and recommended use cases. Our goal is to promote proper and consistent use of our components.

Build Setup

Follow these steps to set up and run the Design System:

1. Install dependencies
   Run the following command to install all required packages:

   pnpm install

2. Run Storybook builds
   Depending on the environment or framework, you can choose one of the following:

   • Next.js build

     pnpm storybook-nextjs

   • Vite build

     pnpm storybook

   • Webpack build

     pnpm storybook-webpack

3. Build the production bundle
   Create a production-ready Storybook bundle with:

   pnpm build-storybook

CI/CD Workflow Overview

GitHub Actions Workflow

On Pull Request

Uses alphaPublish.yml:

1. Cancel any running Amplify deployment associated with the PR.
2. Create an alpha version with a bump (e.g., 1.2.90-alpha.175.1, 1.2.90-alpha.175.2, etc.).
3. Commit the new alpha version (e.g., 1.2.90-alpha.175.3).
4. Publish the alpha version to npm.

On Develop Branch

Uses publish.yml:

1. Remove the alpha version and bump the patch (e.g., 1.2.90-alpha.175.3 → 1.2.91).
2. Publish the new patch version to npm.
3. Commit the new patch version for future iterations (e.g., 1.2.91).

Amplify CD Workflow

The deployment to Amplify is based on the target branch, as defined in amplify.yml:

• Develop branch

  1. Automatically deploy to Amplify when a pull request is merged.
  2. Access the deployed Storybook here: storybook

• Pull request branch
  Automatically deploy to Amplify whenever a pull request is created or updated.

Installing Alpha Versions

You can install the @tealhealth/storybook package using pnpm for a specific branch.
Every push to a PR branch automatically publishes a new alpha release on npm. To test the latest alpha version, use the following format:

pnpm add @tealhealth/storybook@[major].[minor].[patch]-alpha.[PR#].[RUN#]

For example:

pnpm add @tealhealth/[email protected]