@kyro-cms/admin 0.1.8 → 0.2.0

package/src/components/DeveloperCenter.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { apiGet, apiPost, apiDelete } from "@kyro-cms/utils/lib/api";
 import {
   Terminal,
   Key,
@@ -41,11 +42,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
 
   const loadKeys = async () => {
     try {
-      const res = await fetch("/api/keys");
-      if (res.ok) {
-        const data = await res.json();
-        setKeys(data);
-      }
+      const data = await apiGet("/api/keys");
+      setKeys(data);
     } catch (e) {
       console.error(e);
     }
@@ -63,14 +61,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
   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();
-      }
+      await apiPost("/api/keys", { name: newKeyName });
+      loadKeys();
     } catch (e) {
       console.error(e);
     }
@@ -86,10 +78,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
   const confirmRevokeKey = async () => {
     if (!deleteKeyId) return;
     try {
-      const res = await fetch(`/api/keys/${deleteKeyId}`, { method: "DELETE" });
-      if (res.ok) {
-        loadKeys();
-      }
+      await apiDelete(`/api/keys/${deleteKeyId}`);
+      loadKeys();
     } catch (e) {
       console.error(e);
     }
@@ -126,7 +116,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
           </p>
         </div>
         <div className="flex items-center gap-3">
-          <button type="button"
+          <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"
           >
@@ -167,7 +158,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
                             : "••••••••••••••••••••••••••••••••"}
                         </code>
                         <div className="flex items-center gap-1 shrink-0">
-                          <button type="button"
+                          <button
+                            type="button"
                             onClick={() =>
                               setShowKey(showKey === key.id ? null : key.id)
                             }
@@ -179,7 +171,10 @@ export function DeveloperCenter({ collections }: { collections: any }) {
                               <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)]">
+                          <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>
@@ -198,7 +193,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <button type="button"
+                    <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"
@@ -224,7 +220,10 @@ export function DeveloperCenter({ collections }: { collections: any }) {
                 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">
+              <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>
@@ -290,7 +289,8 @@ export function DeveloperCenter({ collections }: { collections: any }) {
                   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"
+              <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"
@@ -355,13 +355,15 @@ export function DeveloperCenter({ collections }: { collections: any }) {
           />
         </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)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             Cancel
           </button>
-          <button type="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"
           >
@@ -384,13 +386,15 @@ export function DeveloperCenter({ collections }: { collections: any }) {
           </p>
         </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)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             Cancel
           </button>
-          <button type="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"
           >

package/src/components/EnhancedListView.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { Spinner } from "./ui/Spinner";
 import { ConfirmModal } from "./ui/Modal";
+import { apiGet, apiDelete, withCacheBust } from "@kyro-cms/utils/lib/api";
 
 export interface FieldConfig {
   name: string;
@@ -217,11 +218,9 @@ export function EnhancedListView({
         params.append("filters", JSON.stringify(filters));
       }
 
-      const response = await fetch(
-        `/api/${collectionSlug}?${params}&t=${Date.now()}`,
+      const result = await apiGet(
+        withCacheBust(`/api/${collectionSlug}?${params}`),
       );
-      if (!response.ok) throw new Error("Failed to load");
-      const result = await response.json();
       setDocs(result.docs || []);
       setTotalDocs(result.totalDocs || 0);
     } catch (error) {
@@ -261,7 +260,7 @@ export function EnhancedListView({
     try {
       await Promise.all(
         Array.from(selectedIds).map((id) =>
-          fetch(`/api/${collectionSlug}/${id}`, { method: "DELETE" }),
+          apiDelete(`/api/${collectionSlug}/${id}`),
         ),
       );
       setSelectedIds(new Set());
@@ -852,7 +851,7 @@ export function EnhancedListView({
   const confirmDelete = async () => {
     try {
       for (const id of deleteConfirm.ids || []) {
-        await fetch(`/api/${collectionSlug}/${id}`, { method: "DELETE" });
+        await apiDelete(`/api/${collectionSlug}/${id}`);
       }
       fetchDocs();
     } catch (error) {

package/src/components/ListView.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { apiGet, apiDelete } from "@kyro-cms/utils/lib/api";
 import type { CollectionConfig, KyroConfig } from "@kyro-cms/core/client";
 import { Spinner } from "./ui/Spinner";
 import { ConfirmModal } from "./ui/Modal";
@@ -35,11 +36,9 @@ export function ListView({
   const loadDocs = async () => {
     try {
       setLoading(true);
-      const response = await fetch(
+      const result = await apiGet(
         `/api/${collection.slug}?page=${page}&limit=${limit}`,
       );
-      if (!response.ok) throw new Error("Failed to load");
-      const result = await response.json();
       setDocs(result.docs || []);
       setTotalPages(result.totalPages || 1);
     } catch (error) {
@@ -62,12 +61,8 @@ export function ListView({
   const confirmDelete = async () => {
     if (!deleteId) return;
     try {
-      const response = await fetch(`/api/${collection.slug}/${deleteId}`, {
-        method: "DELETE",
-      });
-      if (response.ok) {
-        setDocs((prev) => prev.filter((d) => d.id !== deleteId));
-      }
+      await apiDelete(`/api/${collection.slug}/${deleteId}`);
+      setDocs((prev) => prev.filter((d) => d.id !== deleteId));
     } catch (error) {
       console.error("Failed to delete:", error);
     }
@@ -101,7 +96,8 @@ export function ListView({
               className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] focus:border-[var(--kyro-primary)] transition-all text-sm font-medium"
             />
           </div>
-          <button type="button"
+          <button
+            type="button"
             className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-black text-xs shadow-lg active:scale-95 transition-all"
             onClick={onCreate}
           >
@@ -134,7 +130,8 @@ export function ListView({
             <p className="kyro-empty-text">
               Get started by creating your first one.
             </p>
-            <button type="button"
+            <button
+              type="button"
               className="kyro-btn kyro-btn-primary kyro-btn-md"
               style={{ marginTop: 16 }}
               onClick={onCreate}
@@ -228,14 +225,16 @@ export function ListView({
                     onClick={(e) => e.stopPropagation()}
                   >
                     <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button type="button"
+                      <button
+                        type="button"
                         className="p-2 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-all"
                         onClick={() => onEdit(doc.id)}
                         title="Edit"
                       >
                         <Settings className="w-4 h-4" />
                       </button>
-                      <button type="button"
+                      <button
+                        type="button"
                         className="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
                         onClick={() => handleDelete(doc.id)}
                         title="Delete"
@@ -270,7 +269,8 @@ export function ListView({
               <p className="text-xs font-black uppercase tracking-widest">
                 Docs Selected
               </p>
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setSelectedIds(new Set())}
                 className="text-[10px] font-bold text-[var(--kyro-primary)] hover:underline"
               >
@@ -279,10 +279,14 @@ export function ListView({
             </div>
           </div>
           <div className="flex items-center gap-3 pr-2">
-            <button type="button" className="flex items-center gap-2 px-6 py-2.5 bg-green-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-green-500/20 active:scale-95 transition-all">
+            <button
+              type="button"
+              className="flex items-center gap-2 px-6 py-2.5 bg-green-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-green-500/20 active:scale-95 transition-all"
+            >
               Publish
             </button>
-            <button type="button"
+            <button
+              type="button"
               onClick={async () => {
                 if (
                   window.confirm(
@@ -290,9 +294,7 @@ export function ListView({
                   )
                 ) {
                   for (const id of Array.from(selectedIds)) {
-                    await fetch(`/api/${collection.slug}/${id}`, {
-                      method: "DELETE",
-                    });
+                    await apiDelete(`/api/${collection.slug}/${id}`);
                   }
                   loadDocs();
                   setSelectedIds(new Set());

package/src/components/LoginPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { apiGet, apiPost } from "@kyro-cms/utils/lib/api";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import { Toast, ToastProvider } from "./ui/Toast";
 
@@ -30,11 +31,7 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
 
   const checkIfFirstUser = async () => {
     try {
-      const res = await fetch("/api/auth/users");
-      if (res.status === 401 || res.status === 404) {
-        setIsFirstUser(true);
-        setMode("register");
-      }
+      await apiGet("/api/auth/users");
     } catch {
       setIsFirstUser(true);
       setMode("register");
@@ -61,18 +58,7 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
         body.confirmPassword = confirmPassword;
       }
 
-      const res = await fetch(endpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        addToast("error", data.error || "Something went wrong");
-        return;
-      }
+      const data = await apiPost(endpoint, body);
 
       if (data.isFirstUser) {
         setIsFirstUser(true);