@cayuse-test/react

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

Installation

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

Usage

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

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

Commands

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

# 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

# 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

# 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

# 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

# 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

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:

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

Troubleshooting

Build fails

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

Can't commit

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

Publish fails

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