@kyro-cms/admin 0.1.2

package/src/components/ListView.tsx

@@ -0,0 +1,192 @@
+import { useState, useEffect } from "react";
+import type { CollectionConfig, KyroConfig } from "@kyro-cms/core";
+import { Spinner } from "./ui/Spinner";
+
+interface ListViewProps {
+  config: KyroConfig;
+  collection: CollectionConfig;
+  onCreate: () => void;
+  onEdit: (id: string) => void;
+}
+
+export function ListView({
+  config,
+  collection,
+  onCreate,
+  onEdit,
+}: ListViewProps) {
+  const [docs, setDocs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [limit] = useState(25);
+
+  const label = collection.label || collection.slug;
+
+  useEffect(() => {
+    loadDocs();
+  }, [page]);
+
+  const loadDocs = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(
+        `/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) {
+      console.error("Failed to load docs:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Delete this document?")) return;
+    try {
+      const response = await fetch(`/api/${collection.slug}/${id}`, {
+        method: "DELETE",
+      });
+      if (response.ok) {
+        setDocs((prev) => prev.filter((d) => d.id !== id));
+      }
+    } catch (error) {
+      console.error("Failed to delete:", error);
+    }
+  };
+
+  const columns =
+    collection.admin?.defaultColumns ||
+    Object.keys(collection.fields || {}).slice(0, 4);
+
+  return (
+    <div className="kyro-list">
+      <div className="kyro-list-header">
+        <h2 className="kyro-list-title">{label}</h2>
+        <button
+          className="kyro-btn kyro-btn-primary kyro-btn-md"
+          onClick={onCreate}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+          Create {label}
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="kyro-loading">
+          <Spinner />
+        </div>
+      ) : docs.length === 0 ? (
+        <div className="kyro-card">
+          <div className="kyro-empty">
+            <svg
+              className="kyro-empty-icon"
+              width="40"
+              height="40"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+            </svg>
+            <p className="kyro-empty-title">No {label.toLowerCase()} yet</p>
+            <p className="kyro-empty-text">
+              Get started by creating your first one.
+            </p>
+            <button
+              className="kyro-btn kyro-btn-primary kyro-btn-md"
+              style={{ marginTop: 16 }}
+              onClick={onCreate}
+            >
+              Create {label}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="kyro-card">
+          <table className="kyro-table">
+            <thead>
+              <tr>
+                {columns.map((col) => (
+                  <th key={col}>{col}</th>
+                ))}
+                <th style={{ width: 100 }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {docs.map((doc) => (
+                <tr key={doc.id}>
+                  {columns.map((col) => (
+                    <td key={col}>{formatValue(doc[col])}</td>
+                  ))}
+                  <td>
+                    <div className="kyro-table-actions">
+                      <button
+                        className="kyro-table-action"
+                        onClick={() => onEdit(doc.id)}
+                        title="Edit"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                      </button>
+                      <button
+                        className="kyro-table-action danger"
+                        onClick={() => handleDelete(doc.id)}
+                        title="Delete"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          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>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatValue(value: any): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "object") {
+    if (value.title) return value.title;
+    if (value.name) return value.name;
+    return JSON.stringify(value).slice(0, 50);
+  }
+  return String(value).slice(0, 50);
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,76 @@
+import React, { type ReactNode } from "react";
+
+interface StatusBadgeProps {
+  status:
+    | "draft"
+    | "published"
+    | "scheduled"
+    | "archived"
+    | "active"
+    | "inactive"
+    | "pending"
+    | "completed"
+    | "cancelled";
+  children?: ReactNode;
+}
+
+export function StatusBadge({ status, children }: StatusBadgeProps) {
+  const statusConfig: Record<string, { class: string; defaultLabel?: string }> =
+    {
+      draft: { class: "bg-gray-100 text-gray-600", defaultLabel: "Draft" },
+      published: {
+        class: "bg-green-100 text-green-700",
+        defaultLabel: "Published",
+      },
+      scheduled: {
+        class: "bg-blue-100 text-blue-700",
+        defaultLabel: "Scheduled",
+      },
+      archived: {
+        class: "bg-yellow-100 text-yellow-700",
+        defaultLabel: "Archived",
+      },
+      active: { class: "bg-green-100 text-green-700", defaultLabel: "Active" },
+      inactive: {
+        class: "bg-gray-100 text-gray-600",
+        defaultLabel: "Inactive",
+      },
+      pending: {
+        class: "bg-yellow-100 text-yellow-700",
+        defaultLabel: "Pending",
+      },
+      completed: {
+        class: "bg-green-100 text-green-700",
+        defaultLabel: "Completed",
+      },
+      cancelled: {
+        class: "bg-red-100 text-red-700",
+        defaultLabel: "Cancelled",
+      },
+    };
+
+  const config = statusConfig[status] || { class: "bg-gray-100 text-gray-600" };
+
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.class}`}
+    >
+      {children || config.defaultLabel || status}
+    </span>
+  );
+}
+
+interface CountBadgeProps {
+  count: number;
+  max?: number;
+}
+
+export function CountBadge({ count, max = 99 }: CountBadgeProps) {
+  if (count === 0) return null;
+
+  return (
+    <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-medium bg-gray-200 text-gray-700 rounded-full">
+      {count > max ? `${max}+` : count}
+    </span>
+  );
+}

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,155 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  type ReactNode,
+} from "react";
+import {
+  defaultLightTheme,
+  defaultDarkTheme,
+  type ThemeConfig,
+} from "@kyro-cms/core";
+
+export type ThemeMode = "light" | "dark" | "system";
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  theme: ThemeConfig;
+  setMode: (mode: ThemeMode) => void;
+  setCustomTheme: (theme: ThemeConfig) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultMode?: ThemeMode;
+  themes?: {
+    light?: ThemeConfig;
+    dark?: ThemeConfig;
+  };
+}
+
+export function ThemeProvider({
+  children,
+  defaultMode = "light",
+  themes = {},
+}: ThemeProviderProps) {
+  const [mode, setMode] = useState<ThemeMode>(defaultMode);
+  const [customTheme, setCustomTheme] = useState<ThemeConfig | null>(null);
+
+  const lightTheme = themes.light || defaultLightTheme;
+  const darkTheme = themes.dark || defaultDarkTheme;
+
+  const getResolvedTheme = (): ThemeConfig => {
+    if (customTheme) return customTheme;
+
+    if (mode === "system") {
+      if (typeof window !== "undefined") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? darkTheme
+          : lightTheme;
+      }
+      return lightTheme;
+    }
+
+    return mode === "dark" ? darkTheme : lightTheme;
+  };
+
+  const [theme, setTheme] = useState<ThemeConfig>(lightTheme);
+
+  useEffect(() => {
+    const resolved = getResolvedTheme();
+    setTheme(resolved);
+    applyThemeVariables(resolved);
+  }, [mode, customTheme]);
+
+  useEffect(() => {
+    if (mode !== "system") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const resolved = getResolvedTheme();
+      setTheme(resolved);
+      applyThemeVariables(resolved);
+    };
+
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [mode, customTheme]);
+
+  const applyThemeVariables = (config: ThemeConfig) => {
+    const root = document.documentElement;
+
+    if (config.colors) {
+      Object.entries(config.colors).forEach(([key, value]) => {
+        root.style.setProperty(`--kyro-${key}`, value);
+        root.style.setProperty(
+          `--kyro-${key}-light`,
+          adjustBrightness(value, 0.9),
+        );
+        root.style.setProperty(
+          `--kyro-${key}-dark`,
+          adjustBrightness(value, 0.8),
+        );
+      });
+    }
+
+    if (config.borderRadius) {
+      Object.entries(config.borderRadius).forEach(([key, value]) => {
+        root.style.setProperty(`--kyro-radius-${key}`, value);
+      });
+    }
+
+    if (config.fonts) {
+      Object.entries(config.fonts).forEach(([key, value]) => {
+        root.style.setProperty(`--kyro-font-${key}`, value);
+      });
+    }
+  };
+
+  const adjustBrightness = (hex: string, factor: number): string => {
+    if (!hex.startsWith("#")) return hex;
+
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    const adjust = (c: number) =>
+      Math.round(c * factor)
+        .toString(16)
+        .padStart(2, "0");
+
+    return `#${adjust(r)}${adjust(g)}${adjust(b)}`;
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        mode,
+        theme,
+        setMode,
+        setCustomTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const LightThemeProvider = (
+  props: Omit<ThemeProviderProps, "defaultMode">,
+) => <ThemeProvider defaultMode="light" {...props} />;
+
+export const DarkThemeProvider = (
+  props: Omit<ThemeProviderProps, "defaultMode">,
+) => <ThemeProvider defaultMode="dark" {...props} />;

package/src/components/VersionHistoryPanel.tsx

@@ -0,0 +1,205 @@
+import React from "react";
+import { SlidePanel } from "./ui/SlidePanel";
+import { Button } from "./ui/Button";
+import { Spinner } from "./ui/Spinner";
+
+interface Version {
+  id: string;
+  version: number;
+  createdAt: string;
+  updatedAt: string;
+  createdBy?: {
+    id: string;
+    name: string;
+    email?: string;
+  };
+  status: "draft" | "published";
+  changelog?: string;
+}
+
+interface VersionHistoryPanelProps {
+  open: boolean;
+  onClose: () => void;
+  versions: Version[];
+  currentVersionId?: string;
+  onPreview: (version: Version) => void;
+  onRestore: (version: Version) => void;
+  onCompare?: (v1: Version, v2: Version) => void;
+  loading?: boolean;
+}
+
+export function VersionHistoryPanel({
+  open,
+  onClose,
+  versions,
+  currentVersionId,
+  onPreview,
+  onRestore,
+  onCompare,
+  loading = false,
+}: VersionHistoryPanelProps) {
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const formatTimeAgo = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return formatDate(dateStr);
+  };
+
+  return (
+    <SlidePanel
+      open={open}
+      onClose={onClose}
+      title="Version History"
+      width="md"
+    >
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Spinner />
+        </div>
+      ) : versions.length === 0 ? (
+        <div className="text-center py-12 text-gray-500">
+          <svg
+            className="w-12 h-12 mx-auto mb-4 text-gray-300"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12,6 12,12 16,14" />
+          </svg>
+          <p>No version history yet</p>
+          <p className="text-sm text-gray-400 mt-1">
+            Versions are created when you save changes
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {versions.map((version) => (
+            <div
+              key={version.id}
+              className={`p-3 rounded-lg border transition-colors ${
+                version.id === currentVersionId
+                  ? "border-primary bg-primary-light/30"
+                  : "border-gray-100 hover:border-gray-200 hover:bg-gray-50"
+              }`}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span
+                      className={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
+                        version.status === "published"
+                          ? "bg-green-100 text-green-700"
+                          : "bg-gray-100 text-gray-600"
+                      }`}
+                    >
+                      {version.status === "published" ? "Published" : "Draft"}
+                    </span>
+                    <span className="text-xs text-gray-400">
+                      v{version.version}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600 truncate">
+                    {formatTimeAgo(version.createdAt)}
+                  </p>
+                  {version.createdBy && (
+                    <p className="text-xs text-gray-400 mt-0.5">
+                      by {version.createdBy.name || version.createdBy.email}
+                    </p>
+                  )}
+                  {version.changelog && (
+                    <p className="text-xs text-gray-500 mt-1 truncate">
+                      {version.changelog}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center gap-1 ml-2">
+                  <button
+                    onClick={() => onPreview(version)}
+                    className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                    title="Preview this version"
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      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>
+                  </button>
+                  {onCompare && (
+                    <button
+                      onClick={() =>
+                        onCompare(
+                          version,
+                          versions.find((v) => v.id === currentVersionId) ||
+                            version,
+                        )
+                      }
+                      className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                      title="Compare with current"
+                    >
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <path d="M16 3h5v5M8 3H3v5M3 16v5h5M21 16v5h-5M3 12h18" />
+                      </svg>
+                    </button>
+                  )}
+                  {version.id !== currentVersionId && (
+                    <button
+                      onClick={() => onRestore(version)}
+                      className="p-1.5 text-gray-400 hover:text-primary hover:bg-primary-light rounded transition-colors"
+                      title="Restore this version"
+                    >
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                        <path d="M3 3v5h5" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </SlidePanel>
+  );
+}

package/src/components/fields/CheckboxField.tsx

@@ -0,0 +1,37 @@
+import type { CheckboxField as CheckboxFieldType } from '@kyro-cms/core';
+
+interface CheckboxFieldComponentProps {
+  field: CheckboxFieldType;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function CheckboxField({ field, value = false, onChange, error, disabled }: CheckboxFieldComponentProps) {
+  return (
+    <div className="space-y-1">
+      <label className="flex items-center gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={value}
+          onChange={(e) => onChange?.(e.target.checked)}
+          disabled={disabled || field.admin?.readOnly}
+          className={`w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 ${
+            disabled || field.admin?.readOnly ? 'opacity-50' : ''
+          }`}
+        />
+        <span className="text-sm font-medium text-gray-700">
+          {field.label || field.name}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </span>
+      </label>
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500 ml-6">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600 ml-6">{error}</p>
+      )}
+    </div>
+  );
+}