@shohojdhara/atomix 0.3.12 → 0.3.14

package/src/styles/99-utilities/_utilities.text.scss

@@ -8,9 +8,19 @@
 $utilities-text: (
   'font-size': (rfs: true,
     property: font-size,
-    class: u-fs,
+    class: u-text,
     values: map.merge(color-maps.$font-sizes-extended,
-      (1: map.get(color-maps.$font-sizes-extended, 'h1'),
+      (xs: map.get(color-maps.$font-sizes-extended, 'xs'),
+        sm: map.get(color-maps.$font-sizes-extended, 'sm'),
+        base: map.get(color-maps.$font-sizes-extended, 'base'),
+        lg: map.get(color-maps.$font-sizes-extended, 'lg'),
+        xl: map.get(color-maps.$font-sizes-extended, 'xl'),
+        '2xl': map.get(color-maps.$font-sizes-extended, '2xl'),
+        '3xl': map.get(color-maps.$font-sizes-extended, '3xl'),
+        '4xl': map.get(color-maps.$font-sizes-extended, '4xl'),
+        '5xl': map.get(color-maps.$font-sizes-extended, '5xl'),
+        '6xl': map.get(color-maps.$font-sizes-extended, '6xl'),
+        1: map.get(color-maps.$font-sizes-extended, 'h1'),
         2: map.get(color-maps.$font-sizes-extended, 'h2'),
         3: map.get(color-maps.$font-sizes-extended, 'h3'),
         4: map.get(color-maps.$font-sizes-extended, 'h4'),
@@ -25,13 +35,19 @@ $utilities-text: (
     ),
   ),
   'font-weight': (property: font-weight,
-    class: u-fw,
+    class: u-font,
     values: color-maps.$theme-font-weight,
   ),
   'line-height': (property: line-height,
-    class: u-lh,
+    class: u-leading,
     values: map.merge(color-maps.$line-heights,
-      (1: 1,
+      (none: 1,
+        tight: 1.25,
+        snug: 1.375,
+        normal: 1.5,
+        relaxed: 1.625,
+        loose: 2,
+        1: 1,
       )),
   ),
   'text-align': (responsive: true,
@@ -42,9 +58,13 @@ $utilities-text: (
       center: center,
     ),
   ),
-  'text-decoration': (class: u-td,
-    property: text-decoration,
-    values: none underline line-through,
+  'text-decoration': (property: text-decoration,
+    class: u,
+    values: (
+      'underline': underline,
+      'line-through': line-through,
+      'no-underline': none,
+    ),
   ),
   'text-transform': (property: text-transform,
     class: u-text,

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

@@ -1,204 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,
-      },
-    },
-  },
-});