@shohojdhara/atomix 0.4.7 → 0.4.9

package/scripts/cli/migration-tools.js

@@ -4,30 +4,57 @@
  */
 
 import { readFile, writeFile, readdir, lstat } from 'fs/promises';
-import { join, extname, relative } from 'path';
+import { join, extname, relative, basename } from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
-import { validatePath, sanitizeInput, AtomixCLIError } from './utils.js';
-import {
-  tailwindToAtomix,
-  bootstrapToAtomix,
-  scssVariableMigration
-} from './mappings.js';
+import { filesystem } from './internal/filesystem.js';
+import { AtomixCLIError } from './utils/error.js';
+import { tailwindToAtomix, bootstrapToAtomix, scssVariableMigration } from './mappings.js';
+import { logger } from './utils/logger.js';
 
+const sanitizeInput = (input) => input.trim(); // Simple mock if sanitizeInput is missing
 
+/**
+ * Show a simple side-by-side diff for migration preview
+ */
+function showPreviewDiff(file, original, modified) {
+  const originalLines = original.split('\n');
+  const modifiedLines = modified.split('\n');
+  const diffs = [];
+
+  for (let i = 0; i < originalLines.length; i++) {
+    if (originalLines[i] !== modifiedLines[i]) {
+      diffs.push({
+        line: i + 1,
+        old: originalLines[i].trim(),
+        new: modifiedLines[i].trim()
+      });
+    }
+  }
+
+  if (diffs.length > 0) {
+    console.log(`\n${chalk.bold.blue('Preview for:')} ${chalk.cyan(relative(process.cwd(), file))}`);
+    diffs.slice(0, 5).forEach(d => {
+      console.log(`${chalk.gray(d.line + ':')} ${chalk.red('- ' + d.old)}`);
+      console.log(`${chalk.gray('  ')} ${chalk.green('+ ' + d.new)}`);
+    });
+    if (diffs.length > 5) {
+      console.log(chalk.gray(`  ... and ${diffs.length - 5} more changes`));
+    }
+  }
+}
 
 /**
  * Migrate Tailwind classes to Atomix
  */
 export async function migrateTailwind(sourcePath, options = {}) {
   const sanitizedSource = sanitizeInput(sourcePath);
-  const sourceValidation = validatePath(sanitizedSource);
+  const sourceValidation = filesystem.validatePath(sanitizedSource);
   if (!sourceValidation.isValid) {
-    throw new AtomixCLIError(
-      sourceValidation.error,
-      'INVALID_PATH',
-      ['Provide a valid path within the project', 'Check for typos']
-    );
+    throw new AtomixCLIError(sourceValidation.error, 'INVALID_PATH', [
+      'Provide a valid path within the project',
+      'Check for typos',
+    ]);
   }
   const safeSource = sourceValidation.safePath;
   const spinner = ora('Migrating from Tailwind CSS...').start();
@@ -35,19 +62,23 @@ export async function migrateTailwind(sourcePath, options = {}) {
     filesProcessed: 0,
     classesReplaced: 0,
     warnings: [],
-    errors: []
+    errors: [],
   };
 
   try {
     const files = await getAllFiles(safeSource, ['.jsx', '.tsx', '.js', '.ts', '.html']);
 
-    for (const file of files) {
-      spinner.text = `Processing ${relative(process.cwd(), file)}...`;
+    let processedCount = 0;
 
-      try {
-        let content = await readFile(file, 'utf8');
-        const originalContent = content;
-        let replacementCount = 0;
+    // Process files in batches to prevent "too many open files" errors
+    const batchSize = 50;
+    for (let i = 0; i < files.length; i += batchSize) {
+      const batch = files.slice(i, i + batchSize);
+      await Promise.all(batch.map(async (file) => {
+        try {
+          let content = await readFile(file, 'utf8');
+          const originalContent = content;
+          let replacementCount = 0;
 
         // Replace className attributes
         content = content.replace(/className=["']([^"']+)["']/g, (match, classes) => {
@@ -71,11 +102,16 @@ export async function migrateTailwind(sourcePath, options = {}) {
             }
 
             // If no mapping found, keep original
-            if (trimmed && !trimmed.startsWith('c-') && !trimmed.startsWith('u-') && !trimmed.startsWith('o-')) {
+            if (
+              trimmed &&
+              !trimmed.startsWith('c-') &&
+              !trimmed.startsWith('u-') &&
+              !trimmed.startsWith('o-')
+            ) {
               report.warnings.push({
                 file: relative(process.cwd(), file),
                 class: trimmed,
-                message: 'No Atomix equivalent found'
+                message: 'No Atomix equivalent found',
               });
             }
 
@@ -101,8 +137,12 @@ export async function migrateTailwind(sourcePath, options = {}) {
         });
 
         if (content !== originalContent) {
-          if (options.dryRun) {
-            console.log(chalk.yellow(`  Would update: ${file}`));
+          if (options.dryRun || options.preview) {
+            if (options.preview) {
+              showPreviewDiff(file, originalContent, content);
+            } else {
+              console.log(chalk.yellow(`  Would update: ${file}`));
+            }
           } else {
             await writeFile(file, content, 'utf8');
             report.filesProcessed++;
@@ -110,18 +150,21 @@ export async function migrateTailwind(sourcePath, options = {}) {
           }
         }
 
-      } catch (error) {
-        report.errors.push({
-          file: relative(process.cwd(), file),
-          error: error.message
-        });
-      }
+          processedCount++;
+          spinner.text = `Processing files (${processedCount}/${files.length})...`;
+
+        } catch (error) {
+          report.errors.push({
+            file: relative(process.cwd(), file),
+            error: error.message
+          });
+        }
+      }));
     }
 
     spinner.succeed(chalk.green('Tailwind migration complete!'));
 
     return report;
-
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -133,13 +176,12 @@ export async function migrateTailwind(sourcePath, options = {}) {
  */
 export async function migrateBootstrap(sourcePath, options = {}) {
   const sanitizedSource = sanitizeInput(sourcePath);
-  const sourceValidation = validatePath(sanitizedSource);
+  const sourceValidation = filesystem.validatePath(sanitizedSource);
   if (!sourceValidation.isValid) {
-    throw new AtomixCLIError(
-      sourceValidation.error,
-      'INVALID_PATH',
-      ['Provide a valid path within the project', 'Check for typos']
-    );
+    throw new AtomixCLIError(sourceValidation.error, 'INVALID_PATH', [
+      'Provide a valid path within the project',
+      'Check for typos',
+    ]);
   }
   const safeSource = sourceValidation.safePath;
   const spinner = ora('Migrating from Bootstrap...').start();
@@ -147,19 +189,22 @@ export async function migrateBootstrap(sourcePath, options = {}) {
     filesProcessed: 0,
     classesReplaced: 0,
     warnings: [],
-    errors: []
+    errors: [],
   };
 
   try {
     const files = await getAllFiles(safeSource, ['.jsx', '.tsx', '.js', '.ts', '.html']);
 
-    for (const file of files) {
-      spinner.text = `Processing ${relative(process.cwd(), file)}...`;
+    let processedCount = 0;
 
-      try {
-        let content = await readFile(file, 'utf8');
-        const originalContent = content;
-        let replacementCount = 0;
+    const batchSize = 50;
+    for (let i = 0; i < files.length; i += batchSize) {
+      const batch = files.slice(i, i + batchSize);
+      await Promise.all(batch.map(async (file) => {
+        try {
+          let content = await readFile(file, 'utf8');
+          const originalContent = content;
+          let replacementCount = 0;
 
         // Replace className/class attributes
         const classPattern = /(className|class)=["']([^"']+)["']/g;
@@ -191,11 +236,16 @@ export async function migrateBootstrap(sourcePath, options = {}) {
             }
 
             // If no mapping found, keep original
-            if (trimmed && !trimmed.startsWith('c-') && !trimmed.startsWith('u-') && !trimmed.startsWith('o-')) {
+            if (
+              trimmed &&
+              !trimmed.startsWith('c-') &&
+              !trimmed.startsWith('u-') &&
+              !trimmed.startsWith('o-')
+            ) {
               report.warnings.push({
                 file: relative(process.cwd(), file),
                 class: trimmed,
-                message: 'No Atomix equivalent found'
+                message: 'No Atomix equivalent found',
               });
             }
 
@@ -206,8 +256,12 @@ export async function migrateBootstrap(sourcePath, options = {}) {
         });
 
         if (content !== originalContent) {
-          if (options.dryRun) {
-            console.log(chalk.yellow(`  Would update: ${file}`));
+          if (options.dryRun || options.preview) {
+            if (options.preview) {
+              showPreviewDiff(file, originalContent, content);
+            } else {
+              console.log(chalk.yellow(`  Would update: ${file}`));
+            }
           } else {
             await writeFile(file, content, 'utf8');
             report.filesProcessed++;
@@ -215,18 +269,21 @@ export async function migrateBootstrap(sourcePath, options = {}) {
           }
         }
 
-      } catch (error) {
-        report.errors.push({
-          file: relative(process.cwd(), file),
-          error: error.message
-        });
-      }
+          processedCount++;
+          spinner.text = `Processing files (${processedCount}/${files.length})...`;
+
+        } catch (error) {
+          report.errors.push({
+            file: relative(process.cwd(), file),
+            error: error.message
+          });
+        }
+      }));
     }
 
     spinner.succeed(chalk.green('Bootstrap migration complete!'));
 
     return report;
-
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -238,13 +295,12 @@ export async function migrateBootstrap(sourcePath, options = {}) {
  */
 export async function migrateSCSSVariables(sourcePath, options = {}) {
   const sanitizedSource = sanitizeInput(sourcePath);
-  const sourceValidation = validatePath(sanitizedSource);
+  const sourceValidation = filesystem.validatePath(sanitizedSource);
   if (!sourceValidation.isValid) {
-    throw new AtomixCLIError(
-      sourceValidation.error,
-      'INVALID_PATH',
-      ['Provide a valid path within the project', 'Check for typos']
-    );
+    throw new AtomixCLIError(sourceValidation.error, 'INVALID_PATH', [
+      'Provide a valid path within the project',
+      'Check for typos',
+    ]);
   }
   const safeSource = sourceValidation.safePath;
   const spinner = ora('Migrating SCSS variables to design tokens...').start();
@@ -252,19 +308,22 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
     filesProcessed: 0,
     variablesReplaced: 0,
     warnings: [],
-    errors: []
+    errors: [],
   };
 
   try {
     const files = await getAllFiles(safeSource, ['.scss', '.sass', '.css']);
 
-    for (const file of files) {
-      spinner.text = `Processing ${relative(process.cwd(), file)}...`;
+    let processedCount = 0;
 
-      try {
-        let content = await readFile(file, 'utf8');
-        const originalContent = content;
-        let replacementCount = 0;
+    const batchSize = 50;
+    for (let i = 0; i < files.length; i += batchSize) {
+      const batch = files.slice(i, i + batchSize);
+      await Promise.all(batch.map(async (file) => {
+        try {
+          let content = await readFile(file, 'utf8');
+          const originalContent = content;
+          let replacementCount = 0;
 
         // Replace SCSS variables with CSS custom properties
         for (const [scssVar, cssVar] of Object.entries(scssVariableMigration)) {
@@ -284,15 +343,19 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
               report.warnings.push({
                 file: relative(process.cwd(), file),
                 variable: varName,
-                message: 'No design token equivalent found'
+                message: 'No design token equivalent found',
               });
             }
           });
         }
 
         if (content !== originalContent) {
-          if (options.dryRun) {
-            console.log(chalk.yellow(`  Would update: ${file}`));
+          if (options.dryRun || options.preview) {
+            if (options.preview) {
+              showPreviewDiff(file, originalContent, content);
+            } else {
+              console.log(chalk.yellow(`  Would update: ${file}`));
+            }
           } else {
             await writeFile(file, content, 'utf8');
             report.filesProcessed++;
@@ -300,18 +363,21 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
           }
         }
 
-      } catch (error) {
-        report.errors.push({
-          file: relative(process.cwd(), file),
-          error: error.message
-        });
-      }
+          processedCount++;
+          spinner.text = `Processing files (${processedCount}/${files.length})...`;
+
+        } catch (error) {
+          report.errors.push({
+            file: relative(process.cwd(), file),
+            error: error.message
+          });
+        }
+      }));
     }
 
     spinner.succeed(chalk.green('SCSS variable migration complete!'));
 
     return report;
-
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -327,22 +393,24 @@ async function getAllFiles(dir, extensions = []) {
   async function walk(currentPath) {
     const entries = await readdir(currentPath);
 
-    for (const entry of entries) {
-      const fullPath = join(currentPath, entry);
-      const stats = await lstat(fullPath);
+    await Promise.all(
+      entries.map(async entry => {
+        const fullPath = join(currentPath, entry);
+        const stats = await lstat(fullPath);
 
-      if (stats.isDirectory()) {
-        // Skip node_modules and hidden directories
-        if (!entry.startsWith('.') && entry !== 'node_modules') {
-          await walk(fullPath);
-        }
-      } else if (stats.isFile()) {
-        const ext = extname(fullPath);
-        if (extensions.length === 0 || extensions.includes(ext)) {
-          files.push(fullPath);
+        if (stats.isDirectory()) {
+          // Skip node_modules and hidden directories
+          if (!entry.startsWith('.') && entry !== 'node_modules') {
+            await walk(fullPath);
+          }
+        } else if (stats.isFile()) {
+          const ext = extname(fullPath);
+          if (extensions.length === 0 || extensions.includes(ext)) {
+            files.push(fullPath);
+          }
         }
-      }
-    }
+      })
+    );
   }
 
   await walk(dir);
@@ -357,7 +425,9 @@ export function displayMigrationReport(report) {
   console.log(chalk.gray('='.repeat(50)));
 
   console.log(chalk.cyan(`Files processed: ${report.filesProcessed}`));
-  console.log(chalk.cyan(`Classes/Variables replaced: ${report.classesReplaced || report.variablesReplaced}`));
+  console.log(
+    chalk.cyan(`Classes/Variables replaced: ${report.classesReplaced || report.variablesReplaced}`)
+  );
 
   if (report.warnings.length > 0) {
     console.log(chalk.yellow(`\n⚠️  Warnings (${report.warnings.length}):\n`));
@@ -406,5 +476,5 @@ export default {
   migrateTailwind,
   migrateBootstrap,
   migrateSCSSVariables,
-  displayMigrationReport
+  displayMigrationReport,
 };

package/scripts/cli/plugins/style-dictionary.js

@@ -0,0 +1,46 @@
+/**
+ * Atomix Plugin: Style Dictionary
+ * Example plugin showing how to extend CLI functionality
+ */
+
+export default async function styleDictionaryPlugin(api, options = {}) {
+  const { logger, hooks } = api;
+
+  logger.info('Initializing Style Dictionary plugin...');
+
+  // Register a hook to run before generation
+  hooks.register('preGenerate', async (data) => {
+    logger.debug(`[StyleDictionary] Pre-generation hook for ${data.name}`);
+    
+    // Example: Add a custom property to the generation data
+    return {
+      ...data,
+      styleDictionary: {
+        enabled: true,
+        version: options.version || 'latest'
+      }
+    };
+  });
+
+  // Register a hook for validation
+  hooks.register('onValidate', async (report) => {
+    logger.debug('[StyleDictionary] Validation hook running');
+    
+    // Add a custom validation check
+    if (options.strictMode && !report.styleDictionary) {
+      report.issues.push('Missing Style Dictionary configuration');
+      report.valid = false;
+    }
+    
+    return report;
+  });
+
+  // Register a hook to run after build
+  hooks.register('postBuild', async (assets) => {
+    logger.info('[StyleDictionary] Post-build processing...');
+    // In a real plugin, you might minify assets or upload them here
+    return assets;
+  });
+
+  logger.debug('Style Dictionary plugin initialized successfully.');
+}