@shohojdhara/atomix 0.3.15 → 0.4.0

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

@@ -1,6 +1,6 @@
 /**
  * Core Theme Engine
- * 
+ *
  * Core theme creation, composition, and registry functionality
  */
 
@@ -8,7 +8,7 @@ export { createTheme } from './createTheme';
 export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
 
 // Simplified Theme Registry API
-export { 
+export {
   createThemeRegistry,
   registerTheme,
   unregisterTheme,
@@ -19,5 +19,5 @@ export {
   clearThemes,
   getThemeCount,
   type ThemeRegistry,
-  type ThemeMetadata
+  type ThemeMetadata,
 } from './ThemeRegistry';

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

@@ -17,139 +17,141 @@ import boxen from 'boxen';
 // Stub validator for now to avoid ESM resolution issues in CLI
 // TODO: Fix ESM module resolution for ThemeValidator in CLI context
 class ThemeValidator {
-    validate() {
-        return { valid: true, errors: [], warnings: [], a11yIssues: [] };
-    }
+  validate() {
+    return { valid: true, errors: [], warnings: [], a11yIssues: [] };
+  }
 }
 
 const program = new Command();
 
-program
-    .name('atomix-theme')
-    .description('Atomix Theme DevTools')
-    .version('0.1.0');
+program.name('atomix-theme').description('Atomix Theme DevTools').version('0.1.0');
 
 // Utils
 const getThemesDir = () => {
-    const possiblePaths = [
-        path.join(process.cwd(), 'themes'),
-        path.join(process.cwd(), 'src', 'themes'),
-        path.join(process.cwd(), 'src', 'styles', 'themes')
-    ];
-
-    for (const p of possiblePaths) {
-        if (fs.existsSync(p)) return p;
-    }
-    return path.join(process.cwd(), 'themes');
+  const possiblePaths = [
+    path.join(process.cwd(), 'themes'),
+    path.join(process.cwd(), 'src', 'themes'),
+    path.join(process.cwd(), 'src', 'styles', 'themes'),
+  ];
+
+  for (const p of possiblePaths) {
+    if (fs.existsSync(p)) return p;
+  }
+  return path.join(process.cwd(), 'themes');
 };
 
 // Validate Command
 program
-    .command('validate')
-    .description('Validate theme configuration')
-    .option('-c, --config <path>', 'Path to theme config')
-    .option('--strict', 'Enable strict validation')
-    .action(async (options) => {
-        console.log(chalk.cyan('Validating theme configuration...'));
-
-        // In a real implementation this would load the theme object
-        // For now we'll do basic file checks if a file is provided
-
-        if (options.config) {
-            const configPath = path.resolve(process.cwd(), options.config);
-            if (!fs.existsSync(configPath)) {
-                console.error(chalk.red(`❌ Config file not found: ${options.config}`));
-                process.exit(1);
-            }
-
-            // Attempt to validate structure if it's JSON
-            if (configPath.endsWith('.json')) {
-                try {
-                    const content = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-                    const validator = new ThemeValidator();
-                    // Mocking validation for now as we don't have a full loader
-                    console.log(chalk.green('✓ JSON structure is valid'));
-                } catch (e) {
-                    console.error(chalk.red(`❌ Invalid JSON: ${(e as Error).message}`));
-                    process.exit(1);
-                }
-            }
+  .command('validate')
+  .description('Validate theme configuration')
+  .option('-c, --config <path>', 'Path to theme config')
+  .option('--strict', 'Enable strict validation')
+  .action(async options => {
+    console.log(chalk.cyan('Validating theme configuration...'));
+
+    // In a real implementation this would load the theme object
+    // For now we'll do basic file checks if a file is provided
+
+    if (options.config) {
+      const configPath = path.resolve(process.cwd(), options.config);
+      if (!fs.existsSync(configPath)) {
+        console.error(chalk.red(`❌ Config file not found: ${options.config}`));
+        process.exit(1);
+      }
+
+      // Attempt to validate structure if it's JSON
+      if (configPath.endsWith('.json')) {
+        try {
+          const content = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+          const validator = new ThemeValidator();
+          // Mocking validation for now as we don't have a full loader
+          console.log(chalk.green('✓ JSON structure is valid'));
+        } catch (e) {
+          console.error(chalk.red(`❌ Invalid JSON: ${(e as Error).message}`));
+          process.exit(1);
         }
+      }
+    }
 
-        // Output success for now to verify connectivity
-        console.log(chalk.green('✓ Validation completed'));
-    });
+    // Output success for now to verify connectivity
+    console.log(chalk.green('✓ Validation completed'));
+  });
 
 // List Command
 program
-    .command('list')
-    .description('List available themes')
-    .action(async () => {
-        const themesDir = getThemesDir();
-
-        if (!fs.existsSync(themesDir)) {
-            console.log(chalk.yellow(`No themes directory found at ${themesDir}`));
-            return;
-        }
+  .command('list')
+  .description('List available themes')
+  .action(async () => {
+    const themesDir = getThemesDir();
+
+    if (!fs.existsSync(themesDir)) {
+      console.log(chalk.yellow(`No themes directory found at ${themesDir}`));
+      return;
+    }
 
-        const themes = fs.readdirSync(themesDir).filter(f => {
-            const stat = fs.statSync(path.join(themesDir, f));
-            return stat.isDirectory() || f.endsWith('.json') || f.endsWith('.ts');
-        });
+    const themes = fs.readdirSync(themesDir).filter(f => {
+      const stat = fs.statSync(path.join(themesDir, f));
+      return stat.isDirectory() || f.endsWith('.json') || f.endsWith('.ts');
+    });
 
-        console.log(chalk.bold.cyan(`\nFound ${themes.length} themes in ${themesDir}:\n`));
+    console.log(chalk.bold.cyan(`\nFound ${themes.length} themes in ${themesDir}:\n`));
 
-        themes.forEach(theme => {
-            console.log(`  • ${theme}`);
-        });
-        console.log('');
+    themes.forEach(theme => {
+      console.log(`  • ${theme}`);
     });
+    console.log('');
+  });
 
 // Inspect Command
 program
-    .command('inspect <theme>')
-    .description('Inspect specific theme')
-    .option('--json', 'Output as JSON')
-    .action(async (themeName, options) => {
-        const themesDir = getThemesDir();
-        const themePath = path.join(themesDir, themeName);
-
-        if (!fs.existsSync(themePath) && !fs.existsSync(`${themePath}.json`) && !fs.existsSync(`${themePath}.ts`)) {
-            console.error(chalk.red(`❌ Theme not found: ${themeName}`));
-            process.exit(1);
-        }
+  .command('inspect <theme>')
+  .description('Inspect specific theme')
+  .option('--json', 'Output as JSON')
+  .action(async (themeName, options) => {
+    const themesDir = getThemesDir();
+    const themePath = path.join(themesDir, themeName);
+
+    if (
+      !fs.existsSync(themePath) &&
+      !fs.existsSync(`${themePath}.json`) &&
+      !fs.existsSync(`${themePath}.ts`)
+    ) {
+      console.error(chalk.red(`❌ Theme not found: ${themeName}`));
+      process.exit(1);
+    }
 
-        if (options.json) {
-            console.log(JSON.stringify({ name: themeName, path: themePath }, null, 2));
-        } else {
-            console.log(boxen(
-                chalk.bold(themeName) + '\n' +
-                chalk.gray(`Path: ${themePath}`),
-                { padding: 1, borderStyle: 'round' }
-            ));
-        }
-    });
+    if (options.json) {
+      console.log(JSON.stringify({ name: themeName, path: themePath }, null, 2));
+    } else {
+      console.log(
+        boxen(chalk.bold(themeName) + '\n' + chalk.gray(`Path: ${themePath}`), {
+          padding: 1,
+          borderStyle: 'round',
+        })
+      );
+    }
+  });
 
 // Compare Command (Stub)
 program
-    .command('compare <theme1> <theme2>')
-    .description('Compare two themes')
-    .action(async (theme1, theme2) => {
-        console.log(chalk.cyan(`Comparing ${theme1} with ${theme2}...`));
-        // Stub
-        console.log(chalk.yellow('Comparison feature not yet fully implemented.'));
-    });
+  .command('compare <theme1> <theme2>')
+  .description('Compare two themes')
+  .action(async (theme1, theme2) => {
+    console.log(chalk.cyan(`Comparing ${theme1} with ${theme2}...`));
+    // Stub
+    console.log(chalk.yellow('Comparison feature not yet fully implemented.'));
+  });
 
 // Export Command (Stub)
 program
-    .command('export <theme>')
-    .description('Export theme')
-    .option('-o, --output <path>', 'Output path')
-    .action(async (theme, options) => {
-        console.log(chalk.cyan(`Exporting ${theme}...`));
-        if (options.output) {
-            console.log(chalk.green(`✓ Exported to ${options.output}`));
-        }
-    });
+  .command('export <theme>')
+  .description('Export theme')
+  .option('-o, --output <path>', 'Output path')
+  .action(async (theme, options) => {
+    console.log(chalk.cyan(`Exporting ${theme}...`));
+    if (options.output) {
+      console.log(chalk.green(`✓ Exported to ${options.output}`));
+    }
+  });
 
 program.parse(process.argv);

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

@@ -1,6 +1,6 @@
 /**
  * Theme Comparator Component
- * 
+ *
  * React component for comparing two themes side-by-side
  * Enhanced with search/filter and improved visual diff styling
  */
@@ -34,7 +34,7 @@ interface Difference {
 
 /**
  * Theme Comparator Component
- * 
+ *
  * Compares two themes and highlights differences
  */
 export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
@@ -69,12 +69,12 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
   const differences = useMemo(() => {
     const diffs: Difference[] = [];
-    
+
     const getCategory = (path: string): string => {
       const firstSegment = path.split('.')[0];
       return firstSegment || 'other';
     };
-    
+
     const compareObjects = (objA: any, objB: any, path: string = '') => {
       const keysA = Object.keys(objA || {});
       const keysB = Object.keys(objB || {});
@@ -82,7 +82,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
       for (const key of allKeys) {
         if (key === '__isJSTheme') continue;
-        
+
         const currentPath = path ? `${path}.${key}` : key;
         const valueA = objA?.[key];
         const valueB = objB?.[key];
@@ -103,7 +103,12 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             type: 'removed',
             category: getCategory(currentPath),
           });
-        } else if (typeof valueA === 'object' && typeof valueB === 'object' && !Array.isArray(valueA) && !Array.isArray(valueB)) {
+        } 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({
@@ -138,10 +143,11 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
     // Filter by search query
     if (debouncedSearchQuery) {
       const queryLower = debouncedSearchQuery.toLowerCase();
-      filtered = filtered.filter(d => 
-        d.path.toLowerCase().includes(queryLower) ||
-        String(d.valueA).toLowerCase().includes(queryLower) ||
-        String(d.valueB).toLowerCase().includes(queryLower)
+      filtered = filtered.filter(
+        d =>
+          d.path.toLowerCase().includes(queryLower) ||
+          String(d.valueA).toLowerCase().includes(queryLower) ||
+          String(d.valueB).toLowerCase().includes(queryLower)
       );
     }
 
@@ -164,29 +170,39 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
   const getTypeColor = (type: Difference['type']): string => {
     switch (type) {
-      case 'added': return '#4caf50';
-      case 'removed': return '#f44336';
-      case 'changed': return '#ff9800';
-      default: return '#666';
+      case 'added':
+        return '#4caf50';
+      case 'removed':
+        return '#f44336';
+      case 'changed':
+        return '#ff9800';
+      default:
+        return '#666';
     }
   };
 
   const getTypeBackground = (type: Difference['type']): string => {
     switch (type) {
-      case 'added': return 'rgba(76, 175, 80, 0.1)';
-      case 'removed': return 'rgba(244, 67, 54, 0.1)';
-      case 'changed': return 'rgba(255, 152, 0, 0.1)';
-      default: return 'transparent';
+      case 'added':
+        return 'rgba(76, 175, 80, 0.1)';
+      case 'removed':
+        return 'rgba(244, 67, 54, 0.1)';
+      case 'changed':
+        return 'rgba(255, 152, 0, 0.1)';
+      default:
+        return 'transparent';
     }
   };
 
   const highlightText = (text: string, query: string): React.ReactNode => {
     if (!query) return text;
-    
+
     const parts = text.split(new RegExp(`(${query})`, 'gi'));
-    return parts.map((part, index) => 
+    return parts.map((part, index) =>
       part.toLowerCase() === query.toLowerCase() ? (
-        <mark key={index} className="search-highlight">{part}</mark>
+        <mark key={index} className="search-highlight">
+          {part}
+        </mark>
       ) : (
         part
       )
@@ -225,7 +241,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             type="text"
             placeholder="Search differences..."
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={e => setSearchQuery(e.target.value)}
             className="search-input"
           />
           {searchQuery && (
@@ -243,7 +259,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
           <label>Type:</label>
           <select
             value={filterType}
-            onChange={(e) => setFilterType(e.target.value as any)}
+            onChange={e => setFilterType(e.target.value as any)}
             className="filter-select"
           >
             <option value="all">All Types</option>
@@ -258,12 +274,14 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             <label>Category:</label>
             <select
               value={filterCategory}
-              onChange={(e) => setFilterCategory(e.target.value)}
+              onChange={e => setFilterCategory(e.target.value)}
               className="filter-select"
             >
               <option value="all">All Categories</option>
               {categories.map(cat => (
-                <option key={cat} value={cat}>{cat}</option>
+                <option key={cat} value={cat}>
+                  {cat}
+                </option>
               ))}
             </select>
           </div>
@@ -328,13 +346,13 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
         <div className="differences-list">
           <h4>Differences ({filteredDifferences.length})</h4>
           {filteredDifferences.map((diff, index) => (
-            <div 
-              key={index} 
+            <div
+              key={index}
               className={`difference-item difference-${diff.type}`}
               style={{ backgroundColor: getTypeBackground(diff.type) }}
             >
               <div className="difference-header">
-                <span 
+                <span
                   className="difference-type"
                   style={{ backgroundColor: getTypeColor(diff.type) }}
                 >
@@ -343,9 +361,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
                 <code className="difference-path">
                   {highlightText(diff.path, debouncedSearchQuery)}
                 </code>
-                {diff.category && (
-                  <span className="difference-category">{diff.category}</span>
-                )}
+                {diff.category && <span className="difference-category">{diff.category}</span>}
               </div>
               <div className="difference-values">
                 <div className={`value-column value-${diff.type === 'added' ? 'empty' : 'filled'}`}>
@@ -359,7 +375,9 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
                   </pre>
                 </div>
                 <div className="value-divider">→</div>
-                <div className={`value-column value-${diff.type === 'removed' ? 'empty' : 'filled'}`}>
+                <div
+                  className={`value-column value-${diff.type === 'removed' ? 'empty' : 'filled'}`}
+                >
                   <div className="value-label">{themeB.name}</div>
                   <pre className="value-content">
                     {diff.type === 'removed' ? (

package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx

@@ -3,17 +3,19 @@ import { DesignTokensCustomizer } from './DesignTokensCustomizer';
 import { useState } from 'react';
 
 // Enhanced preview components
-const PreviewContainer = ({ title, description, children }: { 
-  title?: string; 
-  description?: string; 
+const PreviewContainer = ({
+  title,
+  description,
+  children,
+}: {
+  title?: string;
+  description?: string;
   children: React.ReactNode;
 }) => (
   <div className="story-preview-container">
     {title && <h3 className="story-preview-title">{title}</h3>}
     {description && <p className="story-preview-description">{description}</p>}
-    <div className="story-preview-content">
-      {children}
-    </div>
+    <div className="story-preview-content">{children}</div>
   </div>
 );
 
@@ -24,10 +26,10 @@ const meta: Meta<typeof DesignTokensCustomizer> = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Interactive design tokens customization tool for real-time theme adjustments.'
-      }
-    }
-  }
+        component: 'Interactive design tokens customization tool for real-time theme adjustments.',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -36,8 +38,8 @@ type Story = StoryObj<typeof DesignTokensCustomizer>;
 // Basic Usage
 export const Default: Story = {
   render: () => (
-    <PreviewContainer 
-      title="Design Tokens Customizer" 
+    <PreviewContainer
+      title="Design Tokens Customizer"
       description="Interactive tool for customizing design tokens in real-time"
     >
       <DesignTokensCustomizer />
@@ -46,10 +48,10 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The default design tokens customizer with all standard controls and features.'
-      }
-    }
-  }
+        story: 'The default design tokens customizer with all standard controls and features.',
+      },
+    },
+  },
 };
 
 // With Custom Configuration
@@ -59,36 +61,36 @@ export const WithCustomConfig: Story = {
       colors: {
         primary: '#667eea',
         secondary: '#764ba2',
-        accent: '#f093fb'
+        accent: '#f093fb',
       },
       spacing: {
         small: '8px',
         medium: '16px',
-        large: '24px'
+        large: '24px',
       },
       typography: {
         fontFamily: 'Inter, sans-serif',
         fontSize: '16px',
-        fontWeight: '400'
-      }
+        fontWeight: '400',
+      },
     };
-    
+
     return (
-      <PreviewContainer 
-        title="Custom Configuration" 
+      <PreviewContainer
+        title="Custom Configuration"
         description="Design tokens customizer with predefined custom configuration"
       >
         <DesignTokensCustomizer initialConfig={customConfig} />
       </PreviewContainer>
     );
-  }
+  },
 };
 
 // Theme Preview Mode
 export const ThemePreview: Story = {
   render: () => (
-    <PreviewContainer 
-      title="Theme Preview Mode" 
+    <PreviewContainer
+      title="Theme Preview Mode"
       description="Customizer with live theme preview components"
     >
       <div className="theme-preview-layout">
@@ -119,19 +121,19 @@ export const ThemePreview: Story = {
       viewports: {
         desktop: {
           name: 'Desktop',
-          styles: { width: '1200px', height: '800px' }
-        }
+          styles: { width: '1200px', height: '800px' },
+        },
       },
-      defaultViewport: 'desktop'
-    }
-  }
+      defaultViewport: 'desktop',
+    },
+  },
 };
 
 // Compact Mode
 export const Compact: Story = {
   render: () => (
-    <PreviewContainer 
-      title="Compact Mode" 
+    <PreviewContainer
+      title="Compact Mode"
       description="Space-efficient customizer for smaller screens"
     >
       <DesignTokensCustomizer compact={true} />
@@ -142,26 +144,26 @@ export const Compact: Story = {
       viewports: {
         mobile: {
           name: 'Mobile',
-          styles: { width: '375px', height: '667px' }
-        }
+          styles: { width: '375px', height: '667px' },
+        },
       },
-      defaultViewport: 'mobile'
-    }
-  }
+      defaultViewport: 'mobile',
+    },
+  },
 };
 
 // With Export Options
 export const WithExport: Story = {
   render: () => {
     const [exportData, setExportData] = useState('');
-    
+
     const handleExport = (tokens: any) => {
       setExportData(JSON.stringify(tokens, null, 2));
     };
-    
+
     return (
-      <PreviewContainer 
-        title="With Export Options" 
+      <PreviewContainer
+        title="With Export Options"
         description="Customizer with export functionality for sharing themes"
       >
         <div className="export-workflow">
@@ -170,7 +172,7 @@ export const WithExport: Story = {
             <div className="export-output">
               <h4>Exported Theme Data:</h4>
               <pre>{exportData}</pre>
-              <button 
+              <button
                 onClick={() => navigator.clipboard.writeText(exportData)}
                 className="copy-button"
               >
@@ -181,14 +183,14 @@ export const WithExport: Story = {
         </div>
       </PreviewContainer>
     );
-  }
+  },
 };
 
 // Interactive Tutorial
 export const InteractiveTutorial: Story = {
   render: () => (
-    <PreviewContainer 
-      title="Interactive Tutorial" 
+    <PreviewContainer
+      title="Interactive Tutorial"
       description="Guided tour of the design tokens customizer features"
     >
       <div className="tutorial-container">
@@ -209,5 +211,5 @@ export const InteractiveTutorial: Story = {
         <DesignTokensCustomizer />
       </div>
     </PreviewContainer>
-  )
-};
+  ),
+};