@prenta/admin 0.92.0

package/src/fields/BlockBuilderField.tsx

@@ -0,0 +1,409 @@
+'use client'
+
+import { useState, useCallback, useMemo } from 'react'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+  arrayMove,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Plus,
+  GripVertical,
+  Trash2,
+  ChevronDown,
+  ChevronRight,
+  Layout,
+  Megaphone,
+  Columns3,
+  Image,
+  Quote,
+  Play,
+  X,
+} from 'lucide-react'
+import { PRESET_BLOCKS, type BlockTypeDefinition } from './block-types.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
+
+const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  layout: Layout,
+  megaphone: Megaphone,
+  columns: Columns3,
+  image: Image,
+  quote: Quote,
+  play: Play,
+}
+
+interface BlockValue {
+  id: string
+  type: string
+  data: Record<string, unknown>
+}
+
+export interface BlockBuilderFieldProps {
+  label?: string
+  value?: BlockValue[]
+  onChange?: (value: BlockValue[]) => void
+  blocks?: BlockTypeDefinition[]
+  helpText?: string
+}
+
+interface BlockFieldProps {
+  field: BlockTypeDefinition['fields'][number]
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+function BlockField({ field, value, onChange }: BlockFieldProps) {
+  if (field.type === 'select' && field.options) {
+    return (
+      <div>
+        <label className="mb-1 block text-sm font-medium">
+          {field.label}
+          {field.required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+        </label>
+        <select
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        >
+          <option value="">Select...</option>
+          {field.options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    )
+  }
+
+  if (field.type === 'richText') {
+    return (
+      <div>
+        <label className="mb-1 block text-sm font-medium">
+          {field.label}
+          {field.required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+        </label>
+        <textarea
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          rows={4}
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        />
+      </div>
+    )
+  }
+
+  if (field.type === 'media') {
+    return (
+      <div>
+        <label className="mb-1 block text-sm font-medium">
+          {field.label}
+          {field.required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+        </label>
+        <div className="flex items-center gap-3 rounded-md border border-dashed border-[var(--border)] p-3">
+          <div className="bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-md">
+            <Image className="h-5 w-5 text-[var(--muted-foreground)]" />
+          </div>
+          <span className="text-sm text-[var(--muted-foreground)]">
+            {value ? 'Media selected' : 'No media selected'}
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium">
+        {field.label}
+        {field.required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+      <input
+        type="text"
+        value={(value as string) ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        required={field.required}
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none 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
+}
+
+function SortableBlock({
+  block,
+  blockDef,
+  expanded,
+  onToggle,
+  onRemove,
+  onFieldChange,
+}: SortableBlockProps) {
+  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
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="rounded-md border border-[var(--border)] bg-[var(--card)]"
+    >
+      <div className="flex items-center gap-2 border-b border-[var(--border)] px-3 py-2">
+        <button
+          type="button"
+          className="cursor-grab touch-none text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-4 w-4" />
+        </button>
+
+        {IconComponent && <IconComponent className="h-4 w-4 text-[var(--muted-foreground)]" />}
+
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex flex-1 items-center gap-1.5 text-sm font-medium"
+        >
+          {blockDef?.label ?? block.type}
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5 text-[var(--muted-foreground)]" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5 text-[var(--muted-foreground)]" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          onClick={onRemove}
+          className="text-[var(--muted-foreground)] hover:text-[var(--destructive)]"
+          aria-label="Remove block"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+
+      {expanded && blockDef && (
+        <div className="space-y-4 p-4">
+          {blockDef.fields.map((field) => (
+            <BlockField
+              key={field.name}
+              field={field}
+              value={block.data[field.name]}
+              onChange={(val) => onFieldChange(field.name, val)}
+            />
+          ))}
+        </div>
+      )}
+
+      {expanded && !blockDef && (
+        <div className="p-4 text-sm text-[var(--muted-foreground)]">
+          Unknown block type: <code>{block.type}</code>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function BlockBuilderField({
+  label,
+  value = [],
+  onChange,
+  blocks: customBlocks,
+  helpText,
+}: BlockBuilderFieldProps) {
+  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])
+
+  const blockDefMap = useMemo(() => {
+    const map = new Map<string, BlockTypeDefinition>()
+    for (const def of allBlockTypes) {
+      map.set(def.type, def)
+    }
+    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 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))
+    },
+    [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)
+  }
+
+  function removeBlock(id: string) {
+    onChange?.(value.filter((b) => b.id !== id))
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
+  }
+
+  function toggleExpand(id: string) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  function updateBlockField(blockId: string, fieldName: string, fieldValue: unknown) {
+    onChange?.(
+      value.map((b) =>
+        b.id === blockId ? { ...b, data: { ...b.data, [fieldName]: fieldValue } } : b,
+      ),
+    )
+  }
+
+  const blockIds = value.map((b) => b.id)
+
+  return (
+    <div>
+      {label && <label className="mb-2 block text-sm font-medium">{label}</label>}
+
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
+          <div className="space-y-2">
+            {value.map((block) => (
+              <SortableBlock
+                key={block.id}
+                block={block}
+                blockDef={blockDefMap.get(block.type)}
+                expanded={expandedIds.has(block.id)}
+                onToggle={() => toggleExpand(block.id)}
+                onRemove={() => removeBlock(block.id)}
+                onFieldChange={(name, val) => updateBlockField(block.id, name, val)}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+
+      {value.length === 0 && (
+        <div className="rounded-md border border-dashed border-[var(--border)] px-4 py-8 text-center text-sm text-[var(--muted-foreground)]">
+          No blocks added yet. Click &ldquo;Add Block&rdquo; to get started.
+        </div>
+      )}
+
+      <div className="relative mt-3">
+        <button
+          type="button"
+          onClick={() => setPickerOpen((prev) => !prev)}
+          className="inline-flex items-center gap-1.5 rounded-md border border-dashed border-[var(--border)] px-3 py-2 text-sm text-[var(--muted-foreground)] transition-colors hover:border-[var(--foreground)] hover:text-[var(--foreground)]"
+        >
+          <Plus className="h-4 w-4" />
+          Add Block
+        </button>
+      </div>
+
+      <Dialog.Root open={pickerOpen} onOpenChange={setPickerOpen}>
+        <Dialog.Portal container={adminPortalContainer()}>
+          <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+          <Dialog.Content
+            aria-describedby={undefined}
+            className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none"
+          >
+            <div className="border-border flex items-center justify-between border-b px-5 py-4">
+              <Dialog.Title className="text-base font-medium">Add Block</Dialog.Title>
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md p-1 focus-visible:ring-2 focus-visible:outline-none"
+                  aria-label="Close block picker"
+                >
+                  <X className="h-5 w-5" aria-hidden />
+                </button>
+              </Dialog.Close>
+            </div>
+            <div className="grid grid-cols-2 gap-3 p-5 sm:grid-cols-3">
+              {allBlockTypes.map((bt) => {
+                const Icon = BLOCK_ICONS[bt.icon]
+                return (
+                  <button
+                    key={bt.type}
+                    type="button"
+                    onClick={() => addBlock(bt.type)}
+                    className="border-border hover:border-primary hover:bg-accent flex flex-col items-start gap-1.5 rounded-md border p-3 text-left transition-colors"
+                  >
+                    {Icon && <Icon className="text-primary h-5 w-5" aria-hidden />}
+                    <span className="text-sm font-medium">{bt.label}</span>
+                    <span className="text-muted-foreground text-xs leading-snug">
+                      {bt.description}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
+    </div>
+  )
+}

package/src/fields/ComponentBlockField.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+/**
+ * Top-level admin field for component-aware blocks. Consumes a
+ * {@link Manifest} produced by `@prenta/component-blocks`,
+ * renders a component picker (when more than one component is allowed)
+ * and a recursive props form via {@link PropInput}.
+ *
+ * Storage shape:
+ *   { component: 'Hero', props: { title: 'Welcome', alignment: 'center' } }
+ *
+ * Live validation runs through `validateComponentBlockValue` from
+ * `@prenta/core`. The whole-value error is shown at the top
+ * of the form, and the per-prop error map (parsed out of the message
+ * string) is forwarded into `PropInput` so each input can render its
+ * own inline error.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import type { Manifest } from '@prenta/component-blocks'
+
+import {
+  buildClientValidator,
+  getAllowedComponents,
+  parsePerPropErrors,
+  seedPropsForComponent,
+} from './component-block-helpers.js'
+import { PropInput } from './PropInput.js'
+
+export interface ComponentBlockValue {
+  component: string
+  props: Record<string, unknown>
+}
+
+export interface ComponentBlockFieldProps {
+  label?: string
+  manifest: Manifest
+  /** Optional whitelist of component names. */
+  allow?: string[]
+  /** Default component picked when the field is first used. */
+  defaultComponent?: string
+  value?: ComponentBlockValue
+  onChange: (value: ComponentBlockValue) => void
+  /**
+   * Optional async validator hook. Receives the proposed value and the
+   * field config; should return `true` for ok or a string error.
+   * Falls back to a built-in structural validator when not provided —
+   * which is what cms-core would do server-side at save time anyway.
+   */
+  validate?: (value: ComponentBlockValue) => string | true
+  helpText?: string
+}
+
+export function ComponentBlockField({
+  label,
+  manifest,
+  allow,
+  defaultComponent,
+  value,
+  onChange,
+  validate,
+  helpText,
+}: ComponentBlockFieldProps) {
+  const allowedComponents = useMemo(() => getAllowedComponents(manifest, allow), [manifest, allow])
+  // Track the initial seed application so we don't repeatedly stomp
+  // the editor's prop values on every render. The defaultComponent
+  // seed only fires once, when value is undefined on mount.
+  const seededRef = useRef(false)
+
+  useEffect(() => {
+    if (seededRef.current) return
+    if (value) {
+      seededRef.current = true
+      return
+    }
+    const picked =
+      allowedComponents.find((c) => c.name === defaultComponent) ?? allowedComponents[0]
+    if (!picked) return
+    seededRef.current = true
+    onChange({ component: picked.name, props: seedPropsForComponent(picked) })
+  }, [allowedComponents, defaultComponent, value, onChange])
+
+  const currentSpec =
+    (value && manifest.components.find((c) => c.name === value.component)) ?? allowedComponents[0]
+
+  // Pure structural validation when caller didn't provide their own.
+  // Keeps the form usable even without a live validator wired in.
+  const builtinValidate = useMemo(() => buildClientValidator(manifest, allow), [manifest, allow])
+  const validator = validate ?? builtinValidate
+
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const perPropErrors = useMemo(() => parsePerPropErrors(errorMessage), [errorMessage])
+
+  useEffect(() => {
+    if (!value) {
+      setErrorMessage(null)
+      return
+    }
+    const result = validator(value)
+    setErrorMessage(result === true ? null : result)
+  }, [value, validator])
+
+  function handleComponentChange(componentName: string) {
+    const spec = manifest.components.find((c) => c.name === componentName)
+    if (!spec) return
+    onChange({ component: spec.name, props: seedPropsForComponent(spec) })
+  }
+
+  function handlePropChange(propName: string, next: unknown) {
+    if (!value) return
+    onChange({
+      ...value,
+      props: { ...value.props, [propName]: next },
+    })
+  }
+
+  if (!currentSpec) {
+    return (
+      <div className="bg-destructive/10 rounded-md border border-[var(--destructive)] p-3 text-sm text-[var(--destructive)]">
+        Component block has no components to choose from.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {label ? <label className="block text-sm font-medium">{label}</label> : null}
+
+      {allowedComponents.length > 1 ? (
+        <label className="block text-sm">
+          <div className="mb-1 text-xs tracking-wide text-[var(--muted-foreground)] uppercase">
+            Component
+          </div>
+          <select
+            value={currentSpec.name}
+            onChange={(e) => handleComponentChange(e.target.value)}
+            className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+          >
+            {allowedComponents.map((spec) => (
+              <option key={spec.name} value={spec.name}>
+                {spec.displayName}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+
+      {errorMessage ? (
+        <div className="bg-destructive/10 rounded-md border border-[var(--destructive)] px-3 py-2 text-xs text-[var(--destructive)]">
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <fieldset className="rounded-md border border-[var(--border)] bg-[var(--card)] p-4">
+        <legend className="px-1 text-xs tracking-wide text-[var(--muted-foreground)] uppercase">
+          {currentSpec.displayName}
+        </legend>
+        {currentSpec.description ? (
+          <p className="mb-3 text-xs text-[var(--muted-foreground)]">{currentSpec.description}</p>
+        ) : null}
+        <div className="space-y-4">
+          {currentSpec.props.map((prop) => (
+            <PropInput
+              key={prop.name}
+              prop={prop}
+              value={value?.props?.[prop.name]}
+              onChange={(next) => handlePropChange(prop.name, next)}
+              errors={perPropErrors}
+              path={prop.name}
+            />
+          ))}
+        </div>
+      </fieldset>
+
+      {helpText ? <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p> : null}
+    </div>
+  )
+}

package/src/fields/DateField.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+export interface DateFieldProps {
+  label: string
+  value?: string
+  onChange: (value: string) => void
+  required?: boolean
+  helpText?: string
+}
+
+export function DateField({ label, value = '', onChange, required, helpText }: DateFieldProps) {
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+      <div className="relative">
+        <input
+          type="date"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          required={required}
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        />
+        <button
+          type="button"
+          className="absolute top-1/2 right-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>
+        </button>
+      </div>
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
+    </div>
+  )
+}