# @wellnuo/ui

Shared UI component library for WellNuo applications.

## Installation

This package is part of the WellNuo monorepo and is automatically linked via npm workspaces.

```bash
# In main app or WellNuoLite
npm install
```

## Usage

```typescript
import { Button, Input, LoadingSpinner, ErrorMessage } from '@wellnuo/ui';
import { AppColors, Spacing, BorderRadius } from '@wellnuo/ui';
import { ThemedText, ThemedView } from '@wellnuo/ui';

// Use components
<Button
  title="Click Me"
  variant="primary"
  icon="checkmark-circle"
  onPress={() => console.log('Clicked!')}
/>

<Input
  label="Email"
  leftIcon="mail"
  placeholder="Enter your email"
  error={error}
/>

<LoadingSpinner message="Loading..." />

<ErrorMessage
  message="Something went wrong"
  onRetry={() => refetch()}
/>

// Use theme constants
<View style={{ padding: Spacing.lg, borderRadius: BorderRadius.xl }}>
  <Text style={{ color: AppColors.primary }}>Hello</Text>
</View>
```

## Components

### UI Components
- **Button** - Customizable button with variants (primary, secondary, outline, ghost, danger)
- **Input** - Text input with label, icons, and error states
- **LoadingSpinner** - Loading indicator with optional message
- **ErrorMessage** - Error display with retry/skip/dismiss actions
- **FullScreenError** - Full-screen error display

### Utility Components
- **ThemedText** - Text component with theme support
- **ThemedView** - View component with theme support
- **ExternalLink** - Link component for external URLs

## Theme

The package exports a comprehensive design system:

```typescript
import {
  AppColors,      // Color palette
  Spacing,        // Spacing scale (xs to xxxl)
  BorderRadius,   // Border radius scale
  FontSizes,      // Font size scale
  FontWeights,    // Font weight presets
  Shadows,        // Shadow presets
  IconSizes,      // Icon size presets
  AvatarSizes,    // Avatar size presets
  CommonStyles,   // Common component styles
} from '@wellnuo/ui';
```

## Hooks

- **useColorScheme** - Get current color scheme (light/dark)
- **useThemeColor** - Get theme-aware colors

## Development

```bash
# Type checking
npm run type-check

# Linting
npm run lint

# Tests
npm test
```

## Architecture

This shared UI library eliminates code duplication across:
- Main WellNuo app
- WellNuoLite app
- Future applications

All components use the shared design system for consistent styling.