@actuate-media/cms-admin 0.39.0 → 0.40.0

package/src/views/page-editor/SectionInspector.tsx

@@ -1,11 +1,32 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Eye, EyeOff, Lock, Plus, X } from 'lucide-react'
+import { Eye, EyeOff, GripVertical, Lock, Plus, X } from 'lucide-react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
-import type { SectionSettings } from './section-types.js'
-import { getSectionType, type SectionFieldDef } from './section-types.js'
+import type { ResolvedRepeater, SectionSettings } from './section-types.js'
+import {
+  blankRepeaterRow,
+  getSectionType,
+  resolveRepeaterField,
+  type SectionFieldDef,
+} from './section-types.js'
 
 interface SectionInspectorProps {
   section: PageSection
@@ -79,10 +100,8 @@ export function SectionInspector({
             </p>
             <p>
               Edit it in your seed script or code, or register it via{' '}
-              <code className="bg-background rounded px-1 py-0.5 text-xs">
-                sections.customTypes
-              </code>{' '}
-              in your config to make it editable.
+              <code className="bg-background rounded px-1 py-0.5 text-xs">sections.types</code> in
+              your config to make it editable.
             </p>
           </div>
         </div>
@@ -283,20 +302,28 @@ function ContentField({
   field,
   value,
   onChange,
+  id: idProp,
 }: {
   field: SectionFieldDef
   value: unknown
   onChange: (v: unknown) => void
+  /** Explicit input id (repeater rows pass a row-scoped id to stay unique). */
+  id?: string
 }) {
-  const id = `insp-field-${field.key}`
+  const id = idProp ?? `insp-field-${field.key}`
   const text = typeof value === 'string' ? value : ''
 
-  if (field.type === 'stats') {
-    return <StatsField label={field.label} value={value} onChange={onChange} />
-  }
-
-  if (field.type === 'gallery') {
-    return <GalleryField label={field.label} value={value} onChange={onChange} />
+  const repeater = resolveRepeaterField(field)
+  if (repeater) {
+    return (
+      <RepeaterField
+        fieldKey={field.key}
+        label={field.label}
+        repeater={repeater}
+        value={value}
+        onChange={onChange}
+      />
+    )
   }
 
   if (field.type === 'boolean') {
@@ -496,153 +523,191 @@ function RelationshipField({
   )
 }
 
-interface ImageRow {
-  url?: string
-  alt?: string
-  caption?: string
-}
-
-function GalleryField({
+type RowRecord = Record<string, unknown>
+
+/**
+ * Generic repeater editor: an orderable list of rows, each row a small form of
+ * the repeater's sub-fields. Drives the generic `repeater` field type and the
+ * `stats` / `gallery` shorthands (resolved upstream to the same row model), so
+ * there's one editor for every structured-array field.
+ *
+ * Rows are stored as a plain array on `content[fieldKey]`. Drag/reorder uses an
+ * index-derived row id (`row-0`, `row-1`, …); since every edit commits a fresh
+ * array this stays consistent and matches the prior stats/gallery behavior.
+ */
+function RepeaterField({
+  fieldKey,
   label,
+  repeater,
   value,
   onChange,
 }: {
+  fieldKey: string
   label: string
+  repeater: ResolvedRepeater
   value: unknown
   onChange: (v: unknown) => void
 }) {
-  const rows: ImageRow[] = Array.isArray(value) ? (value as ImageRow[]) : []
+  const rows: RowRecord[] = Array.isArray(value) ? (value as RowRecord[]) : []
+  const atCap = typeof repeater.maxRows === 'number' && rows.length >= repeater.maxRows
+  const rowKey = (i: number): string => `row-${i}`
 
-  function update(index: number, patch: Partial<ImageRow>) {
-    onChange(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)))
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  function commit(next: RowRecord[]) {
+    onChange(next)
+  }
+  function update(index: number, patch: RowRecord) {
+    commit(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)))
   }
   function remove(index: number) {
-    onChange(rows.filter((_, i) => i !== index))
+    commit(rows.filter((_, i) => i !== index))
   }
   function add() {
-    onChange([...rows, { url: '', alt: '', caption: '' }])
+    if (atCap) return
+    commit([...rows, blankRepeaterRow(repeater.fields)])
   }
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    // Map the dnd id (index-derived rowKey) back to array positions.
+    const ids = rows.map((_, i) => rowKey(i))
+    const from = ids.indexOf(String(active.id))
+    const to = ids.indexOf(String(over.id))
+    if (from === -1 || to === -1) return
+    const next = rows.slice()
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved!)
+    commit(next)
+  }
+
+  const lower = repeater.rowLabel.toLowerCase()
 
   return (
     <div>
       <span className={LABEL}>{label}</span>
-      <div className="space-y-3">
-        {rows.map((row, i) => (
-          <div key={i} className="border-border rounded-md border p-2">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-muted-foreground text-xs">Image {i + 1}</span>
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`Remove image ${i + 1}`}
-                className="text-muted-foreground hover:text-destructive rounded p-0.5"
-              >
-                <X className="h-3.5 w-3.5" aria-hidden />
-              </button>
-            </div>
-            <div className="space-y-2">
-              <input
-                className={INPUT}
-                placeholder="Image URL (https://…)"
-                value={row.url ?? ''}
-                onChange={(e) => update(i, { url: e.target.value })}
-                aria-label={`Image ${i + 1} URL`}
-              />
-              <input
-                className={INPUT}
-                placeholder="Alt text (for accessibility)"
-                value={row.alt ?? ''}
-                onChange={(e) => update(i, { alt: e.target.value })}
-                aria-label={`Image ${i + 1} alt text`}
-              />
+      {rows.length === 0 ? (
+        <p className="border-border text-muted-foreground mb-2 rounded-md border border-dashed px-2 py-3 text-center text-xs">
+          No {lower}s yet.
+        </p>
+      ) : (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={rows.map((_, i) => rowKey(i))}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-3">
+              {rows.map((row, i) => (
+                <SortableRepeaterRow
+                  key={rowKey(i)}
+                  id={rowKey(i)}
+                  index={i}
+                  fieldKey={fieldKey}
+                  rowLabel={repeater.rowLabel}
+                  fields={repeater.fields}
+                  row={row}
+                  reorderable={rows.length > 1}
+                  onPatch={(patch) => update(i, patch)}
+                  onRemove={() => remove(i)}
+                />
+              ))}
             </div>
-          </div>
-        ))}
-      </div>
+          </SortableContext>
+        </DndContext>
+      )}
       <button
         type="button"
         onClick={add}
-        className="border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium"
+        disabled={atCap}
+        className="border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
       >
         <Plus className="h-3.5 w-3.5" aria-hidden />
-        Add image
+        Add {lower}
       </button>
+      {atCap && (
+        <p className="text-muted-foreground mt-1 text-xs">Maximum of {repeater.maxRows} reached.</p>
+      )}
     </div>
   )
 }
 
-interface StatRow {
-  value?: string
-  label?: string
-  description?: string
-}
-
-function StatsField({
-  label,
-  value,
-  onChange,
+function SortableRepeaterRow({
+  id,
+  index,
+  fieldKey,
+  rowLabel,
+  fields,
+  row,
+  reorderable,
+  onPatch,
+  onRemove,
 }: {
-  label: string
-  value: unknown
-  onChange: (v: unknown) => void
+  id: string
+  index: number
+  fieldKey: string
+  rowLabel: string
+  fields: SectionFieldDef[]
+  row: RowRecord
+  reorderable: boolean
+  onPatch: (patch: RowRecord) => void
+  onRemove: () => void
 }) {
-  const rows: StatRow[] = Array.isArray(value) ? (value as StatRow[]) : []
-
-  function update(index: number, patch: Partial<StatRow>) {
-    const next = rows.map((r, i) => (i === index ? { ...r, ...patch } : r))
-    onChange(next)
-  }
-  function remove(index: number) {
-    onChange(rows.filter((_, i) => i !== index))
-  }
-  function add() {
-    onChange([...rows, { value: '', label: '', description: '' }])
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !reorderable,
+  })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
   }
 
   return (
-    <div>
-      <span className={LABEL}>{label}</span>
-      <div className="space-y-3">
-        {rows.map((row, i) => (
-          <div key={i} className="border-border rounded-md border p-2">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-muted-foreground text-xs">Stat {i + 1}</span>
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`Remove stat ${i + 1}`}
-                className="text-muted-foreground hover:text-destructive rounded p-0.5"
-              >
-                <X className="h-3.5 w-3.5" aria-hidden />
-              </button>
-            </div>
-            <div className="space-y-2">
-              <input
-                className={INPUT}
-                placeholder="Value (e.g. 99.99%)"
-                value={row.value ?? ''}
-                onChange={(e) => update(i, { value: e.target.value })}
-                aria-label={`Stat ${i + 1} value`}
-              />
-              <input
-                className={INPUT}
-                placeholder="Label (e.g. Uptime)"
-                value={row.label ?? ''}
-                onChange={(e) => update(i, { label: e.target.value })}
-                aria-label={`Stat ${i + 1} label`}
-              />
-            </div>
-          </div>
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`border-border rounded-md border p-2 ${isDragging ? 'bg-card shadow-md' : ''}`}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="flex items-center gap-1">
+          {reorderable && (
+            <button
+              type="button"
+              aria-label={`Drag to reorder ${rowLabel} ${index + 1}`}
+              className="text-muted-foreground hover:text-foreground cursor-grab touch-none"
+              {...attributes}
+              {...listeners}
+            >
+              <GripVertical className="h-3.5 w-3.5" aria-hidden />
+            </button>
+          )}
+          <span className="text-muted-foreground text-xs">
+            {rowLabel} {index + 1}
+          </span>
+        </span>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${rowLabel.toLowerCase()} ${index + 1}`}
+          className="text-muted-foreground hover:text-destructive rounded p-0.5"
+        >
+          <X className="h-3.5 w-3.5" aria-hidden />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((sub) => (
+          <ContentField
+            key={sub.key}
+            id={`insp-${fieldKey}-${index}-${sub.key}`}
+            field={sub}
+            value={row[sub.key]}
+            onChange={(v) => onPatch({ [sub.key]: v })}
+          />
         ))}
       </div>
-      <button
-        type="button"
-        onClick={add}
-        className="border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium"
-      >
-        <Plus className="h-3.5 w-3.5" aria-hidden />
-        Add stat
-      </button>
     </div>
   )
 }

package/src/views/page-editor/section-types.ts

@@ -13,6 +13,9 @@ export {
   getSectionTypesForScope,
   sectionTypeLabel,
   isKnownSectionType,
+  resolveRepeaterField,
+  isRepeaterField,
+  blankRepeaterRow,
 } from '@actuate-media/cms-core/page-sections'
 
 export type {
@@ -22,6 +25,8 @@ export type {
   SectionFieldDef,
   SectionSettings,
   SectionTypeDef,
+  ResolvedRepeater,
+  RepeaterRow,
   PostHeaderConfig,
   PostTemplate,
 } from '@actuate-media/cms-core/page-sections'