@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/blocks/ListBlock.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useBlocksStore } from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const ListBlock: 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 } });
+  };
+
+  return (
+    <div className="block-list border border-[var(--kyro-border)] rounded-md p-4 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">List</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-2">
+        <select
+          value={block.data.type || "unordered"}
+          onChange={(e) => handleChange("type", 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"
+        >
+          <option value="unordered">Unordered</option>
+          <option value="ordered">Ordered</option>
+        </select>
+        <textarea
+          value={block.data.items || ""}
+          onChange={(e) => handleChange("items", 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 min-h-[80px] resize-none"
+          placeholder="Enter list items (one per line)..."
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ParagraphBlock.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const ParagraphBlock: 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 = (field: string, value: any) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <div className="block-paragraph border-l-4 border-[var(--kyro-border)] pl-4 py-2 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">
+          Paragraph
+        </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={() => 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-[var(--kyro-surface-accent)] rounded"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+      <div>
+        <textarea
+          value={data.text || ""}
+          onChange={(e) => handleChange("text", e.target.value)}
+          className="w-full px-3 py-3 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm min-h-[100px] resize-none"
+          placeholder="Enter paragraph text..."
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/RelationshipBlock.tsx

@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, Search, Loader2, ExternalLink } from "lucide-react";
+
+interface RelationshipBlockProps {
+  block: any;
+  index: number;
+}
+
+export const RelationshipBlock: React.FC<RelationshipBlockProps> = ({
+  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 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="flex items-center gap-2">
+          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+            Relationship
+          </span>
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            → {relationTo}
+          </span>
+        </div>
+        <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"
+            title="Move up"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1.5 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)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1.5 hover:bg-red-50 rounded"
+            title="Remove"
+          >
+            <X className="w-3.5 h-3.5 text-red-500" />
+          </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>
+    </div>
+  );
+};

package/src/components/blocks/VStackBlock.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+interface VStackBlockProps {
+  block: any;
+  index: number;
+}
+
+export const VStackBlock: React.FC<VStackBlockProps> = ({ 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="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"
+            title="Move up"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1.5 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)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1.5 hover:bg-red-50 rounded"
+            title="Remove"
+          >
+            <X className="w-3.5 h-3.5 text-red-500" />
+          </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>
+    </div>
+  );
+};

package/src/components/blocks/VideoBlock.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useBlocksStore } from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+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 } });
+  };
+
+  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="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..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/index.ts

@@ -0,0 +1,10 @@
+export { ColumnsBlock } from './ColumnsBlock';
+export { HeadingBlock } from './HeadingBlock';
+export { ParagraphBlock } from './ParagraphBlock';
+export { DividerBlock } from './DividerBlock';
+export { ImageBlock } from './ImageBlock';
+export { VideoBlock } from './VideoBlock';
+export { ListBlock } from './ListBlock';
+export { CodeBlock } from './CodeBlock';
+export { LinkBlock } from './LinkBlock';
+export { FileBlock } from './FileBlock';