@alfakit/react 0.0.0-stage → 0.1.1

package/src/components/cms/live-preview.tsx

@@ -0,0 +1,339 @@
+import {
+  CMS_PREVIEW_DEVICES,
+  CmsAutosave,
+  callCmsAutosave,
+  cmsPreviewFitsBeside,
+  cmsPreviewOpensOnLoad,
+  rememberedCmsPreview,
+  reserveCmsPreviewSpace,
+  resolveStickyOffset,
+  type CmsAutosaveSnapshot,
+  type CmsLivePreviewSchema,
+  type CmsPreviewDevice,
+} from '@alfakit/core'
+import {
+  CheckIcon,
+  CircleAlertIcon,
+  EyeIcon,
+  LoaderCircleIcon,
+  Maximize2Icon,
+  Minimize2Icon,
+  MonitorIcon,
+  SmartphoneIcon,
+  TabletIcon,
+  XIcon,
+} from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { usePageSchema, usePanel, useT } from '../../context'
+import { cn } from '../../lib/utils'
+import { ActionList } from '../actions/action-list'
+import { useOptionalFormStore } from '../form/form-context'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+
+/** Badge colours of the status (the server's `PageState` colours). */
+const STATUS_COLORS: Record<string, string> = {
+  gray: 'border-border bg-muted text-foreground',
+  success: 'border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+  warning: 'border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-300',
+  info: 'border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-300',
+  danger: 'border-red-600/30 bg-red-500/10 text-red-700 dark:text-red-300',
+}
+
+const DEVICE_ICONS = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }
+const DEVICE_LABELS = { desktop: 'Desktop', tablet: 'Tablet', phone: 'Phone' }
+
+/**
+ * The page editor's autosave status and live preview (schema type `CmsLivePreview`).
+ * Changes are autosaved as a draft a moment after typing stops; the preview pane shows
+ * the signed preview of that draft beside the form, full screen, or at tablet and phone
+ * widths.
+ */
+export function CmsLivePreview({ component }: { component: CmsLivePreviewSchema }) {
+  const t = useT()
+  const form = useOptionalFormStore()
+  const page = usePageSchema()
+  const panel = usePanel()
+  const latest = useRef({ token: page?.token ?? '', endpoint: panel?.endpoints?.pageCall ?? '' })
+  const [snapshot, setSnapshot] = useState<CmsAutosaveSnapshot>({
+    status: component.savedAt ? 'saved' : 'idle',
+    savedAt: component.savedAt ?? null,
+    previewUrl: component.previewUrl,
+    version: 0,
+    hasChanges: component.hasChanges ?? false,
+  })
+  const [top, setTop] = useState('0px')
+  const actionContext = useMemo(
+    () => ({ token: page?.token ?? '', component: 'page' }),
+    [page?.token],
+  )
+
+  const [open, setOpenState] = useState(false)
+  const [fullScreen, setFullScreen] = useState(false)
+  // Too narrow for the form beside the pane (e.g. 1280px with the sidebar): full-screen overlay.
+  const [overlay, setOverlay] = useState(false)
+  const expanded = fullScreen || overlay
+  const [device, setDevice] = useState<CmsPreviewDevice>('desktop')
+  const root = useRef<HTMLDivElement>(null)
+  const autosaveRef = useRef<CmsAutosave | null>(null)
+  const status =
+    snapshot.hasChanges && component.changedStatus ? component.changedStatus : component.status
+
+  // Measured in the browser after mounting: stick right under the panel's topbar when it
+  // sticks too, and open the pane beside the form on wide screens (the viewer's last
+  // choice wins).
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setTop(resolveStickyOffset(null))
+      if (component.previewUrl && cmsPreviewOpensOnLoad(root.current)) setOpenState(true)
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [component.previewUrl])
+
+  /** Open or collapse the pane, remembering the choice for the next visit. */
+  const setOpen = (next: boolean) => {
+    // Decided in the same render as opening, so the form never makes room for nothing.
+    if (next) setOverlay(!cmsPreviewFitsBeside(root.current))
+    setOpenState(next)
+    rememberedCmsPreview(next ? 'open' : 'closed')
+  }
+
+  useEffect(() => {
+    latest.current = { token: page?.token ?? '', endpoint: panel?.endpoints?.pageCall ?? '' }
+  })
+
+  useEffect(() => {
+    if (!form) return
+
+    const autosave = new CmsAutosave({
+      debounce: component.debounce,
+      previewUrl: component.previewUrl,
+      savedAt: component.savedAt,
+      hasChanges: component.hasChanges,
+      save: (state) => callCmsAutosave(component.autosaveMethod, state, latest.current),
+      onChange: setSnapshot,
+    })
+
+    autosaveRef.current = autosave
+    let values = form.state.values
+    const unsubscribe = form.subscribe((state) => {
+      if (state.values !== values) {
+        values = state.values
+        autosave.schedule(state.values)
+      }
+    })
+
+    return () => {
+      unsubscribe()
+      void autosave.flush().finally(() => autosave.dispose())
+    }
+  }, [form, component.autosaveMethod, component.debounce, component.previewUrl, component.savedAt])
+
+  // Measure whether the pane fits beside the form while it is open, and again on resize.
+  useEffect(() => {
+    if (!open) return
+
+    const measure = () => setOverlay(!cmsPreviewFitsBeside(root.current))
+    measure()
+    window.addEventListener('resize', measure)
+
+    return () => window.removeEventListener('resize', measure)
+  }, [open])
+
+  // Side by side, the form makes room for the pane.
+  useEffect(() => {
+    if (!open || expanded) return
+
+    return reserveCmsPreviewSpace(root.current, 'min(50vw, 56rem)')
+  }, [open, expanded])
+
+  useEffect(() => {
+    if (!open) return
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      if (fullScreen && !overlay) setFullScreen(false)
+      else {
+        setOpenState(false)
+        rememberedCmsPreview('closed')
+      }
+    }
+
+    window.addEventListener('keydown', onKey)
+
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, fullScreen, overlay])
+
+  const width = CMS_PREVIEW_DEVICES[device]
+
+  return (
+    <div
+      ref={root}
+      data-slot="cms-live-preview"
+      style={{ top }}
+      className="bg-background sticky z-20 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border px-3 py-2.5 shadow-sm"
+    >
+      <div className="flex min-w-0 flex-1 basis-64 flex-col gap-0.5">
+        {status && (
+          <p
+            className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm"
+            data-slot="cms-editor-status"
+          >
+            <Badge
+              variant="outline"
+              data-color={status.color}
+              className={STATUS_COLORS[status.color] ?? ''}
+            >
+              {status.label}
+            </Badge>
+            <span className="text-muted-foreground">{status.description}</span>
+          </p>
+        )}
+        <p
+          className="text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs"
+          role="status"
+          aria-live="polite"
+        >
+          <StatusIcon status={snapshot.status} />
+          {statusLabel(snapshot.status, t)}
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        {snapshot.previewUrl && (
+          <Button
+            type="button"
+            variant={open ? 'secondary' : 'outline'}
+            size="sm"
+            aria-pressed={open}
+            title={t(
+              'cms.live_preview_help',
+              {},
+              'See the page as visitors will, updated as you type.',
+            )}
+            onClick={() => setOpen(!open)}
+            data-slot="cms-live-preview-toggle"
+          >
+            <EyeIcon aria-hidden="true" />
+            {open
+              ? t('cms.hide_preview', {}, 'Hide preview')
+              : t('cms.live_preview', {}, 'Live preview')}
+          </Button>
+        )}
+        {component.actions && component.actions.length > 0 && (
+          <div onPointerDownCapture={() => void autosaveRef.current?.flush()}>
+            <ActionList actions={component.actions} context={actionContext} size="sm" />
+          </div>
+        )}
+      </div>
+      {open && snapshot.previewUrl && (
+        <section
+          aria-label={t('cms.live_preview', {}, 'Live preview')}
+          data-slot="cms-live-preview-pane"
+          data-full-screen={expanded || undefined}
+          // Beside the form it starts below the sticky topbar, keeping the topbar usable.
+          style={{ top: expanded ? '0px' : top }}
+          className={cn(
+            'bg-background fixed end-0 bottom-0 z-50 flex flex-col border-s shadow-xl',
+            expanded ? 'inset-x-0 border-s-0' : 'w-full lg:w-[min(50vw,56rem)]',
+          )}
+        >
+          <header className="flex items-center justify-between gap-2 border-b px-3 py-2">
+            <div
+              className="flex items-center gap-1"
+              role="group"
+              aria-label={t('cms.preview_width', {}, 'Preview width')}
+            >
+              {(Object.keys(CMS_PREVIEW_DEVICES) as CmsPreviewDevice[]).map((name) => {
+                const DeviceIcon = DEVICE_ICONS[name]
+
+                return (
+                  <Button
+                    key={name}
+                    type="button"
+                    variant={device === name ? 'secondary' : 'ghost'}
+                    size="icon-sm"
+                    aria-pressed={device === name}
+                    onClick={() => setDevice(name)}
+                  >
+                    <DeviceIcon aria-hidden="true" />
+                    <span className="sr-only">
+                      {t(`cms.device_${name}`, {}, DEVICE_LABELS[name])}
+                    </span>
+                  </Button>
+                )
+              })}
+            </div>
+            <p className="text-muted-foreground hidden truncate text-xs sm:block">
+              {statusLabel(snapshot.status, t)}
+            </p>
+            <div className="flex items-center gap-1">
+              {!overlay && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-pressed={fullScreen}
+                  onClick={() => setFullScreen(!fullScreen)}
+                >
+                  {fullScreen ? (
+                    <Minimize2Icon aria-hidden="true" />
+                  ) : (
+                    <Maximize2Icon aria-hidden="true" />
+                  )}
+                  <span className="sr-only">
+                    {fullScreen
+                      ? t('cms.exit_full_screen', {}, 'Exit full screen')
+                      : t('cms.full_screen', {}, 'Full screen')}
+                  </span>
+                </Button>
+              )}
+              <Button type="button" variant="ghost" size="icon-sm" onClick={() => setOpen(false)}>
+                <XIcon aria-hidden="true" />
+                <span className="sr-only">{t('cms.close_preview', {}, 'Close preview')}</span>
+              </Button>
+            </div>
+          </header>
+          <div className="bg-muted/40 flex flex-1 justify-center overflow-auto p-3">
+            <iframe
+              key={snapshot.version}
+              src={snapshot.previewUrl}
+              title={t('cms.preview_frame', {}, 'Page preview')}
+              className="bg-background h-full rounded-md border shadow-sm"
+              style={{ width: width === null ? '100%' : `${width}px`, maxWidth: '100%' }}
+            />
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+function StatusIcon({ status }: { status: CmsAutosaveSnapshot['status'] }) {
+  if (status === 'saving')
+    return <LoaderCircleIcon className="size-4 animate-spin" aria-hidden="true" />
+  if (status === 'error')
+    return <CircleAlertIcon className="text-destructive size-4" aria-hidden="true" />
+  if (status === 'saved') return <CheckIcon className="size-4" aria-hidden="true" />
+
+  return null
+}
+
+function statusLabel(status: CmsAutosaveSnapshot['status'], t: ReturnType<typeof useT>): string {
+  switch (status) {
+    case 'saving':
+      return t('cms.saving', {}, 'Saving…')
+    case 'saved':
+      return t('cms.saved', {}, 'Draft saved automatically')
+    case 'pending':
+      return t('cms.unsaved', {}, 'Unsaved changes')
+    case 'error':
+      return t(
+        'cms.save_failed',
+        {},
+        "Your latest changes couldn't be saved. They will be tried again.",
+      )
+    default:
+      return ''
+  }
+}

package/src/components/cms/menu.tsx

@@ -0,0 +1,246 @@
+import {
+  cmsLinkRel,
+  type CmsMenuItemSchema,
+  type CmsMenuSchema,
+  type CmsSiteSchema,
+} from '@alfakit/core'
+import { ChevronDownIcon, MenuIcon, XIcon } from 'lucide-react'
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { Button } from '../ui/button'
+import { useCms } from './context'
+
+function ItemLink({ item, className }: { item: CmsMenuItemSchema; className?: string }) {
+  const { t } = useCms()
+
+  if (!item.url) {
+    return <span className={className}>{item.label}</span>
+  }
+
+  return (
+    <a
+      href={item.url}
+      target={item.newTab ? '_blank' : undefined}
+      rel={cmsLinkRel(item.newTab)}
+      aria-current={item.current ? 'page' : undefined}
+      data-active={item.active || undefined}
+      className={className}
+    >
+      {item.label}
+      {item.newTab && (
+        <span className="sr-only"> {t('cms.new_tab', {}, '(opens in a new tab)')}</span>
+      )}
+    </a>
+  )
+}
+
+const linkClass =
+  'hover:text-foreground focus-visible:ring-ring/50 rounded-md px-3 py-2 text-sm font-medium outline-none focus-visible:ring-[3px] data-[active]:text-foreground text-muted-foreground aria-[current=page]:text-foreground'
+
+/** A top-level item with a submenu: the link plus a disclosure button for its children. */
+function DropdownItem({ item }: { item: CmsMenuItemSchema }) {
+  const { t } = useCms()
+  const [open, setOpen] = useState(false)
+  const id = useId()
+  const ref = useRef<HTMLLIElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    const close = (event: MouseEvent | FocusEvent) => {
+      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target))
+        setOpen(false)
+    }
+
+    document.addEventListener('mousedown', close)
+    document.addEventListener('focusin', close)
+
+    return () => {
+      document.removeEventListener('mousedown', close)
+      document.removeEventListener('focusin', close)
+    }
+  }, [open])
+
+  return (
+    <li
+      ref={ref}
+      className="relative flex items-center"
+      onKeyDown={(event) => {
+        if (event.key === 'Escape' && open) {
+          setOpen(false)
+          ref.current?.querySelector<HTMLButtonElement>('button')?.focus()
+        }
+      }}
+    >
+      <ItemLink item={item} className={linkClass} />
+      <button
+        type="button"
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -ms-2 rounded-md p-1.5 outline-none focus-visible:ring-[3px]"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen(!open)}
+      >
+        <ChevronDownIcon
+          className={cn('size-4 transition-transform', open && 'rotate-180')}
+          aria-hidden="true"
+        />
+        <span className="sr-only">
+          {t('cms.toggle_submenu', { label: item.label }, `Show the ${item.label} submenu`)}
+        </span>
+      </button>
+      <ul
+        id={id}
+        hidden={!open}
+        className="bg-popover text-popover-foreground absolute start-0 top-full z-40 mt-1 min-w-52 rounded-lg border p-1 shadow-md"
+      >
+        {item.children.map((child) => (
+          <li key={child.id}>
+            <ItemLink item={child} className={cn(linkClass, 'block')} />
+            {child.children.length > 0 && (
+              <ul className="ms-3 border-s ps-1">
+                {child.children.map((grandchild) => (
+                  <li key={grandchild.id}>
+                    <ItemLink item={grandchild} className={cn(linkClass, 'block')} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ul>
+    </li>
+  )
+}
+
+/** Nested items as plain lists (the mobile menu and the footer). */
+export function CmsMenuList({
+  items,
+  className,
+  itemClassName,
+}: {
+  items: CmsMenuItemSchema[]
+  className?: string
+  itemClassName?: string
+}) {
+  return (
+    <ul className={className}>
+      {items.map((item) => (
+        <li key={item.id}>
+          <ItemLink item={item} className={cn(linkClass, 'block', itemClassName)} />
+          {item.children.length > 0 && (
+            <CmsMenuList
+              items={item.children}
+              className="ms-3 border-s ps-2"
+              itemClassName={itemClassName}
+            />
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** Links to the page in the site's other languages. */
+export function CmsLanguageSwitcher({
+  site,
+  className,
+}: {
+  site: CmsSiteSchema
+  className?: string
+}) {
+  const { t } = useCms()
+
+  if (site.locales.length < 2) return null
+
+  return (
+    <nav
+      aria-label={t('cms.language', {}, 'Language')}
+      className={className}
+      data-slot="cms-language-switcher"
+    >
+      <ul className="flex flex-wrap items-center gap-1">
+        {site.locales.map((locale) => (
+          <li key={locale.code}>
+            <a
+              href={locale.url}
+              hrefLang={locale.code}
+              lang={locale.code}
+              aria-current={locale.current ? 'true' : undefined}
+              className={cn(linkClass, 'px-2 py-1 uppercase')}
+            >
+              {locale.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+/**
+ * The header navigation: items in a row from `md`, a disclosure menu below it. Items
+ * with children get a submenu button (Escape or a click outside closes it).
+ */
+export function CmsNav({
+  menu,
+  children,
+}: {
+  menu: CmsMenuSchema | null | undefined
+  children?: ReactNode
+}) {
+  const { t } = useCms()
+  const [open, setOpen] = useState(false)
+  const id = useId()
+
+  if (!menu || menu.items.length === 0) return <>{children}</>
+
+  return (
+    <>
+      <nav
+        aria-label={t('cms.main_navigation', {}, 'Main navigation')}
+        className="hidden md:block"
+        data-slot="cms-nav"
+      >
+        <ul className="flex items-center gap-1">
+          {menu.items.map((item) =>
+            item.children.length > 0 ? (
+              <DropdownItem key={item.id} item={item} />
+            ) : (
+              <li key={item.id}>
+                <ItemLink item={item} className={linkClass} />
+              </li>
+            ),
+          )}
+        </ul>
+      </nav>
+      {children}
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="md:hidden"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen(!open)}
+      >
+        {open ? <XIcon aria-hidden="true" /> : <MenuIcon aria-hidden="true" />}
+        <span className="sr-only">
+          {open ? t('cms.close_menu', {}, 'Close menu') : t('cms.open_menu', {}, 'Open menu')}
+        </span>
+      </Button>
+      <nav
+        id={id}
+        hidden={!open}
+        aria-label={t('cms.main_navigation', {}, 'Main navigation')}
+        className="bg-background absolute inset-x-0 top-full z-40 border-b px-4 pb-4 shadow-sm md:hidden"
+        data-slot="cms-mobile-nav"
+      >
+        <CmsMenuList
+          items={menu.items}
+          className="flex flex-col gap-1 pt-2"
+          itemClassName="py-2.5 text-base"
+        />
+      </nav>
+    </>
+  )
+}