@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/fields/NumberField.tsx

@@ -1,4 +1,5 @@
-import type { NumberField as NumberFieldType } from '@kyro-cms/core';
+import { useEffect, useState } from "react";
+import type { NumberField as NumberFieldType } from "@kyro-cms/core";
 
 interface NumberFieldComponentProps {
   field: NumberFieldType;
@@ -8,37 +9,66 @@ interface NumberFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function NumberField({ field, value, onChange, error, disabled }: NumberFieldComponentProps) {
+export default function NumberField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: NumberFieldComponentProps) {
+  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();
+  }, []);
+
   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">
           {field.label}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </label>
       )}
       <input
         type="number"
-        value={value ?? ''}
+        value={value ?? ""}
         onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
         placeholder={field.admin?.placeholder}
         disabled={disabled || field.admin?.readOnly}
         min={field.min}
         max={field.max}
-        step={field.step || (field.integer ? 1 : 'any')}
+        step={field.step || field.integer ? 1 : "any"}
         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-red-300 focus:border-red-500 focus:ring-red-500"
+            : "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"
+        }`}
       />
       {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-red-600">{error}</p>}
     </div>
   );
 }

package/src/components/fields/PortableTextField.tsx

@@ -0,0 +1,143 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  lazy,
+  Suspense,
+} from "react";
+import { useTheme } from "../ThemeProvider";
+
+interface PortableTextFieldProps {
+  field: {
+    name: string;
+    label?: string;
+    required?: boolean;
+    admin?: {
+      description?: string;
+      placeholder?: string;
+    };
+  };
+  value?: any;
+  onChange?: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+// Lazy load the editor to avoid SSR issues - only loads on client
+const EditorLazy = lazy(() => import("./EditorClient"));
+
+const PortableTextField: React.FC<PortableTextFieldProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  const { theme } = useTheme();
+  const [isMounted, setIsMounted] = useState(false);
+
+  const bgColor = theme.colors?.background || "#ffffff";
+  const borderColor = theme.colors?.border || "#e5e7eb";
+  const textColor = theme.colors?.text || "#374151";
+  const textMuted = theme.colors?.textMuted || "#9ca3af";
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Parse value to Portable Text JSON format
+  const initialValue = useMemo(() => {
+    if (!value) return [];
+    if (Array.isArray(value)) {
+      // Validate it's proper portable text blocks
+      if (
+        value.length > 0 &&
+        value[0] &&
+        typeof value[0] === "object" &&
+        "_type" in value[0]
+      ) {
+        return value;
+      }
+    }
+    // If string or invalid, return empty
+    return [];
+  }, [value]);
+
+  const handleChange = useCallback(
+    (blocks: any[]) => {
+      if (!blocks || !Array.isArray(blocks)) {
+        onChange?.([]);
+        return;
+      }
+      onChange?.(blocks);
+    },
+    [onChange],
+  );
+
+  if (!isMounted) {
+    return (
+      <div className="space-y-1.5">
+        {field.label && (
+          <label
+            className="block text-sm font-medium"
+            style={{ color: textColor }}
+          >
+            {field.label}
+            {field.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+        )}
+        <div
+          className="h-[200px] rounded-lg border animate-pulse"
+          style={{ backgroundColor: bgColor, borderColor }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {field.label && (
+        <label
+          className="block text-sm font-medium"
+          style={{ color: textColor }}
+        >
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div
+        className={`border rounded-lg overflow-hidden ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+        style={{ borderColor }}
+      >
+        <Suspense
+          fallback={
+            <div
+              className="h-[200px] flex items-center justify-center"
+              style={{ backgroundColor: bgColor }}
+            >
+              <span className="text-sm" style={{ color: textMuted }}>
+                Loading editor...
+              </span>
+            </div>
+          }
+        >
+          <EditorLazy
+            initialValue={initialValue}
+            onChange={handleChange}
+            disabled={disabled}
+            theme={theme}
+          />
+        </Suspense>
+      </div>
+      {field.admin?.description && !error && (
+        <p className="text-xs" style={{ color: textMuted }}>
+          {field.admin.description}
+        </p>
+      )}
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+export default PortableTextField;

package/src/components/fields/PortableTextRenderer.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { PortableText } from "@portabletext/react";
+import type { PortableTextComponents } from "@portabletext/react";
+
+interface PortableTextRendererProps {
+  value: any[];
+  className?: string;
+}
+
+const components: PortableTextComponents = {
+  block: {
+    h1: ({ children }) => (
+      <h1 className="text-2xl font-bold mb-2">{children}</h1>
+    ),
+    h2: ({ children }) => (
+      <h2 className="text-xl font-bold mb-2">{children}</h2>
+    ),
+    h3: ({ children }) => (
+      <h3 className="text-lg font-semibold mb-2">{children}</h3>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="border-l-4 border-gray-300 pl-4 italic my-2">
+        {children}
+      </blockquote>
+    ),
+    normal: ({ children }) => <p className="my-1">{children}</p>,
+  },
+  marks: {
+    strong: ({ children }) => <strong>{children}</strong>,
+    em: ({ children }) => <em>{children}</em>,
+    code: ({ children }) => (
+      <code className="bg-gray-100 px-1 rounded text-sm font-mono">
+        {children}
+      </code>
+    ),
+    underline: ({ children }) => <u>{children}</u>,
+    strikeThrough: ({ children }) => <s>{children}</s>,
+  },
+  list: {
+    bullet: ({ children }) => (
+      <ul className="list-disc ml-4 my-2">{children}</ul>
+    ),
+    number: ({ children }) => (
+      <ol className="list-decimal ml-4 my-2">{children}</ol>
+    ),
+  },
+  listItem: {
+    bullet: ({ children }) => <li className="my-1">{children}</li>,
+    number: ({ children }) => <li className="my-1">{children}</li>,
+  },
+};
+
+export const PortableTextRenderer: React.FC<PortableTextRendererProps> = ({
+  value,
+  className = "",
+}) => {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <PortableText value={value} components={components} />
+    </div>
+  );
+};
+
+export default PortableTextRenderer;

package/src/components/fields/RelationshipField.tsx

@@ -1,87 +1,259 @@
-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 url = query
+      ? `/api/${targetCollection}?where[title][contains]=${encodeURIComponent(query)}&limit=20`
+      : `/api/${targetCollection}?limit=20`;
+
+    fetch(url, { credentials: "include" })
+      .then((res) => res.json())
+      .then((data) => {
+        setOptions(data.docs || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to fetch relations:", err);
+        setLoading(false);
+      });
+  };
+
+  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?.filename ||
+      opt?.slug ||
+      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;
+
+    const items = isMultiple ? (value as string[]) : [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 };
+          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)}
+              {!disabled && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (isMultiple) {
+                      onChange?.(
+                        (value as string[]).filter((_, i) => 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>}
         </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-red-500">{error}</p>}
     </div>
   );
 }
+
+export default RelationshipField;