@prenta/admin 2.7.0 → 2.8.0

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

@@ -0,0 +1,398 @@
+'use client'
+
+import { AlertTriangle, Code } from 'lucide-react'
+import { useRef, type KeyboardEvent, type MouseEvent } from 'react'
+import type {
+  ChromeOrphan,
+  ChromeOverridesList,
+  ChromeRegionName,
+  RegionSchema,
+} from '@prenta/core'
+
+import { Button } from '../../components/ui/Button.js'
+import type { ChromeMenuOption } from '../../lib/chrome-service.js'
+import { ChromeField } from './ChromeField.js'
+import {
+  componentPath,
+  fieldEntries,
+  overrideChips,
+  repoFileUrl,
+  shortCommit,
+  timeAgo,
+  type RegionForm,
+} from './chrome-form.js'
+import { CARD, CardHead, KeyChip, LockPill } from './controls.js'
+
+const ORPHAN_TTL_MS = 30 * 86_400_000
+
+/** The kit's variant thumbnails, by variant id; other ids draw the default. */
+function VariantThumb({ region, id }: { region: ChromeRegionName; id: string }) {
+  const bar = 'block h-[5px] rounded-[3px] bg-bdr'
+  const logo = 'block h-[9px] w-4 rounded-[2px] bg-sub'
+  const cta = 'block h-[9px] w-3.5 rounded-[2px] bg-acc'
+  if (region === 'footer') {
+    const blocks = id === 'minimal' ? 0 : id === 'compact' ? 2 : 4
+    return (
+      <span
+        aria-hidden
+        className="rounded-6 bg-site-thumb flex h-[30px] items-center gap-1 px-[7px]"
+      >
+        {blocks === 0 ? (
+          <i className="bg-site-thumb-bar block h-[5px] w-full rounded-[3px]" />
+        ) : (
+          Array.from({ length: blocks }, (_, index) => (
+            <i key={index} className="bg-site-thumb-bar block h-3.5 flex-1 rounded-[3px]" />
+          ))
+        )}
+      </span>
+    )
+  }
+  const centered = /center/.test(id)
+  const minimal = id === 'minimal'
+  return (
+    <span
+      aria-hidden
+      className={`rounded-6 bg-bg flex h-[30px] items-center gap-1 px-[7px] ${
+        centered ? 'justify-center' : 'justify-between'
+      }`}
+    >
+      <i className={logo} />
+      {centered ? null : minimal ? (
+        <i className={cta} />
+      ) : (
+        <span className="flex gap-[3px]">
+          <i className={`${bar} w-2.5`} />
+          <i className={`${bar} w-2.5`} />
+          <i className={cta} />
+        </span>
+      )}
+    </span>
+  )
+}
+
+function VariantCards({
+  region,
+  schema,
+  value,
+  onChange,
+  disabled,
+}: {
+  region: ChromeRegionName
+  schema: RegionSchema
+  value: string
+  onChange: (variant: string) => void
+  disabled: boolean
+}) {
+  const ids = Object.keys(schema.variants).filter((id) => Object.hasOwn(schema.variants, id))
+  const refs = useRef<Array<HTMLButtonElement | null>>([])
+  const selected = Math.max(0, ids.indexOf(value))
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const last = ids.length - 1
+    let next: number
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+      next = selected === last ? 0 : selected + 1
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+      next = selected === 0 ? last : selected - 1
+    else return
+    event.preventDefault()
+    if (disabled) return
+    onChange(ids[next]!)
+    refs.current[next]?.focus()
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={`${region} variant`}
+      onKeyDown={onKeyDown}
+      className="grid grid-cols-3 gap-2 [@media(width<=560px)]:grid-cols-2"
+    >
+      {ids.map((id, index) => {
+        const on = id === value
+        return (
+          <button
+            key={id}
+            ref={(el) => {
+              refs.current[index] = el
+            }}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            tabIndex={index === selected ? 0 : -1}
+            disabled={disabled}
+            onClick={() => onChange(id)}
+            className={`rounded-10 bg-card flex min-w-0 cursor-pointer flex-col gap-1.5 border p-2 text-left leading-[normal] disabled:cursor-not-allowed ${
+              on ? 'border-acc shadow-[0_0_0_3px_var(--acc-l)]' : 'border-bdr'
+            }`}
+          >
+            <VariantThumb region={region} id={id} />
+            <b className="text-txt text-[12px] leading-[normal] font-semibold">
+              {schema.variants[id]}
+            </b>
+            <KeyChip bare size={10.5}>
+              {id}
+            </KeyChip>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function OrphanRow({
+  region,
+  orphans,
+  now,
+  removing,
+  disabled,
+  onRemove,
+}: {
+  region: ChromeRegionName
+  orphans: ChromeOrphan[]
+  now: number
+  removing: boolean
+  disabled: boolean
+  onRemove: () => void
+}) {
+  const expires = Math.min(...orphans.map((o) => Date.parse(o.orphanedAt) + ORPHAN_TTL_MS))
+  const days = Math.max(0, Math.ceil((expires - now) / 86_400_000))
+  const when = days <= 0 ? 'today' : `in ${days} ${days === 1 ? 'day' : 'days'}`
+  const one = orphans.length === 1
+  return (
+    <div className="border-bdr bg-bg text-sub flex items-start gap-2.5 border-t px-4 py-2.5 text-[12px] leading-[normal]">
+      <span className="text-warn mt-px shrink-0">
+        <AlertTriangle size={14} strokeWidth={1.8} aria-hidden />
+      </span>
+      <span className="min-w-0">
+        <b className="text-txt font-semibold">
+          {one
+            ? '1 saved value isn’t in the schema anymore:'
+            : `${orphans.length} saved values aren’t in the schema anymore:`}
+        </b>{' '}
+        {orphans.map((orphan, index) => (
+          <span key={orphan.key}>
+            {index > 0 ? ', ' : null}
+            <KeyChip>{`${region}.${orphan.key}`}</KeyChip>
+          </span>
+        ))}
+        .{' '}
+        {one
+          ? `It’s no longer sent to the site and will be removed ${when}.`
+          : `They’re no longer sent to the site and will be removed ${when}.`}
+      </span>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="ml-auto"
+        loading={removing}
+        disabled={disabled}
+        onClick={onRemove}
+      >
+        Remove now
+      </Button>
+    </div>
+  )
+}
+
+export interface RegionTabProps {
+  region: ChromeRegionName
+  schema: RegionSchema
+  form: RegionForm
+  onChange: (form: RegionForm) => void
+  problems: Record<string, string>
+  orphans: ChromeOrphan[]
+  removingOrphans: boolean
+  onRemoveOrphans: () => void
+  overrides: ChromeOverridesList | 'unavailable' | 'error'
+  menus: ChromeMenuOption[]
+  siteTitle: string
+  readOnly: boolean
+  /** A save is out: Remove now waits, so the save's If-Match still holds. */
+  saving: boolean
+  now: number
+  href: (path: string) => string
+  onNavigate: (path: string) => void
+  /** The admin route that edits a page, by collection and id. */
+  editPath: (collection: string, id: string) => string
+}
+
+/** One region's cards, top to bottom: Source, Variant, Fields (with orphans), Page overrides. */
+export function RegionTab({
+  region,
+  schema,
+  form,
+  onChange,
+  problems,
+  orphans,
+  removingOrphans,
+  onRemoveOrphans,
+  overrides,
+  menus,
+  siteTitle,
+  readOnly,
+  saving,
+  now,
+  href,
+  onNavigate,
+  editPath,
+}: RegionTabProps) {
+  const { source } = schema
+  const repoUrl = repoFileUrl(source, schema.component)
+  const fields = fieldEntries(schema)
+  const pages =
+    typeof overrides === 'object'
+      ? overrides.pages.filter((page) => page[region] !== undefined)
+      : []
+  const brandPath = '/settings?tab=general'
+
+  function go(event: MouseEvent<HTMLAnchorElement>, path: string) {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+    event.preventDefault()
+    onNavigate(path)
+  }
+
+  return (
+    <>
+      <section aria-label="Source" className={CARD}>
+        <div className="flex flex-wrap items-center gap-3 px-4 py-3">
+          <Code size={15} strokeWidth={1.8} aria-hidden className="text-txt shrink-0" />
+          {/* The kit sets the path on its 16px body line: 20px tall. */}
+          <div className="min-w-0 leading-5">
+            <code className="text-txt font-mono text-[12.5px] font-medium break-all">
+              {componentPath(schema.component)}
+            </code>
+            <div className="text-hint text-faint flex flex-wrap items-center gap-2 leading-[normal]">
+              <i aria-hidden className="bg-suc block h-[7px] w-[7px] rounded-full" />
+              <span>{`Schema in sync · ${source.repo || 'unknown repo'}@${shortCommit(source.commit) || 'unknown'} · ${timeAgo(source.readAt, now)}`}</span>
+            </div>
+          </div>
+          {repoUrl ? (
+            <a
+              href={repoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm2 text-acc ml-auto font-semibold whitespace-nowrap no-underline"
+            >
+              View in repo ↗
+            </a>
+          ) : null}
+        </div>
+      </section>
+
+      <section aria-labelledby={`hf-${region}-variant`} className={CARD}>
+        <CardHead
+          id={`hf-${region}-variant`}
+          title="Variant"
+          description="Site default. Pages can pick a different one."
+        >
+          <LockPill>Defined in code</LockPill>
+        </CardHead>
+        <div className="flex flex-col gap-3.5 px-4 py-3.5">
+          <VariantCards
+            region={region}
+            schema={schema}
+            value={form.variant}
+            disabled={readOnly}
+            onChange={(variant) => onChange({ ...form, variant })}
+          />
+        </div>
+      </section>
+
+      <section aria-labelledby={`hf-${region}-fields`} className={CARD}>
+        <CardHead
+          id={`hf-${region}-fields`}
+          title="Fields"
+          description="Your developer chose what’s editable here."
+        />
+        <div className="flex flex-col gap-3.5 px-4 py-3.5">
+          {fields.length === 0 ? (
+            <p className="text-meta text-sub m-0">This region has no editable fields.</p>
+          ) : (
+            fields.map(([key, def]) => (
+              <ChromeField
+                key={key}
+                region={region}
+                fieldKey={key}
+                def={def}
+                value={form.fields[key]}
+                menus={menus}
+                siteTitle={siteTitle}
+                disabled={readOnly}
+                problem={problems[key]}
+                brandHref={href(brandPath)}
+                onOpenBrand={() => onNavigate(brandPath)}
+                onChange={(value) =>
+                  onChange({ ...form, fields: { ...form.fields, [key]: value } })
+                }
+              />
+            ))
+          )}
+        </div>
+        {orphans.length > 0 ? (
+          <OrphanRow
+            region={region}
+            orphans={orphans}
+            now={now}
+            removing={removingOrphans}
+            disabled={readOnly || saving}
+            onRemove={onRemoveOrphans}
+          />
+        ) : null}
+      </section>
+
+      <section aria-labelledby={`hf-${region}-overrides`} className={CARD}>
+        <CardHead
+          id={`hf-${region}-overrides`}
+          title="Page overrides"
+          description="Set in each page’s settings. Child pages inherit."
+        />
+        <div className="flex flex-col">
+          {overrides === 'error' ? (
+            <p className="text-meta text-faint m-0 px-4 py-2.5" role="alert">
+              Couldn’t load the pages that override the {region}.
+            </p>
+          ) : overrides === 'unavailable' ? (
+            <p className="text-meta text-faint m-0 px-4 py-2.5">
+              Update the CMS to list the pages that override the {region}.
+            </p>
+          ) : pages.length === 0 ? (
+            <p className="text-meta text-faint m-0 px-4 py-2.5">
+              No page overrides the {region}. Every page uses the site default.
+            </p>
+          ) : (
+            pages.map((page) => {
+              const path = editPath(page.collection, page.id)
+              return (
+                <a
+                  key={page.id}
+                  href={href(path)}
+                  onClick={(event) => go(event, path)}
+                  className="border-bdr text-sm2 text-txt hover:bg-bg flex items-center gap-2.5 border-t px-4 py-[9px] no-underline first:border-t-0"
+                >
+                  <span className="min-w-0 truncate">{page.title || page.path}</span>
+                  {overrideChips(page, region).map((chip) => (
+                    <span
+                      key={chip}
+                      className="rounded-5 border-bdr bg-bg text-sub border px-1.5 font-mono text-[11px] font-medium whitespace-nowrap"
+                    >
+                      {chip}
+                    </span>
+                  ))}
+                  <code className="text-faint ml-auto font-mono text-[11.5px] whitespace-nowrap">
+                    {page.path}
+                  </code>
+                </a>
+              )
+            })
+          )}
+          {typeof overrides === 'object' && overrides.truncated ? (
+            <p className="border-bdr text-hint text-faint m-0 border-t px-4 py-2">
+              Showing the 200 most recently changed pages with an override.
+            </p>
+          ) : null}
+        </div>
+      </section>
+    </>
+  )
+}