@prenta/admin 2.7.0 → 2.8.0

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

@@ -0,0 +1,331 @@
+'use client'
+
+import { useId, useRef, useState, type KeyboardEvent } from 'react'
+import { toast } from 'sonner'
+import type { ChromeSyncStatus } from '@prenta/core'
+
+import {
+  CODE_SAMPLES,
+  LOCAL_DEV_SAMPLE,
+  highlight,
+  type CodeSampleId,
+  type CodeTokenKind,
+} from './code-samples.js'
+import { shortCommit, timeAgo } from './chrome-form.js'
+import { CARD, CardHead, FieldLabel, Help, INPUT, KeyChip, MONO } from './controls.js'
+
+const TOKEN_CLASS: Record<CodeTokenKind, string | undefined> = {
+  comment: 'text-code-cmt',
+  string: 'text-code-str',
+  keyword: 'text-code-kw',
+  plain: undefined,
+}
+
+/** `.hf-code`: the dark code block, 12px DM Mono at 1.65. */
+const CODE_BLOCK =
+  'bg-code-bg text-code-txt relative m-0 overflow-auto rounded-b-12 px-4 py-3.5 font-mono text-[12px] leading-[1.65] whitespace-pre'
+
+function Highlighted({ src }: { src: string }) {
+  return (
+    <>
+      {highlight(src).map((token, index) =>
+        TOKEN_CLASS[token.kind] ? (
+          <span key={index} className={TOKEN_CLASS[token.kind]}>
+            {token.text}
+          </span>
+        ) : (
+          token.text
+        ),
+      )}
+    </>
+  )
+}
+
+/** Put text on the clipboard and say so. */
+async function copy(text: string, done = 'Copied') {
+  try {
+    if (!navigator.clipboard?.writeText) throw new Error('No clipboard')
+    await navigator.clipboard.writeText(text)
+    toast(done)
+  } catch {
+    toast.error('Couldn’t copy. Select the text and copy it instead.')
+  }
+}
+
+function HowItsWired() {
+  const id = useId()
+  const [current, setCurrent] = useState<CodeSampleId>('config')
+  const refs = useRef<Array<HTMLButtonElement | null>>([])
+  const index = Math.max(
+    0,
+    CODE_SAMPLES.findIndex((sample) => sample.id === current),
+  )
+  const sample = CODE_SAMPLES[index]!
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const last = CODE_SAMPLES.length - 1
+    let next: number
+    if (event.key === 'ArrowRight') next = index === last ? 0 : index + 1
+    else if (event.key === 'ArrowLeft') next = index === 0 ? last : index - 1
+    else if (event.key === 'Home') next = 0
+    else if (event.key === 'End') next = last
+    else return
+    event.preventDefault()
+    setCurrent(CODE_SAMPLES[next]!.id)
+    refs.current[next]?.focus()
+  }
+
+  return (
+    <section aria-labelledby={`${id}-title`} className={`${CARD} overflow-hidden`}>
+      <CardHead id={`${id}-title`} title="How it’s wired">
+        <div
+          role="tablist"
+          aria-label="Code sample"
+          onKeyDown={onKeyDown}
+          className="rounded-8 border-bdr bg-bg ml-auto flex gap-0.5 border p-0.5"
+        >
+          {CODE_SAMPLES.map((item, i) => {
+            const on = item.id === current
+            return (
+              <button
+                key={item.id}
+                ref={(el) => {
+                  refs.current[i] = el
+                }}
+                id={`${id}-tab-${item.id}`}
+                type="button"
+                role="tab"
+                aria-selected={on}
+                aria-controls={`${id}-panel`}
+                tabIndex={on ? 0 : -1}
+                onClick={() => setCurrent(item.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'
+                }`}
+              >
+                {item.label}
+              </button>
+            )
+          })}
+        </div>
+      </CardHead>
+      <pre
+        id={`${id}-panel`}
+        role="tabpanel"
+        aria-labelledby={`${id}-tab-${sample.id}`}
+        // Scrolls, so it takes focus for keyboard scrolling.
+        tabIndex={0}
+        className={`${CODE_BLOCK} max-h-[520px]`}
+      >
+        <button
+          type="button"
+          onClick={() => void copy(sample.src)}
+          aria-label={`Copy ${sample.file}`}
+          className="rounded-6 border-code-btn-bdr bg-code-btn-bg text-code-btn-txt absolute top-2.5 right-2.5 cursor-pointer border px-2 py-[3px] font-mono text-[11px] leading-[1.65] font-medium"
+        >
+          Copy
+        </button>
+        <span className="text-code-file mb-2 block text-[11px]">{sample.file}</span>
+        <Highlighted src={sample.src} />
+      </pre>
+    </section>
+  )
+}
+
+function SchemaCard({ sync, now }: { sync: ChromeSyncStatus | null; now: number }) {
+  const id = useId()
+  const synced = sync?.status === 'synced' && sync.source
+  const source = sync?.source ?? null
+  const regions = [...(sync?.regions ?? []), 'announcement'].join(' · ')
+  const rows: Array<[string, string, boolean]> = [
+    [
+      'Source',
+      source ? `${source.repo || 'unknown repo'}@${source.branch || 'unknown'}` : '—',
+      true,
+    ],
+    [
+      'Last read',
+      source
+        ? `${shortCommit(source.commit) || 'unknown'} · ${timeAgo(source.readAt, now)}`
+        : 'never',
+      true,
+    ],
+    ['Regions', regions, false],
+    ['Fields', String(sync?.fieldCount ?? 0), false],
+  ]
+  return (
+    <section aria-labelledby={`${id}-title`} className={CARD}>
+      <CardHead id={`${id}-title`} title="Schema">
+        {synced ? (
+          <span className="rounded-pill bg-suc-l text-suc inline-flex items-center gap-[5px] px-2 py-px text-[11px] leading-[normal] font-bold">
+            ● In sync
+          </span>
+        ) : (
+          <span className="rounded-pill bg-warn-l text-warn inline-flex items-center gap-[5px] px-2 py-px text-[11px] leading-[normal] font-bold">
+            ● Not read yet
+          </span>
+        )}
+      </CardHead>
+      <dl className="m-0 flex flex-col">
+        {rows.map(([label, value, mono]) => (
+          <div
+            key={label}
+            className="border-bdr text-sm2 text-sub flex items-center gap-2.5 border-t px-4 py-[9px] leading-[normal] first:border-t-0"
+          >
+            <dt>{label}</dt>
+            <dd
+              className={`text-txt m-0 ml-auto min-w-0 truncate text-right font-semibold ${
+                mono ? 'font-mono text-[11.5px]' : ''
+              }`}
+            >
+              {value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <div className="text-hint text-faint px-4 pb-3 leading-[1.45]">
+        {synced ? null : (
+          <>
+            Add <KeyChip>prenta push chrome</KeyChip> to your deploy to send the header and
+            footer.{' '}
+          </>
+        )}
+        Read on every deploy. Removed fields keep their values for 30 days; renamed fields need{' '}
+        <KeyChip>renamedFrom</KeyChip>.
+      </div>
+    </section>
+  )
+}
+
+export interface ChromeSettingsForm {
+  revalidateUrl: string
+  previewUrl: string
+}
+
+function OnSaveCard({
+  form,
+  onChange,
+  canEdit,
+  secret,
+  problem,
+}: {
+  form: ChromeSettingsForm
+  onChange: (form: ChromeSettingsForm) => void
+  /** Only admins see the revalidate URL and can change these. */
+  canEdit: boolean
+  /** Shown once, after a save creates the revalidate webhook. */
+  secret: string | null
+  problem: string | null
+}) {
+  const id = useId()
+  return (
+    <section aria-labelledby={`${id}-title`} className={CARD}>
+      <CardHead id={`${id}-title`} title="On save" />
+      <div className="flex flex-col gap-3.5 px-4 py-3.5">
+        <div>
+          <FieldLabel htmlFor={`${id}-revalidate`}>Revalidate URL</FieldLabel>
+          <input
+            id={`${id}-revalidate`}
+            className={`${INPUT} ${MONO}`}
+            value={form.revalidateUrl}
+            placeholder={canEdit ? 'https://' : 'Only admins can see this'}
+            disabled={!canEdit}
+            spellCheck={false}
+            onChange={(event) => onChange({ ...form, revalidateUrl: event.target.value })}
+          />
+          <Help>
+            POSTs <KeyChip>chrome.updated</KeyChip> with the changed region. Also fires when a
+            scheduled announcement starts or ends.
+          </Help>
+          {secret ? (
+            <div
+              role="status"
+              className="rounded-9 border-bdr bg-bg text-hint text-sub mt-2 flex flex-wrap items-center gap-2 border px-3 py-2 leading-[1.45]"
+            >
+              <span className="min-w-0 flex-1">
+                Signing secret <KeyChip>{secret}</KeyChip>. Copy it now; it won’t be shown again.
+              </span>
+              <button
+                type="button"
+                onClick={() => void copy(secret, 'Secret copied')}
+                className="rounded-8 border-bdr bg-card text-meta text-txt hover:border-acc-m hover:text-acc inline-flex h-7 cursor-pointer items-center border px-[9px] font-[550]"
+              >
+                Copy
+              </button>
+            </div>
+          ) : null}
+        </div>
+        <div>
+          <FieldLabel htmlFor={`${id}-preview`}>Preview URL</FieldLabel>
+          <input
+            id={`${id}-preview`}
+            className={`${INPUT} ${MONO}`}
+            value={form.previewUrl}
+            placeholder={canEdit ? 'https://' : undefined}
+            disabled={!canEdit}
+            spellCheck={false}
+            onChange={(event) => onChange({ ...form, previewUrl: event.target.value })}
+          />
+          <Help>
+            Renders your real components with draft values. Leave blank to use the built-in mock.
+          </Help>
+        </div>
+        {problem ? (
+          <Help tone="error">
+            <span role="alert">{problem}</span>
+          </Help>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+function LocalDevCard() {
+  const id = useId()
+  return (
+    <section aria-labelledby={`${id}-title`} className={`${CARD} overflow-hidden`}>
+      <CardHead id={`${id}-title`} title="Local dev" />
+      <pre tabIndex={0} aria-label="Local dev commands" className={CODE_BLOCK}>
+        <Highlighted src={LOCAL_DEV_SAMPLE} />
+      </pre>
+    </section>
+  )
+}
+
+export interface DeveloperTabProps {
+  sync: ChromeSyncStatus | null
+  settings: ChromeSettingsForm
+  onSettingsChange: (form: ChromeSettingsForm) => void
+  canEditSettings: boolean
+  secret: string | null
+  settingsProblem: string | null
+  now: number
+}
+
+/** The Developer tab: the code samples, the live schema status, the On save settings and local dev. */
+export function DeveloperTab({
+  sync,
+  settings,
+  onSettingsChange,
+  canEditSettings,
+  secret,
+  settingsProblem,
+  now,
+}: DeveloperTabProps) {
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,340px)] items-start gap-[18px] [@media(width<=1100px)]:grid-cols-[minmax(0,1fr)]">
+      <HowItsWired />
+      <div className="flex min-w-0 flex-col gap-3.5">
+        <SchemaCard sync={sync} now={now} />
+        <OnSaveCard
+          form={settings}
+          onChange={onSettingsChange}
+          canEdit={canEditSettings}
+          secret={secret}
+          problem={settingsProblem}
+        />
+        <LocalDevCard />
+      </div>
+    </div>
+  )
+}