@prenta/admin 2.7.0 → 2.8.0

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

@@ -0,0 +1,358 @@
+'use client'
+
+import { Plus, X } from 'lucide-react'
+import { useId, type ReactNode } from 'react'
+import type { FieldDef } from '@prenta/core'
+
+import { Toggle } from '../../components/ui/Toggle.js'
+import type { ChromeMenuOption } from '../../lib/chrome-service.js'
+import {
+  SOCIAL_PLATFORMS,
+  fieldHelp,
+  fieldLabel,
+  humanizeKey,
+  isKnownField,
+  isToggled,
+  menuListSlots,
+} from './chrome-form.js'
+import { Help, INPUT, KeyChip, MONO, RadioPills, TEXTAREA } from './controls.js'
+
+type Rec = Record<string, unknown>
+
+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 : ''
+}
+
+export interface ChromeFieldProps {
+  /** The region, for unique radio names. */
+  region: string
+  fieldKey: string
+  def: FieldDef
+  /** The stored-format value (brand fields have none). */
+  value: unknown
+  onChange: (value: unknown) => void
+  menus: ChromeMenuOption[]
+  siteTitle: string
+  disabled: boolean
+  problem?: string
+  /** Opens Settings for a brand field's "Change". */
+  onOpenBrand: () => void
+  brandHref: string
+}
+
+/** A menu picker. A saved slug the menus list doesn't have stays selectable. */
+function MenuSelect({
+  value,
+  onChange,
+  menus,
+  label,
+  none,
+  disabled,
+  describedBy,
+}: {
+  value: string
+  onChange: (slug: string) => void
+  menus: ChromeMenuOption[]
+  label: string
+  none?: boolean
+  disabled: boolean
+  describedBy?: string
+}) {
+  const missing = value && !menus.some((menu) => menu.slug === value)
+  return (
+    <select
+      className={INPUT}
+      aria-label={label}
+      aria-describedby={describedBy}
+      value={value}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    >
+      {none || !value ? <option value="">{none ? 'None' : 'Pick a menu'}</option> : null}
+      {missing ? <option value={value}>{`${value} (not found)`}</option> : null}
+      {menus.map((menu) => (
+        <option key={menu.slug} value={menu.slug}>
+          {menu.name}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+/**
+ * One field of a region, built from its definition (`.hf-f`): the head row
+ * with the label, help, key chip and (for optional and boolean fields) a
+ * switch, then the control for its type.
+ */
+export function ChromeField({
+  region,
+  fieldKey,
+  def,
+  value,
+  onChange,
+  menus,
+  siteTitle,
+  disabled,
+  problem,
+  onOpenBrand,
+  brandHref,
+}: ChromeFieldProps) {
+  const id = useId()
+  const label = fieldLabel(fieldKey, def)
+  const help = fieldHelp(def)
+  const helpId = help ? `${id}-help` : undefined
+  const problemId = problem ? `${id}-problem` : undefined
+  const describedBy = [helpId, problemId].filter(Boolean).join(' ') || undefined
+  const toggled = isToggled(def)
+  const on = toggled ? rec(value).on === true : true
+  const known = isKnownField(def)
+
+  const head = (
+    <div className="text-sm2 text-txt flex items-center gap-2 leading-[normal] font-semibold">
+      <span className="min-w-0 flex-1">
+        {label}
+        {help ? (
+          <small id={helpId} className="text-hint text-faint mt-px block font-normal">
+            {help}
+          </small>
+        ) : null}
+      </span>
+      <KeyChip>{fieldKey}</KeyChip>
+      {toggled || def.type === 'boolean' ? (
+        <Toggle
+          aria-label={label}
+          checked={def.type === 'boolean' ? value === true : on}
+          disabled={disabled}
+          onCheckedChange={(next) =>
+            onChange(def.type === 'boolean' ? next : { ...rec(value), on: next })
+          }
+        />
+      ) : null}
+    </div>
+  )
+
+  let body: ReactNode = null
+  if (!known) {
+    body = (
+      <Help>
+        {`This field's type (${String((def as { type: unknown }).type)}) needs a newer admin. Its saved value is kept.`}
+      </Help>
+    )
+  } else if (def.type === 'brand') {
+    body = (
+      <div className="rounded-9 border-bdr text-sm2 text-sub flex items-center gap-2.5 border border-dashed px-[11px] py-[9px] leading-[normal]">
+        <span className="text-txt text-[14px] font-extrabold tracking-[-0.3px]">{siteTitle}</span>
+        <span>From brand settings</span>
+        <a
+          href={brandHref}
+          onClick={(event) => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+            event.preventDefault()
+            onOpenBrand()
+          }}
+          className="text-acc ml-auto font-semibold whitespace-nowrap no-underline"
+        >
+          Change
+        </a>
+      </div>
+    )
+  } else if (def.type === 'menu') {
+    if (def.list) {
+      const list = Array.isArray(value) ? (value as unknown[]) : []
+      const slots = menuListSlots(def, list.length)
+      body = (
+        <div className="flex flex-col gap-1.5">
+          {Array.from({ length: slots }, (_, index) => (
+            <MenuSelect
+              key={index}
+              none
+              label={`${label} ${index + 1}`}
+              value={text(list[index])}
+              menus={menus}
+              disabled={disabled}
+              describedBy={describedBy}
+              onChange={(slug) => {
+                const next = Array.from({ length: Math.max(list.length, index + 1) }, (_, i) =>
+                  text(list[i]),
+                )
+                next[index] = slug
+                onChange(next)
+              }}
+            />
+          ))}
+        </div>
+      )
+    } else if (toggled) {
+      body = on ? (
+        <MenuSelect
+          label={label}
+          value={text(rec(value).value)}
+          menus={menus}
+          disabled={disabled}
+          describedBy={describedBy}
+          onChange={(slug) => onChange({ ...rec(value), value: slug })}
+        />
+      ) : null
+    } else {
+      body = (
+        <MenuSelect
+          label={label}
+          value={text(value)}
+          menus={menus}
+          disabled={disabled}
+          describedBy={describedBy}
+          onChange={onChange}
+        />
+      )
+    }
+  } else if (def.type === 'link') {
+    const link = rec(value)
+    body = on ? (
+      <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+        <input
+          className={INPUT}
+          aria-label={def.optional ? 'Button text' : `${label} text`}
+          aria-describedby={describedBy}
+          value={text(link.label)}
+          disabled={disabled}
+          onChange={(event) => onChange({ ...link, label: event.target.value })}
+        />
+        <input
+          className={`${INPUT} ${MONO}`}
+          aria-label={def.optional ? 'Links to' : `${label} URL`}
+          aria-describedby={describedBy}
+          value={text(link.url)}
+          disabled={disabled}
+          spellCheck={false}
+          onChange={(event) => onChange({ ...link, url: event.target.value })}
+        />
+      </div>
+    ) : null
+  } else if (def.type === 'text') {
+    const current = toggled ? text(rec(value).value) : text(value)
+    const input = (
+      <input
+        className={INPUT}
+        type={def.format === 'tel' ? 'tel' : def.format === 'email' ? 'email' : 'text'}
+        aria-label={label}
+        aria-describedby={describedBy}
+        aria-invalid={problem ? true : undefined}
+        value={current}
+        disabled={disabled}
+        onChange={(event) =>
+          onChange(toggled ? { ...rec(value), value: event.target.value } : event.target.value)
+        }
+      />
+    )
+    body = on ? input : null
+  } else if (def.type === 'textarea') {
+    body = (
+      <textarea
+        className={TEXTAREA}
+        aria-label={label}
+        aria-describedby={describedBy}
+        aria-invalid={problem ? true : undefined}
+        value={text(value)}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    )
+  } else if (def.type === 'select') {
+    body = (
+      <RadioPills
+        name={`hf-${region}-${fieldKey}`}
+        label={label}
+        options={def.options.map((option) => ({ id: option, label: humanizeKey(option) }))}
+        value={text(value)}
+        disabled={disabled}
+        onChange={onChange}
+      />
+    )
+  } else if (def.type === 'social') {
+    const rows = (Array.isArray(value) ? value : []).map(rec)
+    const update = (index: number, patch: Rec) =>
+      onChange(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)))
+    body = (
+      <div className="flex flex-col gap-1.5">
+        {rows.map((row, index) => {
+          const platform = text(row.platform)
+          const platforms = SOCIAL_PLATFORMS.includes(platform)
+            ? SOCIAL_PLATFORMS
+            : [platform, ...SOCIAL_PLATFORMS]
+          return (
+            <div
+              key={index}
+              className="grid grid-cols-[120px_minmax(0,1fr)_28px] items-center gap-1.5 [@media(width<=560px)]:grid-cols-[96px_minmax(0,1fr)_28px]"
+            >
+              <select
+                className={INPUT}
+                aria-label="Platform"
+                value={platform}
+                disabled={disabled}
+                onChange={(event) => update(index, { platform: event.target.value })}
+              >
+                {platforms.map((option) => (
+                  <option key={option} value={option}>
+                    {option || 'Pick one'}
+                  </option>
+                ))}
+              </select>
+              <input
+                className={`${INPUT} ${MONO}`}
+                aria-label={`${platform || 'Link'} URL`}
+                value={text(row.url)}
+                disabled={disabled}
+                spellCheck={false}
+                onChange={(event) => update(index, { url: event.target.value })}
+              />
+              <button
+                type="button"
+                aria-label={`Remove ${platform || 'link'}`}
+                disabled={disabled}
+                onClick={() => onChange(rows.filter((_, i) => i !== index))}
+                className="rounded-6 text-faint hover:bg-err-l hover:text-err flex h-7 w-7 cursor-pointer items-center justify-center border-0 bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <X size={14} strokeWidth={1.8} aria-hidden />
+              </button>
+            </div>
+          )
+        })}
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() =>
+            onChange([
+              ...rows,
+              {
+                platform:
+                  SOCIAL_PLATFORMS.find((option) => !rows.some((row) => row.platform === option)) ??
+                  SOCIAL_PLATFORMS[0],
+                url: 'https://',
+              },
+            ])
+          }
+          className="rounded-8 border-bdr bg-card text-meta text-txt hover:border-acc-m hover:bg-acc-l hover:text-acc inline-flex h-7 cursor-pointer items-center gap-[5px] self-start border px-[9px] leading-[normal] font-[550] whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-45"
+        >
+          <Plus size={12} strokeWidth={1.8} aria-hidden />
+          Add link
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5" data-field={fieldKey}>
+      {head}
+      {body}
+      {problem ? (
+        <Help id={problemId} tone="error">
+          {problem}
+        </Help>
+      ) : null}
+    </div>
+  )
+}