@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/blocks/AccordionBlock.tsx

@@ -3,95 +3,63 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronRight, X } from "lucide-react";
+import { AccordionField } from "../fields/AccordionField";
 
-interface AccordionBlockProps {
-  block: any;
-  index: number;
-}
-
-export const AccordionBlock: React.FC<AccordionBlockProps> = ({
+export const AccordionBlock: 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 items = Array.isArray(data.items) ? data.items : [];
-  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  const handleChange = (items: any[]) => {
+    updateBlock(block.id, { data: { ...data, items } });
+  };
 
   return (
-    <div className="block-accordion 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="block-accordion 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-sm font-medium text-[var(--kyro-text-primary)]">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
             Accordion
           </span>
-          <span className="text-xs text-[var(--kyro-text-muted)]">
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
             ({items.length} items)
           </span>
         </div>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <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.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
           <button
             type="button"
             onClick={() => moveBlock(block.id, "down")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3" />
           </button>
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1.5 hover:bg-red-50 rounded"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
-            <X className="w-3.5 h-3.5 text-red-500" />
+            <X className="w-3 h-3" />
           </button>
         </div>
       </div>
 
-      <div className="space-y-2">
-        {items.map((item: any, i: number) => {
-          const isOpen = openIndex === i;
-          return (
-            <div
-              key={i}
-              className="border border-[var(--kyro-border)] rounded-lg overflow-hidden"
-            >
-              <button
-                type="button"
-                onClick={() => setOpenIndex(isOpen ? null : i)}
-                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)]">
-                  {item.title || `Item ${i + 1}`}
-                </span>
-                {isOpen ? (
-                  <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
-                ) : (
-                  <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
-                )}
-              </button>
-              {isOpen && (
-                <div className="p-3 bg-[var(--kyro-surface)]">
-                  <p className="text-sm text-[var(--kyro-text-primary)] whitespace-pre-wrap">
-                    {item.content || "No content"}
-                  </p>
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
+      <AccordionField items={items} onChange={handleChange} compact />
     </div>
   );
 };

package/src/components/blocks/ArrayBlock.tsx

@@ -4,71 +4,80 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { ArrayField } from "../fields/ArrayField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 
-interface ArrayBlockProps {
-  block: any;
-  index: number;
-}
-
-export const ArrayBlock: React.FC<ArrayBlockProps> = ({ block, index }) => {
+export const ArrayBlock: 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 handleUpdateChildren = (newChildren: any[]) => {
-    updateBlock(block.id, { children: newChildren });
-  };
+  const items = Array.isArray(data.items) ? data.items : [];
 
   return (
-    <div className="block-array 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="block-array 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-sm font-medium text-[var(--kyro-text-primary)]">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
             Repeater
           </span>
-          <span className="text-xs text-[var(--kyro-text-muted)]">
-            ({children.length} children)
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
+            ({items.length + children.length} items)
           </span>
         </div>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <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.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
           <button
             type="button"
             onClick={() => moveBlock(block.id, "down")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3" />
           </button>
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1.5 hover:bg-red-50 rounded"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
-            <X className="w-3.5 h-3.5 text-red-500" />
+            <X className="w-3 h-3" />
           </button>
         </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
-        </label>
-        <ChildBlocksTree
-          blockId={block.id}
-          children={children}
-          onUpdateChildren={handleUpdateChildren}
-        />
+      <div className="space-y-3">
+        {items.length > 0 && (
+          <ArrayField
+            items={items}
+            onChange={(newItems) =>
+              updateBlock(block.id, { data: { ...data, items: newItems } })
+            }
+            compact
+          />
+        )}
+
+        <div className="pt-2 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>
   );