@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/blocks/ColumnsBlock.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, Columns3 } from "lucide-react";
+import { ColumnsField } from "../fields/ColumnsField";
+
+export const ColumnsBlock: 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 columns = data.columns || 2;
+  const columnData = data.columnData || [];
+
+  const handleColumnsChange = (newColumns: number) => {
+    if (newColumns < 1 || newColumns > 6) return;
+    const newColumnData = Array.from({ length: newColumns }, (_, i) => ({
+      id: i,
+      children: columnData[i]?.children || [],
+    }));
+    updateBlock(block.id, {
+      data: { ...data, columns: newColumns, columnData: newColumnData },
+    });
+  };
+
+  const handleUpdateColumnChildren = (
+    columnIndex: number,
+    newChildren: any[],
+  ) => {
+    const newColumnData = [...columnData];
+    newColumnData[columnIndex] = {
+      ...newColumnData[columnIndex],
+      children: newChildren,
+    };
+    updateBlock(block.id, {
+      data: { ...data, columnData: newColumnData },
+    });
+  };
+
+  return (
+    <div className="block-columns border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Columns3 className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Columns
+          </span>
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
+            ({columns})
+          </span>
+        </div>
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <ColumnsField
+        columns={columns}
+        columnData={columnData}
+        onColumnsChange={handleColumnsChange}
+        onUpdateColumnChildren={handleUpdateColumnChildren}
+      />
+    </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,63 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { UploadField } from "../fields/UploadField";
+
+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-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">
+          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={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <UploadField
+        field={{ label: "File", name: "file", maxCount: 1 }}
+        value={data.file}
+        onChange={(v) => handleChange("file", v)}
+      />
+    </div>
+  );
+};

package/src/components/blocks/HeadingBlock.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { HeadingField } from "../fields/HeadingField";
+
+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>
+
+      <HeadingField text={data.text || ""} onChange={handleChange} compact />
+    </div>
+  );
+};

package/src/components/blocks/HeroBlock.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { HeroField } from "../fields/HeroField";
+import { UploadField } from "../fields/UploadField";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+export const HeroBlock: React.FC<{ block: any; index: number }> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
+  const data = blockData?.data ?? block.data ?? {};
+  const children = blockData?.children ?? block.children ?? [];
+
+  const handleChange = (field: string, value: any) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <div className="block-hero border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Hero Section
+          </span>
+        </div>
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <HeroField
+          heading={data.heading || ""}
+          subheading={data.subheading || ""}
+          ctaText={data.ctaText || ""}
+          ctaUrl={data.ctaUrl || ""}
+          onChange={handleChange}
+          compact
+        />
+
+        <div className="grid grid-cols-2 gap-2">
+          <UploadField
+            field={{ label: "Background", name: "bgImage", maxCount: 1 }}
+            value={data.bgImage}
+            onChange={(v) => handleChange("bgImage", v)}
+          />
+          <input
+            type="url"
+            value={data.videoUrl || ""}
+            onChange={(e) => handleChange("videoUrl", e.target.value)}
+            className="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 font-mono text-xs"
+            placeholder="Video URL..."
+          />
+        </div>
+
+        <div className="pt-3 border-t border-[var(--kyro-border)]">
+          <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">
+            Children ({children.length})
+          </label>
+          <ChildBlocksTree
+            blockId={block.id}
+            children={children}
+            onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ImageBlock.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { UploadField } from "../fields/UploadField";
+
+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 Asset
+          </label>
+          <UploadField
+            field={{ label: "Image Asset", name: "src", maxCount: 1 }}
+            value={data.src}
+            onChange={(value) => handleChange("src", value)}
+          />
+        </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,65 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { LinkField } from "../fields/LinkField";
+
+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-[var(--kyro-border)] rounded-md p-2.5 mb-2 relative group">
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] uppercase shrink-0 w-8">
+          Link
+        </span>
+        <div className="flex-1 min-w-0">
+          <LinkField
+            text={data.text || ""}
+            url={data.url || ""}
+            onChange={handleChange}
+            compact
+          />
+        </div>
+        <div className="flex gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ListBlock.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ListField } from "../fields/ListField";
+
+export const ListBlock: 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 listItems = Array.isArray(data.items) ? data.items : [];
+
+  const handleChange = (items: string[]) => {
+    updateBlock(block.id, { data: { ...data, items } });
+  };
+
+  return (
+    <div className="block-list 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">
+          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={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <ListField items={listItems} onChange={handleChange} compact />
+    </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>
+  );
+};