@ollie-shop/cli 0.3.3 → 1.0.0

package/src/commands/start.tsx

@@ -0,0 +1,411 @@
+import type { BuildContext, ServeOnRequestArgs } from "esbuild";
+import { Box, Text, useApp, useInput } from "ink";
+import open from "open";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { loadConfig, resolveStage } from "../utils/config.js";
+import {
+  type ComponentInfo,
+  createBuildContext,
+  discoverComponents,
+  startDevServer,
+} from "../utils/esbuild.js";
+
+interface StartCommandProps {
+  args: string[];
+}
+
+interface RequestLog {
+  id: number;
+  method: string;
+  path: string;
+  status: number;
+  time: number;
+  timestamp: Date;
+}
+
+type ServerState =
+  | { status: "initializing" }
+  | { status: "discovering" }
+  | { status: "building" }
+  | {
+      status: "running";
+      host: string;
+      port: number;
+      storeId: string;
+      versionId?: string;
+    }
+  | { status: "error"; message: string };
+
+const STUDIO_BASE_URL = "https://admin.ollie.shop/studio";
+
+const MAX_LOGS = 10;
+
+const PORT = 4000;
+
+function parseArg(args: string[], ...flags: string[]): string | undefined {
+  const index = args.findIndex((a) => flags.includes(a));
+  return index !== -1 ? args[index + 1] : undefined;
+}
+
+export function StartCommand({ args }: StartCommandProps) {
+  const { exit } = useApp();
+  const [state, setState] = useState<ServerState>({ status: "initializing" });
+  const [components, setComponents] = useState<ComponentInfo[]>([]);
+  const [logs, setLogs] = useState<RequestLog[]>([]);
+  const [buildCount, setBuildCount] = useState(0);
+  const [lastBuildTime, setLastBuildTime] = useState<Date | null>(null);
+  const logIdRef = useRef(0);
+  const ctxRef = useRef<BuildContext | null>(null);
+  const stopRef = useRef<(() => Promise<void>) | null>(null);
+
+  // Parse args
+  const stage = resolveStage(parseArg(args, "--stage", "-s"));
+
+  const addLog = useCallback((log: Omit<RequestLog, "id" | "timestamp">) => {
+    setLogs((prev) => {
+      const newLog = {
+        ...log,
+        id: ++logIdRef.current,
+        timestamp: new Date(),
+      };
+      return [...prev.slice(-(MAX_LOGS - 1)), newLog];
+    });
+  }, []);
+
+  const handleRequest = useCallback(
+    (args: ServeOnRequestArgs) => {
+      addLog({
+        method: args.method,
+        path: args.path,
+        status: args.status,
+        time: args.timeInMS,
+      });
+    },
+    [addLog],
+  );
+
+  // Initialize server
+  useEffect(() => {
+    let mounted = true;
+
+    async function init() {
+      try {
+        // Check config
+        const config = await loadConfig({ stage });
+        if (!config?.storeId) {
+          const configFile =
+            stage && stage !== "prod" ? `ollie.${stage}.json` : "ollie.json";
+          setState({
+            status: "error",
+            message: `No ${configFile} found or storeId is missing. Run this command in a project directory.`,
+          });
+          return;
+        }
+
+        if (!mounted) return;
+        setState({ status: "discovering" });
+
+        // Discover components
+        const found = await discoverComponents({ stage });
+        if (!mounted) return;
+
+        if (found.length === 0) {
+          setState({
+            status: "error",
+            message:
+              "No components found. Create components in ./components/<name>/index.tsx",
+          });
+          return;
+        }
+
+        setComponents(found);
+        setState({ status: "building" });
+
+        // Create build context with discovered components
+        const ctx = await createBuildContext(found, {
+          stage,
+          onBuildEnd: (updatedComponents) => {
+            setComponents(updatedComponents);
+            setBuildCount((c) => c + 1);
+            setLastBuildTime(new Date());
+          },
+        });
+        ctxRef.current = ctx;
+
+        // Do initial build (manifest is written by the plugin)
+        await ctx.rebuild();
+
+        if (!mounted) return;
+
+        // Start dev server
+        const server = await startDevServer(ctx, {
+          port: PORT,
+          onRequest: handleRequest,
+        });
+
+        stopRef.current = server.stop;
+
+        if (!mounted) {
+          await server.stop();
+          return;
+        }
+
+        setState({
+          status: "running",
+          host: server.host,
+          port: server.port,
+          storeId: config.storeId,
+          versionId: config.versionId,
+        });
+
+        // Open Studio in browser
+        const studioUrl = new URL(STUDIO_BASE_URL);
+        studioUrl.searchParams.set("storeId", config.storeId);
+        if (config.versionId) {
+          studioUrl.searchParams.set("versionId", config.versionId);
+        }
+        open(studioUrl.toString());
+      } catch (error) {
+        if (!mounted) return;
+        setState({
+          status: "error",
+          message: error instanceof Error ? error.message : "Unknown error",
+        });
+      }
+    }
+
+    init();
+
+    return () => {
+      mounted = false;
+      stopRef.current?.();
+    };
+  }, [stage, handleRequest]);
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (input === "q" || (input === "c" && key.ctrl)) {
+      stopRef.current?.().then(() => exit());
+    }
+
+    // Manual rebuild with 'r' (manifest is updated by the plugin)
+    if (input === "r" && state.status === "running") {
+      ctxRef.current?.rebuild();
+    }
+
+    // Open Studio in browser with 'o'
+    if (input === "o" && state.status === "running") {
+      const studioUrl = new URL(STUDIO_BASE_URL);
+      studioUrl.searchParams.set("storeId", state.storeId);
+      if (state.versionId) {
+        studioUrl.searchParams.set("versionId", state.versionId);
+      }
+      open(studioUrl.toString());
+    }
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Header />
+
+      {state.status === "initializing" && (
+        <Box>
+          <Text color="yellow">⏳ </Text>
+          <Text>Initializing...</Text>
+        </Box>
+      )}
+
+      {state.status === "discovering" && (
+        <Box>
+          <Text color="yellow">🔍 </Text>
+          <Text>Discovering components...</Text>
+        </Box>
+      )}
+
+      {state.status === "building" && (
+        <Box>
+          <Text color="yellow">🔨 </Text>
+          <Text>Building {components.length} component(s)...</Text>
+        </Box>
+      )}
+
+      {state.status === "error" && (
+        <Box flexDirection="column" gap={1}>
+          <Box>
+            <Text color="red">✗ </Text>
+            <Text color="red">{state.message}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {state.status === "running" && (
+        <>
+          <ServerInfo
+            host={state.host}
+            port={state.port}
+            stage={stage}
+            storeId={state.storeId}
+            versionId={state.versionId}
+          />
+          <ComponentList components={components} />
+          <BuildInfo buildCount={buildCount} lastBuildTime={lastBuildTime} />
+          <RequestLogs logs={logs} />
+          <Footer />
+        </>
+      )}
+    </Box>
+  );
+}
+
+function Header() {
+  return (
+    <Box borderStyle="round" borderColor="cyan" paddingX={2}>
+      <Text bold color="cyan">
+        Ollie Studio
+      </Text>
+      <Text dimColor> - Development Server</Text>
+    </Box>
+  );
+}
+
+function ServerInfo({
+  host,
+  port,
+  stage,
+  storeId,
+  versionId,
+}: {
+  host: string;
+  port: number;
+  stage?: string;
+  storeId: string;
+  versionId?: string;
+}) {
+  const studioUrl = new URL(STUDIO_BASE_URL);
+
+  studioUrl.searchParams.set("storeId", storeId);
+  if (versionId) {
+    studioUrl.searchParams.set("versionId", versionId);
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="green">✓ </Text>
+        <Text>Server running at </Text>
+        <Text bold color="cyan">
+          http://{host}:{port}
+        </Text>
+        {stage && (
+          <>
+            <Text> </Text>
+            <Text dimColor>[stage: </Text>
+            <Text color="yellow">{stage}</Text>
+            <Text dimColor>]</Text>
+          </>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text color="green">✓ </Text>
+        <Text>Studio: </Text>
+        <Text bold color="magenta">
+          {studioUrl.toString()}
+        </Text>
+      </Box>
+      <Box marginLeft={2} marginTop={1}>
+        <Text dimColor>
+          Components: http://{host}:{port}/{"<name>"}/index.js
+        </Text>
+      </Box>
+      <Box marginLeft={2}>
+        <Text dimColor>
+          Events: http://{host}:{port}/esbuild
+        </Text>
+      </Box>
+      <Box marginLeft={2}>
+        <Text dimColor>
+          Bundle: http://{host}:{port}/bundle?path=/{"<name>"}/index.js
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function ComponentList({ components }: { components: ComponentInfo[] }) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text bold>Components ({components.length}):</Text>
+      <Box marginLeft={2} flexDirection="column">
+        {components.map((c) => (
+          <Box key={c.name}>
+            <Text color="green">• </Text>
+            <Text>{c.name}</Text>
+            <Text dimColor> → /{c.name}/index.js</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+function BuildInfo({
+  buildCount,
+  lastBuildTime,
+}: {
+  buildCount: number;
+  lastBuildTime: Date | null;
+}) {
+  return (
+    <Box marginTop={1}>
+      <Text dimColor>
+        Builds: {buildCount}
+        {lastBuildTime && ` | Last: ${lastBuildTime.toLocaleTimeString()}`}
+      </Text>
+    </Box>
+  );
+}
+
+function RequestLogs({ logs }: { logs: RequestLog[] }) {
+  if (logs.length === 0) {
+    return (
+      <Box marginTop={1} flexDirection="column">
+        <Text bold>Request Log:</Text>
+        <Box marginLeft={2}>
+          <Text dimColor>No requests yet...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Text bold>Request Log:</Text>
+      <Box marginLeft={2} flexDirection="column">
+        {logs.map((log) => (
+          <Box key={log.id}>
+            <Text color={log.status < 400 ? "green" : "red"}>
+              {log.status}{" "}
+            </Text>
+            <Text>{log.method} </Text>
+            <Text dimColor>{log.path}</Text>
+            <Text dimColor> ({log.time}ms)</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+function Footer() {
+  return (
+    <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+      <Text dimColor>Press </Text>
+      <Text bold>q</Text>
+      <Text dimColor> to quit | </Text>
+      <Text bold>r</Text>
+      <Text dimColor> to rebuild | </Text>
+      <Text bold>o</Text>
+      <Text dimColor> to open Studio</Text>
+    </Box>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import { render } from "ink";
+import { App } from "./cli.js";
+
+const args = process.argv.slice(2);
+const command = args[0] || "help";
+const commandArgs = args.slice(1);
+
+render(<App command={command} args={commandArgs} />);

package/src/utils/auth.ts

@@ -1,40 +1,237 @@
+import { randomBytes } from "node:crypto";
 import fs from "node:fs/promises";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { createServer } from "node:http";
 import { homedir } from "node:os";
 import path from "node:path";
 import { jwtDecode } from "jwt-decode";
 
-const CREDENTIALS_PATH = path.join(
-  homedir(),
-  ".ollie-shop",
-  "credentials.json",
-);
+const AUTH_ENDPOINT = "https://admin.ollie.shop/auth/login";
+const CONFIG_DIR = path.join(homedir(), ".ollie-shop");
+const CREDENTIALS_PATH = path.join(CONFIG_DIR, "credentials.json");
 
-type Token = {
+export interface AuthToken {
   accessToken: string;
-  refreshToken?: string;
-  expiresAt?: string;
-};
+  refreshToken: string;
+  expiresAt: string;
+  email?: string;
+}
+
+export interface Credentials {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: string;
+}
 
-type DecodedToken = {
+interface JwtPayload {
   email?: string;
-  exp?: number;
   sub?: string;
-  iat?: number;
-  [key: string]: unknown;
-};
+  exp?: number;
+}
 
-export async function getCurrentUser(): Promise<{ email?: string } | null> {
-  try {
-    const raw = await fs.readFile(CREDENTIALS_PATH, "utf-8");
-    const token: Token = JSON.parse(raw);
+export async function startWebAuthFlow(options: {
+  port: number;
+}): Promise<AuthToken | null> {
+  const { default: open } = await import("open");
+  const state = randomBytes(16).toString("hex");
+  const { port } = options;
+
+  return new Promise<AuthToken | null>((resolve, reject) => {
+    const server = createServer(async (req, res) => {
+      try {
+        const url = new URL(req.url || "/", `http://localhost:${port}`);
+
+        if (url.pathname === "/callback") {
+          await handleAuthCallback(req, res, state, resolve, reject, server);
+        } else {
+          sendWaitingResponse(res);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Unknown error";
+        sendErrorResponse(res, 500, "Server Error", errorMessage);
+        server.close(() => reject(new Error(errorMessage)));
+      }
+    });
+
+    server.listen(port, async () => {
+      const redirectUrl = `http://localhost:${port}/callback`;
+      const authUrl = new URL(AUTH_ENDPOINT);
 
-    if (!token.accessToken) return null;
+      authUrl.searchParams.set("flow", "cli");
+      authUrl.searchParams.set("state", state);
+      authUrl.searchParams.set("redirect_to", redirectUrl);
 
-    const decoded = jwtDecode<DecodedToken>(token.accessToken);
+      await open(authUrl.toString());
+    });
+
+    server.on("error", (err: NodeJS.ErrnoException) => {
+      if (err.code === "EADDRINUSE") {
+        reject(
+          new Error(
+            `Port ${port} is already in use. Try --port <number> to use a different port.`,
+          ),
+        );
+      } else {
+        reject(err);
+      }
+      server.close();
+    });
+
+    // 5 minute timeout
+    const timeoutId = setTimeout(
+      () => {
+        server.close(() => {
+          reject(new Error("Authentication timed out. Please try again."));
+        });
+      },
+      5 * 60 * 1000,
+    );
+
+    server.on("close", () => {
+      clearTimeout(timeoutId);
+    });
+  });
+}
+
+async function handleAuthCallback(
+  req: IncomingMessage,
+  res: ServerResponse,
+  state: string,
+  resolve: (token: AuthToken | null) => void,
+  reject: (err: Error) => void,
+  server: ReturnType<typeof createServer>,
+): Promise<void> {
+  const socket = req.socket as { localPort?: number };
+  const url = new URL(
+    req.url || "/",
+    `http://localhost:${socket.localPort || 3000}`,
+  );
+  const params = url.searchParams;
+
+  const returnedState = params.get("state");
+  if (returnedState !== state) {
+    sendErrorResponse(res, 400, "Invalid state parameter", "Please try again.");
+    reject(new Error("Invalid state parameter"));
+    return;
+  }
+
+  let formData = "";
+  req.on("data", (chunk) => {
+    formData += chunk.toString();
+  });
+
+  await new Promise<void>((formResolve) => {
+    req.on("end", () => formResolve());
+  });
+
+  const formParams = new URLSearchParams(formData);
+  const accessToken = formParams.get("access_token");
+  const refreshToken = formParams.get("refresh_token") || "";
+  const expiresAt =
+    formParams.get("expires_at") ||
+    new Date(Date.now() + 3600000).toISOString();
+
+  if (!accessToken) {
+    sendErrorResponse(res, 400, "Missing token", "Authentication failed.");
+    reject(new Error("Missing authentication token"));
+    return;
+  }
 
-    return {
+  try {
+    const decoded = jwtDecode<JwtPayload>(accessToken);
+    const token: AuthToken = {
+      accessToken,
+      refreshToken,
+      expiresAt,
       email: decoded.email,
     };
+
+    sendSuccessResponse(res);
+    server.close(() => resolve(token));
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error";
+    sendErrorResponse(res, 500, "Authentication failed", errorMessage);
+    server.close(() => reject(new Error(errorMessage)));
+  }
+}
+
+function sendErrorResponse(
+  res: ServerResponse,
+  statusCode: number,
+  title: string,
+  message: string,
+): void {
+  res.writeHead(statusCode, { "Content-Type": "text/html" });
+  res.end(`
+    <!DOCTYPE html>
+    <html>
+      <head><title>Ollie CLI - Error</title></head>
+      <body style="font-family: system-ui; padding: 40px; text-align: center;">
+        <h1 style="color: #dc2626;">${title}</h1>
+        <p>${message}</p>
+      </body>
+    </html>
+  `);
+}
+
+function sendSuccessResponse(res: ServerResponse): void {
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(`
+    <!DOCTYPE html>
+    <html>
+      <head><title>Ollie CLI - Success</title></head>
+      <body style="font-family: system-ui; padding: 40px; text-align: center;">
+        <h1 style="color: #16a34a;">Authentication Successful!</h1>
+        <p>You can close this window and return to the CLI.</p>
+      </body>
+    </html>
+  `);
+}
+
+function sendWaitingResponse(res: ServerResponse): void {
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(`
+    <!DOCTYPE html>
+    <html>
+      <head><title>Ollie CLI</title></head>
+      <body style="font-family: system-ui; padding: 40px; text-align: center;">
+        <h1>Ollie CLI Authentication</h1>
+        <p>Waiting for authentication response...</p>
+      </body>
+    </html>
+  `);
+}
+
+export async function saveCredentials(token: AuthToken): Promise<void> {
+  await fs.mkdir(CONFIG_DIR, { recursive: true });
+
+  const credentials: Credentials = {
+    accessToken: token.accessToken,
+    refreshToken: token.refreshToken,
+    expiresAt: token.expiresAt,
+  };
+
+  await fs.writeFile(CREDENTIALS_PATH, JSON.stringify(credentials, null, 2));
+}
+
+export async function getCredentials(): Promise<Credentials | null> {
+  try {
+    const content = await fs.readFile(CREDENTIALS_PATH, "utf-8");
+    return JSON.parse(content) as Credentials;
+  } catch {
+    return null;
+  }
+}
+
+export async function getCurrentUser(): Promise<{ email: string } | null> {
+  const credentials = await getCredentials();
+  if (!credentials) return null;
+
+  try {
+    const decoded = jwtDecode<JwtPayload>(credentials.accessToken);
+    return decoded.email ? { email: decoded.email } : null;
   } catch {
     return null;
   }