@shohojdhara/atomix 0.4.7 → 0.4.9

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

@@ -0,0 +1,115 @@
+/**
+ * Atomix CLI Build Theme Command
+ */
+
+import { resolve, basename, dirname } from 'path';
+import chokidar from 'chokidar';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { filesystem } from '../internal/filesystem.js';
+import { themeCompiler } from '../internal/compiler.js';
+import { sanitizeInput } from '../utils/helpers.js';
+
+/**
+ * Action logic for building a theme
+ * @param {string} themePath - Input path to theme SCSS
+ * @param {object} options - Command options
+ */
+export async function buildThemeAction(themePath, options) {
+  const spinner = logger.spinner('Initializing theme build...').start();
+
+  try {
+    const sanitizedThemePath = sanitizeInput(themePath);
+    const themeValidation = filesystem.validatePath(sanitizedThemePath);
+
+    if (!themeValidation.isValid) {
+      throw new AtomixCLIError(
+        themeValidation.error,
+        'INVALID_PATH',
+        [
+          'Ensure theme path is within the project directory',
+          'Avoid sensitive or absolute system paths'
+        ]
+      );
+    }
+
+    // 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) {
+      throw new AtomixCLIError(
+        outputValidation.error,
+        'INVALID_PATH',
+        ['Use a project-relative directory for output']
+      );
+    }
+
+    // Resolve index.scss
+    const indexPath = sanitizedThemePath.endsWith('.scss')
+      ? resolve(themeValidation.safePath)
+      : resolve(themeValidation.safePath, 'index.scss');
+
+    if (!(await filesystem.exists(indexPath))) {
+      throw new AtomixCLIError(
+        `Theme file not found: ${indexPath}`,
+        'THEME_NOT_FOUND',
+        ['Check if the file path is correct', 'Ensure the file has a .scss extension']
+      );
+    }
+
+    const themeName = basename(dirname(indexPath));
+
+    const performBuild = async () => {
+      try {
+        await themeCompiler.compile(indexPath, outputValidation.safePath, {
+          minify: options.minify,
+          sourcemap: options.sourcemap,
+          analyze: options.analyze,
+          themeName,
+          logger: {
+            info: (msg) => { spinner.text = msg; },
+            debug: (msg) => logger.debug(msg)
+          }
+        });
+        
+        spinner.succeed(`Theme '${themeName}' built successfully`);
+        if (options.watch) {
+          logger.info('\n👁️  Watch mode enabled. Rebuilding on changes...');
+        }
+      } catch (error) {
+        spinner.fail(`Build failed: ${error.message}`);
+        if (!options.watch) throw error;
+      }
+    };
+
+    // Initial build
+    await performBuild();
+
+    // Watch mode
+    if (options.watch) {
+      const watcher = chokidar.watch([dirname(indexPath)], {
+        ignored: /node_modules/,
+        persistent: true,
+        ignoreInitial: true
+      });
+
+      watcher.on('all', async (event, path) => {
+        logger.debug(`File ${event}: ${path}`);
+        spinner.start('Rebuilding theme...');
+        await performBuild();
+      });
+
+      // Only allowed direct success exit: clean shutdown in watch mode.
+      process.on('SIGINT', () => {
+        watcher.close();
+        process.exit(0);
+      });
+    }
+
+  } catch (error) {
+    spinner.fail('Operation failed');
+    throw error;
+  }
+}