@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/themes/ThemeProvider.esm.js

@@ -1,232 +1,200 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
-import { ThemeContext, ThemeContextType, ThemeProviderProps } from './ThemeContext';
-import { MultiThemeConfig, CompleteThemeConfig } from './types';
+import { ThemeContext } from './ThemeContext';
 import { themeInheritanceManager, toCompleteThemeConfig } from './inheritance';
 import { defaultThemes } from './base-themes';
 import { createThemePersistence } from './themePersistence';
 import { themeCSSUpdater } from './themeCSSUpdater';
 import { fontLoader } from './fontLoader';
 import { ColorManager } from './colorManager';
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  defaultTheme = 'stan-design',
-  themes = defaultThemes,
-  persistTheme = true,
-  storageKey = 'stan-design-theme'
-}) => {
-  // State management
-  const [currentTheme, setCurrentThemeState] = useState<string>(defaultTheme);
-  const [currentThemeConfig, setCurrentThemeConfig] = useState<CompleteThemeConfig | null>(null);
-  const [availableThemes, setAvailableThemes] = useState<string[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Enhance theme colors using ColorManager
-  const enhanceThemeColors = useCallback((themeConfig: CompleteThemeConfig): CompleteThemeConfig => {
-    try {
-      const enhanced = { ...themeConfig };
-      
-      // Enhance primary colors if they exist
-      if (enhanced.colors?.primary?.[500]) {
-        const baseColor = enhanced.colors.primary[500];
-        
-        // Generate additional color variations if they don't exist
-        if (!enhanced.colors.primary.light || !enhanced.colors.primary.dark || !enhanced.colors.primary.contrast) {
-          const enhancedScale = ColorManager.generateColorScale({
-            baseColor,
-            generateShades: true,
-            generateContrast: true
-          });
-          
-          enhanced.colors.primary = {
-            ...enhanced.colors.primary,
-            light: enhancedScale.light,
-            dark: enhancedScale.dark,
-            contrast: enhancedScale.contrast
-          };
-        }
-      }
-
-      // Enhance semantic colors if they don't exist
-      if (enhanced.colors?.primary?.[500] && !enhanced.colors.semantic?.success) {
-        const semanticColors = ColorManager.generateSemanticColors(enhanced.colors.primary[500]);
-        enhanced.colors.semantic = {
-          ...enhanced.colors.semantic,
-          ...semanticColors
-        };
-      }
-
-      // Enhance neutral colors if they don't exist
-      if (!enhanced.colors?.neutral?.[500]) {
-        enhanced.colors.neutral = ColorManager.generateNeutralColors('#6b7280');
-      }
-
-      return enhanced;
-    } catch (err) {
-      console.warn('Failed to enhance theme colors:', err);
-      return themeConfig;
-    }
-  }, []);
-
-  // Initialize themes in the inheritance manager
-  useEffect(() => {
-    try {
-      // Register all provided themes
-      Object.entries(themes).forEach(([name, theme]) => {
+export const ThemeProvider = ({ children, defaultTheme = 'stan-design', themes = defaultThemes, persistTheme = true, storageKey = 'stan-design-theme' }) => {
+    // State management
+    const [currentTheme, setCurrentThemeState] = useState(defaultTheme);
+    const [currentThemeConfig, setCurrentThemeConfig] = useState(null);
+    const [availableThemes, setAvailableThemes] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Enhance theme colors using ColorManager
+    const enhanceThemeColors = useCallback((themeConfig) => {
         try {
-          themeInheritanceManager.registerTheme(name, theme);
-        } catch (err) {
-          console.warn(`Failed to register theme '${name}':`, err);
-        }
-      });
-      
-      // Set available themes
-      setAvailableThemes(Object.keys(themes));
-      
-      // Load persisted theme or use default
-      if (persistTheme) {
-        const persistence = createThemePersistence({ 
-          storageKey, 
-          defaultTheme,
-          enableSystemPreference: true 
-        });
-        const persistedTheme = persistence.getStoredTheme();
-        if (persistedTheme && themes[persistedTheme]) {
-          setCurrentThemeState(persistedTheme);
-        }
-      }
-    } catch (err) {
-      setError(`Failed to initialize themes: ${err instanceof Error ? err.message : 'Unknown error'}`);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [themes, persistTheme, storageKey, defaultTheme]);
-
-  // Update current theme config when theme changes
-  useEffect(() => {
-    try {
-      const themeConfig = themeInheritanceManager.getCompleteTheme(currentTheme);
-      
-      if (themeConfig) {
-        // Enhance theme colors using ColorManager
-        const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
-        setCurrentThemeConfig(enhancedThemeConfig);
-        
-        // Apply the enhanced theme to CSS variables and load fonts
-        themeCSSUpdater.applyTheme(enhancedThemeConfig);
-        fontLoader.loadThemeFonts(enhancedThemeConfig.fonts).catch(err => {
-          console.warn(`Failed to load fonts for theme '${currentTheme}':`, err);
-        });
-      }
-      
-      setError(null);
-    } catch (err) {
-      const errorMessage = `Failed to load theme '${currentTheme}': ${err instanceof Error ? err.message : 'Unknown error'}`;
-      setError(errorMessage);
-      setCurrentThemeConfig(null);
-      console.error(errorMessage, err);
-    }
-  }, [currentTheme, enhanceThemeColors]);
-
-  // Theme switching function
-  const setTheme = useCallback(async (themeName: string) => {
-    if (!themes[themeName]) {
-      setError(`Theme '${themeName}' not found`);
-      return;
-    }
-    
-    try {
-      // Get the complete theme configuration
-      const themeConfig = themeInheritanceManager.getCompleteTheme(themeName);
-      
-      if (!themeConfig) {
-        throw new Error(`Theme configuration not found for '${themeName}'`);
-      }
-      
-      // Enhance theme colors using ColorManager
-      const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
-      
-      // Apply enhanced CSS variables to the document
-      themeCSSUpdater.applyTheme(enhancedThemeConfig);
-      
-      // Load fonts for the theme
-      await fontLoader.loadThemeFonts(enhancedThemeConfig.fonts);
-      
-      // Update state
-      setCurrentThemeState(themeName);
-      setCurrentThemeConfig(enhancedThemeConfig);
-      
-      // Persist theme preference
-      if (persistTheme) {
-        const persistence = createThemePersistence({ storageKey });
-        persistence.setStoredTheme(themeName);
-      }
-      
-      setError(null);
-    } catch (err) {
-      const errorMessage = `Failed to switch to theme '${themeName}': ${err instanceof Error ? err.message : 'Unknown error'}`;
-      setError(errorMessage);
-      console.error(errorMessage, err);
-    }
-  }, [themes, persistTheme, storageKey]);
-
-  // Add new theme
-  const addTheme = useCallback((name: string, theme: MultiThemeConfig) => {
-    try {
-      themeInheritanceManager.registerTheme(name, theme);
-      setAvailableThemes(prev => [...prev, name]);
-      setError(null);
-    } catch (err) {
-      setError(`Failed to add theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
-    }
-  }, []);
-
-  // Remove theme
-  const removeTheme = useCallback((name: string) => {
-    try {
-      // Don't allow removing the current theme
-      if (name === currentTheme) {
-        setError('Cannot remove the currently active theme');
-        return;
-      }
-      
-      // Remove from inheritance manager (we'll need to add this method)
-      // themeInheritanceManager.removeTheme(name);
-      
-      setAvailableThemes(prev => prev.filter(t => t !== name));
-      setError(null);
-    } catch (err) {
-      setError(`Failed to remove theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
-    }
-  }, [currentTheme]);
-
-  // Get theme by name
-  const getTheme = useCallback((name: string): CompleteThemeConfig | null => {
-    try {
-      return themeInheritanceManager.getCompleteTheme(name);
-    } catch (err) {
-      setError(`Failed to get theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
-      return null;
-    }
-  }, []);
-
-  // Context value
-  const contextValue: ThemeContextType = {
-    currentTheme,
-    currentThemeConfig,
-    availableThemes,
-    setTheme,
-    addTheme,
-    removeTheme,
-    getTheme,
-    isLoading,
-    error
-  };
-
-  return (
-    <ThemeContext.Provider value={contextValue}>
-      {children}
-    </ThemeContext.Provider>
-  );
+            const enhanced = { ...themeConfig };
+            // Enhance primary colors if they exist
+            if (enhanced.colors?.primary?.[500]) {
+                const baseColor = enhanced.colors.primary[500];
+                // Generate additional color variations if they don't exist
+                if (!enhanced.colors.primary.light || !enhanced.colors.primary.dark || !enhanced.colors.primary.contrast) {
+                    const enhancedScale = ColorManager.generateColorScale({
+                        baseColor,
+                        generateShades: true,
+                        generateContrast: true
+                    });
+                    enhanced.colors.primary = {
+                        ...enhanced.colors.primary,
+                        light: enhancedScale.light,
+                        dark: enhancedScale.dark,
+                        contrast: enhancedScale.contrast
+                    };
+                }
+            }
+            // Enhance semantic colors if they don't exist
+            if (enhanced.colors?.primary?.[500] && !enhanced.colors.semantic?.success) {
+                const semanticColors = ColorManager.generateSemanticColors(enhanced.colors.primary[500]);
+                enhanced.colors.semantic = {
+                    ...enhanced.colors.semantic,
+                    ...semanticColors
+                };
+            }
+            // Enhance neutral colors if they don't exist
+            if (!enhanced.colors?.neutral?.[500]) {
+                enhanced.colors.neutral = ColorManager.generateNeutralColors('#6b7280');
+            }
+            return enhanced;
+        }
+        catch (err) {
+            console.warn('Failed to enhance theme colors:', err);
+            return themeConfig;
+        }
+    }, []);
+    // Initialize themes in the inheritance manager
+    useEffect(() => {
+        try {
+            // Register all provided themes
+            Object.entries(themes).forEach(([name, theme]) => {
+                try {
+                    themeInheritanceManager.registerTheme(name, theme);
+                }
+                catch (err) {
+                    console.warn(`Failed to register theme '${name}':`, err);
+                }
+            });
+            // Set available themes
+            setAvailableThemes(Object.keys(themes));
+            // Load persisted theme or use default
+            if (persistTheme) {
+                const persistence = createThemePersistence({
+                    storageKey,
+                    defaultTheme,
+                    enableSystemPreference: true
+                });
+                const persistedTheme = persistence.getStoredTheme();
+                if (persistedTheme && themes[persistedTheme]) {
+                    setCurrentThemeState(persistedTheme);
+                }
+            }
+        }
+        catch (err) {
+            setError(`Failed to initialize themes: ${err instanceof Error ? err.message : 'Unknown error'}`);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [themes, persistTheme, storageKey, defaultTheme]);
+    // Update current theme config when theme changes
+    useEffect(() => {
+        try {
+            const themeConfig = themeInheritanceManager.getCompleteTheme(currentTheme);
+            if (themeConfig) {
+                // Enhance theme colors using ColorManager
+                const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
+                setCurrentThemeConfig(enhancedThemeConfig);
+                // Apply the enhanced theme to CSS variables and load fonts
+                themeCSSUpdater.applyTheme(enhancedThemeConfig);
+                fontLoader.loadThemeFonts(enhancedThemeConfig.fonts).catch(err => {
+                    console.warn(`Failed to load fonts for theme '${currentTheme}':`, err);
+                });
+            }
+            setError(null);
+        }
+        catch (err) {
+            const errorMessage = `Failed to load theme '${currentTheme}': ${err instanceof Error ? err.message : 'Unknown error'}`;
+            setError(errorMessage);
+            setCurrentThemeConfig(null);
+            console.error(errorMessage, err);
+        }
+    }, [currentTheme, enhanceThemeColors]);
+    // Theme switching function
+    const setTheme = useCallback(async (themeName) => {
+        if (!themes[themeName]) {
+            setError(`Theme '${themeName}' not found`);
+            return;
+        }
+        try {
+            // Get the complete theme configuration
+            const themeConfig = themeInheritanceManager.getCompleteTheme(themeName);
+            if (!themeConfig) {
+                throw new Error(`Theme configuration not found for '${themeName}'`);
+            }
+            // Enhance theme colors using ColorManager
+            const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
+            // Apply enhanced CSS variables to the document
+            themeCSSUpdater.applyTheme(enhancedThemeConfig);
+            // Load fonts for the theme
+            await fontLoader.loadThemeFonts(enhancedThemeConfig.fonts);
+            // Update state
+            setCurrentThemeState(themeName);
+            setCurrentThemeConfig(enhancedThemeConfig);
+            // Persist theme preference
+            if (persistTheme) {
+                const persistence = createThemePersistence({ storageKey });
+                persistence.setStoredTheme(themeName);
+            }
+            setError(null);
+        }
+        catch (err) {
+            const errorMessage = `Failed to switch to theme '${themeName}': ${err instanceof Error ? err.message : 'Unknown error'}`;
+            setError(errorMessage);
+            console.error(errorMessage, err);
+        }
+    }, [themes, persistTheme, storageKey]);
+    // Add new theme
+    const addTheme = useCallback((name, theme) => {
+        try {
+            themeInheritanceManager.registerTheme(name, theme);
+            setAvailableThemes(prev => [...prev, name]);
+            setError(null);
+        }
+        catch (err) {
+            setError(`Failed to add theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+        }
+    }, []);
+    // Remove theme
+    const removeTheme = useCallback((name) => {
+        try {
+            // Don't allow removing the current theme
+            if (name === currentTheme) {
+                setError('Cannot remove the currently active theme');
+                return;
+            }
+            // Remove from inheritance manager (we'll need to add this method)
+            // themeInheritanceManager.removeTheme(name);
+            setAvailableThemes(prev => prev.filter(t => t !== name));
+            setError(null);
+        }
+        catch (err) {
+            setError(`Failed to remove theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+        }
+    }, [currentTheme]);
+    // Get theme by name
+    const getTheme = useCallback((name) => {
+        try {
+            return themeInheritanceManager.getCompleteTheme(name);
+        }
+        catch (err) {
+            setError(`Failed to get theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+            return null;
+        }
+    }, []);
+    // Context value
+    const contextValue = {
+        currentTheme,
+        currentThemeConfig,
+        availableThemes,
+        setTheme,
+        addTheme,
+        removeTheme,
+        getTheme,
+        isLoading,
+        error
+    };
+    return (_jsx(ThemeContext.Provider, { value: contextValue, children: children }));
 };