@ollie-shop/cli 0.3.4 → 1.0.1

package/package.json

@@ -1,43 +1,30 @@
 {
   "name": "@ollie-shop/cli",
-  "version": "0.3.4",
-  "description": "Ollie Shop CLI for building custom checkouts",
+  "version": "1.0.1",
+  "description": "Ollie Shop CLI - Development tools for custom checkouts",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
     "ollieshop": "dist/index.js"
   },
   "dependencies": {
-    "@commander-js/extra-typings": "^12.0.1",
-    "chalk": "^4.1.2",
-    "chokidar": "^3.5.3",
-    "cli-progress": "^3.12.0",
-    "esbuild": "^0.19.8",
-    "glob": "^8.1.0",
-    "inquirer": "^8.2.6",
+    "archiver": "^7.0.1",
+    "esbuild": "^0.24.0",
+    "glob": "^11.0.0",
+    "ink": "^5.0.1",
     "jwt-decode": "^4.0.0",
-    "latest-version": "^5.1.0",
-    "open": "^8.4.2",
-    "ora": "^5.4.1",
-    "semver": "^7.5.4",
-    "zod": "^3.22.4"
+    "open": "^10.1.0",
+    "react": "^18.3.1",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@anatine/zod-mock": "^3.14.0",
-    "@faker-js/faker": "^8.0.0",
-    "@types/cli-progress": "^3.11.6",
-    "@types/inquirer": "^8.2.10",
+    "@types/archiver": "^6.0.3",
+    "@types/ink": "^2.0.3",
     "@types/node": "^22.15.23",
-    "@types/semver": "^7.5.6",
-    "@vitest/coverage-v8": "3.0.4",
-    "fishery": "^2.3.1",
-    "msw": "^2.10.3",
+    "@types/react": "^18.3.12",
     "tsup": "^8.0.1",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.4",
-    "vitest-mock-extended": "^3.1.0",
-    "wait-for-expect": "^3.0.2",
-    "@ollie-shop/core": "1.2.11"
+    "typescript": "^5.7.3"
   },
   "publishConfig": {
     "access": "public",
@@ -45,15 +32,6 @@
   },
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "lint": "eslint src/**/*.ts",
-    "type-check": "tsc --noEmit",
-    "cli": "npm run build && node dist/index.js",
-    "cli:help": "npm run cli -- --help",
-    "cli:version": "npm run cli -- --version",
-    "cli:component": "npm run cli -- component",
-    "cli:function": "npm run cli -- function"
+    "dev": "tsup --watch"
   }
 }

package/src/README.md

@@ -0,0 +1,126 @@
+# CLI Development Server
+
+The CLI provides a local development server for building and serving custom components with hot reload capabilities.
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                           CLI (localhost:4000)                       │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  ┌──────────────┐    ┌─────────────────┐    ┌───────────────────┐  │
+│  │  Component   │    │     esbuild     │    │   Static Server   │  │
+│  │  Discovery   │───▶│    Context      │───▶│  (serve files)    │  │
+│  │              │    │  (watch+build)  │    │                   │  │
+│  └──────────────┘    └────────┬────────┘    └───────────────────┘  │
+│                               │                                      │
+│                               │ SSE events                           │
+│                               ▼                                      │
+│                      ┌─────────────────┐                            │
+│                      │   /esbuild      │                            │
+│                      │  (EventSource)  │                            │
+│                      └─────────────────┘                            │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Endpoints
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /<component>/index.js` | Built component JS source |
+| `GET /<component>/index.js.map` | Source map |
+| `GET /<component>/index.css` | Component CSS (if any) |
+| `GET /manifest.json` | Component manifest with IDs and metadata |
+| `GET /esbuild` | Server-Sent Events for live reload |
+
+## Component Discovery
+
+Components are discovered from `./components/<name>/index.tsx`:
+
+```
+components/
+├── Header/
+│   ├── index.tsx      # Entry point (required)
+│   └── meta.json      # Metadata (optional)
+├── Footer/
+│   ├── index.tsx
+│   └── meta.json
+└── LocalOnly/
+    └── index.tsx      # No meta.json = local-only component
+```
+
+### meta.json Schema
+
+```json
+{
+  "id": "uuid-from-database",   // Optional: links to deployed component
+  "slot": "header"               // Optional: target slot for local components
+}
+```
+
+- Components WITH `id`: Override an existing deployed component
+- Components WITHOUT `id`: Local-only, need `slot` to be placed in checkout
+
+## Manifest Format
+
+The CLI generates `/manifest.json` after each build:
+
+```json
+[
+  {
+    "id": "abc-123",              // Component ID (from meta.json or generated)
+    "name": "Header",             // Folder name
+    "js": "/Header/index.js",     // JS path (always has leading slash)
+    "css": "/Header/index.css",   // CSS path (optional)
+    "slot": "header",             // Target slot (optional)
+    "isLocal": false              // true if no meta.json id
+  }
+]
+```
+
+## SSE Change Events
+
+The `/esbuild` endpoint emits events when files change:
+
+```json
+{
+  "added": ["NewComponent/index.js"],
+  "removed": [],
+  "updated": ["Header/index.js"]     // Note: NO leading slash
+}
+```
+
+**Important:** Paths in SSE events do NOT have leading slashes, while paths in manifest.json DO have leading slashes. Consumers must handle both formats.
+
+## Build Configuration
+
+esbuild is configured to match production:
+
+- **Format:** CommonJS (`module.exports.default`)
+- **Platform:** Browser
+- **Target:** ES2020
+- **Externals:** react, react-dom, next, @ollie-shop/sdk, next-intl
+- **Output:** `node_modules/.ollie/build/<component>/index.js`
+
+## Flow Sequence
+
+```
+1. CLI starts
+   └─▶ Discover components in ./components/
+   └─▶ Create esbuild context with entry points
+   └─▶ Initial build (writes JS + manifest)
+   └─▶ Start serve + watch mode on port 4000
+
+2. File changes detected
+   └─▶ esbuild rebuilds affected components
+   └─▶ manifest-plugin re-discovers components
+   └─▶ manifest.json updated
+   └─▶ SSE emits "change" event with paths
+
+3. Consumer receives SSE event
+   └─▶ Fetch updated /manifest.json
+   └─▶ Fetch component source from /<name>/index.js
+   └─▶ Forward to checkout via postMessage
+```

package/src/cli.tsx

@@ -0,0 +1,45 @@
+import { Box, Text } from "ink";
+import { HelpCommand } from "./commands/help.js";
+import { LoginCommand } from "./commands/login.js";
+import { StartCommand } from "./commands/start.js";
+
+interface AppProps {
+  command: string;
+  args: string[];
+}
+
+export function App({ command, args }: AppProps) {
+  switch (command) {
+    case "login":
+      return <LoginCommand args={args} />;
+    case "start":
+      return <StartCommand args={args} />;
+    case "help":
+    case "--help":
+    case "-h":
+      return <HelpCommand />;
+    case "version":
+    case "--version":
+    case "-v":
+      return <VersionCommand />;
+    default:
+      return <UnknownCommand command={command} />;
+  }
+}
+
+function VersionCommand() {
+  return (
+    <Box>
+      <Text>ollie v0.1.0</Text>
+    </Box>
+  );
+}
+
+function UnknownCommand({ command }: { command: string }) {
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color="red">Unknown command: {command}</Text>
+      <Text dimColor>Run `ollie help` for available commands.</Text>
+    </Box>
+  );
+}

package/src/commands/help.tsx

@@ -0,0 +1,79 @@
+import { Box, Text } from "ink";
+
+export function HelpCommand() {
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Ollie CLI
+        </Text>
+        <Text dimColor> - Development tools for custom checkouts</Text>
+      </Box>
+
+      <Text bold>Usage:</Text>
+      <Box marginLeft={2} flexDirection="column">
+        <Text>ollieshop {"<command>"} [options]</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text bold>Commands:</Text>
+      </Box>
+      <Box marginLeft={2} flexDirection="column" gap={0}>
+        <Box>
+          <Box width={16}>
+            <Text color="green">login</Text>
+          </Box>
+          <Text>Authenticate with your Ollie Shop account</Text>
+        </Box>
+        <Box>
+          <Box width={16}>
+            <Text color="green">start</Text>
+          </Box>
+          <Text>Start the development server with hot reload</Text>
+        </Box>
+        <Box>
+          <Box width={16}>
+            <Text color="green">help</Text>
+          </Box>
+          <Text>Show this help message</Text>
+        </Box>
+        <Box>
+          <Box width={16}>
+            <Text color="green">version</Text>
+          </Box>
+          <Text>Show CLI version</Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text bold>Start Options:</Text>
+      </Box>
+      <Box marginLeft={2} flexDirection="column" gap={0}>
+        <Box>
+          <Box width={20}>
+            <Text color="yellow">--stage, -s</Text>
+          </Box>
+          <Text>Config stage (loads ollie.{"{stage}"}.json)</Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text bold>Configuration:</Text>
+      </Box>
+      <Box marginLeft={2} flexDirection="column">
+        <Text dimColor>ollie.json - Default config (prod)</Text>
+        <Text dimColor>ollie.dev.json - Dev stage config</Text>
+        <Text dimColor>ollie.{"{stage}"}.json - Custom stage config</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text bold>Examples:</Text>
+      </Box>
+      <Box marginLeft={2} flexDirection="column">
+        <Text dimColor>$ ollieshop login</Text>
+        <Text dimColor>$ ollieshop start</Text>
+        <Text dimColor>$ ollieshop start --stage dev</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/commands/login.tsx

@@ -0,0 +1,92 @@
+import { Box, Text, useApp } from "ink";
+import { useEffect, useState } from "react";
+import { saveCredentials, startWebAuthFlow } from "../utils/auth.js";
+
+interface LoginCommandProps {
+  args: string[];
+}
+
+type LoginState =
+  | { status: "idle" }
+  | { status: "waiting" }
+  | { status: "success"; email: string }
+  | { status: "error"; message: string };
+
+export function LoginCommand({ args }: LoginCommandProps) {
+  const { exit } = useApp();
+  const [state, setState] = useState<LoginState>({ status: "idle" });
+
+  // Parse args for --port
+  const portIndex = args.findIndex((a) => a === "--port" || a === "-p");
+  const port =
+    portIndex !== -1 ? Number.parseInt(args[portIndex + 1], 10) : 7777;
+
+  useEffect(() => {
+    if (state.status !== "idle") return;
+
+    setState({ status: "waiting" });
+
+    startWebAuthFlow({ port })
+      .then(async (token) => {
+        if (token) {
+          await saveCredentials(token);
+          setState({ status: "success", email: token.email || "unknown" });
+        } else {
+          setState({ status: "error", message: "Authentication failed" });
+        }
+      })
+      .catch((error) => {
+        setState({
+          status: "error",
+          message: error instanceof Error ? error.message : "Unknown error",
+        });
+      });
+  }, [state.status, port]);
+
+  useEffect(() => {
+    if (state.status === "success" || state.status === "error") {
+      const timer = setTimeout(() => exit(), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [state.status, exit]);
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Box>
+        <Text bold color="cyan">
+          Ollie Login
+        </Text>
+      </Box>
+
+      {state.status === "waiting" && (
+        <Box flexDirection="column" gap={1}>
+          <Box>
+            <Text color="yellow">⏳ </Text>
+            <Text>Waiting for authentication in browser...</Text>
+          </Box>
+          <Text dimColor>
+            A browser window should open. Complete the login there.
+          </Text>
+          <Text dimColor>Listening on port {port}</Text>
+        </Box>
+      )}
+
+      {state.status === "success" && (
+        <Box>
+          <Text color="green">✓ </Text>
+          <Text>Successfully logged in as </Text>
+          <Text bold>{state.email}</Text>
+        </Box>
+      )}
+
+      {state.status === "error" && (
+        <Box flexDirection="column">
+          <Box>
+            <Text color="red">✗ </Text>
+            <Text color="red">Login failed: {state.message}</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}