@shohojdhara/atomix 0.4.8 → 0.5.0

package/scripts/cli/commands/validate.js

@@ -0,0 +1,194 @@
+/**
+ * Atomix CLI Validate Command
+ * Standalone audit tool for code and configuration quality
+ */
+
+import { logger } from '../utils/logger.js';
+import { validateA11y, validateTokens, validatePerformance, validateComponent } from '../internal/validator.js';
+import { validateComponentName } from '../utils/validation.js';
+import { hookManager } from '../internal/hooks.js';
+import { telemetry } from '../utils/telemetry.js';
+import { AtomixCLIError, ErrorCategory } from '../utils/error.js';
+import chalk from 'chalk';
+
+/**
+ * Action for the `atomix validate` command
+ * @param {object} options - Command options
+ * @param {string} [subcommand] - When 'component', run component-scoped validation
+ * @param {string} [name] - Component name for validate component <name>
+ */
+export async function validateAction(options = {}, subcommand, name) {
+  if (subcommand === 'component' && name) {
+    return runComponentValidation(name);
+  }
+
+  const spinner = logger.spinner('Starting validation audit...').start();
+
+  try {
+    const a11yResults = await validateA11y();
+    const tokenResults = await validateTokens();
+    const performanceResults = await validatePerformance();
+    
+    // Phase 4: CLI Performance Budget check
+    const telemetryLogs = await telemetry.getLogs();
+    const cliPerformanceIssues = validateCLIPerformance(telemetryLogs);
+
+    spinner.stop();
+
+    // Collect all results into a unified report
+    let report = {
+      valid: true,
+      issues: [],
+      rawResults: {
+        a11y: a11yResults,
+        tokens: tokenResults,
+        performance: performanceResults,
+        cli: cliPerformanceIssues
+      }
+    };
+
+    // Populate initial issues from standard validators
+    const allResults = [...a11yResults, ...tokenResults, ...performanceResults, ...cliPerformanceIssues];
+    for (const res of allResults) {
+      report.issues.push({
+        type: res.type,
+        severity: res.severity,
+        file: res.file,
+        message: res.message
+      });
+      if (res.severity === 'error') report.valid = false;
+    }
+
+    // Trigger plugin hooks for custom validation
+    report = await hookManager.trigger('onValidate', report);
+
+    logger.box('Atomix Quality Audit', {
+      borderColor: 'magenta',
+      padding: 1,
+      margin: 1
+    });
+
+    if (report.issues.length === 0 && report.valid) {
+      console.log(chalk.bold.green('✨ No issues found! Your project meets all quality criteria.'));
+      return;
+    }
+
+    let errors = 0;
+    let warnings = 0;
+
+    for (const result of report.issues) {
+      // Handle both object-based issues (standard) and string-based issues (simple plugin hooks)
+      const isObject = typeof result === 'object';
+      const severity = isObject ? (result.severity || 'error') : 'error';
+      const type = isObject ? (result.type || 'PLUGIN') : 'PLUGIN';
+      const file = isObject ? (result.file || 'N/A') : 'N/A';
+      const message = isObject ? result.message : result;
+
+      const icon = severity === 'error' ? chalk.red('❌') : chalk.yellow('⚠️');
+      if (severity === 'error') errors++;
+      else warnings++;
+
+      console.log(`${icon} [${type.toUpperCase()}] ${chalk.bold(file)}: ${message}`);
+    }
+
+    console.log(chalk.bold(`\nSummary: ${errors} errors, ${warnings} warnings.`));
+
+    if (errors > 0) {
+      throw new AtomixCLIError(
+        `Validation failed with ${errors} error(s) and ${warnings} warning(s).`,
+        ErrorCategory.VALIDATION,
+        ['Fix the reported issues and run atomix validate again.']
+      );
+    }
+  } catch (error) {
+    spinner.fail('Validation failed');
+    throw error;
+  }
+}
+
+/**
+ * Validate CLI performance against a budget
+ */
+function validateCLIPerformance(logs) {
+  if (logs.length === 0) return [];
+  
+  const issues = [];
+  const BUDGET_MS = 2000;
+  const byCommand = {};
+
+  logs.forEach(log => {
+    if (!byCommand[log.command]) {
+      byCommand[log.command] = { durations: [] };
+    }
+    byCommand[log.command].durations.push(log.duration);
+  });
+
+  for (const [name, data] of Object.entries(byCommand)) {
+    data.durations.sort((a, b) => a - b);
+    const p95Index = Math.floor(data.durations.length * 0.95);
+    const p95 = data.durations[p95Index];
+
+    if (p95 > BUDGET_MS) {
+      issues.push({
+        type: 'performance',
+        severity: 'warning',
+        file: `cli:${name}`,
+        message: `CLI Performance budget exceeded (P95: ${p95}ms, Budget: ${BUDGET_MS}ms)`
+      });
+    }
+  }
+
+  return issues;
+}
+
+/**
+ * Run validation for a single component and print component-scoped report
+ * @param {string} name - Component name (PascalCase)
+ */
+async function runComponentValidation(name) {
+  const nameValidation = await validateComponentName(name);
+  if (!nameValidation.isValid) {
+    throw new AtomixCLIError(
+      nameValidation.error || `Invalid component name: ${name}`,
+      ErrorCategory.VALIDATION,
+      ['Use PascalCase (e.g. Button, Card). See atomix validate --help.']
+    );
+  }
+
+  const spinner = logger.spinner(`Validating component ${name}...`).start();
+  try {
+    const report = await validateComponent(name);
+    spinner.stop();
+
+    logger.box(`Component: ${report.component}`, {
+      borderColor: 'magenta',
+      padding: 1,
+      margin: 1
+    });
+
+    if (report.issues.length === 0) {
+      console.log(chalk.bold.green(`✨ No issues found for ${report.component}.`));
+      return;
+    }
+
+    let errors = 0;
+    let warnings = 0;
+    for (const r of report.issues) {
+      const icon = r.severity === 'error' ? chalk.red('❌') : chalk.yellow('⚠️');
+      if (r.severity === 'error') errors++;
+      else warnings++;
+      console.log(`${icon} [${r.type}] ${chalk.bold(r.file)}: ${r.message}`);
+    }
+    console.log(chalk.bold(`\nSummary: ${errors} errors, ${warnings} warnings.`));
+    if (!report.valid) {
+      throw new AtomixCLIError(
+        `Component validation failed with ${errors} error(s) and ${warnings} warning(s).`,
+        ErrorCategory.VALIDATION,
+        ['Fix the reported issues and run atomix validate component <Name> again.']
+      );
+    }
+  } catch (error) {
+    spinner.fail('Validation failed');
+    throw error;
+  }
+}

package/scripts/cli/internal/ai-engine.js

@@ -0,0 +1,156 @@
+/**
+ * Atomix CLI - AI Engine
+ * Handles integration with LLMs for component generation
+ */
+
+import chalk from 'chalk';
+import { logger } from '../utils/logger.js';
+import { configLoader } from './config-loader.js';
+
+/**
+ * AI Scaffolding Engine
+ */
+export class AIEngine {
+  constructor() {
+    this.config = configLoader.get('ai') || {};
+  }
+
+  /**
+   * Generate component code based on prompt
+   */
+  async generateComponent(name, prompt) {
+    const provider = this.config.provider || 'openai';
+    const apiKey = this.config.apiKey || process.env.ATOMIX_AI_API_KEY;
+
+    if (!apiKey) {
+      throw new Error(`AI API Key missing. Please configure it in atomix.config.ts or set ATOMIX_AI_API_KEY environment variable.`);
+    }
+
+    logger.info(chalk.blue(`🤖 AI Engine: Generating component "${name}" using ${provider}...`));
+
+    try {
+      let response;
+      if (provider === 'openai') {
+        response = await this.callOpenAI(name, prompt, apiKey);
+      } else if (provider === 'anthropic') {
+        response = await this.callAnthropic(name, prompt, apiKey);
+      } else {
+        throw new Error(`Unsupported AI provider: ${provider}`);
+      }
+
+      return this.parseAIResponse(response);
+    } catch (error) {
+      logger.error(`AI Generation failed: ${error.message}`);
+      throw error;
+    }
+  }
+
+  /**
+   * Call OpenAI API
+   */
+  async callOpenAI(name, prompt, apiKey) {
+    const model = this.config.model || 'gpt-4';
+    const systemPrompt = this.getSystemPrompt(name);
+
+    const response = await fetch('https://api.openai.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        model: model,
+        messages: [
+          { role: 'system', content: systemPrompt },
+          { role: 'user', content: prompt }
+        ],
+        temperature: 0.7
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(`OpenAI API error: ${errorData.error?.message || response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.choices[0].message.content;
+  }
+
+  /**
+   * Call Anthropic API
+   */
+  async callAnthropic(name, prompt, apiKey) {
+    const model = this.config.model || 'claude-3-sonnet-20240229';
+    const systemPrompt = this.getSystemPrompt(name);
+
+    const response = await fetch('https://api.anthropic.com/v1/messages', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey,
+        'anthropic-version': '2023-06-01'
+      },
+      body: JSON.stringify({
+        model: model,
+        max_tokens: 4000,
+        system: systemPrompt,
+        messages: [
+          { role: 'user', content: prompt }
+        ]
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.content[0].text;
+  }
+
+  /**
+   * Get system prompt for the AI
+   */
+  getSystemPrompt(name) {
+    return `You are an expert design system engineer specializing in the Atomix design system.
+Your task is to generate a high-quality React component named "${name}" based on the user's prompt.
+
+The component should follow these rules:
+1. Use React and TypeScript.
+2. Use Atomix utility classes (u-*) and component classes (c-*).
+3. Follow the Atomix component structure (Props interface, functional component, exports).
+4. Include JSDoc comments for all props.
+5. Ensure the component is accessible (aria labels, roles).
+6. Return only a JSON object with the following structure:
+{
+  "component": "Full component code as a string",
+  "styles": "Any custom CSS/SCSS if needed (optional)",
+  "tests": "Unit test code using Vitest and React Testing Library",
+  "stories": "Storybook story file code",
+  "readme": "Usage documentation in Markdown"
+}
+Ensure the output is a valid JSON object. Do not include any other text or explanation.`;
+  }
+
+  /**
+   * Parse AI response to extract files
+   */
+  parseAIResponse(content) {
+    try {
+      // Try to find JSON in the response if the AI included other text
+      const jsonMatch = content.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        return JSON.parse(jsonMatch[0]);
+      }
+      return JSON.parse(content);
+    } catch (error) {
+      logger.error('Failed to parse AI response as JSON. Raw content:');
+      console.log(content);
+      throw new Error('AI returned invalid JSON format. See console for raw output.');
+    }
+  }
+}
+
+export const aiEngine = new AIEngine();