@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/themes/motion-reduction.ts

@@ -0,0 +1,662 @@
+import { screenReaderOptimizer } from './screen-reader';
+
+// Motion reduction theme configuration
+export interface MotionReductionThemeConfig {
+  motion: {
+    reduced: boolean;
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
+    };
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
+    };
+    animations: {
+      enabled: boolean;
+      type: 'none' | 'reduced' | 'full';
+      preferences: {
+        reduceMotion: boolean;
+        reduceAnimation: boolean;
+        reduceTransition: boolean;
+        reduceTransform: boolean;
+      };
+    };
+  };
+}
+
+// Motion reduction utilities
+export class MotionReductionManager {
+  private isReducedMotion: boolean = false;
+  private isReducedAnimation: boolean = false;
+  private isReducedTransition: boolean = false;
+  private isReducedTransform: boolean = false;
+  // private motionPreferences: Set<string> = new Set(); // Unused for now
+  private originalStyles: Map<HTMLElement, string> = new Map();
+  private reducedMotionStyles: Map<HTMLElement, string> = new Map();
+
+  constructor() {
+    this.initializeSystemPreference();
+    this.setupEventListeners();
+  }
+
+  // Initialize system preference detection
+  private initializeSystemPreference(): void {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      this.isReducedMotion = reducedMotionQuery.matches;
+      
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.isReducedMotion = e.matches;
+        this.applyMotionReduction();
+      });
+    }
+  }
+
+  // Setup event listeners
+  private setupEventListeners(): void {
+    // Listen for preference changes
+    if (typeof window !== 'undefined') {
+      window.addEventListener('storage', (e) => {
+        if (e.key === 'motion-reduction-preferences') {
+          this.loadPreferences();
+        }
+      });
+    }
+  }
+
+  // Enable motion reduction
+  enable(): void {
+    this.isReducedMotion = true;
+    this.applyMotionReduction();
+  }
+
+  // Disable motion reduction
+  disable(): void {
+    this.isReducedMotion = false;
+    this.removeMotionReduction();
+  }
+
+  // Toggle motion reduction
+  toggle(): void {
+    if (this.isReducedMotion) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  // Check if motion reduction is enabled
+  isMotionReduced(): boolean {
+    return this.isReducedMotion;
+  }
+
+  // Set specific motion reduction preferences
+  setPreferences(preferences: {
+    reduceAnimation?: boolean;
+    reduceTransition?: boolean;
+    reduceTransform?: boolean;
+  }): void {
+    if (preferences.reduceAnimation !== undefined) {
+      this.isReducedAnimation = preferences.reduceAnimation;
+    }
+    if (preferences.reduceTransition !== undefined) {
+      this.isReducedTransition = preferences.reduceTransition;
+    }
+    if (preferences.reduceTransform !== undefined) {
+      this.isReducedTransform = preferences.reduceTransform;
+    }
+    
+    this.savePreferences();
+    this.applyMotionReduction();
+  }
+
+  // Get current motion reduction preferences
+  getPreferences(): {
+    reduceMotion: boolean;
+    reduceAnimation: boolean;
+    reduceTransition: boolean;
+    reduceTransform: boolean;
+  } {
+    return {
+      reduceMotion: this.isReducedMotion,
+      reduceAnimation: this.isReducedAnimation,
+      reduceTransition: this.isReducedTransition,
+      reduceTransform: this.isReducedTransform
+    };
+  }
+
+  // Apply motion reduction to the document
+  applyMotionReduction(): void {
+    if (!this.isReducedMotion) return;
+
+    // Add reduced motion class to document
+    document.documentElement.classList.add('reduced-motion');
+    
+    // Apply reduced motion styles
+    this.applyReducedMotionStyles();
+    
+    // Process existing elements
+    this.processExistingElements();
+    
+    // Announce motion reduction change
+    if (screenReaderOptimizer) {
+      screenReaderOptimizer.announceMotionChange(true);
+    }
+  }
+
+  // Remove motion reduction from the document
+  removeMotionReduction(): void {
+    // Remove reduced motion class
+    document.documentElement.classList.remove('reduced-motion');
+    
+    // Remove reduced motion styles
+    this.removeReducedMotionStyles();
+    
+    // Restore original styles
+    this.restoreOriginalStyles();
+    
+    // Announce motion reduction change
+    if (screenReaderOptimizer) {
+      screenReaderOptimizer.announceMotionChange(false);
+    }
+  }
+
+  // Apply reduced motion styles
+  private applyReducedMotionStyles(): void {
+    const style = document.createElement('style');
+    style.id = 'reduced-motion-styles';
+    
+    style.textContent = `
+      .reduced-motion,
+      .reduced-motion * {
+        /* Disable animations */
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        animation-delay: 0s !important;
+        
+        /* Disable transitions */
+        transition-duration: 0.01ms !important;
+        transition-delay: 0s !important;
+        
+        /* Disable transforms */
+        transform: none !important;
+        
+        /* Disable scroll behavior */
+        scroll-behavior: auto !important;
+      }
+      
+      .reduced-motion .motion-safe,
+      .reduced-motion *[data-motion-safe="true"] {
+        /* Allow safe motion for essential animations */
+        animation-duration: 150ms !important;
+        transition-duration: 150ms !important;
+      }
+      
+      .reduced-motion .motion-reduce,
+      .reduced-motion *[data-motion-reduce="true"] {
+        /* Apply reduced motion for non-essential animations */
+        animation-duration: 50ms !important;
+        transition-duration: 50ms !important;
+      }
+      
+      /* Specific component overrides */
+      .reduced-motion .modal,
+      .reduced-motion .tooltip,
+      .reduced-motion .popover {
+        animation: none !important;
+        transition: none !important;
+      }
+      
+      .reduced-motion .skeleton {
+        animation: none !important;
+      }
+      
+      .reduced-motion .progress-bar {
+        transition: none !important;
+      }
+      
+      .reduced-motion .carousel,
+      .reduced-motion .slider {
+        scroll-behavior: auto !important;
+      }
+    `;
+    
+    document.head.appendChild(style);
+  }
+
+  // Remove reduced motion styles
+  private removeReducedMotionStyles(): void {
+    const style = document.getElementById('reduced-motion-styles');
+    if (style) {
+      style.remove();
+    }
+  }
+
+  // Process existing elements
+  private processExistingElements(): void {
+    // Process elements with animations
+    const animatedElements = document.querySelectorAll('[class*="animate"], [class*="transition"], [class*="transform"]');
+    animatedElements.forEach(element => {
+      this.processElement(element as HTMLElement);
+    });
+    
+    // Process elements with data attributes
+    const motionElements = document.querySelectorAll('[data-motion], [data-animation], [data-transition]');
+    motionElements.forEach(element => {
+      this.processElement(element as HTMLElement);
+    });
+  }
+
+  // Process individual element
+  private processElement(element: HTMLElement): void {
+    // Store original styles if not already stored
+    if (!this.originalStyles.has(element)) {
+      this.originalStyles.set(element, element.style.cssText);
+    }
+    
+    // Apply reduced motion styles
+    const reducedStyles = this.getReducedMotionStyles(element);
+    element.style.cssText = reducedStyles;
+    
+    // Store reduced styles
+    this.reducedMotionStyles.set(element, reducedStyles);
+  }
+
+  // Get reduced motion styles for element
+  private getReducedMotionStyles(element: HTMLElement): string {
+    const originalStyles = element.style.cssText;
+    
+    let reducedStyles = originalStyles;
+    
+    // Remove animation properties
+    if (this.isReducedAnimation) {
+      reducedStyles = reducedStyles.replace(/animation[^;]*;?/g, '');
+      reducedStyles += 'animation: none !important;';
+    }
+    
+    // Remove transition properties
+    if (this.isReducedTransition) {
+      reducedStyles = reducedStyles.replace(/transition[^;]*;?/g, '');
+      reducedStyles += 'transition: none !important;';
+    }
+    
+    // Remove transform properties
+    if (this.isReducedTransform) {
+      reducedStyles = reducedStyles.replace(/transform[^;]*;?/g, '');
+      reducedStyles += 'transform: none !important;';
+    }
+    
+    return reducedStyles;
+  }
+
+  // Restore original styles
+  private restoreOriginalStyles(): void {
+    this.originalStyles.forEach((originalStyle, element) => {
+      if (element && element.offsetParent !== null) {
+        element.style.cssText = originalStyle;
+      }
+    });
+    
+    this.originalStyles.clear();
+    this.reducedMotionStyles.clear();
+  }
+
+  // Save preferences to localStorage
+  private savePreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      const preferences = {
+        reduceAnimation: this.isReducedAnimation,
+        reduceTransition: this.isReducedTransition,
+        reduceTransform: this.isReducedTransform,
+        timestamp: Date.now()
+      };
+      
+      window.localStorage.setItem('motion-reduction-preferences', JSON.stringify(preferences));
+    }
+  }
+
+  // Load preferences from localStorage
+  private loadPreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      try {
+        const stored = window.localStorage.getItem('motion-reduction-preferences');
+        if (stored) {
+          const preferences = JSON.parse(stored);
+          
+          this.isReducedAnimation = preferences.reduceAnimation || false;
+          this.isReducedTransition = preferences.reduceTransition || false;
+          this.isReducedTransform = preferences.reduceTransform || false;
+        }
+      } catch (error) {
+        console.warn('Failed to load motion reduction preferences:', error);
+      }
+    }
+  }
+
+  // Check if element should have motion reduced
+  shouldReduceMotion(element: HTMLElement): boolean {
+    if (!this.isReducedMotion) return false;
+    
+    // Check for motion-safe override
+    if (element.classList.contains('motion-safe') || element.getAttribute('data-motion-safe') === 'true') {
+      return false;
+    }
+    
+    // Check for motion-reduce override
+    if (element.classList.contains('motion-reduce') || element.getAttribute('data-motion-reduce') === 'true') {
+      return true;
+    }
+    
+    return true;
+  }
+
+  // Get appropriate duration for element
+  getDuration(element: HTMLElement, defaultDuration: string, type: 'animation' | 'transition'): string {
+    if (!this.shouldReduceMotion(element)) {
+      return defaultDuration;
+    }
+    
+    // Parse duration
+    const duration = parseFloat(defaultDuration);
+    const unit = defaultDuration.replace(/[\d.]/g, '');
+    
+    if (type === 'animation') {
+      return this.isReducedAnimation ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
+    } else {
+      return this.isReducedTransition ? '0.01ms' : `${Math.min(duration * 0.1, 50)}${unit}`;
+    }
+  }
+
+  // Get appropriate easing for element
+  getEasing(element: HTMLElement, defaultEasing: string): string {
+    if (!this.shouldReduceMotion(element)) {
+      return defaultEasing;
+    }
+    
+    // Use linear easing for reduced motion
+    return 'linear';
+  }
+
+  // Create motion-safe wrapper
+  createMotionSafeWrapper(element: HTMLElement, callback: () => void): void {
+    if (!this.shouldReduceMotion(element)) {
+      callback();
+      return;
+    }
+    
+    // Execute callback without motion
+    const originalReducedMotion = this.isReducedMotion;
+    this.isReducedMotion = false;
+    
+    try {
+      callback();
+    } finally {
+      this.isReducedMotion = originalReducedMotion;
+    }
+  }
+
+  // Animate element with motion reduction awareness
+  animateElement(
+    element: HTMLElement,
+    keyframes: Keyframe[],
+    options: KeyframeAnimationOptions
+  ): Animation {
+    if (this.shouldReduceMotion(element)) {
+      // Apply reduced motion options
+      const reducedOptions = {
+        ...options,
+        duration: Math.min(typeof options.duration === 'number' ? options.duration : 300, 50),
+        easing: 'linear'
+      };
+      
+      return element.animate(keyframes, reducedOptions);
+    }
+    
+    return element.animate(keyframes, options);
+  }
+
+  // Add motion reduction observer
+  addMotionReductionObserver(callback: (isReduced: boolean) => void): () => void {
+    const observer = new MutationObserver(() => {
+      callback(this.isReducedMotion);
+    });
+    
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    
+    // Return cleanup function
+    return () => observer.disconnect();
+  }
+
+  // Get motion reduction statistics
+  getStatistics(): {
+    totalElements: number;
+    reducedElements: number;
+    safeElements: number;
+    preferences: {
+      reduceMotion: boolean;
+      reduceAnimation: boolean;
+      reduceTransition: boolean;
+      reduceTransform: boolean;
+    };
+  } {
+    const totalElements = document.querySelectorAll('*').length;
+    const reducedElements = document.querySelectorAll('.reduced-motion *').length;
+    const safeElements = document.querySelectorAll('.motion-safe, [data-motion-safe="true"]').length;
+    
+    return {
+      totalElements,
+      reducedElements,
+      safeElements,
+      preferences: this.getPreferences()
+    };
+  }
+
+  // Reset all motion reduction settings
+  reset(): void {
+    this.isReducedMotion = false;
+    this.isReducedAnimation = false;
+    this.isReducedTransition = false;
+    this.isReducedTransform = false;
+    
+    this.removeMotionReduction();
+    this.clearPreferences();
+  }
+
+  // Clear stored preferences
+  private clearPreferences(): void {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.removeItem('motion-reduction-preferences');
+    }
+    
+    this.originalStyles.clear();
+    this.reducedMotionStyles.clear();
+  }
+
+  // Destroy motion reduction manager
+  destroy(): void {
+    this.removeMotionReduction();
+    this.clearPreferences();
+    
+    // Remove event listeners
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('storage', this.loadPreferences.bind(this));
+    }
+  }
+}
+
+// Motion reduction utilities
+export class MotionReductionUtils {
+  // Check if motion should be reduced for element
+  static shouldReduceMotion(element: HTMLElement): boolean {
+    // Check system preference
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      if (reducedMotionQuery.matches) return true;
+    }
+    
+    // Check element attributes
+    if (element.classList.contains('motion-reduce') || element.getAttribute('data-motion-reduce') === 'true') {
+      return true;
+    }
+    
+    // Check parent elements
+    const parent = element.closest('.motion-reduce, [data-motion-reduce="true"]');
+    if (parent) return true;
+    
+    return false;
+  }
+
+  // Get reduced duration
+  static getReducedDuration(duration: string, reductionFactor: number = 0.1): string {
+    const parsed = parseFloat(duration);
+    const unit = duration.replace(/[\d.]/g, '');
+    
+    return `${Math.max(parsed * reductionFactor, 1)}${unit}`;
+  }
+
+  // Get reduced easing
+  static getReducedEasing(_easing: string): string {
+    return 'linear';
+  }
+
+  // Create motion-safe animation
+  static createMotionSafeAnimation(
+    element: HTMLElement,
+    keyframes: Keyframe[],
+    options: KeyframeAnimationOptions
+  ): Animation | null {
+    if (this.shouldReduceMotion(element)) {
+      // Return null to indicate no animation should be performed
+      return null;
+    }
+    
+    return element.animate(keyframes, options);
+  }
+
+  // Apply motion reduction to CSS custom properties
+  static applyMotionReductionToCSS(element: HTMLElement): void {
+    if (!this.shouldReduceMotion(element)) return;
+    
+    const style = element.style;
+    
+    // Reduce animation duration
+    if (style.getPropertyValue('--animation-duration')) {
+      const duration = style.getPropertyValue('--animation-duration');
+      style.setProperty('--animation-duration', this.getReducedDuration(duration));
+    }
+    
+    // Reduce transition duration
+    if (style.getPropertyValue('--transition-duration')) {
+      const duration = style.getPropertyValue('--transition-duration');
+      style.setProperty('--transition-duration', this.getReducedDuration(duration));
+    }
+    
+    // Set easing to linear
+    if (style.getPropertyValue('--animation-easing')) {
+      style.setProperty('--animation-easing', 'linear');
+    }
+    
+    if (style.getPropertyValue('--transition-easing')) {
+      style.setProperty('--transition-easing', 'linear');
+    }
+  }
+
+  // Remove motion reduction from CSS custom properties
+  static removeMotionReductionFromCSS(element: HTMLElement): void {
+    const style = element.style;
+    
+    // Remove custom properties
+    style.removeProperty('--animation-duration');
+    style.removeProperty('--transition-duration');
+    style.removeProperty('--animation-easing');
+    style.removeProperty('--transition-easing');
+  }
+
+  // Check if element has motion
+  static hasMotion(element: HTMLElement): boolean {
+    const computedStyle = window.getComputedStyle(element);
+    
+    return (
+      computedStyle.animation !== 'none' ||
+      computedStyle.transition !== 'all 0s ease 0s' ||
+      computedStyle.transform !== 'none'
+    );
+  }
+
+  // Get motion information for element
+  static getMotionInfo(element: HTMLElement): {
+    hasAnimation: boolean;
+    hasTransition: boolean;
+    hasTransform: boolean;
+    animationDuration: string;
+    transitionDuration: string;
+    transform: string;
+  } {
+    const computedStyle = window.getComputedStyle(element);
+    
+    return {
+      hasAnimation: computedStyle.animation !== 'none',
+      hasTransition: computedStyle.transition !== 'all 0s ease 0s',
+      hasTransform: computedStyle.transform !== 'none',
+      animationDuration: computedStyle.animationDuration,
+      transitionDuration: computedStyle.transitionDuration,
+      transform: computedStyle.transform
+    };
+  }
+}
+
+// Motion reduction hooks for React
+export class MotionReductionHooks {
+  // Get motion reduction state
+  static useMotionReduction(): {
+    isReduced: boolean;
+    preferences: {
+      reduceAnimation: boolean;
+      reduceTransition: boolean;
+      reduceTransform: boolean;
+    };
+    shouldReduceMotion: (element: HTMLElement) => boolean;
+  } {
+    // This would be implemented in a React component
+    // For now, return a mock implementation
+    return {
+      isReduced: false,
+      preferences: {
+        reduceAnimation: false,
+        reduceTransition: false,
+        reduceTransform: false
+      },
+      shouldReduceMotion: () => false
+    };
+  }
+
+  // Get motion-safe duration
+  static useMotionSafeDuration(defaultDuration: string, _type: 'animation' | 'transition'): string {
+    // This would be implemented in a React component
+    return defaultDuration;
+  }
+
+  // Get motion-safe easing
+  static useMotionSafeEasing(defaultEasing: string): string {
+    // This would be implemented in a React component
+    return defaultEasing;
+  }
+}
+
+// Export default instances
+export const motionReductionManager = new MotionReductionManager();
+
+// Export default
+export default {
+  MotionReductionManager,
+  MotionReductionUtils,
+  MotionReductionHooks,
+  motionReductionManager
+};