@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/ApiExplorer.tsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+interface Collection {
+  name: string;
+  slug: string;
+  fields: number;
+  endpoints: {
+    list: string;
+    create: string;
+    read: string;
+    update: string;
+    delete: string;
+  };
+}
+
+interface ApiExplorerProps {
+  collections: Collection[];
+}
+
+export function ApiExplorer({ collections }: ApiExplorerProps) {
+  const [selectedEndpoint, setSelectedEndpoint] = useState<{
+    collection: string;
+    method: string;
+    url: string;
+    description: string;
+  } | null>(null);
+  const [response, setResponse] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [method, setMethod] = useState<"GET" | "POST" | "PATCH" | "DELETE">(
+    "GET",
+  );
+  const [url, setUrl] = useState("");
+  const [requestBody, setRequestBody] = useState("");
+  const [status, setStatus] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (collections.length > 0) {
+      const first = collections[0];
+      setSelectedEndpoint({
+        collection: first.slug,
+        method: "GET",
+        url: `/api/${first.slug}`,
+        description: `List all ${first.name}`,
+      });
+      setUrl(`/api/${first.slug}`);
+    }
+  }, [collections]);
+
+  const handleEndpointClick = useCallback(
+    (endpoint: typeof selectedEndpoint) => {
+      if (!endpoint) return;
+      setSelectedEndpoint(endpoint);
+      setUrl(endpoint.url);
+      setMethod(endpoint.method as "GET" | "POST" | "PATCH" | "DELETE");
+      setRequestBody("");
+      setResponse("");
+      setStatus(null);
+    },
+    [],
+  );
+
+  const executeRequest = async () => {
+    if (!url) return;
+
+    setLoading(true);
+    setResponse("");
+    setStatus(null);
+
+    try {
+      const options: RequestInit = {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      };
+
+      if (["POST", "PATCH"].includes(method) && requestBody) {
+        options.body = requestBody;
+      }
+
+      const res = await fetch(url, options);
+      setStatus(res.status);
+
+      const contentType = res.headers.get("content-type");
+      if (contentType?.includes("application/json")) {
+        const data = await res.json();
+        setResponse(JSON.stringify(data, null, 2));
+      } else {
+        const text = await res.text();
+        setResponse(text);
+      }
+    } catch (error) {
+      setResponse(
+        `Error: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+      setStatus(500);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getMethodColor = (m: string) => {
+    switch (m) {
+      case "GET":
+        return "bg-green-500/10 text-green-600 border-green-500/20";
+      case "POST":
+        return "bg-blue-500/10 text-blue-600 border-blue-500/20";
+      case "PATCH":
+        return "bg-yellow-500/10 text-yellow-600 border-yellow-500/20";
+      case "DELETE":
+        return "bg-red-500/10 text-red-600 border-red-500/20";
+      default:
+        return "bg-gray-500/10 text-gray-600 border-gray-500/20";
+    }
+  };
+
+  const getStatusColor = (s: number) => {
+    if (s >= 200 && s < 300) return "text-green-600 bg-green-500/10";
+    if (s >= 400 && s < 500) return "text-yellow-600 bg-yellow-500/10";
+    if (s >= 500) return "text-red-600 bg-red-500/10";
+    return "text-gray-600 bg-gray-500/10";
+  };
+
+  return (
+    <div className="h-[calc(100vh-200px)] min-h-[600px] flex gap-6">
+      {/* Sidebar - Collections */}
+      <div className="w-80 flex-shrink-0 overflow-y-auto">
+        <div className="space-y-4">
+          {collections.map((collection) => (
+            <div key={collection.slug} className="space-y-2">
+              <h3 className="font-bold text-[var(--kyro-text-primary)] px-3 py-2 bg-[var(--kyro-surface-accent)] rounded-lg">
+                {collection.name}
+              </h3>
+              <div className="space-y-1 pl-2">
+                <button type="button"
+                  onClick={() =>
+                    handleEndpointClick({
+                      collection: collection.slug,
+                      method: "GET",
+                      url: `/api/${collection.slug}`,
+                      description: `List all ${collection.name}`,
+                    })
+                  }
+                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    selectedEndpoint?.url === `/api/${collection.slug}` &&
+                    method === "GET"
+                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <span
+                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("GET")}`}
+                  >
+                    GET
+                  </span>
+                  List
+                </button>
+                <button type="button"
+                  onClick={() =>
+                    handleEndpointClick({
+                      collection: collection.slug,
+                      method: "POST",
+                      url: `/api/${collection.slug}`,
+                      description: `Create new ${collection.name}`,
+                    })
+                  }
+                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    selectedEndpoint?.url === `/api/${collection.slug}` &&
+                    method === "POST"
+                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <span
+                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("POST")}`}
+                  >
+                    POST
+                  </span>
+                  Create
+                </button>
+                <button type="button"
+                  onClick={() =>
+                    handleEndpointClick({
+                      collection: collection.slug,
+                      method: "GET",
+                      url: `/api/${collection.slug}/:id`,
+                      description: `Get ${collection.name} by ID`,
+                    })
+                  }
+                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
+                    method === "GET"
+                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <span
+                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("GET")}`}
+                  >
+                    GET
+                  </span>
+                  Get by ID
+                </button>
+                <button type="button"
+                  onClick={() =>
+                    handleEndpointClick({
+                      collection: collection.slug,
+                      method: "PATCH",
+                      url: `/api/${collection.slug}/:id`,
+                      description: `Update ${collection.name}`,
+                    })
+                  }
+                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
+                    method === "PATCH"
+                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <span
+                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("PATCH")}`}
+                  >
+                    PATCH
+                  </span>
+                  Update
+                </button>
+                <button type="button"
+                  onClick={() =>
+                    handleEndpointClick({
+                      collection: collection.slug,
+                      method: "DELETE",
+                      url: `/api/${collection.slug}/:id`,
+                      description: `Delete ${collection.name}`,
+                    })
+                  }
+                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
+                    method === "DELETE"
+                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <span
+                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("DELETE")}`}
+                  >
+                    DEL
+                  </span>
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* URL Bar */}
+        <div className="flex gap-3 mb-4">
+          <select
+            value={method}
+            onChange={(e) =>
+              setMethod(e.target.value as "GET" | "POST" | "PATCH" | "DELETE")
+            }
+            className={`px-4 py-2 rounded-lg font-bold text-sm border ${getMethodColor(method)}`}
+          >
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+            <option value="PATCH">PATCH</option>
+            <option value="DELETE">DELETE</option>
+          </select>
+          <input
+            type="text"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="/api/collection"
+            className="flex-1 px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-[var(--kyro-sidebar-active)]"
+          />
+          <button type="button"
+            onClick={executeRequest}
+            disabled={loading || !url}
+            className="px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            {loading ? "Sending..." : "Send"}
+          </button>
+        </div>
+
+        {/* Request Body (for POST/PATCH) */}
+        {["POST", "PATCH"].includes(method) && (
+          <div className="mb-4">
+            <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-2">
+              Request Body (JSON)
+            </label>
+            <textarea
+              value={requestBody}
+              onChange={(e) => setRequestBody(e.target.value)}
+              placeholder='{"field": "value"}'
+              rows={6}
+              className="w-full px-4 py-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-[var(--kyro-sidebar-active)] resize-y"
+            />
+          </div>
+        )}
+
+        {/* Response */}
+        <div className="flex-1 flex flex-col min-h-0">
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm font-bold text-[var(--kyro-text-secondary)]">
+              Response
+            </label>
+            {status && (
+              <span
+                className={`px-3 py-1 rounded-lg text-sm font-bold ${getStatusColor(status)}`}
+              >
+                {status}
+              </span>
+            )}
+          </div>
+          <pre className="flex-1 p-4 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-xs font-mono overflow-auto whitespace-pre-wrap">
+            {response || "Send a request to see the response"}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}