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

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,
-  };
-};

package/src/infrastructure/theme/globalThemeStore.ts

@@ -1,51 +0,0 @@
-/**
- * Global Theme Store for Design System
- *
- * Minimal Zustand store for theme state management.
- * Apps can sync their theme state with this global store.
- *
- * WHY THIS EXISTS:
- * - ScreenLayout needs to know current theme mode
- * - Without prop drilling or Context API
- * - Single source of truth for design system components
- * - Apps control theme, design system reacts
- *
- * USAGE IN APP:
- * ```typescript
- * import { useDesignSystemTheme } from '@umituz/react-native-design-system';
- * import { useTheme } from '@domains/theme';
- *
- * // Sync app theme with design system
- * const { themeMode } = useTheme();
- * const { setThemeMode } = useDesignSystemTheme();
- *
- * useEffect(() => {
- *   setThemeMode(themeMode);
- * }, [themeMode]);
- * ```
- */
-
-import { create } from 'zustand';
-import type { ThemeMode } from '../../presentation/tokens/core/ColorPalette';
-
-interface GlobalThemeStore {
-  /** Current theme mode */
-  themeMode: ThemeMode;
-
-  /** Update theme mode (called by app when theme changes) */
-  setThemeMode: (mode: ThemeMode) => void;
-}
-
-/**
- * Global theme store for design system components
- *
- * This is a MINIMAL store - app has the real theme logic.
- * Design system just mirrors the current theme for its components.
- */
-export const useDesignSystemTheme = create<GlobalThemeStore>((set) => ({
-  themeMode: 'light',
-  setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
-}));
-
-// Re-export ThemeMode for backward compatibility
-export type { ThemeMode };

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,40 +0,0 @@
-/**
- * useAppDesignTokens Hook - Theme-Aware Design Tokens
- *
- * ✅ Automatically reads theme from global store
- * ✅ No parameters needed - fully automatic!
- * ✅ Returns tokens for current theme (light/dark)
- * ✅ Single source of truth
- *
- * @example Usage (fully automatic theme-aware)
- * ```typescript
- * import { useAppDesignTokens } from '@umituz/react-native-design-system';
- *
- * const MyComponent = () => {
- *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
- *   return (
- *     <View style={{
- *       backgroundColor: tokens.colors.primary,
- *       padding: tokens.spacing.md
- *     }}>
- *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
- *     </View>
- *   );
- * };
- * ```
- *
- * How it works:
- * - Reads themeMode from global store (useDesignSystemTheme)
- * - App's theme store syncs to global store automatically
- * - All components get correct tokens without prop drilling
- * - Change theme once, everything updates!
- */
-
-import { useMemo } from 'react';
-import { createDesignTokens, type DesignTokens } from '../tokens/core/TokenFactory';
-import { useDesignSystemTheme } from '../../infrastructure/theme/globalThemeStore';
-
-export const useAppDesignTokens = (): DesignTokens => {
-  const { themeMode } = useDesignSystemTheme();
-  return useMemo(() => createDesignTokens(themeMode), [themeMode]);
-};

package/src/presentation/tokens/AppDesignTokens.ts

@@ -1,55 +0,0 @@
-/**
- * DESIGN TOKENS - PUBLIC API
- *
- * ✅ CLEAN BARREL EXPORT - Single source of truth
- * ✅ ZERO DUPLICATION - All tokens from TokenFactory
- * ✅ TYPE-SAFE - Full TypeScript support
- * ✅ FACTORY-FIRST - Benefits all 100+ generated apps
- *
- * @module AppDesignTokens
- */
-
-// =============================================================================
-// CORE EXPORTS (from TokenFactory)
-// =============================================================================
-
-export {
-  createDesignTokens,
-  STATIC_DESIGN_TOKENS,
-  STATIC_TOKENS,
-  withAlpha,
-  type DesignTokens,
-  type ThemeMode,
-  type ColorPalette,
-} from './core/TokenFactory';
-
-// =============================================================================
-// BASE TOKEN EXPORTS
-// =============================================================================
-
-export {
-  BASE_TOKENS,
-  spacing,
-  typography,
-  borders,
-  iconSizes,
-  opacity,
-  avatarSizes,
-  type Spacing,
-  type Typography,
-  type Borders,
-  type IconSizes,
-  type Opacity,
-  type AvatarSizes,
-  type BaseTokens,
-} from './core/BaseTokens';
-
-// =============================================================================
-// COLOR PALETTE EXPORTS
-// =============================================================================
-
-export {
-  lightColors,
-  darkColors,
-  getColorPalette,
-} from './core/ColorPalette';