@kyro-cms/admin 0.3.2 → 0.3.5

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.3.2",
+  "version": "0.3.5",
+  "engines": {
+    "node": ">=22"
+  },
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -41,7 +44,8 @@
     }
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "scripts": {
     "dev": "astro dev",
@@ -49,11 +53,12 @@
     "preview": "astro preview",
     "check": "astro check",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "prepare": "npm run build"
   },
   "dependencies": {
-    "@astrojs/node": "^9.5.5",
-    "@astrojs/react": "^4.2.0",
+    "@astrojs/node": "^10.1.0",
+    "@astrojs/react": "^5.0.4",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
@@ -71,7 +76,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@graphiql/react": "^0.37.3",
-    "@kyro-cms/core": "^0.3.2",
+    "@kyro-cms/core": "file:..",
     "@portabletext/editor": "^6.6.3",
     "@portabletext/react": "^6.0.3",
     "@portabletext/schema": "^2.1.1",
@@ -83,19 +88,13 @@
     "@uiw/codemirror-theme-dracula": "^4.25.9",
     "@uiw/codemirror-theme-github": "^4.25.9",
     "@uiw/react-codemirror": "^4.25.9",
-    "astro": "^5.4.0",
-    "better-sqlite3": "^11.10.0",
-    "bcryptjs": "^2.4.3",
-    "drizzle-orm": "^0.45.2",
+    "astro": "^6.3.1",
     "graphiql": "^5.2.2",
+    "idb-keyval": "^6.2.2",
     "lucide-react": "^0.475.0",
-    "mongodb": "^7.1.1",
-    "mysql2": "^3.21.0",
-    "pg": "^8.20.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-image-crop": "^11.0.10",
-    "sharp": "^0.34.5",
     "slate": "^0.124.1",
     "slate-history": "^0.113.1",
     "slate-react": "^0.124.0",
@@ -108,16 +107,17 @@
     "@types/react-dom": "^19.0.0",
     "dotenv": "^17.4.2",
     "dotenv-cli": "^11.0.0",
-    "drizzle-kit": "^0.31.10",
+    "tsup": "^6.0.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.4",
-    "tsup": "^6.0.0"
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.3.0"
+    "@kyro-cms/core": "^0.3.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/danielDozie/kyro-cms"
   }
-}
+}

package/src/components/ActionBar.tsx

@@ -34,28 +34,6 @@ export function ActionBar({
   publishedAt,
   updatedAt,
 }: ActionBarProps) {
-  const styles = {
-    btn: {
-      padding: "0.5rem 1rem",
-      borderRadius: "0.75rem",
-      fontWeight: 600,
-      fontSize: "0.875rem",
-      transition: "all 0.2s",
-      border: "none",
-      cursor: "pointer",
-    },
-    idle: { backgroundColor: "#6b7280", color: "white" },
-    saving: {
-      backgroundColor: "#9ca3af",
-      color: "white",
-      opacity: 0.7,
-      cursor: "not-allowed",
-    },
-    saved: { backgroundColor: "#22c55e", color: "white" },
-    error: { backgroundColor: "#ef4444", color: "white" },
-    changes: { backgroundColor: "#eab308", color: "black" },
-  };
-
   const getSaveStatusText = () => {
     if (saveStatus === "saving") return "Saving...";
     if (saveStatus === "saved") return "Saved";
@@ -65,15 +43,12 @@ export function ActionBar({
   };
 
   const getSaveButtonClass = () => {
-    const base = "kyro-btn kyro-btn-md";
-    if (saveStatus === "saving") return `${base} opacity-50 cursor-wait`;
-    if (saveStatus === "saved")
-      return `${base} bg-green-500 hover:bg-green-600 text-white`;
-    if (saveStatus === "error")
-      return `${base} bg-red-500 hover:bg-red-600 text-white`;
-    if (hasChanges)
-      return `${base} bg-yellow-500 hover:bg-yellow-600 text-black`;
-    return `${base} bg-gray-500 hover:bg-gray-600 text-white`;
+    const base = "kyro-btn kyro-btn-md text-[11px] font-bold  tracking-widest transition-all duration-300";
+    if (saveStatus === "saving") return `${base} bg-[var(--kyro-gray-400)] text-white opacity-70 cursor-wait`;
+    if (saveStatus === "saved") return `${base} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-white shadow-[0_0_15px_rgba(34,197,94,0.3)]`;
+    if (saveStatus === "error") return `${base} bg-[var(--kyro-error)] border-[var(--kyro-error)] text-white shadow-[0_0_15px_rgba(239,68,68,0.3)]`;
+    if (hasChanges) return `${base} bg-[var(--kyro-warning)] border-[var(--kyro-warning)] text-black shadow-[0_0_15px_rgba(255,174,0,0.3)] animate-pulse`;
+    return `${base} bg-[var(--kyro-gray-500)] border-[var(--kyro-gray-500)] text-white hover:bg-[var(--kyro-gray-600)]`;
   };
 
   const getStatusBadge = () => {
@@ -234,18 +209,7 @@ export function ActionBar({
           disabled={
             saveStatus === "saving" || (!hasChanges && saveStatus !== "error")
           }
-          style={{
-            ...styles.btn,
-            ...(saveStatus === "saving"
-              ? styles.saving
-              : saveStatus === "saved"
-                ? styles.saved
-                : saveStatus === "error"
-                  ? styles.error
-                  : hasChanges
-                    ? styles.changes
-                    : styles.idle),
-          }}
+          className={getSaveButtonClass()}
         >
           {saveStatus === "saving"
             ? "Saving..."

package/src/components/Admin.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { apiPost } from "../lib/api";
+import { useToastStore, toast, useAuthStore, type AuthUser } from "../lib/stores";
 import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import { ListView } from "./ListView";
 import { DetailView } from "./DetailView";
@@ -12,8 +13,10 @@ import { DeveloperCenter } from "./DeveloperCenter";
 import { WebhookManager } from "./WebhookManager";
 import { MediaGallery } from "./MediaGallery";
 import { CommandPalette } from "./ui/CommandPalette";
+import { GlobalModal } from "./ui/GlobalModal";
 import { Toast, ToastProvider } from "./ui/Toast";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
+import { toArray, toCollectionMap, toGlobalMap } from "../lib/config";
 import "../styles/main.css";
 
 type View =
@@ -42,332 +45,190 @@ interface AdminProps {
   onThemeChange?: (mode: ThemeMode) => void;
 }
 
-interface ToastMessage {
-  id: string;
-  type: "success" | "error" | "info" | "warning";
-  message: string;
-}
-
-interface AuthUser {
-  id: string;
-  email: string;
-  role: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-function normalizeCollections(
-  input?: CollectionConfig[] | Record<string, CollectionConfig>,
-): Record<string, CollectionConfig> {
-  if (!input) return {};
-
-  if (Array.isArray(input)) {
-    return input.reduce(
-      (acc, c) => {
-        if (c.slug) acc[c.slug] = c;
-        return acc;
-      },
-      {} as Record<string, CollectionConfig>,
-    );
-  }
-
-  return input as Record<string, CollectionConfig>;
-}
-
-function normalizeGlobals(
-  input?: GlobalConfig[] | Record<string, GlobalConfig>,
-): Record<string, GlobalConfig> {
-  if (!input) return {};
-
-  if (Array.isArray(input)) {
-    return input.reduce(
-      (acc, g) => {
-        if (g.slug) acc[g.slug] = g;
-        return acc;
-      },
-      {} as Record<string, GlobalConfig>,
-    );
-  }
-
-  return input as Record<string, GlobalConfig>;
-}
-
 export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
   const [authenticated, setAuthenticated] = useState(false);
   const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
+
+  const collections = useMemo(
+    () => toCollectionMap(toArray(config.collections)),
+    [config.collections],
+  );
+
+  const globals = useMemo(
+    () => toGlobalMap(toArray(config.globals)),
+    [config.globals],
+  );
+
   const [activeCollection, setActiveCollection] = useState<string | null>(null);
   const [activeGlobal, setActiveGlobal] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<View>("list");
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [toasts, setToasts] = useState<ToastMessage[]>([]);
-  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [activeDocumentId, setActiveDocumentId] = useState<string | null>(null);
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
 
-  const collections = normalizeCollections(config.collections);
-  const globals = normalizeGlobals(config.globals);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setShowCommandPalette((prev) => !prev);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+const toasts = useToastStore((state) => state.toasts);
+   const removeToast = useToastStore((state) => state.removeToast);
 
   useEffect(() => {
-    const token = localStorage.getItem("kyro_token");
-    const userStr = localStorage.getItem("kyro_user");
-    if (token && userStr) {
+    // Basic session check
+    const checkAuth = async () => {
       try {
-        const user = JSON.parse(userStr);
-        setAuthenticated(true);
-        setCurrentUser(user);
-      } catch {
-        localStorage.removeItem("kyro_token");
-        localStorage.removeItem("kyro_user");
+        const response = await fetch("/api/users/me");
+        if (response.ok) {
+          const user = await response.json();
+          setCurrentUser(user);
+          setAuthenticated(true);
+        }
+      } catch (err) {
+        console.error("Auth check failed", err);
       }
-    }
+    };
+    checkAuth();
   }, []);
 
   useEffect(() => {
-    // No longer auto-selecting the first collection to allow Dashboard as home
-  }, [authenticated]);
-
-  const handleAuth = (token: string, user: AuthUser) => {
-    setAuthenticated(true);
-    setCurrentUser(user);
-  };
-
-  const handleLogout = async () => {
-    try {
-      await apiPost("/api/auth/logout");
-    } catch {
-    } finally {
-      localStorage.removeItem("kyro_token");
-      localStorage.removeItem("kyro_user");
-      setAuthenticated(false);
-      setCurrentUser(null);
-    }
-  };
-
-  const addToast = (type: ToastMessage["type"], message: string) => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 5000);
-  };
-
-  const removeToast = (id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  };
-
-  const handleCollectionChange = (collectionName: string) => {
-    if (!collectionName) {
-      setActiveCollection(null);
-      setActiveGlobal(null);
-      setCurrentView("list");
-      setSelectedId(null);
-      return;
-    }
-
-    // Check if it's a special governance or developer view
-    if (
-      [
-        "users",
-        "roles",
-        "audit",
-        "media",
-        "branding",
-        "developer",
-        "webhooks",
-      ].includes(collectionName)
-    ) {
-      setActiveCollection(null);
-      setActiveGlobal(null);
-      setCurrentView(collectionName as any);
-      return;
+    if (authenticated && !activeCollection) {
+      const firstCol = Object.keys(collections)[0];
+      if (firstCol) setActiveCollection(firstCol);
     }
+  }, [authenticated, collections, activeCollection]);
 
-    setActiveCollection(collectionName);
-    setActiveGlobal(null);
-    setCurrentView("list");
-    setSelectedId(null);
-  };
-
-  const handleGlobalChange = (globalName: string) => {
-    setActiveGlobal(globalName);
-    setActiveCollection(null);
-    setCurrentView("settings");
-    setSelectedId(null);
-  };
-
-  const handleNavigate = (view: View, id?: string) => {
+  const handleNavigate = (view: View, collection: string | null = null, id: string | null = null) => {
     setCurrentView(view);
-    setSelectedId(id || null);
+    if (collection) setActiveCollection(collection);
+    if (id) setActiveDocumentId(id);
+    setIsCommandPaletteOpen(false);
   };
 
-  const handleActionComplete = (action: string) => {
-    const messages: Record<string, string> = {
-      create: "Created successfully",
-      update: "Updated successfully",
-      delete: "Deleted successfully",
-      publish: "Published successfully",
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsCommandPaletteOpen((prev) => !prev);
+      }
     };
-    addToast("success", messages[action] || "Action completed");
-    if (action !== "delete") {
-      setCurrentView("list");
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const handleLogin = async (data: Record<string, unknown>) => {
+    try {
+      const response = await apiPost<any>("/api/users/login", data);
+      if (response.user) {
+        setCurrentUser(response.user);
+        setAuthenticated(true);
+        toast.success("Welcome back!");
+      }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Login failed";
+      toast.error(message || "Login failed");
     }
   };
 
-  const handleError = (message: string) => {
-    addToast("error", message);
-  };
+  if (!authenticated) {
+    return (
+      <LoginPage
+        onAuth={(token, user) => {
+          setCurrentUser(user as any);
+          setAuthenticated(true);
+        }}
+        theme={theme as any}
+      />
+    );
+  }
 
   const renderContent = () => {
-    if (currentView === "settings" && activeGlobal) {
-      const global = globals[activeGlobal];
-      if (!global) return null;
-      return (
-        <DetailView
-          config={{} as any}
-          global={global}
-          onBack={() => setCurrentView("list")}
-          onSave={() => addToast("success", "Configuration saved successfully")}
-          onError={handleError}
-          mode="global"
-        />
-      );
-    }
-
-    if (!activeCollection && !activeGlobal) {
-      if (currentView === "users") return <UserManagement />;
-      if (currentView === "roles")
-        return (
-          <div className="p-6">
-            <h2 className="text-xl font-bold">Roles Management</h2>
-            <p className="text-gray-500 mt-2">
-              Configure user roles and permissions.
-            </p>
-          </div>
-        );
-      if (currentView === "audit")
-        return (
-          <div className="p-6">
-            <h2 className="text-xl font-bold">Audit Logs</h2>
-            <p className="text-gray-500 mt-2">
-              View system activity and changes.
-            </p>
-          </div>
-        );
-      if (currentView === "media") return <MediaGallery />;
-      if (currentView === "branding") return <BrandingHub />;
-      if (currentView === "developer")
-        return <DeveloperCenter collections={collections} />;
-      if (currentView === "webhooks") return <WebhookManager />;
-
-      return (
-        <Dashboard
-          collections={collections}
-          onNavigate={(view, collection) => {
-            if (collection) {
-              setActiveCollection(collection);
-              setActiveGlobal(null);
-            }
-            setCurrentView(view as any);
-          }}
-          user={currentUser}
-        />
-      );
-    }
-
-    if (!activeCollection) return null;
-
-    const collection = collections[activeCollection];
-    if (!collection) return null;
+    const collection = activeCollection ? collections[activeCollection] : null;
 
     switch (currentView) {
       case "create":
-        return (
+        return collection ? (
           <CreateView
-            config={{} as any}
+            config={config as any}
             collection={collection}
+            onSuccess={() => setCurrentView("list")}
             onCancel={() => setCurrentView("list")}
-            onSuccess={() => handleActionComplete("create")}
-            onError={handleError}
+            onError={(msg) => toast.error(msg)}
           />
-        );
+        ) : null;
+
       case "detail":
-        return (
+        return collection && activeDocumentId ? (
           <DetailView
-            config={{} as any}
+            config={config as any}
             collection={collection}
-            documentId={selectedId || undefined}
+            documentId={activeDocumentId}
             onBack={() => setCurrentView("list")}
-            onSave={() => handleActionComplete("update")}
-            onDelete={() => handleActionComplete("delete")}
-            onError={handleError}
+            onSave={() => toast.success("Changes saved")}
+            onError={(msg) => toast.error(msg)}
           />
-        );
+        ) : null;
+
+      case "users":
+        return <UserManagement />;
+
+      case "media":
+        return <MediaGallery />;
+
+      case "branding":
+        return <BrandingHub />;
+
+      case "developer":
+        return <DeveloperCenter collections={collections as any} />;
+
+      case "webhooks":
+        return <WebhookManager />;
+
+      case "list":
       default:
-        return (
+        return collection ? (
           <ListView
-            config={{} as any}
+            config={config as any}
             collection={collection}
             onCreate={() => setCurrentView("create")}
-            onEdit={(id) => handleNavigate("detail", id)}
+            onEdit={(id: string) => handleNavigate("detail", activeCollection, id)}
+          />
+        ) : (
+          <Dashboard 
+            onNavigate={handleNavigate as any} 
+            collections={collections as any}
+            user={currentUser as any}
           />
         );
     }
   };
 
-  if (!authenticated) {
-    return <LoginPage onAuth={handleAuth} theme={theme} />;
-  }
-
   return (
-    <ThemeProvider defaultMode={theme}>
-      <ToastProvider
-        toasts={toasts}
-        addToast={addToast}
-        removeToast={removeToast}
-      >
-        <div className="kyro-admin">
-          <div className="kyro-main">
-            <div className="kyro-content">{renderContent()}</div>
+    <ThemeProvider {...({ mode: theme, onChange: onThemeChange } as any)}>
+      <ToastProvider>
+        <div className="kyro-admin min-h-screen bg-[var(--kyro-bg)] text-[var(--kyro-text-primary)]">
+          <div className="flex h-screen overflow-hidden">
+            <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
+              <div className="flex-1 overflow-y-auto">
+                <CommandPalette 
+                  isOpen={isCommandPaletteOpen}
+                  onClose={() => setIsCommandPaletteOpen(false)}
+                  collections={collections as any}
+                  globals={globals as any}
+                  onNavigate={handleNavigate as any} 
+                />
+                {renderContent()}
+              </div>
+            </main>
+          </div>
+          <GlobalModal />
+          
+          <div className="kyro-toasts-container">
+            {toasts.map((t) => (
+              <Toast
+                key={t.id}
+                type={t.type}
+                message={t.message}
+                onClose={() => removeToast(t.id)}
+              />
+            ))}
           </div>
-          <CommandPalette
-            isOpen={showCommandPalette}
-            onClose={() => setShowCommandPalette(false)}
-            collections={collections}
-            globals={globals}
-            onNavigate={(view, collection, id) => {
-              if (view === "list" && collection) {
-                handleCollectionChange(collection);
-              } else if (view === "settings" && collection) {
-                handleGlobalChange(collection);
-              } else if (view === "media") {
-                setActiveCollection(null);
-                setActiveGlobal(null);
-                setCurrentView("list"); // This might need a separate 'media' view state if implemented
-              } else if (view === "create" && collection) {
-                setActiveCollection(collection);
-                setCurrentView("create");
-              }
-            }}
-          />
         </div>
       </ToastProvider>
-      {toasts.map((toast) => (
-        <Toast
-          key={toast.id}
-          type={toast.type}
-          message={toast.message}
-          onClose={() => removeToast(toast.id)}
-        />
-      ))}
     </ThemeProvider>
   );
 }