@actuate-media/cms-admin 0.24.0 → 0.25.0

package/src/views/page-builder/block-renderers/FormPreview.tsx

@@ -1,17 +1,76 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { FileText, Mail, Send } from 'lucide-react'
+import { cmsApi } from '../../../lib/api.js'
 import type { BlockPreviewProps } from './index.js'
 
+interface PreviewField {
+  key: string
+  label: string
+  type: string
+}
+
+interface PreviewForm {
+  name: string
+  fields: PreviewField[]
+}
+
+/**
+ * Canvas preview for the form block. When a form is linked we fetch its real
+ * name + fields so the editor sees what will render; otherwise we fall back to
+ * a generic skeleton. Network failures degrade to the skeleton rather than
+ * breaking the canvas.
+ */
 export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
   const formId = (data.formId as string) || ''
+  const [form, setForm] = useState<PreviewForm | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!formId) {
+      setForm(null)
+      return
+    }
+    let cancelled = false
+    setLoading(true)
+    cmsApi<{ name?: string; fields?: PreviewField[] }>(`/forms/${encodeURIComponent(formId)}`)
+      .then((res) => {
+        if (cancelled) return
+        if (res.data?.name) {
+          setForm({ name: res.data.name, fields: res.data.fields ?? [] })
+        } else {
+          setForm(null)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [formId])
+
+  if (!formId) {
+    return (
+      <div className="border-border bg-muted/30 rounded-md border border-dashed p-6 text-center">
+        <FileText size={20} className="text-muted-foreground mx-auto" />
+        <p className="text-muted-foreground mt-2 text-sm">No form selected</p>
+        <p className="text-muted-foreground/70 text-xs">Pick a form in the block settings</p>
+      </div>
+    )
+  }
+
+  const heading = form?.name ?? (loading ? 'Loading form…' : 'Contact Form')
+  const fields = form?.fields ?? []
 
   if (variant === 'newsletter') {
     return (
       <div className="border-border rounded-md border p-6 text-center">
         <Mail size={24} className="text-muted-foreground mx-auto" />
-        <p className="text-foreground mt-3 text-sm font-medium">Newsletter Signup</p>
-        {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
+        <p className="text-foreground mt-3 text-sm font-medium">
+          {form?.name ?? 'Newsletter Signup'}
+        </p>
         <div className="mx-auto mt-4 flex max-w-xs gap-2">
           <div className="border-border bg-input-background h-9 flex-1 rounded-md border" />
           <div className="bg-primary flex h-9 items-center rounded-md px-3">
@@ -22,42 +81,35 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
     )
   }
 
-  if (variant === 'custom') {
-    return (
-      <div className="border-border rounded-md border p-5">
-        <div className="flex items-center gap-2">
-          <FileText size={16} className="text-muted-foreground" />
-          <p className="text-foreground text-sm font-medium">
-            {formId ? `Form: ${formId}` : 'Custom Form'}
-          </p>
-        </div>
-        <div className="mt-3 flex flex-col gap-2">
-          <div className="border-border bg-input-background h-8 rounded-md border" />
-          <div className="border-border bg-input-background h-8 rounded-md border" />
-          <div className="border-border bg-input-background h-20 rounded-md border" />
-        </div>
-        <div className="mt-3">
-          <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-            Submit
-          </span>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="border-border rounded-md border p-5">
-      <p className="text-foreground text-sm font-medium">Contact Form</p>
-      {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
-      <div className="mt-3 grid grid-cols-2 gap-2">
-        <div className="border-border bg-input-background h-8 rounded-md border" />
-        <div className="border-border bg-input-background h-8 rounded-md border" />
+      <div className="flex items-center gap-2">
+        <FileText size={16} className="text-muted-foreground" />
+        <p className="text-foreground text-sm font-medium">{heading}</p>
+      </div>
+      <div className="mt-3 flex flex-col gap-2">
+        {fields.length > 0 ? (
+          fields.slice(0, 5).map((field) => (
+            <div key={field.key}>
+              <p className="text-muted-foreground mb-1 text-xs">{field.label || field.key}</p>
+              <div
+                className={`border-border bg-input-background rounded-md border ${
+                  field.type === 'textarea' ? 'h-16' : 'h-8'
+                }`}
+              />
+            </div>
+          ))
+        ) : (
+          <>
+            <div className="border-border bg-input-background h-8 rounded-md border" />
+            <div className="border-border bg-input-background h-8 rounded-md border" />
+            <div className="border-border bg-input-background h-20 rounded-md border" />
+          </>
+        )}
       </div>
-      <div className="border-border bg-input-background mt-2 h-8 rounded-md border" />
-      <div className="border-border bg-input-background mt-2 h-20 rounded-md border" />
       <div className="mt-3">
         <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-          Send Message
+          {variant === 'custom' ? 'Submit' : 'Send Message'}
         </span>
       </div>
     </div>

package/src/views/page-builder/canvas/BlockRenderer.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Box, Type, Image, Layout, Star } from 'lucide-react'
 import type { BlockNode } from '@actuate-media/cms-core'
+import { blockRenderers, FallbackPreview } from '../block-renderers/index.js'
 
 export interface BlockRendererProps {
   node: BlockNode
@@ -10,13 +10,6 @@ export interface BlockRendererProps {
   onSelectNode: (id: string | null) => void
 }
 
-const BLOCK_ICONS: Record<string, typeof Box> = {
-  hero: Star,
-  text: Type,
-  image: Image,
-  layout: Layout,
-}
-
 function getBlockLabel(blockType: string): string {
   return blockType.charAt(0).toUpperCase() + blockType.slice(1)
 }
@@ -26,7 +19,7 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
   const isSelected = selectedNodeId === node.id
   const blockType = node.settings.blockType
   const label = getBlockLabel(blockType)
-  const Icon = BLOCK_ICONS[blockType] ?? Box
+  const Preview = blockRenderers[blockType]
 
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -36,6 +29,7 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
   return (
     <div
       data-node-id={node.id}
+      data-block-type={blockType}
       className={`relative min-h-[48px] transition-shadow ${
         isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
@@ -49,9 +43,13 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
         </span>
       )}
 
-      <div className="bg-muted/30 border-border flex items-center justify-center gap-2 rounded-md border border-dashed p-4">
-        <Icon size={16} className="text-muted-foreground" />
-        <span className="text-muted-foreground text-sm">{label}</span>
+      {/* Previews are display-only on the canvas; the wrapper owns selection. */}
+      <div className="pointer-events-none">
+        {Preview ? (
+          <Preview data={node.data} variant={node.settings.variant} />
+        ) : (
+          <FallbackPreview blockType={blockType} data={node.data} />
+        )}
       </div>
     </div>
   )