@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/src/components/developer.tsx

@@ -3,7 +3,8 @@ import * as React from "react";
 import { leaving, usePresence } from "../presence.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
-import { formatMoney, formatNumber, formatPercent } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { DEVELOPER_STRINGS } from "../strings.js";
 import { useControlled, useId } from "../hooks.js";
 import { Portal } from "../portal.js";
 import { CodeBlock } from "./chat.js";
@@ -84,6 +85,7 @@ export function CodeViewer(p: CodeViewerProps) {
 }
 
 export function SecretField(p: SecretFieldProps) {
+  const t = useStrings(DEVELOPER_STRINGS);
   const shown = React.useState(false),
     copied = React.useState(false);
   const masked = (p.prefix || "") + "••••••••" + (p.last4 || "");
@@ -100,11 +102,11 @@ export function SecretField(p: SecretFieldProps) {
         }}
       >
         {p.onReveal && (
-          <Tooltip label={shown[0] ? "Hide" : "Reveal"}>
+          <Tooltip label={shown[0] ? t.hide : t.reveal}>
             <button
               type="button"
               className="tf-iconbtn tf-iconbtn-ghost tf-iconbtn-sm"
-              aria-label={shown[0] ? "Hide" : "Reveal"}
+              aria-label={shown[0] ? t.hide : t.reveal}
               onClick={() => {
                 if (shown[0]) return shown[1](false);
                 Promise.resolve(p.onReveal?.()).then((ok) => {
@@ -117,11 +119,11 @@ export function SecretField(p: SecretFieldProps) {
           </Tooltip>
         )}
         {p.onCopy && (
-          <Tooltip label={copied[0] ? "Copied" : "Copy"}>
+          <Tooltip label={copied[0] ? t.copied : t.copy}>
             <button
               type="button"
               className="tf-iconbtn tf-iconbtn-ghost tf-iconbtn-sm"
-              aria-label="Copy"
+              aria-label={t.copy}
               onClick={() => {
                 p.onCopy?.();
                 copied[1](true);
@@ -136,7 +138,7 @@ export function SecretField(p: SecretFieldProps) {
         )}
         {p.onRotate && (
           <Button size="sm" variant="soft" icon="refresh" onClick={p.onRotate}>
-            {"Rotate"}
+            {t.rotate}
           </Button>
         )}
       </span>
@@ -145,6 +147,8 @@ export function SecretField(p: SecretFieldProps) {
 }
 
 export function MoneyInput(p: MoneyInputProps) {
+  const t = useStrings(DEVELOPER_STRINGS);
+  const { formatMoney, formatNumber, formatPercent } = useFormat();
   const id = useId("mi"),
     v = useControlled<number | null>(
       p.value,
@@ -206,7 +210,7 @@ export function MoneyInput(p: MoneyInputProps) {
         {p.vatOptions && (
           <select
             className="tf-input tf-money-vat"
-            aria-label="VAT rate"
+            aria-label={t.vatRate}
             value={p.vat}
             onChange={(e) => {
               p.onVat && p.onVat(e.target.value);
@@ -231,9 +235,11 @@ export function MoneyInput(p: MoneyInputProps) {
       </div>
       {p.showGross && v[0] != null && p.vat != null && !isNaN(+p.vat) && (
         <span className="tf-field-hint">
-          {`Gross ${formatMoney(v[0] * (1 + Number(p.vat) / 100), p.currency, {
-            minimumFractionDigits: 2,
-          })}`}
+          {t.gross(
+            formatMoney(v[0] * (1 + Number(p.vat) / 100), p.currency, {
+              minimumFractionDigits: 2,
+            }),
+          )}
         </span>
       )}
     </FormField>
@@ -259,6 +265,7 @@ export function SettingsLayout(p: SettingsLayoutProps) {
 }
 
 export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
+  const t = useStrings(DEVELOPER_STRINGS);
   const pr = usePresence(!!p.open);
   React.useEffect(() => {
     if (!p.open) return;
@@ -279,7 +286,7 @@ export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
           className="tf-modal tf-shortcuts"
           role="dialog"
           aria-modal="true"
-          aria-label={p.title || "Keyboard shortcuts"}
+          aria-label={p.title || t.keyboardShortcuts}
         >
           <div
             className="tf-row"
@@ -287,8 +294,8 @@ export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
               justifyContent: "space-between",
             }}
           >
-            <h2 className="tf-modal-title">{p.title || "Keyboard shortcuts"}</h2>
-            <IconButton icon="x" label="Close" size="sm" onClick={p.onClose} />
+            <h2 className="tf-modal-title">{p.title || t.keyboardShortcuts}</h2>
+            <IconButton icon="x" label={t.close} size="sm" onClick={p.onClose} />
           </div>
           <div className="tf-shortcuts-grid">
             {(p.groups || []).map((g) => (
@@ -310,6 +317,7 @@ export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
 }
 
 export function StatCell(p: StatCellProps) {
+  const { formatNumber } = useFormat();
   const up = p.delta != null && p.delta >= 0,
     good = p.invert ? !up : up;
   return (
@@ -350,6 +358,8 @@ export function StatCell(p: StatCellProps) {
 }
 
 export function UptimeBar(p: UptimeBarProps) {
+  const t = useStrings(DEVELOPER_STRINGS);
+  const { formatPercent } = useFormat();
   const days = (p.days || []).map((d) => (typeof d === "string" ? { status: d } : d)),
     hov = React.useState<number | null>(null);
   return (
@@ -376,9 +386,9 @@ export function UptimeBar(p: UptimeBarProps) {
       <div className="tf-uptime-foot">
         <span>
           {hov[0] != null
-            ? (days[hov[0]].label || `${days.length - hov[0] - 1} days ago`) +
+            ? (days[hov[0]].label || t.daysAgo(days.length - hov[0] - 1)) +
               (days[hov[0]].note ? " · " + days[hov[0]].note : "")
-            : p.caption || `Last ${days.length} days`}
+            : p.caption || t.lastDays(days.length)}
         </span>
         {p.uptime != null && (
           <b className="tf-mono">
@@ -393,6 +403,7 @@ export function UptimeBar(p: UptimeBarProps) {
 }
 
 export function Meter(p: MeterProps) {
+  const { formatPercent } = useFormat();
   const pct = Math.max(0, Math.min(100, ((p.value || 0) / (p.max || 100)) * 100)),
     tone =
       p.tone || (pct >= (p.danger || 90) ? "blush" : pct >= (p.warn || 75) ? "butter" : "mint");

package/src/components/feedback.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import { leaving, usePresence } from "../presence.js";
 import { moveFocus, useId } from "../hooks.js";
 import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
+import { FEEDBACK_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { Portal } from "../portal.js";
 import {
@@ -179,6 +181,7 @@ export function Menu(p: MenuProps) {
 }
 
 export function Modal(p: ModalProps) {
+  const t = useStrings(FEEDBACK_STRINGS);
   const pr = usePresence(p.open ?? true);
   if (!pr.mounted) return null;
   return (
@@ -186,7 +189,7 @@ export function Modal(p: ModalProps) {
       <div className="tf-backdrop" aria-hidden />
       <div className="tf-modal" role="dialog" aria-modal="true" aria-label={p.title}>
         <span className="tf-modal-close">
-          <IconButton icon="x" label="Close" size="sm" onClick={p.onClose} />
+          <IconButton icon="x" label={t.close} size="sm" onClick={p.onClose} />
         </span>
         {p.icon && <TintIcon icon={p.icon} tint={p.tint || "sky"} size={40} />}
         <div>
@@ -251,6 +254,7 @@ const ALERT_ICON: Record<string, IconName> = {
   };
 
 export function Alert(p: AlertProps) {
+  const t = useStrings(FEEDBACK_STRINGS);
   const tone = p.tone || "info";
   return (
     <div
@@ -268,7 +272,13 @@ export function Alert(p: AlertProps) {
         <div className="tf-alert-actions">
           {p.action}
           {p.onDismiss && (
-            <IconButton icon="x" label="Dismiss" size="sm" variant="ghost" onClick={p.onDismiss} />
+            <IconButton
+              icon="x"
+              label={t.dismiss}
+              size="sm"
+              variant="ghost"
+              onClick={p.onDismiss}
+            />
           )}
         </div>
       )}
@@ -277,6 +287,7 @@ export function Alert(p: AlertProps) {
 }
 
 export function ConfirmDialog(p: ConfirmDialogProps) {
+  const t = useStrings(FEEDBACK_STRINGS);
   const titleId = useId("confirm");
   const typed = React.useState(""),
     ok = !p.confirmText || typed[0] === p.confirmText,
@@ -326,7 +337,7 @@ export function ConfirmDialog(p: ConfirmDialogProps) {
           {p.confirmText && (
             <label className="tf-field">
               <span className="tf-field-hint">
-                Type <b className="tf-mono">{p.confirmText}</b> to confirm
+                {t.typeToConfirm(<b className="tf-mono">{p.confirmText}</b>)}
               </span>
               <input
                 className="tf-input"
@@ -340,14 +351,14 @@ export function ConfirmDialog(p: ConfirmDialogProps) {
           )}
           <div className="tf-modal-foot">
             <button ref={cancel} type="button" className="tf-btn tf-btn-ghost" onClick={p.onCancel}>
-              {p.cancelLabel || "Cancel"}
+              {p.cancelLabel || t.cancel}
             </button>
             <Button
               variant={p.danger ? "danger-solid" : "primary"}
               disabled={!ok}
               onClick={p.onConfirm}
             >
-              {p.confirmLabel || "Confirm"}
+              {p.confirmLabel || t.confirm}
             </Button>
           </div>
         </div>
@@ -357,6 +368,7 @@ export function ConfirmDialog(p: ConfirmDialogProps) {
 }
 
 export function ToastItem(p: { t: ToastData }) {
+  const strings = useStrings(FEEDBACK_STRINGS);
   const t = p.t,
     paused = React.useState(false),
     left = React.useRef(t.duration),
@@ -396,7 +408,7 @@ export function ToastItem(p: { t: ToastData }) {
             toast.dismiss(t.id);
           }}
         >
-          {"Undo"}
+          {strings.undo}
         </button>
       )}
       {t.action && (
@@ -414,7 +426,7 @@ export function ToastItem(p: { t: ToastData }) {
       <button
         type="button"
         className="tf-toast-close"
-        aria-label="Dismiss"
+        aria-label={strings.dismiss}
         onClick={() => {
           toast.dismiss(t.id);
         }}

package/src/components/form.tsx

@@ -6,6 +6,8 @@
  */
 import * as React from "react";
 import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
+import { FORM_STRINGS } from "../strings.js";
 import type { FormProps, FormRule, FormValues } from "./types.js";
 
 interface FormState {
@@ -22,21 +24,26 @@ export function useFieldError(name: string | undefined): string | undefined {
 const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 /** Runs one field's rules; returns the message of the first rule that fails. */
-export function checkRule(rule: FormRule, raw: string | string[] | undefined, values: FormValues) {
+export function checkRule(
+  rule: FormRule,
+  raw: string | string[] | undefined,
+  values: FormValues,
+  t: typeof FORM_STRINGS = FORM_STRINGS,
+) {
   const value = Array.isArray(raw) ? raw.join(",") : (raw ?? "");
   const empty = value.trim() === "";
   if (rule.required && empty)
-    return typeof rule.required === "string" ? rule.required : "This field is required";
+    return typeof rule.required === "string" ? rule.required : t.fieldRequired;
   if (empty) return undefined;
-  if (rule.email && !EMAIL.test(value)) return rule.message || "Enter a valid email address";
+  if (rule.email && !EMAIL.test(value)) return rule.message || t.invalidEmail;
   if (rule.minLength != null && value.length < rule.minLength)
-    return rule.message || `Use at least ${rule.minLength} characters`;
+    return rule.message || t.minLength(rule.minLength);
   if (rule.maxLength != null && value.length > rule.maxLength)
-    return rule.message || `Use at most ${rule.maxLength} characters`;
+    return rule.message || t.maxLength(rule.maxLength);
   const n = Number(value.replace(/[^\d.-]/g, ""));
-  if (rule.min != null && n < rule.min) return rule.message || `Use ${rule.min} or more`;
-  if (rule.max != null && n > rule.max) return rule.message || `Use ${rule.max} or less`;
-  if (rule.pattern && !rule.pattern.test(value)) return rule.message || "Use the expected format";
+  if (rule.min != null && n < rule.min) return rule.message || t.minValue(rule.min);
+  if (rule.max != null && n > rule.max) return rule.message || t.maxValue(rule.max);
+  if (rule.pattern && !rule.pattern.test(value)) return rule.message || t.invalidFormat;
   return rule.validate?.(value, values) || undefined;
 }
 
@@ -51,6 +58,7 @@ function read(form: HTMLFormElement): FormValues {
 }
 
 export function Form(p: FormProps) {
+  const t = useStrings(FORM_STRINGS);
   const ref = React.useRef<HTMLFormElement>(null);
   const [errors, setErrors] = React.useState<Record<string, string>>({});
   const [tried, setTried] = React.useState(false);
@@ -59,7 +67,7 @@ export function Form(p: FormProps) {
     const next: Record<string, string> = only ? { ...errors } : {};
     for (const [name, rule] of Object.entries(rules)) {
       if (only && name !== only) continue;
-      const msg = checkRule(rule, values[name], values);
+      const msg = checkRule(rule, values[name], values, t);
       if (msg) next[name] = msg;
       else delete next[name];
     }