@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/blocks/RelationshipBlock.tsx

@@ -1,279 +1,72 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, Search, Loader2, ExternalLink } from "lucide-react";
+import { ChevronRight, X } from "lucide-react";
+import { RelationshipBlockField } from "../fields/RelationshipBlockField";
 
-interface RelationshipBlockProps {
-  block: any;
-  index: number;
-}
-
-export const RelationshipBlock: React.FC<RelationshipBlockProps> = ({
+export const RelationshipBlock: React.FC<{ block: any; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
-  const data = blockData?.data ?? block.data ?? {};
-
-  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 relationTo = data.relationTo || "pages";
-  const isMultiple = data.hasMany;
-
-  const fetchOptions = (query: string = "") => {
-    setLoading(true);
-    const url = query
-      ? `/api/${relationTo}?where[title][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]);
-
-  const getLabel = (opt: any) => {
-    return (
-      opt?.title ||
-      opt?.name ||
-      opt?.label ||
-      opt?.filename ||
-      opt?.slug ||
-      opt?.id ||
-      "Untitled"
-    );
-  };
 
-  const selectedIds = Array.isArray(data.selectedIds)
-    ? data.selectedIds
-    : data.selectedId
-      ? [data.selectedId]
-      : [];
-
-  const handleSelect = (opt: any) => {
-    if (isMultiple) {
-      const current = selectedIds;
-      if (current.includes(opt.id)) {
-        updateBlock(block.id, {
-          data: {
-            ...data,
-            selectedIds: current.filter((id: string) => id !== opt.id),
-          },
-        });
-      } else {
-        updateBlock(block.id, {
-          data: { ...data, selectedIds: [...current, opt.id] },
-        });
-      }
-    } else {
-      updateBlock(block.id, {
-        data: { ...data, selectedId: opt.id, selectedIds: [opt.id] },
-      });
-      setIsOpen(false);
-    }
-  };
-
-  const isSelected = (optId: string) => selectedIds.includes(optId);
+  const data = blockData?.data ?? block.data ?? {};
 
   const handleChange = (field: string, value: any) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
-  const selectedOptions = options.filter((o) => selectedIds.includes(o.id));
-
   return (
-    <div className="block-relationship border border-[var(--kyro-border)] rounded-lg p-4 mb-4 relative group bg-[var(--kyro-surface)]">
-      <div className="flex items-center justify-between mb-4">
+    <div className="block-relationship border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-1">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
             Relationship
           </span>
-          <span className="text-xs text-[var(--kyro-text-muted)]">
-            → {relationTo}
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
+            → {data.relationTo || "pages"}
           </span>
         </div>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
           <button
             type="button"
             onClick={() => moveBlock(block.id, "up")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
             title="Move up"
           >
-            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+            <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
           <button
             type="button"
             onClick={() => moveBlock(block.id, "down")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
             title="Move down"
           >
-            <ChevronRight className="w-3.5 h-3.5 rotate-90 text-[var(--kyro-text-muted)]" />
+            <ChevronRight className="w-3 h-3" />
           </button>
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1.5 hover:bg-red-50 rounded"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
-            <X className="w-3.5 h-3.5 text-red-500" />
+            <X className="w-3 h-3" />
           </button>
         </div>
       </div>
 
-      <div className="space-y-3">
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Target Collection
-            </label>
-            {loadingCollections ? (
-              <div className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-muted)]">
-                Loading...
-              </div>
-            ) : (
-              <select
-                value={relationTo}
-                onChange={(e) => handleChange("relationTo", e.target.value)}
-                className="w-full px-3 py-2 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"
-              >
-                <option value="">Select collection...</option>
-                {collections.map((col) => (
-                  <option key={col} value={col}>
-                    {col}
-                  </option>
-                ))}
-              </select>
-            )}
-          </div>
-          <div>
-            <label className="flex items-center gap-2 cursor-pointer mt-5">
-              <input
-                type="checkbox"
-                checked={isMultiple || false}
-                onChange={(e) => handleChange("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>
-
-        <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)}
-              placeholder={`Search ${relationTo}...`}
-              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"
-            />
-            <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" />
-              ) : null}
-            </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"
-                      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) && <span>✓</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {selectedIds.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {selectedIds.map((id: string) => {
-              const opt = options.find((o) => o.id === id) || { id, title: 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"
-                    onClick={() => {
-                      if (isMultiple) {
-                        handleChange(
-                          "selectedIds",
-                          selectedIds.filter((sid: string) => sid !== id),
-                        );
-                      } else {
-                        handleChange("selectedId", null);
-                        handleChange("selectedIds", []);
-                      }
-                    }}
-                    className="hover:opacity-70"
-                  >
-                    <X className="w-3 h-3" />
-                  </button>
-                </span>
-              );
-            })}
-          </div>
-        )}
-      </div>
+      <RelationshipBlockField
+        relationTo={data.relationTo || "pages"}
+        hasMany={data.hasMany || false}
+        selectedIds={Array.isArray(data.selectedIds) ? data.selectedIds : []}
+        selectedId={data.selectedId}
+        labelField={data.labelField || "title"}
+        onChange={handleChange}
+        compact
+      />
     </div>
   );
 };

package/src/components/blocks/RichTextBlock.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, AlignLeft } from "lucide-react";
+import PortableTextField from "../fields/PortableTextField";
+
+export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
+  const data = blockData?.data || block.data || {};
+
+  const handleChange = (newValue: any) => {
+    updateBlock(block.id, { data: { ...data, content: newValue } });
+  };
+
+  return (
+    <div className="block-richtext border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <AlignLeft className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Rich Text
+          </span>
+        </div>
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <PortableTextField
+        field={{ name: "content", label: "Content" }}
+        value={data.content}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};

package/src/components/blocks/VStackBlock.tsx

@@ -4,72 +4,58 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
-import { ChildBlocksTree } from "./ChildBlocksTree";
+import { ChildrenField } from "../fields/ChildrenField";
 
-interface VStackBlockProps {
-  block: any;
-  index: number;
-}
-
-export const VStackBlock: React.FC<VStackBlockProps> = ({ block, index }) => {
+export const VStackBlock: React.FC<{ block: any; index: number }> = ({
+  block,
+  index,
+}) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
   const data = blockData?.data ?? block.data ?? {};
   const children = blockData?.children ?? block.children ?? [];
 
-  const handleUpdateChildren = (newChildren: any[]) => {
-    updateBlock(block.id, { children: newChildren });
-  };
-
   return (
-    <div className="block-vstack border border-[var(--kyro-border)] rounded-lg p-4 mb-4 relative group bg-[var(--kyro-surface)]">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
-            Vertical Stack
-          </span>
-          <span className="text-xs text-[var(--kyro-text-muted)]">
-            ({children.length} children)
-          </span>
-        </div>
+    <div className="block-vstack border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-1">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          Stack
+        </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
           <button
             type="button"
             onClick={() => moveBlock(block.id, "up")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
             title="Move up"
           >
-            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+            <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
           <button
             type="button"
             onClick={() => moveBlock(block.id, "down")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
             title="Move down"
           >
-            <ChevronRight className="w-3.5 h-3.5 rotate-90 text-[var(--kyro-text-muted)]" />
+            <ChevronRight className="w-3 h-3" />
           </button>
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1.5 hover:bg-red-50 rounded"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
-            <X className="w-3.5 h-3.5 text-red-500" />
+            <X className="w-3 h-3" />
           </button>
         </div>
       </div>
 
-      <div className="pt-4 border-t border-[var(--kyro-border)]">
-        <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
-          Children
-        </label>
-        <ChildBlocksTree
-          blockId={block.id}
-          children={children}
-          onUpdateChildren={handleUpdateChildren}
-        />
-      </div>
+      <ChildrenField
+        blockId={block.id}
+        children={children}
+        onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
+        compact
+      />
     </div>
   );
 };

package/src/components/blocks/VideoBlock.tsx

@@ -1,45 +1,65 @@
 import React from "react";
-import { useBlocksStore } from "../fields/extensions/blocksStore";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { VideoField } from "../fields/VideoField";
+
+export const VideoBlock: React.FC<{ block: any; index: number }> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
+  const data = blockData?.data ?? block.data ?? {};
 
-export const VideoBlock: React.FC<{ block: any; index: number }> = ({ block, index }) => {
-  const { updateBlock, removeBlock, moveBlock } = useBlocksStore();
-  
   const handleChange = (field: string, value: any) => {
-    updateBlock(block.id, { data: { ...block.data, [field]: value } });
+    updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
   return (
-    <div className="block-video border border-[var(--kyro-border)] rounded-md p-4 mb-4 relative group">
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">Video</span>
+    <div className="block-video border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-1">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          Video
+        </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button type="button" onClick={() => moveBlock(block.id, "up")} className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded" title="Move up"><ChevronRight className="w-3 h-3 rotate-90" /></button>
-          <button type="button" onClick={() => removeBlock(block.id)} className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded" title="Remove"><X className="w-3 h-3" /></button>
-        </div>
-      </div>
-      <div className="space-y-3">
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">Video URL</label>
-          <input
-            type="url"
-            value={block.data.src || ""}
-            onChange={(e) => handleChange("src", e.target.value)}
-            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="https://..."
-          />
-        </div>
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">Title</label>
-          <input
-            type="text"
-            value={block.data.title || ""}
-            onChange={(e) => handleChange("title", e.target.value)}
-            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="Video title..."
-          />
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
         </div>
       </div>
+
+      <VideoField
+        src={data.src || ""}
+        title={data.title || ""}
+        onChange={handleChange}
+        onUploadChange={(v) => handleChange("src", v)}
+        compact
+      />
     </div>
   );
 };