@kyro-cms/admin 0.1.2

package/src/components/BulkActionsBar.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import { CountBadge } from "./StatusBadge";
+
+interface BulkAction {
+  label: string;
+  onClick: () => void;
+  icon?: React.ReactNode;
+  danger?: boolean;
+}
+
+interface BulkActionsBarProps {
+  selectedCount: number;
+  onClearSelection: () => void;
+  actions: BulkAction[];
+  onSelectAll?: () => void;
+}
+
+export function BulkActionsBar({
+  selectedCount,
+  onClearSelection,
+  actions,
+  onSelectAll,
+}: BulkActionsBarProps) {
+  if (selectedCount === 0) return null;
+
+  return (
+    <div className="flex items-center justify-between py-2 px-4 bg-gray-50 border-b border-gray-200">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <CountBadge count={selectedCount} />
+          <span className="text-sm text-gray-600">selected</span>
+        </div>
+        <button
+          onClick={onClearSelection}
+          className="text-sm text-gray-500 hover:text-gray-700"
+        >
+          Clear selection
+        </button>
+        {onSelectAll && (
+          <button
+            onClick={onSelectAll}
+            className="text-sm text-gray-500 hover:text-gray-700"
+          >
+            Select all
+          </button>
+        )}
+      </div>
+
+      <Dropdown
+        trigger={
+          <button className="kyro-btn kyro-btn-secondary kyro-btn-sm">
+            Actions
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </button>
+        }
+      >
+        {actions.map((action, index) => (
+          <DropdownItem
+            key={index}
+            onClick={action.onClick}
+            icon={action.icon as React.ReactElement}
+            danger={action.danger}
+          >
+            {action.label}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}

package/src/components/CreateView.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import type { KyroConfig, CollectionConfig } from "@kyro-cms/core";
+import { AutoForm } from "./AutoForm";
+import { Spinner } from "./ui/Spinner";
+
+interface CreateViewProps {
+  config: KyroConfig;
+  collection: CollectionConfig;
+  onCancel: () => void;
+  onSuccess: () => void;
+  onError: (message: string) => void;
+}
+
+export function CreateView({
+  config,
+  collection,
+  onCancel,
+  onSuccess,
+  onError,
+}: CreateViewProps) {
+  const [data, setData] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+
+  const fields = collection.fields || [];
+  const label = collection.label || collection.slug;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setSaving(true);
+      const response = await fetch(`/api/${collection.slug}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || "Failed to create");
+      }
+
+      onSuccess();
+    } catch (err) {
+      onError(err instanceof Error ? err.message : "Failed to create");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="kyro-detail">
+      <div className="kyro-detail-header">
+        <button className="kyro-detail-back" onClick={onCancel}>
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <h2 className="kyro-detail-title">Create {label}</h2>
+        <div className="kyro-detail-actions">
+          <button
+            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+            onClick={onCancel}
+            disabled={saving}
+          >
+            Cancel
+          </button>
+          <button
+            className="kyro-btn kyro-btn-primary kyro-btn-md"
+            onClick={handleSubmit}
+            disabled={saving}
+          >
+            {saving ? <Spinner size="sm" /> : `Create ${label}`}
+          </button>
+        </div>
+      </div>
+
+      <div className="kyro-detail-body">
+        <div className="kyro-card">
+          <div className="kyro-card-content">
+            <form onSubmit={handleSubmit}>
+              <AutoForm
+                config={{ ...collection, fields }}
+                data={data}
+                onChange={setData}
+              />
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/DetailView.tsx

@@ -0,0 +1,329 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import type {
+  KyroConfig,
+  CollectionConfig,
+  GlobalConfig,
+} from "@kyro-cms/core";
+import { AutoForm } from "./AutoForm";
+import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
+import { ConfirmModal } from "./ui/Modal";
+import { Spinner } from "./ui/Spinner";
+
+interface DetailViewProps {
+  config: KyroConfig;
+  collection?: CollectionConfig;
+  global?: GlobalConfig;
+  documentId?: string;
+  onBack: () => void;
+  onSave: () => void;
+  onDelete?: () => void;
+  onError: (message: string) => void;
+  mode?: "collection" | "global";
+  autosave?: boolean;
+  autosaveDelay?: number;
+}
+
+export function DetailView({
+  config,
+  collection,
+  global,
+  documentId,
+  onBack,
+  onSave,
+  onDelete,
+  onError,
+  mode = "collection",
+  autosave = true,
+  autosaveDelay = 2000,
+}: DetailViewProps) {
+  const [data, setData] = useState<Record<string, unknown>>({});
+  const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
+  const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [status, setStatus] = useState<DocumentStatus>("draft");
+  const [createdAt, setCreatedAt] = useState<string | null>(null);
+  const [updatedAt, setUpdatedAt] = useState<string | null>(null);
+  const [publishedAt, setPublishedAt] = useState<string | null>(null);
+
+  const autosaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const hasChangesRef = useRef(false);
+
+  const fields = global?.fields || collection?.fields || [];
+  const label = global?.label || collection?.label || "Document";
+  const slug = global?.slug || collection?.slug || "";
+
+  const hasChanges = JSON.stringify(data) !== JSON.stringify(originalData);
+
+  useEffect(() => {
+    if (mode === "global") {
+      loadGlobal();
+    } else if (documentId) {
+      loadDocument();
+    }
+  }, [documentId, mode]);
+
+  useEffect(() => {
+    hasChangesRef.current = hasChanges;
+  }, [hasChanges]);
+
+  useEffect(() => {
+    if (autosave && hasChanges && !loading) {
+      if (autosaveTimerRef.current) {
+        clearTimeout(autosaveTimerRef.current);
+      }
+      autosaveTimerRef.current = setTimeout(() => {
+        if (hasChangesRef.current) {
+          handleSave(true);
+        }
+      }, autosaveDelay);
+    }
+
+    return () => {
+      if (autosaveTimerRef.current) {
+        clearTimeout(autosaveTimerRef.current);
+      }
+    };
+  }, [data, autosave, autosaveDelay]);
+
+  const loadDocument = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/${slug}/${documentId}`);
+      if (!response.ok) throw new Error("Failed to load document");
+      const result = await response.json();
+      const docData = result.data || {};
+      setData(docData);
+      setOriginalData(docData);
+      setStatus(result.status || "draft");
+      setCreatedAt(result.createdAt || null);
+      setUpdatedAt(result.updatedAt || null);
+      setPublishedAt(result.publishedAt || null);
+    } catch {
+      onError("Failed to load document");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadGlobal = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/globals/${slug}`);
+      if (!response.ok) throw new Error("Failed to load global");
+      const result = await response.json();
+      const globalData = result.data || {};
+      setData(globalData);
+      setOriginalData(globalData);
+      setCreatedAt(result.createdAt || null);
+      setUpdatedAt(result.updatedAt || null);
+    } catch {
+      onError("Failed to load global");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = useCallback(
+    async (isAutosave = false) => {
+      try {
+        setSaveStatus("saving");
+        const endpoint =
+          mode === "global"
+            ? `/api/globals/${slug}`
+            : `/api/${slug}/${documentId}`;
+
+        const response = await fetch(endpoint, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+
+        if (!response.ok) throw new Error("Failed to save");
+
+        if (!isAutosave) {
+          setOriginalData(data);
+          onSave();
+        }
+        setSaveStatus("saved");
+        setUpdatedAt(new Date().toISOString());
+
+        setTimeout(() => {
+          setSaveStatus("idle");
+        }, 2000);
+      } catch {
+        setSaveStatus("error");
+        if (!isAutosave) {
+          onError("Failed to save changes");
+        }
+      } finally {
+        setSaving(false);
+      }
+    },
+    [data, mode, slug, documentId, onSave, onError],
+  );
+
+  const handlePublish = async () => {
+    try {
+      setSaving(true);
+      const response = await fetch(`/api/${slug}/${documentId}/publish`, {
+        method: "POST",
+      });
+      if (!response.ok) throw new Error("Failed to publish");
+      setStatus("published");
+      setPublishedAt(new Date().toISOString());
+    } catch {
+      onError("Failed to publish");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUnpublish = async () => {
+    try {
+      setSaving(true);
+      const response = await fetch(`/api/${slug}/${documentId}/unpublish`, {
+        method: "POST",
+      });
+      if (!response.ok) throw new Error("Failed to unpublish");
+      setStatus("draft");
+    } catch {
+      onError("Failed to unpublish");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDuplicate = async () => {
+    try {
+      const response = await fetch(`/api/${slug}/${documentId}/duplicate`, {
+        method: "POST",
+      });
+      if (!response.ok) throw new Error("Failed to duplicate");
+      onError("Document duplicated successfully");
+    } catch {
+      onError("Failed to duplicate document");
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      setDeleting(true);
+      const response = await fetch(`/api/${slug}/${documentId}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) throw new Error("Failed to delete");
+      onDelete?.();
+    } catch {
+      onError("Failed to delete document");
+    } finally {
+      setDeleting(false);
+      setShowDeleteConfirm(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="kyro-detail">
+        <div className="kyro-loading">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="kyro-detail">
+      <ActionBar
+        status={status}
+        saveStatus={saveStatus}
+        hasChanges={hasChanges}
+        onSave={() => handleSave(false)}
+        onPublish={mode === "collection" ? handlePublish : undefined}
+        onUnpublish={status === "published" ? handleUnpublish : undefined}
+        onDuplicate={mode === "collection" ? handleDuplicate : undefined}
+        onViewHistory={() => {}}
+        onPreview={() =>
+          window.open(`/preview/${slug}/${documentId}`, "_blank")
+        }
+        onDelete={
+          mode === "collection" ? () => setShowDeleteConfirm(true) : undefined
+        }
+        publishedAt={publishedAt}
+        updatedAt={updatedAt}
+      />
+
+      <div className="kyro-detail-body">
+        <div className="kyro-card">
+          <div className="kyro-card-content">
+            <AutoForm
+              config={
+                collection
+                  ? { ...collection, fields: fields }
+                  : ({ slug: "unknown", fields: fields } as CollectionConfig)
+              }
+              data={data}
+              onChange={setData}
+            />
+          </div>
+        </div>
+
+        <div className="kyro-meta-card">
+          <div className="kyro-card">
+            <div className="kyro-card-header">
+              <h3 className="kyro-card-title">Info</h3>
+            </div>
+            <div className="kyro-card-content">
+              <div className="kyro-meta-item">
+                <span className="kyro-meta-label">Status</span>
+                <span
+                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
+                    status === "published"
+                      ? "bg-green-100 text-green-700"
+                      : "bg-gray-100 text-gray-600"
+                  }`}
+                >
+                  {status === "published" ? "Published" : "Draft"}
+                </span>
+              </div>
+              <div className="kyro-meta-item">
+                <span className="kyro-meta-label">Created</span>
+                <span className="kyro-meta-value">
+                  {createdAt ? new Date(createdAt).toLocaleString() : "N/A"}
+                </span>
+              </div>
+              <div className="kyro-meta-item">
+                <span className="kyro-meta-label">Updated</span>
+                <span className="kyro-meta-value">
+                  {updatedAt ? new Date(updatedAt).toLocaleString() : "N/A"}
+                </span>
+              </div>
+              {publishedAt && (
+                <div className="kyro-meta-item">
+                  <span className="kyro-meta-label">Published</span>
+                  <span className="kyro-meta-value">
+                    {new Date(publishedAt).toLocaleString()}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmModal
+        open={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        onConfirm={handleDelete}
+        title={`Delete ${label}?`}
+        message="This action cannot be undone."
+        confirmLabel="Delete"
+        variant="danger"
+        loading={deleting}
+      />
+    </div>
+  );
+}

package/src/components/Icons.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Menu, Home, Database, User } from 'lucide-react';
+
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+export const MenuIcon: React.FC<IconProps> = ({ size = 24, className = '' }) => (
+  <Menu size={size} className={className} />
+);
+
+export const HomeIcon: React.FC<IconProps> = ({ size = 18, className = '' }) => (
+  <Home size={size} className={className} />
+);
+
+export const DatabaseIcon: React.FC<IconProps> = ({ size = 18, className = '' }) => (
+  <Database size={size} className={className} />
+);
+
+export const UserIcon: React.FC<IconProps> = ({ size = 20, className = '' }) => (
+  <User size={size} className={className} />
+);