@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/blocks/ChildBlocksTree.tsx

@@ -0,0 +1,551 @@
+import React, { useState } from "react";
+import { Plus, X, ChevronRight, ChevronDown } from "lucide-react";
+import {
+  blockCategories,
+  blockIcons,
+  getBlockComponent,
+  getBlockLabel,
+} from "../fields/extensions/blockComponents";
+import { createNewBlock } from "../fields/extensions/blocksStore";
+import { BlockDrawer } from "../ui/BlockDrawer";
+import { BlockEditModal } from "./BlockEditModal";
+
+interface ChildBlocksTreeProps {
+  blockId: string;
+  children: any[];
+  onUpdateChildren: (children: any[]) => void;
+  depth?: number;
+  maxDepth?: number;
+}
+
+const MAX_DEPTH = 6;
+
+export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
+  blockId,
+  children,
+  onUpdateChildren,
+  depth = 0,
+  maxDepth = MAX_DEPTH,
+}) => {
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const availableBlocks = blockCategories.flatMap((cat) => cat.blocks);
+  const canAddChildren = depth < maxDepth;
+  const indentWidth = 16;
+
+  const handleAddChild = (type: string) => {
+    const newChild = createNewBlock(type);
+    onUpdateChildren([...children, newChild]);
+    setEditingBlockId(newChild.id);
+  };
+
+  const handleRemoveChild = (childId: string) => {
+    const filtered = children.filter((c) => c.id !== childId);
+    onUpdateChildren(filtered);
+  };
+
+  const handleUpdateChildData = (childId: string, newData: any) => {
+    const updated = children.map((child) => {
+      if (child.id === childId) {
+        return { ...child, data: newData };
+      }
+      return child;
+    });
+    onUpdateChildren(updated);
+  };
+
+  const handleUpdateChildChildren = (
+    childId: string,
+    newGrandchildren: any[],
+  ) => {
+    const updated = children.map((child) => {
+      if (child.id === childId) {
+        return { ...child, children: newGrandchildren };
+      }
+      return child;
+    });
+    onUpdateChildren(updated);
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const renderBlock = (child: any) => {
+    const hasChildren = child.children && child.children.length > 0;
+    const isExpanded = expandedIds.has(child.id);
+    const BlockComponent = getBlockComponent(child.type);
+    const childHasOwnChildren = hasChildren;
+    const isEditing = editingBlockId === child.id;
+
+    return (
+      <div key={child.id} className="relative group">
+        <div
+          className={`flex items-center group/column gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${
+            isEditing
+              ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
+              : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+          } ${canAddChildren ? "cursor-pointer" : ""}`}
+          style={{ marginLeft: depth * indentWidth }}
+          onClick={() => {
+            if (canAddChildren) {
+              setEditingBlockId(isEditing ? null : child.id);
+            }
+          }}
+        >
+          {childHasOwnChildren ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand(child.id);
+              }}
+              className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            >
+              {isExpanded ? (
+                <ChevronDown className="w-3 h-3 text-[var(--kyro-text-muted)]" />
+              ) : (
+                <ChevronRight className="w-3 h-3 text-[var(--kyro-text-muted)]" />
+              )}
+            </button>
+          ) : (
+            <span className="w-4" />
+          )}
+
+          {blockIcons[child.type] && (
+            <span className="text-[var(--kyro-text-secondary)]">
+              {blockIcons[child.type]}
+            </span>
+          )}
+
+          <span className="text-xs font-medium text-[var(--kyro-text-secondary)] flex-1 truncate">
+            {getBlockLabel(child.type)}
+            {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
+            {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+          </span>
+
+          {hasChildren && (
+            <span className="text-[10px] text-[var(--kyro-text-muted)]">
+              ({child.children.length})
+            </span>
+          )}
+
+          {confirmDeleteId === child.id ? (
+            <div
+              className="flex items-center gap-1"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  handleRemoveChild(child.id);
+                  setConfirmDeleteId(null);
+                }}
+                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+              >
+                Remove
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmDeleteId(null)}
+                className="px-2 py-1 text-xs bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded hover:bg-[var(--kyro-border)]"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setConfirmDeleteId(child.id);
+              }}
+              className="p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-red-50"
+            >
+              <X className="w-3.5 h-3.5 text-red-500 invisible group-hover/column:visible" />
+            </button>
+          )}
+        </div>
+
+        {isEditing && (
+          <BlockEditModal
+            block={child}
+            onClose={() => setEditingBlockId(null)}
+          />
+        )}
+
+        {hasChildren && isExpanded && (
+          <div className="mt-1">
+            <NestedChildBlocks
+              parentId={child.id}
+              children={child.children}
+              onUpdateChildren={(newGrandchildren) =>
+                handleUpdateChildChildren(child.id, newGrandchildren)
+              }
+              depth={depth + 1}
+              maxDepth={maxDepth}
+            />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-2">
+      {children.length > 0 && (
+        <div className="space-y-1">{children.map(renderBlock)}</div>
+      )}
+
+      {canAddChildren && (
+        <div style={{ marginLeft: depth * indentWidth }}>
+          <button
+            type="button"
+            onClick={() => setShowAddModal(true)}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] rounded transition-colors"
+          >
+            <Plus className="w-3 h-3" />
+            Add Block
+          </button>
+
+          <BlockDrawer
+            open={showAddModal}
+            onClose={() => setShowAddModal(false)}
+            onSelect={handleAddChild}
+          >
+            {blockCategories.map((category) => (
+              <div key={category.title} className="mb-4">
+                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wide mb-2">
+                  {category.title}
+                </h3>
+                <div className="grid grid-cols-3 gap-2">
+                  {category.blocks.map((block) => (
+                    <button
+                      key={block.type}
+                      type="button"
+                      onClick={() => {
+                        handleAddChild(block.type);
+                        setShowAddModal(false);
+                      }}
+                      className="flex flex-col items-center text-center gap-1 p-2 rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/60 hover:bg-[var(--kyro-surface-accent)]/30 transition-all cursor-pointer group"
+                    >
+                      <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">
+                        {blockIcons[block.icon]}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)]">
+                          {block.label}
+                        </div>
+                        <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">
+                          {block.description}
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </BlockDrawer>
+        </div>
+      )}
+
+      {children.length === 0 && canAddChildren && (
+        <div
+          className="text-xs text-[var(--kyro-text-muted)] italic py-2"
+          style={{ marginLeft: depth * indentWidth }}
+        >
+          No blocks added. Click "Add Block" to add elements.
+        </div>
+      )}
+
+      {depth >= maxDepth && children.length > 0 && (
+        <div
+          className="text-xs text-[var(--kyro-text-muted)] italic"
+          style={{ marginLeft: depth * indentWidth }}
+        >
+          Maximum nesting level ({maxDepth}) reached
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface NestedChildBlocksProps {
+  parentId: string;
+  children: any[];
+  onUpdateChildren: (children: any[]) => void;
+  depth: number;
+  maxDepth: number;
+}
+
+const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
+  parentId,
+  children,
+  onUpdateChildren,
+  depth,
+  maxDepth,
+}) => {
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const availableBlocks = blockCategories.flatMap((cat) => cat.blocks);
+  const canAddChildren = depth < maxDepth;
+  const indentWidth = 16;
+
+  const handleAddChild = (type: string) => {
+    const newChild = createNewBlock(type);
+    onUpdateChildren([...children, newChild]);
+    setEditingBlockId(newChild.id);
+  };
+
+  const handleRemoveChild = (childId: string) => {
+    const filtered = children.filter((c) => c.id !== childId);
+    onUpdateChildren(filtered);
+  };
+
+  const handleUpdateChildData = (childId: string, newData: any) => {
+    const updated = children.map((child) => {
+      if (child.id === childId) {
+        return { ...child, data: newData };
+      }
+      return child;
+    });
+    onUpdateChildren(updated);
+  };
+
+  const handleUpdateChildChildren = (
+    childId: string,
+    newGrandchildren: any[],
+  ) => {
+    const updated = children.map((child) => {
+      if (child.id === childId) {
+        return { ...child, children: newGrandchildren };
+      }
+      return child;
+    });
+    onUpdateChildren(updated);
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const renderBlock = (child: any) => {
+    const hasChildren = child.children && child.children.length > 0;
+    const isExpanded = expandedIds.has(child.id);
+    const BlockComponent = getBlockComponent(child.type);
+    const childHasOwnChildren = hasChildren;
+    const isEditing = editingBlockId === child.id;
+
+    return (
+      <div key={child.id} className="relative group">
+        <div
+          className={`flex items-center gap-2 p-2 bg-[var(--kyro-bg-secondary)] rounded border transition-colors ${
+            isEditing
+              ? "bg-[var(--kyro-primary)]/10 border-[var(--kyro-primary)]"
+              : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+          } ${canAddChildren ? "cursor-pointer" : ""}`}
+          style={{ marginLeft: depth * indentWidth }}
+          onClick={() => {
+            if (canAddChildren) {
+              setEditingBlockId(isEditing ? null : child.id);
+            }
+          }}
+        >
+          {childHasOwnChildren ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand(child.id);
+              }}
+              className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            >
+              {isExpanded ? (
+                <ChevronDown className="w-3 h-3 text-[var(--kyro-text-muted)]" />
+              ) : (
+                <ChevronRight className="w-3 h-3 text-[var(--kyro-text-muted)]" />
+              )}
+            </button>
+          ) : (
+            <span className="w-4" />
+          )}
+
+          {blockIcons[child.type] && (
+            <span className="text-[var(--kyro-text-secondary)]">
+              {blockIcons[child.type]}
+            </span>
+          )}
+
+          <span className="text-xs font-medium text-[var(--kyro-text-secondary)] flex-1 truncate">
+            {getBlockLabel(child.type)}
+            {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
+            {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+          </span>
+
+          {hasChildren && (
+            <span className="text-[10px] text-[var(--kyro-text-muted)]">
+              ({child.children.length})
+            </span>
+          )}
+
+          {confirmDeleteId === child.id ? (
+            <div
+              className="flex items-center gap-1"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  handleRemoveChild(child.id);
+                  setConfirmDeleteId(null);
+                }}
+                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+              >
+                Remove
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmDeleteId(null)}
+                className="px-2 py-1 text-xs bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded hover:bg-[var(--kyro-border)]"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setConfirmDeleteId(child.id);
+              }}
+              className="p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-red-50"
+            >
+              <X className="w-3.5 h-3.5 text-red-500" />
+            </button>
+          )}
+        </div>
+
+        {isEditing && (
+          <BlockEditModal
+            block={child}
+            onClose={() => setEditingBlockId(null)}
+          />
+        )}
+
+        {hasChildren && isExpanded && (
+          <div className="mt-1">
+            <NestedChildBlocks
+              parentId={child.id}
+              children={child.children}
+              onUpdateChildren={(newGrandchildren) =>
+                handleUpdateChildChildren(child.id, newGrandchildren)
+              }
+              depth={depth + 1}
+              maxDepth={maxDepth}
+            />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-2">
+      {children.length > 0 && (
+        <div className="space-y-1">{children.map(renderBlock)}</div>
+      )}
+
+      {canAddChildren && (
+        <div style={{ marginLeft: depth * indentWidth }}>
+          <button
+            type="button"
+            onClick={() => setShowAddModal(true)}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] rounded transition-colors"
+          >
+            <Plus className="w-3 h-3" />
+            Add Block
+          </button>
+
+          <BlockDrawer
+            open={showAddModal}
+            onClose={() => setShowAddModal(false)}
+            onSelect={handleAddChild}
+          >
+            {blockCategories.map((category) => (
+              <div key={category.title} className="mb-4">
+                <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wide mb-2">
+                  {category.title}
+                </h3>
+                <div className="grid grid-cols-3 gap-2">
+                  {category.blocks.map((block) => (
+                    <button
+                      key={block.type}
+                      type="button"
+                      onClick={() => {
+                        handleAddChild(block.type);
+                        setShowAddModal(false);
+                      }}
+                      className="flex flex-col items-center text-center gap-1 p-2 rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/60 hover:bg-[var(--kyro-surface-accent)]/30 transition-all cursor-pointer group"
+                    >
+                      <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">
+                        {blockIcons[block.icon]}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)]">
+                          {block.label}
+                        </div>
+                        <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">
+                          {block.description}
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </BlockDrawer>
+        </div>
+      )}
+
+      {children.length === 0 && canAddChildren && (
+        <div
+          className="text-xs text-[var(--kyro-text-muted)] italic py-2"
+          style={{ marginLeft: depth * indentWidth }}
+        >
+          No blocks added. Click "Add Block" to add elements.
+        </div>
+      )}
+
+      {depth >= maxDepth && children.length > 0 && (
+        <div
+          className="text-xs text-[var(--kyro-text-muted)] italic"
+          style={{ marginLeft: depth * indentWidth }}
+        >
+          Maximum nesting level ({maxDepth}) reached
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/blocks/CodeBlock.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, Code2 } from "lucide-react";
+import { CodeField } from "../fields/CodeField";
+
+export const CodeBlock: 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="group/block relative border border-[var(--kyro-border)] rounded-2xl p-6 mb-6 transition-all duration-300 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/20">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-[var(--kyro-primary)]/10 flex items-center justify-center text-[var(--kyro-primary)] transition-transform group-hover/block:scale-110">
+            <Code2 className="w-5 h-5" />
+          </div>
+          <div>
+            <h4 className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">Code Snippet</h4>
+            <p className="text-[10px] font-medium text-[var(--kyro-text-muted)] uppercase tracking-widest">
+              Block Editor • {data.language || "javascript"}
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-1.5 opacity-0 group-hover/block:opacity-100 transition-all translate-x-2 group-hover/block:translate-x-0">
+          <div className="flex bg-[var(--kyro-surface-accent)]/50 p-1 rounded-xl border border-[var(--kyro-border)]">
+            <button 
+              type="button"
+              onClick={() => moveBlock(block.id, "up")}
+              className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
+              title="Move up"
+            >
+              <ChevronRight className="w-4 h-4 rotate-[-90deg]" />
+            </button>
+            <div className="w-px h-4 bg-[var(--kyro-border)] mx-1 self-center" />
+            <button 
+              type="button"
+              onClick={() => removeBlock(block.id)}
+              className="p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500"
+              title="Remove"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div className="space-y-6">
+        <CodeField
+          field={{
+            type: "code",
+            name: "code",
+            label: "Source Code",
+            language: data.language || "javascript"
+          }}
+          value={data.code || ""}
+          onChange={(val) => handleChange("code", val)}
+        />
+        
+        <div className="flex items-center gap-4 bg-[var(--kyro-surface-accent)]/20 p-4 rounded-xl border border-[var(--kyro-border)]/50">
+          <div className="flex-1">
+            <label className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2 block">
+              Syntax Highlighting
+            </label>
+            <div className="relative">
+              <select
+                value={data.language || "javascript"}
+                onChange={(e) => handleChange("language", e.target.value)}
+                className="w-full pl-4 pr-10 py-2.5 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 focus:border-[var(--kyro-primary)] transition-all appearance-none cursor-pointer"
+              >
+                <option value="plaintext">Plain Text</option>
+                <option value="javascript">JavaScript</option>
+                <option value="typescript">TypeScript</option>
+                <option value="python">Python</option>
+                <option value="json">JSON</option>
+                <option value="html">HTML</option>
+                <option value="css">CSS</option>
+                <option value="sql">SQL</option>
+                <option value="rust">Rust</option>
+                <option value="markdown">Markdown</option>
+              </select>
+              <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]">
+                <ChevronRight className="w-4 h-4 rotate-90" />
+              </div>
+            </div>
+          </div>
+          
+          <div className="hidden sm:block w-px h-10 bg-[var(--kyro-border)]" />
+          
+          <div className="hidden sm:flex flex-col justify-center">
+            <span className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2">
+              Status
+            </span>
+            <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl">
+              <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+              <span className="text-[10px] font-bold text-[var(--kyro-text-primary)] tracking-wide">EDITING</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};