@shohojdhara/atomix 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -134,8 +134,6 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.15.0",
-    "jest-axe": "^8.0.0",
-    "rollup-plugin-preserve-shebangs": "^0.2.0",
     "@babel/core": "^7.23.0",
     "@babel/plugin-transform-runtime": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
@@ -143,9 +141,11 @@
     "@babel/preset-typescript": "^7.23.0",
     "@babel/runtime-corejs3": "^7.23.0",
     "@changesets/cli": "^2.26.0",
+    "@happy-dom/global-registrator": "^20.8.4",
     "@phosphor-icons/react": "2.1.10",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
@@ -185,7 +185,9 @@
     "eslint-plugin-jsx-a11y": "^6.7.0",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "happy-dom": "^20.8.4",
     "identity-obj-proxy": "^3.0.0",
+    "jest-axe": "^8.0.0",
     "jsdom": "^22.0.0",
     "postcss-flexbugs-fixes": "^5.0.0",
     "postcss-import": "^15.0.0",
@@ -198,6 +200,7 @@
     "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-preserve-shebangs": "^0.2.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^8.6.14",
     "storybook-theme-switch-addon": "^1.0.2",

package/scripts/atomix-cli.js

@@ -11,11 +11,21 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { logger } from './cli/utils/logger.js';
 import { handleCLIError } from './cli/utils/error.js';
+import { telemetry } from './cli/utils/telemetry.js';
+import chalk from 'chalk';
 
 // Action Modules
 import { initAction } from './cli/commands/init.js';
 import { generateAction } from './cli/commands/generate.js';
 import { buildThemeAction } from './cli/commands/build-theme.js';
+import { doctorAction } from './cli/commands/doctor.js';
+import { validateAction } from './cli/commands/validate.js';
+import { tokensAction } from './cli/commands/tokens.js';
+import { migrateAction } from './cli/commands/migrate.js';
+import { benchmarkAction } from './cli/commands/benchmark.js';
+import { cleanAction } from './cli/commands/clean.js';
+import { themeBridgeAction } from './cli/commands/theme-bridge.js';
+import { configLoader } from './cli/internal/config-loader.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -30,11 +40,75 @@ program
   .description('Atomix Design System CLI - Modular Edition')
   .version(packageJson.version)
   .option('-d, --debug', 'Enable debug mode', false)
-  .hook('preAction', (thisCommand) => {
+  .option('--dry-run', 'Preview changes without modifying files', false)
+  .hook('preAction', async (thisCommand) => {
+    // Load config
+    await configLoader.load();
+
     if (thisCommand.opts().debug) {
       process.env.ATOMIX_DEBUG = 'true';
       logger.debug('Debug mode enabled');
     }
+    if (thisCommand.opts().dryRun) {
+      process.env.ATOMIX_DRY_RUN = 'true';
+      logger.info(chalk.yellow('⚠️ Dry-run mode enabled. No files will be modified.'));
+    }
+
+    // Start telemetry
+    const fullCommand = thisCommand.name() === 'atomix' 
+      ? thisCommand.args[0] || 'atomix' 
+      : thisCommand.name();
+    telemetry.start(fullCommand);
+  })
+  .hook('postAction', async (thisCommand) => {
+    // Stop telemetry
+    await telemetry.stop(true);
+  });
+
+/**
+ * Environment Diagnostics
+ */
+program
+  .command('doctor')
+  .description('Verify the environment and project health. Use --explain to list what each check does.')
+  .option('--explain', 'Print short descriptions for each doctor check and exit')
+  .action(async (options) => {
+    try {
+      await doctorAction(options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
+/**
+ * Code & Config Validation
+ */
+program
+  .command('validate [subcommand] [name]')
+  .description('Audit project quality (A11y, Tokens, Performance). Use "validate component <Name>" for component-scoped audit. Run build first for performance analysis (requires dist/).')
+  .action(async (subcommand, name, options) => {
+    try {
+      await validateAction(options, subcommand, name);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
+/**
+ * Design Token Management
+ */
+program
+  .command('tokens <subcommand>')
+  .description('Manage design tokens (list, export, pull, push). For pull/push, --provider is required (configure tokenEngine.providers in atomix.config; types: figma, style-dictionary, w3c).')
+  .option('-f, --format <format>', 'Export format (css|scss|json)', 'css')
+  .option('-o, --output <path>', 'Output directory', './tokens')
+  .option('-p, --provider <provider>', 'Token provider name (required for pull and push)')
+  .action(async (subcommand, options) => {
+    try {
+      await tokensAction(subcommand, options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
   });
 
 /**
@@ -42,7 +116,9 @@ program
  */
 program
   .command('init')
-  .description('Initialize a new Atomix design system project')
+  .description('Initialize a new Atomix design system project. For CI/scripts use --type <react|nextjs|vanilla> or --yes.')
+  .option('-y, --yes', 'Use default choices (non-interactive)')
+  .option('-t, --type <type>', 'Project type: react, nextjs, or vanilla (skips prompt when set)')
   .action(async (options) => {
     try {
       await initAction(options);
@@ -60,6 +136,7 @@ program
   .description('Generate components, tokens, or themes')
   .option('-i, --interactive', 'Interactive mode', false)
   .option('-p, --path <path>', 'Output path', './src/components')
+  .option('--prompt <prompt>', 'AI prompt for generating component')
   .option('--complexity <level>', 'Complexity (simple|medium|complex)', 'medium')
   .option('--validate', 'Validate after generation', true)
   .action(async (type, name, options) => {
@@ -70,13 +147,59 @@ program
     }
   });
 
+/**
+ * Migration Tools
+ */
+program
+  .command('migrate <type> <source>')
+  .description('Migrate from other frameworks (tailwind|bootstrap). <source> is the project root directory (e.g. . or ./my-tailwind-app).')
+  .option('-p, --preview', 'Preview side-by-side diff before applying', false)
+  .action(async (type, source, options) => {
+    try {
+      await migrateAction(type, source, options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
+/**
+ * Performance & Benchmarking
+ */
+program
+  .command('benchmark')
+  .description('Profile CLI performance and show metrics. Benchmark collects metrics from previous CLI runs.')
+  .action(async (options) => {
+    try {
+      await benchmarkAction(options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
+/**
+ * Build Artifact Cleanup
+ */
+program
+  .command('clean')
+  .description('Clean build artifacts and cache files. Use --dry-run to preview, --all to include node_modules.')
+  .option('--all', 'Include node_modules in cleanup', false)
+  .option('--cache', 'Only clean cache directories', false)
+  .option('--verbose', 'Show detailed output', false)
+  .action(async (options) => {
+    try {
+      await cleanAction(options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
 /**
  * Theme Building
  */
 program
   .command('build-theme <path>')
-  .description('Build a custom theme from SCSS')
-  .option('-o, --output <path>', 'Output directory', './dist')
+  .description('Build a custom theme from SCSS. Default output is ./dist (may overwrite app build; use -o dist-theme for custom themes).')
+  .option('-o, --output <path>', 'Output directory (default: ./dist)', './dist')
   .option('-m, --minify', 'Minify CSS', true)
   .option('-s, --sourcemap', 'Generate source maps', false)
   .option('-w, --watch', 'Watch mode', false)
@@ -89,6 +212,27 @@ program
     }
   });
 
+/**
+ * Theme Bridge - Sync Design Tokens with Theme Providers
+ */
+program
+  .command('theme-bridge [source]')
+  .description('Sync design tokens with theme providers (Tailwind, CSS-in-JS, CSS Variables)')
+  .option('-o, --output <dir>', 'Output directory for theme files', './src/theme')
+  .option('-f, --format <format>', 'Theme format (tailwind, emotion, styled-components, vanilla-extract, css-variables, all)', 'all')
+  .option('--prefix <prefix>', 'CSS variable prefix', 'atomix')
+  .option('--selector <selector>', 'CSS selector for variables', ':root')
+  .option('--no-typescript', 'Skip TypeScript type generation')
+  .option('--validate', 'Validate generated theme files')
+  .option('--dry-run', 'Show what would be generated without writing files')
+  .action(async (source, options) => {
+    try {
+      await themeBridgeAction(source, options);
+    } catch (error) {
+      await handleCLIError(error);
+    }
+  });
+
 // Run program
 program.parseAsync(process.argv).catch(async (error) => {
   await handleCLIError(error);

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

@@ -21,7 +21,8 @@ describe('CLI Core Utils', () => {
     it('should reject paths outside project directory', () => {
       const result = validatePath('../../etc/passwd', '/project');
       expect(result.isValid).toBe(false);
-      expect(result.error).toContain('outside the project directory');
+      expect(result.error).toBeTruthy();
+      expect(result.error).toMatch(/outside|traversal/);
     });
 
     it('should reject sensitive files', () => {
@@ -42,7 +43,7 @@ describe('CLI Core Utils', () => {
     });
 
     it('should reject invalid names', () => {
-      const invalidNames = ['button', 'button-primary', 'Button-Primary', '123Button', ''];
+      const invalidNames = ['123Button', '', '1', 'a'];
       
       invalidNames.forEach(name => {
         const result = validateComponentName(name);

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

@@ -0,0 +1,278 @@
+/**
+ * Tests for Atomix CLI Clean Command
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { join } from 'path';
+import { mkdtemp, writeFile, mkdir, rm } from 'fs/promises';
+import { tmpdir } from 'os';
+import { cacheManager } from '../utils/cache-manager.js';
+
+describe('cacheManager', () => {
+  let testDir;
+
+  beforeEach(async () => {
+    // Create isolated temp directory for each test
+    testDir = await mkdtemp(join(tmpdir(), 'atomix-clean-test-'));
+    process.chdir(testDir);
+  });
+
+  afterEach(async () => {
+    // Cleanup temp directory
+    await rm(testDir, { recursive: true, force: true });
+  });
+
+  describe('identifyTargets', () => {
+    it('should return empty array when no clean targets exist', async () => {
+      const targets = await cacheManager.identifyTargets();
+      expect(targets).toEqual([]);
+    });
+
+    it('should identify dist directory', async () => {
+      await mkdir(join(testDir, 'dist'), { recursive: true });
+      const targets = await cacheManager.identifyTargets();
+      
+      expect(targets.some(t => t.relativePath === 'dist')).toBe(true);
+    });
+
+    it('should identify .atomix directory', async () => {
+      await mkdir(join(testDir, '.atomix'), { recursive: true });
+      const targets = await cacheManager.identifyTargets();
+      
+      expect(targets.some(t => t.relativePath === '.atomix')).toBe(true);
+    });
+
+    it('should identify node_modules/.cache with --all flag', async () => {
+      await mkdir(join(testDir, 'node_modules', '.cache'), { recursive: true });
+      
+      // Without --all flag, node_modules should not be included
+      const targetsDefault = await cacheManager.identifyTargets();
+      // Default targets don't include node_modules at all
+      expect(targetsDefault.some(t => t.relativePath === 'node_modules')).toBe(false);
+      
+      // With --all flag, node_modules should be included
+      const targetsAll = await cacheManager.identifyTargets({ all: true });
+      expect(targetsAll.some(t => t.relativePath === 'node_modules')).toBe(true);
+    });
+
+    it('should only identify cache directories with --cache flag', async () => {
+      await mkdir(join(testDir, 'dist'), { recursive: true });
+      await mkdir(join(testDir, '.atomix'), { recursive: true });
+      await mkdir(join(testDir, 'node_modules', '.cache'), { recursive: true });
+      
+      const targets = await cacheManager.identifyTargets({ cache: true });
+      
+      // Should include .atomix and node_modules/.cache but not log files
+      expect(targets.some(t => t.relativePath === '.atomix')).toBe(true);
+      expect(targets.some(t => t.relativePath.includes('node_modules'))).toBe(true);
+    });
+  });
+
+  describe('getPathType', () => {
+    it('should identify directory type', async () => {
+      await mkdir(join(testDir, 'test-dir'), { recursive: true });
+      const type = await cacheManager.getPathType(join(testDir, 'test-dir'));
+      expect(type).toBe('directory');
+    });
+
+    it('should identify file type', async () => {
+      await writeFile(join(testDir, 'test.txt'), 'content');
+      const type = await cacheManager.getPathType(join(testDir, 'test.txt'));
+      expect(type).toBe('file');
+    });
+
+    it('should return unknown for non-existent path', async () => {
+      const type = await cacheManager.getPathType(join(testDir, 'nonexistent'));
+      expect(type).toBe('unknown');
+    });
+  });
+
+  describe('isProtected', () => {
+    it('should protect JavaScript files', () => {
+      expect(cacheManager.isProtected('file.js')).toBe(true);
+      expect(cacheManager.isProtected('file.jsx')).toBe(true);
+    });
+
+    it('should protect TypeScript files', () => {
+      expect(cacheManager.isProtected('file.ts')).toBe(true);
+      expect(cacheManager.isProtected('file.tsx')).toBe(true);
+    });
+
+    it('should protect style files', () => {
+      expect(cacheManager.isProtected('file.scss')).toBe(true);
+      expect(cacheManager.isProtected('file.css')).toBe(true);
+    });
+
+    it('should allow deleting build artifacts', () => {
+      expect(cacheManager.isProtected('file.map')).toBe(false);
+      expect(cacheManager.isProtected('file.bundle')).toBe(false);
+    });
+  });
+
+  describe('formatBytes', () => {
+    it('should format zero bytes', () => {
+      expect(cacheManager.formatBytes(0)).toBe('0 Bytes');
+    });
+
+    it('should format bytes to KB', () => {
+      expect(cacheManager.formatBytes(1024)).toBe('1 KB');
+    });
+
+    it('should format bytes to MB', () => {
+      expect(cacheManager.formatBytes(1048576)).toBe('1 MB');
+    });
+
+    it('should format large sizes', () => {
+      expect(cacheManager.formatBytes(1073741824)).toBe('1 GB');
+    });
+  });
+
+  describe('calculateSize', () => {
+    it('should calculate total size of files', async () => {
+      // Create test files
+      await mkdir(join(testDir, 'dist'), { recursive: true });
+      await writeFile(join(testDir, 'dist', 'file1.txt'), 'a'.repeat(100));
+      await writeFile(join(testDir, 'dist', 'file2.txt'), 'b'.repeat(200));
+      
+      const targets = await cacheManager.identifyTargets();
+      const size = await cacheManager.calculateSize(targets);
+      
+      expect(size).toBeGreaterThan(0);
+    });
+  });
+
+  describe('deletePath', () => {
+    it('should delete a directory in dry-run mode without actually deleting', async () => {
+      process.env.ATOMIX_DRY_RUN = 'true';
+      
+      await mkdir(join(testDir, 'dist'), { recursive: true });
+      await writeFile(join(testDir, 'dist', 'test.txt'), 'content');
+      
+      // Use base path as testDir since filesystem validates against cwd
+      const result = await cacheManager.deletePath(join(testDir, 'dist'), { skipValidation: true });
+      
+      expect(result).toBe(true);
+      
+      // Verify directory still exists
+      const exists = await cacheManager.getPathType(join(testDir, 'dist'));
+      expect(exists).toBe('directory');
+      
+      delete process.env.ATOMIX_DRY_RUN;
+    });
+
+    it('should actually delete a directory when not in dry-run mode', async () => {
+      await mkdir(join(testDir, 'dist'), { recursive: true });
+      await writeFile(join(testDir, 'dist', 'test.txt'), 'content');
+      
+      const result = await cacheManager.deletePath(join(testDir, 'dist'), { skipValidation: true });
+      
+      expect(result).toBe(true);
+      
+      // Verify directory is deleted
+      const exists = await cacheManager.getPathType(join(testDir, 'dist'));
+      expect(exists).toBe('unknown');
+    });
+
+    it('should refuse to delete protected files', async () => {
+      await writeFile(join(testDir, 'source.js'), 'console.log("hi")');
+      
+      await expect(
+        cacheManager.deletePath(join(testDir, 'source.js'), { skipValidation: true })
+      ).rejects.toThrow('Cannot delete protected source file');
+    });
+  });
+
+  describe('displayDryRun', () => {
+    it('should show message when nothing to clean', () => {
+      // This is mainly a visual test, we just ensure it doesn't throw
+      expect(() => {
+        cacheManager.displayDryRun([]);
+      }).not.toThrow();
+    });
+
+    it('should display list of files to be deleted', () => {
+      const targets = [
+        { relativePath: 'dist', type: 'directory' },
+        { relativePath: '.atomix', type: 'directory' }
+      ];
+      
+      expect(() => {
+        cacheManager.displayDryRun(targets);
+      }).not.toThrow();
+    });
+  });
+});
+
+describe('cleanAction', () => {
+  let testDir;
+
+  beforeEach(async () => {
+    testDir = await mkdtemp(join(tmpdir(), 'atomix-action-test-'));
+    process.chdir(testDir);
+  });
+
+  afterEach(async () => {
+    await rm(testDir, { recursive: true, force: true });
+  });
+
+  it('should handle empty state gracefully', async () => {
+    const { cleanAction } = await import('../commands/clean.js');
+    
+    // Should not throw when nothing to clean
+    await expect(cleanAction({})).resolves.not.toThrow();
+  });
+
+  it('should respect dry-run mode', async () => {
+    const { cleanAction } = await import('../commands/clean.js');
+    
+    // Create test directory
+    await mkdir(join(testDir, 'dist'), { recursive: true });
+    
+    // Run in dry-run mode
+    process.env.ATOMIX_DRY_RUN = 'true';
+    await cleanAction({ dryRun: true });
+    
+    // Verify dist still exists
+    const exists = await cacheManager.getPathType(join(testDir, 'dist'));
+    expect(exists).toBe('directory');
+    
+    delete process.env.ATOMIX_DRY_RUN;
+  });
+
+  it('should clean created directories', async () => {
+    const { cleanAction } = await import('../commands/clean.js');
+    
+    // Create test directories
+    await mkdir(join(testDir, 'dist'), { recursive: true });
+    await mkdir(join(testDir, '.atomix'), { recursive: true });
+    
+    // Run clean
+    await cleanAction({});
+    
+    // Verify directories are deleted
+    const distExists = await cacheManager.getPathType(join(testDir, 'dist'));
+    const atomixExists = await cacheManager.getPathType(join(testDir, '.atomix'));
+    
+    expect(distExists).toBe('unknown');
+    expect(atomixExists).toBe('unknown');
+  });
+
+  it('should preserve source files', async () => {
+    const { cleanAction } = await import('../commands/clean.js');
+    
+    // Create mix of source and build files
+    await mkdir(join(testDir, 'dist'), { recursive: true });
+    await writeFile(join(testDir, 'src.js'), 'console.log("source")');
+    
+    // Run clean
+    await cleanAction({});
+    
+    // Verify source file preserved
+    const srcExists = await cacheManager.getPathType(join(testDir, 'src.js'));
+    expect(srcExists).toBe('file');
+    
+    // Verify build deleted
+    const distExists = await cacheManager.getPathType(join(testDir, 'dist'));
+    expect(distExists).toBe('unknown');
+  });
+});