@shohojdhara/atomix 0.3.7 → 0.3.9

package/src/lib/theme/runtime/ThemeErrorBoundary.tsx

@@ -148,7 +148,7 @@ export class ThemeErrorBoundary extends Component<
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     // Log error
     const themeError = error instanceof ThemeError
       ? error
@@ -187,7 +187,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
+  override componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
     // Reset error if resetOnPropsChange is true and children changed
     if (
       this.props.resetOnPropsChange &&
@@ -202,7 +202,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  render(): ReactNode {
+  override render(): ReactNode {
     if (this.state.hasError && this.state.error && this.state.errorInfo) {
       // Use custom fallback if provided
       if (this.props.fallback) {

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -7,21 +7,22 @@
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { ThemeContext } from './ThemeContext';
-import type { ThemeProviderProps, Theme, ThemeLoadOptions } from '../types';
-import { isJSTheme } from '../utils/themeUtils';
+import type { ThemeProviderProps, ThemeLoadOptions } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
+import { createTokens } from '../tokens/tokens';
 import { getLogger } from '../errors';
 import { createTheme } from '../core';
 import { injectCSS, removeCSS } from '../utils/injectCSS';
 import {
-    isServer,
-    createLocalStorageAdapter,
-    applyThemeAttributes,
-    buildThemePath,
+  isServer,
+  createLocalStorageAdapter,
+  applyThemeAttributes,
+  buildThemePath,
 } from '../utils/domUtils';
 import {
-    DEFAULT_STORAGE_KEY,
-    DEFAULT_DATA_ATTRIBUTE,
-    DEFAULT_BASE_PATH,
+  DEFAULT_STORAGE_KEY,
+  DEFAULT_DATA_ATTRIBUTE,
+  DEFAULT_BASE_PATH,
 } from '../constants/constants';
 
 /**
@@ -30,7 +31,7 @@ import {
  * React context provider for theme management with separated concerns.
  * Simplified version focusing on core functionality:
  * - String-based themes (CSS files)
- * - JS Theme objects
+ * - DesignTokens (dynamic themes)
  * - Persistence via localStorage
  *
  * Falls back to 'default' theme if no configuration is found.
@@ -59,7 +60,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   }, [onThemeChange, onError]);
 
   // Create stable wrapper functions that read from ref
-  const handleThemeChange = useCallback((theme: string | Theme) => {
+  const handleThemeChange = useCallback((theme: string | DesignTokens) => {
     onThemeChangeRef.current?.(theme);
   }, []);
 
@@ -98,7 +99,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
           return 'config-theme';
         }
       } catch (error) {
-        console.warn('Failed to load theme from config, using default');
+        // Failed to load theme from config, using default
       }
     }
 
@@ -106,15 +107,39 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     return 'default';
   }, [defaultTheme, enablePersistence, storageKey]);
 
-  // State for current theme
-  const [currentTheme, setCurrentTheme] = useState<string | Theme>(() => initialDefaultTheme);
-  const [activeTheme, setActiveTheme] = useState<Theme | null>(null);
+  // Initialize state - handle both string and DesignTokens for defaultTheme
+  const [currentTheme, setCurrentTheme] = useState<string>(() => {
+    if (typeof initialDefaultTheme === 'string') {
+      return initialDefaultTheme;
+    }
+    // If it's DesignTokens, we'll handle it in useEffect
+    return 'tokens-theme';
+  });
+
+  const [activeTokens, setActiveTokens] = useState<DesignTokens | null>(() => {
+    // If defaultTheme is DesignTokens, store them
+    if (defaultTheme && typeof defaultTheme !== 'string') {
+      return createTokens(defaultTheme);
+    }
+    return null;
+  });
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   // Track loaded themes
   const loadedThemesRef = useRef<Set<string>>(new Set());
   const themePromisesRef = useRef<Record<string, Promise<void>>>({});
+  // AbortController for cancelling in-flight theme loads
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Handle initial DesignTokens defaultTheme
+  useEffect(() => {
+    if (defaultTheme && typeof defaultTheme !== 'string' && activeTokens && !isServer()) {
+      // If defaultTheme is DesignTokens, inject CSS on mount
+      const css = createTheme(defaultTheme);
+      injectCSS(css, 'theme-tokens-theme');
+    }
+  }, [defaultTheme, activeTokens]); // Run when defaultTheme or activeTokens change
 
   // Apply initial theme attributes to document element
   useEffect(() => {
@@ -128,52 +153,121 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     if (enablePersistence && storageAdapter.isAvailable()) {
       storageAdapter.setItem(storageKey, String(currentTheme));
     }
-  }, [currentTheme, storageKey, enablePersistence]);
+  }, [currentTheme, storageKey, enablePersistence, storageAdapter]);
+
+  // Cleanup: Remove completed promises and abort controllers on unmount
+  useEffect(() => {
+    return () => {
+      // Cancel any in-flight theme loads
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+
+      // Clean up completed promises (keep only pending ones)
+      // In practice, completed promises are automatically garbage collected,
+      // but we can clear the ref to be explicit
+      const pendingPromises: Record<string, Promise<void>> = {};
+      Object.entries(themePromisesRef.current).forEach(([key, promise]) => {
+        // Check if promise is still pending (this is a best-effort cleanup)
+        // In practice, we rely on garbage collection for completed promises
+        pendingPromises[key] = promise;
+      });
+      // Clear all on unmount
+      themePromisesRef.current = {};
+    };
+  }, []);
 
   // Function to set theme with proper type handling
   const setTheme = useCallback(async (
-    theme: string | Theme | import('../tokens').DesignTokens | Partial<import('../tokens').DesignTokens>,
+    theme: string | DesignTokens | Partial<DesignTokens>,
     options?: ThemeLoadOptions
   ) => {
+    // Cancel previous theme load if in progress
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    // Create new AbortController for this theme load
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
     setIsLoading(true);
     setError(null);
-    
+
     try {
       let themeName: string;
-      let themeObj: Theme | null = null;
-      
+
       if (typeof theme === 'string') {
         themeName = theme;
       } else {
-        // If it's a Theme object or DesignTokens, we need to process it
-        if (isJSTheme(theme)) {
-          themeObj = theme as Theme;
-          // For JS themes, we use a generic name
-          themeName = 'js-theme';
-          setActiveTheme(themeObj);
-        } else {
-          // For DesignTokens, we might create a theme from tokens
-          themeName = 'tokens-theme';
-          // Create theme from tokens if needed
+        // Check if aborted before processing
+        if (abortController.signal.aborted) {
+          return;
         }
+
+        // For DesignTokens, create CSS and inject it
+        const { createTheme } = await import('../core');
+        const css = createTheme(theme);
+        const themeId = 'tokens-theme';
+
+        // Check if aborted after async operation
+        if (abortController.signal.aborted) {
+          return;
+        }
+
+        // Remove any previously loaded theme CSS
+        removeCSS(`theme-${currentTheme}`);
+
+        // Inject new theme CSS
+        injectCSS(css, `theme-${themeId}`);
+
+        // Store tokens for reference
+        const fullTokens = createTokens(theme);
+
+        // Check if aborted before state update
+        if (abortController.signal.aborted) {
+          return;
+        }
+
+        setActiveTokens(fullTokens);
+        setCurrentTheme(themeId);
+        handleThemeChange(fullTokens);
+        setIsLoading(false);
+        return;
       }
 
       // If it's a string theme name, load the associated CSS
       if (typeof theme === 'string' && themes[theme]) {
         // Check if theme is already loading
         if (themePromisesRef.current[theme]) {
-          await themePromisesRef.current[theme];
-          setCurrentTheme(theme);
-          setActiveTheme(null);
-          handleThemeChange(theme);
-          return;
+          try {
+            await themePromisesRef.current[theme];
+            // Check if aborted
+            if (abortController.signal.aborted) {
+              return;
+            }
+            setCurrentTheme(theme);
+            setActiveTokens(null);
+            handleThemeChange(theme);
+            setIsLoading(false);
+            return;
+          } catch {
+            // If previous load failed, continue with new load
+          }
         }
 
         // Load CSS theme
         const themeLoadPromise = new Promise<void>(async (resolve, reject) => {
           try {
+            // Check if aborted
+            if (abortController.signal.aborted) {
+              resolve();
+              return;
+            }
+
             const themeMetadata = themes[theme];
-            
+
             if (themeMetadata) {
               // Build CSS path using utility function
               const cssPath = buildThemePath(
@@ -182,22 +276,42 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
                 useMinified,
                 cdnPath
               );
-              
+
+              // Check if aborted
+              if (abortController.signal.aborted) {
+                resolve();
+                return;
+              }
+
+              // Load CSS file (using loadThemeCSS from domUtils)
+              const { loadThemeCSS } = await import('../utils/domUtils');
+              await loadThemeCSS(cssPath, `theme-${theme}`);
+
+              // Check if aborted after async operation
+              if (abortController.signal.aborted) {
+                resolve();
+                return;
+              }
+
               // Remove any previously loaded theme CSS
               removeCSS(`theme-${String(currentTheme)}`);
-              
-              // Inject new theme CSS
-              await injectCSS(cssPath, `theme-${theme}`);
+
               loadedThemesRef.current.add(theme);
-              
+
               setCurrentTheme(theme);
-              setActiveTheme(null);
+              setActiveTokens(null);
               handleThemeChange(theme);
               resolve();
             } else {
               throw new Error(`Theme metadata not found for theme: ${theme}`);
             }
           } catch (err) {
+            // Don't reject if aborted
+            if (abortController.signal.aborted) {
+              resolve();
+              return;
+            }
+
             const error = err instanceof Error ? err : new Error(String(err));
             setError(error);
             handleError(error, String(theme));
@@ -206,24 +320,44 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         });
 
         themePromisesRef.current[theme] = themeLoadPromise;
-        await themeLoadPromise;
-      } else if (themeObj) {
-        // For JS themes, set them directly
-        setCurrentTheme(themeName);
-        setActiveTheme(themeObj);
-        handleThemeChange(themeObj);
+
+        try {
+          await themeLoadPromise;
+        } catch {
+          // Error already handled in promise
+        }
+
+        // Clean up completed promise after a delay to prevent memory leak
+        setTimeout(() => {
+          if (themePromisesRef.current[theme] === themeLoadPromise) {
+            delete themePromisesRef.current[theme];
+          }
+        }, 1000);
       } else {
+        // Check if aborted
+        if (abortController.signal.aborted) {
+          return;
+        }
+
         // For string theme that isn't in our themes record, just set the name
         setCurrentTheme(themeName);
-        setActiveTheme(null);
+        setActiveTokens(null);
         handleThemeChange(themeName);
       }
     } catch (err) {
+      // Don't set error if aborted
+      if (abortController.signal.aborted) {
+        return;
+      }
+
       const error = err instanceof Error ? err : new Error(String(err));
       setError(error);
       handleError(error, String(theme));
     } finally {
-      setIsLoading(false);
+      // Only update loading state if not aborted
+      if (!abortController.signal.aborted) {
+        setIsLoading(false);
+      }
     }
   }, [themes, currentTheme, handleThemeChange, handleError, basePath, useMinified, cdnPath]);
 
@@ -247,7 +381,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         useMinified,
         cdnPath
       );
-      
+
       // Preload CSS by fetching it
       await fetch(cssPath);
       loadedThemesRef.current.add(themeName);
@@ -266,30 +400,37 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     // For now, we'll create a mock implementation that satisfies the type
     return {
       // Mock implementation - in a real app this would be a full ThemeManager
-    } ;
+    };
   }, []);
 
+  // Memoize available themes to prevent unnecessary recalculations
+  const availableThemes = useMemo(() =>
+    Object.entries(themes).map(([name, metadata]) => ({
+      ...metadata,
+      name: name, // Ensure name is set from the key
+    })),
+    [themes]
+  );
+
   // Theme context value
   const contextValue = useMemo(() => ({
-    theme: typeof currentTheme === 'string' ? currentTheme : 'js-theme',
-    activeTheme,
+    theme: currentTheme,
+    activeTokens,
     setTheme,
-    availableThemes: Object.entries(themes).map(([name, metadata]) => ({
-      ...metadata
-    })),
+    availableThemes,
     isLoading,
     error,
     isThemeLoaded,
     preloadTheme,
     themeManager,
   }), [
-    currentTheme, 
-    activeTheme, 
-    setTheme, 
-    themes, 
-    isLoading, 
-    error, 
-    isThemeLoaded, 
+    currentTheme,
+    activeTokens,
+    setTheme,
+    availableThemes, // Use memoized value
+    isLoading,
+    error,
+    isThemeLoaded,
     preloadTheme,
     themeManager
   ]);

package/src/lib/theme/runtime/useTheme.ts

@@ -38,7 +38,7 @@ export function useTheme(): UseThemeReturn {
 
     return {
         theme: context.theme,
-        activeTheme: context.activeTheme,
+        activeTokens: context.activeTokens,
         setTheme: context.setTheme,
         availableThemes: context.availableThemes,
         isLoading: context.isLoading,

package/src/lib/theme/runtime/useThemeTokens.ts

@@ -1,18 +1,17 @@
 import { useCallback } from 'react';
 import { useTheme } from './useTheme';
-import type { Theme } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
 
 /**
  * Standardized hook for accessing theme tokens in components
  *
- * Provides consistent access to theme values across all components
- * using either CSS custom properties or theme object values.
+ * Provides consistent access to theme values using CSS custom properties
+ * and DesignTokens.
  */
 type ThemeTokens = {
     theme: string;
-    activeTheme: Theme | null;
+    activeTokens: DesignTokens | null;
     getToken: (tokenName: string, fallback?: string) => string;
-    getThemeValue: (path: string, fallback?: any) => any;
     colors: {
       primary: string;
       secondary: string;
@@ -35,7 +34,7 @@ type ThemeTokens = {
   };
 
 export function useThemeTokens(): ThemeTokens {
-  const { theme, activeTheme } = useTheme();
+  const { theme, activeTokens } = useTheme();
 
   // Helper function to get CSS variable value
   const getToken = useCallback((tokenName: string, fallback?: string) => {
@@ -46,20 +45,12 @@ export function useThemeTokens(): ThemeTokens {
     return computedStyle.getPropertyValue(cssVarName).trim() || fallback || '';
   }, []);
 
-  // Helper function to get theme object value
-  const getThemeValue = useCallback((path: string, fallback?: any) => {
-    if (!activeTheme) return fallback;
-
-    // Navigate through nested theme object using dot notation
-    return path.split('.').reduce((obj, key) => obj?.[key], activeTheme) || fallback;
-  }, [activeTheme]);
-
   // Return unified API for accessing theme values
+  // Note: For SSR or direct token access, use activeTokens directly
   return <ThemeTokens>{
     theme,
-    activeTheme,
+    activeTokens,
     getToken,
-    getThemeValue,
     // Commonly used tokens with fallbacks
     colors: {
       primary: getToken('primary', '#3b82f6'),

package/src/lib/theme/test/testTheme.ts

@@ -270,7 +270,8 @@ export function createTestThemeObject(): Theme {
  */
 export function generateTestThemeCSSFromObject(): string {
   const theme = createTestThemeObject();
-  return createTheme(theme); // createTheme accepts both formats
+  const tokens = themeToDesignTokens(theme);
+  return createTheme(tokens);
 }
 
 // ============================================================================

package/src/lib/theme/types.ts

@@ -50,8 +50,8 @@ export interface ThemeChangeEvent {
     previousTheme: string | null;
     /** New theme name */
     currentTheme: string;
-    /** Theme object (for JS themes) */
-    themeObject?: Theme | null;
+    /** DesignTokens if using tokens-based theme */
+    tokens?: import('./tokens').DesignTokens | null;
     /** Timestamp of the change */
     timestamp: number;
     /** Whether the change was from user action or system */
@@ -126,7 +126,7 @@ export interface UseThemeOptions {
     /** Custom storage key */
     storageKey?: string;
     /** Callback when theme changes */
-    onChange?: (theme: string | Theme | import('./tokens').DesignTokens) => void;
+    onChange?: (theme: string | import('./tokens').DesignTokens) => void;
 }
 
 /**
@@ -135,10 +135,10 @@ export interface UseThemeOptions {
 export interface UseThemeReturn {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Function to change theme (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: import('./tokens').DesignTokens | null;
+    /** Function to change theme (supports string or DesignTokens) */
+    setTheme: (theme: string | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Whether a theme is currently loading */
@@ -213,8 +213,8 @@ export interface ThemeComponentOverrides {
 export interface ThemeProviderProps {
     /** Child components */
     children: React.ReactNode;
-    /** Default theme */
-    defaultTheme?: string | Theme;
+    /** Default theme (string name or DesignTokens) */
+    defaultTheme?: string | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>;
     /** Available themes */
     themes?: Record<string, ThemeMetadata>;
     /** Base path for theme CSS */
@@ -234,7 +234,7 @@ export interface ThemeProviderProps {
     /** Use minified CSS */
     useMinified?: boolean;
     /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme | import('./tokens').DesignTokens) => void;
+    onThemeChange?: (theme: string | import('./tokens').DesignTokens) => void;
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
@@ -245,10 +245,10 @@ export interface ThemeProviderProps {
 export interface ThemeContextValue {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Set theme function (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: import('./tokens').DesignTokens | null;
+    /** Set theme function (supports string or DesignTokens) */
+    setTheme: (theme: string | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Loading state */