@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/ArrayField.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { Plus, ChevronDown, ChevronUp, X } from "lucide-react";
+
+interface ArrayFieldItem {
+  [key: string]: any;
+}
+
+interface ArrayFieldProps {
+  items?: ArrayFieldItem[];
+  labelField?: string;
+  onChange: (items: ArrayFieldItem[]) => void;
+  compact?: boolean;
+}
+
+export const ArrayField: React.FC<ArrayFieldProps> = ({
+  items = [],
+  labelField = "title",
+  onChange,
+  compact = false,
+}) => {
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  const handleItemChange = (index: number, field: string, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [field]: value };
+    onChange(newItems);
+  };
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onChange(newItems);
+    if (openIndex === index) setOpenIndex(null);
+    else if (openIndex !== null && openIndex > index)
+      setOpenIndex(openIndex - 1);
+  };
+
+  const handleAdd = () => {
+    const newItem: ArrayFieldItem = {
+      [labelField]: `Item ${items.length + 1}`,
+    };
+    onChange([...items, newItem]);
+    setOpenIndex(items.length);
+  };
+
+  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 itemKeys =
+    items.length > 0
+      ? Object.keys(items[0]).filter((k) => k !== "id" && k !== "_key")
+      : [];
+
+  if (compact) {
+    return (
+      <div className="space-y-1.5">
+        {items.length === 0 ? (
+          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+            No items. Click "Add Item" to create one.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {items.map((item, index) => {
+              const isOpen = openIndex === index;
+              const itemLabel =
+                item[labelField] ||
+                item.title ||
+                item.name ||
+                `Item ${index + 1}`;
+              return (
+                <div
+                  key={index}
+                  className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+                >
+                  <button
+                    type="button"
+                    onClick={() => setOpenIndex(isOpen ? null : index)}
+                    className="w-full flex items-center justify-between p-2.5 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                  >
+                    <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                      {itemLabel}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemove(index);
+                        }}
+                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                        title="Remove"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                      {isOpen ? (
+                        <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      ) : (
+                        <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      )}
+                    </div>
+                  </button>
+                  {isOpen && (
+                    <div className="p-2.5 bg-[var(--kyro-surface)] space-y-2">
+                      {itemKeys.length > 0 ? (
+                        itemKeys.map((key) => (
+                          <input
+                            key={key}
+                            type="text"
+                            value={item[key] || ""}
+                            onChange={(e) =>
+                              handleItemChange(index, key, e.target.value)
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                            className={inputClass}
+                            placeholder={key}
+                          />
+                        ))
+                      ) : (
+                        <input
+                          type="text"
+                          value={item.value || ""}
+                          onChange={(e) =>
+                            handleItemChange(index, "value", e.target.value)
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                          className={inputClass}
+                          placeholder="Value..."
+                        />
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={handleAdd}
+          className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Add Item
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.length === 0 ? (
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          No items. Click "Add Item" to create one.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item, index) => {
+            const isOpen = openIndex === index;
+            const itemLabel =
+              item[labelField] ||
+              item.title ||
+              item.name ||
+              `Item ${index + 1}`;
+            return (
+              <div
+                key={index}
+                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+              >
+                <button
+                  type="button"
+                  onClick={() => setOpenIndex(isOpen ? null : index)}
+                  className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                >
+                  <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                    {itemLabel}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(index);
+                      }}
+                      className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                      title="Remove"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                    {isOpen ? (
+                      <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    )}
+                  </div>
+                </button>
+                {isOpen && (
+                  <div className="p-3 bg-[var(--kyro-surface)] space-y-2">
+                    {itemKeys.length > 0 ? (
+                      itemKeys.map((key) => (
+                        <input
+                          key={key}
+                          type="text"
+                          value={item[key] || ""}
+                          onChange={(e) =>
+                            handleItemChange(index, key, e.target.value)
+                          }
+                          className={inputClass}
+                          placeholder={key}
+                        />
+                      ))
+                    ) : (
+                      <input
+                        type="text"
+                        value={item.value || ""}
+                        onChange={(e) =>
+                          handleItemChange(index, "value", e.target.value)
+                        }
+                        className={inputClass}
+                        placeholder="Value..."
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={handleAdd}
+        className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Item
+      </button>
+    </div>
+  );
+};
+
+export default ArrayField;

package/src/components/fields/BlocksField.tsx

@@ -0,0 +1,323 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useBlocksStore, createNewBlock } from "./extensions/blocksStore";
+import { BlockDrawer, DraggableBlockType } from "../ui/BlockDrawer";
+import { Plus, Box } from "lucide-react";
+import {
+  BLOCK_COMPONENTS,
+  getBlockComponent,
+  blockCategories,
+  blockIcons,
+} from "./extensions/blockComponents";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  KeyboardSensor,
+  useDraggable,
+  DragOverlay,
+} from "@dnd-kit/core";
+import type { DragEndEvent, DragStartEvent, Active } from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface BlocksFieldProps {
+  field: any;
+  value: any;
+  onChange?: (value: any) => void;
+  onBlocksChange?: () => void;
+  error?: string;
+  disabled?: boolean;
+  documentStatus?: "draft" | "published" | "scheduled" | "archived";
+  justSaved?: boolean;
+}
+
+import { GripVertical } from "lucide-react";
+
+// Sortable block wrapper for drag-and-drop
+const SortableBlockComponent = ({
+  block,
+  index,
+}: {
+  block: any;
+  index: number;
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: block.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.8 : 1,
+  };
+
+  const Component = getBlockComponent(block.type);
+
+  return (
+    <div ref={setNodeRef} style={style} className="relative group pl-8">
+      <div
+        className="absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical className="w-4 h-4" />
+      </div>
+      {Component ? (
+        <Component block={block} index={index} />
+      ) : (
+        <div className="p-4 border border-[var(--kyro-border)] rounded-md">
+          Unknown block: {block.type}
+        </div>
+      )}
+    </div>
+  );
+};
+// Memoize per-block to minimize re-renders when unrelated blocks change
+const SortableBlock = React.memo(SortableBlockComponent);
+
+export const BlocksField: React.FC<BlocksFieldProps> = ({
+  field,
+  value,
+  onChange,
+  onBlocksChange,
+  error,
+  disabled,
+  documentStatus,
+  justSaved,
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const { blocks, setBlocks, addBlock, setOnBlocksChange } = useBlocksStore();
+  const [activeDrag, setActiveDrag] = useState<Active | null>(null);
+
+  // Register blocks change callback
+  useEffect(() => {
+    if (onBlocksChange) {
+      setOnBlocksChange(onBlocksChange);
+    }
+    return () => {
+      setOnBlocksChange(() => {});
+    };
+  }, [onBlocksChange, setOnBlocksChange]);
+
+  // Sync external value changes (e.g., auto-save restore) to store
+  useEffect(() => {
+    const currentIds = blocks.map((b) => b.id).join(",");
+    const valueIds = (value || []).map((b: any) => b.id).join(",");
+
+    // Only update if the IDs don't match (external change)
+    if (valueIds !== currentIds) {
+      if (value && Array.isArray(value) && value.length > 0) {
+        setBlocks(value);
+      } else if (!value || (Array.isArray(value) && value.length === 0)) {
+        setBlocks([]);
+      }
+    }
+  }, [value]);
+
+  // Debounced sync of store changes back to parent form to reduce re-renders
+  const onChangeTimer = useRef<number | null>(null);
+  useEffect(() => {
+    if (!onChange) return;
+    if (onChangeTimer.current) {
+      window.clearTimeout(onChangeTimer.current);
+      onChangeTimer.current = null;
+    }
+    onChangeTimer.current = window.setTimeout(() => {
+      onChange(blocks);
+    }, 250);
+    return () => {
+      if (onChangeTimer.current) {
+        window.clearTimeout(onChangeTimer.current);
+        onChangeTimer.current = null;
+      }
+    };
+  }, [blocks, onChange]);
+
+  // Determine left border style based on document status
+  const getBorderClass = () => {
+    if (justSaved) {
+      return "border-l-[3px] border-[var(--kyro-success)]";
+    }
+    if (
+      documentStatus === "draft" ||
+      documentStatus === "scheduled" ||
+      documentStatus === "archived"
+    ) {
+      return "border-l-[3px] border-amber-500";
+    }
+    return "";
+  };
+
+  const handleAddBlock = useCallback(
+    (blockType: string) => {
+      addBlock(blockType);
+    },
+    [addBlock],
+  );
+
+  // Set up dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor),
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveDrag(event.active);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveDrag(null);
+
+    if (!over) return;
+
+    // Case 1: Dragged from drawer
+    if (active.id.toString().startsWith("drawer-")) {
+      const blockType = active.id.toString().replace("drawer-", "");
+
+      // Check if dropped on a container
+      if (over.id.toString().startsWith("container-")) {
+        const containerId = over.id.toString().replace("container-", "");
+        const container = blocks.find((b) => b.id === containerId);
+        if (container) {
+          const { updateBlock } = useBlocksStore.getState();
+          const newBlock = createNewBlock(blockType);
+          updateBlock(containerId, {
+            children: [...(container.children || []), newBlock],
+          });
+        }
+      } else {
+        // Dropped on root level - add as top-level block
+        addBlock(blockType);
+      }
+      return;
+    }
+
+    // Case 2: Reordering existing blocks
+    if (active.id !== over.id) {
+      const oldIndex = blocks.findIndex((b) => b.id === active.id);
+      const newIndex = blocks.findIndex((b) => b.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newBlocks = [...blocks];
+        const [movedBlock] = newBlocks.splice(oldIndex, 1);
+        newBlocks.splice(newIndex, 0, movedBlock);
+        setBlocks(newBlocks);
+      }
+    }
+  };
+
+  // Render active drag overlay
+  const activeBlock = activeDrag
+    ? blockCategories
+        .flatMap((cat) => cat.blocks)
+        .find((b) => `drawer-${b.type}` === activeDrag.id) ||
+      blocks.find((b) => b.id === activeDrag.id)
+    : null;
+
+  const activeBlockLabel = activeBlock
+    ? "label" in activeBlock
+      ? (activeBlock as any).label
+      : activeBlock.type
+    : "Block";
+
+  const borderClass = getBorderClass();
+
+  return (
+    <div className={`kyro-form-field ${borderClass}`}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {/* Block Builder Toolbar */}
+        <div className="flex items-center justify-between mb-2">
+          <label className="kyro-form-label">{field.label || field.name}</label>
+          <button
+            type="button"
+            onClick={() => setIsDrawerOpen(true)}
+            disabled={disabled}
+            className="flex items-center gap-2 px-3 py-2 text-sm text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)]/30 rounded-md transition-colors disabled:opacity-50"
+          >
+            <Plus className="w-4 h-4" />
+            Add Block
+          </button>
+          <BlockDrawer
+            open={isDrawerOpen}
+            onClose={() => setIsDrawerOpen(false)}
+            onSelect={handleAddBlock}
+          >
+            <div className="space-y-4">
+              {blockCategories.map((category) => (
+                <div key={category.title}>
+                  <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] mb-2 uppercase tracking-wider">
+                    {category.title}
+                  </h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {category.blocks.map((block) => (
+                      <DraggableBlockType
+                        key={block.type}
+                        block={block}
+                        onSelect={handleAddBlock}
+                      >
+                        <div className="w-6 h-6 flex items-center justify-center rounded group-hover:bg-[var(--kyro-primary)]/10 group-hover:text-[var(--kyro-primary)] transition-all duration-300">
+                          <span className="text-[var(--kyro-text-muted)]">
+                            {blockIcons[
+                              block.icon as keyof typeof blockIcons
+                            ] || <Box className="w-4 h-4" />}
+                          </span>
+                        </div>
+                      </DraggableBlockType>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </BlockDrawer>
+        </div>
+
+        {/* Block List with Drag-and-Drop */}
+        <SortableContext
+          items={blocks.map((b) => b.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="space-y-4">
+            {blocks.map((block, index) => (
+              <SortableBlock key={block.id} block={block} index={index} />
+            ))}
+            {blocks.length === 0 && (
+              <div className="text-center py-12 text-[var(--kyro-text-muted)] border-2 border-dashed border-[var(--kyro-border)] rounded-lg">
+                Click the button above to add your first block
+              </div>
+            )}
+          </div>
+        </SortableContext>
+        <DragOverlay>
+          {activeDrag && activeBlock && (
+            <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-primary)] rounded-md p-3 shadow-lg">
+              {(activeBlock as any).label || activeBlock.type || "Block"}
+            </div>
+          )}
+        </DragOverlay>
+      </DndContext>
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+};

package/src/components/fields/ButtonField.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ExternalLink } from "lucide-react";
+
+interface ButtonFieldProps {
+  text?: string;
+  url?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const ButtonField: React.FC<ButtonFieldProps> = ({
+  text = "Button",
+  url = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "flex-1 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"
+    : "flex-1 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="flex items-center gap-2">
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => onChange("text", e.target.value)}
+        className={inputClass}
+        placeholder="Button text..."
+      />
+      <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+      <input
+        type="url"
+        value={url}
+        onChange={(e) => onChange("url", e.target.value)}
+        className={`${inputClass} font-mono text-xs`}
+        placeholder="https://..."
+      />
+      {text && url && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`shrink-0 ${compact ? "p-1.5" : "p-2"} rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors`}
+          title={url}
+        >
+          <ExternalLink className={compact ? "w-3.5 h-3.5" : "w-4 h-4"} />
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default ButtonField;

package/src/components/fields/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import type { CheckboxField as CheckboxFieldType } from '@kyro-cms/core';
+import type { CheckboxField as CheckboxFieldType } from "@kyro-cms/core/client";
 
 interface CheckboxFieldComponentProps {
   field: CheckboxFieldType;
@@ -8,7 +8,13 @@ interface CheckboxFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function CheckboxField({ field, value = false, onChange, error, disabled }: CheckboxFieldComponentProps) {
+export default function CheckboxField({
+  field,
+  value = false,
+  onChange,
+  error,
+  disabled,
+}: CheckboxFieldComponentProps) {
   return (
     <div className="space-y-1">
       <label className="flex items-center gap-2 cursor-pointer">
@@ -17,20 +23,24 @@ export default function CheckboxField({ field, value = false, onChange, error, d
           checked={value}
           onChange={(e) => onChange?.(e.target.checked)}
           disabled={disabled || field.admin?.readOnly}
-          className={`w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 ${
-            disabled || field.admin?.readOnly ? 'opacity-50' : ''
+          className={`w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)] ${
+            disabled || field.admin?.readOnly ? "opacity-50" : ""
           }`}
         />
-        <span className="text-sm font-medium text-gray-700">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label || field.name}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </span>
       </label>
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500 ml-6">{field.admin.description}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)] ml-6">
+          {field.admin.description}
+        </p>
       )}
       {error && (
-        <p className="text-xs text-red-600 ml-6">{error}</p>
+        <p className="text-xs text-[var(--kyro-error)] ml-6">{error}</p>
       )}
     </div>
   );