@shohojdhara/atomix 0.3.12 → 0.3.14

package/scripts/cli/theme-bridge.js

@@ -18,20 +18,26 @@ const __dirname = dirname(__filename);
  */
 export async function executeThemeCommand(command, args = [], options = {}) {
   const spinner = options.spinner || ora(`Running theme ${command}...`).start();
-  
+
   try {
     // Path to the theme CLI
     const themeCliPath = join(__dirname, '../../src/lib/theme/devtools/CLI.ts');
-    
+
     // Use ts-node to execute TypeScript CLI
     const tsNodePath = join(__dirname, '../../node_modules/.bin/ts-node');
-    
+
     return new Promise((resolve, reject) => {
-      const child = spawn(tsNodePath, [themeCliPath, command, ...args], {
+      const child = spawn(tsNodePath, [
+        '--esm',
+        '--experimental-specifier-resolution=node',
+        themeCliPath,
+        command,
+        ...args
+      ], {
         stdio: 'inherit',
         cwd: process.cwd(),
       });
-      
+
       child.on('close', (code) => {
         if (code === 0) {
           spinner.succeed(chalk.green(`✓ Theme ${command} completed`));
@@ -41,7 +47,7 @@ export async function executeThemeCommand(command, args = [], options = {}) {
           reject(new Error(`Theme command failed with code ${code}`));
         }
       });
-      
+
       child.on('error', (error) => {
         spinner.fail(chalk.red(`✗ Theme ${command} failed`));
         reject(error);
@@ -65,43 +71,43 @@ export function createThemeCLIBridge() {
       const args = [];
       if (options.config) args.push('--config', options.config);
       if (options.strict) args.push('--strict');
-      
+
       return executeThemeCommand('validate', args, options);
     },
-    
+
     /**
      * List all themes
      */
     async list(options = {}) {
       return executeThemeCommand('list', [], options);
     },
-    
+
     /**
      * Inspect a theme
      */
     async inspect(themeName, options = {}) {
       const args = ['--theme', themeName];
       if (options.json) args.push('--json');
-      
+
       return executeThemeCommand('inspect', args, options);
     },
-    
+
     /**
      * Compare two themes
      */
     async compare(theme1, theme2, options = {}) {
       const args = ['--theme1', theme1, '--theme2', theme2];
-      
+
       return executeThemeCommand('compare', args, options);
     },
-    
+
     /**
      * Export a theme
      */
     async export(themeName, options = {}) {
       const args = ['--theme', themeName];
       if (options.output) args.push('--output', options.output);
-      
+
       return executeThemeCommand('export', args, options);
     },
   };

package/scripts/cli/token-manager.js

@@ -52,10 +52,10 @@ async function extractTokensFromFile(filePath) {
   if (!existsSync(filePath)) {
     return null;
   }
-  
+
   const content = await readFile(filePath, 'utf8');
   const tokens = {};
-  
+
   // Extract SCSS variables
   const scssVarPattern = /\$([a-z-]+):\s*([^;!]+)(?:\s*!default)?;/gi;
   let match;
@@ -67,7 +67,7 @@ async function extractTokensFromFile(filePath) {
       line: content.substring(0, match.index).split('\n').length
     };
   }
-  
+
   // Extract CSS custom properties
   const cssVarPattern = /--(atomix-[a-z-]+):\s*([^;]+);/gi;
   while ((match = cssVarPattern.exec(content)) !== null) {
@@ -78,7 +78,7 @@ async function extractTokensFromFile(filePath) {
       line: content.substring(0, match.index).split('\n').length
     };
   }
-  
+
   return tokens;
 }
 
@@ -87,25 +87,25 @@ async function extractTokensFromFile(filePath) {
  */
 export async function listTokens(category = null) {
   const spinner = ora('Loading design tokens...').start();
-  
+
   try {
     const results = {};
-    
+
     // Get tokens from specified category or all categories
-    const categories = category 
-      ? [category] 
+    const categories = category
+      ? [category]
       : Object.keys(tokenCategories);
-    
+
     for (const cat of categories) {
       if (!tokenCategories[cat]) {
         spinner.warn(chalk.yellow(`Unknown category: ${cat}`));
         continue;
       }
-      
+
       const { path, description } = tokenCategories[cat];
       const fullPath = join(process.cwd(), path);
       const tokens = await extractTokensFromFile(fullPath);
-      
+
       if (tokens) {
         results[cat] = {
           description,
@@ -115,18 +115,18 @@ export async function listTokens(category = null) {
         };
       }
     }
-    
+
     spinner.stop();
-    
+
     // Display results
     if (Object.keys(results).length === 0) {
       console.log(chalk.yellow('\n⚠️  No design tokens found'));
       console.log(chalk.gray('Make sure you are in an Atomix project directory'));
       return;
     }
-    
+
     console.log(chalk.bold.cyan('\n📐 Design Tokens\n'));
-    
+
     for (const [category, data] of Object.entries(results)) {
       console.log(boxen(
         chalk.bold(category.toUpperCase()) + '\n' +
@@ -140,25 +140,25 @@ export async function listTokens(category = null) {
           borderColor: 'gray'
         }
       ));
-      
+
       // Show first 5 tokens as examples
       const tokenEntries = Object.entries(data.tokens).slice(0, 5);
       tokenEntries.forEach(([name, info]) => {
-        const value = info.value.length > 30 
-          ? info.value.substring(0, 30) + '...' 
+        const value = info.value.length > 30
+          ? info.value.substring(0, 30) + '...'
           : info.value;
         console.log(`  ${chalk.green(name)}: ${chalk.white(value)}`);
       });
-      
+
       if (Object.keys(data.tokens).length > 5) {
         console.log(chalk.gray(`  ... and ${Object.keys(data.tokens).length - 5} more\n`));
       } else {
         console.log();
       }
     }
-    
+
     return results;
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Failed to load tokens'));
     throw error;
@@ -170,15 +170,15 @@ export async function listTokens(category = null) {
  */
 export async function validateTokens(options = {}) {
   const spinner = ora('Validating design tokens...').start();
-  
+
   try {
     const issues = [];
     const warnings = [];
     let totalTokens = 0;
-    
+
     for (const [category, config] of Object.entries(tokenCategories)) {
       const fullPath = join(process.cwd(), config.path);
-      
+
       if (!existsSync(fullPath)) {
         issues.push({
           category,
@@ -188,14 +188,14 @@ export async function validateTokens(options = {}) {
         });
         continue;
       }
-      
+
       const tokens = await extractTokensFromFile(fullPath);
       if (tokens) {
         totalTokens += Object.keys(tokens).length;
-        
+
         // Check for hardcoded values
         const content = await readFile(fullPath, 'utf8');
-        
+
         // Check for hardcoded colors
         if (category === 'colors') {
           const hardcodedColors = content.match(/#[0-9a-fA-F]{3,8}(?![0-9a-fA-F])/g);
@@ -209,7 +209,7 @@ export async function validateTokens(options = {}) {
             });
           }
         }
-        
+
         // Check for hardcoded pixel values
         if (category === 'spacing' || category === 'typography') {
           const hardcodedPixels = content.match(/\d+px/g);
@@ -223,7 +223,7 @@ export async function validateTokens(options = {}) {
             });
           }
         }
-        
+
         // Check for missing !default flags
         const scssVars = content.match(/\$[a-z-]+:\s*[^;]+;/gi);
         const defaultFlags = content.match(/!default/g);
@@ -234,7 +234,7 @@ export async function validateTokens(options = {}) {
             fix: 'Add !default to allow theme overrides'
           });
         }
-        
+
         // Check naming conventions
         for (const [name, info] of Object.entries(tokens)) {
           if (info.type === 'css' && !name.startsWith(config.prefix)) {
@@ -247,12 +247,12 @@ export async function validateTokens(options = {}) {
         }
       }
     }
-    
+
     spinner.stop();
-    
+
     // Display validation results
     console.log(chalk.bold.cyan('\n🔍 Token Validation Report\n'));
-    
+
     if (issues.length === 0 && warnings.length === 0) {
       console.log(boxen(
         chalk.bold.green('✅ All tokens valid!\n\n') +
@@ -274,7 +274,7 @@ export async function validateTokens(options = {}) {
           console.log(chalk.yellow(`     Fix: ${issue.fix}\n`));
         });
       }
-      
+
       if (warnings.length > 0) {
         console.log(chalk.bold.yellow(`⚠️  Warnings (${warnings.length}):\n`));
         warnings.forEach((warning, i) => {
@@ -285,13 +285,13 @@ export async function validateTokens(options = {}) {
           console.log(chalk.cyan(`     Fix: ${warning.fix}\n`));
         });
       }
-      
+
       console.log(chalk.gray('─'.repeat(50)));
       console.log(chalk.cyan('\n💡 Run with --fix to attempt automatic fixes'));
     }
-    
+
     return { issues, warnings, totalTokens };
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Validation failed'));
     throw error;
@@ -303,15 +303,15 @@ export async function validateTokens(options = {}) {
  */
 export async function exportTokens(format = 'json', outputPath = null) {
   const spinner = ora(`Exporting tokens as ${format.toUpperCase()}...`).start();
-  
+
   try {
     const allTokens = {};
-    
+
     // Collect all tokens
     for (const [category, config] of Object.entries(tokenCategories)) {
       const fullPath = join(process.cwd(), config.path);
       const tokens = await extractTokensFromFile(fullPath);
-      
+
       if (tokens) {
         allTokens[category] = {};
         for (const [name, info] of Object.entries(tokens)) {
@@ -319,16 +319,16 @@ export async function exportTokens(format = 'json', outputPath = null) {
         }
       }
     }
-    
+
     let output;
     let filename;
-    
+
     switch (format.toLowerCase()) {
       case 'json':
         output = JSON.stringify(allTokens, null, 2);
         filename = 'atomix-tokens.json';
         break;
-        
+
       case 'css':
         output = ':root {\n';
         for (const [category, tokens] of Object.entries(allTokens)) {
@@ -342,7 +342,7 @@ export async function exportTokens(format = 'json', outputPath = null) {
         output += '}';
         filename = 'atomix-tokens.css';
         break;
-        
+
       case 'scss':
         output = '// Atomix Design Tokens\n\n';
         for (const [category, tokens] of Object.entries(allTokens)) {
@@ -356,7 +356,7 @@ export async function exportTokens(format = 'json', outputPath = null) {
         }
         filename = 'atomix-tokens.scss';
         break;
-        
+
       case 'js':
       case 'javascript':
         output = '// Atomix Design Tokens\n';
@@ -365,7 +365,7 @@ export async function exportTokens(format = 'json', outputPath = null) {
         output += ';\n\nexport default tokens;';
         filename = 'atomix-tokens.js';
         break;
-        
+
       case 'ts':
       case 'typescript':
         output = '// Atomix Design Tokens\n\n';
@@ -379,30 +379,30 @@ export async function exportTokens(format = 'json', outputPath = null) {
         output += ';\n\nexport default tokens;';
         filename = 'atomix-tokens.ts';
         break;
-        
+
       default:
         throw new Error(`Unsupported format: ${format}`);
     }
-    
+
     // Write to file
     const finalPath = outputPath || filename;
     await writeFile(finalPath, output, 'utf8');
-    
+
     spinner.succeed(chalk.green(`✓ Exported tokens to ${finalPath}`));
-    
+
     // Show summary
     const categoryCount = Object.keys(allTokens).length;
     const tokenCount = Object.values(allTokens).reduce(
-      (sum, cat) => sum + Object.keys(cat).length, 
+      (sum, cat) => sum + Object.keys(cat).length,
       0
     );
-    
+
     console.log(chalk.gray(`\n  Categories: ${categoryCount}`));
     console.log(chalk.gray(`  Total tokens: ${tokenCount}`));
     console.log(chalk.gray(`  Format: ${format.toUpperCase()}`));
-    
+
     return { path: finalPath, tokens: allTokens };
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Export failed'));
     throw error;
@@ -414,23 +414,23 @@ export async function exportTokens(format = 'json', outputPath = null) {
  */
 export async function importTokens(filePath, options = {}) {
   const spinner = ora('Importing design tokens...').start();
-  
+
   try {
     if (!existsSync(filePath)) {
       throw new Error(`File not found: ${filePath}`);
     }
-    
+
     const content = await readFile(filePath, 'utf8');
     const extension = filePath.split('.').pop().toLowerCase();
-    
+
     let tokens;
-    
+
     // Parse tokens based on file type
     switch (extension) {
       case 'json':
         tokens = JSON.parse(content);
         break;
-        
+
       case 'js':
       case 'ts':
         // Parse tokens safely without eval
@@ -440,10 +440,10 @@ export async function importTokens(filePath, options = {}) {
           if (jsonMatch) {
             // Extract the object literal and clean it up
             let objectStr = jsonMatch[1];
-            
+
             // Remove trailing semicolon if present
             objectStr = objectStr.replace(/;\s*$/, '');
-            
+
             // Try direct JSON parsing first
             try {
               tokens = JSON.parse(objectStr);
@@ -457,7 +457,7 @@ export async function importTokens(filePath, options = {}) {
                 .replace(/(\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":')
                 // Handle trailing commas
                 .replace(/,(\s*[}\]])/g, '$1');
-              
+
               tokens = JSON.parse(objectStr);
             }
           } else {
@@ -467,28 +467,28 @@ export async function importTokens(filePath, options = {}) {
           throw new Error(`Could not parse JavaScript/TypeScript tokens: ${error.message}`);
         }
         break;
-        
+
       default:
         throw new Error(`Unsupported file type: ${extension}`);
     }
-    
+
     spinner.text = 'Updating token files...';
-    
+
     // Update token files
     for (const [category, categoryTokens] of Object.entries(tokens)) {
       if (!tokenCategories[category]) {
         console.warn(chalk.yellow(`\n⚠️  Unknown category: ${category} (skipped)`));
         continue;
       }
-      
+
       const config = tokenCategories[category];
       const fullPath = join(process.cwd(), config.path);
-      
+
       // Generate SCSS content
       let scssContent = `// ${config.description}\n`;
       scssContent += `// Imported from: ${basename(filePath)}\n`;
       scssContent += `// Date: ${new Date().toISOString()}\n\n`;
-      
+
       for (const [name, value] of Object.entries(categoryTokens)) {
         if (name.startsWith('$')) {
           scssContent += `${name}: ${value} !default;\n`;
@@ -499,7 +499,7 @@ export async function importTokens(filePath, options = {}) {
           scssContent += `$${name}: ${value} !default;\n`;
         }
       }
-      
+
       if (options.dryRun) {
         console.log(chalk.yellow(`\n  Would update: ${config.path}`));
         console.log(chalk.gray(scssContent.substring(0, 200) + '...'));
@@ -508,37 +508,110 @@ export async function importTokens(filePath, options = {}) {
         console.log(chalk.green(`  ✓ Updated ${config.path}`));
       }
     }
-    
+
     spinner.succeed(chalk.green('✓ Tokens imported successfully'));
-    
+
     // Show summary
     const categoryCount = Object.keys(tokens).length;
     const tokenCount = Object.values(tokens).reduce(
-      (sum, cat) => sum + Object.keys(cat).length, 
+      (sum, cat) => sum + Object.keys(cat).length,
       0
     );
-    
+
     console.log(chalk.gray(`\n  Categories imported: ${categoryCount}`));
     console.log(chalk.gray(`  Total tokens: ${tokenCount}`));
-    
+
     if (!options.dryRun) {
       console.log(chalk.cyan('\n💡 Next steps:'));
       console.log(chalk.gray('  1. Review the updated token files'));
       console.log(chalk.gray('  2. Rebuild your themes: atomix build-theme <theme>'));
       console.log(chalk.gray('  3. Test your components with new tokens'));
     }
-    
+
     return { tokens, categoryCount, tokenCount };
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Import failed'));
     throw error;
   }
 }
 
+/**
+ * Automatically fix issues in token files
+ */
+export async function fixTokens(options = {}) {
+  const spinner = ora('Attempting to fix design tokens...').start();
+  let totalFixed = 0;
+
+  try {
+    for (const [category, config] of Object.entries(tokenCategories)) {
+      const fullPath = join(process.cwd(), config.path);
+
+      if (!existsSync(fullPath)) continue;
+
+      let content = await readFile(fullPath, 'utf8');
+      let originalContent = content;
+      let fileFixedCount = 0;
+
+      // 1. Fix missing !default flags
+      const defaultFixed = content.replace(/(\$[a-z-]+:\s*[^;!]+)(;)/gi, (match, p1, p2) => {
+        fileFixedCount++;
+        return `${p1} !default${p2}`;
+      });
+      content = defaultFixed;
+
+      // 2. Fix hardcoded colors (exact matches for basic tokens)
+      if (category === 'colors') {
+        const colorMappings = {
+          '#7AFFD7': 'var(--atomix-color-primary)',
+          '#FF5733': 'var(--atomix-color-secondary)',
+          '#000000': 'var(--atomix-color-background)',
+          '#FFFFFF': 'var(--atomix-color-text)'
+        };
+
+        for (const [hex, token] of Object.entries(colorMappings)) {
+          const regex = new RegExp(hex, 'gi');
+          if (regex.test(content)) {
+            content = content.replace(regex, token);
+            fileFixedCount++;
+          }
+        }
+      }
+
+      // 3. Fix hardcoded spacing (rem preferred)
+      if (category === 'spacing') {
+        content = content.replace(/(\d+)px/g, (match, pixels) => {
+          const px = parseInt(pixels);
+          if (px % 4 === 0) {
+            fileFixedCount++;
+            return `var(--atomix-space-${px / 4})`;
+          }
+          return match;
+        });
+      }
+
+      if (content !== originalContent) {
+        if (!options.dryRun) {
+          await writeFile(fullPath, content, 'utf8');
+        }
+        totalFixed += fileFixedCount;
+        console.log(chalk.green(`  ✓ Fixed ${fileFixedCount} issues in ${config.path}`));
+      }
+    }
+
+    spinner.succeed(chalk.green(`✓ Successfully fixed ${totalFixed} issues!`));
+    return { totalFixed };
+
+  } catch (error) {
+    spinner.fail(chalk.red('Fix operation failed'));
+    throw error;
+  }
+}
+
 export default {
   listTokens,
   validateTokens,
   exportTokens,
-  importTokens
+  importTokens,
+  fixTokens
 };