React UI

A reusable React component library for Pattern applications.

Table of Contents

• Introduction
• Installation
• Usage
• Tailwind CSS v4 Guide
• Development
• Testing
• Storybook & Chromatic
• Chromatic Environment Setup
• Adding/Updating Types
• Updating package.json version
• Removing yalc from Apps
• Publishing Workflow
• Versioning & Changelog
• Contributing
• License

Introduction

React UI provides a set of consistent, accessible, and customizable UI components for Pattern web applications.

Installation

pnpm add @pattern/react-ui

Usage

import { Button } from '@pattern/react-ui'

export function MyComponent() {
  return <Button>Click me</Button>
}

Tailwind CSS v4 Guide

This library provides the theme configuration for Tailwind CSS v4 used across all Pattern EXP applications. For comprehensive documentation on:

• Available colors and theme configuration
• Migration from legacy utility classes
• Best practices and usage examples
• Integration guidelines for all apps

See: TAILWIND_V4_GUIDE.md (workspace root)

Development

1. Install dependencies:

   pnpm install

2. Run Storybook:

   pnpm storybook

When making updates, it is important to get changes approved by the UX team and team Nexus. Please utilize Chromatic to demo your updates before getting your PRs raised.

Storybook & Chromatic

• View components in isolation with Storybook: pnpm storybook
• Publish visual changes for review with Chromatic: pnpm chromatic

Chromatic Environment Setup

Before running Chromatic, you'll need to generate a .env file with the necessary credentials and tokens. This process fetches secure parameters from AWS Parameter Store.

Prerequisites

Ensure you have AWS CLI access configured by following the instructions in the Pattern Wiki - AWS CLI Access.

NOTES:

• You may need to first install the AWS CLI here before you can continue with the aws configure sso command.
• There is a registration prompt that appears in the setup that is not specified in the wiki, but you can just press return or enter to continue on in the setup.

Steps to Generate Environment Variables

1. Authenticate with AWS: Login to AWS through the command line using the development profile:

   aws sso login --profile dev

2. Generate the .env file: Run the environment setup script to fetch parameters from AWS Parameter Store:

   bash scripts/env.sh --profile dev

3. Verify setup: The script will create a .env file populated with Chromatic token mappings from the AWS development account parameter store.

4. Run Chromatic: You can now run Chromatic as usual within your application:

   pnpm chromatic

Note: The .env file contains sensitive information and should never be committed to version control. It's already included in .gitignore for security.

Versioning & Changelog

Team Nexus will handle version bumping and change log entries.

• Bump version and generate changelog:

  pnpm changelog

Contributing

• Please open a pull request for any changes.
• Follow our code style and review process.
• All changes require approval from UX and team Nexus.