WellNuo/packages/@wellnuo/ui

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