@prenta/admin 0.98.0 → 1.0.0

package/src/views/page-builder/Widgets.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import { LayoutGrid } from 'lucide-react'
-
-export interface WidgetsProps {
-  onNavigate?: (path: string) => void
-}
-
-/**
- * /widgets — placeholder for the embeddable Widgets library.
- *
- * Widgets are reusable, embeddable components (forms, CTAs, banners)
- * that can be dropped into pages and saved sections. The management UI
- * ships in a later release; this view establishes the route and nav
- * entry with an honest empty state rather than a dead link.
- */
-export function Widgets({ onNavigate }: WidgetsProps) {
-  return (
-    <div className="p-4 pr-8">
-      <div className="mb-4">
-        <h1 className="text-foreground mb-1">Widgets</h1>
-        <p className="text-muted-foreground text-sm">
-          Reusable, embeddable components for pages and saved sections.
-        </p>
-      </div>
-
-      <div className="border-border bg-card rounded-lg border p-8 text-center">
-        <LayoutGrid className="text-muted-foreground mx-auto mb-3 h-8 w-8" aria-hidden />
-        <h2 className="text-foreground mb-1 text-lg font-medium">Widgets are coming soon</h2>
-        <p className="text-muted-foreground mx-auto mb-4 max-w-md text-sm">
-          The widget library lets you build embeddable components once and reuse them across pages.
-          In the meantime, use Saved Sections for reusable content blocks.
-        </p>
-        <button
-          type="button"
-          onClick={() => onNavigate?.('/saved-sections')}
-          className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium hover:opacity-90"
-        >
-          View Saved Sections
-        </button>
-      </div>
-    </div>
-  )
-}

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

@@ -1,79 +0,0 @@
-'use client'
-
-import type { BlockPreviewProps } from './index.js'
-
-export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
-  const heading = (data.heading as string) || ''
-  const body = (data.body as string) || ''
-  const buttonText = (data.buttonText as string) || ''
-
-  const button = (
-    <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-      {buttonText || 'Click Here'}
-    </span>
-  )
-
-  if (variant === 'inline') {
-    return (
-      <div className="border-border flex items-center justify-between gap-4 rounded-md border p-4">
-        <div className="flex-1">
-          <p className="text-foreground text-sm font-medium">
-            {heading || <span className="text-muted-foreground">CTA Heading</span>}
-          </p>
-          {body && <p className="text-muted-foreground mt-1 text-xs">{body}</p>}
-        </div>
-        {button}
-      </div>
-    )
-  }
-
-  if (variant === 'floating') {
-    return (
-      <div className="border-border bg-card mx-auto max-w-md rounded-lg border p-6 shadow-md">
-        <div className="text-center">
-          <h3 className="text-foreground text-lg font-medium">
-            {heading || <span className="text-muted-foreground">CTA Heading</span>}
-          </h3>
-          {(body || !heading) && (
-            <p className="text-muted-foreground mt-2 text-sm">
-              {body || 'Supporting text for the call to action'}
-            </p>
-          )}
-          <div className="mt-4">{button}</div>
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'split') {
-    return (
-      <div className="border-border flex items-center gap-6 rounded-md border p-6">
-        <div className="flex-1">
-          <h3 className="text-foreground text-lg font-medium">
-            {heading || <span className="text-muted-foreground">CTA Heading</span>}
-          </h3>
-          {(body || !heading) && (
-            <p className="text-muted-foreground mt-2 text-sm">
-              {body || 'Supporting text for the call to action'}
-            </p>
-          )}
-        </div>
-        <div className="shrink-0">{button}</div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border-border bg-accent rounded-md border p-6 text-center">
-      <h3 className="text-foreground text-lg font-medium">
-        {heading || <span className="text-muted-foreground">CTA Heading</span>}
-      </h3>
-      {(body || !heading) && (
-        <p className="text-muted-foreground mt-2 text-sm">
-          {body || 'Supporting text for the call to action'}
-        </p>
-      )}
-      <div className="mt-4">{button}</div>
-    </div>
-  )
-}

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

@@ -1,69 +0,0 @@
-'use client'
-
-import { Image } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-interface CardItem {
-  title?: string
-  description?: string
-  image?: string
-  link?: string
-  icon?: string
-}
-
-export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
-  const items = (data.items as CardItem[]) || []
-
-  const placeholderItems: CardItem[] =
-    items.length > 0
-      ? items
-      : [
-          { title: 'Card Title', description: 'Card description text' },
-          { title: 'Card Title', description: 'Card description text' },
-          { title: 'Card Title', description: 'Card description text' },
-        ]
-
-  const gridClass =
-    variant === 'grid-2'
-      ? 'grid grid-cols-2 gap-3'
-      : variant === 'grid-4'
-        ? 'grid grid-cols-4 gap-3'
-        : variant === 'horizontal'
-          ? 'flex gap-3 overflow-hidden'
-          : 'grid grid-cols-3 gap-3'
-
-  return (
-    <div className="border-border rounded-md border p-4">
-      <div className={gridClass}>
-        {placeholderItems.map((item, i) => (
-          <div
-            key={i}
-            className={`border-border bg-card flex flex-col overflow-hidden rounded-md border ${variant === 'horizontal' ? 'min-w-40' : ''}`}
-          >
-            <div className="bg-muted flex h-20 items-center justify-center">
-              {item.image ? (
-                <img
-                  src={item.image}
-                  alt={item.title || ''}
-                  className="h-full w-full object-cover"
-                />
-              ) : (
-                <Image size={20} className="text-muted-foreground" />
-              )}
-            </div>
-            <div className="p-3">
-              <p className="text-foreground text-sm font-medium">
-                {item.title || <span className="text-muted-foreground">Card Title</span>}
-              </p>
-              {item.description && (
-                <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
-                  {item.description}
-                </p>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,46 +0,0 @@
-'use client'
-
-import { Code, Globe, Terminal } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
-  const content = (data.content as string) || ''
-  const language = (data.language as string) || ''
-  const sandboxed = data.sandboxed as boolean | undefined
-
-  const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content
-
-  const icon =
-    variant === 'html' ? (
-      <Globe size={14} className="text-muted-foreground" />
-    ) : variant === 'script' ? (
-      <Terminal size={14} className="text-muted-foreground" />
-    ) : (
-      <Code size={14} className="text-muted-foreground" />
-    )
-
-  return (
-    <div className="border-border overflow-hidden rounded-md border">
-      <div className="border-border bg-card flex items-center gap-2 border-b px-3 py-2">
-        {icon}
-        <span className="text-muted-foreground text-xs">{language || variant}</span>
-        {sandboxed && (
-          <span className="bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 text-xs">
-            sandboxed
-          </span>
-        )}
-      </div>
-      <div className="bg-card p-4">
-        {truncated ? (
-          <pre className="text-foreground overflow-hidden font-mono text-xs whitespace-pre-wrap">
-            {truncated}
-          </pre>
-        ) : (
-          <p className="text-muted-foreground font-mono text-xs italic">
-            // Code content goes here…
-          </p>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,87 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-interface FAQItem {
-  question?: string
-  answer?: string
-}
-
-export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
-  const items = (data.items as FAQItem[]) || []
-
-  const placeholderItems: FAQItem[] =
-    items.length > 0
-      ? items
-      : [
-          { question: 'What is this?', answer: 'Answer to the first question goes here.' },
-          { question: 'How does it work?', answer: 'Answer to the second question goes here.' },
-          {
-            question: 'Where can I learn more?',
-            answer: 'Answer to the third question goes here.',
-          },
-        ]
-
-  if (variant === 'two-column') {
-    const mid = Math.ceil(placeholderItems.length / 2)
-    const col1 = placeholderItems.slice(0, mid)
-    const col2 = placeholderItems.slice(mid)
-
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="grid grid-cols-2 gap-4">
-          {[col1, col2].map((column, colIdx) => (
-            <div key={colIdx} className="flex flex-col gap-3">
-              {column.map((item, i) => (
-                <div key={i} className="border-border rounded-md border p-3">
-                  <p className="text-foreground text-sm font-medium">
-                    {item.question || 'Question?'}
-                  </p>
-                  <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
-                    {item.answer || 'Answer text…'}
-                  </p>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'list') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="flex flex-col gap-3">
-          {placeholderItems.map((item, i) => (
-            <div key={i} className="border-border border-b pb-3 last:border-b-0 last:pb-0">
-              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
-              <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
-                {item.answer || 'Answer text…'}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border-border rounded-md border p-4">
-      <div className="flex flex-col gap-2">
-        {placeholderItems.map((item, i) => (
-          <div key={i} className="border-border rounded-md border p-3">
-            <div className="flex items-center justify-between">
-              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
-              <ChevronDown size={14} className="text-muted-foreground shrink-0" />
-            </div>
-            {i === 0 && (
-              <p className="text-muted-foreground mt-2 text-xs">{item.answer || 'Answer text…'}</p>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,18 +0,0 @@
-'use client'
-
-import { Box } from 'lucide-react'
-
-export interface FallbackPreviewProps {
-  blockType: string
-  data: Record<string, unknown>
-}
-
-export function FallbackPreview({ blockType }: FallbackPreviewProps) {
-  return (
-    <div className="border-border bg-muted/50 flex flex-col items-center justify-center gap-2 rounded-md border border-dashed p-8">
-      <Box size={24} className="text-muted-foreground" />
-      <p className="text-muted-foreground text-sm font-medium">{blockType}</p>
-      <p className="text-muted-foreground text-xs">No preview available</p>
-    </div>
-  )
-}

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

@@ -1,117 +0,0 @@
-'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">
-          {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">
-            <Send size={14} className="text-primary-foreground" />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  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">{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="mt-3">
-        <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-          {variant === 'custom' ? 'Submit' : 'Send Message'}
-        </span>
-      </div>
-    </div>
-  )
-}

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

@@ -1,87 +0,0 @@
-'use client'
-
-import { Image } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-interface GalleryImage {
-  src?: string
-  alt?: string
-  caption?: string
-}
-
-export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
-  const images = (data.images as GalleryImage[]) || []
-
-  const placeholders: GalleryImage[] =
-    images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }))
-
-  const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
-    <div
-      className={`bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`}
-    >
-      {item.src ? (
-        <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
-      ) : (
-        <Image size={20} className="text-muted-foreground" />
-      )}
-    </div>
-  )
-
-  if (variant === 'masonry') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="columns-3 gap-3 space-y-3">
-          {placeholders.map((item, i) => (
-            <Thumbnail
-              key={i}
-              item={item}
-              className={
-                i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'
-              }
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'carousel') {
-    return (
-      <div className="border-border overflow-hidden rounded-md border p-4">
-        <div className="flex gap-3 overflow-hidden">
-          {placeholders.slice(0, 4).map((item, i) => (
-            <Thumbnail key={i} item={item} className="aspect-square min-w-[120px] flex-1" />
-          ))}
-          {placeholders.length > 4 && (
-            <div className="bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md">
-              <span className="text-muted-foreground text-sm">+{placeholders.length - 4}</span>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'lightbox') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="grid grid-cols-3 gap-3">
-          {placeholders.map((item, i) => (
-            <Thumbnail key={i} item={item} className="aspect-square" />
-          ))}
-        </div>
-        <p className="text-muted-foreground mt-2 text-center text-xs">Click to open lightbox</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border-border rounded-md border p-4">
-      <div className="grid grid-cols-3 gap-3">
-        {placeholders.map((item, i) => (
-          <Thumbnail key={i} item={item} className="aspect-square" />
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,90 +0,0 @@
-'use client'
-
-import { Image, Play } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
-  const title = (data.title as string) || ''
-  const subtitle = (data.subtitle as string) || ''
-  const image = data.image as string | undefined
-  const ctaText = (data.ctaText as string) || ''
-  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4
-
-  if (variant === 'split-image') {
-    return (
-      <div className="border-border flex min-h-[200px] overflow-hidden rounded-md border">
-        <div className="flex flex-1 flex-col justify-center gap-3 p-6">
-          <h2 className="text-foreground text-2xl font-medium">
-            {title || <span className="text-muted-foreground">Hero Title</span>}
-          </h2>
-          {(subtitle || !title) && (
-            <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-          )}
-          {ctaText && (
-            <div className="mt-2">
-              <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-                {ctaText}
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="bg-muted flex flex-1 items-center justify-center">
-          {image ? (
-            <img src={image} alt="" className="h-full w-full object-cover" />
-          ) : (
-            <Image size={32} className="text-muted-foreground" />
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'minimal') {
-    return (
-      <div className="border-border flex flex-col items-center gap-3 rounded-md border p-8">
-        <h2 className="text-foreground text-2xl font-medium">
-          {title || <span className="text-muted-foreground">Hero Title</span>}
-        </h2>
-        {(subtitle || !title) && (
-          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-        )}
-        {ctaText && (
-          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
-            {ctaText}
-          </span>
-        )}
-      </div>
-    )
-  }
-
-  const isVideo = variant === 'video-bg'
-
-  return (
-    <div className="border-border relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-8">
-      {image ? (
-        <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
-      ) : (
-        <div className="bg-muted absolute inset-0" />
-      )}
-      <div className="bg-background absolute inset-0" style={{ opacity: overlayOpacity }} />
-      <div className="relative z-10 flex flex-col items-center gap-3 text-center">
-        {isVideo && (
-          <div className="bg-primary/90 mb-2 flex h-12 w-12 items-center justify-center rounded-full">
-            <Play size={20} className="text-primary-foreground" />
-          </div>
-        )}
-        <h2 className="text-foreground text-2xl font-medium">
-          {title || <span className="text-muted-foreground">Hero Title</span>}
-        </h2>
-        {(subtitle || !title) && (
-          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-        )}
-        {ctaText && (
-          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
-            {ctaText}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}