@kyro-cms/admin 0.1.9 → 0.2.0

package/src/components/WebhookManager.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from "react";
+import { apiGet, apiPost, apiPatch, apiDelete } from "@kyro-cms/utils/lib/api";
+import { formatDate } from "@kyro-cms/utils/lib/date-utils";
 import {
   Webhook,
   Plus,
@@ -52,11 +54,8 @@ export function WebhookManager() {
   const loadWebhooks = async () => {
     setLoading(true);
     try {
-      const res = await fetch("/api/webhooks");
-      if (res.ok) {
-        const data = await res.json();
-        setWebhooks(data);
-      }
+      const data = await apiGet("/api/webhooks");
+      setWebhooks(data);
     } catch (e) {
       console.error(e);
     } finally {
@@ -75,20 +74,10 @@ export function WebhookManager() {
     }
 
     try {
-      const res = await fetch("/api/webhooks", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
-      });
-
-      if (res.ok) {
-        setShowCreateModal(false);
-        setFormData({ name: "", url: "", events: [], secret: "" });
-        loadWebhooks();
-      } else {
-        const error = await res.json();
-        setCreateError(error.error || "Failed to create webhook");
-      }
+      await apiPost("/api/webhooks", formData);
+      setShowCreateModal(false);
+      setFormData({ name: "", url: "", events: [], secret: "" });
+      loadWebhooks();
     } catch (e) {
       console.error(e);
       setCreateError("Failed to create webhook");
@@ -104,12 +93,8 @@ export function WebhookManager() {
     if (!deleteId) return;
 
     try {
-      const res = await fetch(`/api/webhooks/${deleteId}`, {
-        method: "DELETE",
-      });
-      if (res.ok) {
-        loadWebhooks();
-      }
+      await apiDelete(`/api/webhooks/${deleteId}`);
+      loadWebhooks();
     } catch (e) {
       console.error(e);
     }
@@ -123,33 +108,22 @@ export function WebhookManager() {
     setShowTestModal(true);
 
     try {
-      const res = await fetch(`/api/webhooks/${id}/test`, { method: "POST" });
-      const data = await res.json();
+      const data = await apiPost(`/api/webhooks/${id}/test`);
       setTestResult({
-        success: res.ok,
-        message:
-          data.message ||
-          (res.ok
-            ? "Webhook triggered successfully"
-            : "Failed to trigger webhook"),
+        success: true,
+        message: data.message || "Webhook triggered successfully",
       });
     } catch (e) {
-      setTestResult({ success: false, message: "Error testing webhook" });
+      setTestResult({ success: false, message: "Failed to trigger webhook" });
     }
   };
 
   const toggleStatus = async (id: string, currentStatus: string) => {
     try {
-      const res = await fetch(`/api/webhooks/${id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          status: currentStatus === "active" ? "paused" : "active",
-        }),
+      await apiPatch(`/api/webhooks/${id}`, {
+        status: currentStatus === "active" ? "paused" : "active",
       });
-      if (res.ok) {
-        loadWebhooks();
-      }
+      loadWebhooks();
     } catch (e) {
       console.error(e);
     }
@@ -183,7 +157,8 @@ export function WebhookManager() {
             <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
               Web<span className="text-[var(--kyro-primary)]">hooks</span>
             </h1>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setShowHelpModal(true)}
               className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
               title="Learn how webhooks work"
@@ -195,7 +170,8 @@ export function WebhookManager() {
             Receive real-time notifications when events occur in your CMS.
           </p>
         </div>
-        <button type="button"
+        <button
+          type="button"
           onClick={() => {
             setFormData({ name: "", url: "", events: [], secret: "" });
             setCreateError("");
@@ -253,7 +229,8 @@ export function WebhookManager() {
             <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
               Add your first webhook to start receiving event notifications.
             </p>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setShowCreateModal(true)}
               className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
             >
@@ -310,7 +287,8 @@ export function WebhookManager() {
                     </div>
                   </div>
                   <div className="flex items-center gap-2 flex-shrink-0">
-                    <button type="button"
+                    <button
+                      type="button"
                       onClick={() => handleTest(webhook.id)}
                       className="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface)] flex items-center gap-2"
                       title="Send test request"
@@ -320,7 +298,8 @@ export function WebhookManager() {
                         Test
                       </span>
                     </button>
-                    <button type="button"
+                    <button
+                      type="button"
                       onClick={() => toggleStatus(webhook.id, webhook.status)}
                       className={`p-3 rounded-xl flex items-center gap-2 ${
                         webhook.status === "active"
@@ -349,7 +328,8 @@ export function WebhookManager() {
                         </>
                       )}
                     </button>
-                    <button type="button"
+                    <button
+                      type="button"
                       onClick={() => handleDelete(webhook.id)}
                       className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
                       title="Delete webhook"
@@ -409,7 +389,8 @@ export function WebhookManager() {
               </label>
               <div className="grid grid-cols-2 gap-3">
                 {eventOptions.map((opt) => (
-                  <button type="button"
+                  <button
+                    type="button"
                     key={opt.value}
                     onClick={() => {
                       const events = formData.events.includes(opt.value)
@@ -454,13 +435,15 @@ export function WebhookManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <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)]"
           >
             Cancel
           </button>
-          <button type="button"
+          <button
+            type="button"
             onClick={handleCreate}
             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"
           >
@@ -488,13 +471,15 @@ export function WebhookManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <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)]"
           >
             Keep Webhook
           </button>
-          <button type="button"
+          <button
+            type="button"
             onClick={confirmDelete}
             className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600"
           >
@@ -536,7 +521,8 @@ export function WebhookManager() {
           )}
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowTestModal(false)}
             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"
           >
@@ -595,7 +581,8 @@ export function WebhookManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowHelpModal(false)}
             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"
           >

package/src/components/fields/RelationshipBlockField.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Search, Loader2, X } from "lucide-react";
+import { apiGet, buildSearchQuery } from "@kyro-cms/utils/lib/api";
 
 interface RelationshipBlockFieldProps {
   relationTo?: string;
@@ -28,8 +29,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
   const [loadingCollections, setLoadingCollections] = useState(true);
 
   useEffect(() => {
-    fetch("/api/collections", { credentials: "include" })
-      .then((res) => res.json())
+    apiGet("/api/collections")
       .then((data) => {
         setCollections(
           (data.collections || []).map((c: any) => c.slug || c.name || c),
@@ -41,12 +41,9 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
 
   const fetchOptions = (query: string = "") => {
     setLoading(true);
-    const url = query
-      ? `/api/${relationTo}?where[${labelField}][contains]=${encodeURIComponent(query)}&limit=20`
-      : `/api/${relationTo}?limit=20`;
+    const url = `/api/${relationTo}?${buildSearchQuery(query, [labelField], 20)}`;
 
-    fetch(url, { credentials: "include" })
-      .then((res) => res.json())
+    apiGet(url)
       .then((data) => {
         setOptions(data.docs || []);
         setLoading(false);

package/src/components/fields/RelationshipField.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { Search, X, ChevronDown, Loader2 } from "lucide-react";
+import { apiGet, buildSearchQuery } from "@kyro-cms/utils/lib/api";
 
 interface RelationshipFieldProps {
   field: {
@@ -42,15 +43,9 @@ export function RelationshipField({
   const fetchOptions = (query: string = "") => {
     setLoading(true);
     const searchFields = ["title", "name", "label", "email"];
-    const searchQuery = searchFields
-      .map((f) => `where[${f}][contains]=${encodeURIComponent(query)}`)
-      .join("&");
-    const url = query
-      ? `/api/${targetCollection}?${searchQuery}&limit=50`
-      : `/api/${targetCollection}?limit=50`;
+    const url = `/api/${targetCollection}?${buildSearchQuery(query, searchFields)}`;
 
-    fetch(url, { credentials: "include" })
-      .then((res) => res.json())
+    apiGet(url)
       .then((data) => {
         setOptions((prev) => {
           const existingIds = new Set(prev.map((o) => o.id));
@@ -77,8 +72,7 @@ export function RelationshipField({
     items.forEach((itemId) => {
       const id = typeof itemId === "object" ? itemId?.id : itemId;
       if (id && !options.some((o) => o.id === id)) {
-        fetch(`/api/${targetCollection}/${id}`, { credentials: "include" })
-          .then((res) => res.json())
+        apiGet(`/api/${targetCollection}/${id}`)
           .then((doc) => {
             setOptions((prev) => [...prev, doc]);
           })

package/src/components/fields/UploadField.tsx

@@ -1,6 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Image, Film, FileText, Music, File, X, Loader2 } from "lucide-react";
+import {
+  apiGet,
+  withCacheBust,
+  apiPost,
+  apiUpload,
+} from "@kyro-cms/utils/lib/api";
 
 interface UploadFieldProps {
   field: any;
@@ -102,10 +108,7 @@ export function UploadField({
 
   const loadFolders = async () => {
     try {
-      const resp = await fetch("/api/media/folders?t=" + Date.now(), {
-        credentials: "include",
-      });
-      const result = await resp.json();
+      const result = await apiGet(withCacheBust("/api/media/folders"));
       setFolders(result.folders || []);
     } catch {
       setFolders([]);
@@ -115,12 +118,13 @@ export function UploadField({
   const loadMedia = async () => {
     setMediaLoading(true);
     try {
-      let url = `/api/media?limit=60&sortBy=createdAt&sortDir=desc&t=${Date.now()}`;
+      let url = withCacheBust(
+        `/api/media?limit=60&sortBy=createdAt&sortDir=desc`,
+      );
       if (selectedFolder) {
         url += "&folder=" + encodeURIComponent(selectedFolder);
       }
-      const resp = await fetch(url, { credentials: "include" });
-      const result = await resp.json();
+      const result = await apiGet(url);
       setMediaItems(result.docs || []);
     } catch {
       setMediaItems([]);
@@ -137,17 +141,11 @@ export function UploadField({
       if (selectedFolder) {
         formData.append("folder", selectedFolder);
       }
-      const resp = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-        credentials: "include",
-      });
-      if (!resp.ok) throw new Error("Upload failed");
-      const result = await resp.json();
+      const result = await apiUpload("/api/upload", formData);
       const newImage = {
         id: result.id,
         filename: result.filename,
-        originalName: result.originalName ?? file.name,
+        originalName: (result as any).originalName ?? file.name,
         url: result.url,
         mimeType: file.type,
       };
@@ -169,17 +167,7 @@ export function UploadField({
 
     setUrlError("");
     try {
-      const resp = await fetch("/api/upload", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url }),
-        credentials: "include",
-      });
-      if (!resp.ok) {
-        const data = await resp.json();
-        throw new Error(data.error || "Failed to add URL");
-      }
-      const result = await resp.json();
+      const result = await apiPost("/api/upload", { url });
       const originalName = (() => {
         try {
           return (
@@ -465,10 +453,11 @@ function MediaPickerContent({
 }) {
   return (
     <div
-      className={`${isFullscreen
-        ? "fixed inset-0 z-[9999]"
-        : "absolute z-50 w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
-        } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex flex-col`}
+      className={`${
+        isFullscreen
+          ? "fixed inset-0 z-[9999]"
+          : "absolute z-50 w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
+      } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex flex-col`}
     >
       <div className="p-2 border-b border-[var(--kyro-border)] flex flex-col gap-2">
         <input
@@ -483,10 +472,11 @@ function MediaPickerContent({
             <button
               type="button"
               onClick={() => setSelectedFolder("")}
-              className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === ""
-                ? "bg-[var(--kyro-primary)] text-white"
-                : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
-                }`}
+              className={`px-2 py-1 text-xs rounded transition-colors ${
+                selectedFolder === ""
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+              }`}
             >
               All
             </button>
@@ -495,10 +485,11 @@ function MediaPickerContent({
                 key={folder.path}
                 type="button"
                 onClick={() => setSelectedFolder(folder.path)}
-                className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === folder.path
-                  ? "bg-[var(--kyro-primary)] text-white"
-                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
-                  }`}
+                className={`px-2 py-1 text-xs rounded transition-colors ${
+                  selectedFolder === folder.path
+                    ? "bg-[var(--kyro-primary)] text-white"
+                    : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                }`}
               >
                 {folder.name}
               </button>
@@ -519,10 +510,11 @@ function MediaPickerContent({
           </div>
         ) : (
           <div
-            className={`grid gap-1 ${isFullscreen
-              ? "grid-cols-[repeat(auto-fill,minmax(140px,1fr))]"
-              : "grid-cols-3"
-              }`}
+            className={`grid gap-1 ${
+              isFullscreen
+                ? "grid-cols-[repeat(auto-fill,minmax(140px,1fr))]"
+                : "grid-cols-3"
+            }`}
           >
             {filteredMedia.map((item) => (
               <button
@@ -532,8 +524,9 @@ function MediaPickerContent({
                 className="border border-[var(--kyro-border)] rounded-md overflow-hidden cursor-pointer p-0 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)] transition-all relative group"
               >
                 <div
-                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${isFullscreen ? "h-[120px]" : "h-[80px]"
-                    }`}
+                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${
+                    isFullscreen ? "h-[120px]" : "h-[80px]"
+                  }`}
                 >
                   {getFileType(item.mimeType, item.filename) === "image" ? (
                     <img

package/src/components/ui/CommandPalette.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
+import { apiGet } from "@kyro-cms/utils/lib/api";
 import {
   Search,
   FileText,