@umituz/react-native-design-system 1.5.0 → 1.7.1

package/src/domains/icons/index.ts

@@ -1,109 +0,0 @@
-/**
- * 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

@@ -1,100 +0,0 @@
-/**
- * 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 '../../../../presentation/tokens/core/TokenFactory';
-
-/**
- * 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;

package/src/domains/icons/infrastructure/registries/ExpoIconRegistry.ts

@@ -1,191 +0,0 @@
-/**
- * Icons Domain - Expo Vector Icons Registry
- *
- * Registry for @expo/vector-icons (Material, FontAwesome, Ionicons).
- * Provides metadata and search capabilities for 1000+ icons.
- *
- * @domain icons
- * @layer infrastructure
- */
-
-import type { IIconRegistry, IconMetadata } from '@domains/icons/domain/entities/Icon';
-import { IconLibrary, IconCategory } from '@domains/icons/domain/entities/Icon';
-
-/**
- * Expo vector icons registry
- * Maps common Material Design, FontAwesome, and Ionicons
- */
-export class ExpoIconRegistry implements IIconRegistry {
-  private icons: IconMetadata[] = [
-    // Navigation icons (Material Design)
-    {
-      name: 'home',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.NAVIGATION,
-      tags: ['house', 'main', 'start'],
-      searchTerms: ['home', 'house', 'main', 'dashboard'],
-    },
-    {
-      name: 'arrow-back',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.NAVIGATION,
-      tags: ['back', 'previous', 'return'],
-      searchTerms: ['arrow', 'back', 'previous', 'navigate'],
-    },
-    {
-      name: 'menu',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.NAVIGATION,
-      tags: ['hamburger', 'drawer', 'navigation'],
-      searchTerms: ['menu', 'hamburger', 'navigation', 'drawer'],
-    },
-    {
-      name: 'search',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['find', 'lookup', 'query'],
-      searchTerms: ['search', 'find', 'lookup', 'magnify'],
-    },
-
-    // Action icons (Material Design)
-    {
-      name: 'add',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['plus', 'create', 'new'],
-      searchTerms: ['add', 'plus', 'create', 'new'],
-    },
-    {
-      name: 'delete',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['remove', 'trash', 'bin'],
-      searchTerms: ['delete', 'remove', 'trash', 'garbage'],
-    },
-    {
-      name: 'edit',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['pencil', 'modify', 'update'],
-      searchTerms: ['edit', 'pencil', 'modify', 'write'],
-    },
-    {
-      name: 'settings',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['gear', 'preferences', 'config'],
-      searchTerms: ['settings', 'gear', 'preferences', 'options'],
-    },
-    {
-      name: 'favorite',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.ACTION,
-      tags: ['heart', 'like', 'love'],
-      searchTerms: ['favorite', 'heart', 'like', 'love'],
-    },
-
-    // Social icons (FontAwesome)
-    {
-      name: 'facebook',
-      library: IconLibrary.FONTAWESOME,
-      category: IconCategory.SOCIAL,
-      tags: ['fb', 'social', 'network'],
-      searchTerms: ['facebook', 'fb', 'social', 'meta'],
-    },
-    {
-      name: 'twitter',
-      library: IconLibrary.FONTAWESOME,
-      category: IconCategory.SOCIAL,
-      tags: ['x', 'social', 'tweet'],
-      searchTerms: ['twitter', 'x', 'social', 'tweet'],
-    },
-    {
-      name: 'instagram',
-      library: IconLibrary.FONTAWESOME,
-      category: IconCategory.SOCIAL,
-      tags: ['ig', 'social', 'photo'],
-      searchTerms: ['instagram', 'ig', 'social', 'photo'],
-    },
-
-    // Communication icons (Ionicons)
-    {
-      name: 'mail',
-      library: IconLibrary.IONICONS,
-      category: IconCategory.COMMUNICATION,
-      tags: ['email', 'message', 'envelope'],
-      searchTerms: ['mail', 'email', 'message', 'contact'],
-    },
-    {
-      name: 'call',
-      library: IconLibrary.IONICONS,
-      category: IconCategory.COMMUNICATION,
-      tags: ['phone', 'telephone', 'dial'],
-      searchTerms: ['call', 'phone', 'telephone', 'dial'],
-    },
-    {
-      name: 'notifications',
-      library: IconLibrary.IONICONS,
-      category: IconCategory.COMMUNICATION,
-      tags: ['bell', 'alert', 'reminder'],
-      searchTerms: ['notifications', 'bell', 'alert', 'reminder'],
-    },
-
-    // Media icons (Material Design)
-    {
-      name: 'camera',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.MEDIA,
-      tags: ['photo', 'picture', 'snapshot'],
-      searchTerms: ['camera', 'photo', 'picture', 'image'],
-    },
-    {
-      name: 'image',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.MEDIA,
-      tags: ['photo', 'picture', 'gallery'],
-      searchTerms: ['image', 'photo', 'picture', 'gallery'],
-    },
-    {
-      name: 'videocam',
-      library: IconLibrary.MATERIAL,
-      category: IconCategory.MEDIA,
-      tags: ['video', 'camera', 'record'],
-      searchTerms: ['video', 'camera', 'record', 'film'],
-    },
-  ];
-
-  getAllIcons(): IconMetadata[] {
-    return this.icons;
-  }
-
-  getIconsByCategory(category: IconCategory): IconMetadata[] {
-    if (category === IconCategory.ALL) {
-      return this.icons;
-    }
-    return this.icons.filter(icon => icon.category === category);
-  }
-
-  searchIcons(query: string): IconMetadata[] {
-    if (!query.trim()) {
-      return this.icons;
-    }
-
-    const normalizedQuery = query.toLowerCase().replace(/[^a-z0-9]/g, '');
-
-    return this.icons.filter(icon => {
-      const normalizedName = icon.name.toLowerCase().replace(/[^a-z0-9]/g, '');
-      const normalizedTags = icon.tags.map(tag => tag.toLowerCase().replace(/[^a-z0-9]/g, ''));
-      const normalizedTerms = icon.searchTerms.map(term => term.toLowerCase().replace(/[^a-z0-9]/g, ''));
-
-      return (
-        normalizedName.includes(normalizedQuery) ||
-        normalizedTags.some(tag => tag.includes(normalizedQuery)) ||
-        normalizedTerms.some(term => term.includes(normalizedQuery))
-      );
-    });
-  }
-
-  getIconMetadata(name: string): IconMetadata | null {
-    return this.icons.find(icon => icon.name === name) || null;
-  }
-}

package/src/domains/icons/presentation/components/Icon.tsx

@@ -1,132 +0,0 @@
-/**
- * Universal Icon Component
- *
- * 🎯 SINGLE ICON COMPONENT FOR ALL APPS
- *
- * Automatically uses the icon library configured in IconLibraryConfig.
- * Change library = change config, no code changes needed!
- *
- * @example
- * ```tsx
- * 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:
- * 1. Update CURRENT_LIBRARY in domain/config/IconLibraryConfig.ts
- * 2. Done! All apps use new library automatically
- */
-
-import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../../presentation/hooks/useAppDesignTokens';
-import { CURRENT_LIBRARY } from '../../domain/config/IconLibraryConfig';
-import { LucideAdapter } from '../../infrastructure/adapters/LucideAdapter';
-import type { IconProps, IconSize, IconColor } from '../../domain/interfaces/IIconAdapter';
-
-/**
- * Get adapter based on current library configuration
- */
-const getAdapter = () => {
-  switch (CURRENT_LIBRARY) {
-    case 'lucide':
-      return LucideAdapter;
-    // Future: Add more adapters here
-    // case 'material':
-    //   return MaterialAdapter;
-    // case 'fontawesome':
-    //   return FontAwesomeAdapter;
-    default:
-      return LucideAdapter;
-  }
-};
-
-/**
- * Universal Icon Component
- */
-export const Icon: React.FC<IconProps> = ({
-  name,
-  size = 'md',
-  customSize,
-  color = 'onSurface',
-  customColor,
-  strokeWidth,
-  withBackground = false,
-  backgroundColor,
-  accessibilityLabel,
-  testID,
-  style,
-}) => {
-  const tokens = useAppDesignTokens();
-  const adapter = getAdapter();
-
-  // Get icon component from adapter
-  const IconComponent = adapter.getIconComponent(name);
-
-  if (!IconComponent) {
-    return null;
-  }
-
-  // Calculate icon size
-  const iconSize = adapter.getIconSize(size as IconSize, customSize);
-
-  // Get icon color from theme
-  const iconColor = adapter.getIconColor(color as IconColor, tokens, customColor);
-
-  // Get stroke width (for outline icons)
-  const iconStrokeWidth = strokeWidth || adapter.getStrokeWidth?.() || 2;
-
-  // Container size (slightly larger than icon)
-  const containerSize = iconSize + 8;
-
-  const containerStyles: StyleProp<ViewStyle> = [
-    withBackground && {
-      width: containerSize,
-      height: containerSize,
-      borderRadius: containerSize / 2,
-      backgroundColor: backgroundColor || tokens.colors.surfaceVariant,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    style,
-  ];
-
-  const IconElement = (
-    <IconComponent
-      size={iconSize}
-      color={iconColor}
-      strokeWidth={iconStrokeWidth}
-      accessibilityLabel={accessibilityLabel || `${name} icon`}
-      testID={testID}
-    />
-  );
-
-  if (withBackground) {
-    return (
-      <View style={containerStyles} testID={`${testID}-container`}>
-        {IconElement}
-      </View>
-    );
-  }
-
-  return IconElement;
-};
-
-/**
- * Export icon types for convenience
- */
-export type { IconProps } from '../../domain/interfaces/IIconAdapter';
-export { type IconSize, type IconColor } from '../../domain/interfaces/IIconAdapter';
-
-/**
- * Export current library's icon names for TypeScript autocomplete
- */
-export type { LucideIconName as IconName } from '../../infrastructure/adapters/LucideAdapter';

package/src/domains/icons/presentation/hooks/useIconLibrary.ts

@@ -1,141 +0,0 @@
-/**
- * Icons Domain - useIconLibrary Hook
- *
- * React hook for accessing icon libraries (Lucide + Expo vector icons).
- * Provides search, filter, and metadata access for all available icons.
- *
- * @domain icons
- * @layer presentation
- */
-
-import { useMemo, useState, useCallback } from 'react';
-import type { IconMetadata } from '@domains/icons/domain/entities/Icon';
-import { IconLibrary, IconCategory, IconUtils, ICON_CONSTANTS } from '@domains/icons/domain/entities/Icon';
-import { ExpoIconRegistry } from '@domains/icons/infrastructure/registries/ExpoIconRegistry';
-
-/**
- * Hook for icon library access and search
- *
- * @example
- * const { icons, searchIcons, filterByCategory } = useIconLibrary();
- *
- * // Search icons
- * const results = searchIcons('home');
- *
- * // Filter by category
- * const navIcons = filterByCategory(IconCategory.NAVIGATION);
- */
-export const useIconLibrary = (defaultLibrary: IconLibrary = ICON_CONSTANTS.DEFAULT_LIBRARY) => {
-  const [selectedLibrary, setSelectedLibrary] = useState<IconLibrary>(defaultLibrary);
-  const [selectedCategory, setSelectedCategory] = useState<IconCategory>(IconCategory.ALL);
-
-  // Initialize registry
-  const registry = useMemo(() => new ExpoIconRegistry(), []);
-
-  /**
-   * Get all icons from the selected library
-   */
-  const icons = useMemo(() => {
-    const allIcons = registry.getAllIcons();
-    return selectedLibrary === IconLibrary.LUCIDE
-      ? []  // Lucide icons are in design-system/AtomicIcon
-      : allIcons.filter(icon => icon.library === selectedLibrary);
-  }, [registry, selectedLibrary]);
-
-  /**
-   * Get icons filtered by category
-   */
-  const iconsByCategory = useMemo(() => {
-    return IconUtils.filterByCategory(icons, selectedCategory);
-  }, [icons, selectedCategory]);
-
-  /**
-   * Search icons by query
-   */
-  const searchIcons = useCallback(
-    (query: string): IconMetadata[] => {
-      if (!query.trim()) {
-        return iconsByCategory;
-      }
-
-      const results = registry.searchIcons(query);
-      const filteredResults = selectedLibrary === IconLibrary.LUCIDE
-        ? results
-        : results.filter(icon => icon.library === selectedLibrary);
-
-      return IconUtils.filterByCategory(filteredResults, selectedCategory)
-        .slice(0, ICON_CONSTANTS.MAX_SEARCH_RESULTS);
-    },
-    [registry, selectedLibrary, selectedCategory, iconsByCategory]
-  );
-
-  /**
-   * Filter icons by category
-   */
-  const filterByCategory = useCallback(
-    (category: IconCategory): IconMetadata[] => {
-      return IconUtils.filterByCategory(icons, category);
-    },
-    [icons]
-  );
-
-  /**
-   * Get icon metadata by name
-   */
-  const getIconMetadata = useCallback(
-    (name: string): IconMetadata | null => {
-      return registry.getIconMetadata(name);
-    },
-    [registry]
-  );
-
-  /**
-   * Get all available categories
-   */
-  const availableCategories = useMemo(() => {
-    return Object.values(IconCategory);
-  }, []);
-
-  /**
-   * Get all available libraries
-   */
-  const availableLibraries = useMemo(() => {
-    return Object.values(IconLibrary);
-  }, []);
-
-  /**
-   * Switch library
-   */
-  const switchLibrary = useCallback((library: IconLibrary) => {
-    setSelectedLibrary(library);
-  }, []);
-
-  /**
-   * Switch category
-   */
-  const switchCategory = useCallback((category: IconCategory) => {
-    setSelectedCategory(category);
-  }, []);
-
-  return {
-    // Current state
-    selectedLibrary,
-    selectedCategory,
-    icons: iconsByCategory,
-
-    // Search & filter
-    searchIcons,
-    filterByCategory,
-    getIconMetadata,
-
-    // Library & category management
-    switchLibrary,
-    switchCategory,
-    availableCategories,
-    availableLibraries,
-
-    // Constants
-    IconLibrary,
-    IconCategory,
-  };
-};