@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/fields/RelationshipBlockField.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useEffect } from "react";
+import { Search, Loader2, X } from "lucide-react";
+
+interface RelationshipBlockFieldProps {
+  relationTo?: string;
+  hasMany?: boolean;
+  selectedIds?: string[];
+  selectedId?: string;
+  labelField?: string;
+  onChange: (field: string, value: any) => void;
+  compact?: boolean;
+}
+
+export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
+  relationTo = "pages",
+  hasMany = false,
+  selectedIds = [],
+  selectedId,
+  labelField = "title",
+  onChange,
+  compact = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [options, setOptions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [collections, setCollections] = useState<string[]>([]);
+  const [loadingCollections, setLoadingCollections] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/collections", { credentials: "include" })
+      .then((res) => res.json())
+      .then((data) => {
+        setCollections(
+          (data.collections || []).map((c: any) => c.slug || c.name || c),
+        );
+        setLoadingCollections(false);
+      })
+      .catch(() => setLoadingCollections(false));
+  }, []);
+
+  const fetchOptions = (query: string = "") => {
+    setLoading(true);
+    const url = query
+      ? `/api/${relationTo}?where[${labelField}][contains]=${encodeURIComponent(query)}&limit=20`
+      : `/api/${relationTo}?limit=20`;
+
+    fetch(url, { credentials: "include" })
+      .then((res) => res.json())
+      .then((data) => {
+        setOptions(data.docs || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (isOpen) fetchOptions(search);
+  }, [isOpen, search, relationTo, labelField]);
+
+  const getLabel = (opt: any) => {
+    return (
+      opt?.[labelField] ||
+      opt?.title ||
+      opt?.name ||
+      opt?.label ||
+      opt?.filename ||
+      opt?.slug ||
+      opt?.id ||
+      "Untitled"
+    );
+  };
+
+  const activeIds = hasMany ? selectedIds : selectedId ? [selectedId] : [];
+
+  const handleSelect = (opt: any) => {
+    if (hasMany) {
+      if (activeIds.includes(opt.id)) {
+        onChange(
+          "selectedIds",
+          activeIds.filter((id: string) => id !== opt.id),
+        );
+      } else {
+        onChange("selectedIds", [...activeIds, opt.id]);
+      }
+    } else {
+      onChange("selectedId", opt.id);
+      onChange("selectedIds", [opt.id]);
+      setIsOpen(false);
+    }
+  };
+
+  const isSelected = (optId: string) => activeIds.includes(optId);
+
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  const selectClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "space-y-2" : "space-y-4"}>
+      <div className={compact ? "flex items-center gap-2" : "space-y-3"}>
+        {loadingCollections ? (
+          <div className={selectClass + " text-[var(--kyro-text-muted)]"}>
+            Loading...
+          </div>
+        ) : (
+          <select
+            value={relationTo}
+            onChange={(e) => onChange("relationTo", e.target.value)}
+            className={selectClass}
+          >
+            <option value="">Select collection...</option>
+            {collections.map((col) => (
+              <option key={col} value={col}>
+                {col}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {!compact && (
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={hasMany}
+              onChange={(e) => onChange("hasMany", e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--kyro-border)] focus:ring-[var(--kyro-sidebar-active)] focus:ring-offset-0"
+            />
+            <span className="text-sm text-[var(--kyro-text-primary)]">
+              Allow multiple
+            </span>
+          </label>
+        )}
+      </div>
+
+      <div className="relative">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setIsOpen(true);
+            }}
+            onFocus={() => setIsOpen(true)}
+            onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+            placeholder={`Search ${relationTo}...`}
+            className={`${inputClass} pl-9`}
+          />
+          <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            {loading && (
+              <Loader2 className="w-4 h-4 text-[var(--kyro-text-muted)] animate-spin" />
+            )}
+          </div>
+        </div>
+
+        {isOpen && (
+          <div className="absolute z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-48 overflow-auto">
+            {loading ? (
+              <div className="p-3 text-center text-sm text-[var(--kyro-text-muted)]">
+                Loading...
+              </div>
+            ) : options.length === 0 ? (
+              <div className="p-3 text-center text-sm text-[var(--kyro-text-muted)]">
+                No results found
+              </div>
+            ) : (
+              <div className="py-1">
+                {options.map((opt) => (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => handleSelect(opt)}
+                    className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--kyro-surface-accent)] transition-colors flex items-center justify-between ${
+                      isSelected(opt.id)
+                        ? "bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
+                        : "text-[var(--kyro-text-primary)]"
+                    }`}
+                  >
+                    <span>{getLabel(opt)}</span>
+                    {isSelected(opt.id) && <span>✓</span>}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {activeIds.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {activeIds.map((id: string) => {
+            const opt = options.find((o) => o.id === id) || { id };
+            return (
+              <span
+                key={id}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-md bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
+              >
+                {getLabel(opt)}
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => {
+                    if (hasMany) {
+                      onChange(
+                        "selectedIds",
+                        activeIds.filter((sid: string) => sid !== id),
+                      );
+                    } else {
+                      onChange("selectedId", null);
+                      onChange("selectedIds", []);
+                    }
+                  }}
+                  className="hover:opacity-70"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RelationshipBlockField;

package/src/components/fields/RelationshipField.tsx

@@ -41,22 +41,58 @@ export function RelationshipField({
 
   const fetchOptions = (query: string = "") => {
     setLoading(true);
+    const searchFields = ["title", "name", "label", "email"];
+    const searchQuery = searchFields
+      .map((f) => `where[${f}][contains]=${encodeURIComponent(query)}`)
+      .join("&");
     const url = query
-      ? `/api/${targetCollection}?where[title][contains]=${encodeURIComponent(query)}&limit=20`
-      : `/api/${targetCollection}?limit=20`;
+      ? `/api/${targetCollection}?${searchQuery}&limit=50`
+      : `/api/${targetCollection}?limit=50`;
 
     fetch(url, { credentials: "include" })
       .then((res) => res.json())
       .then((data) => {
-        setOptions(data.docs || []);
+        setOptions((prev) => {
+          const existingIds = new Set(prev.map((o) => o.id));
+          const newDocs = (data.docs || []).filter(
+            (d: any) => !existingIds.has(d.id),
+          );
+          return [...prev, ...newDocs];
+        });
         setLoading(false);
       })
-      .catch((err) => {
-        console.error("Failed to fetch relations:", err);
+      .catch(() => {
         setLoading(false);
       });
   };
 
+  const fetchSelectedItems = () => {
+    const items: any[] = isMultiple
+      ? Array.isArray(value)
+        ? value
+        : []
+      : value
+        ? [value]
+        : [];
+    items.forEach((itemId) => {
+      const id = typeof itemId === "object" ? itemId?.id : itemId;
+      if (id && !options.some((o) => o.id === id)) {
+        fetch(`/api/${targetCollection}/${id}`, { credentials: "include" })
+          .then((res) => res.json())
+          .then((doc) => {
+            setOptions((prev) => [...prev, doc]);
+          })
+          .catch(() => {});
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (value) {
+      fetchSelectedItems();
+    }
+  }, [value, targetCollection]);
+
   useEffect(() => {
     if (isOpen) {
       fetchOptions(search);
@@ -81,9 +117,10 @@ export function RelationshipField({
       opt?.title ||
       opt?.name ||
       opt?.label ||
+      opt?.email ||
       opt?.filename ||
       opt?.slug ||
-      opt?.id ||
+      String(opt?.id) ||
       "Untitled"
     );
   };
@@ -128,25 +165,32 @@ export function RelationshipField({
   const renderSelectedItems = () => {
     if (!value) return null;
 
-    const items = isMultiple ? (value as string[]) : [value];
+    let items: any[];
+    if (isMultiple) {
+      items = Array.isArray(value) ? value : [];
+    } else {
+      items = value ? [value] : [];
+    }
 
     return (
       <div className="flex flex-wrap gap-1.5 mt-2">
-        {items.map((itemId, idx) => {
-          const opt = options.find((o) => o.id === itemId) || { id: itemId };
+        {items.map((item, idx) => {
+          const rawId = typeof item === "object" ? item?.id || item : item;
+          const opt = options.find((o) => o.id === rawId);
+          const label = opt ? getLabel(opt) : String(rawId).slice(0, 8);
           return (
             <span
               key={idx}
               className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
             >
-              {getLabel(opt)}
+              {label}
               {!disabled && (
                 <button
                   type="button"
                   onClick={() => {
                     if (isMultiple) {
                       onChange?.(
-                        (value as string[]).filter((_, i) => i !== idx),
+                        items.filter((_: any, i: number) => i !== idx),
                       );
                     } else {
                       onChange?.(null);
@@ -169,7 +213,9 @@ export function RelationshipField({
       {field.label && (
         <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <div ref={containerRef} className="relative">
@@ -251,7 +297,7 @@ export function RelationshipField({
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }

package/src/components/fields/SelectField.tsx

@@ -1,4 +1,4 @@
-import type { SelectField as SelectFieldType } from "@kyro-cms/core";
+import type { SelectField as SelectFieldType } from "@kyro-cms/core/client";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
@@ -20,7 +20,9 @@ export default function SelectField({
       {field.label && (
         <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <select
@@ -44,7 +46,7 @@ export default function SelectField({
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? "border-red-500 focus:border-red-500 focus:ring-red-500"
+            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
             : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
         } ${disabled || field.admin?.readOnly ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-muted)]" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"}`}
       >
@@ -60,7 +62,7 @@ export default function SelectField({
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }

package/src/components/fields/TextField.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-import type { TextField as TextFieldType } from "@kyro-cms/core";
+import type { TextField as TextFieldType } from "@kyro-cms/core/client";
 
 interface TextFieldComponentProps {
   field: TextFieldType;
@@ -16,20 +15,6 @@ export default function TextField({
   error,
   disabled,
 }: TextFieldComponentProps) {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    setIsDark(document.documentElement.classList.contains("dark"));
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-    return () => observer.disconnect();
-  }, []);
-
   const inputType =
     field.variant === "email"
       ? "email"
@@ -42,9 +27,11 @@ export default function TextField({
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium">
+        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <input
@@ -59,22 +46,20 @@ export default function TextField({
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
             : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
         } ${
           disabled || field.admin?.readOnly
             ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
-            : isDark
-              ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-              : "bg-white text-gray-900"
+            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
         }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-secondary)]">
+        <p className="text-xs text-[var(--kyro-text-muted)]">
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-600">{error}</p>}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }