codebakers 1.0.45 → 2.0.1

package/src/commands/deploy.ts

@@ -0,0 +1,414 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import { execa } from 'execa';
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import Anthropic from '@anthropic-ai/sdk';
+import { Config } from '../utils/config.js';
+import { VercelService } from '../services/vercel.js';
+import { runPatternCheck } from './check.js';
+
+interface DeployOptions {
+  preview?: boolean;
+  check?: boolean;
+}
+
+export async function deployCommand(options: DeployOptions = {}): Promise<void> {
+  const config = new Config();
+
+  if (!config.isInProject()) {
+    p.log.error('Not in a CodeBakers project.');
+    return;
+  }
+
+  p.intro(chalk.bgCyan.black(' Deploy to Production '));
+
+  const spinner = p.spinner();
+
+  // Step 1: Run pattern check (unless skipped)
+  if (options.check !== false) {
+    spinner.start('Running CodeBakers check...');
+    const checkResult = await runPatternCheck(false);
+    
+    if (!checkResult.passed) {
+      spinner.stop('');
+      const errors = checkResult.violations.filter(v => v.severity === 'error');
+      
+      if (errors.length > 0) {
+        p.log.error(`${errors.length} pattern violations found. Fix before deploying.`);
+        
+        const showViolations = await p.confirm({
+          message: 'Show violations?',
+          initialValue: true,
+        });
+
+        if (showViolations && !p.isCancel(showViolations)) {
+          for (const v of errors) {
+            console.log(chalk.red(`  ✗ ${v.file}:${v.line} - ${v.message}`));
+          }
+        }
+
+        const autoFix = await p.confirm({
+          message: 'Attempt auto-fix with AI?',
+          initialValue: true,
+        });
+
+        if (!autoFix || p.isCancel(autoFix)) {
+          p.outro(chalk.red('Deploy cancelled.'));
+          return;
+        }
+
+        // Auto-fix with AI
+        spinner.start('Auto-fixing with AI...');
+        await autoFixWithAI(config, errors);
+        spinner.stop('Auto-fix complete');
+
+        // Re-run check
+        const recheck = await runPatternCheck(false);
+        if (!recheck.passed) {
+          p.log.error('Some violations remain. Manual fix required.');
+          p.outro(chalk.red('Deploy cancelled.'));
+          return;
+        }
+      }
+    }
+    spinner.stop('Pattern check passed');
+  }
+
+  // Step 2: Run TypeScript check
+  spinner.start('Running TypeScript check...');
+  try {
+    await execa('npx', ['tsc', '--noEmit'], { cwd: process.cwd() });
+    spinner.stop('TypeScript check passed');
+  } catch (error) {
+    spinner.stop('');
+    p.log.error('TypeScript errors found.');
+    
+    const fix = await p.confirm({
+      message: 'Attempt to fix TypeScript errors?',
+      initialValue: true,
+    });
+
+    if (fix && !p.isCancel(fix)) {
+      spinner.start('Fixing TypeScript errors...');
+      const fixed = await fixTypeScriptErrors(config);
+      spinner.stop(fixed ? 'TypeScript errors fixed' : 'Could not auto-fix all errors');
+      
+      if (!fixed) {
+        p.outro(chalk.red('Deploy cancelled.'));
+        return;
+      }
+    } else {
+      p.outro(chalk.red('Deploy cancelled.'));
+      return;
+    }
+  }
+
+  // Step 3: Run build
+  spinner.start('Building project...');
+  try {
+    await execa('pnpm', ['build'], { cwd: process.cwd() });
+    spinner.stop('Build successful');
+  } catch (error) {
+    spinner.stop('');
+    p.log.error('Build failed.');
+    
+    const errorOutput = error instanceof Error ? error.message : 'Unknown error';
+    console.log(chalk.dim(errorOutput));
+
+    const fix = await p.confirm({
+      message: 'Attempt to fix build errors with AI?',
+      initialValue: true,
+    });
+
+    if (fix && !p.isCancel(fix)) {
+      spinner.start('Fixing build errors...');
+      const fixed = await fixBuildErrors(config, errorOutput);
+      spinner.stop(fixed ? 'Build errors fixed' : 'Could not auto-fix');
+      
+      if (fixed) {
+        // Retry build
+        spinner.start('Retrying build...');
+        try {
+          await execa('pnpm', ['build'], { cwd: process.cwd() });
+          spinner.stop('Build successful');
+        } catch {
+          spinner.stop('Build still failing');
+          p.outro(chalk.red('Deploy cancelled.'));
+          return;
+        }
+      } else {
+        p.outro(chalk.red('Deploy cancelled.'));
+        return;
+      }
+    } else {
+      p.outro(chalk.red('Deploy cancelled.'));
+      return;
+    }
+  }
+
+  // Step 4: Git commit if there are changes
+  spinner.start('Checking for uncommitted changes...');
+  const { stdout: gitStatus } = await execa('git', ['status', '--porcelain'], { cwd: process.cwd() });
+  
+  if (gitStatus.trim()) {
+    spinner.stop('');
+    const commit = await p.confirm({
+      message: 'You have uncommitted changes. Commit before deploying?',
+      initialValue: true,
+    });
+
+    if (commit && !p.isCancel(commit)) {
+      const message = await p.text({
+        message: 'Commit message:',
+        placeholder: 'Pre-deploy changes',
+        initialValue: 'Pre-deploy changes',
+      });
+
+      if (!p.isCancel(message)) {
+        await execa('git', ['add', '.'], { cwd: process.cwd() });
+        await execa('git', ['commit', '-m', message as string], { cwd: process.cwd() });
+        
+        spinner.start('Pushing to GitHub...');
+        await execa('git', ['push'], { cwd: process.cwd() });
+        spinner.stop('Pushed to GitHub');
+      }
+    }
+  } else {
+    spinner.stop('No uncommitted changes');
+  }
+
+  // Step 5: Deploy to Vercel
+  const deployType = options.preview ? 'preview' : 'production';
+  spinner.start(`Deploying to ${deployType}...`);
+
+  try {
+    const vercel = new VercelService(config);
+    const deployment = await vercel.deploy(process.cwd(), !options.preview);
+    
+    spinner.stop('Deployment complete!');
+
+    console.log(boxedOutput(`
+${chalk.green('✓')} Deployed successfully!
+
+${chalk.bold('URL:')} ${deployment.url}
+${chalk.bold('Type:')} ${deployType}
+${chalk.bold('Time:')} ${new Date().toLocaleTimeString()}
+
+${chalk.dim('View in Vercel Dashboard:')}
+${chalk.dim(deployment.dashboardUrl || 'https://vercel.com/dashboard')}
+`));
+
+  } catch (error) {
+    spinner.stop('');
+    const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+    p.log.error(`Deployment failed: ${errorMsg}`);
+
+    // Check if it's a build error from Vercel
+    if (errorMsg.includes('Build failed')) {
+      const retry = await p.confirm({
+        message: 'Attempt to fix and retry?',
+        initialValue: true,
+      });
+
+      if (retry && !p.isCancel(retry)) {
+        spinner.start('Analyzing Vercel build error...');
+        // Would fetch Vercel logs and auto-fix
+        spinner.stop('Fix attempted');
+      }
+    }
+
+    p.outro(chalk.red('Deploy failed.'));
+  }
+}
+
+async function autoFixWithAI(
+  config: Config,
+  violations: Array<{ file: string; line: number; rule: string; message: string }>
+): Promise<void> {
+  const anthropicCreds = config.getCredentials('anthropic');
+  if (!anthropicCreds?.apiKey) {
+    throw new Error('Anthropic API key not configured');
+  }
+
+  const anthropic = new Anthropic({
+    apiKey: anthropicCreds.apiKey,
+  });
+
+  // Group by file
+  const byFile = new Map<string, typeof violations>();
+  for (const v of violations) {
+    if (!byFile.has(v.file)) {
+      byFile.set(v.file, []);
+    }
+    byFile.get(v.file)!.push(v);
+  }
+
+  for (const [file, fileViolations] of byFile) {
+    const filePath = path.join(process.cwd(), file);
+    const content = await fs.readFile(filePath, 'utf-8');
+
+    const prompt = `Fix these CodeBakers pattern violations in this file:
+
+Violations:
+${fileViolations.map(v => `- Line ${v.line}: ${v.rule} - ${v.message}`).join('\n')}
+
+Current file content:
+\`\`\`typescript
+${content}
+\`\`\`
+
+Output ONLY the corrected file content, no explanations. Keep all existing functionality.`;
+
+    const response = await anthropic.messages.create({
+      model: 'claude-sonnet-4-20250514',
+      max_tokens: 8192,
+      messages: [{ role: 'user', content: prompt }],
+    });
+
+    let fixed = response.content[0].type === 'text' ? response.content[0].text : '';
+    
+    // Extract code from markdown if present
+    const codeMatch = fixed.match(/```(?:typescript|tsx?)?\n([\s\S]+?)\n```/);
+    if (codeMatch) {
+      fixed = codeMatch[1];
+    }
+
+    await fs.writeFile(filePath, fixed);
+  }
+}
+
+async function fixTypeScriptErrors(config: Config): Promise<boolean> {
+  try {
+    // Get TypeScript errors
+    const { stderr } = await execa('npx', ['tsc', '--noEmit'], { 
+      cwd: process.cwd(),
+      reject: false,
+    });
+
+    if (!stderr) return true;
+
+    const anthropicCreds = config.getCredentials('anthropic');
+    if (!anthropicCreds?.apiKey) {
+      return false;
+    }
+
+    const anthropic = new Anthropic({
+      apiKey: anthropicCreds.apiKey,
+    });
+
+    // Parse error locations
+    const errorLines = stderr.split('\n').filter(line => line.includes('error TS'));
+    
+    for (const errorLine of errorLines.slice(0, 10)) { // Limit to 10 errors
+      const match = errorLine.match(/^(.+?)\((\d+),(\d+)\): error (TS\d+): (.+)$/);
+      if (!match) continue;
+
+      const [, file, line, , , message] = match;
+      const filePath = path.join(process.cwd(), file);
+      
+      if (!await fs.pathExists(filePath)) continue;
+
+      const content = await fs.readFile(filePath, 'utf-8');
+
+      const prompt = `Fix this TypeScript error:
+
+File: ${file}
+Line: ${line}
+Error: ${message}
+
+Current file content:
+\`\`\`typescript
+${content}
+\`\`\`
+
+Output ONLY the corrected file content, no explanations.`;
+
+      const response = await anthropic.messages.create({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 8192,
+        messages: [{ role: 'user', content: prompt }],
+      });
+
+      let fixed = response.content[0].type === 'text' ? response.content[0].text : '';
+      
+      const codeMatch = fixed.match(/```(?:typescript|tsx?)?\n([\s\S]+?)\n```/);
+      if (codeMatch) {
+        fixed = codeMatch[1];
+      }
+
+      await fs.writeFile(filePath, fixed);
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function fixBuildErrors(config: Config, errorOutput: string): Promise<boolean> {
+  const anthropicCreds = config.getCredentials('anthropic');
+  if (!anthropicCreds?.apiKey) {
+    return false;
+  }
+
+  const anthropic = new Anthropic({
+    apiKey: anthropicCreds.apiKey,
+  });
+
+  // Parse error to find file
+  const fileMatch = errorOutput.match(/(?:Error|error).*?(?:in|at)\s+(.+?\.tsx?)(?::|$)/);
+  if (!fileMatch) return false;
+
+  const file = fileMatch[1];
+  const filePath = path.join(process.cwd(), file);
+  
+  if (!await fs.pathExists(filePath)) return false;
+
+  const content = await fs.readFile(filePath, 'utf-8');
+
+  const prompt = `Fix this build error:
+
+Error output:
+${errorOutput}
+
+File: ${file}
+
+Current file content:
+\`\`\`typescript
+${content}
+\`\`\`
+
+Output ONLY the corrected file content, no explanations.`;
+
+  try {
+    const response = await anthropic.messages.create({
+      model: 'claude-sonnet-4-20250514',
+      max_tokens: 8192,
+      messages: [{ role: 'user', content: prompt }],
+    });
+
+    let fixed = response.content[0].type === 'text' ? response.content[0].text : '';
+    
+    const codeMatch = fixed.match(/```(?:typescript|tsx?)?\n([\s\S]+?)\n```/);
+    if (codeMatch) {
+      fixed = codeMatch[1];
+    }
+
+    await fs.writeFile(filePath, fixed);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function boxedOutput(content: string): string {
+  const lines = content.split('\n');
+  const maxLength = Math.max(...lines.map(l => l.replace(/\x1b\[[0-9;]*m/g, '').length));
+  const border = '─'.repeat(maxLength + 2);
+  
+  return `
+╭${border}╮
+${lines.map(l => `│ ${l.padEnd(maxLength)} │`).join('\n')}
+╰${border}╯`;
+}

package/src/commands/design.ts

@@ -0,0 +1,298 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import * as fs from 'fs-extra';
+import * as path from 'path';
+import { Config } from '../utils/config.js';
+
+const DESIGN_PROFILES = {
+  minimal: {
+    name: 'Minimal',
+    inspiration: 'Linear, Notion, Vercel',
+    fonts: { heading: 'Inter', body: 'Inter' },
+    corners: 'rounded-md',
+    shadows: 'none',
+    spacing: 'generous',
+  },
+  bold: {
+    name: 'Bold',
+    inspiration: 'Stripe, Ramp, Mercury',
+    fonts: { heading: 'Plus Jakarta Sans', body: 'Inter' },
+    corners: 'rounded-2xl',
+    shadows: 'elevated',
+    spacing: 'generous',
+  },
+  editorial: {
+    name: 'Editorial',
+    inspiration: 'Medium, Substack, NY Times',
+    fonts: { heading: 'Playfair Display', body: 'Source Serif Pro' },
+    corners: 'rounded-none',
+    shadows: 'none',
+    spacing: 'reading',
+  },
+  playful: {
+    name: 'Playful',
+    inspiration: 'Figma, Slack, Notion',
+    fonts: { heading: 'Nunito', body: 'Nunito' },
+    corners: 'rounded-full',
+    shadows: 'soft',
+    spacing: 'comfortable',
+  },
+  premium: {
+    name: 'Premium',
+    inspiration: 'Apple, Porsche, Amex',
+    fonts: { heading: 'Cormorant Garamond', body: 'Lato' },
+    corners: 'rounded-lg',
+    shadows: 'subtle',
+    spacing: 'luxurious',
+  },
+  dashboard: {
+    name: 'Dashboard',
+    inspiration: 'Datadog, Grafana, Linear',
+    fonts: { heading: 'Inter', body: 'Inter' },
+    corners: 'rounded-md',
+    shadows: 'card',
+    spacing: 'compact',
+  },
+};
+
+export async function designCommand(subcommand?: string): Promise<void> {
+  const config = new Config();
+
+  if (!config.isInProject()) {
+    p.log.error('Not in a CodeBakers project. Run `codebakers init` first.');
+    return;
+  }
+
+  p.intro(chalk.bgCyan.black(' Design System '));
+
+  const action = subcommand || await p.select({
+    message: 'What do you want to do?',
+    options: [
+      { value: 'profile', label: '🎨 Set design profile' },
+      { value: 'palette', label: '🌈 Generate color palette' },
+      { value: 'check', label: '✅ Check design quality' },
+      { value: 'view', label: '👀 View current settings' },
+    ],
+  });
+
+  if (p.isCancel(action)) return;
+
+  switch (action) {
+    case 'profile':
+      await setProfile();
+      break;
+    case 'palette':
+      await generatePalette();
+      break;
+    case 'check':
+      await checkDesign();
+      break;
+    case 'view':
+      await viewSettings();
+      break;
+  }
+}
+
+async function setProfile(): Promise<void> {
+  const profile = await p.select({
+    message: 'Choose your design profile:',
+    options: Object.entries(DESIGN_PROFILES).map(([key, value]) => ({
+      value: key,
+      label: `${value.name}`,
+      hint: value.inspiration,
+    })),
+  });
+
+  if (p.isCancel(profile)) return;
+
+  const selected = DESIGN_PROFILES[profile as keyof typeof DESIGN_PROFILES];
+  
+  // Save to project config
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  await fs.ensureDir(path.dirname(configPath));
+  await fs.writeJson(configPath, {
+    profile,
+    ...selected,
+    updatedAt: new Date().toISOString(),
+  }, { spaces: 2 });
+
+  p.log.success(`Design profile set to ${selected.name}`);
+  
+  console.log(chalk.dim(`
+  Fonts:    ${selected.fonts.heading} / ${selected.fonts.body}
+  Corners:  ${selected.corners}
+  Shadows:  ${selected.shadows}
+  Spacing:  ${selected.spacing}
+  `));
+}
+
+async function generatePalette(): Promise<void> {
+  const brandColor = await p.text({
+    message: 'Enter your brand color (hex):',
+    placeholder: '#6366F1',
+    validate: (v) => {
+      if (!v.match(/^#[0-9A-Fa-f]{6}$/)) return 'Enter a valid hex color (#RRGGBB)';
+      return undefined;
+    },
+  });
+
+  if (p.isCancel(brandColor)) return;
+
+  const palette = generateColorPalette(brandColor as string);
+
+  // Save to project
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  let config = {};
+  if (await fs.pathExists(configPath)) {
+    config = await fs.readJson(configPath);
+  }
+  
+  await fs.writeJson(configPath, {
+    ...config,
+    colors: palette,
+    updatedAt: new Date().toISOString(),
+  }, { spaces: 2 });
+
+  p.log.success('Color palette generated!');
+
+  console.log(`
+  ${chalk.bgHex(palette.brand[500]).black('  Brand  ')} ${palette.brand[500]}
+  ${chalk.bgHex(palette.brand[100]).black('  Light  ')} ${palette.brand[100]}
+  ${chalk.bgHex(palette.brand[900]).white('  Dark   ')} ${palette.brand[900]}
+  ${chalk.bgHex(palette.accent).black(' Accent  ')} ${palette.accent}
+  `);
+}
+
+function generateColorPalette(hex: string): Record<string, any> {
+  // Convert hex to HSL
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+
+  // Generate scale
+  const hslToHex = (h: number, s: number, l: number): string => {
+    l /= 100;
+    const a = s * Math.min(l, 1 - l) / 100;
+    const f = (n: number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      return Math.round(255 * color).toString(16).padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+  };
+
+  return {
+    brand: {
+      50: hslToHex(h, s * 0.3, 97),
+      100: hslToHex(h, s * 0.4, 94),
+      200: hslToHex(h, s * 0.5, 86),
+      300: hslToHex(h, s * 0.6, 74),
+      400: hslToHex(h, s * 0.8, 62),
+      500: hex, // Original
+      600: hslToHex(h, s, l * 0.85),
+      700: hslToHex(h, s, l * 0.7),
+      800: hslToHex(h, s, l * 0.55),
+      900: hslToHex(h, s, l * 0.4),
+    },
+    accent: hslToHex((h + 180) % 360, s, l), // Complementary
+  };
+}
+
+async function checkDesign(): Promise<void> {
+  const spinner = p.spinner();
+  spinner.start('Checking design quality...');
+
+  const cwd = process.cwd();
+  const issues: string[] = [];
+
+  // Check for anti-patterns in code
+  const glob = (await import('fast-glob')).default;
+  const files = await glob(['src/**/*.{tsx,jsx}'], { cwd });
+
+  for (const file of files) {
+    const content = await fs.readFile(path.join(cwd, file), 'utf-8');
+
+    // Check for generic gradient hero
+    if (content.includes('bg-gradient-to-r from-blue-500') || 
+        content.includes('bg-gradient-to-r from-purple-500')) {
+      issues.push(`${file}: Generic gradient hero detected`);
+    }
+
+    // Check for icon spam
+    const iconMatches = content.match(/<(Rocket|Shield|Zap|Star|Check|Lightning)/g);
+    if (iconMatches && iconMatches.length > 3) {
+      issues.push(`${file}: Too many generic icons (${iconMatches.length})`);
+    }
+
+    // Check for generic CTAs
+    if (content.includes('>Get Started<') || content.includes('>Learn More<')) {
+      issues.push(`${file}: Generic CTA text - be more specific`);
+    }
+
+    // Check for lazy empty states
+    if (content.includes('No data') || content.includes('Nothing here')) {
+      issues.push(`${file}: Lazy empty state - add helpful message`);
+    }
+
+    // Check for small section padding
+    if (content.includes('py-4') || content.includes('py-6') || content.includes('py-8')) {
+      if (content.includes('<section')) {
+        issues.push(`${file}: Section padding too small - use py-16 or larger`);
+      }
+    }
+  }
+
+  spinner.stop('Check complete');
+
+  if (issues.length === 0) {
+    console.log(chalk.green('\n✓ No design issues found!\n'));
+  } else {
+    console.log(chalk.yellow(`\n⚠️  ${issues.length} design issues found:\n`));
+    for (const issue of issues) {
+      console.log(chalk.dim(`  • ${issue}`));
+    }
+    console.log('');
+  }
+}
+
+async function viewSettings(): Promise<void> {
+  const configPath = path.join(process.cwd(), '.codebakers', 'design.json');
+  
+  if (!await fs.pathExists(configPath)) {
+    p.log.info('No design settings configured. Run `codebakers design profile` to set up.');
+    return;
+  }
+
+  const config = await fs.readJson(configPath);
+  
+  console.log(chalk.bold('\nCurrent Design Settings:\n'));
+  console.log(`  Profile:  ${config.name || config.profile}`);
+  console.log(`  Fonts:    ${config.fonts?.heading} / ${config.fonts?.body}`);
+  console.log(`  Corners:  ${config.corners}`);
+  console.log(`  Shadows:  ${config.shadows}`);
+  console.log(`  Spacing:  ${config.spacing}`);
+  
+  if (config.colors) {
+    console.log(`  Brand:    ${config.colors.brand?.[500]}`);
+    console.log(`  Accent:   ${config.colors.accent}`);
+  }
+  console.log('');
+}