# React UI

A reusable React component library for Pattern applications.

## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
- [Usage](#usage)
- [Tailwind CSS v4 Guide](#tailwind-css-v4-guide)
- [Development](#development)
- [Testing](#testing)
- [Storybook & Chromatic](#storybook--chromatic)
- [Chromatic Environment Setup](#chromatic-environment-setup)
- [Adding/Updating Types](#addingupdating-types)
- [Updating package.json version](#updating-packagejson-version)
- [Removing yalc from Apps](#removing-yalc-from-apps)
- [Publishing Workflow](#publishing-workflow)
- [Versioning & Changelog](#versioning--changelog)
- [Contributing](#contributing)
- [License](#license)

---

## Introduction

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

---

## Installation

```bash
pnpm add @pattern/react-ui
```

---

## Usage

```tsx
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](../../TAILWIND_V4_GUIDE.md)** (workspace root)

---

## Development

1. Install dependencies:
   ```bash
   pnpm install
   ```
2. Run Storybook:
   ```bash
   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.

---

<!-- ## Testing

Run tests with:

```bash
TODO: Add test commands here
```

--- -->

## 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](https://wiki.pattern.com/en/development/aws#cli-access).

NOTES:

- You may need to first install the AWS CLI [here](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) 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:

   ```sh
   aws sso login --profile dev
   ```

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

   ```sh
   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:
   ```sh
   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:
  ```bash
  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.