@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/TypographyPanel.tsx

@@ -0,0 +1,308 @@
+/**
+ * Menu and footer typography, edited next to the thing it restyles.
+ *
+ * Each slot is a separate panel with its own draft and its own save, so the
+ * menu and the footer never share a choice. The panel starts on "the site's
+ * own font": an upgraded site renders exactly what it rendered before, and
+ * nothing here selects a family until an editor picks one.
+ *
+ * The picker is backed by the static catalog in `site/google-fonts`, so no
+ * Google API key is needed in the browser and no catalog is fetched on render.
+ * Any family Google serves can still be typed in by hand.
+ */
+
+import { useEffect, useId, useMemo, useState } from "react";
+import { RotateCcw, Save } from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  DEFAULT_FONT_WEIGHTS,
+  resolveFontChoice,
+  sanitizeFontFamily,
+  THEME_FONT_CHOICE,
+  TYPOGRAPHY_SLOTS,
+  type FontChoice,
+  type ThemeFontToken,
+  type TypographySlot,
+} from "../config/typography";
+import {
+  GOOGLE_FONT_CATALOG,
+  searchGoogleFonts,
+  supportedFontWeights,
+} from "../site/google-fonts";
+import { fontStyle, SiteFontLinks } from "../site/typography";
+
+/** Weights offered as toggles. Anything else can still be stored by a host. */
+const WEIGHT_OPTIONS = [300, 400, 500, 600, 700] as const;
+
+const FALLBACK_LABELS: Record<ThemeFontToken, string> = {
+  sans: "Sans (--font-sans)",
+  serif: "Serif (--font-serif)",
+};
+
+const SAMPLE = "The quick brown fox jumps over the lazy dog";
+
+const inputClass =
+  "w-full border border-ink/15 bg-white px-3 py-2 text-sm text-ink focus:border-sea focus:outline-none";
+const labelClass = "block text-xs uppercase tracking-wider text-ink/60 mb-1";
+
+function sameChoice(a: FontChoice, b: FontChoice): boolean {
+  return (
+    (a.source ?? "theme") === (b.source ?? "theme") &&
+    (a.family ?? "") === (b.family ?? "") &&
+    (a.fallback ?? "") === (b.fallback ?? "") &&
+    (a.weights ?? []).join(",") === (b.weights ?? []).join(",")
+  );
+}
+
+export type TypographyPanelProps = {
+  /** Which part of the site this panel restyles. */
+  slot: TypographySlot;
+  /** The choice currently in effect, or undefined for the theme font. */
+  value: FontChoice | undefined;
+  /** Persist this slot's choice. The caller merges it with the other slot. */
+  onSave: (next: FontChoice) => Promise<unknown> | void;
+  /** Locked by another editor, or otherwise not editable right now. */
+  disabled?: boolean;
+};
+
+/**
+ * One slot's font: the theme font (the default) or a Google family, with a
+ * live preview of what was chosen. Saving affects this slot only.
+ */
+export function TypographyPanel({ slot, value, onSave, disabled }: TypographyPanelProps) {
+  const id = useId();
+  const meta = TYPOGRAPHY_SLOTS[slot];
+  const saved = useMemo<FontChoice>(() => value ?? { ...THEME_FONT_CHOICE }, [value]);
+  const [draft, setDraft] = useState<FontChoice>(saved);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    setDraft(saved);
+  }, [saved]);
+
+  const isGoogle = draft.source === "google";
+  const family = draft.family ?? "";
+  const cleanFamily = sanitizeFontFamily(family);
+  const fallback = draft.fallback ?? meta.fallback;
+  const weights = draft.weights?.length ? draft.weights : [...DEFAULT_FONT_WEIGHTS];
+  // Some families ship one weight only. Offering the others would let an editor
+  // tick a box that changes nothing, so they are shown disabled with a reason.
+  const availableWeights = supportedFontWeights(cleanFamily);
+  const suggestions = useMemo(() => searchGoogleFonts(family, 12), [family]);
+  const known = (GOOGLE_FONT_CATALOG as readonly string[]).includes(cleanFamily);
+  const dirty = !sameChoice(draft, saved);
+  const problem = isGoogle && !cleanFamily ? "Choose a font family, or keep the theme font." : null;
+
+  // Preview only what will actually be applied, through the same resolver the
+  // public site uses — so what is previewed cannot drift from what renders.
+  const preview = resolveFontChoice(
+    isGoogle && cleanFamily ? { ...draft, family: cleanFamily, fallback } : { source: "theme" },
+    slot,
+  );
+
+  const patch = (next: Partial<FontChoice>) => setDraft({ ...draft, ...next });
+
+  const hasWeight = (weight: number) => !availableWeights || availableWeights.includes(weight);
+
+  const toggleWeight = (weight: number) => {
+    if (!hasWeight(weight)) return;
+    const next = weights.includes(weight)
+      ? weights.filter((w) => w !== weight)
+      : [...weights, weight].sort((a, b) => a - b);
+    // At least one weight has to be loaded for the family to render at all.
+    patch({ weights: next.length ? next : [400] });
+  };
+
+  const save = async (choice: FontChoice) => {
+    setBusy(true);
+    try {
+      await onSave(choice);
+      toast.success(`${meta.label} font saved`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save the font");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <fieldset className="border border-ink/10 bg-ice/20 px-4 py-4">
+      <legend className="px-1 text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+        {meta.label} font
+      </legend>
+
+      <p className="text-xs text-ink/60">
+        The {meta.label.toLowerCase()} keeps the site&rsquo;s own font until you choose otherwise.
+        This setting changes the {meta.label.toLowerCase()} only — body text and the rest of the
+        site are untouched.
+      </p>
+
+      <div className="mt-3 flex flex-wrap gap-4">
+        <label className="flex items-center gap-2 text-sm text-ink/80">
+          <input
+            type="radio"
+            name={`${id}-source`}
+            checked={!isGoogle}
+            disabled={disabled}
+            onChange={() => setDraft({ source: "theme" })}
+            className="size-4 accent-sea"
+          />
+          Site theme font (no change)
+        </label>
+        <label className="flex items-center gap-2 text-sm text-ink/80">
+          <input
+            type="radio"
+            name={`${id}-source`}
+            checked={isGoogle}
+            disabled={disabled}
+            onChange={() => patch({ source: "google" })}
+            className="size-4 accent-sea"
+          />
+          Google font
+        </label>
+      </div>
+
+      {isGoogle ? (
+        <div className="mt-4 space-y-4">
+          <div className="grid gap-3 sm:grid-cols-[2fr_1fr]">
+            <label className="block">
+              <span className={labelClass}>Font family</span>
+              <input
+                id={`${id}-family`}
+                list={`${id}-catalog`}
+                value={family}
+                disabled={disabled}
+                autoComplete="off"
+                placeholder="Start typing, e.g. Lora"
+                onChange={(e) => patch({ family: e.target.value })}
+                onBlur={() => patch({ family: cleanFamily })}
+                aria-invalid={problem ? true : undefined}
+                aria-describedby={`${id}-family-hint`}
+                className={inputClass}
+              />
+              <datalist id={`${id}-catalog`}>
+                {suggestions.map((option) => (
+                  <option key={option} value={option} />
+                ))}
+              </datalist>
+            </label>
+            <label className="block">
+              <span className={labelClass}>Fallback</span>
+              <select
+                value={fallback}
+                disabled={disabled}
+                onChange={(e) => patch({ fallback: e.target.value as ThemeFontToken })}
+                className={inputClass}
+              >
+                {(Object.keys(FALLBACK_LABELS) as ThemeFontToken[]).map((token) => (
+                  <option key={token} value={token}>
+                    {FALLBACK_LABELS[token]}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <p id={`${id}-family-hint`} className="text-xs text-ink/55">
+            {problem ? (
+              <span className="text-red-600">{problem}</span>
+            ) : cleanFamily && !known ? (
+              <>
+                &ldquo;{cleanFamily}&rdquo; is not in the suggestion list. It is still requested from
+                Google, so check the spelling against fonts.google.com.
+              </>
+            ) : (
+              <>
+                The list is a shortcut, not a limit — any family Google serves can be typed in. The
+                fallback is used while the font loads and if it ever fails to.
+              </>
+            )}
+          </p>
+
+          <div>
+            <span className={labelClass}>Weights to load</span>
+            <div className="flex flex-wrap gap-3">
+              {WEIGHT_OPTIONS.map((weight) => (
+                <label
+                  key={weight}
+                  title={hasWeight(weight) ? undefined : `${cleanFamily} has no ${weight} weight.`}
+                  className={[
+                    "flex items-center gap-1.5 text-sm",
+                    hasWeight(weight) ? "text-ink/75" : "text-ink/35",
+                  ].join(" ")}
+                >
+                  <input
+                    type="checkbox"
+                    checked={hasWeight(weight) && weights.includes(weight)}
+                    disabled={disabled || !hasWeight(weight)}
+                    onChange={() => toggleWeight(weight)}
+                    className="size-4 accent-sea"
+                  />
+                  {weight}
+                </label>
+              ))}
+            </div>
+            <p className="mt-1 text-xs text-ink/50">
+              Only the weights ticked here are downloaded by visitors.
+              {availableWeights ? (
+                <>
+                  {" "}
+                  {cleanFamily} is published in {availableWeights.join(" and ")} only; the rest are
+                  greyed out.
+                </>
+              ) : null}
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Loaded for the preview only when a family is actually chosen. React 19
+          hoists and de-duplicates the stylesheet link by href. */}
+      <SiteFontLinks
+        requests={preview.googleFamily ? [{ family: preview.googleFamily, weights }] : []}
+      />
+      <div className="mt-4 border border-ink/10 bg-white px-4 py-3">
+        <span className="block text-[0.65rem] uppercase tracking-[0.2em] text-ink/45">Preview</span>
+        <p className="mt-1 text-lg text-ink" style={fontStyle(preview)}>
+          {SAMPLE}
+        </p>
+        <p className="mt-1 text-xs text-ink/50">
+          {preview.fontFamily
+            ? `${cleanFamily} — loaded from Google Fonts`
+            : "The site's own theme font — nothing extra is loaded"}
+        </p>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-3">
+        <button
+          type="button"
+          onClick={() =>
+            save(
+              isGoogle && cleanFamily
+                ? { source: "google", family: cleanFamily, fallback, weights }
+                : { source: "theme" },
+            )
+          }
+          disabled={disabled || busy || !dirty || Boolean(problem)}
+          className="inline-flex items-center gap-2 bg-ink px-4 py-2 text-xs uppercase tracking-wider text-paper hover:bg-ink/85 disabled:opacity-50"
+        >
+          <Save className="size-4" />
+          {busy ? "Saving…" : `Save ${meta.label.toLowerCase()} font`}
+        </button>
+        {saved.source === "google" ? (
+          <button
+            type="button"
+            onClick={() => save({ source: "theme" })}
+            disabled={disabled || busy}
+            className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-xs uppercase tracking-wider text-ink/70 hover:border-ink disabled:opacity-50"
+          >
+            <RotateCcw className="size-3.5" />
+            Back to the theme font
+          </button>
+        ) : null}
+        {dirty ? <span className="text-xs text-sea">unsaved</span> : null}
+      </div>
+    </fieldset>
+  );
+}

package/src/backoffice/forms/GoogleSheetsHelp.tsx

@@ -0,0 +1,220 @@
+/**
+ * Shared Google Sheets admin help and connection test.
+ *
+ * One component for both the per-form panel and the shared form settings, so
+ * the instructions cannot drift apart. Nothing here ever receives a credential:
+ * the server returns only the service account's email address (which is what
+ * the editor has to share the spreadsheet with) and a classified result.
+ */
+
+import { useState } from "react";
+import { Check, Copy, Loader2, PlugZap } from "lucide-react";
+import { toast } from "sonner";
+
+/** Mirrors `SheetsErrorCode` in `server/google-sheets-core`. */
+export type SheetsTestOutcome = {
+  ok: boolean;
+  code?: string;
+  error?: string | null;
+  serviceAccountEmail?: string | null;
+  spreadsheetTitle?: string | null;
+  worksheetTitle?: string | null;
+  worksheets?: string[];
+  canWrite?: boolean | null;
+};
+
+export type TestSheetFn = (input: {
+  data: { formKey?: string; spreadsheetId?: string; tab?: string };
+}) => Promise<SheetsTestOutcome>;
+
+/** What an editor should actually do about each failure. */
+const NEXT_STEP: Record<string, string> = {
+  "credentials-missing":
+    "A developer sets the service account variables on the server; nothing can be fixed from here.",
+  "credentials-invalid":
+    "The stored service account key is not accepted by Google. A developer needs to re-copy it from the JSON key file.",
+  "invalid-spreadsheet-id":
+    "Open the spreadsheet and copy the long ID from the URL, between /d/ and /edit.",
+  "spreadsheet-not-found": "Check the Spreadsheet ID — no spreadsheet with that ID exists.",
+  "permission-denied": "Share the spreadsheet with the address below and give it Editor access.",
+  "worksheet-not-found": "Check the tab name at the bottom of the spreadsheet.",
+  "write-unconfirmed":
+    "Share the spreadsheet with the address below as an Editor, then test again. If it is already shared, a developer can enable the Google Drive API for this project so the check can answer.",
+  "api-unavailable": "Nothing is wrong with the settings. Try again in a moment.",
+};
+
+function CopyButton({ value, label }: { value: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(value);
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 2000);
+        } catch {
+          toast.error("Copy failed — select the address and copy it manually.");
+        }
+      }}
+      className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:border-sea hover:text-ink"
+    >
+      {copied ? <Check className="size-3 text-sea" /> : <Copy className="size-3" />}
+      {copied ? "Copied" : label}
+    </button>
+  );
+}
+
+export type GoogleSheetsHelpProps = {
+  /** Runs the server-side check. Omitted when the host has not wired it up. */
+  testSheet?: TestSheetFn;
+  /** Form this panel belongs to; omitted on the shared-defaults screen. */
+  formKey?: string;
+  /** Currently entered values, so the test covers unsaved edits. */
+  spreadsheetId: string;
+  tab: string;
+};
+
+/**
+ * Instructions plus a "Test connection" button that names exactly what is
+ * wrong: missing credentials, unknown spreadsheet, missing share, missing tab,
+ * or Google being unavailable.
+ */
+export function GoogleSheetsHelp({
+  testSheet,
+  formKey,
+  spreadsheetId,
+  tab,
+}: GoogleSheetsHelpProps) {
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<SheetsTestOutcome | null>(null);
+
+  const onTest = async () => {
+    if (!testSheet) return;
+    setBusy(true);
+    setResult(null);
+    try {
+      const res = await testSheet({
+        data: {
+          ...(formKey ? { formKey } : {}),
+          spreadsheetId: spreadsheetId.trim(),
+          tab: tab.trim(),
+        },
+      });
+      setResult(res);
+      if (res.ok) toast.success("Google Sheets connection works");
+      else toast.error(res.error ?? "Connection test failed");
+    } catch (e) {
+      const error = e instanceof Error ? e.message : "Connection test failed";
+      setResult({ ok: false, error });
+      toast.error(error);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const account = result?.serviceAccountEmail ?? null;
+
+  return (
+    <div className="space-y-3">
+      {testSheet ? (
+        <button
+          type="button"
+          onClick={onTest}
+          disabled={busy}
+          className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+        >
+          {busy ? <Loader2 className="size-4 animate-spin" /> : <PlugZap className="size-4" />}
+          {busy ? "Testing…" : "Test connection"}
+        </button>
+      ) : null}
+
+      {result ? (
+        /*
+         * Three outcomes, three appearances. "The sheet is there but we could
+         * not confirm write access" is not a success with a footnote — it is
+         * the state where the next submission may be the one that fails, so it
+         * gets its own colour and its own headline rather than a caveat under
+         * a green "Connection works."
+         */
+        <div
+          role="status"
+          aria-live="polite"
+          className={[
+            "border px-3 py-2 text-xs",
+            result.ok
+              ? "border-sea/40 bg-ice/40 text-ink"
+              : result.code === "write-unconfirmed"
+                ? "border-brass/50 bg-brass/10 text-ink"
+                : "border-red-500/40 bg-red-50 text-ink",
+          ].join(" ")}
+        >
+          <p className="font-medium">
+            {result.ok
+              ? "Connection works."
+              : result.code === "write-unconfirmed"
+                ? "Write access unconfirmed."
+                : "Connection failed."}{" "}
+            {result.ok
+              ? `Writing to “${result.spreadsheetTitle}” · tab “${result.worksheetTitle}”.`
+              : result.error}
+          </p>
+          {!result.ok && result.code && NEXT_STEP[result.code] ? (
+            <p className="mt-1 text-ink/70">{NEXT_STEP[result.code]}</p>
+          ) : null}
+          {result.code === "write-unconfirmed" ? (
+            <p className="mt-1 text-ink/70">
+              The spreadsheet and tab are correct. If the account only has Viewer access, the first
+              submission will fail — the submission itself is still stored either way.
+            </p>
+          ) : null}
+          {!result.ok && result.worksheets?.length ? (
+            <p className="mt-1 text-ink/70">Tabs in this spreadsheet: {result.worksheets.join(", ")}.</p>
+          ) : null}
+        </div>
+      ) : null}
+
+      <details className="border border-ink/10 bg-ice/30 px-3 py-2 text-xs text-ink/70">
+        <summary className="cursor-pointer text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+          How this connection works
+        </summary>
+        <div className="mt-2 space-y-2">
+          <p>
+            <strong className="text-ink">The spreadsheet does not have to be public.</strong> This
+            site signs in to Google as its own service account, so you share the sheet with that
+            account exactly like you would with a colleague. Nobody else gains access, and no key is
+            ever sent to a browser.
+          </p>
+          {account ? (
+            <p className="flex flex-wrap items-center gap-2">
+              <span>Share the spreadsheet with</span>
+              <code className="border border-ink/15 bg-white px-1.5 py-0.5 text-[0.7rem]">
+                {account}
+              </code>
+              <CopyButton value={account} label="Copy address" />
+              <span>and give it Editor access.</span>
+            </p>
+          ) : (
+            <p>
+              Run the connection test to see which address to share the spreadsheet with. If the
+              server has no service account configured yet, the test says so.
+            </p>
+          )}
+          <p>
+            <strong className="text-ink">Spreadsheet ID</strong> is the long code in the sheet&rsquo;s
+            web address, between <code>/d/</code> and <code>/edit</code>. You can paste the whole
+            address here — the ID is picked out of it.
+          </p>
+          <p>
+            <strong className="text-ink">Worksheet / tab name</strong> is the tab label at the bottom
+            of the spreadsheet, for example <code>Sheet1</code>. It must match exactly.
+          </p>
+          <p>
+            The test only reads the spreadsheet&rsquo;s name and tabs, so it never leaves an empty
+            row behind.
+          </p>
+        </div>
+      </details>
+    </div>
+  );
+}