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

package/dist/themes/themePersistence.js

@@ -0,0 +1,217 @@
+/**
+ * Theme persistence utilities for managing theme preferences in localStorage
+ */
+
+export interface ThemePersistenceOptions {
+  storageKey?;
+  defaultTheme?;
+  enableSystemPreference?;
+  enableSystemThemeDetection?;
+  systemThemeStorageKey?;
+}
+
+export class ThemePersistence {
+  private storageKey;
+  private defaultTheme;
+  private enableSystemPreference;
+  private enableSystemThemeDetection;
+  private systemThemeStorageKey;
+
+  constructor(options= {}) {
+    this.storageKey = options.storageKey || 'stan-design-theme';
+    this.defaultTheme = options.defaultTheme || 'stan-design';
+    this.enableSystemPreference = options.enableSystemPreference ?? true;
+    this.enableSystemThemeDetection = options.enableSystemThemeDetection ?? true;
+    this.systemThemeStorageKey = options.systemThemeStorageKey || 'stan-design-system-theme';
+  }
+
+  /**
+   * Get the stored theme preference
+   * Falls back to system preference if enabled, then default theme
+   */
+  getStoredTheme()= localStorage.getItem(this.storageKey);
+      if (stored) {
+        return stored;
+      }
+
+      // Fall back to system preference if enabled
+      if (this.enableSystemPreference) {
+        const systemPreference = this.getSystemPreference();
+        if (systemPreference) {
+          return systemPreference;
+        }
+      }
+
+      // Finally fall back to default
+      return this.defaultTheme;
+    } catch (error) {
+      console.warn('Failed to read theme from storage, error);
+      return this.defaultTheme;
+    }
+  }
+
+  /**
+   * Store the theme preference
+   */
+  setStoredTheme(themeName), themeName);
+    } catch (error) {
+      console.warn('Failed to store theme preference, error);
+    }
+  }
+
+  /**
+   * Clear the stored theme preference
+   */
+  clearStoredTheme());
+    } catch (error) {
+      console.warn('Failed to clear theme preference, error);
+    }
+  }
+
+  /**
+   * Get system color scheme preference
+   */
+  private getSystemPreference()== 'undefined' && window.matchMedia) {
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme)');
+        return darkModeQuery.matches ? 'dark' ;
+      }
+    } catch (error) {
+      console.warn('Failed to detect system preference, error);
+    }
+    return null;
+  }
+
+  /**
+   * Listen for system preference changes
+   */
+  onSystemPreferenceChange(callback) => void)) => void) | null {
+    try {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme)');
+        
+        const handleChange = (event) => {
+          const preference = event.matches ? 'dark' ;
+          callback(preference);
+        };
+
+        // Modern browsers
+        if (mediaQuery.addEventListener) {
+          mediaQuery.addEventListener('change', handleChange);
+          return () => mediaQuery.removeEventListener('change', handleChange);
+        }
+        // Legacy browsers
+        else if (mediaQuery.addListener) {
+          mediaQuery.addListener(handleChange);
+          return () => mediaQuery.removeListener(handleChange);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to set up system preference listener, error);
+    }
+    return null;
+  }
+
+  /**
+   * Check if localStorage is available
+   */
+  isStorageAvailable()= '__test__';
+      localStorage.setItem(test, test);
+      localStorage.removeItem(test);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Get all available storage keys related to themes
+   */
+  getThemeKeys()] {
+    try {
+      const keys] = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.includes('theme')) {
+          keys.push(key);
+        }
+      }
+      return keys;
+    } catch (error) {
+      console.warn('Failed to get theme keys, error);
+      return [];
+    }
+  }
+
+  /**
+   * Get stored system theme preference
+   */
+  getStoredSystemTheme()= localStorage.getItem(this.systemThemeStorageKey);
+      if (stored === 'light' || stored === 'dark') {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read system theme from storage, error);
+    }
+    return null;
+  }
+
+  /**
+   * Store system theme preference
+   */
+  setStoredSystemTheme(theme), theme);
+    } catch (error) {
+      console.warn('Failed to store system theme preference, error);
+    }
+  }
+
+  /**
+   * Clear stored system theme preference
+   */
+  clearStoredSystemTheme());
+    } catch (error) {
+      console.warn('Failed to clear system theme preference, error);
+    }
+  }
+
+  /**
+   * Get comprehensive theme state including system theme
+   */
+  getThemeState();
+    systemTheme;
+    isSystemThemeEnabled;
+  } {
+    return {
+      theme),
+      systemTheme),
+      isSystemThemeEnabled};
+  }
+
+  /**
+   * Set comprehensive theme state
+   */
+  setThemeState(state;
+    systemTheme?;
+    enableSystemTheme?;
+  })== undefined) {
+      this.setStoredTheme(state.theme);
+    }
+    if (state.systemTheme !== undefined) {
+      this.setStoredSystemTheme(state.systemTheme);
+    }
+    if (state.enableSystemTheme !== undefined) {
+      this.enableSystemThemeDetection = state.enableSystemTheme;
+    }
+  }
+}
+
+/**
+ * Default theme persistence instance
+ */
+export const defaultThemePersistence = new ThemePersistence();
+
+/**
+ * Create a custom theme persistence instance
+ */
+export const createThemePersistence = (options) => {
+  return new ThemePersistence(options);
+};