@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/GraphQLPlayground.tsx

@@ -0,0 +1,627 @@
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  Suspense,
+  lazy,
+} from "react";
+
+interface GraphQLPlaygroundProps {
+  endpoint?: string;
+  initialQuery?: string;
+  initialVariables?: string;
+}
+
+interface QueryTab {
+  id: string;
+  name: string;
+  query: string;
+  variables: string;
+  headers: string;
+}
+
+// Lazy-load CodeMirror
+const CodeMirrorEditor = lazy(() =>
+  import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
+);
+import { javascript } from "@codemirror/lang-javascript";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { aura } from "@uiw/codemirror-theme-aura";
+import "graphiql/graphiql.css";
+
+const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
+# Try these example queries:
+
+# 1. Introspection - Discover the schema
+{
+  _schema {
+    types {
+      name
+      fields {
+        name
+        type
+        required
+      }
+    }
+  }
+}
+
+# 2. List all collections
+{
+  collections {
+    slug
+    name
+    fields
+  }
+}
+
+# 3. Ping the API
+{
+  ping
+}
+
+# 4. Query posts (if available)
+{
+  posts(page: 1, limit: 10) {
+    docs {
+      id
+      title
+      slug
+      status
+    }
+    totalDocs
+    totalPages
+    page
+  }
+}
+`;
+
+export function GraphQLPlayground({
+  endpoint = "/api/graphql",
+  initialQuery,
+  initialVariables,
+}: GraphQLPlaygroundProps) {
+  const [token, setToken] = useState<string>("");
+  const [isConnected, setIsConnected] = useState(false);
+  const [tabs, setTabs] = useState<QueryTab[]>([
+    {
+      id: "default",
+      name: "Query",
+      query: initialQuery || DEFAULT_QUERY,
+      variables: initialVariables || "{}",
+      headers: "",
+    },
+  ]);
+  const [currentTabId, setCurrentTabId] = useState("default");
+  const [response, setResponse] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"query" | "variables" | "headers">(
+    "query",
+  );
+  const [isDark, setIsDark] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDark(document.documentElement.classList.contains("dark"));
+
+    const storedToken = localStorage.getItem("graphql_auth_token");
+    if (storedToken) {
+      setToken(storedToken);
+      setIsConnected(true);
+    }
+
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const currentTab = tabs.find((t) => t.id === currentTabId) || tabs[0];
+
+  const handleTokenSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (token.trim()) {
+        localStorage.setItem("graphql_auth_token", token.trim());
+        setIsConnected(true);
+        setTabs((prev) =>
+          prev.map((tab) => ({
+            ...tab,
+            headers: JSON.stringify(
+              { Authorization: `Bearer ${token.trim()}` },
+              null,
+              2,
+            ),
+          })),
+        );
+      }
+    },
+    [token],
+  );
+
+  const clearToken = useCallback(() => {
+    localStorage.removeItem("graphql_auth_token");
+    setToken("");
+    setIsConnected(false);
+  }, []);
+
+  const executeQuery = useCallback(async () => {
+    if (!currentTab.query.trim()) {
+      setError("Please enter a query");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let variables: Record<string, any> | undefined;
+      if (currentTab.variables.trim()) {
+        try {
+          variables = JSON.parse(currentTab.variables);
+        } catch {
+          setError("Invalid JSON in variables");
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      let headers: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+      if (currentTab.headers.trim()) {
+        try {
+          headers = { ...headers, ...JSON.parse(currentTab.headers) };
+        } catch {
+          setError("Invalid JSON in headers");
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          query: currentTab.query,
+          variables,
+        }),
+      });
+
+      const data = await res.json();
+      setResponse(JSON.stringify(data, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentTab, endpoint]);
+
+  const addNewTab = useCallback(() => {
+    const newTab: QueryTab = {
+      id: `tab-${Date.now()}`,
+      name: `Query ${tabs.length + 1}`,
+      query: "# New Query\n{\n  \n}",
+      variables: "{}",
+      headers: token
+        ? JSON.stringify({ Authorization: `Bearer ${token}` }, null, 2)
+        : "",
+    };
+    setTabs((prev) => [...prev, newTab]);
+    setCurrentTabId(newTab.id);
+  }, [tabs.length, token]);
+
+  const closeTab = useCallback(
+    (tabId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (tabs.length <= 1) return;
+
+      const newTabs = tabs.filter((t) => t.id !== tabId);
+      setTabs(newTabs);
+      if (currentTabId === tabId) {
+        setCurrentTabId(newTabs[0].id);
+      }
+    },
+    [tabs, currentTabId],
+  );
+
+  const updateTab = useCallback(
+    (field: keyof QueryTab, value: string) => {
+      setTabs((prev) =>
+        prev.map((tab) =>
+          tab.id === currentTabId ? { ...tab, [field]: value } : tab,
+        ),
+      );
+    },
+    [currentTabId],
+  );
+
+  // Keyboard shortcut: Ctrl+Enter to run
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        executeQuery();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [executeQuery]);
+
+  const theme = isDark ? aura : githubLight;
+
+  const extensions = useMemo(() => [javascript({ jsx: true })], []);
+
+  return (
+    <div className="h-full flex flex-col bg-[var(--kyro-surface)] rounded-lg overflow-hidden border border-[var(--kyro-border)]">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)]">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <svg
+              className="w-5 h-5 text-pink-500"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M13 10V3L4 14h7v7l9-11h-7z"
+              />
+            </svg>
+            <span className="font-bold text-sm text-[var(--kyro-text-primary)]">
+              GraphQL
+            </span>
+          </div>
+          <div className="flex items-center gap-1 px-2 py-1 rounded bg-green-500/10">
+            <div
+              className={`w-2 h-2 rounded-full ${
+                isConnected ? "bg-green-500" : "bg-gray-500"
+              }`}
+            />
+            <span className="text-xs text-[var(--kyro-text-secondary)]">
+              {isConnected ? "Connected" : "Not connected"}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {isConnected && (
+            <span className="text-xs text-[var(--kyro-text-muted)] font-mono">
+              {token.slice(0, 12)}...
+            </span>
+          )}
+          <button type="button"
+            onClick={clearToken}
+            className="text-xs text-pink-500 hover:text-pink-600 font-medium"
+          >
+            {isConnected ? "Disconnect" : "Connect"}
+          </button>
+        </div>
+      </div>
+
+      {/* Token Input (when not connected) */}
+      {!isConnected && (
+        <div className="p-6 border-b border-[var(--kyro-border)]">
+          <form onSubmit={handleTokenSubmit} className="flex gap-3">
+            <input
+              type="text"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder="Enter auth token (Bearer ...)"
+              className="flex-1 px-4 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-pink-500"
+            />
+            <button
+              type="submit"
+              disabled={!token.trim()}
+              className="px-6 py-2 bg-pink-500 text-white rounded-lg font-bold text-sm hover:bg-pink-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Connect
+            </button>
+          </form>
+          <p className="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Get your token from the Auth section or login endpoint
+          </p>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="flex items-center gap-1 px-2 py-2 bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)] overflow-x-auto">
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className={`group flex items-center gap-2 px-3 py-1.5 rounded-t cursor-pointer transition-colors ${
+              currentTabId === tab.id
+                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+                : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"
+            }`}
+            onClick={() => setCurrentTabId(tab.id)}
+          >
+            <span className="text-xs font-medium">{tab.name}</span>
+            {tabs.length > 1 && (
+              <button type="button"
+                onClick={(e) => closeTab(tab.id, e)}
+                className="opacity-0 group-hover:opacity-100 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
+              >
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        ))}
+        <button type="button"
+          onClick={addNewTab}
+          className="p-1.5 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M12 4v16m8-8H4"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Editor Area */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Query Editor */}
+        <div className="flex-1 flex flex-col border-r border-[var(--kyro-border)]">
+          {/* Editor Toolbar */}
+          <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
+            <button type="button"
+              onClick={() => setActiveTab("query")}
+              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
+                activeTab === "query"
+                  ? "bg-pink-500 text-white"
+                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Query
+            </button>
+            <button type="button"
+              onClick={() => setActiveTab("variables")}
+              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
+                activeTab === "variables"
+                  ? "bg-pink-500 text-white"
+                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Variables
+            </button>
+            <button type="button"
+              onClick={() => setActiveTab("headers")}
+              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
+                activeTab === "headers"
+                  ? "bg-pink-500 text-white"
+                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Headers
+            </button>
+
+            <div className="flex-1" />
+
+            <button type="button"
+              onClick={executeQuery}
+              disabled={isLoading}
+              className="flex items-center gap-2 px-4 py-1.5 bg-pink-500 text-white rounded font-bold text-xs hover:bg-pink-600 transition-colors disabled:opacity-50"
+            >
+              {isLoading ? (
+                <svg
+                  className="w-4 h-4 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              )}
+              Run
+              <kbd className="ml-1 px-1 py-0.5 bg-white/20 rounded text-[10px]">
+                ⌘↵
+              </kbd>
+            </button>
+          </div>
+
+          {/* Editor Content */}
+          <div className="flex-1 overflow-auto">
+            {activeTab === "query" && (
+              <Suspense
+                fallback={
+                  <textarea
+                    value={currentTab.query}
+                    onChange={(e) => updateTab("query", e.target.value)}
+                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
+                    placeholder="Enter your GraphQL query..."
+                    spellCheck={false}
+                  />
+                }
+              >
+                {isMounted && (
+                  <CodeMirrorEditor
+                    value={currentTab.query}
+                    height="100%"
+                    extensions={extensions}
+                    theme={theme}
+                    onChange={(value) => updateTab("query", value)}
+                    basicSetup={true}
+                    style={{
+                      height: "100%",
+                      minHeight: "300px",
+                      fontSize: "13px",
+                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
+                    }}
+                  />
+                )}
+              </Suspense>
+            )}
+            {activeTab === "variables" && (
+              <Suspense
+                fallback={
+                  <textarea
+                    value={currentTab.variables}
+                    onChange={(e) => updateTab("variables", e.target.value)}
+                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
+                    placeholder='{ "key": "value" }'
+                    spellCheck={false}
+                  />
+                }
+              >
+                {isMounted && (
+                  <CodeMirrorEditor
+                    value={currentTab.variables}
+                    height="100%"
+                    extensions={extensions}
+                    theme={theme}
+                    onChange={(value) => updateTab("variables", value)}
+                    basicSetup={true}
+                    style={{
+                      height: "100%",
+                      minHeight: "300px",
+                      fontSize: "13px",
+                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
+                    }}
+                  />
+                )}
+              </Suspense>
+            )}
+            {activeTab === "headers" && (
+              <Suspense
+                fallback={
+                  <textarea
+                    value={currentTab.headers}
+                    onChange={(e) => updateTab("headers", e.target.value)}
+                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
+                    placeholder='{ "Authorization": "Bearer your-token" }'
+                    spellCheck={false}
+                  />
+                }
+              >
+                {isMounted && (
+                  <CodeMirrorEditor
+                    value={currentTab.headers}
+                    height="100%"
+                    extensions={extensions}
+                    theme={theme}
+                    onChange={(value) => updateTab("headers", value)}
+                    basicSetup={true}
+                    style={{
+                      height: "100%",
+                      minHeight: "300px",
+                      fontSize: "13px",
+                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
+                    }}
+                  />
+                )}
+              </Suspense>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Response */}
+        <div className="flex-1 flex flex-col">
+          <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
+            <span className="text-xs font-bold text-[var(--kyro-text-secondary)]">
+              Response
+            </span>
+            {error && (
+              <span className="px-2 py-0.5 bg-red-500/10 text-red-500 text-xs rounded">
+                Error
+              </span>
+            )}
+          </div>
+          <div className="flex-1 overflow-auto p-4">
+            {isLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <div className="animate-spin w-8 h-8 border-2 border-pink-500 border-t-transparent rounded-full" />
+              </div>
+            ) : response ? (
+              <pre className="text-sm font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap">
+                {response}
+              </pre>
+            ) : (
+              <div className="flex flex-col items-center justify-center h-full text-[var(--kyro-text-muted)]">
+                <svg
+                  className="w-12 h-12 mb-4 opacity-50"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <p className="text-sm">Run a query to see the response</p>
+                <p className="text-xs mt-1">Press Cmd+Enter to run</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}