@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/fields/ArrayField.tsx

@@ -1,30 +1,30 @@
-'use client';
+'use client'
 
-import { Button } from '../components/ui/Button.js';
+import { Button } from '../components/ui/Button.js'
 
 export interface ArrayFieldProps {
-  label: string;
-  value?: any[];
-  onChange: (value: any[]) => void;
-  fields?: any[];
-  helpText?: string;
+  label: string
+  value?: any[]
+  onChange: (value: any[]) => void
+  fields?: any[]
+  helpText?: string
 }
 
 export function ArrayField({ label, value = [], onChange, helpText }: ArrayFieldProps) {
   function addItem() {
-    onChange([...value, { id: crypto.randomUUID(), data: {} }]);
+    onChange([...value, { id: crypto.randomUUID(), data: {} }])
   }
 
   function removeItem(index: number) {
-    onChange(value.filter((_, i) => i !== index));
+    onChange(value.filter((_, i) => i !== index))
   }
 
   function moveItem(from: number, to: number) {
-    if (to < 0 || to >= value.length) return;
-    const next = [...value];
-    const [moved] = next.splice(from, 1);
-    next.splice(to, 0, moved);
-    onChange(next);
+    if (to < 0 || to >= value.length) return
+    const next = [...value]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    onChange(next)
   }
 
   return (
@@ -45,7 +45,13 @@ export function ArrayField({ label, value = [], onChange, helpText }: ArrayField
                 className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
                 aria-label="Move up"
               >
-                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                <svg
+                  className="h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={3}
+                >
                   <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
                 </svg>
               </button>
@@ -56,15 +62,19 @@ export function ArrayField({ label, value = [], onChange, helpText }: ArrayField
                 className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
                 aria-label="Move down"
               >
-                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                <svg
+                  className="h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={3}
+                >
                   <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                 </svg>
               </button>
             </div>
 
-            <div className="flex-1 text-sm text-[var(--muted-foreground)]">
-              Item {index + 1}
-            </div>
+            <div className="flex-1 text-sm text-[var(--muted-foreground)]">Item {index + 1}</div>
 
             <button
               type="button"
@@ -72,8 +82,18 @@ export function ArrayField({ label, value = [], onChange, helpText }: ArrayField
               className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--destructive)]"
               aria-label="Remove item"
             >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                />
               </svg>
             </button>
           </div>
@@ -84,9 +104,7 @@ export function ArrayField({ label, value = [], onChange, helpText }: ArrayField
         Add Item
       </Button>
 
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/BlockBuilderField.tsx

@@ -1,6 +1,6 @@
-'use client';
+'use client'
 
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react'
 import {
   DndContext,
   closestCenter,
@@ -9,15 +9,15 @@ import {
   useSensor,
   useSensors,
   type DragEndEvent,
-} from '@dnd-kit/core';
+} from '@dnd-kit/core'
 import {
   SortableContext,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
   useSortable,
   arrayMove,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import {
   Plus,
   GripVertical,
@@ -31,8 +31,8 @@ import {
   Quote,
   Play,
   X,
-} from 'lucide-react';
-import { PRESET_BLOCKS, type BlockTypeDefinition } from './block-types.js';
+} from 'lucide-react'
+import { PRESET_BLOCKS, type BlockTypeDefinition } from './block-types.js'
 
 const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   layout: Layout,
@@ -41,26 +41,26 @@ const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   image: Image,
   quote: Quote,
   play: Play,
-};
+}
 
 interface BlockValue {
-  id: string;
-  type: string;
-  data: Record<string, unknown>;
+  id: string
+  type: string
+  data: Record<string, unknown>
 }
 
 export interface BlockBuilderFieldProps {
-  label?: string;
-  value?: BlockValue[];
-  onChange?: (value: BlockValue[]) => void;
-  blocks?: BlockTypeDefinition[];
-  helpText?: string;
+  label?: string
+  value?: BlockValue[]
+  onChange?: (value: BlockValue[]) => void
+  blocks?: BlockTypeDefinition[]
+  helpText?: string
 }
 
 interface BlockFieldProps {
-  field: BlockTypeDefinition['fields'][number];
-  value: unknown;
-  onChange: (value: unknown) => void;
+  field: BlockTypeDefinition['fields'][number]
+  value: unknown
+  onChange: (value: unknown) => void
 }
 
 function BlockField({ field, value, onChange }: BlockFieldProps) {
@@ -84,7 +84,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           ))}
         </select>
       </div>
-    );
+    )
   }
 
   if (field.type === 'richText') {
@@ -101,7 +101,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
         />
       </div>
-    );
+    )
   }
 
   if (field.type === 'media') {
@@ -120,7 +120,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           </span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -137,16 +137,16 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
         className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
       />
     </div>
-  );
+  )
 }
 
 interface SortableBlockProps {
-  block: BlockValue;
-  blockDef: BlockTypeDefinition | undefined;
-  expanded: boolean;
-  onToggle: () => void;
-  onRemove: () => void;
-  onFieldChange: (fieldName: string, fieldValue: unknown) => void;
+  block: BlockValue
+  blockDef: BlockTypeDefinition | undefined
+  expanded: boolean
+  onToggle: () => void
+  onRemove: () => void
+  onFieldChange: (fieldName: string, fieldValue: unknown) => void
 }
 
 function SortableBlock({
@@ -157,23 +157,18 @@ function SortableBlock({
   onRemove,
   onFieldChange,
 }: SortableBlockProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: block.id });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: block.id,
+  })
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1,
     zIndex: isDragging ? 10 : undefined,
-  };
+  }
 
-  const IconComponent = blockDef ? BLOCK_ICONS[blockDef.icon] : undefined;
+  const IconComponent = blockDef ? BLOCK_ICONS[blockDef.icon] : undefined
 
   return (
     <div
@@ -191,9 +186,7 @@ function SortableBlock({
           <GripVertical className="h-4 w-4" />
         </button>
 
-        {IconComponent && (
-          <IconComponent className="h-4 w-4 text-[var(--muted-foreground)]" />
-        )}
+        {IconComponent && <IconComponent className="h-4 w-4 text-[var(--muted-foreground)]" />}
 
         <button
           type="button"
@@ -237,7 +230,7 @@ function SortableBlock({
         </div>
       )}
     </div>
-  );
+  )
 }
 
 export function BlockBuilderField({
@@ -247,99 +240,91 @@ export function BlockBuilderField({
   blocks: customBlocks,
   helpText,
 }: BlockBuilderFieldProps) {
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-  const [pickerOpen, setPickerOpen] = useState(false);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const [pickerOpen, setPickerOpen] = useState(false)
 
   const allBlockTypes = useMemo(() => {
-    if (!customBlocks?.length) return PRESET_BLOCKS;
-    const customTypes = new Set(customBlocks.map((b) => b.type));
-    const filtered = PRESET_BLOCKS.filter((b) => !customTypes.has(b.type));
-    return [...filtered, ...customBlocks];
-  }, [customBlocks]);
+    if (!customBlocks?.length) return PRESET_BLOCKS
+    const customTypes = new Set(customBlocks.map((b) => b.type))
+    const filtered = PRESET_BLOCKS.filter((b) => !customTypes.has(b.type))
+    return [...filtered, ...customBlocks]
+  }, [customBlocks])
 
   const blockDefMap = useMemo(() => {
-    const map = new Map<string, BlockTypeDefinition>();
+    const map = new Map<string, BlockTypeDefinition>()
     for (const def of allBlockTypes) {
-      map.set(def.type, def);
+      map.set(def.type, def)
     }
-    return map;
-  }, [allBlockTypes]);
+    return map
+  }, [allBlockTypes])
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
+  )
 
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
+      const { active, over } = event
+      if (!over || active.id === over.id) return
 
-      const oldIndex = value.findIndex((b) => b.id === active.id);
-      const newIndex = value.findIndex((b) => b.id === over.id);
-      if (oldIndex === -1 || newIndex === -1) return;
+      const oldIndex = value.findIndex((b) => b.id === active.id)
+      const newIndex = value.findIndex((b) => b.id === over.id)
+      if (oldIndex === -1 || newIndex === -1) return
 
-      onChange?.(arrayMove(value, oldIndex, newIndex));
+      onChange?.(arrayMove(value, oldIndex, newIndex))
     },
     [value, onChange],
-  );
+  )
 
   function addBlock(type: string) {
     const newBlock: BlockValue = {
       id: crypto.randomUUID(),
       type,
       data: {},
-    };
-    const newId = newBlock.id;
-    onChange?.([...value, newBlock]);
-    setExpandedIds((prev) => new Set(prev).add(newId));
-    setPickerOpen(false);
+    }
+    const newId = newBlock.id
+    onChange?.([...value, newBlock])
+    setExpandedIds((prev) => new Set(prev).add(newId))
+    setPickerOpen(false)
   }
 
   function removeBlock(id: string) {
-    onChange?.(value.filter((b) => b.id !== id));
+    onChange?.(value.filter((b) => b.id !== id))
     setExpandedIds((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
   }
 
   function toggleExpand(id: string) {
     setExpandedIds((prev) => {
-      const next = new Set(prev);
+      const next = new Set(prev)
       if (next.has(id)) {
-        next.delete(id);
+        next.delete(id)
       } else {
-        next.add(id);
+        next.add(id)
       }
-      return next;
-    });
+      return next
+    })
   }
 
   function updateBlockField(blockId: string, fieldName: string, fieldValue: unknown) {
     onChange?.(
       value.map((b) =>
-        b.id === blockId
-          ? { ...b, data: { ...b.data, [fieldName]: fieldValue } }
-          : b,
+        b.id === blockId ? { ...b, data: { ...b.data, [fieldName]: fieldValue } } : b,
       ),
-    );
+    )
   }
 
-  const blockIds = value.map((b) => b.id);
+  const blockIds = value.map((b) => b.id)
 
   return (
     <div>
-      {label && (
-        <label className="mb-2 block text-sm font-medium">{label}</label>
-      )}
+      {label && <label className="mb-2 block text-sm font-medium">{label}</label>}
 
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-      >
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
         <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
           <div className="space-y-2">
             {value.map((block) => (
@@ -350,9 +335,7 @@ export function BlockBuilderField({
                 expanded={expandedIds.has(block.id)}
                 onToggle={() => toggleExpand(block.id)}
                 onRemove={() => removeBlock(block.id)}
-                onFieldChange={(name, val) =>
-                  updateBlockField(block.id, name, val)
-                }
+                onFieldChange={(name, val) => updateBlockField(block.id, name, val)}
               />
             ))}
           </div>
@@ -392,7 +375,7 @@ export function BlockBuilderField({
             </div>
             <div className="grid grid-cols-2 gap-3 p-5 sm:grid-cols-3">
               {allBlockTypes.map((bt) => {
-                const Icon = BLOCK_ICONS[bt.icon];
+                const Icon = BLOCK_ICONS[bt.icon]
                 return (
                   <button
                     key={bt.type}
@@ -406,16 +389,14 @@ export function BlockBuilderField({
                       {bt.description}
                     </span>
                   </button>
-                );
+                )
               })}
             </div>
           </div>
         </div>
       )}
 
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/DateField.tsx

@@ -1,11 +1,11 @@
-'use client';
+'use client'
 
 export interface DateFieldProps {
-  label: string;
-  value?: string;
-  onChange: (value: string) => void;
-  required?: boolean;
-  helpText?: string;
+  label: string
+  value?: string
+  onChange: (value: string) => void
+  required?: boolean
+  helpText?: string
 }
 
 export function DateField({ label, value = '', onChange, required, helpText }: DateFieldProps) {
@@ -28,14 +28,22 @@ export function DateField({ label, value = '', onChange, required, helpText }: D
           className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
           aria-label="Open calendar"
         >
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
           </svg>
         </button>
       </div>
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/FieldRenderer.tsx

@@ -1,39 +1,39 @@
-'use client';
+'use client'
 
-import { TextField } from './TextField.js';
-import { RichTextField } from './RichTextField.js';
-import { SlugField } from './SlugField.js';
-import { SelectField } from './SelectField.js';
-import { MediaField } from './MediaField.js';
-import { RelationshipField } from './RelationshipField.js';
-import { DateField } from './DateField.js';
-import { ToggleField } from './ToggleField.js';
-import { ArrayField } from './ArrayField.js';
-import { BlockBuilderField } from './BlockBuilderField.js';
-import { GroupField } from './GroupField.js';
-import { NavBuilderField } from './NavBuilderField.js';
-import { NumberField } from './NumberField.js';
+import { TextField } from './TextField.js'
+import { RichTextField } from './RichTextField.js'
+import { SlugField } from './SlugField.js'
+import { SelectField } from './SelectField.js'
+import { MediaField } from './MediaField.js'
+import { RelationshipField } from './RelationshipField.js'
+import { DateField } from './DateField.js'
+import { ToggleField } from './ToggleField.js'
+import { ArrayField } from './ArrayField.js'
+import { BlockBuilderField } from './BlockBuilderField.js'
+import { GroupField } from './GroupField.js'
+import { NavBuilderField } from './NavBuilderField.js'
+import { NumberField } from './NumberField.js'
 
 export interface FieldDefinition {
-  name: string;
-  type: string;
-  label: string;
-  required?: boolean;
-  maxLength?: number;
-  helpText?: string;
-  options?: string[];
-  min?: number;
-  max?: number;
-  from?: string;
-  multi?: boolean;
-  fields?: FieldDefinition[];
-  blocks?: any[];
+  name: string
+  type: string
+  label: string
+  required?: boolean
+  maxLength?: number
+  helpText?: string
+  options?: string[]
+  min?: number
+  max?: number
+  from?: string
+  multi?: boolean
+  fields?: FieldDefinition[]
+  blocks?: any[]
 }
 
 export interface FieldRendererProps {
-  field: FieldDefinition;
-  value: any;
-  onChange: (value: any) => void;
+  field: FieldDefinition
+  value: any
+  onChange: (value: any) => void
 }
 
 const FIELD_MAP: Record<string, React.ComponentType<any>> = {
@@ -50,17 +50,17 @@ const FIELD_MAP: Record<string, React.ComponentType<any>> = {
   group: GroupField,
   nav: NavBuilderField,
   number: NumberField,
-};
+}
 
 export function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
-  const Component = FIELD_MAP[field.type];
+  const Component = FIELD_MAP[field.type]
 
   if (!Component) {
     return (
       <div className="rounded-md border border-[var(--destructive)] bg-red-50 p-3 text-sm text-[var(--destructive)]">
         Unknown field type: <code>{field.type}</code>
       </div>
-    );
+    )
   }
 
   return (
@@ -80,5 +80,5 @@ export function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
       blocks={field.blocks}
       name={field.name}
     />
-  );
+  )
 }

package/src/fields/GroupField.tsx

@@ -1,15 +1,15 @@
-'use client';
+'use client'
 
-import { useState, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react'
 
 export interface GroupFieldProps {
-  label: string;
-  children?: ReactNode;
-  defaultOpen?: boolean;
+  label: string
+  children?: ReactNode
+  defaultOpen?: boolean
 }
 
 export function GroupField({ label, children, defaultOpen = true }: GroupFieldProps) {
-  const [open, setOpen] = useState(defaultOpen);
+  const [open, setOpen] = useState(defaultOpen)
 
   return (
     <div className="rounded-md border border-[var(--border)]">
@@ -31,11 +31,9 @@ export function GroupField({ label, children, defaultOpen = true }: GroupFieldPr
       </button>
       {open && (
         <div className="border-t border-[var(--border)] p-4">
-          {children ?? (
-            <p className="text-sm text-[var(--muted-foreground)]">Group fields area</p>
-          )}
+          {children ?? <p className="text-sm text-[var(--muted-foreground)]">Group fields area</p>}
         </div>
       )}
     </div>
-  );
+  )
 }

package/src/fields/MediaField.tsx

@@ -1,11 +1,11 @@
-'use client';
+'use client'
 
 export interface MediaFieldProps {
-  label: string;
-  value?: { id: string; filename: string; url: string } | null;
-  onChange: (value: any) => void;
-  required?: boolean;
-  helpText?: string;
+  label: string
+  value?: { id: string; filename: string; url: string } | null
+  onChange: (value: any) => void
+  required?: boolean
+  helpText?: string
 }
 
 export function MediaField({ label, value, onChange, required, helpText }: MediaFieldProps) {
@@ -40,9 +40,7 @@ export function MediaField({ label, value, onChange, required, helpText }: Media
         </button>
       )}
 
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }