@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/blocks/ColumnsBlock.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, Plus, Minus, Columns3 } from "lucide-react";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+interface ColumnsBlockProps {
+  block: any;
+  index: number;
+}
+
+export const ColumnsBlock: React.FC<ColumnsBlockProps> = ({ block, index }) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
+  const data = blockData?.data ?? block.data ?? {};
+  const columns = data.columns || 2;
+  const columnData = data.columnData || [];
+
+  const ensureColumnData = () => {
+    if (columnData.length !== columns) {
+      return Array.from({ length: columns }, (_, i) => ({
+        id: i,
+        children: columnData[i]?.children || [],
+      }));
+    }
+    return columnData;
+  };
+
+  const currentColumnData = ensureColumnData();
+
+  const handleColumnsChange = (newColumns: number) => {
+    if (newColumns < 1 || newColumns > 6) return;
+    const newColumnData = Array.from({ length: newColumns }, (_, i) => ({
+      id: i,
+      children: currentColumnData[i]?.children || [],
+    }));
+    updateBlock(block.id, {
+      data: { ...data, columns: newColumns, columnData: newColumnData },
+    });
+  };
+
+  const handleUpdateColumnChildren = (
+    columnIndex: number,
+    newChildren: any[],
+  ) => {
+    const newColumnData = [...currentColumnData];
+    newColumnData[columnIndex] = {
+      ...newColumnData[columnIndex],
+      children: newChildren,
+    };
+    updateBlock(block.id, {
+      data: { ...data, columnData: newColumnData },
+    });
+  };
+
+  return (
+    <div className="block-columns border border-[var(--kyro-border)] rounded-lg mb-4 overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
+        <div className="flex items-center gap-2">
+          <Columns3 className="w-4 h-4 text-[var(--kyro-primary)]" />
+          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+            Columns
+          </span>
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            ({columns})
+          </span>
+        </div>
+        <div className="flex items-center gap-1 bg-[var(--kyro-surface-accent)] rounded">
+          <button
+            type="button"
+            onClick={() => handleColumnsChange(columns - 1)}
+            disabled={columns <= 1}
+            className="p-1.5 hover:bg-[var(--kyro-surface)] rounded disabled:opacity-30"
+            title="Remove column"
+          >
+            <Minus className="w-3 h-3" />
+          </button>
+          <span className="px-2 text-xs font-medium">{columns}</span>
+          <button
+            type="button"
+            onClick={() => handleColumnsChange(columns + 1)}
+            disabled={columns >= 6}
+            className="p-1.5 hover:bg-[var(--kyro-surface)] rounded disabled:opacity-30"
+            title="Add column"
+          >
+            <Plus className="w-3 h-3" />
+          </button>
+        </div>
+        <div className="flex items-center gap-1">
+          <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]" />
+          </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" />
+          </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="grid gap-4 p-4"
+        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+      >
+        {currentColumnData.map((col: any, colIndex: number) => (
+          <div
+            key={colIndex}
+            className="border-2 border-dashed border-[var(--kyro-border)] rounded-lg overflow-hidden"
+          >
+            <div className="px-3 py-2 bg-[var(--kyro-surface-accent)]/30 border-b border-[var(--kyro-border)] flex items-center justify-between">
+              <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
+                Column {colIndex + 1}
+              </span>
+              <span className="text-xs text-[var(--kyro-text-muted)]">
+                ({col.children?.length || 0})
+              </span>
+            </div>
+            <div className="p-3 min-h-[80px]">
+              <ChildBlocksTree
+                blockId={`${block.id}-col-${colIndex}`}
+                children={col.children || []}
+                onUpdateChildren={(newChildren) =>
+                  handleUpdateColumnChildren(colIndex, newChildren)
+                }
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/DividerBlock.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const DividerBlock: 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="my-4">
+      <div className="border-t border-[var(--kyro-border)]" />
+      <div className="flex justify-between text-[var(--kyro-text-muted)] text-xs mt-1">
+        <span>Divider</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>
+  );
+};

package/src/components/blocks/FileBlock.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const FileBlock: 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-file border border-[var(--kyro-border)] rounded-md p-4 mb-2 relative group flex items-center gap-3">
+      <div className="flex-1">
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            File
+          </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>
+        <input
+          type="text"
+          value={block.data.filename || ""}
+          onChange={(e) => handleChange("filename", 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="File name..."
+        />
+        <input
+          type="url"
+          value={block.data.url || ""}
+          onChange={(e) => handleChange("url", 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 mt-2"
+          placeholder="Download URL..."
+        />
+      </div>
+      <div className="w-6 h-6 flex items-center justify-center text-[var(--kyro-text-muted)] flex-shrink-0">
+        📄
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/HeadingBlock.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const HeadingBlock: 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-heading 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">
+          Heading
+        </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 className="space-y-2">
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Level
+          </label>
+          <select
+            value={data.level || 1}
+            onChange={(e) => handleChange("level", parseInt(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={1}>H1</option>
+            <option value={2}>H2</option>
+            <option value={3}>H3</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Text
+          </label>
+          <input
+            type="text"
+            value={data.text || ""}
+            onChange={(e) => handleChange("text", 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="Enter heading text..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/HeroBlock.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { X, ChevronRight } from "lucide-react";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+interface HeroBlockProps {
+  block: any;
+  index: number;
+}
+
+export const HeroBlock: React.FC<HeroBlockProps> = ({ 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 handleChange = (field: string, value: any) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  const handleUpdateChildren = (newChildren: any[]) => {
+    updateBlock(block.id, { children: newChildren });
+  };
+
+  return (
+    <div className="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)]">
+            Hero Section
+          </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-4">
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Heading
+          </label>
+          <input
+            type="text"
+            value={data.heading || ""}
+            onChange={(e) => handleChange("heading", e.target.value)}
+            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-lg font-bold"
+            placeholder="Hero heading..."
+          />
+        </div>
+
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Subheading
+          </label>
+          <textarea
+            value={data.subheading || ""}
+            onChange={(e) => handleChange("subheading", e.target.value)}
+            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm min-h-[60px] resize-none"
+            placeholder="Hero subheading..."
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              Background Image URL
+            </label>
+            <input
+              type="url"
+              value={data.bgImage || ""}
+              onChange={(e) => handleChange("bgImage", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] 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">
+              Video URL (YouTube/Vimeo)
+            </label>
+            <input
+              type="url"
+              value={data.videoUrl || ""}
+              onChange={(e) => handleChange("videoUrl", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm"
+              placeholder="https://youtube.com/..."
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              CTA Text
+            </label>
+            <input
+              type="text"
+              value={data.ctaText || ""}
+              onChange={(e) => handleChange("ctaText", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm"
+              placeholder="Button text..."
+            />
+          </div>
+          <div>
+            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+              CTA URL
+            </label>
+            <input
+              type="url"
+              value={data.ctaUrl || ""}
+              onChange={(e) => handleChange("ctaUrl", e.target.value)}
+              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm"
+              placeholder="https://..."
+            />
+          </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 ({children.length})
+          </label>
+          <ChildBlocksTree
+            blockId={block.id}
+            children={children}
+            onUpdateChildren={handleUpdateChildren}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ImageBlock.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const ImageBlock: 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-image border border-[var(--kyro-border)] rounded-lg 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">
+          Image
+        </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">
+            Image URL
+          </label>
+          <input
+            type="url"
+            value={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">
+            Alt Text
+          </label>
+          <input
+            type="text"
+            value={data.alt || ""}
+            onChange={(e) => handleChange("alt", 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="Alternative text..."
+          />
+        </div>
+        <div>
+          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Caption
+          </label>
+          <input
+            type="text"
+            value={data.caption || ""}
+            onChange={(e) => handleChange("caption", 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="Image caption..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/LinkBlock.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+
+export const LinkBlock: 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-link border border-dashed 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">
+          Link
+        </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">
+            URL
+          </label>
+          <input
+            type="url"
+            value={block.data.url || ""}
+            onChange={(e) => handleChange("url", 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">
+            Text
+          </label>
+          <input
+            type="text"
+            value={block.data.text || ""}
+            onChange={(e) => handleChange("text", 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="Link text..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};