@shohojdhara/atomix 0.3.5 → 0.3.6

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,155 @@
+/**
+ * Theme Composition Utilities
+ * 
+ * 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, any>>(...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 any, sourceValue as any) as any;
+            } else {
+                // Override with source value
+                result[key] = sourceValue as any;
+            }
+        }
+    }
+
+    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 {
+    // If baseTheme is a complete Theme, extract the options
+    const baseOptions: ThemeOptions = (baseTheme as any).__isJSTheme
+        ? extractThemeOptions(baseTheme as Theme)
+        : (baseTheme as ThemeOptions);
+
+    const merged = mergeTheme(baseOptions, extension);
+    return createThemeObject(merged);
+}
+
+/**
+ * Extract theme options from a complete Theme object
+ */
+function extractThemeOptions(theme: Theme): ThemeOptions {
+    return {
+        name: theme.name,
+        class: theme.class,
+        description: theme.description,
+        author: theme.author,
+        version: theme.version,
+        tags: theme.tags,
+        supportsDarkMode: theme.supportsDarkMode,
+        status: theme.status,
+        a11y: theme.a11y,
+        color: theme.color,
+        features: theme.features,
+        dependencies: theme.dependencies,
+        palette: {
+            primary: theme.palette.primary,
+            secondary: theme.palette.secondary,
+            error: theme.palette.error,
+            warning: theme.palette.warning,
+            info: theme.palette.info,
+            success: theme.palette.success,
+            background: theme.palette.background,
+            text: theme.palette.text,
+        },
+        typography: {
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.fontSize,
+            fontWeightLight: theme.typography.fontWeightLight,
+            fontWeightRegular: theme.typography.fontWeightRegular,
+            fontWeightMedium: theme.typography.fontWeightMedium,
+            fontWeightSemiBold: theme.typography.fontWeightSemiBold,
+            fontWeightBold: theme.typography.fontWeightBold,
+            h1: theme.typography.h1,
+            h2: theme.typography.h2,
+            h3: theme.typography.h3,
+            h4: theme.typography.h4,
+            h5: theme.typography.h5,
+            h6: theme.typography.h6,
+            body1: theme.typography.body1,
+            body2: theme.typography.body2,
+        },
+        shadows: theme.shadows,
+        transitions: theme.transitions,
+        zIndex: theme.zIndex,
+        custom: theme.custom,
+    };
+}
+
+export default {
+    deepMerge,
+    mergeTheme,
+    extendTheme,
+};

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

@@ -0,0 +1,94 @@
+/**
+ * Core Theme Functions
+ * 
+ * Unified theme system that handles both DesignTokens and Theme objects.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ * Config file is required for automatic loading.
+ */
+
+import type { DesignTokens } from '../tokens/tokens';
+import type { Theme } from '../types';
+import type { GenerateCSSVariablesOptions } from '../generators/generateCSS';
+import { createTokens } from '../tokens/tokens';
+import { generateCSSVariables } from '../generators/generateCSS';
+import { themeToDesignTokens } from '../adapters/themeAdapter';
+import { loadThemeFromConfigSync } from '../config/configLoader';
+
+/**
+ * Create theme CSS from tokens or Theme object
+ * 
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ * Config file is required for automatic loading.
+ * 
+ * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ * 
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts (config file required)
+ * const css = createTheme();
+ * 
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ * 
+ * // Using Theme object
+ * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
+ * const css = createTheme(theme);
+ * 
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */
+export function createTheme(
+  input?: Partial<DesignTokens> | Theme,
+  options?: GenerateCSSVariablesOptions
+): string {
+  let tokens: Partial<DesignTokens>;
+  let configPrefix: string | undefined;
+
+  // If no input provided, load from config (required)
+  if (!input) {
+    const configTokens = loadThemeFromConfigSync();
+    
+    // Get prefix from config
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const { loadAtomixConfig } = require('../../config/loader');
+      const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: true });
+      configPrefix = config?.prefix;
+    } catch (error) {
+      // Prefix loading failed, but tokens were loaded, so continue
+    }
+    
+    tokens = configTokens;
+  } else {
+    // Check if it's a Theme object
+    const isThemeObject = (input as any).__isJSTheme === true || 
+      ((input as any).palette && (input as any).typography);
+
+    if (isThemeObject) {
+      // Convert Theme to DesignTokens
+      tokens = themeToDesignTokens(input as Theme);
+    } else {
+      // Already DesignTokens
+      tokens = input as Partial<DesignTokens>;
+    }
+  }
+
+  // Merge with defaults and generate CSS
+  const allTokens = createTokens(tokens);
+  
+  // Use prefix from config if not provided in options
+  const finalOptions: GenerateCSSVariablesOptions = {
+    ...options,
+    prefix: options?.prefix ?? configPrefix ?? 'atomix',
+  };
+  
+  return generateCSSVariables(allTokens, finalOptions);
+}
+

package/src/lib/theme/{createTheme.ts → core/createThemeObject.ts}

@@ -1,12 +1,16 @@
 /**
- * createTheme - Create a theme object with computed values
+ * createThemeObject - Create a theme object with computed values
  * 
  * Similar to Material-UI's createTheme, this function accepts theme configuration
  * options and returns a complete theme object with computed values.
  * 
+ * NOTE: For most use cases, use the simple theme system's `createTheme` instead,
+ * which generates CSS from DesignTokens. This function is for advanced use cases
+ * that need the full Theme object structure.
+ * 
  * @example
  * ```typescript
- * const theme = createTheme({
+ * const theme = createThemeObject({
  *   palette: {
  *     primary: { main: '#7AFFD7' },
  *     secondary: { main: '#FF5733' },
@@ -31,8 +35,8 @@ import type {
     TransitionOptions,
     ZIndexOptions,
     BorderRadiusOptions,
-} from './types';
-import { hexToRgb, getLuminance, getContrastText, lighten, darken, createSpacing } from './themeUtils';
+} from '../types';
+import { hexToRgb, getLuminance, getContrastText, lighten, darken, createSpacing } from '../utils/themeUtils';
 import { deepMerge } from './composeTheme';
 
 // ============================================================================
@@ -291,7 +295,7 @@ function createBreakpoints(breakpointsInput?: BreakpointsOptions): Theme['breakp
  * @param options - Theme configuration options
  * @returns Complete theme object
  */
-export function createTheme(...options: ThemeOptions[]): Theme {
+export function createThemeObject(...options: ThemeOptions[]): Theme {
     // Merge all options
     const mergedOptions = options.reduce((acc, option) => deepMerge(acc, option), {} as ThemeOptions);
 
@@ -385,4 +389,4 @@ export function createTheme(...options: ThemeOptions[]): Theme {
     return theme;
 }
 
-export default createTheme;
+export default createThemeObject;

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

@@ -1,24 +1,10 @@
 /**
- * Theme Core Module
+ * Core Theme Engine
  * 
- * Core engine components for theme management
+ * Core theme creation, composition, and registry functionality
  */
 
-export { ThemeEngine } from './ThemeEngine';
+export { createTheme } from './createTheme';
+export { createThemeObject } from './createThemeObject';
+export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
 export { ThemeRegistry } from './ThemeRegistry';
-export { ThemeCache } from './ThemeCache';
-export { ThemeValidator } from './ThemeValidator';
-
-export type {
-  ThemeChangeEvent,
-  ThemeLoadOptions,
-  ThemeChangeListener,
-  ThemeLoadListener,
-  ThemeErrorListener,
-  ThemeEngineConfig,
-} from './ThemeEngine';
-
-export type {
-  ValidationResult,
-  A11yIssue,
-} from './ThemeValidator';