@shohojdhara/atomix 0.4.8 → 0.5.0

package/scripts/cli/__tests__/token-provider.test.js

@@ -0,0 +1,361 @@
+/**
+ * Token Provider & Validator Tests
+ * Tests for Phase 1: Enhanced Design Token Integration
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { 
+  TokenProvider, 
+  TOKEN_FORMATS, 
+  TOKEN_CATEGORIES,
+  tokenProvider 
+} from '../internal/tokens/token-provider.js';
+import { 
+  TokenValidator, 
+  VALIDATION_RULES, 
+  SEVERITY,
+  tokenValidator 
+} from '../internal/tokens/token-validator.js';
+
+describe('TokenProvider', () => {
+  let provider;
+
+  beforeEach(() => {
+    provider = new TokenProvider();
+  });
+
+  describe('Initialization', () => {
+    it('should create a new TokenProvider instance', () => {
+      expect(provider).toBeInstanceOf(TokenProvider);
+    });
+
+    it('should have default options', () => {
+      expect(provider.tokenPath).toBe('./design-tokens');
+      expect(provider.format).toBe(TOKEN_FORMATS.JSON);
+      expect(provider.tokens).toEqual({});
+    });
+
+    it('should accept custom options', () => {
+      const customProvider = new TokenProvider({
+        tokenPath: './custom-tokens',
+        format: TOKEN_FORMATS.CSS
+      });
+      
+      expect(customProvider.tokenPath).toBe('./custom-tokens');
+      expect(customProvider.format).toBe(TOKEN_FORMATS.CSS);
+    });
+  });
+
+  describe('Token Loading', () => {
+    it('should throw error when file not found', async () => {
+      await expect(provider.loadTokens('./non-existent.json'))
+        .rejects
+        .toThrow('Token file not found');
+    });
+
+    it('should categorize tokens correctly', () => {
+      const categorizeToken = provider.categorizeToken.bind(provider);
+      
+      expect(categorizeToken('color-primary')).toBe(TOKEN_CATEGORIES.COLOR);
+      expect(categorizeToken('space-sm')).toBe(TOKEN_CATEGORIES.SPACING);
+      expect(categorizeToken('font-size-lg')).toBe(TOKEN_CATEGORIES.TYPOGRAPHY);
+      expect(categorizeToken('shadow-md')).toBe(TOKEN_CATEGORIES.SHADOW);
+      expect(categorizeToken('radius-lg')).toBe(TOKEN_CATEGORIES.RADIUS);
+      expect(categorizeToken('duration-fast')).toBe(TOKEN_CATEGORIES.ANIMATION);
+    });
+
+    it('should infer token types from values', () => {
+      const inferTokenType = provider.inferTokenType.bind(provider);
+      
+      expect(inferTokenType('#ff0000')).toBe('color');
+      expect(inferTokenType('rgb(255, 0, 0)')).toBe('color');
+      expect(inferTokenType('hsl(0, 100%, 50%)')).toBe('color');
+      expect(inferTokenType('16px')).toBe('dimension');
+      expect(inferTokenType('1rem')).toBe('dimension');
+      expect(inferTokenType('300ms')).toBe('duration');
+      expect(inferTokenType('0.5s')).toBe('duration');
+      expect(inferTokenType(42)).toBe('number');
+    });
+  });
+
+  describe('Token Merging', () => {
+    it('should merge multiple token sets', () => {
+      const existing = {
+        color: { primary: { value: '#000' } },
+        spacing: { sm: { value: '8px' } }
+      };
+      
+      const newTokens = {
+        color: { secondary: { value: '#fff' } },
+        typography: { base: { value: '16px' } }
+      };
+      
+      const merged = provider.mergeTokens(existing, newTokens);
+      
+      expect(merged.color.primary).toBeDefined();
+      expect(merged.color.secondary).toBeDefined();
+      expect(merged.spacing.sm).toBeDefined();
+      expect(merged.typography.base).toBeDefined();
+    });
+  });
+
+  describe('Token Export', () => {
+    beforeEach(() => {
+      provider.tokens = {
+        color: {
+          primary: { value: '#007bff', type: 'color' },
+          secondary: { value: '#6c757d', type: 'color' }
+        },
+        spacing: {
+          sm: { value: '8px', type: 'dimension' },
+          lg: { value: '16px', type: 'dimension' }
+        }
+      };
+    });
+
+    it('should export to JSON format', () => {
+      const json = provider.exportTokens(TOKEN_FORMATS.JSON, { pretty: false });
+      const parsed = JSON.parse(json);
+      
+      expect(parsed.color.primary.value).toBe('#007bff');
+      expect(parsed.spacing.lg.value).toBe('16px');
+    });
+
+    it('should export to CSS custom properties', () => {
+      const css = provider.exportTokens(TOKEN_FORMATS.CSS, { 
+        selector: ':root',
+        prefix: 'atomix'
+      });
+      
+      expect(css).toContain(':root {');
+      expect(css).toContain('--atomix-color-primary: #007bff;');
+      expect(css).toContain('--atomix-spacing-lg: 16px;');
+    });
+
+    it('should export to W3C DTCG format', () => {
+      const dtcg = provider.exportTokens(TOKEN_FORMATS.W3C_DTCG);
+      
+      expect(dtcg.$schema).toBe('https://design-tokens.org/schema.json');
+      expect(dtcg.tokens.color.primary.value).toBe('#007bff');
+    });
+  });
+});
+
+describe('TokenValidator', () => {
+  let validator;
+
+  beforeEach(() => {
+    validator = new TokenValidator();
+  });
+
+  describe('Initialization', () => {
+    it('should create a new TokenValidator instance', () => {
+      expect(validator).toBeInstanceOf(TokenValidator);
+    });
+
+    it('should register all built-in rules', () => {
+      expect(validator.rules.size).toBeGreaterThan(0);
+      expect(validator.rules.has('COLOR_CONTRAST')).toBe(true);
+      expect(validator.rules.has('SEMANTIC_NAMING')).toBe(true);
+      expect(validator.rules.has('NO_HARDCODED_COLORS')).toBe(true);
+    });
+
+    it('should have all rules enabled by default', () => {
+      expect(validator.enabledRules.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Validation Rules', () => {
+    it('should validate color contrast', () => {
+      const tokens = {
+        color: {
+          text: { value: '#999999' },
+          background: { value: '#ffffff' }
+        }
+      };
+      
+      const result = validator.validate(tokens);
+      
+      // Low contrast should be flagged
+      const contrastIssue = result.issues.find(i => i.rule === 'color-contrast');
+      expect(contrastIssue).toBeDefined();
+      expect(contrastIssue.severity).toBe(SEVERITY.ERROR);
+    });
+
+    it('should detect semantic naming issues', () => {
+      const tokens = {
+        color: {
+          blue: { value: '#0000ff' },
+          red: { value: '#ff0000' }
+        }
+      };
+      
+      const result = validator.validate(tokens);
+      
+      const namingIssue = result.issues.find(i => i.rule === 'semantic-naming');
+      expect(namingIssue).toBeDefined();
+      expect(namingIssue.severity).toBe(SEVERITY.WARNING);
+    });
+
+    it('should pass semantic naming for brand colors', () => {
+      const tokens = {
+        color: {
+          brandBlue: { value: '#0000ff' },
+          primaryRed: { value: '#ff0000' }
+        }
+      };
+      
+      const result = validator.validate(tokens);
+      
+      // Filter out token-completeness warnings which are expected
+      const namingIssue = result.issues.find(i => i.rule === 'semantic-naming');
+      // Should not flag brand colors or primary/secondary prefixed colors
+      expect(namingIssue).toBeUndefined();
+    });
+
+    it('should detect hardcoded colors in code', () => {
+      const codeContent = `
+        const styles = {
+          color: '#ff0000',
+          backgroundColor: 'rgb(0, 123, 255)',
+          borderColor: 'hsl(120, 100%, 50%)'
+        };
+      `;
+      
+      const result = validator.validate({}, { codeContent });
+      
+      const hardcodedIssue = result.issues.find(i => i.rule === 'no-hardcoded-colors');
+      expect(hardcodedIssue).toBeDefined();
+      expect(hardcodedIssue.matches).toHaveLength(3);
+    });
+
+    it('should validate token completeness', () => {
+      const tokens = {
+        color: { primary: { value: '#000' } }
+        // Missing spacing and typography
+      };
+      
+      const result = validator.validate(tokens);
+      
+      const completenessIssues = result.issues.filter(i => i.rule === 'token-completeness');
+      expect(completenessIssues.length).toBeGreaterThan(0);
+    });
+
+    it('should detect duplicate tokens', () => {
+      const tokens = {
+        color: {
+          primary: { value: '#007bff' },
+          main: { value: '#007bff' }
+        },
+        spacing: {
+          sm: { value: '8px' },
+          small: { value: '8px' }
+        }
+      };
+      
+      const result = validator.validate(tokens);
+      
+      const duplicateIssues = result.issues.filter(i => i.rule === 'duplicate-detection');
+      expect(duplicateIssues.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Rule Management', () => {
+    it('should toggle rules on/off', () => {
+      const initialCount = validator.enabledRules.length;
+      
+      validator.toggleRule('COLOR_CONTRAST', false);
+      expect(validator.enabledRules).not.toContain('COLOR_CONTRAST');
+      
+      validator.toggleRule('COLOR_CONTRAST', true);
+      expect(validator.enabledRules).toContain('COLOR_CONTRAST');
+    });
+
+    it('should allow registering custom rules', () => {
+      const customRule = {
+        name: 'custom-rule',
+        description: 'Custom validation rule',
+        severity: SEVERITY.INFO,
+        validate: (tokens) => []
+      };
+      
+      validator.registerRule('CUSTOM_RULE', customRule);
+      
+      expect(validator.rules.has('CUSTOM_RULE')).toBe(true);
+    });
+
+    it('should reject invalid rules', () => {
+      expect(() => {
+        validator.registerRule('INVALID', { name: 'test' });
+      }).toThrow('must have name, validate, and severity');
+    });
+  });
+
+  describe('Validation Report', () => {
+    it('should generate formatted report', () => {
+      const tokens = {
+        color: {
+          lowContrast: { value: '#ccc' },
+          background: { value: '#fff' }
+        }
+      };
+      
+      const result = validator.validate(tokens);
+      const report = validator.getReport(result);
+      
+      expect(report).toContain('Token Validation Report');
+      expect(report).toContain('Status:');
+      expect(report).toContain('Summary:');
+      expect(report).toContain('Errors:');
+    });
+  });
+});
+
+describe('Integration Tests', () => {
+  it('should load and validate tokens together', async () => {
+    const provider = new TokenProvider();
+    const validator = new TokenValidator();
+    
+    // Simulate loading tokens
+    provider.tokens = {
+      color: {
+        primary: { value: '#007bff', type: 'color' },
+        success: { value: '#22c55e', type: 'color' }
+      },
+      spacing: {
+        4: { value: '1rem', type: 'dimension' },
+        8: { value: '2rem', type: 'dimension' }
+      }
+    };
+    
+    const tokens = provider.getAllTokens();
+    const result = validator.validate(tokens);
+    
+    expect(result).toBeDefined();
+    expect(typeof result.valid).toBe('boolean');
+    expect(result.summary).toBeDefined();
+  });
+
+  it('should validate component with loaded tokens', () => {
+    const provider = new TokenProvider();
+    const validator = new TokenValidator();
+    
+    provider.tokens = {
+      color: {
+        primary: { value: '#007bff' }
+      }
+    };
+    
+    const cleanCode = `
+      const Component = () => {
+        return <div style={{ color: 'var(--color-primary)' }} />;
+      };
+    `;
+    
+    const result = validator.validateComponent(cleanCode, provider.getAllTokens());
+    
+    // Should not have hardcoded color errors
+    const hardcodedIssue = result.issues.find(i => i.rule === 'no-hardcoded-colors');
+    expect(hardcodedIssue).toBeUndefined();
+  });
+});

package/scripts/cli/__tests__/utils.test.js

@@ -30,13 +30,13 @@ describe('CLI Utils', () => {
     it('should accept valid relative paths', () => {
       const result = validatePath('./src/components', tempDir);
       expect(result.isValid).toBe(true);
-      expect(result.safePath).toContain('src/components');
+      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
     });
 
     it('should reject paths outside project directory', () => {
       const result = validatePath('../../etc/passwd', tempDir);
       expect(result.isValid).toBe(false);
-      expect(result.error).toContain('outside the project directory');
+      expect(result.error).toMatch(/outside|traversal/);
     });
 
     it('should reject sensitive files', () => {
@@ -54,7 +54,7 @@ describe('CLI Utils', () => {
     it('should normalize paths correctly', () => {
       const result = validatePath('./src/../src/components', tempDir);
       expect(result.isValid).toBe(true);
-      expect(result.safePath).toContain('src/components');
+      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
     });
   });
 
@@ -69,8 +69,8 @@ describe('CLI Utils', () => {
     });
 
     it('should reject invalid names', () => {
-      const invalidNames = ['button', 'button-primary', 'Button-Primary', '123Button', ''];
-      
+      const invalidNames = ['123Button', '', '1', 'Component', 'React'];
+
       invalidNames.forEach(name => {
         const result = validateComponentName(name);
         expect(result.isValid).toBe(false);

package/scripts/cli/commands/benchmark.js

@@ -0,0 +1,105 @@
+/**
+ * Atomix CLI - Benchmark Command
+ * Profiles CLI speed and provides performance metrics
+ */
+
+import chalk from 'chalk';
+import { logger } from '../utils/logger.js';
+import { telemetry } from '../utils/telemetry.js';
+
+/**
+ * Benchmark action handler
+ */
+export async function benchmarkAction(options) {
+  logger.info(chalk.blue('📊 CLI Performance Benchmark...'));
+
+  const logs = await telemetry.getLogs();
+  
+  if (logs.length === 0) {
+    logger.info('Benchmark collects metrics from previous CLI runs.');
+    logger.warn('No performance data found. Run some commands first!');
+    return;
+  }
+
+  // Calculate stats
+  const stats = calculateStats(logs);
+
+  // Display results
+  displayBenchmarkResults(stats);
+}
+
+/**
+ * Calculate performance statistics from logs
+ */
+function calculateStats(logs) {
+  const byCommand = {};
+
+  logs.forEach(log => {
+    if (!byCommand[log.command]) {
+      byCommand[log.command] = {
+        name: log.command,
+        runs: 0,
+        successes: 0,
+        totalDuration: 0,
+        min: Infinity,
+        max: -Infinity,
+        durations: []
+      };
+    }
+
+    const cmd = byCommand[log.command];
+    cmd.runs++;
+    if (log.success) cmd.successes++;
+    cmd.totalDuration += log.duration;
+    cmd.min = Math.min(cmd.min, log.duration);
+    cmd.max = Math.max(cmd.max, log.duration);
+    cmd.durations.push(log.duration);
+  });
+
+  // Calculate averages and percentiles
+  Object.values(byCommand).forEach(cmd => {
+    cmd.avg = parseFloat((cmd.totalDuration / cmd.runs).toFixed(2));
+    
+    // Simple 95th percentile
+    cmd.durations.sort((a, b) => a - b);
+    const p95Index = Math.floor(cmd.durations.length * 0.95);
+    cmd.p95 = cmd.durations[p95Index];
+  });
+
+  return Object.values(byCommand);
+}
+
+/**
+ * Display benchmark results in a clean table
+ */
+function displayBenchmarkResults(stats) {
+  console.log('\n' + chalk.bold.underline('CLI Performance Metrics (Local)'));
+  console.log(chalk.gray('Last 100 commands recorded\n'));
+
+  // Header
+  console.log(
+    chalk.bold(
+      'Command'.padEnd(15) + 
+      'Runs'.padEnd(8) + 
+      'Avg (ms)'.padEnd(12) + 
+      'P95 (ms)'.padEnd(12) + 
+      'Success Rate'
+    )
+  );
+  console.log(chalk.gray('-'.repeat(60)));
+
+  stats.forEach(s => {
+    const successRate = ((s.successes / s.runs) * 100).toFixed(0) + '%';
+    const color = s.avg < 1000 ? chalk.green : s.avg < 2000 ? chalk.yellow : chalk.red;
+    
+    console.log(
+      s.name.padEnd(15) + 
+      s.runs.toString().padEnd(8) + 
+      color(s.avg.toString().padEnd(12)) + 
+      color(s.p95.toString().padEnd(12)) + 
+      (s.successes === s.runs ? chalk.green(successRate) : chalk.yellow(successRate))
+    );
+  });
+
+  console.log('\n' + chalk.blue('Performance Budget: ') + chalk.bold('< 2000ms per command'));
+}

package/scripts/cli/commands/build-theme.js

@@ -33,7 +33,9 @@ export async function buildThemeAction(themePath, options) {
       );
     }
 
-    const sanitizedOutput = sanitizeInput(options.output || './dist');
+    // Default output directory; may overwrite app build—use -o dist-theme for custom themes.
+    const outputDir = options.output ?? './dist';
+    const sanitizedOutput = sanitizeInput(outputDir);
     const outputValidation = filesystem.validatePath(sanitizedOutput);
 
     if (!outputValidation.isValid) {
@@ -99,6 +101,7 @@ export async function buildThemeAction(themePath, options) {
         await performBuild();
       });
 
+      // Only allowed direct success exit: clean shutdown in watch mode.
       process.on('SIGINT', () => {
         watcher.close();
         process.exit(0);

package/scripts/cli/commands/clean.js

@@ -0,0 +1,109 @@
+/**
+ * Atomix CLI Clean Command
+ * Safely clean build artifacts and cache files
+ */
+
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { cacheManager } from '../utils/cache-manager.js';
+
+/**
+ * Action logic for cleaning build artifacts
+ * @param {object} options - Command options
+ * @param {boolean} options.all - Clean node_modules as well
+ * @param {boolean} options.cache - Only clean cache directories
+ * @param {boolean} options.dryRun - Preview without deleting
+ * @param {boolean} options.verbose - Show detailed output
+ */
+export async function cleanAction(options) {
+  const spinner = logger.spinner('Analyzing project...').start();
+  
+  try {
+    // Step 1: Identify what can be cleaned
+    spinner.text = 'Scanning for cleanable files...';
+    const targets = await cacheManager.identifyTargets(options);
+    
+    // Filter out protected files
+    const safeTargets = targets.filter(target => {
+      if (cacheManager.isProtected(target.path)) {
+        logger.debug(`Skipping protected file: ${target.path}`);
+        return false;
+      }
+      return true;
+    });
+
+    // Step 2: Handle empty state
+    if (safeTargets.length === 0) {
+      spinner.succeed('Nothing to clean! Your project is already tidy.');
+      return;
+    }
+
+    // Step 3: Calculate total size
+    const totalSize = await cacheManager.calculateSize(safeTargets);
+    const formattedSize = cacheManager.formatBytes(totalSize);
+
+    // Step 4: Handle dry-run mode
+    if (options.dryRun || process.env.ATOMIX_DRY_RUN === 'true') {
+      spinner.stop();
+      cacheManager.displayDryRun(safeTargets);
+      logger.info(
+        `\nℹ️  Total size: ${formattedSize}\n` +
+        `⚠️  Run without --dry-run to actually delete these files.`
+      );
+      return;
+    }
+
+    // Step 5: Perform cleanup
+    spinner.text = `Cleaning ${safeTargets.length} item(s)...`;
+    
+    let successCount = 0;
+    let errorCount = 0;
+    const errors = [];
+
+    for (const target of safeTargets) {
+      try {
+        if (options.verbose) {
+          logger.info(`Removing: ${target.relativePath}`);
+        }
+        
+        await cacheManager.deletePath(target.path, options);
+        successCount++;
+      } catch (error) {
+        errorCount++;
+        errors.push({
+          path: target.relativePath,
+          error: error.message
+        });
+        logger.debug(`Failed to delete ${target.path}: ${error.message}`);
+      }
+    }
+
+    // Step 6: Report results
+    if (errorCount > 0) {
+      spinner.warn(`Cleanup completed with ${errorCount} warning(s)`);
+      
+      if (options.verbose && errors.length > 0) {
+        logger.warn('\nWarnings:');
+        errors.forEach(err => {
+          logger.warn(`  • ${err.path}: ${err.error}`);
+        });
+      }
+    } else {
+      spinner.succeed(`Cleanup completed! Removed ${successCount} item(s) (${formattedSize})`);
+    }
+
+  } catch (error) {
+    spinner.fail('Cleanup failed');
+    
+    // Re-throw as AtomixCLIError with helpful suggestions
+    throw new AtomixCLIError(
+      error.message,
+      'FILESYSTEM_ERROR',
+      [
+        'Check if you have write permissions for the target directories',
+        'Ensure no files are locked by another process',
+        'Try running with --verbose to see which file caused the issue'
+      ]
+    );
+  }
+}