@kyro-cms/admin 0.1.2

package/src/components/ActionBar.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import { Spinner } from "./ui/Spinner";
+
+export type DocumentStatus = "draft" | "published" | "scheduled" | "archived";
+export type SaveStatus = "idle" | "saving" | "saved" | "error";
+
+export interface ActionBarProps {
+  status: DocumentStatus;
+  saveStatus: SaveStatus;
+  hasChanges: boolean;
+  onSave: () => void;
+  onPublish?: () => void;
+  onUnpublish?: () => void;
+  onDuplicate?: () => void;
+  onViewHistory?: () => void;
+  onPreview?: () => void;
+  onDelete?: () => void;
+  publishedAt?: string | null;
+  updatedAt?: string | null;
+}
+
+export function ActionBar({
+  status,
+  saveStatus,
+  hasChanges,
+  onSave,
+  onPublish,
+  onUnpublish,
+  onDuplicate,
+  onViewHistory,
+  onPreview,
+  onDelete,
+  publishedAt,
+  updatedAt,
+}: ActionBarProps) {
+  const getSaveStatusText = () => {
+    if (saveStatus === "saving") return "Saving...";
+    if (saveStatus === "saved") return "Saved";
+    if (saveStatus === "error") return "Error saving";
+    if (hasChanges) return "Unsaved changes";
+    return null;
+  };
+
+  const getStatusBadge = () => {
+    const statusConfig = {
+      draft: { label: "Draft", class: "bg-gray-100 text-gray-600" },
+      published: { label: "Published", class: "bg-green-100 text-green-700" },
+      scheduled: { label: "Scheduled", class: "bg-blue-100 text-blue-700" },
+      archived: { label: "Archived", class: "bg-yellow-100 text-yellow-700" },
+    };
+    const config = statusConfig[status];
+    return (
+      <span
+        className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.class}`}
+      >
+        {config.label}
+      </span>
+    );
+  };
+
+  const formatDate = (dateStr: string | null | undefined) => {
+    if (!dateStr) return "Never";
+    return new Date(dateStr).toLocaleString();
+  };
+
+  return (
+    <div className="flex items-center justify-between py-3 px-1">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          {getStatusBadge()}
+          {getSaveStatusText() && (
+            <span
+              className={`text-sm ${saveStatus === "error" ? "text-red-500" : "text-gray-500"}`}
+            >
+              {saveStatus === "saving" ? (
+                <Spinner size="sm" className="inline mr-1" />
+              ) : null}
+              {getSaveStatusText()}
+            </span>
+          )}
+        </div>
+        <div className="text-xs text-gray-400 space-y-0.5">
+          {updatedAt && <div>Updated: {formatDate(updatedAt)}</div>}
+          {publishedAt && status === "published" && (
+            <div>Published: {formatDate(publishedAt)}</div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {status === "draft" && onPublish && (
+          <button
+            onClick={onPublish}
+            disabled={saveStatus === "saving"}
+            className="kyro-btn kyro-btn-primary kyro-btn-md"
+          >
+            Publish
+          </button>
+        )}
+        {status === "published" && onUnpublish && (
+          <button
+            onClick={onUnpublish}
+            disabled={saveStatus === "saving"}
+            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+          >
+            Unpublish
+          </button>
+        )}
+        <button
+          onClick={onSave}
+          disabled={
+            saveStatus === "saving" || (!hasChanges && saveStatus !== "error")
+          }
+          className="kyro-btn kyro-btn-secondary kyro-btn-md"
+        >
+          {saveStatus === "saving" ? "Saving..." : "Save"}
+        </button>
+
+        <Dropdown
+          trigger={
+            <button className="kyro-btn kyro-btn-ghost kyro-btn-md p-2">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" />
+              </svg>
+            </button>
+          }
+        >
+          {onDuplicate && (
+            <DropdownItem
+              onClick={onDuplicate}
+              icon={
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <rect x="9" y="9" width="13" height="13" rx="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+              }
+            >
+              Duplicate
+            </DropdownItem>
+          )}
+          {onViewHistory && (
+            <DropdownItem
+              onClick={onViewHistory}
+              icon={
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12,6 12,12 16,14" />
+                </svg>
+              }
+            >
+              View History
+            </DropdownItem>
+          )}
+          {onPreview && (
+            <DropdownItem
+              onClick={onPreview}
+              icon={
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>
+              }
+            >
+              Preview
+            </DropdownItem>
+          )}
+          {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
+          {onDelete && (
+            <DropdownItem
+              onClick={onDelete}
+              danger
+              icon={
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+              }
+            >
+              Delete
+            </DropdownItem>
+          )}
+        </Dropdown>
+      </div>
+    </div>
+  );
+}

package/src/components/Admin.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect } from "react";
+import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core";
+import { Sidebar } from "./layout/Sidebar";
+import { ListView } from "./ListView";
+import { DetailView } from "./DetailView";
+import { CreateView } from "./CreateView";
+import { Toast, ToastProvider } from "./ui/Toast";
+import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
+import "../styles/main.css";
+
+type View = "list" | "detail" | "create" | "settings";
+
+export interface KyroAdminConfig {
+  collections?: CollectionConfig[] | Record<string, CollectionConfig>;
+  globals?: GlobalConfig[] | Record<string, GlobalConfig>;
+  adapter?: unknown;
+  name?: string;
+}
+
+interface AdminProps {
+  config: KyroAdminConfig;
+  theme?: ThemeMode;
+  onThemeChange?: (mode: ThemeMode) => void;
+}
+
+interface ToastMessage {
+  id: string;
+  type: "success" | "error" | "info" | "warning";
+  message: 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 [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 collections = normalizeCollections(config.collections);
+  const globals = normalizeGlobals(config.globals);
+
+  useEffect(() => {
+    const collectionKeys = Object.keys(collections);
+    if (collectionKeys.length > 0 && !activeCollection) {
+      setActiveCollection(collectionKeys[0]);
+    }
+  }, []);
+
+  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 handleCollectionChange = (collectionName: string) => {
+    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) => {
+    setCurrentView(view);
+    setSelectedId(id || null);
+  };
+
+  const handleActionComplete = (action: string) => {
+    const messages: Record<string, string> = {
+      create: "Created successfully",
+      update: "Updated successfully",
+      delete: "Deleted successfully",
+      publish: "Published successfully",
+    };
+    addToast("success", messages[action] || "Action completed");
+    if (action !== "delete") {
+      setCurrentView("list");
+    }
+  };
+
+  const handleError = (message: string) => {
+    addToast("error", message);
+  };
+
+  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={() => handleActionComplete("update")}
+          onError={handleError}
+          mode="global"
+        />
+      );
+    }
+
+    if (!activeCollection) return null;
+
+    const collection = collections[activeCollection];
+    if (!collection) return null;
+
+    switch (currentView) {
+      case "create":
+        return (
+          <CreateView
+            config={{} as any}
+            collection={collection}
+            onCancel={() => setCurrentView("list")}
+            onSuccess={() => handleActionComplete("create")}
+            onError={handleError}
+          />
+        );
+      case "detail":
+        return (
+          <DetailView
+            config={{} as any}
+            collection={collection}
+            documentId={selectedId || undefined}
+            onBack={() => setCurrentView("list")}
+            onSave={() => handleActionComplete("update")}
+            onDelete={() => handleActionComplete("delete")}
+            onError={handleError}
+          />
+        );
+      default:
+        return (
+          <ListView
+            config={{} as any}
+            collection={collection}
+            onCreate={() => setCurrentView("create")}
+            onEdit={(id) => handleNavigate("detail", id)}
+          />
+        );
+    }
+  };
+
+  return (
+    <ThemeProvider defaultMode={theme}>
+      <ToastProvider>
+        <div className="kyro-admin">
+          <Sidebar
+            collections={collections}
+            globals={globals}
+            activeCollection={activeCollection}
+            activeGlobal={activeGlobal}
+            onCollectionClick={handleCollectionChange}
+            onGlobalClick={handleGlobalChange}
+          />
+          <div className="kyro-main">
+            <div className="kyro-content">{renderContent()}</div>
+          </div>
+          {toasts.map((toast) => (
+            <Toast
+              key={toast.id}
+              type={toast.type}
+              message={toast.message}
+              onClose={() =>
+                setToasts((prev) => prev.filter((t) => t.id !== toast.id))
+              }
+            />
+          ))}
+        </div>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}