@shohojdhara/atomix 0.3.13 → 0.3.15

package/scripts/cli/migration-tools.js

@@ -7,242 +7,29 @@ import { readFile, writeFile, readdir, stat } from 'fs/promises';
 import { join, extname, relative } from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
+import { validatePath, sanitizeInput, AtomixCLIError } from './utils.js';
+import {
+  tailwindToAtomix,
+  bootstrapToAtomix,
+  scssVariableMigration
+} from './mappings.js';
 
-/**
- * Tailwind to Atomix mapping
- */
-const tailwindToAtomix = {
-  // Colors
-  'bg-primary': 'c-bg-primary',
-  'text-primary': 'c-text-primary',
-  'border-primary': 'c-border-primary',
-  
-  // Spacing
-  'p-0': 'u-p-0',
-  'p-1': 'u-p-1',
-  'p-2': 'u-p-2',
-  'p-3': 'u-p-3',
-  'p-4': 'u-p-4',
-  'p-5': 'u-p-5',
-  'p-6': 'u-p-6',
-  'p-8': 'u-p-8',
-  
-  'm-0': 'u-m-0',
-  'm-1': 'u-m-1',
-  'm-2': 'u-m-2',
-  'm-3': 'u-m-3',
-  'm-4': 'u-m-4',
-  'm-auto': 'u-m-auto',
-  
-  // Flexbox
-  'flex': 'u-flex',
-  'flex-row': 'u-flex-row',
-  'flex-col': 'u-flex-column',
-  'items-center': 'u-items-center',
-  'justify-center': 'u-justify-center',
-  'justify-between': 'u-justify-between',
-  'gap-1': 'u-gap-1',
-  'gap-2': 'u-gap-2',
-  'gap-4': 'u-gap-4',
-  
-  // Display
-  'hidden': 'u-hidden',
-  'block': 'u-block',
-  'inline-block': 'u-inline-block',
-  'inline': 'u-inline',
-  'grid': 'u-grid',
-  
-  // Typography
-  'text-xs': 'u-text-xs',
-  'text-sm': 'u-text-sm',
-  'text-base': 'u-text-base',
-  'text-lg': 'u-text-lg',
-  'text-xl': 'u-text-xl',
-  'text-2xl': 'u-text-2xl',
-  'font-bold': 'u-font-bold',
-  'font-semibold': 'u-font-semibold',
-  'font-normal': 'u-font-normal',
-  
-  // Border
-  'border': 'u-border',
-  'border-2': 'u-border-2',
-  'rounded': 'u-rounded',
-  'rounded-md': 'u-rounded-md',
-  'rounded-lg': 'u-rounded-lg',
-  'rounded-full': 'u-rounded-full',
-  
-  // Components
-  'btn': 'c-btn',
-  'btn-primary': 'c-btn c-btn-primary',
-  'btn-secondary': 'c-btn c-btn-secondary',
-  'card': 'c-card',
-  'badge': 'c-badge',
-  'alert': 'c-alert',
-  'input': 'c-input',
-  'select': 'c-select',
-  'checkbox': 'c-checkbox',
-  'radio': 'c-radio',
-  
-  // Responsive prefixes
-  'sm:': '@sm:',
-  'md:': '@md:',
-  'lg:': '@lg:',
-  'xl:': '@xl:',
-  
-  // States
-  'hover:': ':hover ',
-  'focus:': ':focus ',
-  'active:': ':active ',
-  'disabled:': ':disabled '
-};
 
-/**
- * Bootstrap to Atomix mapping
- */
-const bootstrapToAtomix = {
-  // Components
-  'btn': 'c-btn',
-  'btn-primary': 'c-btn c-btn-primary',
-  'btn-secondary': 'c-btn c-btn-secondary',
-  'btn-success': 'c-btn c-btn-success',
-  'btn-danger': 'c-btn c-btn-error',
-  'btn-warning': 'c-btn c-btn-warning',
-  'btn-info': 'c-btn c-btn-info',
-  'btn-lg': 'c-btn c-btn-lg',
-  'btn-sm': 'c-btn c-btn-sm',
-  
-  'card': 'c-card',
-  'card-header': 'c-card__header',
-  'card-body': 'c-card__body',
-  'card-footer': 'c-card__footer',
-  'card-title': 'c-card__title',
-  'card-text': 'c-card__text',
-  
-  'alert': 'c-alert',
-  'alert-primary': 'c-alert c-alert-primary',
-  'alert-success': 'c-alert c-alert-success',
-  'alert-danger': 'c-alert c-alert-error',
-  'alert-warning': 'c-alert c-alert-warning',
-  
-  'badge': 'c-badge',
-  'badge-primary': 'c-badge c-badge-primary',
-  'badge-secondary': 'c-badge c-badge-secondary',
-  
-  'form-control': 'c-input',
-  'form-select': 'c-select',
-  'form-check': 'c-form-check',
-  'form-check-input': 'c-checkbox',
-  'form-label': 'c-label',
-  
-  'modal': 'c-modal',
-  'modal-dialog': 'c-modal__dialog',
-  'modal-content': 'c-modal__content',
-  'modal-header': 'c-modal__header',
-  'modal-body': 'c-modal__body',
-  'modal-footer': 'c-modal__footer',
-  
-  // Grid
-  'container': 'o-container',
-  'container-fluid': 'o-container-fluid',
-  'row': 'o-row',
-  'col': 'o-col',
-  'col-sm': 'o-col-sm',
-  'col-md': 'o-col-md',
-  'col-lg': 'o-col-lg',
-  'col-xl': 'o-col-xl',
-  
-  // Utilities
-  'd-none': 'u-hidden',
-  'd-block': 'u-block',
-  'd-inline': 'u-inline',
-  'd-inline-block': 'u-inline-block',
-  'd-flex': 'u-flex',
-  'd-grid': 'u-grid',
-  
-  'text-center': 'u-text-center',
-  'text-left': 'u-text-left',
-  'text-right': 'u-text-right',
-  'text-justify': 'u-text-justify',
-  
-  'text-primary': 'u-text-primary',
-  'text-success': 'u-text-success',
-  'text-danger': 'u-text-error',
-  'text-warning': 'u-text-warning',
-  'text-muted': 'u-text-muted',
-  
-  'bg-primary': 'u-bg-primary',
-  'bg-success': 'u-bg-success',
-  'bg-danger': 'u-bg-error',
-  'bg-warning': 'u-bg-warning',
-  
-  'p-0': 'u-p-0',
-  'p-1': 'u-p-1',
-  'p-2': 'u-p-2',
-  'p-3': 'u-p-3',
-  'p-4': 'u-p-4',
-  'p-5': 'u-p-5',
-  
-  'm-0': 'u-m-0',
-  'm-1': 'u-m-1',
-  'm-2': 'u-m-2',
-  'm-3': 'u-m-3',
-  'm-4': 'u-m-4',
-  'm-5': 'u-m-5',
-  'm-auto': 'u-m-auto',
-  
-  'rounded': 'u-rounded',
-  'rounded-circle': 'u-rounded-full',
-  'border': 'u-border',
-  
-  'w-25': 'u-w-25',
-  'w-50': 'u-w-50',
-  'w-75': 'u-w-75',
-  'w-100': 'u-w-100',
-  'h-25': 'u-h-25',
-  'h-50': 'u-h-50',
-  'h-75': 'u-h-75',
-  'h-100': 'u-h-100'
-};
-
-/**
- * SCSS Variable Migration
- */
-const scssVariableMigration = {
-  // Colors
-  '$primary': 'var(--atomix-color-primary)',
-  '$secondary': 'var(--atomix-color-secondary)',
-  '$success': 'var(--atomix-color-success)',
-  '$danger': 'var(--atomix-color-error)',
-  '$warning': 'var(--atomix-color-warning)',
-  '$info': 'var(--atomix-color-info)',
-  '$light': 'var(--atomix-color-light)',
-  '$dark': 'var(--atomix-color-dark)',
-  
-  // Spacing
-  '$spacer': 'var(--atomix-space-4)',
-  '$spacing-xs': 'var(--atomix-space-1)',
-  '$spacing-sm': 'var(--atomix-space-2)',
-  '$spacing-md': 'var(--atomix-space-4)',
-  '$spacing-lg': 'var(--atomix-space-6)',
-  '$spacing-xl': 'var(--atomix-space-8)',
-  
-  // Typography
-  '$font-family-base': 'var(--atomix-font-family-base)',
-  '$font-size-base': 'var(--atomix-font-size-base)',
-  '$font-weight-normal': 'var(--atomix-font-weight-normal)',
-  '$font-weight-bold': 'var(--atomix-font-weight-bold)',
-  '$line-height-base': 'var(--atomix-line-height-base)',
-  
-  // Border
-  '$border-radius': 'var(--atomix-radius-md)',
-  '$border-width': 'var(--atomix-border-width)',
-  '$border-color': 'var(--atomix-color-border)'
-};
 
 /**
  * Migrate Tailwind classes to Atomix
  */
 export async function migrateTailwind(sourcePath, options = {}) {
+  const sanitizedSource = sanitizeInput(sourcePath);
+  const sourceValidation = validatePath(sanitizedSource);
+  if (!sourceValidation.isValid) {
+    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();
   const report = {
     filesProcessed: 0,
@@ -250,18 +37,18 @@ export async function migrateTailwind(sourcePath, options = {}) {
     warnings: [],
     errors: []
   };
-  
+
   try {
-    const files = await getAllFiles(sourcePath, ['.jsx', '.tsx', '.js', '.ts', '.html']);
-    
+    const files = await getAllFiles(safeSource, ['.jsx', '.tsx', '.js', '.ts', '.html']);
+
     for (const file of files) {
       spinner.text = `Processing ${relative(process.cwd(), file)}...`;
-      
+
       try {
         let content = await readFile(file, 'utf8');
         const originalContent = content;
         let replacementCount = 0;
-        
+
         // Replace className attributes
         content = content.replace(/className=["']([^"']+)["']/g, (match, classes) => {
           const classList = classes.split(' ');
@@ -271,7 +58,7 @@ export async function migrateTailwind(sourcePath, options = {}) {
               replacementCount++;
               return tailwindToAtomix[trimmed];
             }
-            
+
             // Check for responsive prefixes
             for (const [prefix, replacement] of Object.entries(tailwindToAtomix)) {
               if (trimmed.startsWith(prefix)) {
@@ -282,7 +69,7 @@ export async function migrateTailwind(sourcePath, options = {}) {
                 }
               }
             }
-            
+
             // If no mapping found, keep original
             if (trimmed && !trimmed.startsWith('c-') && !trimmed.startsWith('u-') && !trimmed.startsWith('o-')) {
               report.warnings.push({
@@ -291,13 +78,13 @@ export async function migrateTailwind(sourcePath, options = {}) {
                 message: 'No Atomix equivalent found'
               });
             }
-            
+
             return trimmed;
           });
-          
+
           return `className="${newClasses.join(' ')}"`;
         });
-        
+
         // Replace class attributes in HTML
         content = content.replace(/class=["']([^"']+)["']/g, (match, classes) => {
           const classList = classes.split(' ');
@@ -309,10 +96,10 @@ export async function migrateTailwind(sourcePath, options = {}) {
             }
             return trimmed;
           });
-          
+
           return `class="${newClasses.join(' ')}"`;
         });
-        
+
         if (content !== originalContent) {
           if (options.dryRun) {
             console.log(chalk.yellow(`  Would update: ${file}`));
@@ -322,7 +109,7 @@ export async function migrateTailwind(sourcePath, options = {}) {
             report.classesReplaced += replacementCount;
           }
         }
-        
+
       } catch (error) {
         report.errors.push({
           file: relative(process.cwd(), file),
@@ -330,11 +117,11 @@ export async function migrateTailwind(sourcePath, options = {}) {
         });
       }
     }
-    
+
     spinner.succeed(chalk.green('Tailwind migration complete!'));
-    
+
     return report;
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -345,6 +132,16 @@ export async function migrateTailwind(sourcePath, options = {}) {
  * Migrate Bootstrap classes to Atomix
  */
 export async function migrateBootstrap(sourcePath, options = {}) {
+  const sanitizedSource = sanitizeInput(sourcePath);
+  const sourceValidation = validatePath(sanitizedSource);
+  if (!sourceValidation.isValid) {
+    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();
   const report = {
     filesProcessed: 0,
@@ -352,47 +149,47 @@ export async function migrateBootstrap(sourcePath, options = {}) {
     warnings: [],
     errors: []
   };
-  
+
   try {
-    const files = await getAllFiles(sourcePath, ['.jsx', '.tsx', '.js', '.ts', '.html']);
-    
+    const files = await getAllFiles(safeSource, ['.jsx', '.tsx', '.js', '.ts', '.html']);
+
     for (const file of files) {
       spinner.text = `Processing ${relative(process.cwd(), file)}...`;
-      
+
       try {
         let content = await readFile(file, 'utf8');
         const originalContent = content;
         let replacementCount = 0;
-        
+
         // Replace className/class attributes
         const classPattern = /(className|class)=["']([^"']+)["']/g;
         content = content.replace(classPattern, (match, attr, classes) => {
           const classList = classes.split(' ');
           const newClasses = classList.map(cls => {
             const trimmed = cls.trim();
-            
+
             // Check direct mapping
             if (bootstrapToAtomix[trimmed]) {
               replacementCount++;
               return bootstrapToAtomix[trimmed];
             }
-            
+
             // Check for col-{breakpoint}-{size} pattern
             const colPattern = /^col-(sm|md|lg|xl)-(\d+)$/;
             const colMatch = trimmed.match(colPattern);
             if (colMatch) {
               replacementCount++;
-              return `o-col-${colMatch[1]}-${colMatch[2]}`;
+              return `c-grid__item c-grid__item--${colMatch[2]}`;
             }
-            
+
             // Check for offset pattern
             const offsetPattern = /^offset-(sm|md|lg|xl)-(\d+)$/;
             const offsetMatch = trimmed.match(offsetPattern);
             if (offsetMatch) {
               replacementCount++;
-              return `o-offset-${offsetMatch[1]}-${offsetMatch[2]}`;
+              return `c-grid__item c-grid__item--offset-${offsetMatch[2]}`;
             }
-            
+
             // If no mapping found, keep original
             if (trimmed && !trimmed.startsWith('c-') && !trimmed.startsWith('u-') && !trimmed.startsWith('o-')) {
               report.warnings.push({
@@ -401,13 +198,13 @@ export async function migrateBootstrap(sourcePath, options = {}) {
                 message: 'No Atomix equivalent found'
               });
             }
-            
+
             return trimmed;
           });
-          
+
           return `${attr}="${newClasses.join(' ')}"`;
         });
-        
+
         if (content !== originalContent) {
           if (options.dryRun) {
             console.log(chalk.yellow(`  Would update: ${file}`));
@@ -417,7 +214,7 @@ export async function migrateBootstrap(sourcePath, options = {}) {
             report.classesReplaced += replacementCount;
           }
         }
-        
+
       } catch (error) {
         report.errors.push({
           file: relative(process.cwd(), file),
@@ -425,11 +222,11 @@ export async function migrateBootstrap(sourcePath, options = {}) {
         });
       }
     }
-    
+
     spinner.succeed(chalk.green('Bootstrap migration complete!'));
-    
+
     return report;
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -440,6 +237,16 @@ export async function migrateBootstrap(sourcePath, options = {}) {
  * Migrate SCSS variables to CSS custom properties
  */
 export async function migrateSCSSVariables(sourcePath, options = {}) {
+  const sanitizedSource = sanitizeInput(sourcePath);
+  const sourceValidation = validatePath(sanitizedSource);
+  if (!sourceValidation.isValid) {
+    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();
   const report = {
     filesProcessed: 0,
@@ -447,18 +254,18 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
     warnings: [],
     errors: []
   };
-  
+
   try {
-    const files = await getAllFiles(sourcePath, ['.scss', '.sass', '.css']);
-    
+    const files = await getAllFiles(safeSource, ['.scss', '.sass', '.css']);
+
     for (const file of files) {
       spinner.text = `Processing ${relative(process.cwd(), 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)) {
           const regex = new RegExp(`\\${scssVar}(?![a-z-])`, 'g');
@@ -468,7 +275,7 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
             content = content.replace(regex, cssVar);
           }
         }
-        
+
         // Find remaining SCSS variables that weren't migrated
         const remainingVars = content.match(/\$[a-z-]+/gi);
         if (remainingVars) {
@@ -482,7 +289,7 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
             }
           });
         }
-        
+
         if (content !== originalContent) {
           if (options.dryRun) {
             console.log(chalk.yellow(`  Would update: ${file}`));
@@ -492,7 +299,7 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
             report.variablesReplaced += replacementCount;
           }
         }
-        
+
       } catch (error) {
         report.errors.push({
           file: relative(process.cwd(), file),
@@ -500,11 +307,11 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
         });
       }
     }
-    
+
     spinner.succeed(chalk.green('SCSS variable migration complete!'));
-    
+
     return report;
-    
+
   } catch (error) {
     spinner.fail(chalk.red('Migration failed'));
     throw error;
@@ -516,14 +323,14 @@ export async function migrateSCSSVariables(sourcePath, options = {}) {
  */
 async function getAllFiles(dir, extensions = []) {
   const files = [];
-  
+
   async function walk(currentPath) {
     const entries = await readdir(currentPath);
-    
+
     for (const entry of entries) {
       const fullPath = join(currentPath, entry);
       const stats = await stat(fullPath);
-      
+
       if (stats.isDirectory()) {
         // Skip node_modules and hidden directories
         if (!entry.startsWith('.') && entry !== 'node_modules') {
@@ -537,7 +344,7 @@ async function getAllFiles(dir, extensions = []) {
       }
     }
   }
-  
+
   await walk(dir);
   return files;
 }
@@ -547,14 +354,14 @@ async function getAllFiles(dir, extensions = []) {
  */
 export function displayMigrationReport(report) {
   console.log(chalk.bold('\n📊 Migration Report\n'));
-  console.log(chalk.gray('=' .repeat(50)));
-  
+  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}`));
-  
+
   if (report.warnings.length > 0) {
     console.log(chalk.yellow(`\n⚠️  Warnings (${report.warnings.length}):\n`));
-    
+
     // Group warnings by type
     const groupedWarnings = {};
     report.warnings.forEach(warning => {
@@ -564,7 +371,7 @@ export function displayMigrationReport(report) {
       }
       groupedWarnings[key].push(warning.file);
     });
-    
+
     Object.entries(groupedWarnings).forEach(([key, files]) => {
       console.log(chalk.yellow(`  • ${key}`));
       console.log(chalk.gray(`    Found in ${files.length} file(s)`));
@@ -573,7 +380,7 @@ export function displayMigrationReport(report) {
       }
     });
   }
-  
+
   if (report.errors.length > 0) {
     console.log(chalk.red(`\n❌ Errors (${report.errors.length}):\n`));
     report.errors.forEach(error => {
@@ -581,16 +388,16 @@ export function displayMigrationReport(report) {
       console.log(chalk.gray(`    ${error.error}`));
     });
   }
-  
-  console.log(chalk.gray('\n' + '=' .repeat(50)));
-  
+
+  console.log(chalk.gray('\n' + '='.repeat(50)));
+
   if (report.warnings.length > 0) {
     console.log(chalk.yellow('\n💡 Suggestions:'));
     console.log(chalk.gray('  1. Review unmapped classes/variables'));
     console.log(chalk.gray('  2. Create custom mappings for your specific needs'));
     console.log(chalk.gray('  3. Consider using Atomix utilities for better compatibility'));
   }
-  
+
   console.log(chalk.green('\n✅ Migration complete!'));
   console.log(chalk.gray('Please review the changes and test your application.\n'));
 }