@kyro-cms/admin 0.1.6 → 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

@@ -1,87 +1,305 @@
-import { useState } from 'react';
-import type { RelationshipField as RelationshipFieldType } from '@kyro-cms/core';
+import { useEffect, useState, useRef } from "react";
+import { Search, X, ChevronDown, Loader2 } from "lucide-react";
 
-interface RelationshipFieldComponentProps {
-  field: RelationshipFieldType;
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
+interface RelationshipFieldProps {
+  field: {
+    name: string;
+    label?: string;
+    relationTo: string | string[];
+    hasMany?: boolean;
+    required?: boolean;
+    admin?: {
+      description?: string;
+      readOnly?: boolean;
+      placeholder?: string;
+    };
+  };
+  value?: string | string[] | null;
+  onChange?: (value: string | string[] | null) => void;
   error?: string;
   disabled?: boolean;
 }
 
-export default function RelationshipField({ field, value, onChange, error, disabled }: RelationshipFieldComponentProps) {
-  const [searchQuery, setSearchQuery] = useState('');
+export function RelationshipField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: RelationshipFieldProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [options, setOptions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const relationTo = Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo];
+  const isMultiple = field.hasMany;
+  const relationTo = Array.isArray(field.relationTo)
+    ? field.relationTo
+    : [field.relationTo];
+  const targetCollection = relationTo[0];
+
+  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}?${searchQuery}&limit=50`
+      : `/api/${targetCollection}?limit=50`;
+
+    fetch(url, { credentials: "include" })
+      .then((res) => res.json())
+      .then((data) => {
+        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(() => {
+        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);
+    }
+  }, [isOpen, targetCollection]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const getLabel = (opt: any) => {
+    return (
+      opt?.title ||
+      opt?.name ||
+      opt?.label ||
+      opt?.email ||
+      opt?.filename ||
+      opt?.slug ||
+      String(opt?.id) ||
+      "Untitled"
+    );
+  };
+
+  const getValueId = (val: any) => {
+    return val?.id || val;
+  };
+
+  const isSelected = (opt: any) => {
+    const optId = opt.id;
+    if (!value) return false;
+    if (isMultiple && Array.isArray(value)) {
+      return value.some((v) => getValueId(v) === optId);
+    }
+    return getValueId(value) === optId;
+  };
+
+  const handleSelect = (opt: any) => {
+    const optId = opt.id;
+    if (isMultiple) {
+      const current = Array.isArray(value) ? value : [];
+      if (isSelected(opt)) {
+        onChange?.(current.filter((v) => getValueId(v) !== optId));
+      } else {
+        onChange?.([...current, optId]);
+      }
+    } else {
+      if (isSelected(opt)) {
+        onChange?.(null);
+      } else {
+        onChange?.(optId);
+        setIsOpen(false);
+        setSearch("");
+      }
+    }
+  };
+
+  const handleClear = () => {
+    onChange?.(isMultiple ? [] : null);
+  };
+
+  const renderSelectedItems = () => {
+    if (!value) return null;
+
+    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((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)]"
+            >
+              {label}
+              {!disabled && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (isMultiple) {
+                      onChange?.(
+                        items.filter((_: any, i: number) => i !== idx),
+                      );
+                    } else {
+                      onChange?.(null);
+                    }
+                  }}
+                  className="hover:opacity-70"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              )}
+            </span>
+          );
+        })}
+      </div>
+    );
+  };
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-1.5">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <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 className="relative">
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-            setIsOpen(true);
-          }}
-          onFocus={() => setIsOpen(true)}
-          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
-          placeholder={`Search ${relationTo.join(' or ')}...`}
-          disabled={disabled || field.admin?.readOnly}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500"
-        />
-        
-        {isOpen && (
-          <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto">
-            <div className="p-2 text-sm text-gray-500 text-center">
-              Search results will appear here
-            </div>
-            {/* TODO: Implement actual search with API integration */}
+      <div ref={containerRef} 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);
+              fetchOptions(e.target.value);
+            }}
+            onFocus={() => setIsOpen(true)}
+            placeholder={
+              field.admin?.placeholder || `Search ${targetCollection}...`
+            }
+            disabled={disabled || field.admin?.readOnly}
+            className="w-full pl-9 pr-10 py-2 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 disabled:opacity-50"
+          />
+          <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" />
+            ) : (
+              <ChevronDown
+                className={`w-4 h-4 text-[var(--kyro-text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`}
+              />
+            )}
           </div>
-        )}
+        </div>
 
-        {/* Selected value display */}
-        {value && (
-          <div className="mt-2 flex flex-wrap gap-2">
-            {(Array.isArray(value) ? value : [value]).map((v, i) => (
-              <span
-                key={i}
-                className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 text-sm rounded-md"
-              >
-                {v}
-                {!disabled && !field.admin?.readOnly && (
+        {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-64 overflow-auto">
+            {loading ? (
+              <div className="p-4 text-center text-sm text-[var(--kyro-text-muted)]">
+                Loading...
+              </div>
+            ) : options.length === 0 ? (
+              <div className="p-4 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"
-                    onClick={() => {
-                      if (Array.isArray(value)) {
-                        onChange?.(value.filter((_, idx) => idx !== i));
-                      } else {
-                        onChange?.('');
-                      }
-                    }}
-                    className="ml-1 text-blue-500 hover:text-blue-700"
+                    onClick={() => handleSelect(opt)}
+                    className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--kyro-surface-accent)] transition-colors ${
+                      isSelected(opt)
+                        ? "bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
+                        : "text-[var(--kyro-text-primary)]"
+                    }`}
                   >
-                    ×
+                    <div className="flex items-center justify-between">
+                      <span>{getLabel(opt)}</span>
+                      {isSelected(opt) && (
+                        <span className="text-[var(--kyro-sidebar-active)]">
+                          ✓
+                        </span>
+                      )}
+                    </div>
+                    {opt.slug && (
+                      <div className="text-xs text-[var(--kyro-text-muted)]">
+                        {opt.slug}
+                      </div>
+                    )}
                   </button>
-                )}
-              </span>
-            ))}
+                ))}
+              </div>
+            )}
           </div>
         )}
+
+        {renderSelectedItems()}
       </div>
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-muted)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }
+
+export default RelationshipField;

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;
@@ -8,20 +8,34 @@ interface SelectFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function SelectField({ field, value, onChange, error, disabled }: SelectFieldComponentProps) {
+export default function SelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: SelectFieldComponentProps) {
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <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
-        value={field.hasMany ? (Array.isArray(value) ? value.join(',') : '') : (value || '')}
+        value={
+          field.hasMany
+            ? Array.isArray(value)
+              ? value.join(",")
+              : ""
+            : value || ""
+        }
         onChange={(e) => {
           if (field.hasMany) {
-            const selected = e.target.value ? e.target.value.split(',') : [];
+            const selected = e.target.value ? e.target.value.split(",") : [];
             onChange?.(selected);
           } else {
             onChange?.(e.target.value);
@@ -32,13 +46,11 @@ export default function SelectField({ field, value, onChange, error, disabled }:
         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-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "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)]"}`}
       >
-        {!field.required && (
-          <option value="">Select...</option>
-        )}
+        {!field.required && <option value="">Select...</option>}
         {field.options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
@@ -46,11 +58,11 @@ export default function SelectField({ field, value, onChange, error, disabled }:
         ))}
       </select>
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }