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

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

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

@@ -0,0 +1,132 @@
+/**
+ * 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 } 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, customSize);
+
+  // Get icon color from theme
+  const iconColor = adapter.getIconColor(color, 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

@@ -0,0 +1,141 @@
+/**
+ * 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,
+  };
+};

package/src/index.ts

@@ -351,3 +351,15 @@ export {
 export {
   useDesignSystemTheme,
 } from './infrastructure/theme/globalThemeStore';
+
+// =============================================================================
+// ICONS DOMAIN - Universal Icon System
+// =============================================================================
+
+export {
+  Icon,
+  type IconProps,
+  type IconSize,
+  type IconColor,
+  type IconName,
+} from './domains/icons/presentation/components/Icon';