@prenta/admin 0.98.1 → 1.0.0

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

@@ -1,197 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback } from 'react'
-import {
-  X,
-  Loader2,
-  AlertTriangle,
-  Layout,
-  FileText,
-  MapPin,
-  Phone,
-  BookOpen,
-  File,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { cmsApi } from '../../lib/api.js'
-import { createEmptyPage } from '@prenta/core/page-builder'
-import type { PageNode } from '@prenta/core'
-
-export interface TemplatePickerProps {
-  onSelect: (templateTree: PageNode) => void
-  onClose: () => void
-}
-
-interface PageTemplate {
-  id: string
-  name: string
-  description: string
-  category: string
-  tree: PageNode
-}
-
-const categoryIcons: Record<string, LucideIcon> = {
-  landing: Layout,
-  blog: FileText,
-  contact: MapPin,
-  portfolio: BookOpen,
-  mobile: Phone,
-}
-
-const categoryColors: Record<string, string> = {
-  landing: 'bg-primary/10 text-primary',
-  blog: 'bg-accent text-foreground',
-  contact: 'bg-primary/10 text-primary',
-  portfolio: 'bg-accent text-foreground',
-  mobile: 'bg-primary/10 text-primary',
-}
-
-function resolveIcon(category: string): LucideIcon {
-  return categoryIcons[category] ?? File
-}
-
-function resolveBadgeColor(category: string): string {
-  return categoryColors[category] ?? 'bg-muted text-muted-foreground'
-}
-
-export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
-  const [templates, setTemplates] = useState<PageTemplate[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  const fetchTemplates = useCallback(async () => {
-    setLoading(true)
-    setError(null)
-    const res = await cmsApi<PageTemplate[]>('/page-templates')
-    if (res.error) {
-      setError(res.error)
-    } else {
-      setTemplates(res.data ?? [])
-    }
-    setLoading(false)
-  }, [])
-
-  useEffect(() => {
-    fetchTemplates()
-  }, [fetchTemplates])
-
-  useEffect(() => {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [onClose])
-
-  function handleBlankPage() {
-    onSelect(createEmptyPage())
-    onClose()
-  }
-
-  function handleTemplateSelect(template: PageTemplate) {
-    onSelect(template.tree)
-    onClose()
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Choose a template"
-    >
-      <div
-        className="motion-safe:animate-in motion-safe:fade-in-0 absolute inset-0 bg-black/50"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-
-      <div className="bg-card border-border relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border shadow-2xl">
-        <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h2 className="text-foreground text-lg font-medium">Choose a Template</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors"
-            aria-label="Close"
-          >
-            <X size={18} />
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto px-5 pb-5">
-          {loading && (
-            <div className="flex items-center justify-center py-16">
-              <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-            </div>
-          )}
-
-          {error && !loading && (
-            <div className="flex flex-col items-center justify-center py-12 text-center">
-              <AlertTriangle size={24} className="text-destructive mb-2" />
-              <p className="text-muted-foreground mb-3 text-sm">{error}</p>
-              <button
-                type="button"
-                onClick={fetchTemplates}
-                className="text-foreground border-border hover:bg-accent rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
-              >
-                Retry
-              </button>
-            </div>
-          )}
-
-          {!loading && !error && (
-            <div
-              className="grid grid-cols-2 gap-3 md:grid-cols-3"
-              role="list"
-              aria-label="Available templates"
-            >
-              <button
-                type="button"
-                role="listitem"
-                onClick={handleBlankPage}
-                className="border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
-              >
-                <div className="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors">
-                  <File size={20} />
-                </div>
-                <p className="text-foreground text-center text-sm font-medium">Blank Page</p>
-                <p className="text-muted-foreground text-center text-xs">Start from scratch</p>
-              </button>
-
-              {templates.map((template) => {
-                const Icon = resolveIcon(template.category)
-                const badgeColor = resolveBadgeColor(template.category)
-
-                return (
-                  <button
-                    key={template.id}
-                    type="button"
-                    role="listitem"
-                    onClick={() => handleTemplateSelect(template)}
-                    className="border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
-                  >
-                    <div className="bg-accent text-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors">
-                      <Icon size={20} />
-                    </div>
-                    <p className="text-foreground w-full truncate text-center text-sm font-medium">
-                      {template.name}
-                    </p>
-                    {template.description && (
-                      <p className="text-muted-foreground line-clamp-2 text-center text-xs">
-                        {template.description}
-                      </p>
-                    )}
-                    <span className={`inline-block rounded-full px-2 py-0.5 text-xs ${badgeColor}`}>
-                      {template.category}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

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>
-  )
-}