@umituz/react-native-design-system 1.1.3 → 1.3.0

package/README.md

@@ -1,17 +1,19 @@
 # @umituz/react-native-design-system
 
-Universal design system for React Native apps following Domain-Driven Design (DDD) architecture with Material Design 3 components.
+Universal design system for React Native apps following Domain-Driven Design (DDD) architecture with Material Design 3 principles.
 
 ## ✨ Features
 
 - 🎨 **Material Design 3** - Modern, accessible UI components
-- ⚛️ **Atomic Design** - Organized component hierarchy (Atoms → Molecules → Organisms)
-- 🏗️ **DDD Architecture** - Clean domain-driven structure
+- ⚛️ **Pure React Native** - No external UI library dependencies (lightweight!)
+- 🏗️ **Atomic Design** - Organized component hierarchy (Atoms → Molecules → Organisms)
+- 🧬 **DDD Architecture** - Clean domain-driven structure
 - 🌓 **Theme Support** - Built-in light/dark mode
 - 📱 **Responsive** - Adaptive layouts for phones and tablets
 - ♿ **Accessible** - WCAG AA compliant components
 - 🎭 **Animations** - Smooth React Native Reanimated animations
 - 📦 **Zero Config** - Works out of the box
+- 🪶 **Lightweight** - Smaller bundle size (no Paper dependency)
 
 ## 📦 Installation
 
@@ -22,9 +24,11 @@ npm install @umituz/react-native-design-system
 ### Peer Dependencies
 
 ```bash
-npm install react@18.3.1 react-native@0.76.3 react-native-paper@^5.12.5 react-native-reanimated@~3.10.1
+npm install react@18.3.1 react-native@0.76.3 react-native-reanimated@~3.10.1 lucide-react-native@^0.468.0
 ```
 
+> **v1.3.0 Breaking Change**: React Native Paper dependency removed! All components now use pure React Native implementation for lighter bundle size and full control over styling.
+
 ## 🚀 Usage
 
 ```typescript
@@ -60,11 +64,12 @@ const MyScreen = () => {
 ## 🧩 Components
 
 ### Atoms (Primitive UI Components)
-- `AtomicButton` - Material Design 3 buttons with variants
-- `AtomicText` - Typography with MD3 type scale
-- `AtomicInput` - Text inputs with validation
-- `AtomicCard` - Container cards
-- `AtomicIcon` - Icon components
+- `AtomicButton` - Pure React Native buttons with variants (primary, secondary, outline, text, danger)
+- `AtomicText` - Typography with MD3 type scale (pure RN Text)
+- `AtomicInput` - Text inputs with validation states (pure RN TextInput)
+- `AtomicTextArea` - Multiline inputs with character counter (pure RN TextInput)
+- `AtomicCard` - Container cards with elevation (pure RN View)
+- `AtomicIcon` - Lucide icons with 1,639 icons
 - `AtomicSwitch` - Toggle switches
 - `AtomicBadge` - Status badges
 - `AtomicProgress` - Progress indicators
@@ -79,9 +84,9 @@ const MyScreen = () => {
 - And more...
 
 ### Organisms (Complex Patterns)
-- `ScreenLayout` - Screen wrapper with safe area
+- `ScreenLayout` - Screen wrapper with safe area (pure RN View)
 - `AppHeader` - Application header
-- `FormContainer` - Form layout container
+- `FormContainer` - Form layout container with keyboard handling (pure RN View + ScrollView)
 
 ## 🎨 Design Tokens
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -27,7 +27,6 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-paper": "^5.12.5",
     "react-native-reanimated": "~3.10.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@expo/vector-icons": "^14.0.0",

package/src/domains/icons/domain/config/IconLibraryConfig.ts

@@ -0,0 +1,93 @@
+/**
+ * Icon Library Configuration
+ *
+ * 🔧 SINGLE SOURCE OF TRUTH FOR ICON LIBRARY SELECTION
+ *
+ * To change icon library:
+ * 1. Update package.json with new library
+ * 2. Change CURRENT_LIBRARY below
+ * 3. Create adapter if needed (infrastructure/adapters/)
+ * 4. Done! All apps automatically use new library
+ *
+ * @example
+ * // Switch to Material Icons:
+ * export const CURRENT_LIBRARY: IconLibraryType = 'material';
+ */
+
+export type IconLibraryType = 'lucide' | 'material' | 'fontawesome' | 'ionicons';
+
+/**
+ * 🔧 CHANGE THIS TO SWITCH ICON LIBRARY
+ */
+export const CURRENT_LIBRARY: IconLibraryType = 'lucide';
+
+/**
+ * Icon Library Configuration
+ */
+export const ICON_LIBRARY_CONFIG = {
+  /**
+   * Current icon library in use
+   */
+  library: CURRENT_LIBRARY,
+
+  /**
+   * Default icon size (in pixels)
+   */
+  defaultSize: 24,
+
+  /**
+   * Default stroke width for outline icons
+   */
+  defaultStrokeWidth: 2,
+
+  /**
+   * Library metadata
+   */
+  libraries: {
+    lucide: {
+      name: 'Lucide',
+      package: 'lucide-react-native',
+      version: '^0.468.0',
+      iconCount: 1639,
+      type: 'outline',
+      adapter: 'LucideAdapter',
+    },
+    material: {
+      name: 'Material Icons',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 2000,
+      type: 'filled',
+      adapter: 'MaterialAdapter',
+    },
+    fontawesome: {
+      name: 'Font Awesome',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 1500,
+      type: 'solid',
+      adapter: 'FontAwesomeAdapter',
+    },
+    ionicons: {
+      name: 'Ionicons',
+      package: '@expo/vector-icons',
+      version: '^14.0.0',
+      iconCount: 1300,
+      type: 'outline',
+      adapter: 'IoniconsAdapter',
+    },
+  },
+} as const;
+
+/**
+ * Get current library metadata
+ */
+export const getCurrentLibrary = () => {
+  return ICON_LIBRARY_CONFIG.libraries[CURRENT_LIBRARY];
+};
+
+/**
+ * Type-safe library check
+ * Factory uses Lucide icons only
+ */
+export const isLucideLibrary = () => true;

package/src/domains/icons/domain/entities/Icon.ts

@@ -0,0 +1,143 @@
+/**
+ * Icons Domain - Entities
+ *
+ * Core icon types and interfaces for the App Factory.
+ * Provides unified access to Lucide icons (design-system) + Expo vector icons.
+ *
+ * @domain icons
+ * @layer domain
+ */
+
+/**
+ * Icon library types
+ * - lucide: Lucide React Native icons (already in design-system/AtomicIcon)
+ * - material: Material Design icons (@expo/vector-icons)
+ * - fontawesome: FontAwesome icons (@expo/vector-icons)
+ * - ionicons: Ionicons (@expo/vector-icons)
+ */
+export enum IconLibrary {
+  LUCIDE = 'lucide',
+  MATERIAL = 'material',
+  FONTAWESOME = 'fontawesome',
+  IONICONS = 'ionicons',
+}
+
+/**
+ * Icon category for organization
+ */
+export enum IconCategory {
+  ALL = 'all',
+  NAVIGATION = 'navigation',
+  ACTION = 'action',
+  SOCIAL = 'social',
+  COMMUNICATION = 'communication',
+  MEDIA = 'media',
+  BUSINESS = 'business',
+  WEATHER = 'weather',
+  SYMBOLS = 'symbols',
+  EMOJI = 'emoji',
+}
+
+/**
+ * Icon metadata for registry
+ */
+export interface IconMetadata {
+  name: string;
+  library: IconLibrary;
+  category: IconCategory;
+  tags: string[];
+  searchTerms: string[];
+}
+
+/**
+ * Icon registry interface
+ */
+export interface IIconRegistry {
+  /**
+   * Get all icons in the library
+   */
+  getAllIcons(): IconMetadata[];
+
+  /**
+   * Get icons by category
+   */
+  getIconsByCategory(category: IconCategory): IconMetadata[];
+
+  /**
+   * Search icons by query
+   */
+  searchIcons(query: string): IconMetadata[];
+
+  /**
+   * Get icon metadata by name
+   */
+  getIconMetadata(name: string): IconMetadata | null;
+}
+
+/**
+ * Icon picker configuration
+ */
+export interface IconPickerConfig {
+  libraries: IconLibrary[];
+  categories: IconCategory[];
+  showSearch: boolean;
+  multiSelect: boolean;
+  maxSelections?: number;
+  onSelect: (icons: IconMetadata[]) => void;
+  onCancel?: () => void;
+}
+
+/**
+ * Icon constants
+ */
+export const ICON_CONSTANTS = {
+  DEFAULT_SIZE: 24,
+  DEFAULT_COLOR: 'onSurface',
+  DEFAULT_LIBRARY: IconLibrary.LUCIDE,
+  MAX_SEARCH_RESULTS: 50,
+} as const;
+
+/**
+ * Icon utility functions
+ */
+export const IconUtils = {
+  /**
+   * Normalize icon name for search
+   */
+  normalizeIconName: (name: string): string => {
+    return name.toLowerCase().replace(/[^a-z0-9]/g, '');
+  },
+
+  /**
+   * Match search query against icon metadata
+   */
+  matchesSearch: (icon: IconMetadata, query: string): boolean => {
+    const normalizedQuery = IconUtils.normalizeIconName(query);
+    const normalizedName = IconUtils.normalizeIconName(icon.name);
+    const normalizedTags = icon.tags.map(tag => IconUtils.normalizeIconName(tag));
+    const normalizedTerms = icon.searchTerms.map(term => IconUtils.normalizeIconName(term));
+
+    return (
+      normalizedName.includes(normalizedQuery) ||
+      normalizedTags.some(tag => tag.includes(normalizedQuery)) ||
+      normalizedTerms.some(term => term.includes(normalizedQuery))
+    );
+  },
+
+  /**
+   * Filter icons by category
+   */
+  filterByCategory: (icons: IconMetadata[], category: IconCategory): IconMetadata[] => {
+    if (category === IconCategory.ALL) {
+      return icons;
+    }
+    return icons.filter(icon => icon.category === category);
+  },
+
+  /**
+   * Sort icons alphabetically
+   */
+  sortByName: (icons: IconMetadata[]): IconMetadata[] => {
+    return [...icons].sort((a, b) => a.name.localeCompare(b.name));
+  },
+};

package/src/domains/icons/domain/interfaces/IIconAdapter.ts

@@ -0,0 +1,144 @@
+/**
+ * Icon Adapter Interface
+ *
+ * Universal interface that all icon library adapters must implement.
+ * This allows seamless switching between icon libraries.
+ *
+ * @example
+ * // Implementing for a new library:
+ * export const MyLibraryAdapter: IIconAdapter = {
+ *   getIconComponent: (name) => MyIcons[name],
+ *   getIconSize: (size) => sizeMap[size],
+ *   getIconColor: (color, tokens) => colorMap[color],
+ *   getAllIcons: () => Object.keys(MyIcons),
+ * };
+ */
+
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type IconColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'onSurface'
+  | 'surfaceVariant'
+  | 'onPrimary'
+  | 'onSecondary'
+  | 'textInverse';
+
+/**
+ * Icon Adapter Interface
+ * All icon library adapters must implement this interface
+ */
+export interface IIconAdapter {
+  /**
+   * Get the icon component for a given icon name
+   * @param name - Icon name (library-specific)
+   * @returns Icon component or null if not found
+   */
+  getIconComponent: (name: string) => any | null;
+
+  /**
+   * Convert semantic size to pixel size
+   * @param size - Semantic size (xs, sm, md, lg, xl, xxl)
+   * @param customSize - Optional custom pixel size
+   * @returns Pixel size
+   */
+  getIconSize: (size: IconSize, customSize?: number) => number;
+
+  /**
+   * Convert semantic color to hex color
+   * @param color - Semantic color name
+   * @param tokens - Design tokens for theme colors
+   * @param customColor - Optional custom hex color
+   * @returns Hex color string
+   */
+  getIconColor: (
+    color: IconColor,
+    tokens: DesignTokens,
+    customColor?: string
+  ) => string;
+
+  /**
+   * Get all available icon names for this library
+   * @returns Array of icon names
+   */
+  getAllIcons: () => string[];
+
+  /**
+   * Check if an icon exists in the library
+   * @param name - Icon name to check
+   * @returns True if icon exists
+   */
+  hasIcon: (name: string) => boolean;
+
+  /**
+   * Get default stroke width for outline icons
+   * @returns Stroke width number
+   */
+  getStrokeWidth?: () => number;
+}
+
+/**
+ * Icon Props - Universal props for Icon component
+ */
+export interface IconProps {
+  /**
+   * Icon name (library-specific)
+   */
+  name: string;
+
+  /**
+   * Icon size preset
+   */
+  size?: IconSize;
+
+  /**
+   * Custom pixel size (overrides size preset)
+   */
+  customSize?: number;
+
+  /**
+   * Semantic color
+   */
+  color?: IconColor;
+
+  /**
+   * Custom hex color (overrides semantic color)
+   */
+  customColor?: string;
+
+  /**
+   * Stroke width for outline icons
+   */
+  strokeWidth?: number;
+
+  /**
+   * Background circle for icon
+   */
+  withBackground?: boolean;
+
+  /**
+   * Background color
+   */
+  backgroundColor?: string;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID
+   */
+  testID?: string;
+
+  /**
+   * Custom styles
+   */
+  style?: any;
+}

package/src/domains/icons/index.ts

@@ -0,0 +1,109 @@
+/**
+ * Icons Domain - Centralized Icon System
+ *
+ * 🎯 SINGLE SOURCE OF TRUTH FOR ALL ICONS
+ *
+ * Universal icon library system with easy library switching.
+ * Change icon library = change one config file!
+ *
+ * @domain icons
+ * @enabled true (All apps)
+ *
+ * ARCHITECTURE:
+ * ```
+ * domains/icons/
+ * ├── domain/
+ * │   ├── config/
+ * │   │   └── IconLibraryConfig.ts    🔧 Change library here!
+ * │   └── interfaces/
+ * │       └── IIconAdapter.ts         Interface for adapters
+ * ├── infrastructure/
+ * │   └── adapters/
+ * │       ├── LucideAdapter.ts        Current: Lucide (1,639 icons)
+ * │       ├── MaterialAdapter.ts      Future: Material Icons
+ * │       └── FontAwesomeAdapter.ts   Future: Font Awesome
+ * └── presentation/
+ *     └── components/
+ *         └── Icon.tsx                Universal Icon component
+ * ```
+ *
+ * USAGE:
+ * ```typescript
+ * import { Icon } from '@domains/icons';
+ *
+ * // Basic usage
+ * <Icon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <Icon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <Icon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ *
+ * 🔧 TO CHANGE ICON LIBRARY:
+ *
+ * Step 1: Update package.json
+ * ```json
+ * {
+ *   "dependencies": {
+ *     "new-icon-library": "^1.0.0"
+ *   }
+ * }
+ * ```
+ *
+ * Step 2: Change CURRENT_LIBRARY in domain/config/IconLibraryConfig.ts
+ * ```typescript
+ * export const CURRENT_LIBRARY: IconLibraryType = 'material'; // Changed!
+ * ```
+ *
+ * Step 3: Create adapter (if needed)
+ * ```typescript
+ * // infrastructure/adapters/MaterialAdapter.ts
+ * export const MaterialAdapter: IIconAdapter = {
+ *   getIconComponent: (name) => MaterialIcons[name],
+ *   // ... implement interface
+ * };
+ * ```
+ *
+ * Step 4: Done! All apps use new library automatically ✅
+ *
+ * CURRENT LIBRARY: Lucide (1,639 icons)
+ * @see https://lucide.dev/icons/
+ *
+ * DEPENDENCIES:
+ * - lucide-react-native: ^0.468.0 (Current library)
+ */
+
+// ============================================================================
+// PRESENTATION LAYER - Universal Icon Component
+// ============================================================================
+
+export { Icon } from './presentation/components/Icon';
+export type {
+  IconProps,
+  IconSize,
+  IconColor,
+  IconName,
+} from './presentation/components/Icon';
+
+// ============================================================================
+// DOMAIN LAYER - Configuration & Interfaces
+// ============================================================================
+
+export {
+  CURRENT_LIBRARY,
+  ICON_LIBRARY_CONFIG,
+  getCurrentLibrary,
+  isLucideLibrary,
+} from './domain/config/IconLibraryConfig';
+export type { IconLibraryType } from './domain/config/IconLibraryConfig';
+
+export type { IIconAdapter } from './domain/interfaces/IIconAdapter';
+
+// ============================================================================
+// INFRASTRUCTURE LAYER - Adapters
+// ============================================================================
+
+export { LucideAdapter } from './infrastructure/adapters/LucideAdapter';
+export type { LucideIconName } from './infrastructure/adapters/LucideAdapter';

package/src/domains/icons/infrastructure/adapters/LucideAdapter.ts

@@ -0,0 +1,100 @@
+/**
+ * Lucide Icon Library Adapter
+ *
+ * Adapter for lucide-react-native library (1,639 icons).
+ * Implements IIconAdapter interface for seamless library switching.
+ *
+ * @library lucide-react-native
+ * @version ^0.468.0
+ * @icons 1,639
+ * @type outline
+ *
+ * @see https://lucide.dev/icons/
+ */
+
+import { icons } from 'lucide-react-native';
+import type { IIconAdapter, IconSize, IconColor } from '../../domain/interfaces/IIconAdapter';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Size mapping: Semantic → Pixels
+ */
+const SIZE_MAP: Record<IconSize, number> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 32,
+  xxl: 40,
+};
+
+/**
+ * Lucide Adapter Implementation
+ */
+export const LucideAdapter: IIconAdapter = {
+  /**
+   * Get Lucide icon component by name
+   */
+  getIconComponent: (name: string) => {
+    const IconComponent = icons[name as keyof typeof icons];
+    if (!IconComponent) {
+      console.warn(`[LucideAdapter] Icon "${name}" not found in Lucide library`);
+      return null;
+    }
+    return IconComponent;
+  },
+
+  /**
+   * Get icon size in pixels
+   */
+  getIconSize: (size: IconSize, customSize?: number) => {
+    return customSize || SIZE_MAP[size];
+  },
+
+  /**
+   * Get icon color from theme
+   */
+  getIconColor: (color: IconColor, tokens: DesignTokens, customColor?: string) => {
+    if (customColor) return customColor;
+
+    const colorMap: Record<IconColor, string> = {
+      primary: tokens.colors.primary,
+      secondary: tokens.colors.secondary,
+      success: tokens.colors.success,
+      warning: tokens.colors.warning,
+      error: tokens.colors.error,
+      info: tokens.colors.info,
+      onSurface: tokens.colors.onSurface,
+      surfaceVariant: tokens.colors.surfaceVariant,
+      onPrimary: tokens.colors.onPrimary,
+      onSecondary: tokens.colors.onSecondary,
+      textInverse: tokens.colors.textInverse,
+    };
+
+    return colorMap[color];
+  },
+
+  /**
+   * Get all available Lucide icon names
+   */
+  getAllIcons: () => {
+    return Object.keys(icons);
+  },
+
+  /**
+   * Check if icon exists in Lucide library
+   */
+  hasIcon: (name: string) => {
+    return name in icons;
+  },
+
+  /**
+   * Default stroke width for Lucide outline icons
+   */
+  getStrokeWidth: () => 2,
+};
+
+/**
+ * Lucide icon names type (for TypeScript autocomplete)
+ */
+export type LucideIconName = keyof typeof icons;