@shohojdhara/atomix 0.3.3 → 0.3.5

package/scripts/cli/__tests__/cli-commands.test.js

@@ -0,0 +1,204 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, rmSync, readFileSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const CLI_PATH = join(__dirname, '../../atomix-cli.js');
+const TEST_DIR = join(__dirname, 'test-output');
+
+describe('Atomix CLI Commands', () => {
+  beforeEach(() => {
+    // Create test directory
+    if (!existsSync(TEST_DIR)) {
+      mkdirSync(TEST_DIR, { recursive: true });
+    }
+  });
+
+  afterEach(() => {
+    // Clean up test directory
+    if (existsSync(TEST_DIR)) {
+      rmSync(TEST_DIR, { recursive: true, force: true });
+    }
+  });
+
+  describe('atomix --help', () => {
+    it('should display help information', () => {
+      const output = execSync(`node ${CLI_PATH} --help`).toString();
+      expect(output).toContain('Atomix Design System CLI');
+      expect(output).toContain('Commands:');
+      expect(output).toContain('build-theme');
+      expect(output).toContain('generate');
+      expect(output).toContain('validate');
+    });
+  });
+
+  describe('atomix --version', () => {
+    it('should display version number', () => {
+      const output = execSync(`node ${CLI_PATH} --version`).toString();
+      expect(output).toMatch(/\d+\.\d+\.\d+/);
+    });
+  });
+
+  describe('atomix generate component', () => {
+    const componentPath = join(TEST_DIR, 'TestComponent');
+
+    it('should create component files with valid name', () => {
+      execSync(`node ${CLI_PATH} generate component TestButton --path ${TEST_DIR}`, {
+        cwd: process.cwd()
+      });
+
+      const buttonPath = join(TEST_DIR, 'TestButton');
+      
+      // Check if files are created
+      expect(existsSync(join(buttonPath, 'TestButton.tsx'))).toBe(true);
+      expect(existsSync(join(buttonPath, 'index.ts'))).toBe(true);
+      expect(existsSync(join(buttonPath, '_testbutton.scss'))).toBe(true);
+      expect(existsSync(join(buttonPath, 'TestButton.stories.tsx'))).toBe(true);
+      
+      // Check component content
+      const componentContent = readFileSync(join(buttonPath, 'TestButton.tsx'), 'utf8');
+      expect(componentContent).toContain('export const TestButton');
+      expect(componentContent).toContain('TestButtonProps');
+      expect(componentContent).toContain('forwardRef');
+    });
+
+    it('should reject invalid component names', () => {
+      expect(() => {
+        execSync(`node ${CLI_PATH} generate component test-button --path ${TEST_DIR}`, {
+          cwd: process.cwd()
+        });
+      }).toThrow();
+    });
+
+    it('should create test file when --test flag is used', () => {
+      execSync(`node ${CLI_PATH} generate component TestCard --test --path ${TEST_DIR}`, {
+        cwd: process.cwd()
+      });
+
+      const cardPath = join(TEST_DIR, 'TestCard');
+      expect(existsSync(join(cardPath, 'TestCard.test.tsx'))).toBe(true);
+      
+      const testContent = readFileSync(join(cardPath, 'TestCard.test.tsx'), 'utf8');
+      expect(testContent).toContain('describe(\'TestCard\'');
+      expect(testContent).toContain('vitest');
+    });
+  });
+
+  describe('atomix generate token', () => {
+    it('should generate color tokens', () => {
+      const settingsPath = join(TEST_DIR, 'src/styles/01-settings');
+      mkdirSync(settingsPath, { recursive: true });
+      
+      execSync(`node ${CLI_PATH} generate token colors`, {
+        cwd: TEST_DIR
+      });
+
+      const tokenFile = join(settingsPath, '_settings.colors.custom.scss');
+      expect(existsSync(tokenFile)).toBe(true);
+      
+      const content = readFileSync(tokenFile, 'utf8');
+      expect(content).toContain('Custom Color Tokens');
+      expect(content).toContain('$custom-primary-6');
+      expect(content).toContain('$custom-success');
+    });
+
+    it('should reject invalid token categories', () => {
+      expect(() => {
+        execSync(`node ${CLI_PATH} generate token invalid-category`, {
+          cwd: TEST_DIR
+        });
+      }).toThrow();
+    });
+  });
+
+  describe('atomix validate', () => {
+    it('should validate tokens when --tokens flag is used', () => {
+      // This is a mock test - in real implementation, you'd set up token files
+      const output = execSync(`node ${CLI_PATH} validate --tokens`, {
+        cwd: process.cwd()
+      }).toString();
+      
+      // Should complete without throwing
+      expect(output).toBeDefined();
+    });
+  });
+
+  describe('atomix doctor', () => {
+    it('should run diagnostics successfully', () => {
+      const output = execSync(`node ${CLI_PATH} doctor`).toString();
+      expect(output).toContain('Atomix Doctor Report');
+      expect(output).toContain('Node.js Version');
+      expect(output).toContain('Atomix Installation');
+    });
+  });
+
+  describe('atomix theme create', () => {
+    it('should create CSS theme with valid name', () => {
+      const themesPath = join(TEST_DIR, 'themes');
+      mkdirSync(themesPath, { recursive: true });
+      
+      execSync(`node ${CLI_PATH} theme create test-theme --output ${themesPath}`, {
+        cwd: process.cwd()
+      });
+
+      const themePath = join(themesPath, 'test-theme');
+      expect(existsSync(join(themePath, 'index.scss'))).toBe(true);
+      expect(existsSync(join(themePath, 'README.md'))).toBe(true);
+      
+      const themeContent = readFileSync(join(themePath, 'index.scss'), 'utf8');
+      expect(themeContent).toContain('data-theme="test-theme"');
+      expect(themeContent).toContain('--atomix-color-primary');
+    });
+
+    it('should create JavaScript theme when --type js is used', () => {
+      const themesPath = join(TEST_DIR, 'themes');
+      mkdirSync(themesPath, { recursive: true });
+      
+      execSync(`node ${CLI_PATH} theme create js-theme --type js --output ${themesPath}`, {
+        cwd: process.cwd()
+      });
+
+      const themePath = join(themesPath, 'js-theme');
+      expect(existsSync(join(themePath, 'index.ts'))).toBe(true);
+      
+      const themeContent = readFileSync(join(themePath, 'index.ts'), 'utf8');
+      expect(themeContent).toContain('jsTheme');
+      expect(themeContent).toContain('createTheme');
+    });
+
+    it('should reject invalid theme names', () => {
+      expect(() => {
+        execSync(`node ${CLI_PATH} theme create InvalidTheme --output ${TEST_DIR}`, {
+          cwd: process.cwd()
+        });
+      }).toThrow();
+    });
+  });
+});
+
+describe('CLI Error Handling', () => {
+  it('should show suggestions for invalid commands', () => {
+    try {
+      execSync(`node ${CLI_PATH} invalidcommand`);
+    } catch (error) {
+      const output = error.stdout?.toString() || error.stderr?.toString();
+      expect(output).toContain('unknown command');
+    }
+  });
+
+  it('should handle missing required arguments', () => {
+    expect(() => {
+      execSync(`node ${CLI_PATH} generate`);
+    }).toThrow();
+  });
+
+  it('should respect --debug flag', () => {
+    const output = execSync(`node ${CLI_PATH} --debug --help`).toString();
+    // Debug mode should be enabled
+    expect(process.env.ATOMIX_DEBUG).toBe('true');
+  });
+});

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

@@ -0,0 +1,201 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import {
+  validatePath,
+  validateComponentName,
+  validateThemeName,
+  sanitizeInput,
+  isValidColor,
+  checkNodeVersion,
+  formatFileSize
+} from '../utils.js';
+import { join, resolve } from 'path';
+
+describe('CLI Utils', () => {
+  describe('validatePath', () => {
+    const basePath = '/home/user/project';
+
+    it('should validate safe paths within project', () => {
+      const result = validatePath('src/components', basePath);
+      expect(result.isValid).toBe(true);
+      expect(result.safePath).toBe(resolve(basePath, 'src/components'));
+    });
+
+    it('should reject paths outside project directory', () => {
+      const result = validatePath('../../etc/passwd', basePath);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('outside the project directory');
+    });
+
+    it('should reject paths to sensitive files', () => {
+      const sensitiveFiles = ['.env', '.git/config', 'private/key.pem', 'secret.key'];
+      
+      sensitiveFiles.forEach(file => {
+        const result = validatePath(file, basePath);
+        expect(result.isValid).toBe(false);
+        expect(result.error).toContain('sensitive path');
+      });
+    });
+
+    it('should handle absolute paths correctly', () => {
+      const absolutePath = join(basePath, 'src/components');
+      const result = validatePath(absolutePath, basePath);
+      expect(result.isValid).toBe(true);
+      expect(result.safePath).toBe(absolutePath);
+    });
+  });
+
+  describe('validateComponentName', () => {
+    it('should accept valid PascalCase names', () => {
+      const validNames = ['Button', 'CardHeader', 'MyComponent123'];
+      
+      validNames.forEach(name => {
+        const result = validateComponentName(name);
+        expect(result.isValid).toBe(true);
+      });
+    });
+
+    it('should reject invalid component names', () => {
+      const invalidNames = [
+        'button', // lowercase
+        'Button-Test', // contains hyphen
+        'Button_Test', // contains underscore
+        '123Button', // starts with number
+        'A', // too short
+        '', // empty
+      ];
+      
+      invalidNames.forEach(name => {
+        const result = validateComponentName(name);
+        expect(result.isValid).toBe(false);
+      });
+    });
+
+    it('should reject reserved words', () => {
+      const reserved = ['Component', 'React', 'Fragment'];
+      
+      reserved.forEach(name => {
+        const result = validateComponentName(name);
+        expect(result.isValid).toBe(false);
+        expect(result.error).toContain('reserved word');
+      });
+    });
+  });
+
+  describe('validateThemeName', () => {
+    it('should accept valid kebab-case names', () => {
+      const validNames = ['dark-theme', 'light-mode', 'custom-theme-2'];
+      
+      validNames.forEach(name => {
+        const result = validateThemeName(name);
+        expect(result.isValid).toBe(true);
+      });
+    });
+
+    it('should reject invalid theme names', () => {
+      const invalidNames = [
+        'DarkTheme', // PascalCase
+        'dark_theme', // underscore
+        '123-theme', // starts with number
+        'theme-', // ends with hyphen
+        'theme--dark', // consecutive hyphens
+        '', // empty
+      ];
+      
+      invalidNames.forEach(name => {
+        const result = validateThemeName(name);
+        expect(result.isValid).toBe(false);
+      });
+    });
+  });
+
+  describe('sanitizeInput', () => {
+    it('should remove dangerous shell characters', () => {
+      const dangerous = 'test; rm -rf /';
+      const sanitized = sanitizeInput(dangerous);
+      expect(sanitized).toBe('test rm -rf /');
+      expect(sanitized).not.toContain(';');
+    });
+
+    it('should remove multiple dangerous characters', () => {
+      const input = 'cmd1 && cmd2 | cmd3 `evil` $var > file < input \\ ';
+      const sanitized = sanitizeInput(input);
+      expect(sanitized).toBe('cmd1  cmd2  cmd3 evil var  file  input');
+    });
+
+    it('should handle non-string inputs', () => {
+      expect(sanitizeInput(123)).toBe('123');
+      expect(sanitizeInput(null)).toBe('null');
+      expect(sanitizeInput(undefined)).toBe('undefined');
+    });
+  });
+
+  describe('isValidColor', () => {
+    it('should validate hex colors', () => {
+      const validHex = ['#FFF', '#FFFF', '#FFFFFF', '#FFFFFFFF', '#abc123'];
+      
+      validHex.forEach(color => {
+        expect(isValidColor(color)).toBe(true);
+      });
+    });
+
+    it('should validate CSS color functions', () => {
+      const validFunctions = [
+        'rgb(255, 255, 255)',
+        'rgba(0, 0, 0, 0.5)',
+        'hsl(120, 100%, 50%)',
+        'hsla(240, 100%, 50%, 0.3)',
+        'var(--atomix-color-primary)',
+      ];
+      
+      validFunctions.forEach(color => {
+        expect(isValidColor(color)).toBe(true);
+      });
+    });
+
+    it('should reject invalid colors', () => {
+      const invalid = ['#GGG', '#12', 'red', '255,255,255', 'notacolor'];
+      
+      invalid.forEach(color => {
+        expect(isValidColor(color)).toBe(false);
+      });
+    });
+  });
+
+  describe('checkNodeVersion', () => {
+    it('should check Node version compatibility', () => {
+      const currentVersion = process.version.substring(1);
+      const [major, minor, patch] = currentVersion.split('.').map(Number);
+      
+      // Should pass for current version
+      const result1 = checkNodeVersion(currentVersion);
+      expect(result1.compatible).toBe(true);
+      
+      // Should fail for higher version
+      const higherVersion = `${major + 1}.0.0`;
+      const result2 = checkNodeVersion(higherVersion);
+      expect(result2.compatible).toBe(false);
+      
+      // Should pass for lower version
+      if (major > 0) {
+        const lowerVersion = `${major - 1}.0.0`;
+        const result3 = checkNodeVersion(lowerVersion);
+        expect(result3.compatible).toBe(true);
+      }
+    });
+  });
+
+  describe('formatFileSize', () => {
+    it('should format file sizes correctly', () => {
+      expect(formatFileSize(0)).toBe('0 B');
+      expect(formatFileSize(512)).toBe('512.00 B');
+      expect(formatFileSize(1024)).toBe('1.00 KB');
+      expect(formatFileSize(1048576)).toBe('1.00 MB');
+      expect(formatFileSize(1073741824)).toBe('1.00 GB');
+    });
+
+    it('should handle decimal values', () => {
+      expect(formatFileSize(1536)).toBe('1.50 KB'); // 1.5 KB
+      expect(formatFileSize(2621440)).toBe('2.50 MB'); // 2.5 MB
+    });
+  });
+});

package/scripts/cli/__tests__/vitest.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/**',
+        '**/__tests__/**',
+        '**/test-output/**',
+      ],
+      include: [
+        '../*.js',
+      ],
+      thresholds: {
+        lines: 80,
+        functions: 80,
+        branches: 80,
+        statements: 80,
+      },
+    },
+  },
+});

package/scripts/cli/interactive-init.js

@@ -4,7 +4,7 @@
 
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import { writeFile, mkdir } from 'fs/promises';
+import { readFile, writeFile, mkdir } from 'fs/promises';
 import { join } from 'path';
 import { existsSync } from 'fs';
 import boxen from 'boxen';
@@ -73,7 +73,7 @@ body {
 }`
     }
   },
-  
+
   nextjs: {
     dependencies: [
       '@shohojdhara/atomix',
@@ -125,7 +125,7 @@ body {
 }`
     }
   },
-  
+
   vanilla: {
     dependencies: [
       '@shohojdhara/atomix'
@@ -203,7 +203,7 @@ const configTemplates = {
       }
     }
   },
-  
+
   advanced: {
     'atomix.config.js': `module.exports = {
   // Theme configuration
@@ -260,7 +260,7 @@ export async function runInitWizard() {
       borderColor: 'cyan'
     }
   ));
-  
+
   try {
     // Step 1: Project type
     const { projectType } = await inquirer.prompt([
@@ -276,7 +276,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 2: Theme selection
     const { themeChoice } = await inquirer.prompt([
       {
@@ -291,27 +291,19 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     let selectedTheme = null;
     if (themeChoice === 'prebuilt') {
       const { theme } = await inquirer.prompt([
         {
-          type: 'list',
+          type: 'input',
           name: 'theme',
-          message: 'Select a pre-built theme:',
-          choices: [
-            { name: 'Shaj Default - Clean & Modern', value: 'shaj-default' },
-            { name: 'FlashTrade - Crypto Trading', value: 'flashtrade' },
-            { name: 'BoomDevs - Dark Mode', value: 'boomdevs' },
-            { name: 'Esrar - Minimal Light', value: 'esrar' },
-            { name: 'Mashroom - Colorful & Playful', value: 'mashroom' },
-            { name: 'AppleMix - Glass Morphism', value: 'applemix' }
-          ]
+          message: 'Enter the name of the pre-built theme:',
         }
       ]);
       selectedTheme = theme;
     }
-    
+
     // Step 3: Features
     const { features } = await inquirer.prompt([
       {
@@ -328,7 +320,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 4: Configuration
     const { configType } = await inquirer.prompt([
       {
@@ -342,7 +334,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 5: Installation
     const { shouldInstall } = await inquirer.prompt([
       {
@@ -352,14 +344,14 @@ export async function runInitWizard() {
         default: true
       }
     ]);
-    
+
     // Generate files
     console.log(chalk.cyan('\n📦 Generating project files...\n'));
-    
+
     // Create project structure
     if (projectType !== 'custom') {
       const template = projectTemplates[projectType];
-      
+
       // Create directories
       await mkdir('src', { recursive: true });
       if (projectType === 'nextjs') {
@@ -370,32 +362,32 @@ export async function runInitWizard() {
       } else if (projectType === 'vanilla') {
         await mkdir('src/styles', { recursive: true });
       }
-      
+
       // Write template files
       for (const [path, content] of Object.entries(template.files)) {
         const filePath = join(process.cwd(), path);
         const dir = join(process.cwd(), path.substring(0, path.lastIndexOf('/')));
-        
+
         if (!existsSync(dir)) {
           await mkdir(dir, { recursive: true });
         }
-        
+
         await writeFile(filePath, content, 'utf8');
         console.log(chalk.green(`  ✓ Created ${path}`));
       }
     }
-    
+
     // Create configuration file
     if (configType !== 'none') {
-      const configTemplate = configType === 'json' 
-        ? configTemplates.basic 
+      const configTemplate = configType === 'json'
+        ? configTemplates.basic
         : configTemplates.advanced;
-      
+
       for (const [filename, content] of Object.entries(configTemplate)) {
-        const configContent = typeof content === 'object' 
+        const configContent = typeof content === 'object'
           ? JSON.stringify(content, null, 2)
           : content;
-        
+
         await writeFile(
           join(process.cwd(), filename),
           configContent,
@@ -404,11 +396,11 @@ export async function runInitWizard() {
         console.log(chalk.green(`  ✓ Created ${filename}`));
       }
     }
-    
+
     // Create custom theme if selected
     if (themeChoice === 'custom') {
       await mkdir('themes/custom', { recursive: true });
-      
+
       const themeContent = `// Custom Theme
 // Generated by Atomix CLI
 
@@ -427,7 +419,7 @@ export async function runInitWizard() {
 .custom-component {
   // Custom component styles
 }`;
-      
+
       await writeFile(
         join(process.cwd(), 'themes/custom/index.scss'),
         themeContent,
@@ -435,7 +427,7 @@ export async function runInitWizard() {
       );
       console.log(chalk.green('  ✓ Created custom theme'));
     }
-    
+
     // Generate package.json scripts
     const scripts = {
       'dev': projectType === 'nextjs' ? 'next dev' : 'vite',
@@ -444,24 +436,24 @@ export async function runInitWizard() {
       'generate:component': 'atomix generate component',
       'validate': 'atomix validate --tokens --theme'
     };
-    
+
     if (features.includes('storybook')) {
       scripts['storybook'] = 'storybook dev -p 6006';
       scripts['build:storybook'] = 'storybook build';
     }
-    
+
     if (features.includes('testing')) {
       scripts['test'] = 'vitest';
       scripts['test:watch'] = 'vitest --watch';
       scripts['test:coverage'] = 'vitest --coverage';
     }
-    
+
     if (features.includes('linting')) {
       scripts['lint'] = 'eslint . --ext .ts,.tsx,.js,.jsx';
       scripts['lint:fix'] = 'eslint . --ext .ts,.tsx,.js,.jsx --fix';
       scripts['format'] = 'prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,scss}"';
     }
-    
+
     // Update package.json if it exists
     const packageJsonPath = join(process.cwd(), 'package.json');
     if (existsSync(packageJsonPath)) {
@@ -473,7 +465,7 @@ export async function runInitWizard() {
           default: true
         }
       ]);
-      
+
       if (addScripts) {
         const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
         packageJson.scripts = { ...packageJson.scripts, ...scripts };
@@ -481,7 +473,7 @@ export async function runInitWizard() {
         console.log(chalk.green('  ✓ Updated package.json scripts'));
       }
     }
-    
+
     // Success message
     console.log(boxen(
       chalk.bold.green('✨ Setup Complete!\n\n') +
@@ -499,12 +491,12 @@ export async function runInitWizard() {
         borderColor: 'green'
       }
     ));
-    
+
     // Install dependencies if requested
     if (shouldInstall) {
       console.log(chalk.cyan('\n📥 Installing dependencies...\n'));
       const { execSync } = await import('child_process');
-      
+
       try {
         execSync('npm install', { stdio: 'inherit' });
         console.log(chalk.green('\n✅ Dependencies installed successfully!'));
@@ -513,7 +505,7 @@ export async function runInitWizard() {
         console.log(chalk.yellow('Please run: npm install'));
       }
     }
-    
+
   } catch (error) {
     if (error.isTTYError) {
       console.error(chalk.red('This environment doesn\'t support interactive prompts'));