@eifi1/ui-kit 0.21.0 → 0.23.0

package/src/components/account-settings.tsx

@@ -1,9 +1,16 @@
 import { useId, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
-import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui";
+import { Button, Card, Input } from "./ui";
 import { UserAvatar } from "./user-avatar";
 import { CopyButton } from "./copy-button";
 import { QrCode } from "./qr-code";
+import { OneTimeCodeInput } from "./one-time-code-input";
+import {
+  DEFAULT_PASSWORD_STRENGTH_LABELS,
+  passwordByteLength,
+  PasswordStrengthMeter,
+} from "./password-strength";
+import type { PasswordStrengthMeterProps } from "./password-strength";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import type {
@@ -95,30 +102,73 @@ export function ProfileSetting({
   );
 }
 
+/**
+ * What {@link PasswordSetting}'s `strength` takes besides `true`: the meter's own options,
+ * minus the ones the card owns — `value` (the new password), `minLength` (the card's, so
+ * the checklist's length rule and the submit's check are one number) and `maxBytes`
+ * (the card's own prop, which the submit enforces as well).
+ */
+export type PasswordSettingStrength = Pick<PasswordStrengthMeterProps, "score" | "showRequirements" | "labels">;
+
 export function PasswordSetting({
   onSubmit,
   pending,
   minLength = 8,
+  strength,
+  maxBytes,
   labels: labelsProp,
 }: {
   /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
   onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
   pending?: boolean;
+  /** The shortest new password the card submits, in characters as a person counts them
+   *  (an emoji is one). Keep it in step with the server's own minimum. Default 8. */
   minLength?: number;
+  /**
+   * Show the {@link PasswordStrengthMeter} under the new-password field (0.22.0,
+   * kastlan's input audit): the bar, the level in words and the checklist, with the
+   * length rule drawn from `minLength`. `true` for the meter as it comes; an object for
+   * its `score` (zxcvbn's, say), `showRequirements` or `labels`.
+   *
+   * Off by default, so a card that never asked for it does not grow one. The meter is
+   * advisory, as everywhere in the kit: it blocks nothing — the card's own checks do
+   * (`minLength`, the confirmation, `maxBytes`).
+   */
+  strength?: boolean | PasswordSettingStrength;
+  /**
+   * A byte ceiling on the new password — bcrypt reads at most 72 BYTES and ignores the
+   * rest, which is kastlan's case: `maxBytes={72}`. A new password over it is refused
+   * on submit with the meter's own "too long" sentence (the `passwordStrength`
+   * namespace's `tooLong`), and the meter, when shown, warns while it is typed.
+   *
+   * Unset by default, and leave it unset for a secret with no ceiling: an invented one
+   * talks people out of the long passphrase they chose.
+   */
+  maxBytes?: number;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */
   labels?: Partial<PasswordSettingLabels>;
 }) {
   const labels = useAccountSettingsLabels("password", labelsProp);
+  const strengthOptions = typeof strength === "object" ? strength : undefined;
+  // Only for `tooLong`: the sentence the meter shows is the one the refusal says.
+  const strengthLabels = useKitLabels("passwordStrength", DEFAULT_PASSWORD_STRENGTH_LABELS, strengthOptions?.labels);
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
   const [error, setError] = useState<string | null>(null);
 
   const submit = async () => {
-    if (next.length < minLength) {
+    // Code points, not UTF-16 units — the count the meter's checklist and a server's
+    // `len()` use. `next.length` counted an emoji as two, so four of them passed a
+    // minimum of eight that the meter beside the field said they missed.
+    if ([...next].length < minLength) {
       setError(labels.tooShort);
       return;
     }
+    if (maxBytes !== undefined && passwordByteLength(next) > maxBytes) {
+      setError(strengthLabels.tooLong(maxBytes));
+      return;
+    }
     if (next !== confirm) {
       setError(labels.mismatch);
       return;
@@ -134,11 +184,31 @@ export function PasswordSetting({
     }
   };
 
+  const nextField = (
+    <Input type="password" autoComplete="new-password" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />
+  );
+
   return (
     <Card className="p-4 space-y-3">
       <div className="text-sm font-medium">{labels.title}</div>
       <Input type="password" autoComplete="current-password" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />
-      <Input type="password" autoComplete="new-password" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />
+      {strength ? (
+        // One box for the field and its meter, so the card's `space-y-3` spaces the pair
+        // from its neighbours and the meter keeps its own small gap under the field.
+        <div>
+          {nextField}
+          <PasswordStrengthMeter
+            value={next}
+            minLength={minLength}
+            maxBytes={maxBytes}
+            score={strengthOptions?.score}
+            showRequirements={strengthOptions?.showRequirements}
+            labels={strengthOptions?.labels}
+          />
+        </div>
+      ) : (
+        nextField
+      )}
       <Input type="password" autoComplete="new-password" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />
       {error && <p className="text-xs text-[var(--danger)]">{error}</p>}
       <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>
@@ -204,13 +274,17 @@ export function TwoFactorSetting({
   const labels = useAccountSettingsLabels("twoFactor", labelsProp);
   const [code, setCode] = useState("");
   const [password, setPassword] = useState("");
-  // Browsers autofill one-time-code fields with the saved username; keep the
-  // field readOnly until focus to block that. It therefore has to keep the LOOK of
-  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly
-  // does not mean "you may not type here", and without the opt-out the field would
-  // sit there greyed until the moment it is focused.
-  const [otpReadonly, setOtpReadonly] = useState(true);
-  const onOtpFocus = () => setOtpReadonly(false);
+  // Both code fields are a OneTimeCodeInput (0.22.0) — the field this card wrote by hand
+  // twice — and keep what they did:
+  //  - `readOnlyUntilFocus`: browsers autofill a one-time-code field with the saved
+  //    username (the disable form has a current-password field right above it), and a
+  //    read-only field is never autofilled. The guard drops on focus, and the field
+  //    keeps the look of an editable one meanwhile (FIELD_WRITABLE_LOOK) — see the prop.
+  //  - `length={8}`: the `maxLength={8}` they had, so an authenticator issuing eight
+  //    digits still fits. What changed is that they now take digits only: "123 456"
+  //    pasted from an authenticator that groups its digits used to reach `onEnable`
+  //    with the space in it.
+  //  - one `code` state for both, as before.
   // Only for the "Status: Enabled" composition — the punctuation between a field's
   // name and its value is the language's (see `CommonLabels.fieldValue`).
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
@@ -272,16 +346,12 @@ export function TwoFactorSetting({
               </div>
             </div>
           )}
-          <Input
-            inputMode="numeric"
-            autoComplete="one-time-code"
-            readOnly={otpReadonly}
-            inputClassName={FIELD_WRITABLE_LOOK}
-            onFocus={onOtpFocus}
-            maxLength={8}
+          <OneTimeCodeInput
+            readOnlyUntilFocus
+            length={8}
             label={labels.codeLabel}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={setCode}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
               if (e.key === "Enter" && code && !busy) {
                 e.preventDefault();
@@ -299,16 +369,12 @@ export function TwoFactorSetting({
         <div className="space-y-3 border-t border-[var(--border)] pt-3">
           <div className="text-sm font-medium">{labels.disableSection}</div>
           <Input type="password" autoComplete="current-password" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />
-          <Input
-            inputMode="numeric"
-            autoComplete="one-time-code"
-            readOnly={otpReadonly}
-            inputClassName={FIELD_WRITABLE_LOOK}
-            onFocus={onOtpFocus}
-            maxLength={8}
+          <OneTimeCodeInput
+            readOnlyUntilFocus
+            length={8}
             label={labels.codeLabel}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={setCode}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
               if (e.key === "Enter" && password && code && !busy) {
                 e.preventDefault();

package/src/components/amount-input.tsx

@@ -25,6 +25,8 @@ import {
   sanitizeLive,
   splitLeadingSign,
 } from "../lib/calc";
+import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
+import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
 interface AmountInputProps {
   value: string;
@@ -36,7 +38,41 @@ interface AmountInputProps {
   disabled?: boolean;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
+  /**
+   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`
+   * (keksdose K4: "exceeds the outstanding balance" was a loose `<p>` beside the field
+   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into
+   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the
+   * field paints as well as announces. `null`, `false` and `""` are no message.
+   * {@link MoneyField} takes it too.
+   */
+  error?: ReactNode;
+  /**
+   * Show the desktop calculator trigger (default `true`). `false` for an amount in an
+   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)
+   * — where a click on the icon blurs the field and tears the editor down before the
+   * popover can open. Typing a calculation ("200+50", then Enter) still evaluates, and
+   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.
+   */
+  calculator?: boolean;
+  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is
+   *  `inputClassName`'s. */
   className?: string;
+  /**
+   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of
+   * the same name, merged the same way: after the field's own base classes, so it can
+   * restyle the figure (`text-end` for a money column whose decimal points line up,
+   * `font-medium`, a tighter `py-1` in a table cell), and before the end padding the
+   * calculator and the currency chip reserve and before the invalid border, so neither
+   * can be taken away by accident.
+   *
+   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only
+   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a
+   * descendant selector that depends on the field's inner markup, which the kit is free
+   * to change, and that a reader of the call site has to decode. {@link MoneyField}
+   * passes it through, and `RhfMoneyField` takes it too.
+   */
+  inputClassName?: string;
   id?: string;
   ariaLabel?: string;
   /**
@@ -224,51 +260,12 @@ function settleAmount(text: string, digits: number | undefined, min?: number, ma
   return Number(out) === Number(t) ? text : out;
 }
 
-/**
- * The locale's decimal mark, as far as this field can type it: "," or "." (kastlan 40).
- * The same answer `NumberField` gives, for the same reason: 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.
- */
-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 ".";
-  }
-}
+// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in
+// `lib/decimal-marks.ts`, shared with NumberInput since 0.22 (keksdose K5).
 
-/**
- * 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 the
- * 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.
- */
-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;
-  });
-}
+// The error line under a field — the type of `ui.tsx`'s (module-private) one, so an
+// AmountInput's message is indistinguishable from an Input's.
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 
 // The consuming app's ONE money palette (`--money-expense` / `--money-income`),
 // not a bespoke rose/emerald pairing: a figure being typed has to wear the same
@@ -311,20 +308,23 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, inputClassName, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const hintId = useId();
+    const errorId = useId();
     // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
     const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
-    const describedBy = textHint ? (ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId) : ariaDescribedBy;
-    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
+    const hasError = hasMessage(error);
+    // The standing advice first, the news second: the caller's ids, the caption, the error.
+    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
+    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     // On phones we suppress the OS keyboard (inputMode="none" below) and show our
     // own calculator numpad, so the desktop popover trigger is hidden. The
     // end padding keys off showCalc, so it tightens up automatically.
     const isMobile = useMediaQuery(PHONE_QUERY, false);
-    const showCalc = !disabled && !isMobile;
+    const showCalc = calculator && !disabled && !isMobile;
     const [focused, setFocused] = useState(false);
     // On mobile, focusing the field opens the numpad bottom sheet in place of the
     // native keyboard (feedback #334) — a full calculator keypad, not just the old
@@ -381,15 +381,17 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // decimals (keksdose live #356). Display only — `value` is the host's, untouched.
     const displayDigits = digitsProp ?? currencyMinorDigits(currency);
     const resting = focused ? shown : settleAmount(shown, displayDigits);
-    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
-    const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
+    const derived = localizeMark(resting, mark);
+    // The draft only while it says what the field holds AND holds nothing the live
+    // sanitising would drop — a letter, a second decimal point — which would otherwise
+    // stay on screen while the value said something else (see `showsTyped`).
     const display =
       draft === null
         ? derived
-        : draftAs === shown
+        : showsTyped(draft, mark, shown)
           ? draft
           : // The caller owns the sign: the typed "12" is shown as the "-12" it is.
-            signOwned && negative && `-${draftAs}` === shown
+            signOwned && negative && shown.startsWith("-") && showsTyped(draft, mark, shown.slice(1))
             ? `-${draft}`
             : derived;
     // Every route into the field — typing, the numpad sheet, the desktop
@@ -434,7 +436,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     };
     const typed = (raw: string) => {
       setDraft(raw);
-      handleText(normalizeTypedMarks(raw, mark));
+      handleText(readTyped(raw, mark));
     };
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so
@@ -519,6 +521,8 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
             // transparent-placeholder bits.
             asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,
+            // The caller's, over the base and under everything below (see `inputClassName`).
+            inputClassName,
             // Room for the trailing controls. showCalc is always false on a phone,
             // so the display shape only ever has to clear the currency chip — and
             // it clears it by the chip's actual width (a text-sm code plus a
@@ -565,9 +569,10 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         >
           {showCalc && (
             <CalculatorButton
-              // The mark the field shows, as NumberInput hands its calculator; the
-              // evaluator reads either, and its result comes back dot-decimal.
-              value={display}
+              // The mark the field shows but not the typist's grouping: the evaluator
+              // reads either mark, and "1.234,5" is two of them. The result comes back
+              // dot-decimal.
+              value={derived}
               onChange={(result, expression) => {
                 setDraft(null);
                 const settled = settle(result);
@@ -660,6 +665,13 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             {hint}
           </p>
         )}
+        {/* The news after the standing advice, as Select orders them. The root is
+            already a steady box, so the message coming and going remounts nothing. */}
+        {hasError && (
+          <p id={errorId} className={FIELD_ERROR_CLASS}>
+            {error}
+          </p>
+        )}
         {showNumpad && (
           <NumberPadSheet
             // Localised like the field it mirrors. Keys are typing, read by the