npm package: @cayuse-test/react
Description: React component library with TypeScript, tree-shaking support, and shared configs.
Latest version: 1.1.6

# @cayuse-test/react

React component library with TypeScript, tree-shaking support, and shared configs.

## Installation

```bash
npm install @cayuse-test/react
# or
pnpm add @cayuse-test/react
```

## Usage

```tsx
import { Button, Input, DynamicTable } from '@cayuse-test/react';
import '@cayuse-test/react/css'; // Import styles

function App() {
	return <Button variant="primary">Click me</Button>;
}
```

## What's Included

- **40+ Components**: Button, Input, DynamicTable, ModalDialog, etc.
- **Hooks**: `useClickOutside`, `useDictionary`, `useFileUploader`, etc.
- **Utils**: Form validation, date formatting, type checks, HTTP helpers
- **Context**: Multi-tenancy support via `TenantProvider`
- **Shared Configs**: ESLint & TypeScript configurations

## Development

### Setup

```bash
pnpm install
pnpm run storybook  # View components at http://localhost:6006
```

### Commands

```bash
pnpm run build          # Build package
pnpm run dev            # Build in watch mode
pnpm run check-types    # TypeScript validation
pnpm run lint           # Check code quality
pnpm run lint:fix       # Auto-fix linting issues
pnpm run format         # Format with Prettier
pnpm test               # Run tests
```

## Publishing

### Create a New Version

```bash
# 1. Make your changes and commit
git add .
git commit -m "feat: add new component"

# 2. Run quality checks
pnpm run check-types && pnpm run lint && pnpm run build

# 3. Bump version
npm version patch   # 1.0.0 → 1.0.1 (bug fixes)
npm version minor   # 1.0.0 → 1.1.0 (new features)
npm version major   # 1.0.0 → 2.0.0 (breaking changes)

# 4. Push with tags
git push --follow-tags

# 5. Publish
pnpm publish --access public
```

### Custom Versions

```bash
# Manual version (you choose exact number)
npm version 1.2.3
# Result: 1.2.3

# Pre-release versions
npm version prerelease
# Example: 1.0.4 → 1.0.5-0

npm version preminor --preid=beta
# Example: 1.0.4 → 1.1.0-beta.0

npm version premajor --preid=rc
# Example: 1.0.4 → 2.0.0-rc.0
```

#### Hotfix with JIRA Ticket

```bash
# Option 1: Manual version (full control)
npm version 1.0.5-hotfix.PROJ-1234
# Result: 1.0.5-hotfix.PROJ-1234

# Option 2: Auto-increment (safer for multiple iterations)
npm version prerelease --preid=hotfix-PROJ-1234
# Result: 1.0.5-hotfix-PROJ-1234.0

# For subsequent hotfix iterations, just run:
npm version prerelease
# 1.0.5-hotfix-PROJ-1234.0 → 1.0.5-hotfix-PROJ-1234.1
# 1.0.5-hotfix-PROJ-1234.1 → 1.0.5-hotfix-PROJ-1234.2
```

#### Publish with Distribution Tags

```bash
# Publish as beta (not latest)
pnpm publish --tag beta --access public

# Publish as hotfix (not latest)
pnpm publish --tag hotfix --access public

# Publish as next (for upcoming features)
pnpm publish --tag next --access public

# Users install specific tags:
# npm install @cayuse-test/react@beta
# npm install @cayuse-test/react@hotfix
```

### Hotfix Workflow with JIRA Ticket

```bash
# 1. Create hotfix branch
git checkout -b hotfix/PROJ-1234

# 2. Fix the bug and commit
git add .
git commit -m "fix(PROJ-1234): description"

# 3. Create hotfix version
npm version 1.0.5-hotfix.PROJ-1234

# 4. Quality checks and build
pnpm run check-types && pnpm run lint && pnpm run build

# 5. Publish as hotfix
pnpm publish --tag hotfix --access public

# 6. Push with tags
git push origin hotfix/PROJ-1234 --follow-tags

# Users install: npm install @cayuse-test/react@hotfix
```

### Verify Publication

```bash
npm view @cayuse-test/react version        # Latest version
npm view @cayuse-test/react versions       # All versions
npm view @cayuse-test/react dist-tags      # Published tags (latest, beta, hotfix, etc.)

# View specific tag
npm view @cayuse-test/react@hotfix version

# View all hotfix versions
npm view @cayuse-test/react versions | grep hotfix
```

## Project Structure

```
packages/
  ├── components/       # React components
  ├── hooks/           # React hooks
  ├── utils/           # Utilities
  ├── context/         # React context providers
  ├── globals/         # Constants & CSS
  ├── services/        # S3 upload service
  ├── eslint-config/   # Shared ESLint configs
  └── typescript-config/ # Shared TypeScript configs
dist/                  # Built output
```

## Build Configuration

### Current Setup

- **Build Tool**: tsup (esbuild)
- **Format**: ESM only
- **TypeScript**: Enabled with declaration files
- **CSS**: Bundled and processed with PostCSS
- **Tree-shaking**: ✅ Enabled

### Build Output

```
dist/
  ├── index.js          # Main entry point
  ├── index.css         # All styles
  ├── index.d.ts        # TypeScript types
  └── chunk-*.js        # Code-split chunks (shared code)
```

## Git Hooks

Pre-commit hook automatically runs:

- Prettier (format code)
- ESLint (check quality)
- TypeScript (validate types)

Skip in emergencies:

```bash
git commit --no-verify -m "emergency fix"
```

## Troubleshooting

### Build fails

```bash
pnpm run check-types  # Find TypeScript errors
pnpm run lint:fix     # Auto-fix lint issues
```

### Can't commit

```bash
pnpm run check-types && pnpm run lint:fix
git commit -m "your message"
```

### Publish fails

```bash
npm whoami           # Check if logged in
npm login            # Login if needed
pnpm publish --access public
```

## Requirements

- Node.js >= 20
- PNPM v10.14.0

---

**Package**: `@cayuse-test/react`
**Version**: See package.json
**License**: See LICENSE