@eifi1/ui-kit 0.21.0 → 0.23.0

package/src/index.ts

@@ -111,8 +111,27 @@ export * from "./components/disclosure";
 export * from "./components/dialog-frame";
 // Named, not `*`: danger-confirm also holds the password field and pending hook that
 // ReauthDialog shares with it, which are kit-internal.
-export { DangerConfirm, DEFAULT_DANGER_CONFIRM_LABELS, typedMatches } from "./components/danger-confirm";
-export type { DangerConfirmLabels, DangerConfirmProps, TypedMatch } from "./components/danger-confirm";
+export {
+  DangerConfirm,
+  DEFAULT_DANGER_CONFIRM_LABELS,
+  typedMatches,
+  // 0.22.0: the typed-confirmation field on its own (keksdose K7) and the current-password
+  // field kastlan wants for sign-in and re-authentication (kastlan 1).
+  TypedConfirmField,
+  CurrentPasswordInput,
+} from "./components/danger-confirm";
+export type {
+  DangerConfirmLabels,
+  DangerConfirmProps,
+  TypedMatch,
+  DangerConsequence,
+  TypedConfirmFieldProps,
+  TypedConfirmFieldLabels,
+  CurrentPasswordInputProps,
+  CurrentPasswordInputLabels,
+  // 0.23.0: onConfirm's second argument — the guards' values (keksdose G4b).
+  DangerConfirmValues,
+} from "./components/danger-confirm";
 // 0.18: re-authentication before a sensitive action (Kurvenschmiede 4).
 export { ReauthDialog, DEFAULT_REAUTH_DIALOG_LABELS } from "./components/reauth-dialog";
 export type { ReauthDialogProps, ReauthDialogLabels } from "./components/reauth-dialog";
@@ -259,8 +278,9 @@ export * from "./components/data-table-pagination";
 export { FilterPopover } from "./components/data-table-filter-popover";
 // data-table re-exports SortState internally; export the rest explicitly to
 // avoid a duplicate SortState star-export (it comes from data-table-sort).
-export { DataTable } from "./components/data-table";
+export { DataTable, DEFAULT_DATA_TABLE_SORT_LABELS } from "./components/data-table";
 export type {
+  DataTableSortLabels,
   DataTableColumn,
   DataTableCellProps,
   DataTableHeadProps,
@@ -406,3 +426,51 @@ export type {
 // 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.22.0: the inputs round (kastlan's, keksdose's and Kurvenschmiede's audits) ──
+export * from "./components/checkbox-group";
+export * from "./components/one-time-code-input";
+export * from "./components/language-select";
+export * from "./components/tile-radio";
+export * from "./components/inline-edit-field";
+export * from "./components/sign-chip";
+export * from "./components/country-select";
+export { COUNTRY_CODES, countryName } from "./lib/countries";
+export * from "./components/iban-input";
+export {
+  IBAN_LENGTHS,
+  compactIban,
+  formatIban,
+  ibanCheckDigits,
+  ibanProblem,
+  isValidIban,
+  isQrIban,
+} from "./lib/iban";
+export type { IbanKind, IbanProblem } from "./lib/iban";
+export { formatIsin, isinCheckDigit, isValidIsin } from "./lib/isin";
+export * from "./components/phone-input";
+export {
+  PHONE_DIAL_CODES,
+  PHONE_COUNTRIES,
+  parsePhone,
+  formatNationalPhone,
+  formatPhone,
+  isE164,
+} from "./lib/phone";
+export type { PhoneCountryCode, PhoneCountry, ParsedPhone } from "./lib/phone";
+
+// ── 0.23.0: the apps' 0.22 adoption round (kastlan, keksdose, Kurvenschmiede) ──
+// The label strip over custom content (keksdose G8).
+export * from "./components/field-strip";
+// Paste or drop a table, give each column a role (Kurvenschmiede's columns input,
+// keksdose's import map step). The lexer itself stays in `@eifi1/ui-kit/table-text`.
+export * from "./components/column-mapper";
+export {
+  assignColumnRole,
+  guessMapping,
+  missingRoles,
+  readMappedTable,
+  readTextFile,
+  roleOfColumn,
+} from "./lib/column-mapping";
+export type { ColumnMapperResult, ColumnMapping, ColumnRole } from "./lib/column-mapping";

package/src/lib/column-mapping.ts

@@ -0,0 +1,234 @@
+/**
+ * Which column of a table plays which part — the headless half of {@link ColumnMapper}.
+ *
+ * Two apps built this by hand, the same way. Kurvenschmiede's columns input
+ * (`features/control/columns-input.tsx`) reads a recorder's export and asks which
+ * column is the time, the setpoint and the actual; keksdose's bank-file import
+ * (`import-map-step.tsx`, `use-file-import.ts`) shows a bank's CSV and asks which
+ * column is the booking date, the amount, the payee. Both then have the same four
+ * rules, and keksdose wrote them down after getting each one wrong once:
+ *
+ * * **A role sits on one column at most, and a column carries one role.** Picking a
+ *   role for a column MOVES it there from wherever it was ({@link assignColumnRole});
+ *   the column it left falls back to "ignore" in the same step. There is no error
+ *   state, because there is nothing wrong to report.
+ * * **What is still missing is named**, not left to a disabled button
+ *   ({@link missingRoles}). A required role can be one of a group: a bank export that
+ *   splits debit and credit has no amount column and needs none, so `required` may
+ *   name a group, satisfied by any one of its members (keksdose's "money").
+ * * **A mapping is indexes into ONE table.** When the column count changes, the
+ *   indexes mean nothing any more and are guessed afresh; when it does not (the
+ *   header line toggled), they still point where they did — keksdose's `keepRoles`.
+ * * **The rows a role cannot read are reported by line**, not dropped in silence
+ *   ({@link readMappedTable}): a footer under a recording, a total under a statement.
+ *
+ * Pure functions over plain data, so a two-step wizard can hold the mapping in its own
+ * state between steps, and a table the server sniffed (keksdose's) can be mapped with
+ * the same rules as one parsed here.
+ */
+import { tableNumber } from "./table-text";
+import type { TableLine, TextTable } from "./table-text";
+
+/** One part a column can play, defined by the caller. */
+export interface ColumnRole<R extends string = string> {
+  /** The key the mapping is stored under. */
+  value: R;
+  /** What the role select shows — translated by the caller. */
+  label: string;
+  /**
+   * `true`: the table cannot be used until a column plays this role. A string names a
+   * GROUP: the table needs any one of the roles that share it — keksdose's amount,
+   * debit and credit, any of which carries the money.
+   */
+  required?: boolean | string;
+  /**
+   * Every cell this role reads must be a number in the table's decimal convention
+   * ({@link tableNumber}). A row where one is not — a footer, a units line, a total
+   * with a grouping mark — is moved to `unread` with its line number instead of being
+   * handed over. Kurvenschmiede's time, setpoint and actual. The cells stay strings:
+   * converting is the caller's, with `tableNumber(cell, result.decimalComma)`.
+   */
+  numeric?: boolean;
+}
+
+/** Role → column index. A role that is absent or `null` sits on no column — so a
+ *  mapping with nullable fields (keksdose's `CsvMapping`) is one as it stands. */
+export type ColumnMapping<R extends string = string> = Partial<Record<R, number | null>>;
+
+/** What the table is, read through a mapping. */
+export interface ColumnMapperResult<R extends string = string> extends TextTable {
+  mapping: ColumnMapping<R>;
+  /** What the table still needs before it can be used: one entry per gap, each the
+   *  roles any of which would fill it (one role, or a required group). */
+  missing: R[][];
+  /** Every required role placed, and at least one row read. */
+  complete: boolean;
+}
+
+const placedAt = <R extends string>(mapping: ColumnMapping<R>, role: R, width?: number): number | null => {
+  const column = mapping[role];
+  if (typeof column !== "number") return null;
+  return width === undefined || column < width ? column : null;
+};
+
+/** The role on this column, or `null` for an ignored one. */
+export function roleOfColumn<R extends string>(
+  roles: readonly ColumnRole<R>[],
+  mapping: ColumnMapping<R>,
+  column: number,
+): R | null {
+  return roles.find((role) => mapping[role.value] === column)?.value ?? null;
+}
+
+/**
+ * Put `role` on `column` — or, with `null`, take the column's role off it.
+ *
+ * Whatever this column played before stops, and the role moves here from any other
+ * column, in one new mapping (keksdose's `assignColumn`: "both halves are patches to
+ * the same object"). Other fields of the mapping are kept as they are.
+ */
+export function assignColumnRole<R extends string, M extends ColumnMapping<R>>(
+  roles: readonly ColumnRole<R>[],
+  mapping: M,
+  column: number,
+  role: R | null,
+): M {
+  const next = { ...mapping } as Record<string, unknown>;
+  for (const { value } of roles) {
+    if (mapping[value] === column) next[value] = null;
+  }
+  if (role !== null) next[role] = column;
+  return next as M;
+}
+
+/**
+ * The gaps: each required role with no column, and each required group none of whose
+ * roles has one. In the order of `roles`. A column index past `width` is no column.
+ */
+export function missingRoles<R extends string>(
+  roles: readonly ColumnRole<R>[],
+  mapping: ColumnMapping<R>,
+  width?: number,
+): R[][] {
+  const gaps: R[][] = [];
+  const groups = new Set<string>();
+  for (const role of roles) {
+    if (role.required === true) {
+      if (placedAt(mapping, role.value, width) === null) gaps.push([role.value]);
+    } else if (typeof role.required === "string" && !groups.has(role.required)) {
+      groups.add(role.required);
+      const members = roles.filter((other) => other.required === role.required);
+      if (members.every((member) => placedAt(mapping, member.value, width) === null)) {
+        gaps.push(members.map((member) => member.value));
+      }
+    }
+  }
+  return gaps;
+}
+
+const normalised = (text: string) => text.trim().toLowerCase();
+
+/**
+ * A first mapping for a table nobody has mapped yet.
+ *
+ * A column whose header IS a role's label or key gets that role. The required roles
+ * left over then take the free columns in order — Kurvenschmiede's "time, setpoint,
+ * actual are the first three columns", which is how a recorder writes them. Optional
+ * roles are not guessed by position: in a bank
+ * export of twelve columns, "the fourth role is the fourth column" is a wrong answer
+ * presented as a suggestion, and an "ignore" is the honest one.
+ */
+export function guessMapping<R extends string>(
+  roles: readonly ColumnRole<R>[],
+  header: readonly string[] | null,
+  width: number,
+): ColumnMapping<R> {
+  const mapping: ColumnMapping<R> = {};
+  const taken = new Set<number>();
+  if (header) {
+    for (const role of roles) {
+      const names = [normalised(role.label), normalised(role.value)];
+      const column = header.findIndex((name, index) => !taken.has(index) && names.includes(normalised(name)));
+      if (column >= 0) {
+        mapping[role.value] = column;
+        taken.add(column);
+      }
+    }
+  }
+  const free = Array.from({ length: width }, (_, index) => index).filter((index) => !taken.has(index));
+  for (const role of roles) {
+    if (role.required !== true || typeof mapping[role.value] === "number") continue;
+    const column = free.shift();
+    if (column === undefined) break;
+    mapping[role.value] = column;
+  }
+  return mapping;
+}
+
+/**
+ * The table read through the mapping: the rows every `numeric` role can read, the
+ * others moved to `unread` (in line order, with the parse's own), what is missing,
+ * and whether the table can be used. Column indexes past the table's width count as
+ * unplaced.
+ */
+export function readMappedTable<R extends string>(
+  table: TextTable,
+  roles: readonly ColumnRole<R>[],
+  mapping: ColumnMapping<R>,
+): ColumnMapperResult<R> {
+  const numeric = roles
+    .filter((role) => role.numeric)
+    .map((role) => placedAt(mapping, role.value, table.width))
+    .filter((column): column is number => column !== null);
+  const rows: string[][] = [];
+  const lines: TableLine[] = [];
+  const refused: TableLine[] = [];
+  table.rows.forEach((row, index) => {
+    if (numeric.every((column) => Number.isFinite(tableNumber(row[column] ?? "", table.decimalComma)))) {
+      rows.push(row);
+      lines.push(table.lines[index]);
+    } else {
+      refused.push(table.lines[index]);
+    }
+  });
+  const unread = refused.length ? [...table.unread, ...refused].sort((a, b) => a.line - b.line) : table.unread;
+  const missing = missingRoles(roles, mapping, table.width);
+  return {
+    ...table,
+    rows,
+    lines,
+    unread,
+    mapping,
+    missing,
+    complete: missing.length === 0 && rows.length > 0,
+  };
+}
+
+/**
+ * A dropped or chosen file's text — UTF-8 when it is UTF-8, else Windows-1252.
+ *
+ * A German bank or bench export is very often written in Windows-1252, and reading it
+ * as UTF-8 turns every "ä" in a column name into "�" — no error, just a header nobody
+ * recognises. So the bytes are tried as strict UTF-8 first and read as Windows-1252
+ * when that fails (keksdose's server sniffs the encoding for the same reason; a file
+ * read in the browser had nothing doing it). Falls back to `FileReader` where a `File`
+ * has no `arrayBuffer` (Kurvenschmiede's `readText`).
+ */
+export async function readTextFile(file: Blob): Promise<string> {
+  const bytes = await bytesOf(file);
+  try {
+    return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+  } catch {
+    return new TextDecoder("windows-1252").decode(bytes);
+  }
+}
+
+function bytesOf(file: Blob): Promise<ArrayBuffer> {
+  if (typeof file.arrayBuffer === "function") return file.arrayBuffer();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as ArrayBuffer);
+    reader.onerror = () => reject(reader.error ?? new Error("read failed"));
+    reader.readAsArrayBuffer(file);
+  });
+}

package/src/lib/countries.ts

@@ -0,0 +1,91 @@
+/**
+ * Countries as ISO 3166-1 alpha-2 codes, named by the runtime — for {@link CountrySelect}
+ * and for an app that shows the code it stored ("CH") as a name somewhere else (a
+ * table cell, an address line).
+ *
+ * The kit ships CODES, not names. Every runtime the kit supports has
+ * `Intl.DisplayNames({ type: "region" })`, which names all of these in every locale
+ * the browser knows — so a table of 249 names per language would be a large file
+ * that is out of date the day a country is renamed (Türkiye, Czechia, Eswatini) and
+ * still covers fewer languages than the browser does. What is left to ship is the
+ * list of which codes ARE countries, and that is one string.
+ */
+
+/**
+ * Every officially assigned ISO 3166-1 alpha-2 code — the 249 countries, territories
+ * and areas of the standard, upper-case, in code order.
+ *
+ * User-assigned codes are deliberately not in it: `XK` (Kosovo) is a widespread
+ * convention, not ISO, and whether to offer it is the app's decision. An app that
+ * wants it passes its own list to `CountrySelect`'s `countries` — the runtime names
+ * `XK` as well.
+ */
+export const COUNTRY_CODES: readonly string[] = Object.freeze(
+  (
+    "AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ " +
+    "BR BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM " +
+    "DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS " +
+    "GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN " +
+    "KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ " +
+    "MR MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM " +
+    "PN PR PS PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV " +
+    "SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI " +
+    "VN VU WF WS YE YT ZA ZM ZW"
+  ).split(" "),
+);
+
+/** Two ASCII letters — the shape of an alpha-2 code, whatever the case. */
+const ALPHA_2 = /^[A-Za-z]{2}$/;
+
+/** `code` upper-cased when it has the shape of an alpha-2 code, else `undefined`. Does
+ *  not check that ISO assigned it — see {@link COUNTRY_CODES} for why `XK` must pass. */
+export function normalizeCountryCode(code: string | null | undefined): string | undefined {
+  return code && ALPHA_2.test(code) ? code.toUpperCase() : undefined;
+}
+
+// One `DisplayNames` per locale, built on first use. `null` records a locale the
+// runtime refused (a malformed tag) or a runtime without the API, so neither is
+// retried for every row of a 249-row list.
+const namers = new Map<string, Intl.DisplayNames | null>();
+
+function namer(locale: string): Intl.DisplayNames | null {
+  let n = namers.get(locale);
+  if (n === undefined) {
+    try {
+      n = new Intl.DisplayNames([locale], { type: "region", fallback: "code" });
+    } catch {
+      n = null;
+    }
+    namers.set(locale, n);
+  }
+  return n;
+}
+
+/**
+ * The name of the country `code` stands for, in `locale` — `countryName("CH", "de-CH")`
+ * is "Schweiz". Falls back to the upper-cased code itself when the runtime has no name
+ * for it, rejects the locale, or has no `Intl.DisplayNames`: a code is still the right
+ * answer, where an empty cell would not be.
+ *
+ * `locale` defaults to English rather than to the runtime's language, the rule the
+ * kit's currency names follow (`currencyName`): an app that never set a locale reads
+ * the kit's English everywhere else, and a country list in the browser's language
+ * beside English labels — or in the test runner's — is two languages on one form.
+ *
+ * The code is upper-cased first. `DisplayNames` is case-sensitive about it in some
+ * runtimes (Node answers "ch" with "ch"), and the codes reach this from forms,
+ * URLs and databases in either case.
+ */
+export function countryName(code: string, locale: string = "en"): string {
+  const upper = code.toUpperCase();
+  const n = namer(locale);
+  if (n) {
+    try {
+      const name = n.of(upper);
+      if (name) return name;
+    } catch {
+      // Not a well-formed region subtag ("C1", "") — the code is all there is.
+    }
+  }
+  return upper;
+}

package/src/lib/decimal-marks.ts

@@ -0,0 +1,99 @@
+/**
+ * The locale's decimal mark and the reading of typed grouping marks, shared by the
+ * kit's numeric text fields: {@link AmountInput}, {@link NumberInput} and, through
+ * NumberInput, {@link NumberField} and {@link MoneyField}.
+ *
+ * Package-private — not re-exported from the barrel. It lives here rather than in
+ * `calc.ts` because that module is re-exported wholesale (`export * from
+ * "./lib/calc"`), and these are the fields' plumbing, not API.
+ *
+ * WHY ONE MODULE. AmountInput learned the locale's mark (kastlan 40) and the grouping
+ * parse (keksdose G1); NumberInput learned neither, so the same "1.234,56" a German
+ * user typed into a money field read as 1234.56 and, typed into the budget-goal field
+ * next to it, as 1.23456 (keksdose K5). Two private copies of the same rule are how
+ * that happened, so the rule now has one home.
+ */
+import { sanitizeLive } from "./calc";
+
+/**
+ * The locale's decimal mark, as far as a field can type it: "," or "." (kastlan 40).
+ * A mark outside those two (Arabic's "٫") is not one {@link sanitizeLive} lets
+ * through, so those locales keep the dot rather than get a field that eats the key it
+ * shows. `undefined` is the runtime's own locale, which is what `Intl` reads it as.
+ */
+export function decimalMark(locale: string | undefined): "," | "." {
+  try {
+    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
+    return part?.value === "," ? "," : ".";
+  } catch {
+    // An invalid tag throws a RangeError; a typo in a locale must not take the form down.
+    return ".";
+  }
+}
+
+/**
+ * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every
+ * "," into ".", so on its own it read the German "1.234,56" as 1.23456 — and a money
+ * field's settle then made that 1.23, final. This decides per operand, from the
+ * typist's own text, before that fold:
+ *
+ * - both marks present: the one that is not the locale's is grouping, and goes;
+ * - in a "," locale, only "." present: grouping when it cannot be a decimal as a
+ *   German reader writes it — twice ("1.234.567"), or in thousands shape ("1.234",
+ *   "12.500") — otherwise a decimal ("1.5", typed by a dot-decimal habit);
+ * - in a "." locale, only "," present: grouping when it appears twice ("1,234,567");
+ *   once it stays a decimal, because Swiss and German typists write "1,5" in a
+ *   de-CH form (kastlan 40) and a unit price "1,789" is a decimal.
+ *
+ * Only a keystroke's text comes through here. A calculator result is dot-decimal
+ * already, and "1.234" from `100/81.03…` is never a thousand.
+ */
+export function normalizeTypedMarks(raw: string, mark: "," | "."): string {
+  const other = mark === "," ? "." : ",";
+  return raw.replace(/[0-9.,]+/g, (operand) => {
+    const hasMark = operand.includes(mark);
+    const count = operand.split(other).length - 1;
+    if (count === 0) return operand;
+    const grouping = hasMark
+      ? true
+      : count > 1 || (mark === "," && /^\d{1,3}(\.\d{3})+$/.test(operand));
+    return grouping ? operand.split(other).join("") : operand;
+  });
+}
+
+/** What a keystroke's raw text reports: grouping read off, then the field's live
+ *  sanitising (comma → dot, stray characters out, one decimal point per operand). */
+export function readTyped(raw: string, mark: "," | "."): string {
+  return sanitizeLive(normalizeTypedMarks(raw, mark));
+}
+
+// Spacing a typist uses to group digits — a space, the no-break and narrow no-break
+// spaces `Intl` itself writes for fr-CH ("1 234,5" with U+202F), and the Swiss
+// apostrophes ("1'234.50"). The live sanitising drops them, so they never reach the
+// value; the draft may still show them.
+const GROUP_SPACING = /[\s'’\u00a0\u202f]/g;
+
+/**
+ * Whether the field may keep SHOWING `raw` — the typist's own text — while it holds
+ * `canonical` (dot-decimal, as `onChange` reported it).
+ *
+ * Showing the typed text rather than re-spelling the value is what keeps the caret
+ * where the typist put it, and what keeps a grouping "." from being turned into a ","
+ * under their fingers — after which no rule could tell the two apart (keksdose G1).
+ * But only text that says the same as the value, and says it with nothing the field
+ * would have DROPPED: a letter, or a second decimal point in one operand ("1.2.3"),
+ * must not stay on screen while the value says "1.23" (Keksdose live #201 is the bug
+ * that showing it would bring back). Grouping marks and grouping spaces may stay.
+ */
+export function showsTyped(raw: string, mark: "," | ".", canonical: string): boolean {
+  const read = normalizeTypedMarks(raw, mark).replace(GROUP_SPACING, "");
+  const sanitized = sanitizeLive(read);
+  // Nothing dropped: the read text is the sanitised one, but for which mark it uses.
+  return sanitized === read.replace(/,/g, ".") && sanitized === sanitizeLive(canonical);
+}
+
+/** A dot-decimal text spelt in `mark` — display only, one character for one, so a
+ *  re-spelling never moves a caret. */
+export function localizeMark(text: string, mark: "," | "."): string {
+  return mark === "," ? text.replace(/\./g, ",") : text;
+}