@twentyfirstmedia/ui-core 0.2.1 → 0.3.0

package/src/components/media.tsx

@@ -1,5 +1,7 @@
 "use client";
 import * as React from "react";
+import { useFormat, useStrings } from "../context.js";
+import { MEDIA_STRINGS } from "../strings.js";
 import { useControlled } from "../hooks.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
@@ -17,6 +19,7 @@ import type {
 
 /* ── Media ── */
 export function ImageVariants(p: ImageVariantsProps) {
+  const t = useStrings(MEDIA_STRINGS);
   const sel = useControlled<string | number>(p.selected, p.variants?.[0]?.id ?? "", p.onSelect),
     cur: Partial<ImageVariant> = (p.variants || []).find((v) => v.id === sel[0]) || {};
   return (
@@ -40,7 +43,7 @@ export function ImageVariants(p: ImageVariantsProps) {
         )}
         {cur.label && <span className="tf-imgvar-tag">{cur.label}</span>}
       </div>
-      <div className="tf-imgvar-list" role="listbox" aria-label="Variants">
+      <div className="tf-imgvar-list" role="listbox" aria-label={t.variants}>
         {(p.variants || []).map((v) => (
           <button
             key={v.id}
@@ -89,6 +92,7 @@ export function ImageVariants(p: ImageVariantsProps) {
 }
 
 export function Gallery(p: GalleryProps) {
+  const t = useStrings(MEDIA_STRINGS);
   const items = p.items || [],
     i = React.useState(p.start || 0),
     full = React.useState(false),
@@ -109,9 +113,16 @@ export function Gallery(p: GalleryProps) {
       document.removeEventListener("keydown", k);
     };
   });
-  function pic(it: GalleryItem, cls: string) {
+  function pic(it: GalleryItem, cls: string, loading: "lazy" | "eager" = p.loading || "lazy") {
     return it.src ? (
-      <img className={cls} src={it.src} alt={it.alt || ""} />
+      <img
+        className={cls}
+        src={it.src}
+        alt={it.alt || ""}
+        loading={loading}
+        decoding="async"
+        referrerPolicy={p.referrerPolicy}
+      />
     ) : (
       <div className={cx(cls, "tf-gallery-ph", "tf-t-" + (it.tint || "sky"))}>
         {it.art || <Icon name="image" size={28} />}
@@ -129,7 +140,7 @@ export function Gallery(p: GalleryProps) {
       {n > 1 && (
         <IconButton
           icon="chevronLeft"
-          label="Previous image"
+          label={t.previousImage}
           className="tf-gallery-prev"
           onClick={() => {
             go(-1);
@@ -139,7 +150,7 @@ export function Gallery(p: GalleryProps) {
       {n > 1 && (
         <IconButton
           icon="chevronRight"
-          label="Next image"
+          label={t.nextImage}
           className="tf-gallery-next"
           onClick={() => {
             go(1);
@@ -150,7 +161,7 @@ export function Gallery(p: GalleryProps) {
       {!full[0] && p.fullscreen !== false && (
         <IconButton
           icon="expand"
-          label="Full screen"
+          label={t.fullScreen}
           className="tf-gallery-full"
           onClick={() => {
             full[1](true);
@@ -164,7 +175,7 @@ export function Gallery(p: GalleryProps) {
     <div className="tf-gallery">
       {stage}
       {p.thumbs !== false && n > 1 && (
-        <div className="tf-gallery-thumbs" role="tablist" aria-label="Images">
+        <div className="tf-gallery-thumbs" role="tablist" aria-label={t.images}>
           {items.map((it, k) => (
             <button
               key={k}
@@ -175,30 +186,30 @@ export function Gallery(p: GalleryProps) {
               onClick={() => {
                 i[1](k);
               }}
-              aria-label={it.caption || it.alt || (it.src ? `Image ${k + 1}` : undefined)}
+              aria-label={it.caption || it.alt || (it.src ? t.imageN(k + 1) : undefined)}
             >
-              {pic(it, "tf-gallery-thumb")}
+              {pic(it, "tf-gallery-thumb", "lazy")}
             </button>
           ))}
         </div>
       )}
       {full[0] && (
         <Portal>
-          <div className="tf-lightbox" role="dialog" aria-modal="true" aria-label="Images">
+          <div className="tf-lightbox" role="dialog" aria-modal="true" aria-label={t.images}>
             <IconButton
               icon="x"
-              label="Close"
+              label={t.close}
               className="tf-lightbox-close"
               onClick={() => {
                 full[1](false);
               }}
             />
             <div className="tf-lightbox-stage">
-              {pic(cur, "tf-gallery-img")}
+              {pic(cur, "tf-gallery-img", "eager")}
               {n > 1 && (
                 <IconButton
                   icon="chevronLeft"
-                  label="Previous image"
+                  label={t.previousImage}
                   className="tf-gallery-prev"
                   onClick={() => {
                     go(-1);
@@ -208,7 +219,7 @@ export function Gallery(p: GalleryProps) {
               {n > 1 && (
                 <IconButton
                   icon="chevronRight"
-                  label="Next image"
+                  label={t.nextImage}
                   className="tf-gallery-next"
                   onClick={() => {
                     go(1);
@@ -227,7 +238,12 @@ export function Gallery(p: GalleryProps) {
 }
 
 export function BeforeAfter(p: BeforeAfterProps) {
+  const t = useStrings(MEDIA_STRINGS);
+  const fm = useFormat();
   const pos = React.useState(p.start != null ? p.start : 50),
+    pct = Math.round(pos[0]),
+    before = p.beforeLabel || t.before,
+    after = p.afterLabel || t.after,
     ref = React.useRef<HTMLDivElement>(null),
     drag = React.useRef(false);
   function at(e: { clientX: number }) {
@@ -237,7 +253,14 @@ export function BeforeAfter(p: BeforeAfterProps) {
   }
   function pane(x: MediaPane | undefined, cls: string) {
     return x && x.src ? (
-      <img className={cls} src={x.src} alt={x.alt || ""} />
+      <img
+        className={cls}
+        src={x.src}
+        alt={x.alt || ""}
+        loading={p.loading || "lazy"}
+        decoding="async"
+        referrerPolicy={p.referrerPolicy}
+      />
     ) : (
       <div className={cx(cls, "tf-ba-ph", x && x.tint && "tf-t-" + x.tint)}>{x && x.art}</div>
     );
@@ -270,8 +293,8 @@ export function BeforeAfter(p: BeforeAfterProps) {
       >
         {pane(p.before, "tf-ba-img")}
       </div>
-      <span className="tf-ba-tag left">{p.beforeLabel || "Before"}</span>
-      <span className="tf-ba-tag right">{p.afterLabel || "After"}</span>
+      <span className="tf-ba-tag left">{before}</span>
+      <span className="tf-ba-tag right">{after}</span>
       <div
         className="tf-ba-line"
         style={{
@@ -282,13 +305,33 @@ export function BeforeAfter(p: BeforeAfterProps) {
           className="tf-ba-knob"
           role="slider"
           tabIndex={0}
-          aria-label="Compare before and after"
+          aria-label={p.label || t.compareBeforeAfter}
           aria-valuemin={0}
           aria-valuemax={100}
-          aria-valuenow={Math.round(pos[0])}
+          aria-valuenow={pct}
+          aria-valuetext={
+            p.valueText
+              ? p.valueText(pct)
+              : `${before} ${fm.formatPercent(pct)}, ${after} ${fm.formatPercent(100 - pct)}`
+          }
           onKeyDown={(e) => {
-            if (e.key === "ArrowLeft") pos[1](Math.max(0, pos[0] - 5));
-            if (e.key === "ArrowRight") pos[1](Math.min(100, pos[0] + 5));
+            const to =
+              e.key === "ArrowLeft" || e.key === "ArrowDown"
+                ? pos[0] - 5
+                : e.key === "ArrowRight" || e.key === "ArrowUp"
+                  ? pos[0] + 5
+                  : e.key === "PageDown"
+                    ? pos[0] - 25
+                    : e.key === "PageUp"
+                      ? pos[0] + 25
+                      : e.key === "Home"
+                        ? 0
+                        : e.key === "End"
+                          ? 100
+                          : null;
+            if (to == null) return;
+            e.preventDefault();
+            pos[1](Math.max(0, Math.min(100, to)));
           }}
         >
           <Icon name="chevronLeft" size={12} />

package/src/components/navigation.tsx

@@ -1,5 +1,7 @@
 "use client";
 import * as React from "react";
+import { useStrings } from "../context.js";
+import { NAVIGATION_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { moveFocus, useControlled, useId, useOutside } from "../hooks.js";
@@ -104,9 +106,10 @@ export function Tabs(p: TabsProps) {
 }
 
 export function Breadcrumb(p: BreadcrumbProps) {
+  const t = useStrings(NAVIGATION_STRINGS);
   const items = p.items || [];
   return (
-    <nav className="tf-crumbs" aria-label="Breadcrumb">
+    <nav className="tf-crumbs" aria-label={t.breadcrumb}>
       {items.map((it, i) => {
         const last = i === items.length - 1;
         return (
@@ -121,22 +124,29 @@ export function Breadcrumb(p: BreadcrumbProps) {
 }
 
 export function Pagination(p: PaginationProps) {
-  const total = p.total || 1,
-    st = React.useState(p.page || 1),
-    cur = st[0],
+  const t = useStrings(NAVIGATION_STRINGS);
+  const total = Math.max(1, p.total || 1),
+    // `page` is controlled once someone listens; `page` alone stays the start page (as before)
+    controlled = p.page !== undefined && p.onChange !== undefined,
+    v = useControlled(controlled ? p.page : undefined, p.defaultPage ?? p.page ?? 1, p.onChange),
+    cur = Math.min(total, Math.max(1, v[0])),
+    go = (n: number) => {
+      const next = Math.min(total, Math.max(1, n));
+      if (next !== cur) v[1](next);
+    },
     pages: (number | "…")[] = [];
   for (let i = 1; i <= total; i++) {
     if (i === 1 || i === total || Math.abs(i - cur) <= 1) pages.push(i);
     else if (pages[pages.length - 1] !== "…") pages.push("…");
   }
   return (
-    <nav className="tf-pager" aria-label="Pagination">
+    <nav className="tf-pager" aria-label={t.pagination}>
       <IconButton
         icon="chevronLeft"
-        label="Previous page"
+        label={t.previousPage}
         size="sm"
         onClick={() => {
-          st[1](Math.max(1, cur - 1));
+          go(cur - 1);
         }}
       />
       {pages.map((n, i) =>
@@ -151,7 +161,7 @@ export function Pagination(p: PaginationProps) {
             className="tf-page"
             aria-current={n === cur ? "page" : undefined}
             onClick={() => {
-              st[1](n);
+              go(n);
             }}
           >
             {n}
@@ -160,10 +170,10 @@ export function Pagination(p: PaginationProps) {
       )}
       <IconButton
         icon="chevronRight"
-        label="Next page"
+        label={t.nextPage}
         size="sm"
         onClick={() => {
-          st[1](Math.min(total, cur + 1));
+          go(cur + 1);
         }}
       />
     </nav>
@@ -262,6 +272,7 @@ export function Menubar(p: MenubarProps) {
 
 /* ── NavigationMenu: site navigation with dropdown panels ── */
 export function NavigationMenu(p: NavigationMenuProps) {
+  const strings = useStrings(NAVIGATION_STRINGS);
   const uid = useId("nav");
   const root = React.useRef<HTMLElement>(null);
   const [open, setOpen] = React.useState<number | null>(null);
@@ -277,7 +288,7 @@ export function NavigationMenu(p: NavigationMenuProps) {
       ref={root}
       className={cx("tf-navmenu", p.className)}
       style={p.style}
-      aria-label={p.label || "Main"}
+      aria-label={p.label || strings.mainNavigation}
       onKeyDown={(e) => {
         if (e.key === "Escape" && open != null) {
           const trigger = root.current?.querySelector<HTMLElement>(`#${uid}-t${open}`);
@@ -348,6 +359,7 @@ export function NavigationMenu(p: NavigationMenuProps) {
 
 /* ── Sidebar: app navigation with groups, nested pages and a collapsed (icons) mode ── */
 export function Sidebar(p: SidebarProps) {
+  const t = useStrings(NAVIGATION_STRINGS);
   const collapsed = useControlled(p.collapsed, !!p.defaultCollapsed, p.onCollapsedChange);
   const idOf = (it: { id?: string; label: string }) => it.id || it.label;
   const hasCurrent = (it: SidebarItem) =>
@@ -399,7 +411,7 @@ export function Sidebar(p: SidebarProps) {
     <nav
       className={cx("tf-sidebar", collapsed[0] && "collapsed", p.className)}
       style={p.style}
-      aria-label={p.label || "Sidebar"}
+      aria-label={p.label || t.sidebar}
     >
       {p.header && <div className="tf-sidebar-head">{p.header}</div>}
       <div className="tf-sidebar-body">
@@ -420,7 +432,7 @@ export function Sidebar(p: SidebarProps) {
         {p.footer}
         <IconButton
           icon={collapsed[0] ? "chevronRight" : "chevronLeft"}
-          label={collapsed[0] ? "Expand sidebar" : "Collapse sidebar"}
+          label={collapsed[0] ? t.expandSidebar : t.collapseSidebar}
           variant="ghost"
           size="sm"
           onClick={() => collapsed[1](!collapsed[0])}

package/src/components/operations.tsx

@@ -3,7 +3,8 @@ import * as React from "react";
 import { Icon } from "../Icon.js";
 import { cx } from "../cx.js";
 import { useScrollFocus } from "../hooks.js";
-import { formatMoney, formatPercent } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { OPERATIONS_STRINGS } from "../strings.js";
 import { StatusIndicator, StatusShape } from "./status.js";
 import { Meter, UptimeBar } from "./developer.js";
 import { DataTable } from "./data-table.js";
@@ -50,19 +51,15 @@ export function ConnectionCard(p: ConnectionCardProps) {
 }
 
 export function ConnectionBanner(p: ConnectionBannerProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   if (!p.state || p.state === "online") return null;
   return (
     <div className={cx("tf-connbanner", p.state)} role="status">
       <StatusShape status={p.state === "offline" ? "danger" : "warn"} />
-      <span>
-        {p.text ||
-          (p.state === "offline"
-            ? "Offline. Changes are kept and sent when you’re back."
-            : `Connection lost. Retrying in ${p.seconds != null ? p.seconds : "…"} s`)}
-      </span>
+      <span>{p.text || (p.state === "offline" ? t.offline : t.connectionLost(p.seconds))}</span>
       {p.onRetry && (
         <button type="button" className="tf-linkbtn" onClick={p.onRetry}>
-          {"Retry now"}
+          {t.retryNow}
         </button>
       )}
     </div>
@@ -70,6 +67,7 @@ export function ConnectionBanner(p: ConnectionBannerProps) {
 }
 
 export function ServerCard(p: ServerCardProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   return (
     <div className="tf-server">
       <div className="tf-server-top">
@@ -90,7 +88,7 @@ export function ServerCard(p: ServerCardProps) {
           m.value == null ? (
             <div key={m.label} className="tf-usage-top">
               <span>{m.label}</span>
-              <b>{m.unknown || "Unknown"}</b>
+              <b>{m.unknown || t.unknown}</b>
             </div>
           ) : (
             <Meter key={m.label} label={m.label} value={m.value} max={m.max} text={m.text} />
@@ -104,8 +102,9 @@ export function ServerCard(p: ServerCardProps) {
 }
 
 export function DeployPipeline(p: DeployPipelineProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   return (
-    <ol className="tf-pipeline" tabIndex={0} aria-label="Deploy pipeline">
+    <ol className="tf-pipeline" tabIndex={0} aria-label={t.deployPipeline}>
       {(p.stages || []).map((s, i) => (
         <li key={i} className={cx("tf-stage", "st-" + (s.status || "idle"))}>
           <StatusShape status={s.status === "done" ? "ok" : s.status || "idle"} />
@@ -119,6 +118,7 @@ export function DeployPipeline(p: DeployPipelineProps) {
 }
 
 export function DnsRecordTable(p: DnsRecordTableProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   return (
     <DataTable
       rows={p.records || []}
@@ -130,7 +130,7 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
       columns={[
         {
           key: "type",
-          label: "Type",
+          label: t.colType,
           sortable: true,
           render: (r) => (
             <Badge tone="neutral" dot={false} className="tf-mono">
@@ -140,13 +140,13 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
         },
         {
           key: "name",
-          label: "Name",
+          label: t.colName,
           sortable: true,
           render: (r) => <span className="tf-mono">{r.name}</span>,
         },
         {
           key: "content",
-          label: "Content",
+          label: t.colContent,
           render: (r) => (
             <Tooltip label={r.content}>
               <span className="tf-mono tf-trunc" tabIndex={0}>
@@ -163,14 +163,14 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
         },
         {
           key: "proxy",
-          label: "Proxy",
+          label: t.colProxy,
           render: (r) =>
             r.proxy == null ? (
               "—"
             ) : (
               <StatusIndicator
                 status={r.proxy ? "ok" : "idle"}
-                label={r.proxy ? "Proxied" : "DNS only"}
+                label={r.proxy ? t.proxied : t.dnsOnly}
               />
             ),
         },
@@ -189,7 +189,7 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
                   <button
                     type="button"
                     className="tf-iconbtn tf-iconbtn-ghost tf-iconbtn-sm"
-                    aria-label="Actions"
+                    aria-label={t.actions}
                     onClick={s.toggle}
                   >
                     <Icon name="more" />
@@ -219,6 +219,7 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
 }
 
 export function DomainList(p: DomainListProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   return (
     <div className="tf-domains">
       {(p.items || [])
@@ -241,8 +242,8 @@ export function DomainList(p: DomainListProps) {
                 <small>{[d.registrar, d.dns].filter(Boolean).join(" · ")}</small>
               </span>
               <span className="tf-domainrow-cell">
-                <small>{"Expires"}</small>
-                <b className="tf-mono">{d.days == null ? "—" : `${d.days} days`}</b>
+                <small>{t.expires}</small>
+                <b className="tf-mono">{d.days == null ? "—" : t.daysCount(d.days)}</b>
               </span>
               <span className="tf-domainrow-cell">
                 <small>{"SSL"}</small>
@@ -256,6 +257,7 @@ export function DomainList(p: DomainListProps) {
 }
 
 export function MailAuthStatus(p: MailAuthStatusProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
   const cols = p.columns || ["MX", "SPF", "DKIM", "DMARC"];
   const box = React.useRef<HTMLDivElement>(null);
   useScrollFocus(box);
@@ -264,7 +266,7 @@ export function MailAuthStatus(p: MailAuthStatusProps) {
       <table className="tf-table tf-mailauth">
         <thead>
           <tr>
-            <th>{"Domain"}</th>
+            <th>{t.domain}</th>
             {cols.map((c) => (
               <th key={c}>{c}</th>
             ))}
@@ -303,6 +305,8 @@ export function MailAuthStatus(p: MailAuthStatusProps) {
 }
 
 export function LedgerTable(p: LedgerTableProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
+  const { formatMoney } = useFormat();
   const cur = p.currency;
   return (
     <DataTable
@@ -316,24 +320,24 @@ export function LedgerTable(p: LedgerTableProps) {
       columns={[
         {
           key: "date",
-          label: "Date",
+          label: t.colDate,
           sortable: true,
           render: (r) => <span className="tf-mono">{r.date}</span>,
         },
         {
           key: "ref",
-          label: "Ref.",
+          label: t.colRef,
           render: (r) => <span className="tf-mono">{r.ref}</span>,
         },
         {
           key: "text",
-          label: "Description",
+          label: t.colDescription,
           render: (r) => (
             <span className="tf-option-text">
               <b>{r.text}</b>
               {r.suggested && (
                 <small>
-                  <StatusShape status="signal" /> {`Suggested by ${r.suggested}`}
+                  <StatusShape status="signal" /> {t.suggestedBy(r.suggested)}
                 </small>
               )}
             </span>
@@ -341,7 +345,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "category",
-          label: "Category",
+          label: t.colCategory,
           render: (r) =>
             p.categories ? (
               <InlineEdit
@@ -359,7 +363,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "project",
-          label: "Project",
+          label: t.colProject,
           render: (r) =>
             r.project && (
               <span
@@ -376,7 +380,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "net",
-          label: "Net",
+          label: t.net,
           align: "right",
           sortable: true,
           render: (r) =>
@@ -386,7 +390,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "vat",
-          label: "VAT",
+          label: t.vat,
           align: "right",
           render: (r) =>
             formatMoney(r.vat || 0, cur, {
@@ -395,7 +399,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "gross",
-          label: "Gross",
+          label: t.grossLabel,
           align: "right",
           sortable: true,
           render: (r) => (
@@ -408,7 +412,7 @@ export function LedgerTable(p: LedgerTableProps) {
         },
         {
           key: "status",
-          label: "Status",
+          label: t.status,
           render: (r) => <StatusIndicator status={r.status || "ok"} label={r.statusLabel} />,
         },
       ]}
@@ -417,6 +421,8 @@ export function LedgerTable(p: LedgerTableProps) {
 }
 
 export function PnLStatement(p: PnLStatementProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
+  const { formatMoney } = useFormat();
   const cols = p.columns || [];
   const box = React.useRef<HTMLDivElement>(null);
   useScrollFocus(box);
@@ -431,7 +437,7 @@ export function PnLStatement(p: PnLStatementProps) {
                 {c}
               </th>
             ))}
-            {p.total !== false && <th className="tf-num">{"Total"}</th>}
+            {p.total !== false && <th className="tf-num">{t.total}</th>}
           </tr>
         </thead>
         <tbody>
@@ -467,6 +473,8 @@ export function PnLStatement(p: PnLStatementProps) {
 }
 
 export function ReceiptSuggestion(p: ReceiptSuggestionProps) {
+  const t = useStrings(OPERATIONS_STRINGS);
+  const { formatPercent } = useFormat();
   return (
     <div className="tf-receipt">
       <div className="tf-receipt-src">
@@ -504,12 +512,12 @@ export function ReceiptSuggestion(p: ReceiptSuggestionProps) {
       >
         {p.onDiscard && (
           <Button variant="ghost" size="sm" onClick={p.onDiscard}>
-            {p.discardLabel || "Not a receipt"}
+            {p.discardLabel || t.notAReceipt}
           </Button>
         )}
         {p.onConfirm && (
           <Button size="sm" icon="check" onClick={p.onConfirm}>
-            {p.confirmLabel || "Book it"}
+            {p.confirmLabel || t.bookIt}
           </Button>
         )}
       </div>