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

package/dist/themes/themePersistence.esm.js

@@ -3,21 +3,21 @@
  */
 
 export interface ThemePersistenceOptions {
-  storageKey?;
-  defaultTheme?;
-  enableSystemPreference?;
-  enableSystemThemeDetection?;
-  systemThemeStorageKey?;
+  storageKey?: string;
+  defaultTheme?: string;
+  enableSystemPreference?: boolean;
+  enableSystemThemeDetection?: boolean;
+  systemThemeStorageKey?: string;
 }
 
 export class ThemePersistence {
-  private storageKey;
-  private defaultTheme;
-  private enableSystemPreference;
-  private enableSystemThemeDetection;
-  private systemThemeStorageKey;
+  private storageKey: string;
+  private defaultTheme: string;
+  private enableSystemPreference: boolean;
+  private enableSystemThemeDetection: boolean;
+  private systemThemeStorageKey: string;
 
-  constructor(options= {}) {
+  constructor(options: ThemePersistenceOptions = {}) {
     this.storageKey = options.storageKey || 'stan-design-theme';
     this.defaultTheme = options.defaultTheme || 'stan-design';
     this.enableSystemPreference = options.enableSystemPreference ?? true;
@@ -29,7 +29,10 @@ export class ThemePersistence {
    * Get the stored theme preference
    * Falls back to system preference if enabled, then default theme
    */
-  getStoredTheme()= localStorage.getItem(this.storageKey);
+  getStoredTheme(): string {
+    try {
+      // Check localStorage first
+      const stored = localStorage.getItem(this.storageKey);
       if (stored) {
         return stored;
       }
@@ -45,7 +48,7 @@ export class ThemePersistence {
       // Finally fall back to default
       return this.defaultTheme;
     } catch (error) {
-      console.warn('Failed to read theme from storage, error);
+      console.warn('Failed to read theme from storage:', error);
       return this.defaultTheme;
     }
   }
@@ -53,30 +56,36 @@ export class ThemePersistence {
   /**
    * Store the theme preference
    */
-  setStoredTheme(themeName), themeName);
+  setStoredTheme(themeName: string): void {
+    try {
+      localStorage.setItem(this.storageKey, themeName);
     } catch (error) {
-      console.warn('Failed to store theme preference, error);
+      console.warn('Failed to store theme preference:', error);
     }
   }
 
   /**
    * Clear the stored theme preference
    */
-  clearStoredTheme());
+  clearStoredTheme(): void {
+    try {
+      localStorage.removeItem(this.storageKey);
     } catch (error) {
-      console.warn('Failed to clear theme preference, 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' ;
+  private getSystemPreference(): string | null {
+    try {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        return darkModeQuery.matches ? 'dark' : 'light';
       }
     } catch (error) {
-      console.warn('Failed to detect system preference, error);
+      console.warn('Failed to detect system preference:', error);
     }
     return null;
   }
@@ -84,13 +93,13 @@ export class ThemePersistence {
   /**
    * Listen for system preference changes
    */
-  onSystemPreferenceChange(callback) => void)) => void) | null {
+  onSystemPreferenceChange(callback: (preference: string) => void): (() => void) | null {
     try {
       if (typeof window !== 'undefined' && window.matchMedia) {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme)');
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         
-        const handleChange = (event) => {
-          const preference = event.matches ? 'dark' ;
+        const handleChange = (event: MediaQueryListEvent) => {
+          const preference = event.matches ? 'dark' : 'light';
           callback(preference);
         };
 
@@ -106,7 +115,7 @@ export class ThemePersistence {
         }
       }
     } catch (error) {
-      console.warn('Failed to set up system preference listener, error);
+      console.warn('Failed to set up system preference listener:', error);
     }
     return null;
   }
@@ -114,7 +123,9 @@ export class ThemePersistence {
   /**
    * Check if localStorage is available
    */
-  isStorageAvailable()= '__test__';
+  isStorageAvailable(): boolean {
+    try {
+      const test = '__test__';
       localStorage.setItem(test, test);
       localStorage.removeItem(test);
       return true;
@@ -126,9 +137,9 @@ export class ThemePersistence {
   /**
    * Get all available storage keys related to themes
    */
-  getThemeKeys()] {
+  getThemeKeys(): string[] {
     try {
-      const keys] = [];
+      const keys: string[] = [];
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
         if (key && key.includes('theme')) {
@@ -137,7 +148,7 @@ export class ThemePersistence {
       }
       return keys;
     } catch (error) {
-      console.warn('Failed to get theme keys, error);
+      console.warn('Failed to get theme keys:', error);
       return [];
     }
   }
@@ -145,12 +156,14 @@ export class ThemePersistence {
   /**
    * Get stored system theme preference
    */
-  getStoredSystemTheme()= localStorage.getItem(this.systemThemeStorageKey);
+  getStoredSystemTheme(): 'light' | 'dark' | null {
+    try {
+      const stored = localStorage.getItem(this.systemThemeStorageKey);
       if (stored === 'light' || stored === 'dark') {
         return stored;
       }
     } catch (error) {
-      console.warn('Failed to read system theme from storage, error);
+      console.warn('Failed to read system theme from storage:', error);
     }
     return null;
   }
@@ -158,41 +171,49 @@ export class ThemePersistence {
   /**
    * Store system theme preference
    */
-  setStoredSystemTheme(theme), theme);
+  setStoredSystemTheme(theme: 'light' | 'dark'): void {
+    try {
+      localStorage.setItem(this.systemThemeStorageKey, theme);
     } catch (error) {
-      console.warn('Failed to store system theme preference, error);
+      console.warn('Failed to store system theme preference:', error);
     }
   }
 
   /**
    * Clear stored system theme preference
    */
-  clearStoredSystemTheme());
+  clearStoredSystemTheme(): void {
+    try {
+      localStorage.removeItem(this.systemThemeStorageKey);
     } catch (error) {
-      console.warn('Failed to clear system theme preference, error);
+      console.warn('Failed to clear system theme preference:', error);
     }
   }
 
   /**
    * Get comprehensive theme state including system theme
    */
-  getThemeState();
-    systemTheme;
-    isSystemThemeEnabled;
+  getThemeState(): {
+    theme: string;
+    systemTheme: 'light' | 'dark' | null;
+    isSystemThemeEnabled: boolean;
   } {
     return {
-      theme),
-      systemTheme),
-      isSystemThemeEnabled};
+      theme: this.getStoredTheme(),
+      systemTheme: this.getStoredSystemTheme(),
+      isSystemThemeEnabled: this.enableSystemThemeDetection
+    };
   }
 
   /**
    * Set comprehensive theme state
    */
-  setThemeState(state;
-    systemTheme?;
-    enableSystemTheme?;
-  })== undefined) {
+  setThemeState(state: {
+    theme?: string;
+    systemTheme?: 'light' | 'dark';
+    enableSystemTheme?: boolean;
+  }): void {
+    if (state.theme !== undefined) {
       this.setStoredTheme(state.theme);
     }
     if (state.systemTheme !== undefined) {
@@ -212,6 +233,6 @@ export const defaultThemePersistence = new ThemePersistence();
 /**
  * Create a custom theme persistence instance
  */
-export const createThemePersistence = (options) => {
+export const createThemePersistence = (options: ThemePersistenceOptions) => {
   return new ThemePersistence(options);
 };

package/dist/themes/themePersistence.js

@@ -3,21 +3,21 @@
  */
 
 export interface ThemePersistenceOptions {
-  storageKey?;
-  defaultTheme?;
-  enableSystemPreference?;
-  enableSystemThemeDetection?;
-  systemThemeStorageKey?;
+  storageKey?: string;
+  defaultTheme?: string;
+  enableSystemPreference?: boolean;
+  enableSystemThemeDetection?: boolean;
+  systemThemeStorageKey?: string;
 }
 
 export class ThemePersistence {
-  private storageKey;
-  private defaultTheme;
-  private enableSystemPreference;
-  private enableSystemThemeDetection;
-  private systemThemeStorageKey;
+  private storageKey: string;
+  private defaultTheme: string;
+  private enableSystemPreference: boolean;
+  private enableSystemThemeDetection: boolean;
+  private systemThemeStorageKey: string;
 
-  constructor(options= {}) {
+  constructor(options: ThemePersistenceOptions = {}) {
     this.storageKey = options.storageKey || 'stan-design-theme';
     this.defaultTheme = options.defaultTheme || 'stan-design';
     this.enableSystemPreference = options.enableSystemPreference ?? true;
@@ -29,7 +29,10 @@ export class ThemePersistence {
    * Get the stored theme preference
    * Falls back to system preference if enabled, then default theme
    */
-  getStoredTheme()= localStorage.getItem(this.storageKey);
+  getStoredTheme(): string {
+    try {
+      // Check localStorage first
+      const stored = localStorage.getItem(this.storageKey);
       if (stored) {
         return stored;
       }
@@ -45,7 +48,7 @@ export class ThemePersistence {
       // Finally fall back to default
       return this.defaultTheme;
     } catch (error) {
-      console.warn('Failed to read theme from storage, error);
+      console.warn('Failed to read theme from storage:', error);
       return this.defaultTheme;
     }
   }
@@ -53,30 +56,36 @@ export class ThemePersistence {
   /**
    * Store the theme preference
    */
-  setStoredTheme(themeName), themeName);
+  setStoredTheme(themeName: string): void {
+    try {
+      localStorage.setItem(this.storageKey, themeName);
     } catch (error) {
-      console.warn('Failed to store theme preference, error);
+      console.warn('Failed to store theme preference:', error);
     }
   }
 
   /**
    * Clear the stored theme preference
    */
-  clearStoredTheme());
+  clearStoredTheme(): void {
+    try {
+      localStorage.removeItem(this.storageKey);
     } catch (error) {
-      console.warn('Failed to clear theme preference, 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' ;
+  private getSystemPreference(): string | null {
+    try {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        return darkModeQuery.matches ? 'dark' : 'light';
       }
     } catch (error) {
-      console.warn('Failed to detect system preference, error);
+      console.warn('Failed to detect system preference:', error);
     }
     return null;
   }
@@ -84,13 +93,13 @@ export class ThemePersistence {
   /**
    * Listen for system preference changes
    */
-  onSystemPreferenceChange(callback) => void)) => void) | null {
+  onSystemPreferenceChange(callback: (preference: string) => void): (() => void) | null {
     try {
       if (typeof window !== 'undefined' && window.matchMedia) {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme)');
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         
-        const handleChange = (event) => {
-          const preference = event.matches ? 'dark' ;
+        const handleChange = (event: MediaQueryListEvent) => {
+          const preference = event.matches ? 'dark' : 'light';
           callback(preference);
         };
 
@@ -106,7 +115,7 @@ export class ThemePersistence {
         }
       }
     } catch (error) {
-      console.warn('Failed to set up system preference listener, error);
+      console.warn('Failed to set up system preference listener:', error);
     }
     return null;
   }
@@ -114,7 +123,9 @@ export class ThemePersistence {
   /**
    * Check if localStorage is available
    */
-  isStorageAvailable()= '__test__';
+  isStorageAvailable(): boolean {
+    try {
+      const test = '__test__';
       localStorage.setItem(test, test);
       localStorage.removeItem(test);
       return true;
@@ -126,9 +137,9 @@ export class ThemePersistence {
   /**
    * Get all available storage keys related to themes
    */
-  getThemeKeys()] {
+  getThemeKeys(): string[] {
     try {
-      const keys] = [];
+      const keys: string[] = [];
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
         if (key && key.includes('theme')) {
@@ -137,7 +148,7 @@ export class ThemePersistence {
       }
       return keys;
     } catch (error) {
-      console.warn('Failed to get theme keys, error);
+      console.warn('Failed to get theme keys:', error);
       return [];
     }
   }
@@ -145,12 +156,14 @@ export class ThemePersistence {
   /**
    * Get stored system theme preference
    */
-  getStoredSystemTheme()= localStorage.getItem(this.systemThemeStorageKey);
+  getStoredSystemTheme(): 'light' | 'dark' | null {
+    try {
+      const stored = localStorage.getItem(this.systemThemeStorageKey);
       if (stored === 'light' || stored === 'dark') {
         return stored;
       }
     } catch (error) {
-      console.warn('Failed to read system theme from storage, error);
+      console.warn('Failed to read system theme from storage:', error);
     }
     return null;
   }
@@ -158,41 +171,49 @@ export class ThemePersistence {
   /**
    * Store system theme preference
    */
-  setStoredSystemTheme(theme), theme);
+  setStoredSystemTheme(theme: 'light' | 'dark'): void {
+    try {
+      localStorage.setItem(this.systemThemeStorageKey, theme);
     } catch (error) {
-      console.warn('Failed to store system theme preference, error);
+      console.warn('Failed to store system theme preference:', error);
     }
   }
 
   /**
    * Clear stored system theme preference
    */
-  clearStoredSystemTheme());
+  clearStoredSystemTheme(): void {
+    try {
+      localStorage.removeItem(this.systemThemeStorageKey);
     } catch (error) {
-      console.warn('Failed to clear system theme preference, error);
+      console.warn('Failed to clear system theme preference:', error);
     }
   }
 
   /**
    * Get comprehensive theme state including system theme
    */
-  getThemeState();
-    systemTheme;
-    isSystemThemeEnabled;
+  getThemeState(): {
+    theme: string;
+    systemTheme: 'light' | 'dark' | null;
+    isSystemThemeEnabled: boolean;
   } {
     return {
-      theme),
-      systemTheme),
-      isSystemThemeEnabled};
+      theme: this.getStoredTheme(),
+      systemTheme: this.getStoredSystemTheme(),
+      isSystemThemeEnabled: this.enableSystemThemeDetection
+    };
   }
 
   /**
    * Set comprehensive theme state
    */
-  setThemeState(state;
-    systemTheme?;
-    enableSystemTheme?;
-  })== undefined) {
+  setThemeState(state: {
+    theme?: string;
+    systemTheme?: 'light' | 'dark';
+    enableSystemTheme?: boolean;
+  }): void {
+    if (state.theme !== undefined) {
       this.setStoredTheme(state.theme);
     }
     if (state.systemTheme !== undefined) {
@@ -212,6 +233,6 @@ export const defaultThemePersistence = new ThemePersistence();
 /**
  * Create a custom theme persistence instance
  */
-export const createThemePersistence = (options) => {
+export const createThemePersistence = (options: ThemePersistenceOptions) => {
   return new ThemePersistence(options);
 };