@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/theme/createThemeFromConfig.ts

@@ -1,132 +0,0 @@
-/**
- * Create Theme from Atomix Config
- * 
- * Helper function to create a theme from atomix.config.ts,
- * similar to how Tailwind processes its config.
- * 
- * @example
- * ```typescript
- * import { createThemeFromConfig } from '@shohojdhara/atomix/theme';
- * import config from './atomix.config';
- * 
- * const theme = createThemeFromConfig(config);
- * ```
- */
-
-import type { AtomixConfig } from '../config';
-import { createTheme } from './createTheme';
-import type { ThemeOptions } from './types';
-
-/**
- * Convert config tokens to theme options
- */
-function configToThemeOptions(config: AtomixConfig): ThemeOptions {
-    const tokens = config.theme?.tokens || config.theme?.extend || {};
-    const options: ThemeOptions = {};
-
-    // Convert colors
-    if (tokens.colors) {
-        options.palette = {};
-        
-        // Handle primary color
-        if (tokens.colors.primary) {
-            const primary = tokens.colors.primary;
-            if (typeof primary === 'string') {
-                options.palette.primary = { main: primary };
-            } else if (typeof primary === 'object' && 'main' in primary) {
-                options.palette.primary = primary as any;
-            } else if (typeof primary === 'object' && '6' in primary) {
-                // Color scale format
-                options.palette.primary = { main: (primary as any)[6] || (primary as any).main };
-            }
-        }
-
-        // Handle other colors
-        if (tokens.colors) {
-            const colorKeys = ['secondary', 'error', 'warning', 'info', 'success'] as const;
-            colorKeys.forEach((key) => {
-                if (tokens.colors![key]) {
-                    const color = tokens.colors![key];
-                    if (typeof color === 'string') {
-                        options.palette![key] = { main: color };
-                    } else if (typeof color === 'object' && 'main' in color) {
-                        options.palette![key] = color as any;
-                    } else if (typeof color === 'object' && '6' in color) {
-                        options.palette![key] = { main: (color as any)[6] || (color as any).main };
-                    }
-                }
-            });
-        }
-    }
-
-    // Convert typography
-    if (tokens.typography) {
-        options.typography = {};
-        
-        if (tokens.typography.fontFamilies?.sans) {
-            options.typography.fontFamily = Array.isArray(tokens.typography.fontFamilies.sans)
-                ? tokens.typography.fontFamilies.sans.join(', ')
-                : tokens.typography.fontFamilies.sans;
-        }
-        
-        if (tokens.typography.fontSizes) {
-            // Map font sizes to theme typography
-            const baseSize = tokens.typography.fontSizes.base || tokens.typography.fontSizes.md;
-            if (baseSize) {
-                const numericSize = parseFloat(String(baseSize).replace(/[^\d.]/g, ''));
-                options.typography.fontSize = numericSize || 16;
-            }
-        }
-    }
-
-    // Convert spacing (if needed for theme spacing function)
-    if (tokens.spacing) {
-        // Spacing is handled via CSS variables, but we can set a base multiplier
-        options.spacing = 4; // Default 4px base unit
-    }
-
-    // Convert border radius
-    if (tokens.borderRadius) {
-        options.borderRadius = {};
-        Object.entries(tokens.borderRadius).forEach(([key, value]) => {
-            options.borderRadius![key as keyof typeof options.borderRadius] = String(value);
-        });
-    }
-
-    return options;
-}
-
-/**
- * Create a theme from Atomix configuration
- * 
- * This function converts atomix.config.ts format to a theme object
- * that can be used with ThemeProvider.
- * 
- * @param config - Atomix configuration object
- * @returns Theme object ready for use
- * 
- * @example
- * ```typescript
- * import { createThemeFromConfig } from '@shohojdhara/atomix/theme';
- * import config from './atomix.config';
- * 
- * const theme = createThemeFromConfig(config);
- * ```
- */
-export function createThemeFromConfig(config: AtomixConfig) {
-    const themeOptions = configToThemeOptions(config);
-    
-    // Create theme with options
-    const theme = createTheme(themeOptions);
-    
-    // Apply prefix if specified
-    if (config.prefix && config.prefix !== 'atomix') {
-        // Note: Prefix is applied when generating CSS variables
-        // The theme object itself doesn't store prefix
-    }
-    
-    return theme;
-}
-
-export default createThemeFromConfig;
-

package/src/lib/theme/devtools/CLI.ts

@@ -1,364 +0,0 @@
-/**
- * Theme CLI
- * 
- * Command-line interface for theme management
- */
-
-import { loadThemeConfig } from '../config/loader';
-import { validateConfig } from '../config/validator';
-
-/**
- * CLI command interface
- */
-export interface CLICommand {
-  name: string;
-  description: string;
-  options?: Record<string, string>;
-  handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
-}
-
-/**
- * Theme CLI
- * 
- * Command-line interface for theme operations
- */
-export class ThemeCLI {
-  private commands: Map<string, CLICommand> = new Map();
-
-  constructor() {
-    this.registerDefaultCommands();
-  }
-
-  /**
-   * Register default commands
-   */
-  private registerDefaultCommands(): void {
-    this.register({
-      name: 'validate',
-      description: 'Validate theme configuration',
-      options: {
-        '--config': 'Path to config file',
-        '--strict': 'Enable strict validation',
-      },
-      handler: this.handleValidate.bind(this),
-    });
-
-    this.register({
-      name: 'list',
-      description: 'List all available themes',
-      handler: this.handleList.bind(this),
-    });
-
-    this.register({
-      name: 'inspect',
-      description: 'Inspect a specific theme',
-      options: {
-        '--theme': 'Theme name to inspect',
-        '--json': 'Output as JSON',
-      },
-      handler: this.handleInspect.bind(this),
-    });
-
-    this.register({
-      name: 'compare',
-      description: 'Compare two themes',
-      options: {
-        '--theme1': 'First theme name',
-        '--theme2': 'Second theme name',
-      },
-      handler: this.handleCompare.bind(this),
-    });
-
-    this.register({
-      name: 'export',
-      description: 'Export theme to JSON',
-      options: {
-        '--theme': 'Theme name to export',
-        '--output': 'Output file path',
-      },
-      handler: this.handleExport.bind(this),
-    });
-
-    this.register({
-      name: 'help',
-      description: 'Show help information',
-      handler: this.handleHelp.bind(this),
-    });
-  }
-
-  /**
-   * Register a command
-   */
-  register(command: CLICommand): void {
-    this.commands.set(command.name, command);
-  }
-
-  /**
-   * Run CLI with arguments
-   */
-  async run(args: string[]): Promise<void> {
-    const [commandName, ...commandArgs] = args;
-
-    if (!commandName) {
-      this.handleHelp([], {});
-      return;
-    }
-
-    const command = this.commands.get(commandName);
-    if (!command) {
-      console.error(`Unknown command: ${commandName}`);
-      console.error('Run "atomix-theme help" for available commands');
-      process.exit(1);
-    }
-
-    try {
-      const { args: parsedArgs, options } = this.parseArgs(commandArgs);
-      await command.handler(parsedArgs, options);
-    } catch (error) {
-      console.error(`Error running command "${commandName}":`, error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Parse command arguments
-   */
-  private parseArgs(args: string[]): { args: string[]; options: Record<string, any> } {
-    const parsedArgs: string[] = [];
-    const options: Record<string, any> = {};
-
-    for (let i = 0; i < args.length; i++) {
-      const arg = args[i];
-      if (arg?.startsWith('--')) {
-        const key = arg.slice(2);
-        const nextArg = args[i + 1];
-        if (nextArg && !nextArg.startsWith('--')) {
-          options[key] = nextArg;
-          i++; // Skip next argument
-        } else {
-          options[key] = true;
-        }
-      } else if (arg) {
-        parsedArgs.push(arg);
-      }
-    }
-
-    return { args: parsedArgs, options };
-  }
-
-  /**
-   * Handle validate command
-   */
-  private handleValidate(args: string[], options: Record<string, any>): void {
-    try {
-      const config = loadThemeConfig();
-      const result = validateConfig(config);
-
-      if (result.valid) {
-        console.log('✅ Theme configuration is valid');
-        if (result.warnings.length > 0) {
-          console.log('\n⚠️  Warnings:');
-          result.warnings.forEach(warning => console.log(`  - ${warning}`));
-        }
-      } else {
-        console.log('❌ Theme configuration is invalid');
-        console.log('\nErrors:');
-        result.errors.forEach(error => console.log(`  - ${error}`));
-
-        if (result.warnings.length > 0) {
-          console.log('\nWarnings:');
-          result.warnings.forEach(warning => console.log(`  - ${warning}`));
-        }
-        process.exit(1);
-      }
-    } catch (error) {
-      console.error('Failed to load theme configuration:', error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Handle list command
-   */
-  private handleList(args: string[], options: Record<string, any>): void {
-    try {
-      const config = loadThemeConfig();
-      const themes = config.themes || {};
-      
-      console.log('Available Themes:\n');
-      
-      if (Object.keys(themes).length === 0) {
-        console.log('No themes found in configuration.');
-        return;
-      }
-
-      for (const [id, theme] of Object.entries(themes)) {
-        console.log(`  ${id}`);
-        console.log(`    Name: ${theme.name}`);
-        if (theme.description) {
-          console.log(`    Description: ${theme.description}`);
-        }
-        if (theme.version) {
-          console.log(`    Version: ${theme.version}`);
-        }
-        if (theme.status) {
-          console.log(`    Status: ${theme.status}`);
-        }
-        console.log();
-      }
-    } catch (error) {
-      console.error('Failed to list themes:', error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Handle inspect command
-   */
-  private handleInspect(args: string[], options: Record<string, any>): void {
-    const themeName = options.theme || args[0];
-    
-    if (!themeName) {
-      console.error('Error: Theme name is required');
-      console.error('Usage: atomix-theme inspect --theme <theme-name>');
-      process.exit(1);
-    }
-
-    try {
-      const config = loadThemeConfig();
-      const theme = config.themes?.[themeName];
-
-      if (!theme) {
-        console.error(`Error: Theme "${themeName}" not found`);
-        process.exit(1);
-      }
-
-      if (options.json) {
-        console.log(JSON.stringify(theme, null, 2));
-      } else {
-        console.log(`Theme: ${themeName}\n`);
-        console.log(JSON.stringify(theme, null, 2));
-      }
-    } catch (error) {
-      console.error('Failed to inspect theme:', error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Handle compare command
-   */
-  private handleCompare(args: string[], options: Record<string, any>): void {
-    const theme1 = options.theme1 || args[0];
-    const theme2 = options.theme2 || args[1];
-
-    if (!theme1 || !theme2) {
-      console.error('Error: Two theme names are required');
-      console.error('Usage: atomix-theme compare --theme1 <name1> --theme2 <name2>');
-      process.exit(1);
-    }
-
-    try {
-      const config = loadThemeConfig();
-      const themeA = config.themes?.[theme1];
-      const themeB = config.themes?.[theme2];
-
-      if (!themeA) {
-        console.error(`Error: Theme "${theme1}" not found`);
-        process.exit(1);
-      }
-
-      if (!themeB) {
-        console.error(`Error: Theme "${theme2}" not found`);
-        process.exit(1);
-      }
-
-      console.log(`Comparing: ${theme1} vs ${theme2}\n`);
-      console.log('Differences:');
-      
-      // Simple comparison (could be enhanced)
-      const keys = new Set([...Object.keys(themeA), ...Object.keys(themeB)]);
-      
-      for (const key of keys) {
-        const valueA = (themeA as any)[key];
-        const valueB = (themeB as any)[key];
-        
-        if (JSON.stringify(valueA) !== JSON.stringify(valueB)) {
-          console.log(`\n  ${key}:`);
-          console.log(`    ${theme1}: ${JSON.stringify(valueA)}`);
-          console.log(`    ${theme2}: ${JSON.stringify(valueB)}`);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to compare themes:', error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Handle export command
-   */
-  private handleExport(args: string[], options: Record<string, any>): void {
-    const themeName = options.theme || args[0];
-    const outputPath = options.output || `${themeName}.json`;
-
-    if (!themeName) {
-      console.error('Error: Theme name is required');
-      console.error('Usage: atomix-theme export --theme <theme-name> [--output <path>]');
-      process.exit(1);
-    }
-
-    try {
-      const config = loadThemeConfig();
-      const theme = config.themes?.[themeName];
-
-      if (!theme) {
-        console.error(`Error: Theme "${themeName}" not found`);
-        process.exit(1);
-      }
-
-      const fs = require('fs');
-      fs.writeFileSync(outputPath, JSON.stringify(theme, null, 2));
-      console.log(`✅ Theme exported to: ${outputPath}`);
-    } catch (error) {
-      console.error('Failed to export theme:', error);
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Handle help command
-   */
-  private handleHelp(args: string[], options: Record<string, any>): void {
-    console.log('Atomix Theme CLI\n');
-    console.log('Usage: atomix-theme <command> [options]\n');
-    console.log('Commands:');
-
-    for (const [name, command] of this.commands.entries()) {
-      console.log(`  ${name.padEnd(12)} ${command.description}`);
-
-      if (command.options) {
-        for (const [option, description] of Object.entries(command.options)) {
-          console.log(`    ${option.padEnd(16)} ${description}`);
-        }
-      }
-      console.log();
-    }
-  }
-}
-
-/**
- * Create CLI instance
- */
-export function createCLI(): ThemeCLI {
-  return new ThemeCLI();
-}
-
-/**
- * Run CLI with process arguments
- */
-export function runCLI(): void {
-  const cli = createCLI();
-  const args = process.argv.slice(2);
-  cli.run(args);
-}

package/src/lib/theme/runtime/ThemeManager.test.ts

@@ -1,192 +0,0 @@
-/**
- * ThemeManager Tests
- * 
- * Tests for the ThemeManager class
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { ThemeManager } from './ThemeManager';
-import { ThemeError, ThemeErrorCode } from '../errors';
-import type { ThemeMetadata } from '../types';
-
-// Mock dependencies
-vi.mock('../core/ThemeEngine', () => {
-  return {
-    ThemeEngine: class {
-      initialize = vi.fn().mockResolvedValue(undefined);
-      on = vi.fn();
-      getRegistry = vi.fn().mockReturnValue({
-        has: vi.fn().mockReturnValue(false),
-        register: vi.fn(),
-        getAllMetadata: vi.fn().mockReturnValue([]),
-      });
-      setTheme = vi.fn().mockResolvedValue(undefined);
-      getActiveTheme = vi.fn().mockReturnValue(null);
-      isThemeLoaded = vi.fn().mockReturnValue(false);
-      preloadTheme = vi.fn().mockResolvedValue(undefined);
-    },
-  };
-});
-vi.mock('../config/loader');
-vi.mock('../utils', () => ({
-  isBrowser: () => true,
-  isServer: () => false,
-  createLocalStorageAdapter: () => ({
-    getItem: vi.fn(),
-    setItem: vi.fn(),
-    removeItem: vi.fn(),
-    isAvailable: () => true,
-  }),
-}));
-
-describe('ThemeManager', () => {
-  let themeManager: ThemeManager;
-  const mockThemes: Record<string, ThemeMetadata> = {
-    'test-theme': {
-      name: 'Test Theme',
-      class: 'test-theme',
-      description: 'A test theme',
-    },
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (themeManager) {
-      themeManager.destroy();
-    }
-  });
-
-  describe('constructor', () => {
-    it('should create ThemeManager with default config', () => {
-      themeManager = new ThemeManager({ themes: {} });
-      expect(themeManager).toBeInstanceOf(ThemeManager);
-    });
-
-    it('should create ThemeManager with custom config', () => {
-      themeManager = new ThemeManager({
-        themes: mockThemes,
-        basePath: '/custom-themes',
-        storageKey: 'custom-key',
-      });
-      expect(themeManager).toBeInstanceOf(ThemeManager);
-    });
-
-    it('should initialize with themes from config', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const available = themeManager.getAvailableThemes();
-      expect(available.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  describe('getTheme', () => {
-    it('should return current theme', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const theme = themeManager.getTheme();
-      expect(typeof theme).toBe('string');
-    });
-
-    it('should return default theme if no theme set', () => {
-      themeManager = new ThemeManager({
-        themes: mockThemes,
-        defaultTheme: 'test-theme',
-      });
-      const theme = themeManager.getTheme();
-      expect(theme).toBe('test-theme');
-    });
-  });
-
-  describe('getAvailableThemes', () => {
-    it('should return available themes', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const themes = themeManager.getAvailableThemes();
-      expect(Array.isArray(themes)).toBe(true);
-    });
-  });
-
-  describe('event listeners', () => {
-    it('should add theme change listener', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const listener = vi.fn();
-      themeManager.on('themeChange', listener);
-      // Note: Actual event emission would require theme switching
-      expect(() => themeManager.on('themeChange', listener)).not.toThrow();
-    });
-
-    it('should remove theme change listener', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const listener = vi.fn();
-      themeManager.on('themeChange', listener);
-      themeManager.off('themeChange', listener);
-      expect(() => themeManager.off('themeChange', listener)).not.toThrow();
-    });
-
-    it('should add theme load listener', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const listener = vi.fn();
-      themeManager.on('themeLoad', listener);
-      expect(() => themeManager.on('themeLoad', listener)).not.toThrow();
-    });
-
-    it('should add theme error listener', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const listener = vi.fn();
-      themeManager.on('themeError', listener);
-      expect(() => themeManager.on('themeError', listener)).not.toThrow();
-    });
-  });
-
-  describe('isThemeLoaded', () => {
-    it('should check if theme is loaded', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const isLoaded = themeManager.isThemeLoaded('test-theme');
-      expect(typeof isLoaded).toBe('boolean');
-    });
-  });
-
-  describe('destroy', () => {
-    it('should destroy theme manager', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      expect(() => themeManager.destroy()).not.toThrow();
-    });
-
-    it('should clear event listeners on destroy', () => {
-      themeManager = new ThemeManager({ themes: mockThemes });
-      const listener = vi.fn();
-      themeManager.on('themeChange', listener);
-      themeManager.destroy();
-      // After destroy, listeners should be cleared
-      expect(() => themeManager.destroy()).not.toThrow();
-    });
-  });
-
-  describe('RTL support', () => {
-    it('should get RTL manager when configured', () => {
-      themeManager = new ThemeManager({
-        themes: mockThemes,
-        rtl: { enabled: true, direction: 'ltr' },
-      });
-      const rtlManager = themeManager.getRTLManager();
-      expect(rtlManager).toBeDefined();
-    });
-
-    it('should set direction', () => {
-      themeManager = new ThemeManager({
-        themes: mockThemes,
-        rtl: { enabled: true, direction: 'ltr' },
-      });
-      expect(() => themeManager.setDirection('rtl')).not.toThrow();
-    });
-
-    it('should get direction', () => {
-      themeManager = new ThemeManager({
-        themes: mockThemes,
-        rtl: { enabled: true, direction: 'ltr' },
-      });
-      const direction = themeManager.getDirection();
-      expect(['ltr', 'rtl']).toContain(direction);
-    });
-  });
-});