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

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

package/dist/themes/accessibility/index.esm.js

@@ -0,0 +1,27 @@
+// Accessibility theme system exports
+export * from '../accessibility';
+
+// Re-export main managers for easy access
+export { accessibilityManager } from '../accessibility';
+export { keyboardNavigationManager } from '../keyboard-navigation';
+export { screenReaderOptimizer } from '../screen-reader';
+export { highContrastThemeManager } from '../high-contrast';
+export { focusManager } from '../focus-management';
+export { motionReductionManager } from '../motion-reduction';
+
+// Re-export specific classes to avoid naming conflicts
+export { ARIAUtils as AriaPatternGenerator } from '../aria-patterns';
+export { AccessibilityFocusManager as FocusManagerClass } from '../focus-management';
+export { FocusTrap } from '../focus-management';
+export { FocusRestoration } from '../focus-management';
+export { FocusNavigation } from '../focus-management';
+
+// Re-export specific classes from other modules
+export { KeyboardNavigationManager } from '../keyboard-navigation';
+export { ScreenReaderOptimizer } from '../screen-reader';
+export { HighContrastThemeManager } from '../high-contrast';
+export { MotionReductionManager } from '../motion-reduction';
+
+// Re-export specific utilities and constants
+export { ARIA_ROLES, ARIA_STATES, ARIA_LIVE_VALUES } from '../aria-patterns';
+export { KEY_CODES, NAVIGATION_PATTERNS } from '../keyboard-navigation';

package/dist/themes/accessibility/index.js

@@ -0,0 +1,27 @@
+// Accessibility theme system exports
+export * from '../accessibility';
+
+// Re-export main managers for easy access
+export { accessibilityManager } from '../accessibility';
+export { keyboardNavigationManager } from '../keyboard-navigation';
+export { screenReaderOptimizer } from '../screen-reader';
+export { highContrastThemeManager } from '../high-contrast';
+export { focusManager } from '../focus-management';
+export { motionReductionManager } from '../motion-reduction';
+
+// Re-export specific classes to avoid naming conflicts
+export { ARIAUtils as AriaPatternGenerator } from '../aria-patterns';
+export { AccessibilityFocusManager as FocusManagerClass } from '../focus-management';
+export { FocusTrap } from '../focus-management';
+export { FocusRestoration } from '../focus-management';
+export { FocusNavigation } from '../focus-management';
+
+// Re-export specific classes from other modules
+export { KeyboardNavigationManager } from '../keyboard-navigation';
+export { ScreenReaderOptimizer } from '../screen-reader';
+export { HighContrastThemeManager } from '../high-contrast';
+export { MotionReductionManager } from '../motion-reduction';
+
+// Re-export specific utilities and constants
+export { ARIA_ROLES, ARIA_STATES, ARIA_LIVE_VALUES } from '../aria-patterns';
+export { KEY_CODES, NAVIGATION_PATTERNS } from '../keyboard-navigation';

package/dist/themes/accessibility.d.ts

@@ -0,0 +1,259 @@
+// Accessibility theme configuration interface
+export interface AccessibilityThemeConfig {
+  highContrast: boolean;
+  reducedMotion: boolean;
+  focusVisible: boolean;
+  ariaLabels: Record<string, string>;
+  keyboardShortcuts: Record<string, string>;
+  focusRing: {
+    color: string;
+    width: string;
+    style: 'solid' | 'dashed' | 'dotted';
+    offset: string;
+  };
+  motion: {
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
+    };
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
+    };
+  };
+  contrast: {
+    minimum: number; // WCAG AA minimum contrast ratio
+    enhanced: number; // WCAG AAA enhanced contrast ratio
+    target: number; // Target contrast ratio for the theme
+  };
+  spacing: {
+    focusRing: string;
+    touchTarget: string; // Minimum touch target size
+  };
+}
+
+// Default accessibility configuration
+export const defaultAccessibilityConfig: AccessibilityThemeConfig = {
+  highContrast: false,
+  reducedMotion: false,
+  focusVisible: true,
+  ariaLabels: {
+    close: 'Close',
+    open: 'Open',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    next: 'Next',
+    previous: 'Previous',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    loading: 'Loading',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Information'
+  },
+  keyboardShortcuts: {
+    close: 'Escape',
+    submit: 'Enter',
+    cancel: 'Escape',
+    next: 'Tab',
+    previous: 'Shift+Tab',
+    expand: 'Space or Enter',
+    collapse: 'Space or Enter'
+  },
+  focusRing: {
+    color: '#3b82f6',
+    width: '2px',
+    style: 'solid',
+    offset: '2px'
+  },
+  motion: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms'
+    },
+    easing: {
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
+    }
+  },
+  contrast: {
+    minimum: 4.5, // WCAG AA minimum
+    enhanced: 7.0, // WCAG AAA enhanced
+    target: 4.5
+  },
+  spacing: {
+    focusRing: '2px',
+    touchTarget: '44px'
+  }
+};
+
+// High contrast accessibility configuration
+export const highContrastAccessibilityConfig: AccessibilityThemeConfig = {
+  ...defaultAccessibilityConfig,
+  highContrast: true,
+  focusRing: {
+    color: '#ffffff',
+    width: '3px',
+    style: 'solid',
+    offset: '1px'
+  },
+  contrast: {
+    minimum: 7.0,
+    enhanced: 7.0,
+    target: 7.0
+  }
+};
+
+// Reduced motion accessibility configuration
+export const reducedMotionAccessibilityConfig: AccessibilityThemeConfig = {
+  ...defaultAccessibilityConfig,
+  reducedMotion: true,
+  motion: {
+    duration: {
+      fast: '0ms',
+      normal: '0ms',
+      slow: '0ms'
+    },
+    easing: {
+      ease: 'linear',
+      easeIn: 'linear',
+      easeOut: 'linear',
+      easeInOut: 'linear'
+    }
+  }
+};
+
+// Accessibility theme manager
+export class AccessibilityThemeManager {
+  private config: AccessibilityThemeConfig;
+  private listeners: Set<(config: AccessibilityThemeConfig) => void>;
+
+  constructor(initialConfig: AccessibilityThemeConfig = defaultAccessibilityConfig) {
+    this.config = initialConfig;
+    this.listeners = new Set();
+    this.initializeSystemPreferences();
+  }
+
+  // Initialize system preferences
+  private initializeSystemPreferences() {
+    // Check for system high contrast preference
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+      this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
+
+      // Listen for changes
+      highContrastQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(e.matches, this.config.reducedMotion);
+      });
+
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(this.config.highContrast, e.matches);
+      });
+    }
+  }
+
+  // Update configuration based on system preferences
+  private updateFromSystemPreferences(highContrast: boolean, reducedMotion: boolean) {
+    let newConfig = { ...this.config };
+
+    if (highContrast) {
+      newConfig = { ...newConfig, ...highContrastAccessibilityConfig };
+    }
+
+    if (reducedMotion) {
+      newConfig = { ...newConfig, ...reducedMotionAccessibilityConfig };
+    }
+
+    this.updateConfig(newConfig);
+  }
+
+  // Get current accessibility configuration
+  getConfig(): AccessibilityThemeConfig {
+    return { ...this.config };
+  }
+
+  // Update accessibility configuration
+  updateConfig(newConfig: Partial<AccessibilityThemeConfig>) {
+    this.config = { ...this.config, ...newConfig };
+    this.notifyListeners();
+  }
+
+  // Subscribe to accessibility configuration changes
+  subscribe(listener: (config: AccessibilityThemeConfig) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Notify all listeners of configuration changes
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener(this.config));
+  }
+
+  // Get CSS custom properties for accessibility
+  getCSSProperties(): Record<string, string> {
+    const { focusRing, motion, spacing } = this.config;
+
+    return {
+      '--focus-ring-color': focusRing.color,
+      '--focus-ring-width': focusRing.width,
+      '--focus-ring-style': focusRing.style,
+      '--focus-ring-offset': focusRing.offset,
+      '--motion-duration-fast': motion.duration.fast,
+      '--motion-duration-normal': motion.duration.normal,
+      '--motion-duration-slow': motion.duration.slow,
+      '--motion-easing-ease': motion.easing.ease,
+      '--motion-easing-ease-in': motion.easing.easeIn,
+      '--motion-easing-ease-out': motion.easing.easeOut,
+      '--motion-easing-ease-in-out': motion.easing.easeInOut,
+      '--spacing-focus-ring': spacing.focusRing,
+      '--spacing-touch-target': spacing.touchTarget
+    };
+  }
+
+  // Check if high contrast mode is enabled
+  isHighContrast(): boolean {
+    return this.config.highContrast;
+  }
+
+  // Check if reduced motion is enabled
+  isReducedMotion(): boolean {
+    return this.config.reducedMotion;
+  }
+
+  // Check if focus visible is enabled
+  isFocusVisible(): boolean {
+    return this.config.focusVisible;
+  }
+
+  // Get ARIA label for a specific key
+  getAriaLabel(key: string): string {
+    return this.config.ariaLabels[key] || key;
+  }
+
+  // Get keyboard shortcut for a specific action
+  getKeyboardShortcut(action: string): string {
+    return this.config.keyboardShortcuts[action] || '';
+  }
+
+  // Validate contrast ratio
+  validateContrastRatio(_foreground: string, _background: string): boolean {
+    // This would implement actual contrast ratio calculation
+    // For now, return true as placeholder
+    return true;
+  }
+}
+
+// Create and export default accessibility manager instance
+export declare const accessibilityManager: new AccessibilityThemeManager();
+
+// Export default configuration
+export default defaultAccessibilityConfig;