@shohojdhara/atomix 0.3.2 → 0.3.4

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

package/src/lib/theme/devtools/Comparator.tsx

@@ -0,0 +1,343 @@
+/**
+ * Theme Comparator Component
+ * 
+ * React component for comparing two themes side-by-side
+ */
+
+import React, { useMemo } from 'react';
+import type { Theme } from '../types';
+
+/**
+ * Theme comparator props
+ */
+export interface ThemeComparatorProps {
+  /** First theme to compare */
+  themeA: Theme;
+  /** Second theme to compare */
+  themeB: Theme;
+  /** Show only differences */
+  showOnlyDifferences?: boolean;
+  /** CSS class name */
+  className?: string;
+  /** Inline styles */
+  style?: React.CSSProperties;
+}
+
+interface Difference {
+  path: string;
+  valueA: any;
+  valueB: any;
+  type: 'added' | 'removed' | 'changed';
+}
+
+/**
+ * Theme Comparator Component
+ * 
+ * Compares two themes and highlights differences
+ */
+export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
+  themeA,
+  themeB,
+  showOnlyDifferences = false,
+  className,
+  style,
+}) => {
+  const differences = useMemo(() => {
+    const diffs: Difference[] = [];
+    
+    const compareObjects = (objA: any, objB: any, path: string = '') => {
+      const keysA = Object.keys(objA || {});
+      const keysB = Object.keys(objB || {});
+      const allKeys = new Set([...keysA, ...keysB]);
+
+      for (const key of allKeys) {
+        if (key === '__isJSTheme') continue;
+        
+        const currentPath = path ? `${path}.${key}` : key;
+        const valueA = objA?.[key];
+        const valueB = objB?.[key];
+
+        if (valueA === undefined && valueB !== undefined) {
+          diffs.push({
+            path: currentPath,
+            valueA: undefined,
+            valueB,
+            type: 'added',
+          });
+        } else if (valueA !== undefined && valueB === undefined) {
+          diffs.push({
+            path: currentPath,
+            valueA,
+            valueB: undefined,
+            type: 'removed',
+          });
+        } else if (typeof valueA === 'object' && typeof valueB === 'object' && !Array.isArray(valueA) && !Array.isArray(valueB)) {
+          compareObjects(valueA, valueB, currentPath);
+        } else if (JSON.stringify(valueA) !== JSON.stringify(valueB)) {
+          diffs.push({
+            path: currentPath,
+            valueA,
+            valueB,
+            type: 'changed',
+          });
+        }
+      }
+    };
+
+    compareObjects(themeA, themeB);
+    return diffs;
+  }, [themeA, themeB]);
+
+  const formatValue = (value: any): string => {
+    if (value === undefined) return 'undefined';
+    if (value === null) return 'null';
+    if (typeof value === 'string') return `"${value}"`;
+    if (typeof value === 'object') return JSON.stringify(value, null, 2);
+    return String(value);
+  };
+
+  const getTypeColor = (type: Difference['type']): string => {
+    switch (type) {
+      case 'added': return '#4caf50';
+      case 'removed': return '#f44336';
+      case 'changed': return '#ff9800';
+      default: return '#666';
+    }
+  };
+
+  return (
+    <div className={`atomix-theme-comparator ${className || ''}`} style={style}>
+      <div className="comparator-header">
+        <div className="theme-column">
+          <h3>{themeA.name}</h3>
+          {themeA.version && <span className="version">v{themeA.version}</span>}
+        </div>
+        <div className="vs-divider">VS</div>
+        <div className="theme-column">
+          <h3>{themeB.name}</h3>
+          {themeB.version && <span className="version">v{themeB.version}</span>}
+        </div>
+      </div>
+
+      <div className="comparator-stats">
+        <div className="stat">
+          <span className="stat-value">{differences.length}</span>
+          <span className="stat-label">Total Differences</span>
+        </div>
+        <div className="stat">
+          <span className="stat-value" style={{ color: '#4caf50' }}>
+            {differences.filter(d => d.type === 'added').length}
+          </span>
+          <span className="stat-label">Added</span>
+        </div>
+        <div className="stat">
+          <span className="stat-value" style={{ color: '#f44336' }}>
+            {differences.filter(d => d.type === 'removed').length}
+          </span>
+          <span className="stat-label">Removed</span>
+        </div>
+        <div className="stat">
+          <span className="stat-value" style={{ color: '#ff9800' }}>
+            {differences.filter(d => d.type === 'changed').length}
+          </span>
+          <span className="stat-label">Changed</span>
+        </div>
+      </div>
+
+      {differences.length === 0 ? (
+        <div className="no-differences">
+          ✅ Themes are identical
+        </div>
+      ) : (
+        <div className="differences-list">
+          <h4>Differences</h4>
+          {differences.map((diff, index) => (
+            <div key={index} className="difference-item">
+              <div className="difference-header">
+                <span 
+                  className="difference-type"
+                  style={{ backgroundColor: getTypeColor(diff.type) }}
+                >
+                  {diff.type}
+                </span>
+                <code className="difference-path">{diff.path}</code>
+              </div>
+              <div className="difference-values">
+                <div className="value-column">
+                  <div className="value-label">{themeA.name}</div>
+                  <pre className="value-content">
+                    {formatValue(diff.valueA)}
+                  </pre>
+                </div>
+                <div className="value-divider">→</div>
+                <div className="value-column">
+                  <div className="value-label">{themeB.name}</div>
+                  <pre className="value-content">
+                    {formatValue(diff.valueB)}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        .atomix-theme-comparator {
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          background: white;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          padding: 24px;
+        }
+
+        .comparator-header {
+          display: grid;
+          grid-template-columns: 1fr auto 1fr;
+          gap: 24px;
+          align-items: center;
+          margin-bottom: 24px;
+          padding-bottom: 24px;
+          border-bottom: 2px solid #e0e0e0;
+        }
+
+        .theme-column {
+          text-align: center;
+        }
+
+        .theme-column h3 {
+          margin: 0;
+          font-size: 20px;
+          color: #333;
+        }
+
+        .version {
+          display: inline-block;
+          margin-top: 4px;
+          padding: 2px 8px;
+          background: #e3f2fd;
+          color: #1976d2;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+
+        .vs-divider {
+          font-weight: bold;
+          font-size: 24px;
+          color: #666;
+        }
+
+        .comparator-stats {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+          gap: 16px;
+          margin-bottom: 24px;
+        }
+
+        .stat {
+          text-align: center;
+          padding: 16px;
+          background: #f5f5f5;
+          border-radius: 8px;
+        }
+
+        .stat-value {
+          display: block;
+          font-size: 32px;
+          font-weight: bold;
+          color: #2196f3;
+        }
+
+        .stat-label {
+          display: block;
+          font-size: 12px;
+          color: #666;
+          margin-top: 4px;
+        }
+
+        .no-differences {
+          text-align: center;
+          padding: 48px;
+          font-size: 18px;
+          color: #4caf50;
+          background: #e8f5e9;
+          border-radius: 8px;
+        }
+
+        .differences-list h4 {
+          margin: 0 0 16px 0;
+          font-size: 18px;
+          color: #333;
+        }
+
+        .difference-item {
+          margin-bottom: 16px;
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .difference-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px;
+          background: #f5f5f5;
+        }
+
+        .difference-type {
+          padding: 4px 8px;
+          border-radius: 4px;
+          font-size: 11px;
+          font-weight: bold;
+          color: white;
+          text-transform: uppercase;
+        }
+
+        .difference-path {
+          font-family: 'Monaco', 'Menlo', monospace;
+          font-size: 13px;
+          color: #1976d2;
+        }
+
+        .difference-values {
+          display: grid;
+          grid-template-columns: 1fr auto 1fr;
+          gap: 16px;
+          padding: 16px;
+          align-items: start;
+        }
+
+        .value-column {
+          min-width: 0;
+        }
+
+        .value-label {
+          font-size: 12px;
+          font-weight: bold;
+          color: #666;
+          margin-bottom: 8px;
+        }
+
+        .value-content {
+          margin: 0;
+          padding: 12px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          font-family: 'Monaco', 'Menlo', monospace;
+          font-size: 12px;
+          overflow-x: auto;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+
+        .value-divider {
+          font-size: 20px;
+          color: #666;
+          align-self: center;
+        }
+      `}</style>
+    </div>
+  );
+};
+