@umituz/react-native-design-system 2.11.2 → 2.11.4

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -8,71 +8,29 @@ import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import { SplashScreen } from '../../../molecules/splash';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
-import { IconProvider, type IconRenderer } from '../../../atoms/IconRegistry';
+import { useIconStore, type IconRenderer, type IconNames } from '../../../atoms/icon';
 
 
 interface DesignSystemProviderProps {
-  /** App content */
   children: ReactNode;
-  /**
-   * Custom theme colors to override defaults
-   * Apps can override ANY color key from the palette
-   * @example
-   * customColors={{
-   *   primary: '#FF6B6B',
-   *   onPrimary: '#FFFFFF',
-   *   backgroundPrimary: '#FFFFFF',
-   *   textPrimary: '#1A1A1A',
-   * }}
-   */
   customColors?: CustomThemeColors;
-  /**
-   * Initial theme mode for the app
-   * Apps control whether they start in light or dark mode
-   * @default 'light'
-   */
   initialThemeMode?: ThemeMode;
-  /** Custom fonts to load (name -> source map) */
   fonts?: Record<string, any>;
-  /** Show loading indicator while initializing (default: true) */
   showLoadingIndicator?: boolean;
-  /** Splash screen configuration (used when showLoadingIndicator is true) */
   splashConfig?: Pick<SplashScreenProps, 'appName' | 'tagline' | 'icon' | 'colors'>;
-  /** Custom loading component (overrides splash screen) */
   loadingComponent?: ReactNode;
-  /** Callback when initialization completes */
   onInitialized?: () => void;
-  /** Callback when initialization fails */
   onError?: (error: unknown) => void;
-  /**
-   * Custom icon renderer function
-   * Allows apps to use their own icon library
-   * @example
-   * iconRenderer={({ name, size, color }) => (
-   *   <LucideIcons name={name} size={size} color={color} />
-   * )}
-   */
-  iconRenderer?: IconRenderer;
+  /** Icon renderer - REQUIRED */
+  iconRenderer: IconRenderer;
+  /** Icon names mapping - REQUIRED */
+  iconNames: IconNames;
 }
 
-/**
- * DesignSystemProvider
- *
- * Main provider for the design system. Wraps your app and provides:
- * - Theme (colors, spacing, typography)
- * - Custom icon rendering
- * - Safe area handling
- * - Gesture handling
- *
- * ARCHITECTURE (based on Shopify Restyle, React Native Paper, Tamagui):
- * - Apps provide customColors to override default palette
- * - Apps set initialThemeMode to control light/dark mode
- * - All design system components use these values via useAppDesignTokens
- */
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   children,
   customColors,
-  initialThemeMode = 'light', // Default to light mode (most common)
+  initialThemeMode = 'light',
   fonts,
   showLoadingIndicator = true,
   splashConfig,
@@ -80,75 +38,54 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   onInitialized,
   onError,
   iconRenderer,
-}: DesignSystemProviderProps) => {
+  iconNames,
+}) => {
   const [isInitialized, setIsInitialized] = useState(false);
-
-  // Load fonts if provided
   const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
 
   const initialize = useThemeStore((state) => state.initialize);
   const setThemeMode = useThemeStore((state) => state.setThemeMode);
   const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
+  const setIconConfig = useIconStore((state) => state.setConfig);
 
   useEffect(() => {
-    // WARN: customColors is required for proper theming
-    if (__DEV__ && !customColors) {
-      console.warn(
-        '[DesignSystem] ⚠️ customColors is REQUIRED!\n' +
-        'Your app must provide theme colors to DesignSystemProvider.\n' +
-        'Example:\n' +
-        '<DesignSystemProvider\n' +
-        '  customColors={{\n' +
-        '    primary: "#FF6B6B",\n' +
-        '    onPrimary: "#FFFFFF",\n' +
-        '    backgroundPrimary: "#FFFFFF",\n' +
-        '    textPrimary: "#1A1A1A",\n' +
-        '  }}\n' +
-        '  initialThemeMode="light"\n' +
-        '>'
-      );
+    // Set icon config (required)
+    if (iconRenderer && iconNames) {
+      setIconConfig(iconNames, iconRenderer);
     }
 
-    // Apply custom colors if provided
     if (customColors) {
       setCustomColors(customColors);
     }
 
-    // Set initial theme mode from app
     setGlobalThemeMode(initialThemeMode);
 
-    // Initialize theme store with the initial theme mode
     initialize()
       .then(async () => {
-        // After initialization, set the theme mode from app config
         await setThemeMode(initialThemeMode);
         setIsInitialized(true);
       })
       .catch((error) => {
-        setIsInitialized(true); // Still render app even on error
+        setIsInitialized(true);
         onError?.(error);
       });
-  }, [initialize, customColors, initialThemeMode, setCustomColors, setGlobalThemeMode, setThemeMode, onError]);
+  }, [initialize, customColors, iconNames, iconRenderer, initialThemeMode, setCustomColors, setGlobalThemeMode, setThemeMode, setIconConfig, onError]);
 
-  // Handle initialization completion when both theme and fonts are ready
   useEffect(() => {
     if (isInitialized && fontsLoaded) {
       onInitialized?.();
     }
   }, [isInitialized, fontsLoaded, onInitialized]);
 
-  // Handle font errors
   useEffect(() => {
     if (fontError) {
       onError?.(fontError);
     }
   }, [fontError, onError]);
 
-  // Determine if we should show loading state
   const isLoading = showLoadingIndicator && (!isInitialized || !fontsLoaded);
 
-  // Determine content to render based on loading state
   let content: ReactNode;
 
   if (isLoading) {
@@ -167,17 +104,10 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     content = children;
   }
 
-  // Wrap with IconProvider if custom renderer provided
-  const wrappedContent = iconRenderer ? (
-    <IconProvider renderIcon={iconRenderer}>{content}</IconProvider>
-  ) : (
-    content
-  );
-
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        {wrappedContent}
+        {content}
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );

package/src/atoms/IconRegistry.tsx

@@ -1,102 +0,0 @@
-/**
- * IconRegistry - Customizable Icon Rendering
- *
- * Allows apps to inject their own icon renderer instead of using
- * the default Ionicons. This enables design system adoption without
- * forcing a specific icon library.
- *
- * @example
- * // App provides custom renderer
- * import { MaterialIcons } from '@expo/vector-icons';
- *
- * const myRenderer = ({ name, size, color }) => (
- *   <MaterialIcons name={name} size={size} color={color} />
- * );
- *
- * <DesignSystemProvider iconRenderer={myRenderer}>
- *   <App />
- * </DesignSystemProvider>
- */
-
-import React, { createContext, useContext, ReactNode } from "react";
-import type { StyleProp, ViewStyle } from "react-native";
-
-/**
- * Props passed to the icon renderer function
- * These are generic and not tied to any specific icon library
- */
-export interface IconRenderProps {
-  /** Icon name - app interprets this based on their icon library */
-  name: string;
-  /** Size in pixels */
-  size: number;
-  /** Color (hex, rgba, named color, etc.) */
-  color: string;
-  /** Optional style */
-  style?: StyleProp<ViewStyle>;
-  /** Test ID for testing */
-  testID?: string;
-  /** Accessibility label */
-  accessibilityLabel?: string;
-}
-
-/**
- * Icon renderer function type
- * Apps provide this function to render icons with their preferred library
- */
-export type IconRenderer = (props: IconRenderProps) => ReactNode;
-
-/**
- * Internal registry store
- */
-interface IconRegistryValue {
-  renderIcon: IconRenderer;
-}
-
-const IconRegistryStore = createContext<IconRegistryValue | null>(null);
-
-/**
- * Icon provider props
- */
-interface IconProviderProps {
-  /** Icon renderer function */
-  renderIcon: IconRenderer;
-  /** Children */
-  children: ReactNode;
-}
-
-/**
- * IconProvider - Provides custom icon renderer to the component tree
- *
- * @example
- * <IconProvider renderIcon={myCustomRenderer}>
- *   <App />
- * </IconProvider>
- */
-export const IconProvider: React.FC<IconProviderProps> = ({
-  renderIcon,
-  children,
-}) => {
-  return (
-    <IconRegistryStore.Provider value={{ renderIcon }}>
-      {children}
-    </IconRegistryStore.Provider>
-  );
-};
-
-/**
- * Hook to access the icon renderer
- * Returns null if no custom renderer is provided (fallback to Ionicons)
- */
-export const useIconRenderer = (): IconRenderer | null => {
-  const registry = useContext(IconRegistryStore);
-  return registry?.renderIcon ?? null;
-};
-
-/**
- * Hook to check if a custom icon renderer is available
- */
-export const useHasCustomIconRenderer = (): boolean => {
-  const registry = useContext(IconRegistryStore);
-  return registry !== null;
-};