@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/theme/core/ThemeRegistry.ts

@@ -1,284 +1,93 @@
 /**
- * Theme Registry
- * 
- * Central registry for all themes with discovery and dependency management
+ * Theme Metadata interface
  */
+export interface ThemeMetadata {
+  name: string;
+  class: string;
+  description?: string;
+  version?: string;
+  [key: string]: any;
+}
 
-import type { Theme, ThemeMetadata } from '../types';
-import type { ThemeDefinition, LoadedThemeConfig } from '../config/types';
-import { loadThemeConfig } from '../config/loader';
+/**
+ * Theme Registry type - a record of theme IDs to metadata
+ */
+export type ThemeRegistry = Record<string, ThemeMetadata>;
 
 /**
- * Registry entry
+ * Create a new theme registry
  */
-interface RegistryEntry {
-  /** Theme ID */
-  id: string;
-  /** Theme definition from config */
-  definition: ThemeDefinition;
-  /** Resolved theme object (for JS themes) */
-  theme?: Theme;
-  /** Whether theme is loaded */
-  loaded: boolean;
-  /** Loading promise (if currently loading) */
-  loading?: Promise<Theme | void>;
-  /** Dependencies */
-  dependencies: string[];
-  /** Dependent themes (themes that depend on this one) */
-  dependents: string[];
+export function createThemeRegistry(): ThemeRegistry {
+  return {};
 }
 
 /**
- * Theme Registry
- * 
- * Manages theme registration, discovery, and dependency resolution
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
  */
-export class ThemeRegistry {
-  private entries: Map<string, RegistryEntry> = new Map();
-  private config: LoadedThemeConfig | null = null;
-  private initialized: boolean = false;
-
-  /**
-   * Initialize registry from config
-   */
-  async initialize(config?: LoadedThemeConfig): Promise<void> {
-    if (this.initialized) {
-      return;
-    }
-
-    // Load config if not provided
-    if (!config) {
-      try {
-        this.config = loadThemeConfig();
-      } catch (error) {
-        // In browser environments, config loading will fail
-        // Use empty config as fallback
-        this.config = {
-          themes: {},
-          build: {
-            output: { directory: 'themes', formats: { expanded: '.css', compressed: '.min.css' } },
-            sass: { style: 'expanded', sourceMap: true, loadPaths: ['src'] },
-          },
-          runtime: {
-            basePath: '',
-            defaultTheme: undefined, // No default - use built-in styles
-          },
-          integration: {
-            cssVariables: { colorMode: '--color-mode' },
-            classNames: { theme: 'data-theme', colorMode: 'data-color-mode' },
-          },
-          dependencies: {},
-          validated: false,
-          errors: [],
-          warnings: [],
-        };
-      }
-    } else {
-      this.config = config;
-    }
-
-    // Register all themes from config
-    for (const [themeId, definition] of Object.entries(this.config.themes)) {
-      this.register(themeId, definition);
-    }
-
-    // Resolve dependencies
-    this.resolveDependencies();
-
-    this.initialized = true;
-  }
-
-  /**
-   * Register a theme
-   */
-  register(themeId: string, definition: ThemeDefinition): void {
-    // Get dependencies from config or definition
-    const dependencies = 
-      this.config?.dependencies?.[themeId] || 
-      definition.dependencies || 
-      [];
-
-    const entry: RegistryEntry = {
-      id: themeId,
-      definition,
-      loaded: false,
-      dependencies: [...dependencies],
-      dependents: [],
-    };
-
-    this.entries.set(themeId, entry);
-  }
-
-  /**
-   * Get theme entry
-   */
-  get(themeId: string): RegistryEntry | undefined {
-    return this.entries.get(themeId);
-  }
-
-  /**
-   * Check if theme exists
-   */
-  has(themeId: string): boolean {
-    return this.entries.has(themeId);
-  }
-
-  /**
-   * Get all theme IDs
-   */
-  getAllIds(): string[] {
-    return Array.from(this.entries.keys());
-  }
-
-  /**
-   * Get all theme metadata
-   */
-  getAllMetadata(): ThemeMetadata[] {
-    return Array.from(this.entries.values()).map(entry => ({
-      id: entry.id,
-      name: entry.definition.name,
-      type: entry.definition.type,
-      class: entry.definition.class,
-      description: entry.definition.description,
-      author: entry.definition.author,
-      version: entry.definition.version,
-      tags: entry.definition.tags,
-      supportsDarkMode: entry.definition.supportsDarkMode,
-      status: entry.definition.status,
-      a11y: entry.definition.a11y,
-      color: entry.definition.color,
-      features: entry.definition.features,
-      dependencies: entry.dependencies,
-    }));
-  }
-
-  /**
-   * Get theme definition
-   */
-  getDefinition(themeId: string): ThemeDefinition | undefined {
-    return this.entries.get(themeId)?.definition;
-  }
-
-  /**
-   * Get theme object (for JS themes)
-   */
-  getTheme(themeId: string): Theme | undefined {
-    return this.entries.get(themeId)?.theme;
-  }
-
-  /**
-   * Set theme object (for JS themes)
-   */
-  setTheme(themeId: string, theme: Theme): void {
-    const entry = this.entries.get(themeId);
-    if (entry) {
-      entry.theme = theme;
-      entry.loaded = true;
-    }
-  }
-
-  /**
-   * Get dependencies for a theme
-   */
-  getDependencies(themeId: string): string[] {
-    return this.entries.get(themeId)?.dependencies || [];
-  }
-
-  /**
-   * Get dependents for a theme (themes that depend on this one)
-   */
-  getDependents(themeId: string): string[] {
-    return this.entries.get(themeId)?.dependents || [];
-  }
-
-  /**
-   * Resolve all dependencies in correct order
-   */
-  resolveDependencyOrder(themeId: string): string[] {
-    const resolved: string[] = [];
-    const visited = new Set<string>();
-    const visiting = new Set<string>();
-
-    const visit = (id: string): void => {
-      if (visiting.has(id)) {
-        throw new Error(`Circular dependency detected involving theme: ${id}`);
-      }
-      if (visited.has(id)) {
-        return;
-      }
-
-      visiting.add(id);
-      const entry = this.entries.get(id);
-      if (entry) {
-        for (const dep of entry.dependencies) {
-          if (!this.has(dep)) {
-            throw new Error(`Theme "${id}" depends on non-existent theme: ${dep}`);
-          }
-          visit(dep);
-        }
-      }
-      visiting.delete(id);
-      visited.add(id);
-      resolved.push(id);
-    };
+export function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata): void {
+  registry[id] = metadata;
+}
 
-    visit(themeId);
-    return resolved;
-  }
+/**
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function unregisterTheme(registry: ThemeRegistry, id: string): boolean {
+  const exists = id in registry;
+  delete registry[id];
+  return exists;
+}
 
-  /**
-   * Resolve dependencies and build dependency graph
-   */
-  private resolveDependencies(): void {
-    // Build dependents map
-    for (const entry of this.entries.values()) {
-      for (const dep of entry.dependencies) {
-        const depEntry = this.entries.get(dep);
-        if (depEntry) {
-          if (!depEntry.dependents.includes(entry.id)) {
-            depEntry.dependents.push(entry.id);
-          }
-        }
-      }
-    }
-  }
+/**
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function hasTheme(registry: ThemeRegistry, id: string): boolean {
+  return id in registry;
+}
 
-  /**
-   * Validate all themes
-   */
-  validate(): { valid: boolean; errors: string[] } {
-    const errors: string[] = [];
+/**
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata | undefined {
+  return registry[id];
+}
 
-    // Check for circular dependencies
-    for (const themeId of this.entries.keys()) {
-      try {
-        this.resolveDependencyOrder(themeId);
-      } catch (error) {
-        errors.push(error instanceof Error ? error.message : String(error));
-      }
-    }
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+export function getAllThemes(registry: ThemeRegistry): ThemeMetadata[] {
+  return Object.values(registry);
+}
 
-    // Check for missing dependencies
-    for (const [themeId, entry] of this.entries.entries()) {
-      for (const dep of entry.dependencies) {
-        if (!this.has(dep)) {
-          errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`);
-        }
-      }
-    }
+/**
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */
+export function getThemeIds(registry: ThemeRegistry): string[] {
+  return Object.keys(registry);
+}
 
-    return {
-      valid: errors.length === 0,
-      errors,
-    };
-  }
+/**
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */
+export function clearThemes(registry: ThemeRegistry): void {
+  Object.keys(registry).forEach(key => delete registry[key]);
+}
 
-  /**
-   * Clear registry
-   */
-  clear(): void {
-    this.entries.clear();
-    this.config = null;
-    this.initialized = false;
-  }
+/**
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */
+export function getThemeCount(registry: ThemeRegistry): number {
+  return Object.keys(registry).length;
 }

package/src/lib/theme/core/__tests__/createTheme.test.ts

@@ -0,0 +1,132 @@
+/**
+ * createTheme Tests
+ * 
+ * Tests for createTheme function including automatic config loading
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { createTheme } from '../createTheme';
+import type { DesignTokens } from '../../tokens/tokens';
+import type { Theme } from '../../types';
+
+describe('createTheme', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Automatic Config Loading', () => {
+    it('should work without input (uses defaults or config)', () => {
+      // createTheme() should work even if config is not available
+      // It will fall back to default tokens
+      const css = createTheme();
+      
+      expect(typeof css).toBe('string');
+      expect(css.length).toBeGreaterThan(0);
+      expect(css).toContain(':root');
+    });
+
+    it('should generate valid CSS with default tokens', () => {
+      const css = createTheme();
+      
+      // Should contain CSS variable declarations
+      expect(css).toMatch(/--atomix-[a-z-]+:\s*[^;]+;/);
+    });
+  });
+
+  describe('DesignTokens Input', () => {
+    it('should accept DesignTokens and generate CSS', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+        'secondary': '#FF5733',
+        'spacing-4': '1rem',
+      };
+
+      const css = createTheme(tokens);
+      
+      expect(css).toContain('--atomix-primary');
+      expect(css).toContain('#7AFFD7');
+      expect(css).toContain('--atomix-secondary');
+      expect(css).toContain('#FF5733');
+      expect(css).toContain('--atomix-spacing-4');
+      expect(css).toContain('1rem');
+    });
+
+    it('should merge with default tokens', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#CUSTOM',
+      };
+
+      const css = createTheme(tokens);
+      
+      // Should contain custom primary
+      expect(css).toContain('--atomix-primary');
+      expect(css).toContain('#CUSTOM');
+      
+      // Should also contain default tokens
+      expect(css).toContain('--atomix-secondary');
+    });
+  });
+
+  describe('Options', () => {
+    it('should respect prefix option', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+      };
+
+      const css = createTheme(tokens, { prefix: 'myapp' });
+      
+      expect(css).toContain('--myapp-primary');
+      expect(css).not.toContain('--atomix-primary');
+    });
+
+    it('should respect selector option', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+      };
+
+      const css = createTheme(tokens, { selector: '[data-theme="dark"]' });
+      
+      expect(css).toContain('[data-theme="dark"]');
+      expect(css).not.toContain(':root');
+    });
+
+    it('should use default prefix when not provided', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+      };
+
+      const css = createTheme(tokens);
+      
+      expect(css).toContain('--atomix-primary');
+    });
+  });
+
+  describe('CSS Output Format', () => {
+    it('should generate valid CSS syntax', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+      };
+
+      const css = createTheme(tokens);
+      
+      // Should be valid CSS
+      expect(css).toMatch(/^[^{]*\{[^}]*\}/s);
+      expect(css).toContain(':');
+      expect(css).toContain(';');
+    });
+
+    it('should format CSS with proper indentation', () => {
+      const tokens: Partial<DesignTokens> = {
+        'primary': '#7AFFD7',
+        'secondary': '#FF5733',
+      };
+
+      const css = createTheme(tokens);
+      
+      // Should have proper formatting
+      expect(css).toContain('\n');
+    });
+  });
+});
+
+

package/src/lib/theme/core/composeTheme.ts

@@ -0,0 +1,105 @@
+/**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing, merging, and extending themes.
+ */
+
+import type { Theme, ThemeOptions } from '../types';
+import { createThemeObject } from './createThemeObject';
+
+// ============================================================================
+// Deep Merge Utility
+// ============================================================================
+
+/**
+ * Check if value is an object
+ */
+function isObject(item: any): item is Record<string, any> {
+    return item && typeof item === 'object' && !Array.isArray(item) && typeof item !== 'function';
+}
+
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */
+export function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T {
+    if (objects.length === 0) return {} as T;
+    if (objects.length === 1) return objects[0] as T;
+
+    const [target, ...sources] = objects;
+    const result = { ...target } as T;
+
+    for (const source of sources) {
+        if (!source) continue;
+
+        for (const key in source) {
+            if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+
+            const targetValue = result[key];
+            const sourceValue = source[key];
+
+            if (isObject(targetValue) && isObject(sourceValue)) {
+                // Recursively merge objects
+                result[key] = deepMerge(targetValue as Record<string, unknown>, sourceValue as Record<string, unknown>) as T[Extract<keyof T, string>];
+            } else {
+                // Override with source value
+                result[key] = sourceValue as T[Extract<keyof T, string>];
+            }
+        }
+    }
+
+    return result;
+}
+
+// ============================================================================
+// Theme Merging
+// ============================================================================
+
+/**
+ * Merge multiple theme options into a single theme options object
+ *
+ * @param themes - Theme options to merge
+ * @returns Merged theme options
+ *
+ * @example
+ * ```typescript
+ * const baseTheme = { palette: { primary: { main: '#000' } } };
+ * const customTheme = { palette: { secondary: { main: '#fff' } } };
+ * const merged = mergeTheme(baseTheme, customTheme);
+ * ```
+ */
+export function mergeTheme(...themes: ThemeOptions[]): ThemeOptions {
+    return deepMerge({}, ...themes);
+}
+
+/**
+ * Extend an existing theme with new options
+ *
+ * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
+ * @param extension - Theme options to extend with
+ * @returns New theme with extended options
+ *
+ * @example
+ * ```typescript
+ * const base = createTheme({ palette: { primary: { main: '#000' } } });
+ * const extended = extendTheme(base, {
+ *   palette: { secondary: { main: '#fff' } }
+ * });
+ * ```
+ */
+export function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme {
+    // Convert baseTheme to ThemeOptions if it's a complete Theme
+    const baseOptions: ThemeOptions = (baseTheme as Theme & { __isJSTheme?: boolean }).__isJSTheme
+        ? { ...baseTheme } as ThemeOptions
+        : baseTheme;
+
+    // Merge and create new theme
+    const merged = mergeTheme(baseOptions, extension);
+    return createThemeObject(merged);
+}
+
+export default {
+    deepMerge,
+    mergeTheme,
+    extendTheme,
+};