@bygghammar/cms-platform 0.53.0 → 0.54.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.54.0
+
+- `forms/FormRenderer`: the whole public managed-form runtime (validation,
+  conditional fields, honeypot, partial drafts, thank-you/redirect) now lives in
+  the package, together with `ManagedForm` which resolves a form by key.
+- `blocks/components/FormBlock`: the form section block is package-owned and is
+  registered in `SHARED_BLOCK_DEFS` as `form`, so a fresh site gets it for free.
+- `host`: new site-adapter contract (`registerSiteAdapters`,
+  `usePublicFormFns`, `useTripSource`) so a site hands its own server functions
+  and central trip source to package-owned public components.
+- `blocks/types`: added `FormProps`.
+
 ## 0.53.0
 
 - `admin/describe-log`: one place that turns action codes and JSON meta into

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [
@@ -48,6 +48,7 @@
     "./trips": "./src/trips/index.ts",
     "./trips/TripSectionEditor": "./src/trips/TripSectionEditor.tsx",
     "./navigation": "./src/navigation/index.ts",
+    "./forms/FormRenderer": "./src/forms/FormRenderer.tsx",
     "./forms/conditions": "./src/forms/conditions.ts",
     "./forms/field-sets": "./src/forms/field-sets.ts",
     "./forms/form-audit": "./src/forms/form-audit.ts",

package/src/blocks/components/FormBlock.tsx

@@ -0,0 +1,51 @@
+import { useT } from "../../i18n";
+import type { LocalizedString } from "../../i18n";
+import { ManagedForm } from "../../forms/FormRenderer";
+import type { FormProps } from "../types";
+
+const TONES: Record<string, string> = {
+  white: "bg-white text-ink",
+  paper: "bg-paper text-ink",
+  ink: "bg-ink text-paper",
+};
+
+/**
+ * Section wrapper around a managed form: optional eyebrow/title/lead plus the
+ * form itself, resolved by key from the Forms module.
+ */
+export function FormBlock({ props }: { props: FormProps }) {
+  const { t } = useT();
+  const tone = props.tone ?? "paper";
+  const dark = tone === "ink";
+  const formKey = props.formKey?.trim();
+
+  return (
+    <section id={props.anchor || undefined} className={`${TONES[tone]} py-20 md:py-28`}>
+      <div className="mx-auto w-full max-w-3xl px-6">
+        {props.eyebrow ? (
+          <div className="text-[0.7rem] uppercase tracking-[0.28em] opacity-60">
+            {t(props.eyebrow as LocalizedString)}
+          </div>
+        ) : null}
+        {props.title ? (
+          <h2 className="mt-4 font-serif text-3xl md:text-4xl whitespace-pre-line">
+            {t(props.title as LocalizedString)}
+          </h2>
+        ) : null}
+        {props.lead ? (
+          <p className="mt-4 opacity-75 whitespace-pre-line">{t(props.lead as LocalizedString)}</p>
+        ) : null}
+        <div className="mt-10">
+          {formKey ? (
+            <ManagedForm formKey={formKey} dark={dark} />
+          ) : (
+            <p className="text-sm opacity-60 whitespace-pre-line">No form selected.</p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export type { FormProps };
+export { FormRenderer, ManagedForm } from "../../forms/FormRenderer";

package/src/blocks/registry.tsx

@@ -12,6 +12,7 @@ import { ImageMarqueeBlock } from "./components/ImageMarqueeBlock";
 import { LinkTilesBlock } from "./components/LinkTilesBlock";
 import { CabinTabsBlock } from "./components/CabinTabsBlock";
 import { PriceTableBlock } from "./components/PriceTableBlock";
+import { FormBlock } from "./components/FormBlock";
 import type {
   BlockProps,
   FaqProps,
@@ -27,6 +28,7 @@ import type {
   LinkTilesProps,
   CabinTabsProps,
   PriceTableProps,
+  FormProps,
 } from "./types";
 import { BlockPropsProvider } from "./block-props-context";
 
@@ -309,6 +311,19 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
     } satisfies PriceTableProps as unknown as BlockProps,
     hasInlineContent: true,
   },
+  form: {
+    type: "form",
+    label: "Form",
+    description:
+      "Renders a managed form from Backoffice \u2192 Forms. All forms share the same settings, notifications and submissions inbox.",
+    category: "content",
+    component: ({ props }) => <FormBlock props={props as FormProps} />,
+    defaultProps: {
+      formKey: "",
+      tone: "paper",
+    } satisfies FormProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
 };
 
 /**

package/src/blocks/types.ts

@@ -423,3 +423,13 @@ export type PriceTableProps = {
 
   groups?: PriceGroup[];
 };
+
+/** Props for the shared managed-form section block. */
+export type FormProps = {
+  formKey?: string;
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ink";
+  anchor?: string;
+};

package/src/forms/FormRenderer.tsx

@@ -0,0 +1,438 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight } from "lucide-react";
+import { useT, useLocale } from "../i18n";
+import type { LocalizedString } from "../i18n";
+import { tripFieldOptions, resolveAutocomplete } from "./field-sets";
+import type { FormFieldDef, PublicForm, TripSource } from "./field-sets";
+import {
+  isFieldRequired,
+  isFieldVisible,
+  normalizeCheckbox,
+  validateAll,
+  validateField,
+} from "./conditions";
+import { renderLinkedText } from "./rich-text";
+import { useHostPublicFormFns, useHostTripSource } from "../host";
+
+const TOKEN_PREFIX = "form-draft-token:";
+
+/** Stable per-visitor, per-form token so a draft updates instead of piling up. */
+function draftToken(formKey: string): string {
+  if (typeof window === "undefined") return "";
+  const storageKey = TOKEN_PREFIX + formKey;
+  try {
+    const existing = window.localStorage.getItem(storageKey);
+    if (existing) return existing;
+    const token =
+      typeof crypto !== "undefined" && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    window.localStorage.setItem(storageKey, token);
+    return token;
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Renders a managed form from an already-resolved definition.
+ * `preview` runs every rule and validation but never contacts the server,
+ * which is what the backoffice preview uses.
+ */
+export function FormRenderer({
+  form,
+  dark = false,
+  className,
+  preview = false,
+}: {
+  form: PublicForm;
+  dark?: boolean;
+  className?: string;
+  preview?: boolean;
+}) {
+  const { t } = useT();
+  const locale = useLocale();
+  const { submitForm: send, savePartialSubmission: saveDraft } = useHostPublicFormFns();
+
+  const mountedAt = useRef(Date.now());
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [consent, setConsent] = useState(false);
+  const [hp, setHp] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    mountedAt.current = Date.now();
+  }, [form.key]);
+
+  const tripItems = useHostTripSource() as TripSource[] | undefined;
+
+  // "trip"/"course" fields are dropdowns whose choices come from the central
+  // trips source (single source of truth), resolved at render time.
+  const resolved = useMemo(() => {
+    const trips = (tripItems ?? []) as TripSource[];
+    return (form.fields ?? []).map((f) =>
+      f.type === "trip" || f.type === "course"
+        ? {
+            ...f,
+            type: "select" as const,
+            options: tripFieldOptions(trips, f.tripYear ?? f.courseYear),
+          }
+        : f,
+    );
+  }, [form, tripItems]);
+
+  const enabled = useMemo(() => resolved.filter((f) => f.enabled), [resolved]);
+  /** Fields whose show-conditions currently match. */
+  const fields = useMemo(() => enabled.filter((f) => isFieldVisible(f, values)), [enabled, values]);
+
+  // Save what the visitor typed even if they never submit (debounced).
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (preview || !form.savePartials || done || !dirty.current) return;
+    const token = draftToken(form.key);
+    if (!token) return;
+    const snapshot = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+    if (!Object.values(snapshot).some((v) => v.trim())) return;
+    const id = window.setTimeout(() => {
+      void Promise.resolve(
+        saveDraft({
+          key: form.key,
+          clientToken: token,
+          locale,
+          pagePath: window.location.pathname,
+          values: snapshot,
+        }),
+      ).catch(() => {});
+    }, 1500);
+    return () => window.clearTimeout(id);
+  }, [values, fields, form.key, form.savePartials, locale, done, preview, saveDraft]);
+
+  const setValue = (f: FormFieldDef, value: string) => {
+    dirty.current = true;
+    setValues((v) => {
+      const next = { ...v, [f.key]: value };
+      // Answers to fields that just became hidden must not be submitted.
+      for (const other of enabled) {
+        if (other.key !== f.key && !isFieldVisible(other, next)) delete next[other.key];
+      }
+      return next;
+    });
+    if (touched[f.key] || errors[f.key]) {
+      setErrors((e) => {
+        const next = { ...e };
+        const msg = validateField(f, { ...values, [f.key]: value }, locale);
+        if (msg) next[f.key] = msg;
+        else delete next[f.key];
+        return next;
+      });
+    }
+  };
+
+  const blurField = (f: FormFieldDef) => {
+    setTouched((t) => ({ ...t, [f.key]: true }));
+    const msg = validateField(f, values, locale);
+    setErrors((e) => {
+      const next = { ...e };
+      if (msg) next[f.key] = msg;
+      else delete next[f.key];
+      return next;
+    });
+  };
+
+  if (done) {
+    return (
+      <div
+        className={[
+          className ?? "",
+          dark
+            ? "bg-paper/5 backdrop-blur border border-paper/15"
+            : "border border-ink/10 bg-white",
+          "p-8 text-center",
+        ].join(" ")}
+      >
+        <p className="font-serif text-2xl whitespace-pre-line">
+          {t(form.thankyouMessage as LocalizedString)}
+        </p>
+        {preview ? (
+          <button
+            type="button"
+            onClick={() => {
+              setDone(false);
+              setValues({});
+              setConsent(false);
+              setErrors({});
+              setTouched({});
+            }}
+            className="mt-6 border border-current/20 px-4 py-2 text-[0.65rem] uppercase tracking-[0.2em]"
+          >
+            Reset preview
+          </button>
+        ) : null}
+      </div>
+    );
+  }
+
+  const inputCls = dark
+    ? "w-full bg-paper/10 border border-paper/25 px-4 pt-5 pb-2 text-paper placeholder-transparent focus:border-sea focus:bg-paper/15 focus:outline-none transition-colors"
+    : "w-full bg-white border border-ink/20 px-4 pt-5 pb-2 text-ink placeholder-transparent focus:border-sea focus:outline-none transition-colors";
+  const labelCls = dark
+    ? "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-paper/75"
+    : "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-ink/55";
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate everything that is currently visible before touching the server.
+    const found = validateAll(enabled, values, locale);
+    if (form.requireConsent && !consent) {
+      setError(
+        locale === "sv" ? "Du behöver godkänna villkoren." : "Please accept the terms to continue.",
+      );
+      if (!Object.keys(found).length) return;
+    }
+    if (Object.keys(found).length) {
+      setErrors(found);
+      setTouched(Object.fromEntries(Object.keys(found).map((k) => [k, true])));
+      const first = document.getElementById(`${form.key}-${Object.keys(found)[0]}`);
+      first?.focus();
+      first?.scrollIntoView({ behavior: "smooth", block: "center" });
+      return;
+    }
+
+    // Preview mode stops here: rules and validation ran, nothing is stored.
+    if (preview) {
+      setDone(true);
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    try {
+      // Send only the answers to fields the visitor actually saw.
+      const visible = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+      await send({
+        key: form.key,
+        locale,
+        pagePath: typeof window !== "undefined" ? window.location.pathname : undefined,
+        consent,
+        elapsedMs: Date.now() - mountedAt.current,
+        hp,
+        clientToken: form.savePartials ? draftToken(form.key) : undefined,
+        values: visible,
+      });
+      if (form.thankyouMode === "redirect" && form.thankyouRedirect) {
+        window.location.href = form.thankyouRedirect;
+        return;
+      }
+      setDone(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const renderField = (f: FormFieldDef) => {
+    const label = t(f.label as LocalizedString);
+    const help = f.help ? t(f.help as LocalizedString) : "";
+    const placeholder = f.placeholder ? t(f.placeholder as LocalizedString) : label;
+    const id = `${form.key}-${f.key}`;
+    const required = isFieldRequired(f, values);
+    const err = errors[f.key];
+    const errId = `${id}-error`;
+    const invalidCls = err ? " border-red-500" : "";
+
+    const Message = err ? (
+      <p id={errId} role="alert" className="mt-1 text-xs text-red-500 whitespace-pre-line">
+        {err}
+      </p>
+    ) : help ? (
+      <p className="mt-1 text-xs opacity-60 whitespace-pre-line">{help}</p>
+    ) : null;
+
+    if (f.type === "checkbox") {
+      return (
+        <div key={f.key} className="sm:col-span-2">
+          <label className="flex items-start gap-3 text-sm">
+            <input
+              id={id}
+              name={f.key}
+              type="checkbox"
+              autoComplete="off"
+              checked={normalizeCheckbox(values[f.key] ?? "") === "true"}
+              aria-invalid={err ? true : undefined}
+              aria-describedby={err ? errId : undefined}
+              onChange={(e) => setValue(f, e.target.checked ? "true" : "false")}
+              onBlur={() => blurField(f)}
+              className="mt-0.5 size-4 shrink-0 accent-sea"
+            />
+            <span>
+              {label}
+              {required ? " *" : ""}
+            </span>
+          </label>
+          {Message}
+        </div>
+      );
+    }
+
+    const auto = resolveAutocomplete(f);
+    const inputMode =
+      f.type === "tel"
+        ? ("tel" as const)
+        : f.type === "email"
+          ? ("email" as const)
+          : f.type === "number"
+            ? ("numeric" as const)
+            : undefined;
+
+    const common = {
+      id,
+      name: f.key,
+      autoComplete: auto,
+      placeholder,
+      maxLength: f.maxLength,
+      value: values[f.key] ?? "",
+      "aria-invalid": err ? true : undefined,
+      "aria-describedby": err ? errId : undefined,
+      onChange: (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+      ) => setValue(f, e.target.value),
+      onBlur: () => blurField(f),
+      className: inputCls + invalidCls,
+    };
+    return (
+      <div key={f.key} className={["relative", f.wide ? "sm:col-span-2" : ""].join(" ")}>
+        {f.type === "textarea" ? (
+          <textarea {...common} rows={4} />
+        ) : f.type === "select" ? (
+          <select {...common}>
+            <option value="">—</option>
+            {(f.options ?? []).map((o) => (
+              <option key={o.value} value={o.value}>
+                {t(o.label as LocalizedString)}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            {...common}
+            inputMode={inputMode}
+            type={f.type}
+            min={f.type === "date" ? f.minDate : f.min}
+            max={f.type === "date" ? f.maxDate : f.max}
+          />
+        )}
+        <label htmlFor={id} className={labelCls}>
+          {label}
+          {required ? " *" : ""}
+        </label>
+        {Message}
+      </div>
+    );
+  };
+
+  return (
+    <form
+      id={`form-${form.key}`}
+      onSubmit={onSubmit}
+      noValidate
+      className={[
+        className ?? "",
+        dark ? "bg-paper/5 backdrop-blur border border-paper/15" : "border border-ink/10 bg-white",
+        "p-6 md:p-8 space-y-5",
+      ].join(" ")}
+    >
+      <div className="grid gap-4 sm:grid-cols-2">{fields.map(renderField)}</div>
+
+      {form.honeypot ? (
+        <div className="hidden" aria-hidden="true">
+          <label>
+            Company
+            <input
+              tabIndex={-1}
+              autoComplete="off"
+              value={hp}
+              onChange={(e) => setHp(e.target.value)}
+            />
+          </label>
+        </div>
+      ) : null}
+
+      {form.requireConsent ? (
+        <label
+          className={[
+            "flex items-start gap-3 text-xs",
+            dark ? "text-paper/85" : "text-ink/70",
+          ].join(" ")}
+        >
+          <input
+            type="checkbox"
+            required
+            checked={consent}
+            onChange={(e) => setConsent(e.target.checked)}
+            className={[
+              "mt-0.5 size-4 shrink-0 accent-sea bg-transparent border",
+              dark ? "border-paper/40" : "border-ink/30",
+            ].join(" ")}
+          />
+          <span>
+            {renderLinkedText(t(form.consentText as LocalizedString), {
+              privacyUrl: form.privacyPolicyUrl,
+            })}
+          </span>
+        </label>
+      ) : null}
+
+      {error ? <p className="text-xs text-red-500 whitespace-pre-line">{error}</p> : null}
+
+      <button
+        type="submit"
+        disabled={busy}
+        className={[
+          "group inline-flex w-full items-center justify-center gap-2 px-6 py-4 text-xs uppercase tracking-[0.22em] transition-all disabled:opacity-60",
+          dark ? "bg-paper text-ink hover:bg-sea" : "bg-ink text-paper hover:bg-sea hover:text-ink",
+        ].join(" ")}
+      >
+        {t(form.submitLabel as LocalizedString)}
+        <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+      </button>
+    </form>
+  );
+}
+
+/** Fetches a published form by key and renders it. */
+export function ManagedForm({
+  formKey,
+  dark = false,
+  className,
+}: {
+  formKey: string;
+  dark?: boolean;
+  className?: string;
+}) {
+  const { getPublicForm } = useHostPublicFormFns();
+  const { data: form, isLoading } = useQuery({
+    queryKey: ["public-form", formKey],
+    queryFn: () => getPublicForm(formKey) as Promise<PublicForm | null>,
+    staleTime: 60_000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className={className}>
+        <div className="h-64 animate-pulse border border-current/15 bg-current/5" />
+      </div>
+    );
+  }
+  if (!form) return null;
+  return <FormRenderer form={form} dark={dark} className={className} />;
+}
+
+export type { PublicForm };

package/src/host/index.tsx

@@ -148,3 +148,78 @@ export function useHostMediaUpload(existing: HostMediaItem[] = []): HostMediaUpl
   if (!hook) missing("useMediaUpload");
   return hook(existing);
 }
+
+/* --------------------------- public form runtime --------------------------- */
+
+/** Answers keyed by field key, exactly as the visitor typed them. */
+export type HostFormValues = Record<string, string>;
+
+export type HostSubmitFormInput = {
+  key: string;
+  locale: string;
+  pagePath?: string;
+  consent?: boolean;
+  elapsedMs?: number;
+  hp?: string;
+  clientToken?: string;
+  values: HostFormValues;
+};
+
+export type HostSavePartialInput = {
+  key: string;
+  clientToken: string;
+  locale: string;
+  pagePath?: string;
+  values: HostFormValues;
+};
+
+/**
+ * Server functions behind the public form runtime. Each site wraps its own
+ * `createServerFn` declarations (they must live in the site bundle) and hands
+ * plain callables to the package.
+ */
+export type HostPublicFormFns = {
+  getPublicForm: (key: string) => Promise<unknown>;
+  submitForm: (input: HostSubmitFormInput) => Promise<unknown>;
+  savePartialSubmission: (input: HostSavePartialInput) => Promise<unknown>;
+};
+
+export type HostSiteAdapters = {
+  /** Hook returning the site's public form server functions. */
+  usePublicFormFns: () => HostPublicFormFns;
+  /**
+   * Hook returning the site's central trip/course source, used to fill
+   * `trip`/`course` dropdowns from a single source of truth.
+   */
+  useTripSource: () => unknown[];
+};
+
+let siteAdapters: Partial<HostSiteAdapters> = {};
+
+export function registerSiteAdapters(adapters: Partial<HostSiteAdapters>): void {
+  siteAdapters = { ...siteAdapters, ...adapters };
+}
+
+/** Register public-site adapters while constructing a value the site exports. */
+export function initializeSiteAdapters<T>(
+  adapters: Partial<HostSiteAdapters>,
+  initialize: () => T,
+): T {
+  registerSiteAdapters(adapters);
+  return initialize();
+}
+
+export function useHostPublicFormFns(): HostPublicFormFns {
+  const hook = siteAdapters.usePublicFormFns;
+  if (!hook) {
+    throw new Error(
+      '@bygghammar/cms-platform: site adapter "usePublicFormFns" is not registered. Call registerSiteAdapters() during site startup.',
+    );
+  }
+  return hook();
+}
+
+export function useHostTripSource(): unknown[] {
+  const hook = siteAdapters.useTripSource;
+  return hook ? hook() : [];
+}