@opendocsdev/cli 0.2.0

package/src/engine/src/components/react/ApiPlayground/generators.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect } from "vitest";
+import { generators, getLanguageForHighlighter } from "./generators";
+
+describe("generators", () => {
+  const url = "https://api.example.com/users/123";
+  const headers = {
+    "Content-Type": "application/json",
+    Authorization: "Bearer token123",
+  };
+  const body = '{"name": "John", "email": "john@example.com"}';
+
+  describe("curl", () => {
+    it("generates POST request with headers and body", () => {
+      const result = generators.curl("POST", url, headers, body);
+      expect(result).toContain("curl");
+      expect(result).toContain("-X POST");
+      expect(result).toContain(`'${url}'`);
+      expect(result).toContain("-H 'Content-Type: application/json'");
+      expect(result).toContain("-H 'Authorization: Bearer token123'");
+      expect(result).toContain("-d '{\"name\": \"John\", \"email\": \"john@example.com\"}'");
+    });
+
+    it("generates GET request without -X flag", () => {
+      const result = generators.curl("GET", url, headers);
+      expect(result).toContain("curl");
+      expect(result).not.toContain("-X GET");
+      expect(result).toContain(`'${url}'`);
+    });
+
+    it("generates simple GET as single line", () => {
+      const result = generators.curl("GET", url, {});
+      expect(result).toBe(`curl '${url}'`);
+      expect(result).not.toContain("\\");
+    });
+
+    it("omits body when not provided", () => {
+      const result = generators.curl("POST", url, headers);
+      expect(result).not.toContain("-d");
+    });
+
+    it("escapes single quotes in URL", () => {
+      const urlWithQuote = "https://api.example.com/users?name=O'Brien";
+      const result = generators.curl("GET", urlWithQuote, {});
+      expect(result).toContain("O'\\''Brien");
+    });
+
+    it("handles empty headers", () => {
+      const result = generators.curl("GET", url, {});
+      expect(result).not.toContain("-H");
+    });
+
+    it("generates multi-line for POST with body", () => {
+      const result = generators.curl("POST", url, {}, body);
+      expect(result).toContain("curl \\\n");
+      expect(result).toContain("-X POST");
+      expect(result).toContain("-d");
+    });
+  });
+
+  describe("javascript", () => {
+    it("generates fetch with headers and body", () => {
+      const result = generators.javascript("POST", url, headers, body);
+      expect(result).toContain("await fetch");
+      expect(result).toContain(`'${url}'`);
+      expect(result).toContain("method: 'POST'");
+      expect(result).toContain("headers:");
+      expect(result).toContain("'Content-Type': 'application/json'");
+      expect(result).toContain("body: JSON.stringify");
+      expect(result).toContain("await response.json()");
+    });
+
+    it("generates fetch without body for GET", () => {
+      const result = generators.javascript("GET", url, headers);
+      expect(result).toContain("method: 'GET'");
+      expect(result).not.toContain("body:");
+    });
+
+    it("omits headers when empty", () => {
+      const result = generators.javascript("GET", url, {});
+      expect(result).not.toContain("headers:");
+    });
+  });
+
+  describe("python", () => {
+    it("generates requests call with headers and body", () => {
+      const result = generators.python("POST", url, headers, body);
+      expect(result).toContain("import requests");
+      expect(result).toContain("headers = {");
+      expect(result).toContain("'Content-Type': 'application/json'");
+      expect(result).toContain("json_data =");
+      expect(result).toContain("requests.post(");
+      expect(result).toContain("headers=headers");
+      expect(result).toContain("json=json_data");
+      expect(result).toContain("print(response.json())");
+    });
+
+    it("uses correct method name", () => {
+      expect(generators.python("GET", url, {})).toContain("requests.get(");
+      expect(generators.python("PUT", url, {})).toContain("requests.put(");
+      expect(generators.python("DELETE", url, {})).toContain("requests.delete(");
+      expect(generators.python("PATCH", url, {})).toContain("requests.patch(");
+    });
+
+    it("omits headers when empty", () => {
+      const result = generators.python("GET", url, {});
+      expect(result).not.toContain("headers = {");
+      expect(result).not.toContain("headers=headers");
+    });
+
+    it("omits body when not provided", () => {
+      const result = generators.python("POST", url, headers);
+      expect(result).not.toContain("json_data");
+      expect(result).not.toContain("json=json_data");
+    });
+  });
+});
+
+describe("getLanguageForHighlighter", () => {
+  it("maps curl to bash", () => {
+    expect(getLanguageForHighlighter("curl")).toBe("bash");
+  });
+
+  it("maps javascript to javascript", () => {
+    expect(getLanguageForHighlighter("javascript")).toBe("javascript");
+  });
+
+  it("maps python to python", () => {
+    expect(getLanguageForHighlighter("python")).toBe("python");
+  });
+});

package/src/engine/src/components/react/ApiPlayground/generators.ts

@@ -0,0 +1,75 @@
+type GeneratorFn = (
+  method: string,
+  url: string,
+  headers: Record<string, string>,
+  body?: string
+) => string;
+
+const escapeShell = (s: string) => s.replace(/'/g, "'\\''");
+
+export const generators: Record<"curl" | "javascript" | "python", GeneratorFn> = {
+  curl: (method, url, headers, body) => {
+    const parts: string[] = [];
+    if (method !== "GET") parts.push(`-X ${method}`);
+    parts.push(`'${escapeShell(url)}'`);
+    for (const [k, v] of Object.entries(headers)) {
+      parts.push(`-H '${escapeShell(k)}: ${escapeShell(v)}'`);
+    }
+    if (body?.trim()) {
+      parts.push(`-d '${escapeShell(body)}'`);
+    }
+    // Single line for simple requests, multi-line for complex ones
+    if (parts.length === 1) {
+      return `curl ${parts[0]}`;
+    }
+    return `curl \\\n  ${parts.join(" \\\n  ")}`;
+  },
+
+  javascript: (method, url, headers, body) => {
+    const hasHeaders = Object.keys(headers).length > 0;
+    const hasBody = body?.trim();
+    let code = `const response = await fetch('${url}', {\n`;
+    code += `  method: '${method}',\n`;
+    if (hasHeaders) {
+      code += `  headers: {\n`;
+      for (const [k, v] of Object.entries(headers)) {
+        code += `    '${k}': '${v}',\n`;
+      }
+      code += `  },\n`;
+    }
+    if (hasBody) {
+      code += `  body: JSON.stringify(${body}),\n`;
+    }
+    code += `});\n\n`;
+    code += `const data = await response.json();\n`;
+    code += `console.log(data);`;
+    return code;
+  },
+
+  python: (method, url, headers, body) => {
+    const lines = ["import requests", ""];
+    if (Object.keys(headers).length > 0) {
+      lines.push("headers = {");
+      for (const [k, v] of Object.entries(headers)) {
+        lines.push(`    '${k}': '${v}',`);
+      }
+      lines.push("}", "");
+    }
+    if (body?.trim()) {
+      lines.push(`json_data = ${body}`, "");
+    }
+    const args = [`'${url}'`];
+    if (Object.keys(headers).length > 0) args.push("headers=headers");
+    if (body?.trim()) args.push("json=json_data");
+    lines.push(`response = requests.${method.toLowerCase()}(`);
+    lines.push(`    ${args.join(",\n    ")}`);
+    lines.push(`)`, "");
+    lines.push(`print(response.json())`);
+    return lines.join("\n");
+  },
+};
+
+export const getLanguageForHighlighter = (lang: "curl" | "javascript" | "python"): string => {
+  const map = { curl: "bash", javascript: "javascript", python: "python" };
+  return map[lang];
+};

package/src/engine/src/components/react/ApiPlayground/index.tsx

@@ -0,0 +1,490 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import type {
+  ApiPlaygroundProps,
+  AuthState,
+  KeyValue,
+  ResponseState,
+  ErrorState,
+  CodeLanguage,
+} from "./types";
+import {
+  METHOD_COLORS,
+  AUTH_STORAGE_PREFIX,
+  DEFAULT_AUTH_STATE,
+} from "./constants";
+import { generators } from "./generators";
+import { Spinner } from "./Spinner";
+import { CollapsibleSection } from "./CollapsibleSection";
+import { KeyValueEditor } from "./KeyValueEditor";
+import { AuthSection } from "./AuthSection";
+import { CodeSnippets } from "./CodeSnippets";
+import { ResponseDisplay } from "./ResponseDisplay";
+
+const EMPTY_HEADERS: Record<string, string> = {};
+const EMPTY_PARAMS: Record<string, string> = {};
+
+export default function ApiPlayground({
+  endpoint,
+  method,
+  baseUrl,
+  defaultHeaders = EMPTY_HEADERS,
+  defaultBody,
+  defaultParams = EMPTY_PARAMS,
+}: ApiPlaygroundProps) {
+  const pathParams = useMemo(
+    () => (endpoint.match(/\{(\w+)\}/g) || []).map((p) => p.slice(1, -1)),
+    [endpoint],
+  );
+  const methodUpper = method.toUpperCase();
+  const supportsBody = ["POST", "PUT", "PATCH", "DELETE"].includes(methodUpper);
+
+  const [currentBaseUrl, setCurrentBaseUrl] = useState(baseUrl);
+  const [pathParamValues, setPathParamValues] = useState<
+    Record<string, string>
+  >(() => {
+    const initial: Record<string, string> = {};
+    pathParams.forEach((p) => (initial[p] = defaultParams[p] || ""));
+    return initial;
+  });
+  const [queryParams, setQueryParams] = useState<KeyValue[]>(() =>
+    Object.entries(defaultParams)
+      .filter(([key]) => !pathParams.includes(key))
+      .map(([key, value]) => ({ key, value })),
+  );
+  const [headers, setHeaders] = useState<KeyValue[]>(() => {
+    const initial = Object.entries(defaultHeaders).map(([key, value]) => ({
+      key,
+      value,
+    }));
+    if (supportsBody && !defaultHeaders["Content-Type"]) {
+      initial.unshift({ key: "Content-Type", value: "application/json" });
+    }
+    return initial;
+  });
+  const [requestBody, setRequestBody] = useState(() => {
+    if (!defaultBody) return "";
+    return typeof defaultBody === "string"
+      ? defaultBody
+      : JSON.stringify(defaultBody, null, 2);
+  });
+  const [isBodyValid, setIsBodyValid] = useState(true);
+  const [authState, setAuthState] = useState<AuthState>(() => ({
+    ...DEFAULT_AUTH_STATE,
+  }));
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [response, setResponse] = useState<ResponseState | null>(null);
+  const [error, setError] = useState<ErrorState | null>(null);
+  const [currentLang, setCurrentLang] = useState<CodeLanguage>("curl");
+
+  const [expandedSections, setExpandedSections] = useState({
+    pathParams: pathParams.length > 0,
+    queryParams: false,
+    headers: false,
+    body: true,
+    auth: false,
+  });
+
+  useEffect(() => {
+    try {
+      const storage = localStorage;
+      const savedType = storage.getItem(AUTH_STORAGE_PREFIX + "type") as
+        | AuthState["type"]
+        | null;
+      if (
+        savedType &&
+        ["none", "bearer", "apikey", "basic"].includes(savedType)
+      ) {
+        setAuthState({
+          type: savedType,
+          bearer: {
+            token: storage.getItem(AUTH_STORAGE_PREFIX + "bearer_token") || "",
+          },
+          apikey: {
+            name: storage.getItem(AUTH_STORAGE_PREFIX + "apikey_name") || "",
+            value: storage.getItem(AUTH_STORAGE_PREFIX + "apikey_value") || "",
+            location:
+              (storage.getItem(AUTH_STORAGE_PREFIX + "apikey_location") as
+                | "header"
+                | "query") || "header",
+          },
+          basic: {
+            username:
+              storage.getItem(AUTH_STORAGE_PREFIX + "basic_username") || "",
+            password:
+              storage.getItem(AUTH_STORAGE_PREFIX + "basic_password") || "",
+          },
+        });
+      }
+    } catch {
+      // localStorage may not be available (SSR, private browsing, etc.)
+    }
+  }, []);
+
+  const saveAuth = useCallback((newAuth: AuthState) => {
+    setAuthState(newAuth);
+    try {
+      const storage = localStorage;
+      storage.setItem(AUTH_STORAGE_PREFIX + "type", newAuth.type);
+      storage.setItem(
+        AUTH_STORAGE_PREFIX + "bearer_token",
+        newAuth.bearer.token,
+      );
+      storage.setItem(AUTH_STORAGE_PREFIX + "apikey_name", newAuth.apikey.name);
+      storage.setItem(
+        AUTH_STORAGE_PREFIX + "apikey_value",
+        newAuth.apikey.value,
+      );
+      storage.setItem(
+        AUTH_STORAGE_PREFIX + "apikey_location",
+        newAuth.apikey.location,
+      );
+      storage.setItem(
+        AUTH_STORAGE_PREFIX + "basic_username",
+        newAuth.basic.username,
+      );
+      storage.setItem(
+        AUTH_STORAGE_PREFIX + "basic_password",
+        newAuth.basic.password,
+      );
+    } catch {
+      // localStorage not available
+    }
+  }, []);
+
+  const processedEndpoint = useMemo(() => {
+    let processed = endpoint;
+    Object.entries(pathParamValues).forEach(([param, value]) => {
+      if (value)
+        processed = processed.replace(`{${param}}`, encodeURIComponent(value));
+    });
+    return processed;
+  }, [endpoint, pathParamValues]);
+
+  const queryString = useMemo(() => {
+    const params = new URLSearchParams();
+    queryParams.forEach((p) => {
+      if (p.key && p.value) params.append(p.key, p.value);
+    });
+    if (
+      authState.type === "apikey" &&
+      authState.apikey.location === "query" &&
+      authState.apikey.name &&
+      authState.apikey.value
+    ) {
+      params.append(authState.apikey.name, authState.apikey.value);
+    }
+    const str = params.toString();
+    return str ? `?${str}` : "";
+  }, [queryParams, authState]);
+
+  const requestHeaders = useMemo(() => {
+    const reqHeaders: Record<string, string> = {};
+    headers.forEach((h) => {
+      if (h.key && h.value) reqHeaders[h.key] = h.value;
+    });
+    if (authState.type === "bearer" && authState.bearer.token) {
+      reqHeaders["Authorization"] = `Bearer ${authState.bearer.token}`;
+    } else if (
+      authState.type === "apikey" &&
+      authState.apikey.location === "header" &&
+      authState.apikey.name &&
+      authState.apikey.value
+    ) {
+      reqHeaders[authState.apikey.name] = authState.apikey.value;
+    } else if (authState.type === "basic" && authState.basic.username) {
+      reqHeaders["Authorization"] = `Basic ${btoa(
+        `${authState.basic.username}:${authState.basic.password}`,
+      )}`;
+    }
+    return reqHeaders;
+  }, [headers, authState]);
+
+  const fullUrl = currentBaseUrl + processedEndpoint + queryString;
+
+  const codeSnippet = useMemo(() => {
+    const body = supportsBody ? requestBody : undefined;
+    return generators[currentLang](methodUpper, fullUrl, requestHeaders, body);
+  }, [
+    currentLang,
+    methodUpper,
+    fullUrl,
+    requestHeaders,
+    supportsBody,
+    requestBody,
+  ]);
+
+  const sendRequest = async () => {
+    setIsLoading(true);
+    setError(null);
+    setResponse(null);
+    const startTime = performance.now();
+
+    try {
+      const fetchOptions: RequestInit = {
+        method: methodUpper,
+        headers: requestHeaders,
+      };
+      if (supportsBody && requestBody.trim()) fetchOptions.body = requestBody;
+
+      const res = await fetch(fullUrl, fetchOptions);
+      const endTime = performance.now();
+      const text = await res.text();
+      const resHeaders: Record<string, string> = {};
+      res.headers.forEach((value, key) => (resHeaders[key] = value));
+
+      setResponse({
+        status: res.status,
+        statusText: res.statusText,
+        body: text,
+        headers: resHeaders,
+        time: Math.round(endTime - startTime),
+      });
+    } catch (err) {
+      if (err instanceof TypeError && err.message.includes("Failed to fetch")) {
+        setError({
+          title: "Network Error",
+          message:
+            "Failed to fetch. This could be a CORS issue. Make sure the API server has proper CORS headers configured.",
+        });
+      } else {
+        setError({
+          title: "Error",
+          message:
+            err instanceof Error ? err.message : "An unknown error occurred",
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const validateBody = (value: string) => {
+    if (!value.trim()) {
+      setIsBodyValid(true);
+      return;
+    }
+    try {
+      JSON.parse(value);
+      setIsBodyValid(true);
+    } catch {
+      setIsBodyValid(false);
+    }
+  };
+
+  const formatBody = () => {
+    try {
+      const parsed = JSON.parse(requestBody);
+      setRequestBody(JSON.stringify(parsed, null, 2));
+      setIsBodyValid(true);
+    } catch {
+      setIsBodyValid(false);
+    }
+  };
+
+  const resetDefaults = () => {
+    setCurrentBaseUrl(baseUrl);
+    const initialPathParams: Record<string, string> = {};
+    pathParams.forEach((p) => (initialPathParams[p] = defaultParams[p] || ""));
+    setPathParamValues(initialPathParams);
+    setQueryParams(
+      Object.entries(defaultParams)
+        .filter(([key]) => !pathParams.includes(key))
+        .map(([key, value]) => ({ key, value })),
+    );
+    const initialHeaders = Object.entries(defaultHeaders).map(
+      ([key, value]) => ({ key, value }),
+    );
+    if (supportsBody && !defaultHeaders["Content-Type"]) {
+      initialHeaders.unshift({
+        key: "Content-Type",
+        value: "application/json",
+      });
+    }
+    setHeaders(initialHeaders);
+    setRequestBody(
+      defaultBody
+        ? typeof defaultBody === "string"
+          ? defaultBody
+          : JSON.stringify(defaultBody, null, 2)
+        : "",
+    );
+    setIsBodyValid(true);
+  };
+
+  const toggleSection = (section: keyof typeof expandedSections) => {
+    setExpandedSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  return (
+    <div className="api-playground my-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden max-w-full">
+      <div className="px-3 sm:px-4 py-3 bg-[var(--color-surface-raised)] border-b border-[var(--color-border)]">
+        <h3 className="text-sm font-semibold text-[var(--color-foreground)] m-0">
+          API Playground
+        </h3>
+      </div>
+
+      <div className="p-3 sm:p-4 border-b border-[var(--color-border)] max-w-full overflow-hidden">
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          <span
+            className={`px-2 py-1 text-xs font-mono font-bold rounded uppercase flex-shrink-0 ${
+              METHOD_COLORS[methodUpper] ||
+              "bg-[var(--color-surface-raised)] text-[var(--color-muted)]"
+            }`}
+          >
+            {method}
+          </span>
+          <code className="text-xs sm:text-sm font-mono text-[var(--color-muted)] break-all">
+            {endpoint}
+          </code>
+        </div>
+
+        <div className="mb-3">
+          <label className="block text-xs font-medium text-[var(--color-muted)] mb-1">
+            Base URL
+          </label>
+          <input
+            type="text"
+            value={currentBaseUrl}
+            onChange={(e) => setCurrentBaseUrl(e.target.value)}
+            className="w-full px-3 py-2 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-xs font-medium text-[var(--color-muted)] mb-1">
+            Full URL Preview
+          </label>
+          <div className="px-3 py-2 text-xs sm:text-sm font-mono bg-[var(--color-surface-raised)] border border-[var(--color-border)] rounded-md text-[var(--color-muted)] overflow-x-auto">
+            <span className="break-all">{fullUrl}</span>
+          </div>
+        </div>
+
+        {pathParams.length > 0 && (
+          <CollapsibleSection
+            title="Path Parameters"
+            expanded={expandedSections.pathParams}
+            onToggle={() => toggleSection("pathParams")}
+          >
+            <div className="space-y-3">
+              {pathParams.map((param) => (
+                <div
+                  key={param}
+                  className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2"
+                >
+                  <label className="text-xs font-mono text-[var(--color-muted)] sm:w-24 flex-shrink-0">{`{${param}}`}</label>
+                  <input
+                    type="text"
+                    value={pathParamValues[param] || ""}
+                    onChange={(e) =>
+                      setPathParamValues((prev) => ({
+                        ...prev,
+                        [param]: e.target.value,
+                      }))
+                    }
+                    placeholder={`Enter ${param}`}
+                    className="flex-1 px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+                  />
+                </div>
+              ))}
+            </div>
+          </CollapsibleSection>
+        )}
+
+        <CollapsibleSection
+          title="Query Parameters"
+          expanded={expandedSections.queryParams}
+          onToggle={() => toggleSection("queryParams")}
+        >
+          <KeyValueEditor
+            items={queryParams}
+            onChange={setQueryParams}
+            keyPlaceholder="Parameter name"
+            valuePlaceholder="Value"
+          />
+        </CollapsibleSection>
+
+        <CollapsibleSection
+          title="Headers"
+          expanded={expandedSections.headers}
+          onToggle={() => toggleSection("headers")}
+        >
+          <KeyValueEditor
+            items={headers}
+            onChange={setHeaders}
+            keyPlaceholder="Header name"
+            valuePlaceholder="Value"
+          />
+        </CollapsibleSection>
+
+        {supportsBody && (
+          <CollapsibleSection
+            title="Request Body"
+            expanded={expandedSections.body}
+            onToggle={() => toggleSection("body")}
+          >
+            <div className="space-y-2">
+              <textarea
+                value={requestBody}
+                onChange={(e) => setRequestBody(e.target.value)}
+                onBlur={() => validateBody(requestBody)}
+                placeholder='{"key": "value"}'
+                className="w-full h-32 px-3 py-2 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono resize-y"
+              />
+              {!isBodyValid && (
+                <p className="text-xs text-[var(--color-error)]">
+                  Invalid JSON
+                </p>
+              )}
+              <button
+                type="button"
+                onClick={formatBody}
+                className="text-sm text-[var(--color-primary)] hover:underline"
+              >
+                Format JSON
+              </button>
+            </div>
+          </CollapsibleSection>
+        )}
+
+        <CollapsibleSection
+          title="Authentication"
+          expanded={expandedSections.auth}
+          onToggle={() => toggleSection("auth")}
+        >
+          <AuthSection authState={authState} onAuthChange={saveAuth} />
+        </CollapsibleSection>
+
+        <div className="mt-4 flex flex-col sm:flex-row gap-2 sm:gap-3">
+          <button
+            type="button"
+            onClick={sendRequest}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-[var(--color-primary-foreground)] bg-[var(--color-primary)] hover:opacity-90 rounded-md disabled:opacity-50 flex items-center justify-center gap-2"
+          >
+            {isLoading && <Spinner />}
+            {isLoading ? "Sending..." : "Send Request"}
+          </button>
+          <button
+            type="button"
+            onClick={resetDefaults}
+            className="px-4 py-2 text-sm font-medium text-[var(--color-muted)] bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-sunken)] rounded-md border border-[var(--color-border)]"
+          >
+            Reset to Defaults
+          </button>
+        </div>
+      </div>
+
+      <CodeSnippets
+        codeSnippet={codeSnippet}
+        currentLang={currentLang}
+        onLangChange={setCurrentLang}
+      />
+      <ResponseDisplay
+        response={response}
+        error={error}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+}