@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/themes/ThemeProvider.d.ts

@@ -0,0 +1,222 @@
+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]) => {
+        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>
+  );
+};

package/dist/themes/ThemeProvider.esm.js

@@ -0,0 +1,229 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ThemeContext, ThemeContextType, ThemeProviderProps } from './ThemeContext';
+import { MultiThemeConfig, CompleteThemeConfig } from './types';
+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= ({
+  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)=> {
+    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,
+            generateContrast});
+          
+          enhanced.colors.primary = {
+            ...enhanced.colors.primary,
+            light,
+            dark,
+            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});
+        const persistedTheme = persistence.getStoredTheme();
+        if (persistedTheme && themes[persistedTheme]) {
+          setCurrentThemeState(persistedTheme);
+        }
+      }
+    } catch (err) {
+      setError(`Failed to initialize themes}`);
+    } 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}'}`;
+      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}'}`;
+      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}'}`);
+    }
+  }, []);
+
+  // 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}'}`);
+    }
+  }, [currentTheme]);
+
+  // Get theme by name
+  const getTheme = useCallback((name)=> {
+    try {
+      return themeInheritanceManager.getCompleteTheme(name);
+    } catch (err) {
+      setError(`Failed to get theme '${name}'}`);
+      return null;
+    }
+  }, []);
+
+  // Context value
+  const contextValue= {
+    currentTheme,
+    currentThemeConfig,
+    availableThemes,
+    setTheme,
+    addTheme,
+    removeTheme,
+    getTheme,
+    isLoading,
+    error
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/dist/themes/ThemeProvider.js

@@ -0,0 +1,229 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ThemeContext, ThemeContextType, ThemeProviderProps } from './ThemeContext';
+import { MultiThemeConfig, CompleteThemeConfig } from './types';
+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= ({
+  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)=> {
+    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,
+            generateContrast});
+          
+          enhanced.colors.primary = {
+            ...enhanced.colors.primary,
+            light,
+            dark,
+            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});
+        const persistedTheme = persistence.getStoredTheme();
+        if (persistedTheme && themes[persistedTheme]) {
+          setCurrentThemeState(persistedTheme);
+        }
+      }
+    } catch (err) {
+      setError(`Failed to initialize themes}`);
+    } 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}'}`;
+      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}'}`;
+      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}'}`);
+    }
+  }, []);
+
+  // 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}'}`);
+    }
+  }, [currentTheme]);
+
+  // Get theme by name
+  const getTheme = useCallback((name)=> {
+    try {
+      return themeInheritanceManager.getCompleteTheme(name);
+    } catch (err) {
+      setError(`Failed to get theme '${name}'}`);
+      return null;
+    }
+  }, []);
+
+  // Context value
+  const contextValue= {
+    currentTheme,
+    currentThemeConfig,
+    availableThemes,
+    setTheme,
+    addTheme,
+    removeTheme,
+    getTheme,
+    isLoading,
+    error
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/dist/themes/accessibility/index.d.ts

@@ -0,0 +1,7 @@
+// Accessibility theme system exports
+export * from '../accessibility';
+
+// Re-export main managers for easy access
+// Re-export specific classes to avoid naming conflicts
+// Re-export specific classes from other modules
+// Re-export specific utilities and constants