@ollie-shop/cli 0.3.0 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollie-shop/cli",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Ollie Shop CLI for building custom checkouts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,7 @@
     "open": "^8.4.2",
     "ora": "^5.4.1",
     "semver": "^7.5.4",
-    "zod": "^3.22.4",
-    "@ollie-shop/core": "1.0.0"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@anatine/zod-mock": "^3.14.0",
@@ -33,18 +32,20 @@
     "@vitest/coverage-v8": "3.0.4",
     "fishery": "^2.3.1",
     "msw": "^2.10.3",
+    "tsup": "^8.0.1",
     "typescript": "^5.7.3",
     "vitest": "^3.0.4",
     "vitest-mock-extended": "^3.1.0",
-    "wait-for-expect": "^3.0.2"
+    "wait-for-expect": "^3.0.2",
+    "@ollie-shop/core": "1.0.2"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "lint": "eslint src/**/*.ts",

package/src/actions/component.actions.ts

@@ -1,21 +1,47 @@
+import {
+  buildAndDeployComponentFromDirectory,
+  buildComponent as buildComponentService,
+  createComponent as createComponentService,
+  validateComponent as validateComponentService,
+} from "@ollie-shop/core";
 import type {
   ComponentCreateOptions,
   ComponentDeployOptions,
-  ComponentListItem,
   ComponentValidateOptions,
 } from "../schemas/command.schema";
-import { ComponentListItemSchema } from "../schemas/command.schema";
 import type { CliConsole } from "../utils/console";
+import { ERROR_MESSAGES } from "../utils/constants";
+import { getContextualPath } from "../utils/context-detector.js";
+import {
+  configureBuilderUrl,
+  handleDeploymentError,
+  handleDeploymentResult,
+  showDeploymentSuccess,
+  waitForDeploymentWithProgress,
+} from "../utils/deploy-helpers";
 import { handleValidationResult } from "../utils/validation-helpers";
 
+/**
+ * Create a new component from a template
+ * Generates component files with TypeScript setup and optional tests
+ *
+ * @async
+ * @param {ComponentCreateOptions} options - Component creation options
+ * @param {CliConsole} cliConsole - Console instance for output
+ * @throws {Error} If component name is not provided or creation fails
+ * @example
+ * ```typescript
+ * await createComponent({
+ *   name: "shopping-cart",
+ *   slot: "sidebar",
+ *   tests: true
+ * }, console);
+ * ```
+ */
 export async function createComponent(
   options: ComponentCreateOptions,
   cliConsole: CliConsole,
 ): Promise<void> {
-  const { createComponent: createComponentService } = await import(
-    "@ollie-shop/core"
-  );
-
   const spinner = cliConsole.spinner({
     text: "Creating component...",
   });
@@ -54,19 +80,37 @@ export async function createComponent(
     ]);
   } catch (error) {
     spinner.fail("Failed to create component");
+    const { message, stack } =
+      error instanceof Error
+        ? error
+        : { message: "Unexpected error", stack: undefined };
+    cliConsole.error(`Error details: ${message}`);
+    if (stack) {
+      cliConsole.debug(`Stack trace: ${stack}`);
+    }
     throw error;
   }
 }
 
+/**
+ * Validate a component's structure and configuration
+ * Checks for required files, proper exports, and valid metadata
+ *
+ * @async
+ * @param {ComponentValidateOptions} options - Validation options including path
+ * @param {CliConsole} cliConsole - Console instance for output
+ * @throws {Error} If validation fails or path is invalid
+ * @example
+ * ```typescript
+ * await validateComponent({
+ *   path: "./components/shopping-cart"
+ * }, console);
+ * ```
+ */
 export async function validateComponent(
   options: ComponentValidateOptions,
   cliConsole: CliConsole,
 ): Promise<void> {
-  const { validateComponent: validateComponentService } = await import(
-    "@ollie-shop/core"
-  );
-  const { getContextualPath } = await import("../utils/context-detector.js");
-
   const targetPath = getContextualPath(options.path, "component");
   const spinner = cliConsole.spinner({ text: "Validating component..." });
 
@@ -75,19 +119,40 @@ export async function validateComponent(
     handleValidationResult(result, spinner, cliConsole, "Component");
   } catch (error) {
     spinner.fail("Validation failed");
+    const { message, stack } =
+      error instanceof Error
+        ? error
+        : { message: "Unexpected error", stack: undefined };
+    cliConsole.error(`Error details: ${message}`);
+    if (stack) {
+      cliConsole.debug(`Stack trace: ${stack}`);
+    }
     throw error;
   }
 }
 
+/**
+ * Build a component for production deployment
+ * Bundles the component with optimizations and outputs build metrics
+ *
+ * @async
+ * @param {Object} options - Build options
+ * @param {string} [options.path] - Component path (defaults to current directory)
+ * @param {boolean} [options.watch] - Enable watch mode for development
+ * @param {CliConsole} cliConsole - Console instance for output
+ * @throws {Error} If build fails
+ * @example
+ * ```typescript
+ * await buildComponent({
+ *   path: "./components/shopping-cart",
+ *   watch: false
+ * }, console);
+ * ```
+ */
 export async function buildComponent(
   options: { path?: string; watch?: boolean },
   cliConsole: CliConsole,
 ): Promise<void> {
-  const { buildComponent: buildComponentService } = await import(
-    "@ollie-shop/core"
-  );
-  const { getContextualPath } = await import("../utils/context-detector.js");
-
   const targetPath = getContextualPath(options.path, "component");
   const spinner = cliConsole.spinner({ text: "Building component..." });
 
@@ -121,214 +186,93 @@ export async function buildComponent(
   }
 }
 
+/**
+ * Deploy a component to the Ollie Shop infrastructure
+ * Builds and uploads the component to CloudFront CDN with real-time progress
+ *
+ * @async
+ * @param {ComponentDeployOptions} options - Deployment options
+ * @param {CliConsole} cliConsole - Console instance for output
+ * @throws {Error} If component ID is not provided or deployment fails
+ * @example
+ * ```typescript
+ * await deployComponent({
+ *   componentId: "123e4567-e89b-12d3-a456-426614174000",
+ *   path: "./components/shopping-cart"
+ * }, console);
+ * ```
+ */
 export async function deployComponent(
-  options: ComponentDeployOptions & { wait?: boolean },
+  options: ComponentDeployOptions,
   cliConsole: CliConsole,
 ): Promise<void> {
   if (!options.componentId) {
-    throw new Error("Component ID is required for deployment");
+    throw new Error(ERROR_MESSAGES.COMPONENT_ID_REQUIRED);
   }
 
+  configureBuilderUrl();
+
   const spinner = cliConsole.spinner({
-    text: "Building and deploying component...",
+    text: "Preparing component for deployment...",
   });
 
   try {
-    // For CLI demo purposes, simulate deployment without Supabase
-    // In production, this would use the builder API directly
-    const buildId = `build-${Date.now()}`;
-    const result = {
-      buildId,
-      status: "IN_PROGRESS" as const,
-      startTime: new Date().toISOString(),
-    };
-
-    spinner.succeed("Component deployment initiated!");
-    cliConsole.success(`Build ID: ${result.buildId}`);
-    cliConsole.info(`Initial Status: ${result.status}`);
+    const componentPath = options.path || process.cwd();
+    const result = await buildAndDeployComponentFromDirectory(
+      options.componentId,
+      componentPath,
+    );
 
-    // If wait flag is set, simulate deployment progress
-    if (options.wait) {
-      // Stop spinner and use rich progress reporter
-      spinner.stop();
+    handleDeploymentResult(result, "component", cliConsole, spinner);
+    spinner.stop();
 
-      const { RichProgressReporter } = await import(
-        "../utils/rich-progress.js"
+    try {
+      const { completedBuild, duration } = await waitForDeploymentWithProgress(
+        result.buildId,
+        "component",
+        cliConsole,
       );
-      const progressReporter = new RichProgressReporter();
-      progressReporter.start();
-
-      try {
-        // Simulate deployment progress for demo
-        const phases = [
-          {
-            phase: "validate",
-            message: "Validating component...",
-            progress: 0.1,
-          },
-          { phase: "build", message: "Building component...", progress: 0.3 },
-          {
-            phase: "bundle",
-            message: "Creating bundle...",
-            progress: 0.5,
-            metadata: { bundleSize: 125000, gzippedSize: 42000 },
-          },
-          { phase: "upload", message: "Uploading to CDN...", progress: 0.7 },
-          { phase: "deploy", message: "Deploying component...", progress: 0.9 },
-          { phase: "complete", message: "Deployment complete!", progress: 1.0 },
-        ];
-
-        // Simulate progress updates
-        for (const update of phases) {
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-          progressReporter.updateProgress(update);
-        }
-
-        const deploymentUrl = `https://cdn.ollie.shop/components/${options.componentId}/${buildId}`;
-        const duration = 5.5; // simulated duration
 
-        progressReporter.stop(true);
-
-        cliConsole.success(`\nDeployment URL: ${deploymentUrl}`);
-        cliConsole.info(`Duration: ${duration}s`);
-      } catch (error) {
-        progressReporter.stop(false);
-        throw error;
-      }
-    } else {
-      // Async mode - just show next steps
-      cliConsole.nextSteps("Monitor deployment", [
-        {
-          description: "Check deployment status",
-          command: `ollieshop component deploy-status ${result.buildId}`,
-        },
-        {
-          description: "Or deploy with --wait flag to wait for completion",
-          command: `ollieshop component deploy --id ${options.componentId} --wait`,
-        },
-      ]);
+      showDeploymentSuccess(
+        completedBuild,
+        duration,
+        options.componentId,
+        "component",
+        cliConsole,
+      );
+    } catch (error) {
+      handleDeploymentError(error, result.buildId, "component", cliConsole);
+      throw error;
     }
   } catch (error) {
-    spinner.fail("Deployment failed");
-    throw error;
-  }
-}
-
-export async function checkDeployStatus(
-  buildId: string,
-  cliConsole: CliConsole,
-): Promise<void> {
-  const spinner = cliConsole.spinner({ text: "Checking deployment status..." });
-
-  try {
-    // For CLI demo purposes, return mock build status
-    // In production, this would use the builder API directly
-    const build = {
-      id: buildId,
-      status: "SUCCEEDED",
-      startTime: new Date(Date.now() - 30000).toISOString(),
-      endTime: new Date().toISOString(),
-    };
-
-    if (!build) {
-      spinner.fail("Build not found");
-      return;
+    if (spinner.isSpinning) {
+      spinner.fail("Deployment failed");
     }
-
-    spinner.succeed("Status retrieved");
-
-    cliConsole.info(`Build ID: ${build.id}`);
-    cliConsole.info(`Status: ${build.status}`);
-    cliConsole.info(
-      `Start Time: ${new Date(build.startTime).toLocaleString()}`,
-    );
-
-    if (build.endTime) {
-      cliConsole.info(`End Time: ${new Date(build.endTime).toLocaleString()}`);
-      const duration =
-        (new Date(build.endTime).getTime() -
-          new Date(build.startTime).getTime()) /
-        1000;
-      cliConsole.info(`Duration: ${duration}s`);
-    }
-
-    if (build.status === "SUCCEEDED") {
-      cliConsole.success("✅ Deployment completed successfully!");
-    } else if (build.status === "FAILED" || build.status === "FAULT") {
-      cliConsole.error("❌ Deployment failed");
-    } else if (build.status === "IN_PROGRESS") {
-      cliConsole.info("🔄 Deployment in progress...");
-    }
-  } catch (error) {
-    spinner.fail("Failed to check status");
     throw error;
   }
 }
 
+// checkDeployStatus function removed - no longer needed since deployments always wait for completion
+
+/**
+ * List all components for the current store
+ * Currently displays information about accessing components via admin dashboard
+ *
+ * @async
+ * @param {CliConsole} cliConsole - Console instance for output
+ * @example
+ * ```typescript
+ * await listComponents(console);
+ * // Shows suggestions for creating and managing components
+ * ```
+ */
 export async function listComponents(cliConsole: CliConsole): Promise<void> {
-  const spinner = cliConsole.spinner({ text: "Loading components..." });
-
-  try {
-    // For CLI demo purposes, return mock components
-    // In production, this would use the API directly
-    const rawComponents = [
-      {
-        id: "comp-1",
-        name: "custom-header",
-        slot: "header",
-        active: true,
-        createdAt: new Date().toISOString(),
-      },
-      {
-        id: "comp-2",
-        name: "shipping-calculator",
-        slot: "shipping",
-        active: false,
-        createdAt: new Date(Date.now() - 172800000).toISOString(),
-      },
-    ];
-
-    // Map core component types to CLI display format
-    const components: ComponentListItem[] = rawComponents.map((component) =>
-      ComponentListItemSchema.parse({
-        id: component.id,
-        name: component.name,
-        slot: component.slot,
-        version: "1.0.0", // TODO: Get version from component metadata
-        enabled: component.active,
-        createdAt: component.createdAt,
-        type: "ui", // TODO: Get type from component metadata
-        description: "Component description", // TODO: Get from metadata
-      }),
-    );
-
-    spinner.succeed();
-
-    if (components.length === 0) {
-      cliConsole.warn("No components found");
-      cliConsole.suggestions([
-        "Create your first component with: ollieshop component create",
-        "Check our documentation at: https://docs.ollie.shop/components",
-      ]);
-      return;
-    }
-
-    cliConsole.info(
-      `Found ${components.length} component${components.length === 1 ? "" : "s"}:\n`,
-    );
-
-    cliConsole.table(
-      components.map((c) => ({
-        ID: c.id,
-        Name: c.name,
-        Slot: c.slot,
-        Version: c.version || "N/A",
-        Enabled: c.enabled ? "✓" : "✗",
-        Created: new Date(c.createdAt).toLocaleDateString(),
-      })),
-    );
-  } catch (error) {
-    spinner.fail("Failed to list components");
-    throw error;
-  }
+  cliConsole.info(
+    "Component listing is currently only available through the admin dashboard.",
+  );
+  cliConsole.suggestions([
+    "Create your first component with: ollieshop component create",
+    "Deploy components with: ollieshop component deploy --id <component-id>",
+    "Visit the admin dashboard to view existing components",
+  ]);
 }