ConusAI vendor v0.1.0-dev.20261027+9b1131fb

2026-10-27 18:05:17 +00:00
commit 3102273ec7
538 changed files with 80203 additions and 0 deletions
@@ -0,0 +1,226 @@
+"use client"
+
+// The organization's brand settings: a name, two colours and two logos, with a preview of both themes
+// that updates as a colour is typed. Saving is two kinds of call -- `branding.brand.set` for the text
+// fields and `branding.logo.set` for each file chosen -- both administrators' acts, both audited by
+// the kernel. A member who is not an administrator sees the same page, read-only.
+//
+// A save is therefore up to five calls, and a failure in the middle leaves the earlier ones applied:
+// the calls are one transaction each, never one transaction together. An atomic
+// `branding.brand.update` (fields, clears and uploads in one procedure) is the known improvement and
+// needs a contract addition; until then a failed save is retried as a whole, which is safe because
+// every call is idempotent for the same input.
+
+import { isHexColor } from "@conusai-kit/brand"
+import { type FormEvent, type ReactElement, useId, useState } from "react"
+import type { BrandView, LogoVariant } from "../contract/index.js"
+import { logoUrl, tenantLogo } from "../contract/logo.js"
+import { BrandPreview, type PreviewLabels } from "./brand-preview.js"
+import { useTransport } from "./transport.js"
+
+export interface BrandFormLabels {
+  readonly displayName: string
+  readonly primary: string
+  readonly accent: string
+  readonly colourHint: string
+  readonly logoLight: string
+  readonly logoDark: string
+  readonly logoHint: string
+  readonly currentLogo: string
+  /** The heading of the list that says which logo each theme shows. */
+  readonly logoShows: string
+  readonly logoOwn: string
+  /** Contains `{other}`. */
+  readonly logoOther: string
+  readonly logoApp: string
+  /** Contains `{theme}`. */
+  readonly clearLogo: string
+  readonly themeLight: string
+  readonly themeDark: string
+  readonly save: string
+  readonly saved: string
+  readonly readOnly: string
+  /** The app's `app.failed` message, with `{detail}` still in it. */
+  readonly failed: string
+  readonly preview: PreviewLabels
+}
+
+const emptyToNull = (value: string): string | null => (value.trim().length === 0 ? null : value.trim())
+
+function base64Of(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(reader.error ?? new Error("the file could not be read"))
+    reader.onload = () => {
+      const url = String(reader.result)
+      resolve(url.slice(url.indexOf(",") + 1))
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export function BrandForm({
+  org,
+  brand,
+  canEdit,
+  defaultPrimary,
+  labels,
+}: {
+  org: string
+  brand: BrandView
+  canEdit: boolean
+  defaultPrimary: string
+  labels: BrandFormLabels
+}): ReactElement {
+  const { call, describe } = useTransport()
+  const id = useId()
+  const [primary, setPrimary] = useState(brand.primary ?? "")
+  const [accent, setAccent] = useState(brand.accent ?? "")
+  const [state, setState] = useState<{ kind: "idle" | "busy" | "saved" } | { kind: "failed"; detail: string }>({
+    kind: "idle",
+  })
+  const [cleared, setCleared] = useState<readonly LogoVariant[]>([])
+
+  // The logos as they will be once saved: a cleared one is gone, so the fallback it leaves is what the list says.
+  const shown = {
+    logoLight: cleared.includes("light") ? null : brand.logoLight,
+    logoDark: cleared.includes("dark") ? null : brand.logoDark,
+  }
+  const valid = (value: string): boolean => value.trim() === "" || isHexColor(value.trim())
+  const previewPrimary = isHexColor(primary.trim()) ? primary.trim() : brand.primary
+  const previewAccent = isHexColor(accent.trim()) ? accent.trim() : brand.accent
+
+  const save = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault()
+    const form = new FormData(event.currentTarget)
+    setState({ kind: "busy" })
+    try {
+      await call("branding.brand.set", {
+        org,
+        displayName: emptyToNull(String(form.get("displayName") ?? "")),
+        primary: emptyToNull(primary),
+        accent: emptyToNull(accent),
+      })
+      for (const variant of cleared) await call("branding.logo.clear", { org, variant })
+      for (const variant of ["light", "dark"] as const) {
+        const file = form.get(`logo-${variant}`)
+        if (file instanceof File && file.size > 0) {
+          await call("branding.logo.set", { org, variant, contentType: file.type, body: await base64Of(file) })
+        }
+      }
+      setState({ kind: "saved" })
+      window.location.reload()
+    } catch (error) {
+      setState({ kind: "failed", detail: describe(error) })
+    }
+  }
+
+  const colourField = (name: string, label: string, value: string, set: (value: string) => void) => (
+    <div className="kit-field">
+      <label htmlFor={`${id}-${name}`}>{label}</label>
+      <input
+        id={`${id}-${name}`}
+        name={name}
+        value={value}
+        onChange={(event) => set(event.target.value)}
+        disabled={!canEdit}
+        maxLength={7}
+        spellCheck={false}
+        autoComplete="off"
+        aria-invalid={!valid(value)}
+        aria-describedby={`${id}-colour-hint`}
+      />
+    </div>
+  )
+
+  return (
+    <form onSubmit={save} aria-busy={state.kind === "busy"}>
+      {canEdit ? null : <p role="note">{labels.readOnly}</p>}
+      <div className="kit-field">
+        <label htmlFor={`${id}-name`}>{labels.displayName}</label>
+        <input
+          id={`${id}-name`}
+          name="displayName"
+          defaultValue={brand.displayName ?? ""}
+          disabled={!canEdit}
+          maxLength={60}
+        />
+      </div>
+      {colourField("primary", labels.primary, primary, setPrimary)}
+      {colourField("accent", labels.accent, accent, setAccent)}
+      <p id={`${id}-colour-hint`}>{labels.colourHint}</p>
+      {(["light", "dark"] as const).map((variant) => {
+        const current = variant === "light" ? brand.logoLight : brand.logoDark
+        const theme = variant === "light" ? labels.themeLight : labels.themeDark
+        return (
+          <div className="kit-field" key={variant}>
+            <label htmlFor={`${id}-logo-${variant}`}>{variant === "light" ? labels.logoLight : labels.logoDark}</label>
+            <input
+              id={`${id}-logo-${variant}`}
+              name={`logo-${variant}`}
+              type="file"
+              accept="image/png,image/webp,image/svg+xml"
+              disabled={!canEdit}
+              aria-describedby={`${id}-logo-hint`}
+            />
+            {current && !cleared.includes(variant) ? (
+              <>
+                <img
+                  src={logoUrl(current, "1x")}
+                  srcSet={`${logoUrl(current, "1x")} 1x, ${logoUrl(current, "2x")} 2x`}
+                  alt={labels.currentLogo}
+                  height={32}
+                />
+                {canEdit ? (
+                  <button type="button" onClick={() => setCleared([...cleared, variant])}>
+                    {labels.clearLogo.replace("{theme}", theme)}
+                  </button>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        )
+      })}
+      <p id={`${id}-logo-hint`}>{labels.logoHint}</p>
+      <section aria-labelledby={`${id}-logo-shows`}>
+        <h2 id={`${id}-logo-shows`}>{labels.logoShows}</h2>
+        <ul>
+          {(["light", "dark"] as const).map((theme) => {
+            const choice = tenantLogo(shown, theme)
+            const state =
+              choice === null
+                ? labels.logoApp
+                : choice.variant === theme
+                  ? labels.logoOwn
+                  : labels.logoOther.replace(
+                      "{other}",
+                      choice.variant === "light" ? labels.themeLight : labels.themeDark,
+                    )
+            return (
+              <li key={theme}>
+                {theme === "light" ? labels.preview.light : labels.preview.dark}: {state}
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+      <BrandPreview
+        primary={previewPrimary}
+        accent={previewAccent}
+        defaultPrimary={defaultPrimary}
+        labels={labels.preview}
+      />
+      {canEdit ? (
+        <button type="submit" disabled={state.kind === "busy" || !valid(primary) || !valid(accent)}>
+          {labels.save}
+        </button>
+      ) : null}
+      <p role="status">{state.kind === "saved" ? labels.saved : ""}</p>
+      {state.kind === "failed" ? (
+        <p className="app-error" role="alert">
+          {labels.failed.replace("{detail}", state.detail)}
+        </p>
+      ) : null}
+    </form>
+  )
+}