@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/blocks/RelationshipBlock.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { RelationshipBlockField } from "../fields/RelationshipBlockField";
+
+export const RelationshipBlock: 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-relationship border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Relationship
+          </span>
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
+            → {data.relationTo || "pages"}
+          </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>
+
+      <RelationshipBlockField
+        relationTo={data.relationTo || "pages"}
+        hasMany={data.hasMany || false}
+        selectedIds={Array.isArray(data.selectedIds) ? data.selectedIds : []}
+        selectedId={data.selectedId}
+        labelField={data.labelField || "title"}
+        onChange={handleChange}
+        compact
+      />
+    </div>
+  );
+};

package/src/components/blocks/RichTextBlock.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, AlignLeft } from "lucide-react";
+import PortableTextField from "../fields/PortableTextField";
+
+export const RichTextBlock: 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 = (newValue: any) => {
+    updateBlock(block.id, { data: { ...data, content: newValue } });
+  };
+
+  return (
+    <div className="block-richtext 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">
+          <AlignLeft className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Rich Text
+          </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>
+
+      <PortableTextField
+        field={{ name: "content", label: "Content" }}
+        value={data.content}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};

package/src/components/blocks/VStackBlock.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ChildrenField } from "../fields/ChildrenField";
+
+export const VStackBlock: 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 ?? [];
+
+  return (
+    <div className="block-vstack 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">
+          Stack
+        </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>
+
+      <ChildrenField
+        blockId={block.id}
+        children={children}
+        onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
+        compact
+      />
+    </div>
+  );
+};

package/src/components/blocks/VideoBlock.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { VideoField } from "../fields/VideoField";
+
+export const VideoBlock: 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-video 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">
+          Video
+        </span>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => 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>
+
+      <VideoField
+        src={data.src || ""}
+        title={data.title || ""}
+        onChange={handleChange}
+        onUploadChange={(v) => handleChange("src", v)}
+        compact
+      />
+    </div>
+  );
+};

package/src/components/blocks/index.ts

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

package/src/components/fields/AccordionField.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+
+interface AccordionItem {
+  title: string;
+  content: string;
+}
+
+interface AccordionFieldProps {
+  items?: AccordionItem[];
+  onChange: (items: AccordionItem[]) => void;
+  compact?: boolean;
+}
+
+export const AccordionField: React.FC<AccordionFieldProps> = ({
+  items = [],
+  onChange,
+  compact = false,
+}) => {
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  const handleTitleChange = (index: number, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], title: value };
+    onChange(newItems);
+  };
+
+  const handleContentChange = (index: number, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], content: 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 = () => {
+    onChange([...items, { title: `Item ${items.length + 1}`, content: "" }]);
+    setOpenIndex(items.length);
+  };
+
+  const baseInputClass =
+    "w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+  const smallInputClass =
+    "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";
+
+  if (compact) {
+    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-1.5">
+            {items.map((item: AccordionItem, index: number) => {
+              const isOpen = openIndex === index;
+              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">
+                      {item.title || `Item ${index + 1}`}
+                    </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">
+                      <input
+                        type="text"
+                        value={item.title || ""}
+                        onChange={(e) =>
+                          handleTitleChange(index, e.target.value)
+                        }
+                        onClick={(e) => e.stopPropagation()}
+                        className={smallInputClass}
+                        placeholder="Item title..."
+                      />
+                      <textarea
+                        value={item.content || ""}
+                        onChange={(e) =>
+                          handleContentChange(index, e.target.value)
+                        }
+                        onClick={(e) => e.stopPropagation()}
+                        className={`${smallInputClass} min-h-[60px] resize-none`}
+                        placeholder="Item content..."
+                      />
+                    </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: AccordionItem, index: number) => {
+            const isOpen = openIndex === index;
+            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">
+                    {item.title || `Item ${index + 1}`}
+                  </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">
+                    <input
+                      type="text"
+                      value={item.title || ""}
+                      onChange={(e) => handleTitleChange(index, e.target.value)}
+                      className={baseInputClass}
+                      placeholder="Item title..."
+                    />
+                    <textarea
+                      value={item.content || ""}
+                      onChange={(e) =>
+                        handleContentChange(index, e.target.value)
+                      }
+                      className={`${baseInputClass} min-h-[60px] resize-none`}
+                      placeholder="Item content..."
+                    />
+                  </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 AccordionField;