@ollie-shop/cli 0.2.0 → 0.3.0

package/src/utils/rich-progress.ts

@@ -0,0 +1,320 @@
+import chalk from "chalk";
+import cliProgress from "cli-progress";
+import type { ProgressParams, ProgressPayload, Spinner } from "../types";
+
+// Enhanced build progress type for CLI display
+interface CLIBuildProgress {
+  phase: string;
+  message: string;
+  progress: number;
+  metadata?: {
+    bundleSize?: number;
+    gzippedSize?: number;
+    dependencies?: number;
+    removedExports?: number;
+  };
+}
+
+interface ProgressStep {
+  name: string;
+  emoji: string;
+  weight: number;
+  status?: "pending" | "active" | "completed" | "failed";
+  message?: string;
+}
+
+export class RichProgressReporter {
+  private multibar: cliProgress.MultiBar;
+  private bars: Map<string, cliProgress.SingleBar> = new Map();
+  private steps: ProgressStep[] = [
+    { name: "Validating", emoji: "🔍", weight: 10 },
+    { name: "Building", emoji: "🔨", weight: 40 },
+    { name: "Optimizing", emoji: "⚡", weight: 20 },
+    { name: "Deploying", emoji: "🚀", weight: 20 },
+    { name: "Verifying", emoji: "✅", weight: 10 },
+  ];
+  private startTime: number = Date.now();
+  private stats: {
+    bundleSize?: number;
+    gzippedSize?: number;
+    dependencies?: number;
+    removedExports?: number;
+  } = {};
+
+  constructor() {
+    // Create a formatter function that matches cli-progress expectations
+    const formatter = (
+      options: Record<string, unknown>,
+      params: Record<string, unknown>,
+      payload: Record<string, unknown>,
+    ): string => {
+      // Safe type conversion with validation
+      const formatOptions = {
+        barCompleteString:
+          typeof options.barCompleteString === "string"
+            ? options.barCompleteString
+            : undefined,
+        barIncompleteString:
+          typeof options.barIncompleteString === "string"
+            ? options.barIncompleteString
+            : undefined,
+        barsize:
+          typeof options.barsize === "number" ? options.barsize : undefined,
+      };
+
+      // Convert params to expected format
+      const progressParams: ProgressParams = {
+        progress: typeof params.progress === "number" ? params.progress : 0,
+        value: typeof params.value === "number" ? params.value : 0,
+        total: typeof params.total === "number" ? params.total : 0,
+        eta: typeof params.eta === "number" ? params.eta : 0,
+        startTime:
+          typeof params.startTime === "number" ? params.startTime : Date.now(),
+        stopTime: typeof params.stopTime === "number" ? params.stopTime : null,
+        duration: typeof params.duration === "number" ? params.duration : 0,
+      };
+
+      // Convert payload to expected format
+      const progressPayload: ProgressPayload = {
+        ...payload,
+        emoji: typeof payload.emoji === "string" ? payload.emoji : undefined,
+        step: typeof payload.step === "string" ? payload.step : undefined,
+        message:
+          typeof payload.message === "string" ? payload.message : undefined,
+        startTime:
+          typeof payload.startTime === "number" ? payload.startTime : undefined,
+      };
+
+      return this.formatBar(formatOptions, progressParams, progressPayload);
+    };
+
+    // Cast formatter to unknown first to bypass TypeScript's structural typing check
+    // cli-progress expects a GenericFormatter but the type definitions don't match exactly
+    const formatFunction = formatter as unknown;
+
+    this.multibar = new cliProgress.MultiBar(
+      {
+        format: formatFunction as cliProgress.GenericFormatter,
+        barCompleteChar: "\u2588",
+        barIncompleteChar: "\u2591",
+        hideCursor: true,
+        clearOnComplete: false,
+        forceRedraw: true,
+      },
+      cliProgress.Presets.shades_classic,
+    );
+  }
+
+  /**
+   * Custom format for progress bars
+   */
+  private formatBar(
+    options: {
+      barCompleteString?: string;
+      barIncompleteString?: string;
+      barsize?: number;
+      [key: string]: unknown;
+    },
+    params: ProgressParams,
+    payload: ProgressPayload,
+  ): string {
+    const barCompleteString = options.barCompleteString || "\u2588";
+    const barIncompleteString = options.barIncompleteString || "\u2591";
+    const barsize = options.barsize || 40;
+
+    const bar = barCompleteString.substring(
+      0,
+      Math.round(params.progress * barsize),
+    );
+    const empty = barIncompleteString.substring(0, barsize - bar.length);
+
+    const percent = Math.round(params.progress * 100);
+    const emoji = payload.emoji || "📦";
+    const step = payload.step || "Processing";
+    const message = payload.message || "";
+
+    let line = `${emoji} ${step.padEnd(12)} ${bar}${empty} ${percent.toString().padStart(3)}%`;
+
+    if (percent === 100 && payload.startTime) {
+      const duration = ((Date.now() - payload.startTime) / 1000).toFixed(1);
+      line += chalk.green(` ✓ ${duration}s`);
+    } else if (message) {
+      line += chalk.dim(` | ${message}`);
+    }
+
+    return line;
+  }
+
+  /**
+   * Start progress tracking
+   */
+  start(): void {
+    console.log(chalk.blue.bold("\n🚀 Starting deployment...\n"));
+
+    // Create bars for each step
+    for (const step of this.steps) {
+      const bar = this.multibar.create(100, 0, {
+        emoji: step.emoji,
+        step: step.name,
+        startTime: Date.now(),
+      });
+      this.bars.set(step.name, bar);
+    }
+  }
+
+  private readonly stepMap: Record<string, string> = {
+    validate: "Validating",
+    build: "Building",
+    optimize: "Optimizing",
+    upload: "Deploying",
+    verify: "Verifying",
+  };
+
+  /**
+   * Update progress based on CLIBuildProgress
+   */
+  updateProgress(progress: CLIBuildProgress): void {
+    const { phase, message, progress: percent } = progress;
+    const stepName = this.stepMap[phase] || "Processing";
+
+    this.updateBar(stepName, percent, message);
+    this.updatePreviousSteps(stepName);
+    this.updateStats(progress.metadata);
+  }
+
+  private updateBar(stepName: string, percent: number, message?: string): void {
+    const bar = this.bars.get(stepName);
+    if (bar) {
+      bar.update(percent * 100, { message });
+    }
+  }
+
+  private updatePreviousSteps(currentStepName: string): void {
+    let foundCurrent = false;
+
+    for (const step of this.steps) {
+      if (step.name === currentStepName) {
+        foundCurrent = true;
+        step.status = "active";
+      } else if (!foundCurrent) {
+        this.markStepComplete(step);
+      }
+    }
+  }
+
+  private markStepComplete(step: ProgressStep): void {
+    step.status = "completed";
+    const bar = this.bars.get(step.name);
+    if (bar) {
+      bar.update(100);
+    }
+  }
+
+  private updateStats(metadata?: CLIBuildProgress["metadata"]): void {
+    if (!metadata) return;
+
+    if (metadata.bundleSize) {
+      this.stats.bundleSize = metadata.bundleSize;
+    }
+    if (metadata.gzippedSize) {
+      this.stats.gzippedSize = metadata.gzippedSize;
+    }
+  }
+
+  /**
+   * Stop progress tracking
+   */
+  stop(success = true): void {
+    // Complete all bars if they exist
+    if (this.bars.size > 0) {
+      for (const bar of this.bars.values()) {
+        bar.update(100);
+      }
+    }
+
+    this.multibar.stop();
+
+    // Show summary
+    if (success) {
+      this.showSuccessSummary();
+    } else {
+      console.log(chalk.red("\n❌ Deployment failed\n"));
+    }
+  }
+
+  /**
+   * Show success summary with stats
+   */
+  private showSuccessSummary(): void {
+    const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
+
+    console.log(chalk.green.bold("\n✅ Deployment completed successfully!\n"));
+
+    if (Object.keys(this.stats).length > 0) {
+      console.log(chalk.blue("📊 Build Stats:"));
+
+      if (this.stats.bundleSize) {
+        const sizeKB = (this.stats.bundleSize / 1024).toFixed(1);
+        const gzipKB = this.stats.gzippedSize
+          ? (this.stats.gzippedSize / 1024).toFixed(1)
+          : "?";
+        console.log(`  • Bundle size: ${sizeKB}KB (gzipped: ${gzipKB}KB)`);
+      }
+
+      if (this.stats.removedExports) {
+        console.log(
+          `  • Tree shaking: Removed ${this.stats.removedExports} unused exports`,
+        );
+      }
+
+      if (this.stats.dependencies) {
+        console.log(`  • Dependencies: ${this.stats.dependencies}`);
+      }
+
+      console.log("");
+    }
+
+    console.log(chalk.dim(`Total time: ${duration}s`));
+  }
+}
+
+/**
+ * Simple progress reporter for single operations
+ */
+export class SimpleProgressReporter {
+  private spinner: Spinner | null = null;
+  private startTime: number;
+
+  constructor(private message: string) {
+    this.startTime = Date.now();
+  }
+
+  start(): void {
+    const ora = require("ora");
+    this.spinner = ora({
+      text: this.message,
+      spinner: "dots",
+    }).start();
+  }
+
+  update(message: string): void {
+    if (this.spinner) {
+      this.spinner.text = message;
+    }
+  }
+
+  succeed(message?: string): void {
+    if (this.spinner) {
+      const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
+      this.spinner.succeed(
+        message || `${this.message} ${chalk.dim(`(${duration}s)`)}`,
+      );
+    }
+  }
+
+  fail(message?: string): void {
+    if (this.spinner) {
+      this.spinner.fail(message || this.message);
+    }
+  }
+}

package/src/utils/validation-error-formatter.ts

@@ -0,0 +1,337 @@
+import type { ZodError, ZodIssue } from "zod";
+import type { CliConsole } from "./console";
+
+export interface ValidationError {
+  field: string;
+  message: string;
+  suggestedValue?: string;
+  examples?: ValidationExample[];
+}
+
+export interface ValidationExample {
+  description: string;
+  command: string;
+}
+
+const COMMON_EXAMPLES: Record<string, ValidationExample[]> = {
+  component: [
+    {
+      description: "Create a header component",
+      command: "ollieshop component create --name header-nav --slot header",
+    },
+    {
+      description: "Create a product listing component",
+      command: "ollieshop component create --name product-list --slot main",
+    },
+  ],
+  function: [
+    {
+      description: "Create a cart validation function",
+      command: "ollieshop function create --name validate-cart --event cart",
+    },
+    {
+      description: "Create an order processing function",
+      command:
+        "ollieshop function create --name process-order --event order --timing after",
+    },
+  ],
+  "store-version": [
+    {
+      description: "Create a new version",
+      command: "ollieshop store-version create --name summer-2024",
+    },
+    {
+      description: "Clone from existing version",
+      command: "ollieshop store-version clone --source v1 --name v2",
+    },
+  ],
+};
+
+function formatIssue(
+  issue: ZodIssue,
+  field: string,
+): { message: string; suggestedValue?: string } {
+  switch (issue.code) {
+    case "invalid_type": {
+      const invalidTypeIssue = issue as ZodIssue & { received?: string };
+      if (invalidTypeIssue.received === "undefined") {
+        return {
+          message: `${humanizeFieldName(field)} is required`,
+        };
+      }
+      return {
+        message: `${humanizeFieldName(field)} must be ${issue.expected}`,
+      };
+    }
+
+    case "invalid_enum_value": {
+      const options =
+        (issue as ZodIssue & { options?: string[] }).options || [];
+      return {
+        message: `Invalid ${humanizeFieldName(field)}`,
+        suggestedValue: `Valid options: ${options.join(", ")}`,
+      };
+    }
+
+    case "too_small": {
+      const minimum = (issue as ZodIssue & { minimum?: number }).minimum || 0;
+      return {
+        message: `${humanizeFieldName(field)} must be at least ${minimum} characters`,
+      };
+    }
+
+    case "invalid_string": {
+      const validation = (issue as ZodIssue & { validation?: string })
+        .validation;
+      if (!validation) {
+        return { message: humanizeMessage(issue.message, field) };
+      }
+
+      return formatStringValidation(validation, field);
+    }
+
+    default:
+      return { message: humanizeMessage(issue.message, field) };
+  }
+}
+
+function formatStringValidation(
+  validation: string,
+  field: string,
+): { message: string } {
+  const validationMessages: Record<string, string> = {
+    regex: getRegexMessage(field),
+    email: `${humanizeFieldName(field)} must be a valid email address`,
+    url: `${humanizeFieldName(field)} must be a valid URL`,
+    uuid: `${humanizeFieldName(field)} must be a valid UUID`,
+  };
+
+  return {
+    message:
+      validationMessages[validation] ||
+      `Invalid ${humanizeFieldName(field)} format`,
+  };
+}
+
+/**
+ * Format Zod errors into user-friendly validation errors
+ */
+export function formatZodError(
+  error: ZodError,
+  context?: string,
+): ValidationError[] {
+  const errors: ValidationError[] = [];
+
+  for (const issue of error.issues) {
+    const field = issue.path.join(".");
+    const { message, suggestedValue } = formatIssue(issue, field);
+
+    const error: ValidationError = {
+      field,
+      message,
+      suggestedValue,
+    };
+
+    // Add examples based on context
+    if (context && COMMON_EXAMPLES[context]) {
+      error.examples = COMMON_EXAMPLES[context];
+    }
+
+    errors.push(error);
+  }
+
+  return errors;
+}
+
+/**
+ * Display validation errors in a formatted way
+ */
+export function displayErrors(
+  console: CliConsole,
+  errors: ValidationError[],
+  command?: string,
+): void {
+  console.error("❌ Validation failed:");
+  console.log("");
+
+  for (const error of errors) {
+    console.error(`  • ${error.field}: ${error.message}`);
+
+    if (error.suggestedValue) {
+      console.log(`    💡 ${error.suggestedValue}`);
+    }
+
+    if (error.examples && error.examples.length > 0) {
+      console.log("");
+      console.log("    📝 Examples:");
+      for (const example of error.examples) {
+        console.log(`       ${example.description}:`);
+        console.log(`       $ ${example.command}`);
+      }
+    }
+  }
+
+  if (command) {
+    console.log("");
+    console.info(`💡 For more help, run: ollieshop ${command} --help`);
+  }
+}
+
+/**
+ * Suggest a command from available commands
+ */
+export function suggestCommand(
+  input: string,
+  availableCommands: string[],
+): string | undefined {
+  const normalizedInput = input.toLowerCase();
+
+  // Exact match
+  if (availableCommands.includes(normalizedInput)) {
+    return normalizedInput;
+  }
+
+  // Find commands that start with the input
+  const startsWithMatches = availableCommands.filter((cmd) =>
+    cmd.toLowerCase().startsWith(normalizedInput),
+  );
+
+  if (startsWithMatches.length === 1) {
+    return startsWithMatches[0];
+  }
+
+  // Find commands that contain the input
+  const containsMatches = availableCommands.filter((cmd) =>
+    cmd.toLowerCase().includes(normalizedInput),
+  );
+
+  if (containsMatches.length === 1) {
+    return containsMatches[0];
+  }
+
+  // Simple Levenshtein distance for close matches
+  const closeMatches = availableCommands
+    .map((cmd) => ({
+      command: cmd,
+      distance: levenshteinDistance(normalizedInput, cmd.toLowerCase()),
+    }))
+    .filter((match) => match.distance <= 2)
+    .sort((a, b) => a.distance - b.distance);
+
+  if (closeMatches.length > 0) {
+    const firstMatch = closeMatches[0];
+    return firstMatch ? firstMatch.command : undefined;
+  }
+  return undefined;
+}
+
+/**
+ * Transform field names to human-readable format
+ */
+function humanizeFieldName(field: string): string {
+  if (!field) return "Value";
+
+  return field
+    .split(/[._-]/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+/**
+ * Transform error messages to be more user-friendly
+ */
+function humanizeMessage(message: string, field: string): string {
+  // Handle "Required" messages
+  if (message === "Required" || message.toLowerCase() === "required") {
+    return `${humanizeFieldName(field)} is required`;
+  }
+
+  // Handle regex validation messages
+  if (message.includes("Invalid input")) {
+    return getRegexMessage(field);
+  }
+
+  return message;
+}
+
+/**
+ * Get user-friendly message for regex validation
+ */
+function getRegexMessage(field: string): string {
+  const regexMessages: Record<string, string> = {
+    name: "Must be lowercase with hyphens only (e.g., 'my-component', 'header-nav')",
+    version: "Must follow semantic versioning (e.g., '1.0.0', '2.1.3')",
+    slot: "Must be a valid slot name",
+  };
+
+  return regexMessages[field] || "Invalid format";
+}
+
+function initializeMatrix(a: string, b: string): number[][] {
+  const matrix: number[][] = [];
+
+  // Initialize matrix with proper dimensions
+  for (let i = 0; i <= b.length; i++) {
+    const row: number[] = [];
+    matrix[i] = row;
+    for (let j = 0; j <= a.length; j++) {
+      if (i === 0) {
+        row[j] = j;
+      } else if (j === 0) {
+        row[j] = i;
+      } else {
+        row[j] = 0;
+      }
+    }
+  }
+
+  return matrix;
+}
+
+function computeDistance(
+  a: string,
+  b: string,
+  i: number,
+  j: number,
+  matrix: number[][],
+): number {
+  if (b.charAt(i - 1) === a.charAt(j - 1)) {
+    const prevRow = matrix[i - 1];
+    return prevRow ? (prevRow[j - 1] ?? 0) : 0;
+  }
+
+  const currentRow = matrix[i];
+  const prevRow = matrix[i - 1];
+
+  const substitution = prevRow
+    ? (prevRow[j - 1] ?? 0) + 1
+    : Number.MAX_SAFE_INTEGER;
+  const insertion = currentRow
+    ? (currentRow[j - 1] ?? 0) + 1
+    : Number.MAX_SAFE_INTEGER;
+  const deletion = prevRow ? (prevRow[j] ?? 0) + 1 : Number.MAX_SAFE_INTEGER;
+
+  return Math.min(substitution, insertion, deletion);
+}
+
+/**
+ * Calculate Levenshtein distance between two strings
+ */
+function levenshteinDistance(a: string, b: string): number {
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+
+  const matrix = initializeMatrix(a, b);
+
+  for (let i = 1; i <= b.length; i++) {
+    const row = matrix[i];
+    if (!row) continue;
+
+    for (let j = 1; j <= a.length; j++) {
+      row[j] = computeDistance(a, b, i, j, matrix);
+    }
+  }
+
+  const lastRow = matrix[b.length];
+  return lastRow ? (lastRow[a.length] ?? 0) : 0;
+}