@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/blocks/HeroBlock.tsx

@@ -3,12 +3,12 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { HeroField } from "../fields/HeroField";
 import { UploadField } from "../fields/UploadField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 
-export const HeroBlock: React.FC<{ block: any; index: number }> = ({
+export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -18,7 +18,7 @@ export const HeroBlock: React.FC<{ block: any; index: number }> = ({
   const data = blockData?.data ?? block.data ?? {};
   const children = blockData?.children ?? block.children ?? [];
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
@@ -26,7 +26,7 @@ export const HeroBlock: React.FC<{ block: any; index: number }> = ({
     <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">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
             Hero Section
           </span>
         </div>

package/src/components/blocks/ImageBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
 
-export const ImageBlock: React.FC<{ block: any; index: number }> = ({
+export const ImageBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -14,14 +14,14 @@ export const ImageBlock: React.FC<{ block: any; index: number }> = ({
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
   const data = blockData?.data || block.data || {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     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">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
           Image
         </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

package/src/components/blocks/LinkBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { LinkField } from "../fields/LinkField";
 
-export const LinkBlock: React.FC<{ block: any; index: number }> = ({
+export const LinkBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,14 +15,14 @@ export const LinkBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     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">
+        <span className="text-[10px] font-bold text-[var(--kyro-text-muted)]  shrink-0 w-8">
           Link
         </span>
         <div className="flex-1 min-w-0">

package/src/components/blocks/ListBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { ListField } from "../fields/ListField";
 
-export const ListBlock: React.FC<{ block: any; index: number }> = ({
+export const ListBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -23,7 +23,7 @@ export const ListBlock: React.FC<{ block: any; index: number }> = ({
   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">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
           List
         </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

package/src/components/blocks/ParagraphBlock.tsx

@@ -3,59 +3,29 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { BlockWrapper } from "./BlockWrapper";
 
-export const ParagraphBlock: React.FC<{ block: any; index: number }> = ({
+export const ParagraphBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
-  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const { updateBlock } = useBlockActions();
 
   const data = blockData?.data || block.data || {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     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>
+    <BlockWrapper id={block.id} type="paragraph" label="Paragraph">
+      <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..."
+      />
+    </BlockWrapper>
   );
 };

package/src/components/blocks/RelationshipBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { RelationshipBlockField } from "../fields/RelationshipBlockField";
 
-export const RelationshipBlock: React.FC<{ block: any; index: number }> = ({
+export const RelationshipBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +15,7 @@ export const RelationshipBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
@@ -23,7 +23,7 @@ export const RelationshipBlock: React.FC<{ block: any; index: number }> = ({
     <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">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
             Relationship
           </span>
           <span className="text-[10px] text-[var(--kyro-text-muted)]">

package/src/components/blocks/RichTextBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, AlignLeft } from "lucide-react";
+import { ChevronRight, X, AlignLeft } from "../ui/icons";
 import PortableTextField from "../fields/PortableTextField";
 
-export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
+export const RichTextBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,7 +15,7 @@ export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data || block.data || {};
 
-  const handleChange = (newValue: any) => {
+  const handleChange = (newValue: unknown) => {
     updateBlock(block.id, { data: { ...data, content: newValue } });
   };
 
@@ -24,7 +24,7 @@ export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
       <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">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
             Rich Text
           </span>
         </div>

package/src/components/blocks/VStackBlock.tsx

@@ -3,59 +3,27 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
 import { ChildrenField } from "../fields/ChildrenField";
+import { BlockWrapper } from "./BlockWrapper";
 
-export const VStackBlock: React.FC<{ block: any; index: number }> = ({
+export const VStackBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
-  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const { updateBlock } = 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>
-
+    <BlockWrapper id={block.id} type="vstack" label="Stack">
       <ChildrenField
         blockId={block.id}
         children={children}
         onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
         compact
       />
-    </div>
+    </BlockWrapper>
   );
 };

package/src/components/blocks/VideoBlock.tsx

@@ -3,10 +3,10 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X } from "../ui/icons";
 import { VideoField } from "../fields/VideoField";
 
-export const VideoBlock: React.FC<{ block: any; index: number }> = ({
+export const VideoBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,14 +15,14 @@ export const VideoBlock: React.FC<{ block: any; index: number }> = ({
 
   const data = blockData?.data ?? block.data ?? {};
 
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: unknown) => {
     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">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] ">
           Video
         </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

package/src/components/blocks/types.ts

@@ -0,0 +1,11 @@
+export interface Block {
+  id: string;
+  type?: string;
+  data?: Record<string, unknown>;
+  children?: Block[];
+}
+
+export interface BlockComponentProps {
+  block: Block;
+  index: number;
+}

package/src/components/fields/AccordionField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+import { ChevronDown, ChevronUp, Plus, X } from "../ui/icons";
 
 interface AccordionItem {
   title: string;

package/src/components/fields/ArrayField.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Plus, ChevronDown, ChevronUp, X } from "lucide-react";
+import { Plus, ChevronDown, ChevronUp, X } from "../ui/icons";
 
 interface ArrayFieldItem {
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface ArrayFieldProps {

package/src/components/fields/ArrayLayout.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import type { Field } from "@kyro-cms/core/client";
+import RelationshipField from "./RelationshipField";
+
+interface ArrayLayoutProps {
+  field: Field;
+  value: unknown[];
+  onChange: (value: unknown[]) => void;
+  renderField: (
+    field: Field,
+    parentData: Record<string, unknown>,
+    onChange: (value: unknown) => void,
+  ) => React.ReactNode;
+  disabled?: boolean;
+}
+
+export function ArrayLayout({
+  field,
+  value,
+  onChange,
+  renderField,
+  disabled,
+}: ArrayLayoutProps) {
+  const items = Array.isArray(value) ? value : [];
+  const labelField = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields?.[0]?.name || "user";
+  const isRelationship = (field as Field & { fields?: { type?: string }[] }).fields?.[0]?.type === "relationship";
+
+  return (
+    <div className="kyro-form-field">
+      <label className="kyro-form-label">{field.label || field.name}</label>
+      {isRelationship ? (
+        <RelationshipField
+          field={{
+            name: labelField,
+            relationTo: (field as Field & { fields?: { relationTo?: string }[] }).fields?.[0]?.relationTo || "",
+            hasMany: true,
+            label: (field as Field & { fields?: { label?: string }[] }).fields?.[0]?.label,
+          }}
+          value={(items as Record<string, unknown>[]).map((i) => i[labelField]).filter(Boolean)}
+          onChange={(newValue) => {
+            const newItems = (newValue || []).map((id: string) => ({
+              [labelField]: id,
+            }));
+            onChange(newItems);
+          }}
+          disabled={disabled}
+        />
+      ) : (
+        <div className="kyro-form-array border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-[var(--kyro-radius-md)] p-4 space-y-4">
+          {(items as Record<string, unknown>[]).map((item, index) => (
+            <div
+              key={index}
+              className="kyro-form-array-item bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] p-4 relative group"
+            >
+              <div className="flex justify-between items-center mb-4 pb-2 border-b border-[var(--kyro-border)]">
+                <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)]">
+                  Item {index + 1}
+                </span>
+                <button
+                  type="button"
+                  disabled={disabled}
+                  className="text-[11px] font-bold text-[var(--kyro-error)] opacity-50 hover:opacity-100 transition-opacity disabled:opacity-30"
+                  onClick={() =>
+                    onChange(items.filter((_: unknown, i: number) => i !== index))
+                  }
+                >
+                  Remove
+                </button>
+              </div>
+              <div className="space-y-4">
+                {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
+                  renderField(f, item, (newItem) => {
+                    const newItems = [...items];
+                    newItems[index] = newItem;
+                    onChange(newItems);
+                  }),
+                )}
+              </div>
+            </div>
+          ))}
+          <button
+            type="button"
+            className="w-full py-3 border-2 border-dashed border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+            disabled={disabled}
+            onClick={() => onChange([...items, {}])}
+          >
+            + Add Item
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}