@eifi1/ui-kit 0.27.1 → 0.28.0

package/src/i18n/review.ts

@@ -1,3 +1,5 @@
+import type { LegalOperator, LegalOperatorText } from "../components/legal";
+import { countryName } from "../lib/countries";
 import type { UiKitLabels } from "./kit-labels";
 
 /**
@@ -6,7 +8,7 @@ import type { UiKitLabels } from "./kit-labels";
  * keksdose reviews its own locale bundles on its /translations page — one verdict per
  * locale and key, stored with the text the reviewer saw, so a later change re-opens it.
  * The kit's words appear on the same screens but live in TypeScript, not in the app's
- * bundles, and 138 of them are functions (`(count) => "3 results"`; 0.27.0, every one
+ * bundles, and 143 of them are functions (`(count) => "3 results"`; 0.28.0, every one
  * listed in {@link KIT_LABEL_SAMPLES}), which a bundle flattener skips. This turns a
  * label tree into rows that page can join on.
  *
@@ -18,6 +20,13 @@ import type { UiKitLabels } from "./kit-labels";
  *   where the wording may depend on them — 1 and 3 — so a reviewer sees singular and
  *   plural. The key names the sample: `combobox.resultCount(1)`,
  *   `shareCard.removeConfirm(name)`, `serverWake.waking()`.
+ * - The legal sections that name the operator (0.28) take one object; its sample is a
+ *   placeholder per field and the key calls it `operator`:
+ *   `legal.sections.privacy.controller.body(operator)`. Pass the app's operator in
+ *   `options` and those rows read the real sentence — same keys — so the lawyer
+ *   reviewing the `legal` area reads what the page says:
+ *
+ *       kitLabelStrings(UI_KIT_LABELS_DE_CH, { operator: OPERATOR, locale: "de-CH" })
  *
  * Keys depend only on the samples, never on the locale, so the rows of `de-CH` and of the
  * English reference line up key by key. Pass exactly the tree the app hands
@@ -29,16 +38,20 @@ import type { UiKitLabels } from "./kit-labels";
  * A label that throws on its sample becomes a row starting with "⚠", so one broken
  * override shows up on the page instead of taking the page down.
  */
-export function kitLabelStrings(labels: UiKitLabels): Record<string, string> {
+export function kitLabelStrings(labels: UiKitLabels, options: KitLabelStringsOptions = {}): Record<string, string> {
   const out: Record<string, string> = {};
+  const operator = options.operator && operatorText(options.operator, options.locale);
   const walk = (node: unknown, path: string) => {
     if (typeof node === "string") {
       out[path] = node;
     } else if (typeof node === "function") {
       for (const args of KIT_LABEL_SAMPLES[path] ?? [[]]) {
+        // The key is the SAMPLE's (`…body(operator)`), whatever the label is called with,
+        // so rows with and without the app's operator join on the same keys.
+        const called = operator ? args.map((arg) => (arg === LEGAL_OPERATOR_SAMPLE ? operator : arg)) : args;
         out[`${path}(${args.map(sampleName).filter((a) => a !== "").join(", ")})`] = render(
           node as (...args: unknown[]) => unknown,
-          args,
+          called,
         );
       }
     } else if (node !== null && typeof node === "object") {
@@ -49,6 +62,24 @@ export function kitLabelStrings(labels: UiKitLabels): Record<string, string> {
   return out;
 }
 
+export interface KitLabelStringsOptions {
+  /**
+   * The app's operator (0.28): the legal sections that name it — the imprint's operator
+   * and contact, the controller, the privacy contact, the governing law — are rendered
+   * with the real values instead of `{{name}}`-style placeholders, so a reviewer (the
+   * lawyer, under the `legal` area) reads the sentence the page shows. The keys do not
+   * change: `legal.sections.impressum.operator.body(operator)` either way.
+   */
+  operator?: LegalOperator;
+  /** The language the operator's country is named in — the locale these rows are
+   *  for ("de-CH" → "Schweiz"). Default English. */
+  locale?: string;
+}
+
+function operatorText(operator: LegalOperator, locale = "en"): LegalOperatorText {
+  return { ...operator, country: countryName(operator.country, locale) };
+}
+
 function render(label: (...args: unknown[]) => unknown, args: readonly unknown[]): string {
   try {
     return String(label(...args));
@@ -61,12 +92,29 @@ function render(label: (...args: unknown[]) => unknown, args: readonly unknown[]
  *  itself, an empty string as `""`, a missing optional argument not at all. */
 function sampleName(arg: unknown): string {
   if (arg === undefined) return "";
+  if (arg === LEGAL_OPERATOR_SAMPLE) return "operator";
   if (typeof arg === "string") return /^\{\{(\w+)\}\}$/.exec(arg)?.[1] ?? JSON.stringify(arg);
   return String(arg);
 }
 
 const one = [[1], [3]] as const;
 
+/**
+ * The legal sections' operator (0.28) as placeholders, one per field — so a translation
+ * that drops the city or the email is caught by the same check as a dropped `{{name}}`
+ * anywhere else. Named `operator` in the key; {@link kitLabelStrings}' `operator` option
+ * swaps the app's real values in for it.
+ */
+const LEGAL_OPERATOR_SAMPLE: LegalOperatorText = Object.freeze({
+  name: "{{name}}",
+  postalCode: "{{postalCode}}",
+  city: "{{city}}",
+  region: "{{region}}",
+  country: "{{country}}",
+  email: "{{email}}",
+});
+const operatorSample = [[LEGAL_OPERATOR_SAMPLE]] as const;
+
 /**
  * The sample arguments of every function label in {@link UiKitLabels}, by dot path.
  * `src/i18n/__tests__/review.test.ts` fails when a function label has no entry here, so
@@ -240,4 +288,9 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   ],
   "columnMapper.oneOf": [["{{roles}}"]],
   "columnMapper.missing": [["{{roles}}"]],
+  "legal.sections.impressum.operator.body": operatorSample,
+  "legal.sections.impressum.contact.body": operatorSample,
+  "legal.sections.privacy.controller.body": operatorSample,
+  "legal.sections.privacy.contact.body": operatorSample,
+  "legal.sections.terms.law.body": operatorSample,
 };

package/src/index.ts

@@ -36,6 +36,8 @@ export type { UseAnnounceReturn, UseAnnounceOptions, AnnounceRegionProps } from
 export { useOverlayHistory } from "./hooks/use-overlay-history";
 export { useCloseTransition, OVERLAY_EXIT_MS } from "./hooks/use-close-transition";
 export { useRowSwipe } from "./hooks/use-row-swipe";
+// 0.28: keksdose's noindex marker, for the legal and auth pages of every app.
+export { useNoIndex } from "./hooks/use-noindex";
 export type { SwipeStage, RowSwipeOptions, RowSwipeReturn } from "./hooks/use-row-swipe";
 // Any element as a file drop target, screened like FileButton (kastlan).
 export { useFileDrop, dragHasFiles } from "./hooks/use-file-drop";
@@ -379,6 +381,7 @@ export * from "./i18n/kit-labels";
 export * from "./i18n/defaults";
 // The kit's words as `key → text` rows for an app's translation review (keksdose).
 export { kitLabelStrings } from "./i18n/review";
+export type { KitLabelStringsOptions } from "./i18n/review";
 // The seven languages, how an app resolves one, and the kit catalogue loader for it.
 export * from "./i18n/languages";
 // CLDR plural categories for an app's i18next catalogue, filled from `_other`.
@@ -396,6 +399,8 @@ export {
   reviewStatus,
   keyInArea,
   keyInAreas,
+  // 0.28: the area a key is grouped under — `kit.legal.*` in `legal` (legal round §7.5).
+  reviewAreaOf,
   translationRows,
   summariseRows,
   DEFAULT_TRANSLATION_REVIEW_FILTER,
@@ -455,8 +460,33 @@ export type {
   TranslationReviewGroupBy,
 } from "./components/translation-review";
 // The legal pages' shell (0.19, H10): Imprint, Privacy Policy, Terms in every app.
-export { LegalLayout, LegalSection, LegalLinks, DEFAULT_LEGAL_LABELS } from "./components/legal";
-export type { LegalLabels, LegalLink, LegalLinksProps, LegalSectionProps, LegalLayoutProps } from "./components/legal";
+// 0.28 (docs/legal-harmonization.md): the shared wording, the page frame, the kit's
+// sections, the public footer and the terms checkbox.
+export { LegalLayout, LegalSection, LegalLinks, LegalFooter, DEFAULT_LEGAL_LABELS } from "./components/legal";
+export type {
+  LegalLabels,
+  LegalLink,
+  LegalLinksProps,
+  LegalSectionProps,
+  LegalLayoutProps,
+  LegalFooterProps,
+  LegalOperator,
+  LegalOperatorText,
+  LegalPageKey,
+  LegalTextSectionLabels,
+  LegalOperatorSectionLabels,
+  LegalFramedSectionLabels,
+} from "./components/legal";
+export { LegalPage, LegalKitSection, LegalAcceptCheckbox, LEGAL_SKELETON } from "./components/legal-page";
+export type {
+  LegalPageProps,
+  LegalKitSectionProps,
+  LegalKitSectionKey,
+  LegalAcceptCheckboxProps,
+  LegalSkeletonEntry,
+  LegalSkeletonPage,
+  LegalSectionOwner,
+} from "./components/legal-page";
 
 // ── 0.22.0: the inputs round (kastlan's, keksdose's and Kurvenschmiede's audits) ──
 export * from "./components/checkbox-group";

package/src/lib/translation-review.ts

@@ -210,7 +210,10 @@ export function placeholderTokens(text: string): string[] {
   const found: string[] = [];
   for (const m of text.matchAll(PLACEHOLDER_RE)) {
     if (m[1]) found.push(`{{${m[1]}}}`);
-    else if (m[2]) found.push(`{${m[2]}}`);
+    // `{ref:retention}` (ui-kit 0.28's legal cross-reference) keeps its target: a
+    // translation that points at another section changed what the sentence says. Every
+    // other `{x:spec}` is a format spec, which a translation may change.
+    else if (m[2]) found.push(m[2] === "ref" ? m[0] : `{${m[2]}}`);
     else if (m[3]) found.push(`<${m[3]}>`);
     else if (m[4]) found.push(`$t(${m[4]})`);
   }
@@ -245,10 +248,46 @@ export function reviewStatus(
   return review.verdict === "APPROVED" ? "approved" : "needs_change";
 }
 
-/** Whether `key` lies in `area`: the key IS the area, or sits under it — `legal.terms`
- *  and kastlan's `legal:terms` are in `legal`, `legalese.title` is not. */
+/**
+ * Whether `key` lies in `area`: the key IS the area, or sits under it — `legal.terms`
+ * and kastlan's `legal:terms` are in `legal`, `legalese.title` is not.
+ *
+ * 0.28: the kit's own words of that area too — `kit.legal.sections.terms.law.body(…)`
+ * is in `legal`. All three apps list the kit's labels under `kit.`
+ * (`flattenStrings(kitLabelStrings(labels), "kit.")`), and since 0.28 the kit writes
+ * the shared legal sections, so a lawyer with a `["legal"]` grant who was not shown
+ * `kit.legal.*` would not see half of the Privacy Policy — and the server would refuse
+ * the verdicts (docs/legal-harmonization.md §7.5). server-kit's `in_areas` and the apps'
+ * copies of it apply the same rule.
+ */
 export function keyInArea(key: string, area: string): boolean {
-  return key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`);
+  return (
+    key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`) || key.startsWith(`kit.${area}.`)
+  );
+}
+
+/**
+ * The area of `areas` that `key` lies in ({@link keyInArea}), or `undefined` — the
+ * translation page's grouping by the same rule the filter and the server use, so
+ * `kit.legal.sections.privacy.rights.lead` is grouped under `legal` with the app's own
+ * legal texts instead of under `kit.legal`:
+ *
+ *     const namespaceOf = (key: string) => reviewAreaOf(key, ["legal"]) ?? ownNamespaceOf(key);
+ *
+ * Where two areas both hold the key (`legal` and `legal.privacy`), the longer — the more
+ * specific — wins, whatever their order. `inArea` is the app's own rule, as for
+ * {@link keyInAreas}.
+ */
+export function reviewAreaOf(
+  key: string,
+  areas: readonly string[],
+  inArea: (key: string, area: string) => boolean = keyInArea,
+): string | undefined {
+  let found: string | undefined;
+  for (const area of areas) {
+    if (inArea(key, area) && (found === undefined || area.length > found.length)) found = area;
+  }
+  return found;
 }
 
 /**