@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -0,0 +1,327 @@
+/**
+ * CLI Integration Tests
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mkdtemp, rm, writeFile, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join, resolve } from 'path';
+import { tmpdir } from 'os';
+import { execSync } from 'child_process';
+
+// Mock console to avoid noise in tests
+const originalConsole = global.console;
+
+describe('CLI Integration Tests', () => {
+  let tempDir;
+
+  beforeEach(async () => {
+    tempDir = await mkdtemp(join(tmpdir(), 'atomix-cli-test-'));
+    
+    // Create project structure
+    await mkdir(join(tempDir, 'src/styles/01-settings'), { recursive: true });
+    await mkdir(join(tempDir, 'src/lib/composables'), { recursive: true });
+    await mkdir(join(tempDir, 'src/lib/types'), { recursive: true });
+    
+    // Mock console methods
+    global.console = {
+      ...originalConsole,
+      log: vi.fn(),
+      error: vi.fn(),
+      warn: vi.fn()
+    };
+  });
+
+  afterEach(async () => {
+    await rm(tempDir, { recursive: true, force: true });
+    global.console = originalConsole;
+    vi.clearAllMocks();
+  });
+
+  describe('atomix generate component', () => {
+    it('should generate a basic component', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      execSync(`node ${cliPath} generate component TestButton`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const componentDir = join(tempDir, 'src', 'components', 'TestButton');
+      expect(existsSync(join(componentDir, 'TestButton.tsx'))).toBe(true);
+      expect(existsSync(join(componentDir, 'index.ts'))).toBe(true);
+    });
+
+    it('should generate component with stories', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      execSync(`node ${cliPath} generate component StoryCard --story`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const storyFile = join(tempDir, 'src', 'components', 'StoryCard', 'StoryCard.stories.tsx');
+      expect(existsSync(storyFile)).toBe(true);
+    });
+
+    it('should generate component with test file', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      execSync(`node ${cliPath} generate component TestComponent --test`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const testFile = join(tempDir, 'src', 'components', 'TestComponent', 'TestComponent.test.tsx');
+      expect(existsSync(testFile)).toBe(true);
+    });
+
+    it('should reject invalid component names', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      expect(() => {
+        execSync(`node ${cliPath} generate component invalid-name`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          stdio: 'pipe'
+        });
+      }).toThrow();
+    });
+
+    it('should handle existing component without force flag', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      // Generate component first time
+      execSync(`node ${cliPath} generate component DuplicateButton`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      // Try to generate again without force
+      expect(() => {
+        execSync(`node ${cliPath} generate component DuplicateButton`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          stdio: 'pipe'
+        });
+      }).toThrow();
+    });
+
+    it('should overwrite existing component with force flag', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      // Generate component first time
+      execSync(`node ${cliPath} generate component ForceButton`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      // Generate again with force
+      execSync(`node ${cliPath} generate component ForceButton --force`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const componentFile = join(tempDir, 'src', 'components', 'ForceButton', 'ForceButton.tsx');
+      expect(existsSync(componentFile)).toBe(true);
+    });
+  });
+
+  describe('atomix generate token', () => {
+    it('should generate color tokens', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      execSync(`node ${cliPath} generate token colors`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const tokenFile = join(tempDir, 'src', 'styles', '01-settings', '_settings.colors.custom.scss');
+      expect(existsSync(tokenFile)).toBe(true);
+    });
+
+    it('should generate spacing tokens', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      execSync(`node ${cliPath} generate token spacing`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        stdio: 'pipe'
+      });
+
+      const tokenFile = join(tempDir, 'src', 'styles', '01-settings', '_settings.spacing.custom.scss');
+      expect(existsSync(tokenFile)).toBe(true);
+    });
+
+    it('should generate all token categories', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      const categories = ['colors', 'spacing', 'typography', 'shadows', 'radius', 'animations'];
+      
+      categories.forEach(category => {
+        execSync(`node ${cliPath} generate token ${category}`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          stdio: 'pipe'
+        });
+      });
+
+      categories.forEach(category => {
+        let filename;
+        switch (category) {
+          case 'colors':
+            filename = '_settings.colors.custom.scss';
+            break;
+          case 'spacing':
+            filename = '_settings.spacing.custom.scss';
+            break;
+          case 'typography':
+            filename = '_settings.typography.custom.scss';
+            break;
+          case 'shadows':
+            filename = '_settings.box-shadow.custom.scss';
+            break;
+          case 'radius':
+            filename = '_settings.border-radius.custom.scss';
+            break;
+          case 'animations':
+            filename = '_settings.animations.custom.scss';
+            break;
+        }
+        
+        const tokenFile = join(tempDir, 'src', 'styles', '01-settings', filename);
+        expect(existsSync(tokenFile)).toBe(true);
+      });
+    });
+
+    it('should reject invalid token categories', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      expect(() => {
+        execSync(`node ${cliPath} generate token invalid-category`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          stdio: 'pipe'
+        });
+      }).toThrow();
+    });
+  });
+
+  describe('atomix validate', () => {
+    beforeEach(async () => {
+      // Create some token files for validation
+      const stylesDir = join(tempDir, 'src', 'styles', '01-settings');
+      await mkdir(stylesDir, { recursive: true });
+      
+      await writeFile(join(stylesDir, '_settings.colors.scss'), `
+$primary: blue !default;
+$secondary: red !default;
+--atomix-color-primary: blue;
+--atomix-color-secondary: red;
+`);
+      
+      await writeFile(join(stylesDir, '_settings.typography.scss'), '$font-base: sans-serif !default;');
+      await writeFile(join(stylesDir, '_settings.spacing.scss'), '$spacing-unit: 8px !default;');
+      await writeFile(join(stylesDir, '_settings.radius.scss'), '$radius-base: 4px !default;');
+    });
+
+    it('should validate tokens', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      const result = execSync(`node ${cliPath} validate --tokens`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        encoding: 'utf8',
+        stdio: 'pipe'
+      });
+
+      expect(result).toContain('All validations passed');
+    });
+
+    it('should detect validation issues', async () => {
+      // Create problematic token file
+      const stylesDir = join(tempDir, 'src', 'styles', '01-settings');
+      await writeFile(join(stylesDir, '_settings.colors.scss'), `
+$primary: #ffffff; // Hardcoded color and missing !default
+background: #ff0000; // Another hardcoded color
+      `);
+
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      try {
+        const result = execSync(`node ${cliPath} validate --tokens`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          encoding: 'utf8',
+          stdio: 'pipe'
+        });
+        expect(result).toContain('issues found');
+      } catch (error) {
+        const output = error.stdout ? error.stdout.toString() : error.message;
+        expect(output).toContain('issues found');
+      }
+    });
+  });
+
+  describe('atomix doctor', () => {
+    it('should run system diagnostics', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      const result = execSync(`node ${cliPath} doctor`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        encoding: 'utf8',
+        stdio: 'pipe'
+      });
+
+      expect(result).toContain('Atomix Doctor');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing command gracefully', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      expect(() => {
+        execSync(`node ${cliPath} non-existent-command`, {
+          cwd: tempDir,
+          env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+          stdio: 'pipe'
+        });
+      }).toThrow();
+    });
+
+    it('should show help for --help flag', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      const result = execSync(`node ${cliPath} --help`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        encoding: 'utf8',
+        stdio: 'pipe'
+      });
+
+      expect(result).toContain('Atomix Design System CLI');
+      expect(result).toContain('Commands:');
+    });
+
+    it('should show version for --version flag', () => {
+      const cliPath = resolve(__dirname, '../../atomix-cli.js');
+      
+      const result = execSync(`node ${cliPath} --version`, {
+        cwd: tempDir,
+        env: { ...process.env, ATOMIX_SKIP_DEP_CHECK: 'true' },
+        encoding: 'utf8',
+        stdio: 'pipe'
+      });
+
+      expect(result).toMatch(/\d+\.\d+\.\d+/);
+    });
+  });
+});

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

@@ -0,0 +1,133 @@
+/**
+ * Test Setup for CLI Tests
+ */
+
+import { vi } from 'vitest';
+
+// Mock external dependencies
+vi.mock('ora', () => ({
+  default: vi.fn(() => ({
+    start: vi.fn(() => ({
+      succeed: vi.fn(),
+      fail: vi.fn(),
+      stop: vi.fn(),
+      text: ''
+    }))
+  }))
+}));
+
+vi.mock('inquirer', () => ({
+  prompt: vi.fn()
+}));
+
+vi.mock('chalk', () => ({
+  default: {
+    green: vi.fn((text) => text),
+    red: vi.fn((text) => text),
+    yellow: vi.fn((text) => text),
+    cyan: vi.fn((text) => text),
+    gray: vi.fn((text) => text),
+    bold: {
+      green: vi.fn((text) => text),
+      red: vi.fn((text) => text),
+      yellow: vi.fn((text) => text),
+      cyan: vi.fn((text) => text)
+    }
+  }
+}));
+
+vi.mock('boxen', () => ({
+  default: vi.fn((text) => text)
+}));
+
+vi.mock('chokidar', () => ({
+  default: vi.fn(() => ({
+    on: vi.fn(),
+    close: vi.fn()
+  }))
+}));
+
+// Mock file system operations
+vi.mock('fs/promises', async () => {
+  const actual = await vi.importActual('fs/promises');
+  return {
+    ...actual,
+    writeFile: vi.fn(actual.writeFile),
+    readFile: vi.fn(actual.readFile),
+    mkdir: vi.fn(actual.mkdir),
+    access: vi.fn(actual.access),
+    stat: vi.fn(actual.stat),
+    rm: vi.fn(actual.rm)
+  };
+});
+
+// Mock process.cwd for consistent test environment
+const originalCwd = process.cwd;
+
+beforeEach(() => {
+  // Reset all mocks before each test
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  // Restore original process.cwd
+  process.cwd = originalCwd;
+});
+
+// Global test utilities
+global.createMockTempDir = () => '/tmp/atomix-test-' + Math.random().toString(36).substr(2, 9);
+
+global.mockComponentStructure = (componentName, content = '') => ({
+  [`${componentName}.tsx`]: content || `
+import React, { forwardRef } from 'react';
+
+export const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={className} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+interface ${componentName}Props {
+  children?: React.ReactNode;
+  className?: string;
+}
+  `,
+  'index.ts': `export { ${componentName} } from './${componentName}';`,
+  [`${componentName}.stories.tsx`]: `
+import type { Meta, StoryObj } from '@storybook/react';
+import { ${componentName} } from './${componentName}';
+
+const meta: Meta<typeof ${componentName}> = {
+  title: 'Components/${componentName}',
+  component: ${componentName},
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Test ${componentName}',
+  },
+};
+  `,
+  [`${componentName}.test.tsx`]: `
+import { render, screen } from '@testing-library/react';
+import { ${componentName} } from './${componentName}';
+
+describe('${componentName}', () => {
+  it('renders correctly', () => {
+    render(<${componentName}>Test</${componentName}>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+});
+  `
+});

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

@@ -0,0 +1,251 @@
+/**
+ * Token Manager Tests
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { 
+  listTokens,
+  validateTokens,
+  exportTokens,
+  importTokens,
+  fixTokens,
+  setProjectRoot
+} from '../token-manager.js';
+import { mkdtemp, rm, writeFile, readFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { tmpdir } from 'os';
+
+// Mock dependencies
+vi.mock('ora', () => ({
+  default: vi.fn(() => ({
+    start: vi.fn(() => ({
+      succeed: vi.fn(),
+      fail: vi.fn(),
+      text: ''
+    }))
+  }))
+}));
+
+vi.mock('chalk', () => ({
+  default: {
+    green: vi.fn((text) => text),
+    red: vi.fn((text) => text),
+    yellow: vi.fn((text) => text),
+    cyan: vi.fn((text) => text),
+    gray: vi.fn((text) => text),
+    bold: vi.fn((obj) => obj)
+  }
+}));
+
+describe('Token Manager', () => {
+  let tempDir;
+  let tokenDir;
+
+  beforeEach(async () => {
+    const tmp = await mkdtemp(join(tmpdir(), 'atomix-test-'));
+    // Ensure absolute path
+    // On some systems/configs tmpdir might return symlinked path or weirdness
+    const { resolve } = await import('path');
+    tempDir = resolve(tmp);
+    
+    tokenDir = join(tempDir, 'src', 'styles', '01-settings');
+    await mkdir(tokenDir, { recursive: true });
+    setProjectRoot(tempDir);
+  });
+
+  afterEach(async () => {
+    setProjectRoot('');
+    await rm(tempDir, { recursive: true, force: true });
+    vi.clearAllMocks();
+  });
+
+  describe('listTokens', () => {
+    it('should list tokens from valid files', async () => {
+      // Create test token files
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary-500: #7AFFD7 !default;
+$secondary-500: #FF5733 !default;
+--atomix-color-primary: #7AFFD7;
+--atomix-color-secondary: #FF5733;
+      `);
+
+      const result = await listTokens();
+      
+      expect(result.tokens).toHaveProperty('colors');
+      // Check keys inside the category object
+      const colorTokens = result.tokens.colors.tokens;
+      expect(colorTokens).toHaveProperty('$primary-500');
+      expect(colorTokens).toHaveProperty('--atomix-color-primary');
+    });
+
+    it('should handle missing files gracefully', async () => {
+      const result = await listTokens();
+      expect(result.tokens).toEqual({});
+      expect(result.categoryCount).toBe(0);
+    });
+  });
+
+  describe('validateTokens', () => {
+    it('should detect hardcoded colors', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary: #ffffff !default;
+$secondary: #000000 !default;
+background: #ff0000; // Hardcoded color
+      `);
+
+      const result = await validateTokens();
+      
+      expect(result.warnings).toContainEqual(
+        expect.objectContaining({
+          category: 'hardcoded-value',
+          file: expect.stringContaining('_settings.colors.scss')
+        })
+      );
+    });
+
+    it('should detect missing !default flags', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary: #7AFFD7; // Missing !default
+$secondary: #FF5733 !default;
+      `);
+
+      const result = await validateTokens();
+      
+      expect(result.issues).toContainEqual(
+        expect.objectContaining({
+          category: 'missing-default',
+          file: expect.stringContaining('_settings.colors.scss')
+        })
+      );
+    });
+
+    it('should validate naming conventions', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$Invalid-Name: #7AFFD7 !default;
+$valid_name: #FF5733 !default;
+      `);
+
+      const result = await validateTokens();
+      
+      expect(result.issues).toContainEqual(
+        expect.objectContaining({
+          category: 'naming-convention',
+          file: expect.stringContaining('_settings.colors.scss')
+        })
+      );
+    });
+  });
+
+  describe('exportTokens', () => {
+    it('should export tokens as JSON', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary-500: #7AFFD7 !default;
+--atomix-color-primary: #7AFFD7;
+      `);
+
+      const outputPath = join(tempDir, 'tokens.json');
+      await exportTokens('json', outputPath);
+
+      const exported = JSON.parse(await readFile(outputPath, 'utf8'));
+      expect(exported).toHaveProperty('colors');
+      expect(exported.colors).toHaveProperty('$primary-500');
+    });
+
+    it('should export tokens as CSS custom properties', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary-500: #7AFFD7 !default;
+--atomix-color-primary: #7AFFD7;
+      `);
+
+      const outputPath = join(tempDir, 'tokens.css');
+      await exportTokens('css', outputPath);
+
+      const css = await readFile(outputPath, 'utf8');
+      expect(css).toContain('--atomix-color-primary: #7AFFD7');
+    });
+
+    it('should export tokens as TypeScript', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary-500: #7AFFD7 !default;
+--atomix-color-primary: #7AFFD7;
+      `);
+
+      const outputPath = join(tempDir, 'tokens.ts');
+      await exportTokens('ts', outputPath);
+
+      const ts = await readFile(outputPath, 'utf8');
+      expect(ts).toContain('export interface');
+      expect(ts).toContain('AtomixTokens');
+    });
+  });
+
+  describe('importTokens', () => {
+    it('should import tokens from JSON', async () => {
+      const jsonPath = join(tempDir, 'tokens.json');
+      await writeFile(jsonPath, JSON.stringify({
+        colors: {
+          '$primary-500': '#7AFFD7',
+          '--atomix-color-primary': '#7AFFD7'
+        }
+      }));
+
+      await importTokens(jsonPath);
+
+      // Verify the tokens were written to SCSS files
+      const colorsFile = await readFile(join(tokenDir, '_settings.colors.scss'), 'utf8');
+      expect(colorsFile).toContain('$primary-500: #7AFFD7 !default');
+      expect(colorsFile).toContain('--atomix-color-primary: #7AFFD7');
+    });
+
+    it('should import tokens from JavaScript', async () => {
+      const jsPath = join(tempDir, 'tokens.js');
+      await writeFile(jsPath, `
+export const tokens = {
+  colors: {
+    '$primary-500': '#7AFFD7',
+    '--atomix-color-primary': '#7AFFD7'
+  }
+};
+      `);
+
+      await importTokens(jsPath);
+
+      const colorsFile = await readFile(join(tokenDir, '_settings.colors.scss'), 'utf8');
+      expect(colorsFile).toContain('$primary-500: #7AFFD7 !default');
+    });
+
+    it('should handle malformed JSON gracefully', async () => {
+      const jsonPath = join(tempDir, 'invalid.json');
+      await writeFile(jsonPath, '{ invalid json }');
+
+      await expect(importTokens(jsonPath)).rejects.toThrow();
+    });
+  });
+
+  describe('fixTokens', () => {
+    it('should add missing !default flags', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary: #7AFFD7;
+$secondary: #FF5733 !default;
+      `);
+
+      await fixTokens();
+
+      const content = await readFile(join(tokenDir, '_settings.colors.scss'), 'utf8');
+      expect(content).toContain('$primary: var(--atomix-color-primary) !default');
+    });
+
+    it('should convert hardcoded colors to variables', async () => {
+      await writeFile(join(tokenDir, '_settings.colors.scss'), `
+$primary: #7AFFD7 !default;
+background: #ffffff;
+      `);
+
+      await fixTokens();
+
+      const content = await readFile(join(tokenDir, '_settings.colors.scss'), 'utf8');
+      // Should replace hardcoded colors with variables
+      expect(content).toContain('var(--atomix-color-text)');
+    });
+  });
+});