@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/theme/config/types.ts

@@ -5,14 +5,14 @@
  */
 
 import type {
-  ThemeConfig,
-  ThemeDefinition,
-  CSSThemeDefinition,
-  JSThemeDefinition,
+  AtomixConfig,
   BuildConfig,
   RuntimeConfig,
   IntegrationConfig,
-} from '../../../../theme.config';
+  ThemeDefinition,
+  CSSThemeDefinition,
+  JSThemeDefinition,
+} from '../../config';
 
 /**
  * Configuration loader options
@@ -29,13 +29,27 @@ export interface ConfigLoaderOptions {
 /**
  * Loaded and validated theme configuration
  */
-export interface LoadedThemeConfig extends ThemeConfig {
+export interface LoadedThemeConfig {
+  /** Registered themes */
+  themes: Record<string, ThemeDefinition>;
+  /** Build configuration */
+  build: BuildConfig;
+  /** Runtime configuration */
+  runtime: RuntimeConfig;
+  /** Integration settings */
+  integration: IntegrationConfig;
+  /** Theme dependencies mapping */
+  dependencies: Record<string, string[]>;
   /** Whether config was validated */
   validated: boolean;
   /** Validation errors (if any) */
   errors?: string[];
   /** Validation warnings (if any) */
   warnings?: string[];
+  /** Internal tokens (for generator) */
+  __tokens?: any;
+  /** Internal extensions (for generator) */
+  __extend?: any;
 }
 
 /**
@@ -88,7 +102,7 @@ export interface ConfigValidationResult {
 }
 
 export type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/config/validator.ts

@@ -5,7 +5,7 @@
  */
 
 import type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/constants.ts

@@ -54,14 +54,24 @@ export const CSS_EXTENSIONS = {
 } as const;
 
 /**
- * Default config file path
+ * Default Atomix config file path
+ */
+export const DEFAULT_ATOMIX_CONFIG_PATH = 'atomix.config.ts';
+
+/**
+ * Default config file path (legacy)
  */
 export const DEFAULT_CONFIG_PATH = 'theme.config.ts';
 
 /**
  * Default config file path (relative)
  */
-export const DEFAULT_CONFIG_RELATIVE_PATH = '../../../../theme.config';
+export const DEFAULT_CONFIG_RELATIVE_PATH = '../../../../atomix.config';
+
+/**
+ * Default legacy config file path (relative)
+ */
+export const DEFAULT_LEGACY_CONFIG_RELATIVE_PATH = '../../../../theme.config';
 
 /**
  * Validation thresholds

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

@@ -538,9 +538,13 @@ export class ThemeEngine {
   /**
    * Add change listener
    */
+  // @ts-ignore - TypeScript overloads are valid, ESLint doesn't understand them
   on(event: 'change', listener: ThemeChangeListener): void;
+  // @ts-ignore
   on(event: 'load', listener: ThemeLoadListener): void;
+  // @ts-ignore
   on(event: 'error', listener: ThemeErrorListener): void;
+  // @ts-ignore
   on(event: 'revert', listener: ThemeRevertListener): void;
   on(
     event: 'change' | 'load' | 'error' | 'revert',
@@ -560,9 +564,13 @@ export class ThemeEngine {
   /**
    * Remove listener
    */
+  // @ts-ignore - TypeScript overloads are valid, ESLint doesn't understand them
   off(event: 'change', listener: ThemeChangeListener): void;
+  // @ts-ignore
   off(event: 'load', listener: ThemeLoadListener): void;
+  // @ts-ignore
   off(event: 'error', listener: ThemeErrorListener): void;
+  // @ts-ignore
   off(event: 'revert', listener: ThemeRevertListener): void;
   off(
     event: 'change' | 'load' | 'error' | 'revert',

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

@@ -392,8 +392,11 @@ export class ThemeValidator {
 
     for (let i = 0; i < numericEntries.length; i++) {
       for (let j = i + 1; j < numericEntries.length; j++) {
-        const [keyA, valueA] = numericEntries[i];
-        const [keyB, valueB] = numericEntries[j];
+        const entryA = numericEntries[i];
+        const entryB = numericEntries[j];
+        if (!entryA || !entryB) continue;
+        const [keyA, valueA] = entryA;
+        const [keyB, valueB] = entryB;
         const diff = Math.abs(valueA - valueB);
         if (diff < 10 && diff > 0) {
           warnings.push(

package/src/lib/theme/createTheme.ts

@@ -312,7 +312,6 @@ export function createTheme(...options: ThemeOptions[]): Theme {
         }),
         background: {
             default: mergedOptions.palette?.background?.default || DEFAULT_PALETTE.background.default,
-            paper: mergedOptions.palette?.background?.paper || DEFAULT_PALETTE.background.paper,
             subtle: mergedOptions.palette?.background?.subtle || DEFAULT_PALETTE.background.subtle,
         },
         text: {

package/src/lib/theme/createThemeFromConfig.ts

@@ -0,0 +1,132 @@
+/**
+ * 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

@@ -4,9 +4,6 @@
  * Command-line interface for theme management
  */
 
-import { generateConfigTemplate } from '../generators/ConfigGenerator';
-import { generateCSS } from '../generators/CSSGenerator';
-import { generateTypes } from '../generators/TypeGenerator';
 import { loadThemeConfig } from '../config/loader';
 import { validateConfig } from '../config/validator';
 
@@ -37,39 +34,49 @@ export class ThemeCLI {
    */
   private registerDefaultCommands(): void {
     this.register({
-      name: 'init',
-      description: 'Initialize theme configuration',
+      name: 'validate',
+      description: 'Validate theme configuration',
       options: {
-        '--format': 'Output format (typescript, javascript, json)',
-        '--examples': 'Include example themes',
+        '--config': 'Path to config file',
+        '--strict': 'Enable strict validation',
       },
-      handler: this.handleInit.bind(this),
+      handler: this.handleValidate.bind(this),
     });
 
     this.register({
-      name: 'validate',
-      description: 'Validate theme configuration',
-      handler: this.handleValidate.bind(this),
+      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: 'build',
-      description: 'Build theme CSS files',
+      name: 'compare',
+      description: 'Compare two themes',
       options: {
-        '--output': 'Output directory',
-        '--minify': 'Minify output',
+        '--theme1': 'First theme name',
+        '--theme2': 'Second theme name',
       },
-      handler: this.handleBuild.bind(this),
+      handler: this.handleCompare.bind(this),
     });
 
     this.register({
-      name: 'types',
-      description: 'Generate TypeScript types',
+      name: 'export',
+      description: 'Export theme to JSON',
       options: {
-        '--output': 'Output file',
-        '--module': 'Module name',
+        '--theme': 'Theme name to export',
+        '--output': 'Output file path',
       },
-      handler: this.handleTypes.bind(this),
+      handler: this.handleExport.bind(this),
     });
 
     this.register({
@@ -139,29 +146,6 @@ export class ThemeCLI {
     return { args: parsedArgs, options };
   }
 
-  /**
-   * Handle init command
-   */
-  private handleInit(args: string[], options: Record<string, any>): void {
-    const format = options.format || 'typescript';
-    const includeExamples = options.examples !== false;
-
-    const config = generateConfigTemplate({
-      format: format as any,
-      includeExamples,
-      includeComments: true,
-    });
-
-    const filename = format === 'json' ? 'theme.config.json' : 
-                    format === 'javascript' ? 'theme.config.js' : 
-                    'theme.config.ts';
-
-    console.log(`Generating ${filename}...`);
-    console.log(config);
-    console.log(`\\nTheme configuration template generated!`);
-    console.log(`Save this content to ${filename} in your project root.`);
-  }
-
   /**
    * Handle validate command
    */
@@ -173,16 +157,16 @@ export class ThemeCLI {
       if (result.valid) {
         console.log('✅ Theme configuration is valid');
         if (result.warnings.length > 0) {
-          console.log('\\n⚠️  Warnings:');
+          console.log('\n⚠️  Warnings:');
           result.warnings.forEach(warning => console.log(`  - ${warning}`));
         }
       } else {
         console.log('❌ Theme configuration is invalid');
-        console.log('\\nErrors:');
+        console.log('\nErrors:');
         result.errors.forEach(error => console.log(`  - ${error}`));
-        
+
         if (result.warnings.length > 0) {
-          console.log('\\nWarnings:');
+          console.log('\nWarnings:');
           result.warnings.forEach(warning => console.log(`  - ${warning}`));
         }
         process.exit(1);
@@ -194,49 +178,150 @@ export class ThemeCLI {
   }
 
   /**
-   * Handle build command
+   * Handle list command
    */
-  private handleBuild(args: string[], options: Record<string, any>): void {
-    console.log('Building themes...');
-    console.log('Note: This is a placeholder. Implement actual build logic based on your needs.');
-    
+  private handleList(args: string[], options: Record<string, any>): void {
     try {
       const config = loadThemeConfig();
-      console.log(`Found ${Object.keys(config.themes).length} themes to build`);
+      const themes = config.themes || {};
       
-      // This would typically:
-      // 1. Load each theme
-      // 2. Generate CSS for CSS themes
-      // 3. Execute createTheme for JS themes and generate CSS
-      // 4. Write files to output directory
+      console.log('Available Themes:\n');
       
-      console.log('✅ Build completed');
+      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('Build failed:', error);
+      console.error('Failed to list themes:', error);
       process.exit(1);
     }
   }
 
   /**
-   * Handle types command
+   * Handle inspect command
    */
-  private handleTypes(args: string[], options: Record<string, any>): void {
-    console.log('Generating TypeScript types...');
-    console.log('Note: This is a placeholder. Implement actual type generation logic.');
+  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 moduleName = options.module || 'CustomTheme';
+      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:');
       
-      // This would typically:
-      // 1. Load themes
-      // 2. Generate TypeScript definitions
-      // 3. Write to output file
+      // Simple comparison (could be enhanced)
+      const keys = new Set([...Object.keys(themeA), ...Object.keys(themeB)]);
       
-      console.log(`Generated types for module: ${moduleName}`);
-      console.log('✅ Type generation completed');
+      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('Type generation failed:', 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);
     }
   }
@@ -245,13 +330,13 @@ export class ThemeCLI {
    * 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('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}`);