@shohojdhara/atomix 0.4.8 → 0.4.9

package/scripts/cli/internal/validator.js

@@ -0,0 +1,276 @@
+/**
+ * Atomix CLI Validator Logic
+ * Core validation logic for A11y, Tokens, and Performance
+ */
+
+import { readFile, readdir } from 'fs/promises';
+import { glob } from 'glob';
+import { join } from 'path';
+import { existsSync, statSync } from 'fs';
+
+/**
+ * Validate Accessibility (A11y)
+ * Simple static analysis for common pitfalls
+ */
+export async function validateA11y(projectRoot = process.cwd()) {
+  const issues = [];
+  const files = await glob('src/**/*.{tsx,jsx,html}', { cwd: projectRoot });
+
+  for (const file of files) {
+    const content = await readFile(join(projectRoot, file), 'utf8');
+    
+    // Check for missing alt on images
+    // Skip if alt uses JSX expression syntax like alt={variable} or alt={string}
+    const hasAltAttribute = /<img[^>]*\salt=\{[^}]+\}/i.test(content); // JSX expression
+    const hasValidAltString = /<img[^>]+alt=["'][^"']+["'][^>]*>/i.test(content); // Valid string alt
+    const hasEmptyAltString = /<img[^>]+alt=["']\s*["'][^>]*>/i.test(content); // Empty string alt
+    const hasNoAltAttribute = /<img[^>]+(?!alt=)[^>]*>/i.test(content) && !hasAltAttribute;
+    
+    if ((hasNoAltAttribute || hasEmptyAltString) && !(hasAltAttribute || hasValidAltString)) {
+      issues.push({
+        file,
+        type: 'A11y',
+        message: 'Missing or empty alt attribute on <img> tag',
+        severity: 'error'
+      });
+    }
+
+    // Check for button without labels (aria-label or text)
+    if (/<button[^>]*>\s*<\/button>/i.test(content) && !/aria-label=/i.test(content)) {
+      issues.push({
+        file,
+        type: 'A11y',
+        message: 'Button without text content or aria-label',
+        severity: 'warn'
+      });
+    }
+  }
+
+  return issues;
+}
+
+/**
+ * Validate Token Usage
+ */
+export async function validateTokens(projectRoot = process.cwd()) {
+  const issues = [];
+  const themeDir = join(projectRoot, 'src/styles/01-settings');
+  
+  if (!existsSync(themeDir)) {
+    issues.push({
+      file: 'src/styles/01-settings',
+      type: 'Tokens',
+      message: 'Design token settings directory missing',
+      severity: 'error'
+    });
+    return issues;
+  }
+
+  // Check for hardcoded colors in SCSS files
+  const scssFiles = await glob('src/**/*.scss', { cwd: projectRoot });
+  for (const file of scssFiles) {
+    const content = await readFile(join(projectRoot, file), 'utf8');
+    
+    // Skip variable definitions (lines with $variable:)
+    const lines = content.split('\n');
+    const hardcodedColors = [];
+    
+    for (const line of lines) {
+      // Skip comments
+      if (line.trim().startsWith('//') || line.trim().startsWith('/*')) continue;
+      
+      // Skip variable definitions (these SHOULD have hex values)
+      if (/^\s*\$[\w-]+:\s*#[\da-fA-F]{3,6}/.test(line)) continue;
+      
+      // Skip CSS var() fallbacks (these are good practices)
+      if (/var\([^)]+#[\da-fA-F]{3,6}/.test(line)) continue;
+      
+      // Skip url(), data URIs, and other non-color contexts
+      if (/url\(/.test(line)) continue;
+      
+      // Check for actual hardcoded colors in property values
+      const hexMatch = line.match(/(?<!\$[\w-]*:\s*)(?<!var\([^)]*)#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})\b(?!;)/g);
+      if (hexMatch) {
+        hardcodedColors.push(...hexMatch);
+      }
+    }
+    
+    if (hardcodedColors.length > 0) {
+      issues.push({
+        file,
+        type: 'Tokens',
+        message: `Hardcoded hex color(s) found: ${hardcodedColors.join(', ')}. Use variables or tokens.`,
+        severity: 'warn'
+      });
+    }
+  }
+
+  return issues;
+}
+
+/**
+ * Validate a single component: structure, A11y, and token usage
+ * @param {string} componentName - PascalCase component name (e.g. Button)
+ * @param {string} projectRoot - Project root directory
+ * @returns {Promise<{ valid: boolean, issues: Array<{type, severity, file, message}>, component: string }>}
+ */
+export async function validateComponent(componentName, projectRoot = process.cwd()) {
+  const issues = [];
+  const componentsBase = join(projectRoot, 'src/components');
+  let componentDir = null;
+
+  if (!existsSync(componentsBase)) {
+    return {
+      valid: false,
+      issues: [{
+        type: 'Structure',
+        severity: 'error',
+        file: 'src/components',
+        message: 'Components directory not found. Expected src/components/<ComponentName>/'
+      }],
+      component: componentName
+    };
+  }
+
+  const entries = await readdir(componentsBase, { withFileTypes: true });
+  const match = entries.find(
+    (e) => e.isDirectory() && e.name.toLowerCase() === componentName.toLowerCase()
+  );
+  if (!match) {
+    return {
+      valid: false,
+      issues: [{
+        type: 'Structure',
+        severity: 'error',
+        file: `src/components/${componentName}`,
+        message: `Component directory not found. Looked in src/components/ for "${componentName}".`
+      }],
+      component: componentName
+    };
+  }
+  componentDir = join(componentsBase, match.name);
+  const componentFiles = await glob(`${match.name}/**/*.{tsx,jsx,html}`, {
+    cwd: componentsBase,
+    absolute: false
+  });
+  const fullPaths = componentFiles.map((f) => join(projectRoot, 'src/components', f));
+
+  // A11y on component files only
+  for (let i = 0; i < fullPaths.length; i++) {
+    const file = fullPaths[i];
+    const content = await readFile(file, 'utf8');
+    const relativeFile = join('src/components', componentFiles[i]);
+    // Check for missing alt on images (improved JSX handling)
+    const hasAltAttribute = /<img[^>]*\salt=\{[^}]+\}/i.test(content); // JSX expression
+    const hasValidAltString = /<img[^>]+alt=["'][^"']+["'][^>]*>/i.test(content); // Valid string alt
+    const hasEmptyAltString = /<img[^>]+alt=["']\s*["'][^>]*>/i.test(content); // Empty string alt
+    const hasNoAltAttribute = /<img[^>]+(?!alt=)[^>]*>/i.test(content) && !hasAltAttribute;
+    
+    if ((hasNoAltAttribute || hasEmptyAltString) && !(hasAltAttribute || hasValidAltString)) {
+      issues.push({
+        file: relativeFile,
+        type: 'A11y',
+        message: 'Missing or empty alt attribute on <img> tag',
+        severity: 'error'
+      });
+    }
+    if (/<button[^>]*>\s*<\/button>/i.test(content) && !/aria-label=/i.test(content)) {
+      issues.push({
+        file: relativeFile,
+        type: 'A11y',
+        message: 'Button without text content or aria-label',
+        severity: 'warn'
+      });
+    }
+
+    // Check for hardcoded colors in TSX/JSX component files
+    const hexColorRegex = /(?<!['"`])#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})\b(?!['"`])/g;
+    const hexMatches = content.match(hexColorRegex);
+    if (hexMatches) {
+      issues.push({
+        file: relativeFile,
+        type: 'Tokens',
+        message: `Hardcoded hex color(s) found in TSX: ${hexMatches.join(', ')}. Use design tokens or CSS variables.`,
+        severity: 'error'
+      });
+    }
+  }
+
+  // Token usage: component settings and component SCSS
+  const settingsPath = join(projectRoot, 'src/styles/01-settings');
+  const compStylesPath = join(projectRoot, 'src/styles/06-components');
+  const settingsFile = join(settingsPath, `_settings.${match.name.toLowerCase()}.scss`);
+  const compFile = join(compStylesPath, `_components.${match.name.toLowerCase()}.scss`);
+  for (const scssPath of [settingsFile, compFile]) {
+    if (!existsSync(scssPath)) continue;
+    const content = await readFile(scssPath, 'utf8');
+    const hexMatch = content.match(/(?<![$/*])#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})\b/g);
+    if (hexMatch) {
+      issues.push({
+        file: scssPath.replace(projectRoot, '').replace(/^\//, '') || scssPath,
+        type: 'Tokens',
+        message: `Hardcoded hex color(s): ${hexMatch.join(', ')}. Use --atomix-* or project tokens.`,
+        severity: 'warn'
+      });
+    }
+  }
+
+  // Main component file exists
+  const mainExts = ['.tsx', '.jsx'];
+  let mainExists = false;
+  for (const ext of mainExts) {
+    if (existsSync(join(componentDir, `${match.name}${ext}`))) {
+      mainExists = true;
+      break;
+    }
+  }
+  if (!mainExists) {
+    issues.push({
+      type: 'Structure',
+      severity: 'error',
+      file: join('src/components', match.name),
+      message: `Main component file not found (e.g. ${match.name}.tsx)`
+    });
+  }
+
+  return {
+    valid: issues.filter((i) => i.severity === 'error').length === 0,
+    issues,
+    component: match.name
+  };
+}
+
+/**
+ * Validate Performance
+ * Calculate bundle size of CSS/JS if dist exists
+ */
+export async function validatePerformance(projectRoot = process.cwd()) {
+  const issues = [];
+  const distDir = join(projectRoot, 'dist');
+
+  if (!existsSync(distDir)) {
+    return [{
+      file: 'dist',
+      type: 'Performance',
+      message: 'No build artifact found in dist/. Run build first for performance analysis.',
+      severity: 'warn'
+    }];
+  }
+
+  const files = await glob('dist/**/*.{js,css}', { cwd: projectRoot });
+  for (const file of files) {
+    const stats = statSync(join(projectRoot, file));
+    const sizeKB = stats.size / 1024;
+
+    if (sizeKB > 500) { // Arbitrary 500KB threshold
+      issues.push({
+        file,
+        type: 'Performance',
+        message: `Bundle size is large: ${sizeKB.toFixed(2)} KB`,
+        severity: 'warn'
+      });
+    }
+  }
+
+  return issues;
+}

package/scripts/cli/internal/wizard.js

@@ -38,13 +38,15 @@ export const wizard = {
     // 4. Generate README
     const readme = type === 'react' 
       ? commonTemplates.readme.react(basename(process.cwd()))
-      : commonTemplates.readme.nextjs(basename(process.cwd()));
+      : type === 'nextjs'
+        ? commonTemplates.readme.nextjs(basename(process.cwd()))
+        : commonTemplates.readme.vanilla(basename(process.cwd()));
     await writeFile('README.md', readme, 'utf8');
 
     return true;
   },
 
-  async _updatePackageJson() {
+  async _updatePackageJson(type, template, options = {}) {
     const packageJsonPath = join(process.cwd(), 'package.json');
     let pkg = { scripts: {}, dependencies: {}, devDependencies: {} };
 
@@ -52,10 +54,62 @@ export const wizard = {
       pkg = JSON.parse(await readFile(packageJsonPath, 'utf8'));
     }
 
-    // Merge logic... (Simplified for refactor brevity)
-    // Add scripts
-    pkg.scripts['build:theme'] = `atomix build-theme themes/custom`;
-    
+    // Merge logic: ensure Atomix CLI scripts exist for scaffolded projects
+    pkg.scripts = pkg.scripts || {};
+    pkg.scripts['build:theme'] = pkg.scripts['build:theme'] || 'atomix build-theme themes/custom';
+    pkg.scripts['generate:component'] = pkg.scripts['generate:component'] || 'atomix generate component';
+    pkg.scripts['validate'] = pkg.scripts['validate'] || 'atomix validate';
+
+    // Add required peer dependencies according to project guidelines
+    pkg.dependencies = pkg.dependencies || {};
+    pkg.devDependencies = pkg.devDependencies || {};
+
+    // Required runtime dependencies (from CLI_PEER_DEPENDENCIES.md)
+    if (!pkg.dependencies.react) {
+      pkg.dependencies.react = '^18.0.0';
+    }
+    if (!pkg.dependencies['react-dom']) {
+      pkg.dependencies['react-dom'] = '^18.0.0';
+    }
+    if (!pkg.dependencies['@phosphor-icons/react']) {
+      pkg.dependencies['@phosphor-icons/react'] = '2.1.10';
+    }
+
+    // Add @shohojdhara/atomix as dependency
+    if (!pkg.dependencies['@shohojdhara/atomix']) {
+      pkg.dependencies['@shohojdhara/atomix'] = 'latest';
+    }
+
+    // Required devDependencies based on template
+    if (template.devDependencies && Array.isArray(template.devDependencies)) {
+      // Template defines an array of package names (without versions)
+      for (const dep of template.devDependencies) {
+        if (!pkg.devDependencies[dep]) {
+          // Use default versions for common packages
+          const defaultVersions = {
+            'vite': '^4.0.0',
+            '@vitejs/plugin-react': '^4.0.0',
+            'typescript': '^5.0.0',
+            '@types/react': '^18.0.0',
+            '@types/react-dom': '^18.0.0',
+            'sass': '^1.69.0',
+            '@types/node': '^20.0.0',
+            'eslint': '^8.0.0',
+            'eslint-config-next': '^14.0.0'
+          };
+          pkg.devDependencies[dep] = defaultVersions[dep] || '^1.0.0';
+        }
+      }
+    }
+
+    // Add engines field for Node.js version requirement
+    if (!pkg.engines) {
+      pkg.engines = {
+        node: '>=18.0.0',
+        npm: '>=8.0.0'
+      };
+    }
+
     await writeFile(packageJsonPath, JSON.stringify(pkg, null, 2), 'utf8');
   }
 };

package/scripts/cli/mappings.js

@@ -65,6 +65,29 @@ export const tailwindToAtomix = {
     'rounded-md': 'u-radius-md',
     'rounded-lg': 'u-radius-lg',
     'rounded-full': 'u-radius-full',
+    // Shadow
+    'shadow-sm': 'u-shadow-sm',
+    'shadow': 'u-shadow-md',
+    'shadow-md': 'u-shadow-md',
+    'shadow-lg': 'u-shadow-lg',
+    'shadow-xl': 'u-shadow-xl',
+    'shadow-2xl': 'u-shadow-2xl',
+    'shadow-inner': 'u-shadow-inner',
+    'shadow-none': 'u-shadow-none',
+    // Opacity
+    'opacity-0': 'u-opacity-0',
+    'opacity-25': 'u-opacity-25',
+    'opacity-50': 'u-opacity-50',
+    'opacity-75': 'u-opacity-75',
+    'opacity-100': 'u-opacity-100',
+    // Z-index
+    'z-0': 'u-z-0',
+    'z-10': 'u-z-10',
+    'z-20': 'u-z-20',
+    'z-30': 'u-z-30',
+    'z-40': 'u-z-40',
+    'z-50': 'u-z-50',
+    'z-auto': 'u-z-auto',
 };
 
 /**