Sergei
5dc348107a
Created a comprehensive shared UI component library to eliminate code duplication across WellNuo apps (main app and WellNuoLite). ## Components Added - Button (merged features from both apps - icons, 5 variants, shadows) - Input (with left/right icons, password toggle, error states) - LoadingSpinner (inline and fullscreen variants) - ErrorMessage & FullScreenError (with retry/skip/dismiss actions) - ThemedText & ThemedView (theme-aware utilities) - ExternalLink (for opening external URLs) ## Design System - Exported complete theme system (colors, spacing, typography, shadows) - 73+ color definitions, 7 spacing levels, 8 shadow presets - Consistent design tokens across all apps ## Infrastructure - Set up npm workspaces for monorepo support - Added comprehensive test suite (41 passing tests) - TypeScript configuration with strict mode - Jest configuration for testing - README and migration guide ## Benefits - Eliminates ~1,500 lines of duplicate code - Ensures UI consistency across apps - Single source of truth for design system - Easier maintenance and updates - Type-safe component library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
107 lines
2.4 KiB
Markdown
107 lines
2.4 KiB
Markdown
# @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.
|