@shohojdhara/atomix 0.3.3 → 0.3.4

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}`);