@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/DeveloperCenter.tsx

@@ -0,0 +1,403 @@
+import React, { useState, useEffect } from "react";
+import {
+  Terminal,
+  Key,
+  PlayCircle,
+  Copy,
+  RefreshCcw,
+  Trash2,
+  ExternalLink,
+  ChevronRight,
+  Code2,
+  Lock,
+  Eye,
+  EyeOff,
+} from "lucide-react";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { aura } from "@uiw/codemirror-theme-aura";
+import { Modal, ModalContent, ModalActions } from "./ui/Modal";
+
+interface ApiKey {
+  id: string;
+  name: string;
+  key: string;
+  lastUsed?: string;
+  createdAt: string;
+}
+
+export function DeveloperCenter({ collections }: { collections: any }) {
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showKey, setShowKey] = useState<string | null>(null);
+  const [testEndpoint, setTestEndpoint] = useState("");
+  const [playgroundResult, setPlaygroundResult] = useState<unknown>(null);
+  const [exploring, setExploring] = useState(false);
+
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteKeyId, setDeleteKeyId] = useState<string | null>(null);
+  const [newKeyName, setNewKeyName] = useState("");
+
+  const loadKeys = async () => {
+    try {
+      const res = await fetch("/api/keys");
+      if (res.ok) {
+        const data = await res.json();
+        setKeys(data);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    loadKeys();
+  }, []);
+
+  const handleGenerateKey = async () => {
+    setNewKeyName("");
+    setShowCreateModal(true);
+  };
+
+  const confirmGenerateKey = async () => {
+    if (!newKeyName.trim()) return;
+    try {
+      const res = await fetch("/api/keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newKeyName }),
+      });
+      if (res.ok) {
+        loadKeys();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    setShowCreateModal(false);
+    setNewKeyName("");
+  };
+
+  const handleRevokeKey = async (id: string) => {
+    setDeleteKeyId(id);
+    setShowDeleteModal(true);
+  };
+
+  const confirmRevokeKey = async () => {
+    if (!deleteKeyId) return;
+    try {
+      const res = await fetch(`/api/keys/${deleteKeyId}`, { method: "DELETE" });
+      if (res.ok) {
+        loadKeys();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    setShowDeleteModal(false);
+    setDeleteKeyId(null);
+  };
+
+  const handleRunTest = async () => {
+    if (!testEndpoint) return;
+    setExploring(true);
+    try {
+      const response = await fetch(`/api/${testEndpoint}`);
+      const data = await response.json();
+      setPlaygroundResult(data);
+    } catch (e) {
+      setPlaygroundResult({
+        error: "Failed to fetch. Ensure the endpoint exists.",
+      });
+    } finally {
+      setExploring(false);
+    }
+  };
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
+      {/* Header */}
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
+        <div>
+          <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            Developer <span className="text-[var(--kyro-primary)]">Center</span>
+          </h1>
+          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-60">
+            Provision access keys and explore the headless API ecosystem.
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <button type="button"
+            onClick={handleGenerateKey}
+            className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm shadow-xl hover:shadow-[var(--kyro-primary)] active:scale-95 transition-all"
+          >
+            <Key className="w-4 h-4" />
+            Generate New Key
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        {/* API Key List */}
+        <section className="xl:col-span-2 space-y-6">
+          <div className="flex items-center justify-between px-2">
+            <div className="flex items-center gap-2">
+              <Lock className="w-4 h-4 text-[var(--kyro-primary)]" />
+              <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                Access Credentials
+              </span>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {keys.map((key) => (
+              <div
+                key={key.id}
+                className="surface-tile p-6 group transition-all duration-300 hover:border-[var(--kyro-primary)] hover:shadow-xl"
+              >
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-black tracking-tight mb-1">
+                      {key.name}
+                    </h3>
+                    <div className="flex items-center gap-3">
+                      <div className="flex-1 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl px-4 py-2 flex items-center justify-between group/key overflow-hidden">
+                        <code className="text-xs font-mono opacity-80 truncate mr-4">
+                          {showKey === key.id
+                            ? key.key
+                            : "••••••••••••••••••••••••••••••••"}
+                        </code>
+                        <div className="flex items-center gap-1 shrink-0">
+                          <button type="button"
+                            onClick={() =>
+                              setShowKey(showKey === key.id ? null : key.id)
+                            }
+                            className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-md transition-all text-[var(--kyro-text-secondary)]"
+                          >
+                            {showKey === key.id ? (
+                              <EyeOff className="w-3.5 h-3.5" />
+                            ) : (
+                              <Eye className="w-3.5 h-3.5" />
+                            )}
+                          </button>
+                          <button type="button" className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-md transition-all text-[var(--kyro-text-secondary)]">
+                            <Copy className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4 mt-3 text-[10px] font-black uppercase tracking-widest opacity-30">
+                      <span>
+                        Created {new Date(key.createdAt).toLocaleDateString()}
+                      </span>
+                      <span>
+                        Last used{" "}
+                        {key.lastUsed
+                          ? new Date(key.lastUsed).toLocaleDateString()
+                          : "Never"}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <button type="button"
+                      onClick={() => handleRevokeKey(key.id)}
+                      className="p-3 bg-red-500/5 text-red-500 rounded-xl hover:bg-red-500/10 transition-all border border-transparent hover:border-red-500/20"
+                      title="Revoke Key"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Sidebar Stats/Info */}
+        <section className="space-y-6">
+          <div className="surface-tile p-8 bg-[var(--kyro-primary)] group overflow-hidden relative">
+            <div className="relative z-10">
+              <Terminal className="w-8 h-8 text-white mb-4 opacity-40" />
+              <h3 className="text-white text-xl font-black tracking-tight mb-2">
+                Endpoint Hub
+              </h3>
+              <p className="text-white/70 text-sm font-medium leading-relaxed mb-6">
+                All content is delivered via our optimized REST API. Use your
+                keys to authorize requests.
+              </p>
+              <button type="button" className="w-full py-3 bg-white text-[var(--kyro-primary)] rounded-xl font-black text-xs uppercase tracking-widest hover:shadow-2xl transition-all flex items-center justify-center gap-2">
+                Review API Docs
+                <ExternalLink className="w-3.5 h-3.5" />
+              </button>
+            </div>
+            {/* Decorative glow */}
+            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-white opacity-10 blur-3xl group-hover:scale-150 transition-transform duration-700" />
+          </div>
+
+          <div className="surface-tile p-8">
+            <h4 className="text-[10px] font-black uppercase tracking-widest opacity-40 mb-6">
+              Base URLs
+            </h4>
+            <div className="space-y-4">
+              <div>
+                <p className="text-xs font-bold mb-2">
+                  Content Delivery (Production)
+                </p>
+                <div className="bg-[var(--kyro-bg-secondary)] p-3 rounded-xl border border-[var(--kyro-border)] flex items-center justify-between group">
+                  <code className="text-[10px] font-mono opacity-60">
+                    https://api.kyro.io/v1
+                  </code>
+                  <Copy className="w-3.5 h-3.5 opacity-0 group-hover:opacity-40 cursor-pointer transition-opacity" />
+                </div>
+              </div>
+              <div>
+                <p className="text-xs font-bold mb-2">
+                  Editor Snapshots (Preview)
+                </p>
+                <div className="bg-[var(--kyro-bg-secondary)] p-3 rounded-xl border border-[var(--kyro-border)] flex items-center justify-between group">
+                  <code className="text-[10px] font-mono opacity-60">
+                    https://preview.kyro.io/v1
+                  </code>
+                  <Copy className="w-3.5 h-3.5 opacity-0 group-hover:opacity-40 cursor-pointer transition-opacity" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Playground Explorer */}
+        <section className="xl:col-span-3 surface-tile p-8 space-y-8">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
+            <div>
+              <h2 className="text-2xl font-black tracking-tighter flex items-center gap-3">
+                <PlayCircle className="w-6 h-6 text-[var(--kyro-primary)]" />
+                API{" "}
+                <span className="text-[var(--kyro-primary)]">Playground</span>
+              </h2>
+              <p className="text-[var(--kyro-text-secondary)] text-sm font-medium opacity-60">
+                Test your endpoints and analyze response payloads in real-time.
+              </p>
+            </div>
+            <div className="flex items-center gap-3 flex-1 lg:max-w-xl">
+              <div className="relative flex-1 group">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[10px] font-black opacity-40 mt-0.5">
+                  GET /api/
+                </span>
+                <input
+                  type="text"
+                  value={testEndpoint}
+                  onChange={(e) => setTestEndpoint(e.target.value)}
+                  placeholder="collection-slug"
+                  className="w-full pl-20 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] transition-all font-mono text-xs font-bold"
+                />
+              </div>
+              <button type="button"
+                onClick={handleRunTest}
+                disabled={exploring || !testEndpoint}
+                className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-xs uppercase tracking-widest shadow-xl disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-[var(--kyro-primary)] transition-all flex items-center gap-2 shrink-0"
+              >
+                {exploring ? (
+                  <RefreshCcw className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <ChevronRight className="w-4 h-4" />
+                )}
+                Fire
+              </button>
+            </div>
+          </div>
+
+          {playgroundResult ? (
+            <div className="animate-in fade-in slide-in-from-top-4 duration-500">
+              <div className="flex items-center gap-2 mb-4">
+                <Code2 className="w-4 h-4 opacity-40" />
+                <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                  JSON Response Payload
+                </span>
+              </div>
+              <div className="rounded-3xl overflow-hidden border border-[var(--kyro-border)] shadow-2xl">
+                <CodeMirror
+                  value={JSON.stringify(playgroundResult, null, 2)}
+                  height="350px"
+                  theme={aura}
+                  extensions={[json()]}
+                  editable={false}
+                  className="text-sm"
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="h-64 rounded-3xl border-2 border-dashed border-[var(--kyro-border)] flex flex-col items-center justify-center opacity-30 select-none">
+              <Code2 className="w-12 h-12 mb-4" />
+              <p className="font-bold text-sm">
+                Enter an endpoint above to begin testing.
+              </p>
+            </div>
+          )}
+        </section>
+      </div>
+
+      {/* Create Modal */}
+      <Modal
+        open={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title="Create API Key"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
+            Give your API key a name to identify its purpose.
+          </p>
+          <input
+            type="text"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g., Production API"
+            className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+            onKeyDown={(e) => e.key === "Enter" && confirmGenerateKey()}
+          />
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowCreateModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={confirmGenerateKey}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+          >
+            Create
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        open={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Revoke API Key"
+        variant="danger"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)]">
+            Are you sure you want to revoke this key? Any integrations using it
+            will stop working.
+          </p>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowDeleteModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={confirmRevokeKey}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600 transition-colors"
+          >
+            Revoke
+          </button>
+        </ModalActions>
+      </Modal>
+    </div>
+  );
+}