@shohojdhara/atomix 0.3.7 → 0.3.8

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,8 +7,8 @@
 
 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 { getLogger } from '../errors';
 import { createTheme } from '../core';
 import { injectCSS, removeCSS } from '../utils/injectCSS';
@@ -30,7 +30,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 +59,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 +98,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 +106,40 @@ 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') {
+      const { createTokens } = require('../tokens/tokens');
+      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,50 +153,120 @@ 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 { createTokens } = await import('../tokens/tokens');
+        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) {
@@ -183,21 +278,41 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
                 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 +321,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]);
 
@@ -269,14 +404,21 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     } ;
   }, []);
 
+  // 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,
@@ -284,9 +426,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     themeManager,
   }), [
     currentTheme, 
-    activeTheme, 
+    activeTokens, 
     setTheme, 
-    themes, 
+    availableThemes, // Use memoized value
     isLoading, 
     error, 
     isThemeLoaded, 

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 */

package/src/lib/theme/utils/componentTheming.ts

@@ -2,15 +2,16 @@
  * Component Theming Utilities
  * 
  * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
 
-import type { Theme } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
 
 export interface ComponentThemeOptions {
   component: string;
   variant?: string;
   size?: string;
-  theme: Theme;
+  tokens?: Partial<DesignTokens>;
 }
 
 /**
@@ -44,18 +45,18 @@ export function getComponentThemeValue(
 }
 
 /**
- * Generate component-specific CSS variables from theme
+ * Generate component-specific CSS variables from DesignTokens
  */
 export function generateComponentCSSVars(
   component: string,
-  theme: Theme,
+  tokens?: Partial<DesignTokens>,
   variant?: string,
   size?: string
 ): Record<string, string> {
   const vars: Record<string, string> = {};
   
-  // This is a simplified implementation - in a real system you'd have more
-  // sophisticated logic to extract component-specific values from the theme
+  if (!tokens) return vars;
+  
   const prefixParts = ['atomix', component];
   
   if (variant) {
@@ -68,47 +69,54 @@ export function generateComponentCSSVars(
   
   const prefix = prefixParts.join('-');
   
-  // Add common component properties
-  if (theme.palette) {
-    vars[`--${prefix}-color`] = theme.palette.primary?.main || '#7c3aed';
-    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || '#5b21b6';
-    vars[`--${prefix}-color-active`] = theme.palette.primary?.main || '#7c3aed';
-    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || '#9ca3af';
+  // Map common DesignTokens to component-specific CSS variables
+  if (tokens.primary) {
+    vars[`--${prefix}-color`] = tokens.primary;
+  }
+  if (tokens['primary-9']) {
+    vars[`--${prefix}-color-hover`] = tokens['primary-9'];
+  }
+  if (tokens['body-color']) {
+    vars[`--${prefix}-color-disabled`] = tokens['body-color'];
   }
   
-  if (theme.typography) {
-    vars[`--${prefix}-font-family`] = theme.typography.fontFamily || 'Inter, sans-serif';
-    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : '16px';
+  if (tokens['body-font-family']) {
+    vars[`--${prefix}-font-family`] = tokens['body-font-family'];
+  }
+  if (tokens['body-font-size']) {
+    vars[`--${prefix}-font-size`] = tokens['body-font-size'];
   }
   
-  if (theme.spacing) {
-    const spacing = typeof theme.spacing === 'function' ? theme.spacing : (val: number) => val * 8;
-    vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`;
-    vars[`--${prefix}-spacing-sm`] = `${spacing(0.5)}px`;
-    vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`;
-    vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
+  if (tokens['spacing-1']) {
+    vars[`--${prefix}-spacing-sm`] = tokens['spacing-1'];
+  }
+  if (tokens['spacing-2']) {
+    vars[`--${prefix}-spacing-md`] = tokens['spacing-2'];
+  }
+  if (tokens['spacing-4']) {
+    vars[`--${prefix}-spacing-lg`] = tokens['spacing-4'];
   }
   
   return vars;
 }
 
 /**
- * Apply consistent theme to component style object
+ * Apply consistent theme to component style object using DesignTokens
  */
 export function applyComponentTheme(
   component: string,
   style: React.CSSProperties = {},
   variant?: string,
   size?: string,
-  theme?: Theme
+  tokens?: Partial<DesignTokens>
 ): React.CSSProperties {
-  // If no theme provided, return original style
-  if (!theme) {
+  // If no tokens provided, return original style
+  if (!tokens) {
     return style;
   }
   
   // Generate component-specific CSS variables
-  const componentVars = generateComponentCSSVars(component, theme, variant, size);
+  const componentVars = generateComponentCSSVars(component, tokens, variant, size);
   
   // Merge with existing style
   return {
@@ -124,7 +132,7 @@ export function useComponentTheme(
   component: string,
   variant?: string,
   size?: string,
-  theme?: Theme
+  tokens?: Partial<DesignTokens>
 ): (property: string) => string {
   return (property: string) => {
     return getComponentThemeValue(component, property, variant, size);