@prenta/admin 2.6.1 → 2.8.0

package/src/views/header-footer/ChromePreview.tsx

@@ -0,0 +1,497 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import type { FieldDef, RegionSchema } from '@prenta/core'
+
+import type { ChromeMenuItem, ChromeMenuOption } from '../../lib/chrome-service.js'
+import {
+  fieldEntries,
+  type AnnouncementForm,
+  type PreviewChrome,
+  type RegionForm,
+} from './chrome-form.js'
+import { CARD } from './controls.js'
+
+type Rec = Record<string, unknown>
+type Viewport = 'desk' | 'mob'
+
+function rec(value: unknown): Rec {
+  return typeof value === 'object' && value !== null && !Array.isArray(value) ? (value as Rec) : {}
+}
+
+function text(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+/** The message a Preview URL page receives, and the one it sends back when it's ready. */
+const PREVIEW_MESSAGE = 'prenta:chrome-preview'
+const PREVIEW_READY_MESSAGE = 'prenta:chrome-preview-ready'
+
+function randomToken(): string {
+  const bytes = new Uint8Array(12)
+  globalThis.crypto?.getRandomValues?.(bytes)
+  return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('')
+}
+
+/** The Preview URL's origin, or null when it isn't an http(s) URL. */
+function previewOrigin(url: string | null): string | null {
+  if (!url || !/^https?:\/\//i.test(url)) return null
+  try {
+    return new URL(url).origin
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The frame's address: the Preview URL with `draft={token}` in its query.
+ * Set through `URL`, so a fragment stays last and a `draft` already in the
+ * Preview URL is replaced rather than read first.
+ */
+function previewFrameSrc(url: string, token: string): string {
+  const src = new URL(url)
+  src.searchParams.set('draft', token)
+  return src.toString()
+}
+
+// ─── The built-in mock (appearance-hf.jsx `Preview`) ────────────────────
+//
+// The mock draws the kit's example site from whatever the schema declares,
+// picking fields by type (the region's menu, its call-to-action link, a
+// `tel` text…), so a field the mock can't place is simply not drawn.
+
+interface Found<T> {
+  key: string
+  def: T
+  value: unknown
+}
+
+function entries(schema: RegionSchema | undefined, form: RegionForm | undefined) {
+  if (!schema || !form) return []
+  return fieldEntries(schema).map(([key, def]) => ({ key, def, value: form.fields[key] }))
+}
+
+/** The first field of a type that passes `test`, in schema order. */
+function find<T extends FieldDef['type']>(
+  list: Array<Found<FieldDef>>,
+  type: T,
+  test: (def: Extract<FieldDef, { type: T }>, key: string) => boolean = () => true,
+): Found<Extract<FieldDef, { type: T }>> | undefined {
+  const item = list.find(
+    (entry) =>
+      entry.def.type === type && test(entry.def as Extract<FieldDef, { type: T }>, entry.key),
+  )
+  return item as Found<Extract<FieldDef, { type: T }>> | undefined
+}
+
+/** A toggled value's content when it's on; a plain value as it is. */
+function onValue(def: { optional?: boolean }, value: unknown): unknown {
+  if (!def.optional) return value
+  const toggle = rec(value)
+  return toggle.on === true ? toggle : null
+}
+
+function menuOf(menus: ChromeMenuOption[], slug: unknown): ChromeMenuOption | undefined {
+  return typeof slug === 'string' && slug ? menus.find((menu) => menu.slug === slug) : undefined
+}
+
+function topItems(menu: ChromeMenuOption | undefined): ChromeMenuItem[] {
+  return menu ? menu.items : []
+}
+
+const TONE_BACKGROUND: Record<string, string> = {
+  brand: 'var(--acc)',
+  dark: 'var(--site-txt)',
+  alert: 'var(--site-alert)',
+}
+
+function MockSite({
+  header,
+  footer,
+  announcement,
+  menus,
+  siteTitle,
+  viewport,
+  year,
+}: {
+  header?: { schema: RegionSchema; form: RegionForm }
+  footer?: { schema: RegionSchema; form: RegionForm }
+  announcement: AnnouncementForm | null
+  menus: ChromeMenuOption[]
+  siteTitle: string
+  viewport: Viewport
+  year: string
+}) {
+  const mob = viewport === 'mob'
+  const h = entries(header?.schema, header?.form)
+  const f = entries(footer?.schema, footer?.form)
+
+  // Header
+  const mainMenu = find(h, 'menu', (def) => !def.list && !def.optional)
+  const topMenu = find(
+    h,
+    'menu',
+    (def, key) => !def.list && !!def.optional && key !== mainMenu?.key,
+  )
+  const cta = find(h, 'link')
+  const phone = find(h, 'text', (def) => def.format === 'tel')
+  const search = find(h, 'boolean', (_def, key) => key === 'search')
+  const headerVariant = header?.form.variant ?? ''
+  const minimal = headerVariant === 'minimal'
+  const centered = /center/.test(headerVariant)
+  const nav = topItems(
+    menuOf(menus, mainMenu ? text(mainMenu.value) || mainMenu.def.default : undefined),
+  ).filter((item) => !item.button)
+  const top = topMenu ? onValue(topMenu.def, topMenu.value) : null
+  const topLinks = top ? topItems(menuOf(menus, rec(top).value)) : []
+  const ctaValue = cta ? rec(onValue(cta.def, cta.value)) : {}
+  const ctaLabel = text(ctaValue.label)
+  const phoneValue = phone
+    ? phone.def.optional
+      ? text(rec(onValue(phone.def, phone.value)).value)
+      : text(phone.value)
+    : ''
+
+  // Footer
+  const tone = find(f, 'select', (def) => def.options.includes('light'))
+  const light = tone ? tone.value === 'light' : false
+  const about = find(f, 'textarea')
+  const cols = find(f, 'menu', (def) => !!def.list)
+  const copy = find(f, 'text', (def) => !!def.tokens?.includes('{year}'))
+  const email = find(f, 'text', (def) => def.format === 'email')
+  const footPhone = find(f, 'text', (def) => def.format === 'tel')
+  const address = find(
+    f,
+    'text',
+    (def, key) => !def.format && !def.tokens?.length && key !== copy?.key,
+  )
+  const news = find(
+    f,
+    'boolean',
+    (def, key) => key === 'news' || /newsletter/i.test(def.label ?? ''),
+  )
+  const social = find(f, 'social')
+  const legal = find(f, 'menu', (def) => !def.list)
+  const footerVariant = footer?.form.variant ?? ''
+  const fMinimal = footerVariant === 'minimal'
+  const compact = footerVariant === 'compact'
+  const colMenus = (Array.isArray(cols?.value) ? (cols.value as unknown[]) : [])
+    .map((slug) => menuOf(menus, slug))
+    .filter((menu): menu is ChromeMenuOption => !!menu)
+  const shownCols = compact ? colMenus.slice(0, 1) : colMenus
+  const legalValue = legal ? onValue(legal.def, legal.value) : null
+  const legalLinks = legal
+    ? topItems(menuOf(menus, legal.def.optional ? rec(legalValue).value : legalValue))
+    : []
+  const textOf = (item: Found<Extract<FieldDef, { type: 'text' }>> | undefined) =>
+    item
+      ? item.def.optional
+        ? text(rec(onValue(item.def, item.value)).value)
+        : text(item.value)
+      : ''
+  const copyText = (textOf(copy) || `© {year} ${siteTitle}`).split('{year}').join(year)
+  const contact = [textOf(email), textOf(footPhone)].filter(Boolean).join(' · ')
+  const socialLinks = Array.isArray(social?.value) ? (social.value as unknown[]).map(rec) : []
+
+  const toneColor = TONE_BACKGROUND[announcement?.tone ?? 'brand'] ?? TONE_BACKGROUND.brand
+  const footMuted = light ? 'text-site-sub' : 'text-site-foot-txt'
+  const footStrong = light ? 'text-site-txt' : 'text-site-bg'
+
+  return (
+    <div
+      data-preview-site=""
+      data-viewport={viewport}
+      className={`border-bdr bg-site-bg text-site-txt rounded-10 w-full overflow-hidden border text-[13px] leading-[normal] transition-[max-width] duration-200 ${
+        mob ? 'max-w-[360px]' : 'max-w-[860px]'
+      }`}
+    >
+      {announcement?.on ? (
+        <div
+          data-preview-announcement=""
+          className="flex items-center justify-center gap-2.5 px-3 py-[7px] text-center text-[12px] font-semibold text-white"
+          style={{ background: toneColor }}
+        >
+          <span>{announcement.text}</span>
+          {announcement.linkLabel ? <u className="font-bold">{announcement.linkLabel} →</u> : null}
+          {announcement.dismissible ? <span className="ml-1.5 opacity-75">✕</span> : null}
+        </div>
+      ) : null}
+      {header ? (
+        <>
+          {topLinks.length > 0 && !mob && !minimal ? (
+            <div className="bg-site-alt text-site-sub flex justify-end gap-4 px-[18px] py-[5px] text-[11.5px]">
+              {topLinks.map((item) => (
+                <span key={item.id}>{item.label}</span>
+              ))}
+            </div>
+          ) : null}
+          <div
+            data-preview-header={headerVariant}
+            className={`border-site-bdr flex items-center gap-5 border-b px-[18px] py-3.5 ${
+              centered ? 'flex-col gap-2.5' : ''
+            }`}
+          >
+            <span className="text-[16px] font-extrabold tracking-[-0.4px]">{siteTitle}</span>
+            {mob && !minimal ? (
+              <span
+                aria-hidden
+                className="border-site-txt after:border-site-txt relative ml-auto h-3.5 w-[22px] border-y-2 after:absolute after:inset-x-0 after:top-1 after:border-t-2 after:content-['']"
+              />
+            ) : (
+              <>
+                {minimal ? (
+                  <span className="flex-1" />
+                ) : (
+                  <nav
+                    className={`flex flex-1 flex-wrap gap-4 ${centered ? 'justify-center' : 'justify-end'}`}
+                  >
+                    {nav.map((item) => (
+                      <span key={item.id} className="whitespace-nowrap">
+                        {item.label}
+                      </span>
+                    ))}
+                  </nav>
+                )}
+                <span className="flex items-center gap-2.5 whitespace-nowrap">
+                  {search?.value === true && !minimal ? <span>⌕</span> : null}
+                  {phoneValue && !mob ? <span>{phoneValue}</span> : null}
+                  {ctaLabel ? (
+                    <span className="bg-acc rounded-7 px-3 py-[7px] text-[12.5px] font-semibold text-white">
+                      {ctaLabel}
+                    </span>
+                  ) : null}
+                </span>
+              </>
+            )}
+          </div>
+        </>
+      ) : null}
+      <div
+        className={`text-site-muted flex items-center justify-center bg-[repeating-linear-gradient(135deg,var(--site-alt)_0_10px,var(--site-alt2)_10px_20px)] text-[12px] ${
+          mob ? 'h-20' : 'h-[120px]'
+        }`}
+      >
+        Page content
+      </div>
+      {footer ? (
+        <div
+          data-preview-footer={footerVariant}
+          className={`px-[18px] pt-5 pb-3.5 text-[12px] ${light ? 'bg-site-alt text-site-sub' : 'bg-site-txt text-site-foot-txt'}`}
+        >
+          {!fMinimal ? (
+            <div
+              className={`grid gap-[18px] ${
+                compact
+                  ? mob
+                    ? 'grid-cols-1'
+                    : 'grid-cols-[1.3fr_1fr]'
+                  : mob
+                    ? 'grid-cols-2'
+                    : 'grid-cols-[1.3fr_repeat(3,1fr)]'
+              }`}
+            >
+              <div>
+                <div
+                  className={`mb-1.5 text-[15px] font-extrabold tracking-[-0.3px] ${footStrong}`}
+                >
+                  {siteTitle}
+                </div>
+                {about ? <div>{text(about.value)}</div> : null}
+                {!compact ? (
+                  <>
+                    {textOf(address) ? <span className="mt-1 block">{textOf(address)}</span> : null}
+                    {contact ? <span className="mt-1 block">{contact}</span> : null}
+                  </>
+                ) : null}
+                {news?.value === true ? (
+                  <div className="mt-2 flex gap-1.5">
+                    <i
+                      className={`rounded-6 h-[26px] flex-1 border ${
+                        light ? 'border-site-bdr bg-site-bg' : 'border-white/15 bg-white/8'
+                      }`}
+                    />
+                    <em className="bg-acc rounded-6 px-[9px] py-1 font-semibold text-white not-italic">
+                      Subscribe
+                    </em>
+                  </div>
+                ) : null}
+              </div>
+              {shownCols.map((menu) => (
+                <div key={menu.slug}>
+                  <b className={`mb-1.5 block text-[12px] ${footStrong}`}>
+                    {menu.name.replace(/^Footer · /, '')}
+                  </b>
+                  {menu.items.map((item) => (
+                    <span key={item.id} className="mt-1 block">
+                      {item.label}
+                    </span>
+                  ))}
+                </div>
+              ))}
+            </div>
+          ) : null}
+          <div
+            className={`flex flex-wrap gap-3 text-[11px] ${
+              fMinimal
+                ? ''
+                : `mt-4 border-t pt-2.5 ${light ? 'border-site-bdr' : 'border-white/12'}`
+            } ${footMuted}`}
+          >
+            <span>{copyText}</span>
+            {legalLinks.map((item) => (
+              <span key={item.id}>{item.label}</span>
+            ))}
+            <span className="ml-auto flex gap-2">
+              {socialLinks.map((link, index) => (
+                <i
+                  key={index}
+                  title={text(link.platform)}
+                  className={`block h-[18px] w-[18px] rounded-full ${light ? 'bg-site-chip' : 'bg-white/15'}`}
+                />
+              ))}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+// ─── The card ───────────────────────────────────────────────────────────
+
+export interface ChromePreviewProps {
+  header?: { schema: RegionSchema; form: RegionForm }
+  footer?: { schema: RegionSchema; form: RegionForm }
+  announcement: AnnouncementForm | null
+  menus: ChromeMenuOption[]
+  siteTitle: string
+  /** Settings → Preview URL. Set, it renders the site's own components. */
+  previewUrl: string | null
+  /** The draft in the `/public/chrome` shape, sent to the Preview URL page. */
+  draft: PreviewChrome
+}
+
+/**
+ * The preview card (`.hf-pv`): a bar with the Desktop/Mobile switch over a
+ * stage that shows the site's Preview URL page, or the built-in mock.
+ *
+ * The Preview URL page loads as `{previewUrl}?draft={token}`. It gets the
+ * draft as `{ type: 'prenta:chrome-preview', token, chrome }`, posted to its
+ * origin only, when it loads, whenever the draft changes, and again whenever
+ * it posts `{ type: 'prenta:chrome-preview-ready', token }` to its parent.
+ */
+export function ChromePreview({
+  header,
+  footer,
+  announcement,
+  menus,
+  siteTitle,
+  previewUrl,
+  draft,
+}: ChromePreviewProps) {
+  const [viewport, setViewport] = useState<Viewport>('desk')
+  const origin = previewOrigin(previewUrl)
+  const token = useMemo(() => randomToken(), [])
+  const frame = useRef<HTMLIFrameElement | null>(null)
+  const src = origin && previewUrl ? previewFrameSrc(previewUrl, token) : null
+
+  const send = useCallback(() => {
+    const target = frame.current?.contentWindow
+    if (!target || !origin) return
+    target.postMessage({ type: PREVIEW_MESSAGE, token, chrome: draft }, origin)
+  }, [draft, origin, token])
+
+  useEffect(() => {
+    send()
+  }, [send])
+
+  useEffect(() => {
+    if (!origin) return
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== origin || event.source !== frame.current?.contentWindow) return
+      const data = rec(event.data)
+      if (data.type === PREVIEW_READY_MESSAGE && data.token === token) send()
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [origin, send, token])
+
+  const options: Array<[Viewport, string]> = [
+    ['desk', 'Desktop'],
+    ['mob', 'Mobile'],
+  ]
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return
+    event.preventDefault()
+    const next = viewport === 'desk' ? 'mob' : 'desk'
+    setViewport(next)
+    event.currentTarget.querySelector<HTMLButtonElement>(`[data-viewport="${next}"]`)?.focus()
+  }
+
+  let host = ''
+  if (origin) host = new URL(origin).host
+
+  return (
+    <section aria-label="Preview" className={`${CARD} sticky top-3 [@media(width<=1100px)]:static`}>
+      <div className="border-bdr text-sub flex flex-wrap items-center gap-2 border-b px-3 py-[9px] text-[12px] leading-[normal] font-semibold">
+        Preview
+        <span className="text-faint font-mono text-[11px] font-medium">
+          {origin
+            ? `${host} · draft values`
+            : 'built-in mock · set a Preview URL to render your components'}
+        </span>
+        <div
+          role="radiogroup"
+          aria-label="Preview width"
+          onKeyDown={onKeyDown}
+          className="rounded-8 border-bdr bg-bg ml-auto flex gap-0.5 border p-0.5"
+        >
+          {options.map(([id, label]) => {
+            const on = viewport === id
+            return (
+              <button
+                key={id}
+                type="button"
+                role="radio"
+                aria-checked={on}
+                tabIndex={on ? 0 : -1}
+                data-viewport={id}
+                onClick={() => setViewport(id)}
+                className={`rounded-6 cursor-pointer border-0 px-[9px] py-[3px] text-[12px] leading-[normal] font-semibold ${
+                  on ? 'bg-card text-txt shadow-shd' : 'text-sub bg-transparent'
+                }`}
+              >
+                {label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+      <div className="rounded-b-12 bg-bg flex justify-center p-[18px]">
+        {src ? (
+          <iframe
+            ref={frame}
+            src={src}
+            title="Site preview with draft values"
+            onLoad={send}
+            sandbox="allow-scripts allow-same-origin"
+            referrerPolicy="no-referrer"
+            className={`border-bdr bg-site-bg rounded-10 block h-[560px] w-full border transition-[max-width] duration-200 ${
+              viewport === 'mob' ? 'max-w-[360px]' : 'max-w-[860px]'
+            }`}
+          />
+        ) : (
+          <MockSite
+            header={header}
+            footer={footer}
+            announcement={announcement}
+            menus={menus}
+            siteTitle={siteTitle}
+            viewport={viewport}
+            year={String(new Date().getFullYear())}
+          />
+        )}
+      </div>
+    </section>
+  )
+}