Sergei 5dc348107a Add shared UI library (@wellnuo/ui)

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>

2026-01-31 18:00:24 -08:00

2.4 KiB

Raw Blame History

@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.

# In main app or WellNuoLite
npm install

Usage

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:

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

# 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.

2.4 KiB Raw Blame History