react-cheminfo 0.25.0 → 0.27.0

package/src/overlay/ui/OverlayReadout.tsx

@@ -3,6 +3,7 @@ import { useRef } from 'react';
 import { Button } from 'react-science/ui';
 
 import { useContainerSize } from '../../hooks/ui/useContainerSize.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { OverlayMetrics } from '../core/overlayMetrics.ts';
 import { placeOverlayCard } from '../core/placeOverlayCard.ts';
 
@@ -84,6 +85,7 @@ export function OverlayReadout(props: OverlayReadoutProps): ReactElement {
     onUnpin,
     testId,
   } = props;
+  const t = useChromeT();
   const { metrics } = useOverlaySurface();
   const card = useRef<HTMLDivElement>(null);
   const measured = useContainerSize(card);
@@ -121,7 +123,7 @@ export function OverlayReadout(props: OverlayReadoutProps): ReactElement {
             variant="minimal"
             size="small"
             icon="cross"
-            aria-label="Dismiss"
+            aria-label={t('overlay.dismiss')}
             onClick={onUnpin}
           />
         ) : null}

package/src/pedagogy/ui/ExerciseActions.tsx

@@ -1,6 +1,8 @@
 import { Button } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 /** What {@link ExerciseActions} needs: its handlers, and the labels of its buttons. */
 export interface ExerciseActionsProps {
   /**
@@ -11,7 +13,7 @@ export interface ExerciseActionsProps {
   onCheck?: () => void;
   /**
    * Text of the Check button.
-   * @default 'Check'
+   * @default the chrome's own words for it, in the language of the page
    */
   checkLabel?: string;
   /**
@@ -77,7 +79,7 @@ export interface ExerciseActionsProps {
 export function ExerciseActions(props: ExerciseActionsProps): ReactElement {
   const {
     onCheck,
-    checkLabel = 'Check',
+    checkLabel,
     checkDisabled = false,
     onRevealHint,
     hintsRevealed = 0,
@@ -88,6 +90,7 @@ export function ExerciseActions(props: ExerciseActionsProps): ReactElement {
     children,
     className,
   } = props;
+  const t = useChromeT();
 
   return (
     <div className={className} style={ROW_STYLE}>
@@ -95,7 +98,7 @@ export function ExerciseActions(props: ExerciseActionsProps): ReactElement {
         <Button
           intent="primary"
           icon="tick"
-          text={checkLabel}
+          text={checkLabel ?? t('pedagogy.check')}
           disabled={checkDisabled}
           onClick={onCheck}
         />
@@ -103,7 +106,10 @@ export function ExerciseActions(props: ExerciseActionsProps): ReactElement {
       {onRevealHint !== undefined && (
         <Button
           icon="lightbulb"
-          text={`Reveal hint (${Math.min(hintsRevealed, hintCount)}/${hintCount})`}
+          text={t('pedagogy.revealHintCount', {
+            revealed: Math.min(hintsRevealed, hintCount),
+            total: hintCount,
+          })}
           disabled={hintsRevealed >= hintCount}
           onClick={onRevealHint}
         />
@@ -111,12 +117,16 @@ export function ExerciseActions(props: ExerciseActionsProps): ReactElement {
       {onToggleSolution !== undefined && (
         <Button
           icon={showSolution ? 'eye-off' : 'key'}
-          text={showSolution ? 'Hide solution' : 'Reveal solution'}
+          text={
+            showSolution
+              ? t('pedagogy.hideSolution')
+              : t('pedagogy.revealSolution')
+          }
           onClick={onToggleSolution}
         />
       )}
       {onReset !== undefined && (
-        <Button icon="reset" text="Reset" onClick={onReset} />
+        <Button icon="reset" text={t('pedagogy.reset')} onClick={onReset} />
       )}
       {children}
     </div>

package/src/pedagogy/ui/ExerciseProgressHeader.tsx

@@ -2,6 +2,7 @@ import { Alert, Button, ProgressBar } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ProgressSummary } from '../core/progress.ts';
 
@@ -17,7 +18,7 @@ export interface ExerciseProgressHeaderProps {
   onClearAll?: () => void;
   /**
    * Text of the button that wipes the work.
-   * @default 'Clear all answers'
+   * @default the chrome's own words for it, in the language of the page
    */
   clearLabel?: string;
   /**
@@ -52,11 +53,12 @@ export function ExerciseProgressHeader(
   const {
     summary,
     onClearAll,
-    clearLabel = 'Clear all answers',
-    clearWarning = DEFAULT_WARNING,
+    clearLabel,
+    clearWarning,
     clearDisabled = false,
     className,
   } = props;
+  const t = useChromeT();
   const [confirming, setConfirming] = useState(false);
   const complete = summary.total > 0 && summary.solved === summary.total;
 
@@ -64,7 +66,10 @@ export function ExerciseProgressHeader(
     <div className={className} style={ROOT_STYLE}>
       <div style={ROW_STYLE}>
         <span style={COUNT_STYLE}>
-          {`${summary.solved} / ${summary.total} solved`}
+          {t('pedagogy.solvedCount', {
+            solved: summary.solved,
+            total: summary.total,
+          })}
         </span>
         <span
           style={PERCENT_STYLE}
@@ -75,7 +80,7 @@ export function ExerciseProgressHeader(
             variant="minimal"
             intent="danger"
             icon="trash"
-            text={clearLabel}
+            text={clearLabel ?? t('pedagogy.clearAll')}
             disabled={clearDisabled}
             onClick={() => {
               setConfirming(true);
@@ -96,8 +101,8 @@ export function ExerciseProgressHeader(
           isOpen={confirming}
           intent="danger"
           icon="trash"
-          cancelButtonText="Keep my answers"
-          confirmButtonText="Clear everything"
+          cancelButtonText={t('pedagogy.keepAnswers')}
+          confirmButtonText={t('pedagogy.clearEverything')}
           onCancel={() => {
             setConfirming(false);
           }}
@@ -106,16 +111,13 @@ export function ExerciseProgressHeader(
             setConfirming(false);
           }}
         >
-          {clearWarning}
+          {clearWarning ?? t('pedagogy.clearWarning')}
         </Alert>
       )}
     </div>
   );
 }
 
-const DEFAULT_WARNING =
-  'This forgets every answer, every revealed hint and every solved exercise, on this browser. There is no undo.';
-
 const ROOT_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',

package/src/pedagogy/ui/GlossaryIndex.tsx

@@ -2,6 +2,7 @@ import { InputGroup } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { Glossary, GlossaryExample } from '../core/glossary.ts';
@@ -34,7 +35,7 @@ export interface GlossaryIndexProps<TExample = GlossaryExample> {
   searchable?: boolean;
   /**
    * Placeholder and accessible name of the filter box.
-   * @default 'Filter terms…'
+   * @default the chrome's own words for it, in the language of the page
    */
   searchLabel?: string;
   /**
@@ -74,11 +75,12 @@ export function GlossaryIndex<TExample = GlossaryExample>(
     renderExample,
     renderCode,
     searchable = true,
-    searchLabel = 'Filter terms…',
+    searchLabel,
     minColumnWidth = 280,
     idPrefix = 'glossary-',
     className,
   } = props;
+  const t = useChromeT();
   const context = useGlossary();
   const terms = (glossary ?? context.glossary) as Glossary<TExample>;
   const [query, setQuery] = useState('');
@@ -95,8 +97,8 @@ export function GlossaryIndex<TExample = GlossaryExample>(
             type="search"
             leftIcon="search"
             value={query}
-            placeholder={searchLabel}
-            aria-label={searchLabel}
+            placeholder={searchLabel ?? t('pedagogy.filterTerms')}
+            aria-label={searchLabel ?? t('pedagogy.filterTerms')}
             autoComplete="off"
             spellCheck={false}
             onValueChange={setQuery}
@@ -104,7 +106,11 @@ export function GlossaryIndex<TExample = GlossaryExample>(
         </div>
       )}
       {listings.length === 0 ? (
-        <p style={EMPTY_STYLE}>{emptyMessage(query)}</p>
+        <p style={EMPTY_STYLE}>
+          {query.trim() === ''
+            ? t('pedagogy.noTermDefined')
+            : t('pedagogy.noTermMatches', { query: query.trim() })}
+        </p>
       ) : (
         <div style={gridStyle(minColumnWidth)}>
           {listings.map(({ key, entry }) => (
@@ -128,13 +134,6 @@ export function GlossaryIndex<TExample = GlossaryExample>(
   );
 }
 
-function emptyMessage(query: string): string {
-  const trimmed = query.trim();
-  return trimmed === ''
-    ? 'No term is defined yet.'
-    : `No term matches “${trimmed}”.`;
-}
-
 function anchorOf(key: string): string {
   return key
     .trim()

package/src/pedagogy/ui/HintLadder.tsx

@@ -2,6 +2,7 @@ import { Button, Callout } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { clamp } from '../../format/core/clamp.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 import { GlossaryText } from './GlossaryText.tsx';
 
@@ -23,12 +24,12 @@ export interface HintLadderProps {
   onReveal?: () => void;
   /**
    * Text of the button, before its count.
-   * @default 'Reveal hint'
+   * @default the chrome's own words for it, in the language of the page
    */
   revealLabel?: string;
   /**
    * Heading over the hints.
-   * @default 'Hints'
+   * @default the chrome's own words for it, in the language of the page
    */
   title?: string;
   /**
@@ -48,14 +49,8 @@ export interface HintLadderProps {
  * @returns The hints, or nothing while none is open and none can be.
  */
 export function HintLadder(props: HintLadderProps): ReactElement | null {
-  const {
-    className,
-    hints,
-    revealed,
-    onReveal,
-    revealLabel = 'Reveal hint',
-    title = 'Hints',
-  } = props;
+  const { className, hints, revealed, onReveal, revealLabel, title } = props;
+  const t = useChromeT();
   const open = clampRevealed(revealed, hints.length);
   const exhausted = open >= hints.length;
   if (open === 0 && (onReveal === undefined || hints.length === 0)) return null;
@@ -66,7 +61,11 @@ export function HintLadder(props: HintLadderProps): ReactElement | null {
         <div>
           <Button
             icon="lightbulb"
-            text={`${revealLabel} (${open}/${hints.length})`}
+            text={t('pedagogy.revealHintLadder', {
+              label: revealLabel ?? t('pedagogy.revealHint'),
+              open,
+              total: hints.length,
+            })}
             disabled={exhausted}
             onClick={onReveal}
           />
@@ -74,7 +73,11 @@ export function HintLadder(props: HintLadderProps): ReactElement | null {
       )}
 
       {open > 0 && (
-        <Callout intent="primary" icon="lightbulb" title={title}>
+        <Callout
+          intent="primary"
+          icon="lightbulb"
+          title={title ?? t('pedagogy.hints')}
+        >
           <ol style={LIST_STYLE}>
             {hints.slice(0, open).map((hint) => (
               <li key={hint} style={ITEM_STYLE}>

package/src/pedagogy/ui/SyntaxTooltip.tsx

@@ -2,6 +2,7 @@ import type { Placement } from '@blueprintjs/core';
 import { Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { GlossaryExample } from '../core/glossary.ts';
 
 import { HOVER_OPEN_DELAY, MONOSPACE, PROSE_INK } from './pedagogyStyle.ts';
@@ -45,12 +46,12 @@ export interface SyntaxTooltipProps {
   placement?: Placement;
   /**
    * Label of the example's code line.
-   * @default 'Example'
+   * @default the chrome's own word for it, in the language of the page
    */
   codeLabel?: string;
   /**
    * Label of the example's input line.
-   * @default 'Input'
+   * @default the chrome's own word for it, in the language of the page
    */
   inputLabel?: string;
   /**
@@ -108,12 +109,12 @@ interface SyntaxTooltipBodyProps {
   content: SyntaxTooltipContent;
   /**
    * Label of the example's code line.
-   * @default 'Example'
+   * @default the chrome's own word for it, in the language of the page
    */
   codeLabel?: string;
   /**
    * Label of the example's input line.
-   * @default 'Input'
+   * @default the chrome's own word for it, in the language of the page
    */
   inputLabel?: string;
 }
@@ -127,7 +128,8 @@ interface SyntaxTooltipBodyProps {
  * @returns The body.
  */
 export function SyntaxTooltipBody(props: SyntaxTooltipBodyProps): ReactElement {
-  const { content, codeLabel = 'Example', inputLabel = 'Input' } = props;
+  const { content, codeLabel, inputLabel } = props;
+  const t = useChromeT();
   const { syntax, name, tag, summary, detail, example } = content;
 
   return (
@@ -141,12 +143,12 @@ export function SyntaxTooltipBody(props: SyntaxTooltipBodyProps): ReactElement {
       <div style={DETAIL_STYLE}>{detail}</div>
       <div style={EXAMPLE_STYLE}>
         <div style={ROW_STYLE}>
-          <span style={LABEL_STYLE}>{codeLabel}</span>
+          <span style={LABEL_STYLE}>{codeLabel ?? t('pedagogy.example')}</span>
           <code style={VALUE_STYLE}>{example.code}</code>
         </div>
         {example.input !== undefined && (
           <div style={ROW_STYLE}>
-            <span style={LABEL_STYLE}>{inputLabel}</span>
+            <span style={LABEL_STYLE}>{inputLabel ?? t('pedagogy.input')}</span>
             <code style={VALUE_STYLE}>{example.input}</code>
           </div>
         )}

package/src/pedagogy/ui/TutorialStepStrip.tsx

@@ -2,6 +2,7 @@ import { Button, Tag, Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import { clamp } from '../../format/core/clamp.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ExerciseLevel } from '../core/types.ts';
 
@@ -76,6 +77,7 @@ export function TutorialStepStrip(props: TutorialStepStripProps): ReactElement {
     pagerHint,
     className,
   } = props;
+  const t = useChromeT();
   const active = clampIndex(activeIndex, steps.length);
 
   return (
@@ -101,19 +103,22 @@ export function TutorialStepStrip(props: TutorialStepStripProps): ReactElement {
           <Button
             size="small"
             icon="chevron-left"
-            text="Previous"
+            text={t('pedagogy.previous')}
             disabled={active === 0}
             onClick={() => {
               onSelect(active - 1);
             }}
           />
           <Tag minimal round>
-            {`Step ${active + 1} of ${steps.length}`}
+            {t('pedagogy.stepOf', {
+              step: active + 1,
+              total: steps.length,
+            })}
           </Tag>
           <Button
             size="small"
             endIcon="chevron-right"
-            text="Next"
+            text={t('pedagogy.next')}
             intent="primary"
             disabled={active >= steps.length - 1}
             onClick={() => {

package/src/periodic/ui/CategoryLegend.tsx

@@ -4,6 +4,7 @@
 
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import {
   CATEGORY_LABELS,
@@ -39,12 +40,16 @@ export interface CategoryLegendProps {
  */
 export function CategoryLegend(props: CategoryLegendProps): ReactElement {
   const { className, onSelect, selected } = props;
+  const t = useChromeT();
 
   return (
     <div className={className} style={legendStyle}>
       {CATEGORY_ORDER.map((category) => {
         const swatch = categorySwatch(category);
-        const label = CATEGORY_LABELS[category];
+        const label = t.or(
+          `periodic.category.${category}`,
+          CATEGORY_LABELS[category],
+        );
         const mark = (
           <span style={{ ...swatchStyle, background: swatch.background }} />
         );

package/src/periodic/ui/ElementCell.tsx

@@ -9,6 +9,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 /** What {@link ElementCell} needs to draw one element. */
 export interface ElementCellProps {
@@ -74,6 +75,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     isIncluded = true,
     onHover,
   } = props;
+  const t = useChromeT();
 
   return (
     <button
@@ -81,7 +83,11 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       className={className}
       data-testid={`element-${symbol}`}
       data-symbol={symbol}
-      aria-label={`${name} (${symbol}, Z = ${String(atomicNumber)})`}
+      aria-label={t('periodic.cellLabel', {
+        name,
+        symbol,
+        atomicNumber,
+      })}
       aria-pressed={isSelected}
       onClick={() => {
         onSelect(symbol);

package/src/periodic/ui/PeriodicTable.tsx

@@ -14,6 +14,7 @@ import type { CSSProperties, KeyboardEvent, ReactElement } from 'react';
 import { useEffect, useRef } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { categorySwatch } from '../core/categories.ts';
 import type { PeriodicElement } from '../core/elements.ts';
 import type { ElementRange } from '../core/layout.ts';
@@ -127,6 +128,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     className,
   } = props;
 
+  const t = useChromeT();
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
@@ -155,7 +157,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
       <div
         ref={gridRef}
         role="grid"
-        aria-label="Periodic table"
+        aria-label={t('periodic.table')}
         data-testid="periodic-table"
         style={headers ? gridWithHeadersStyle : gridStyle}
         onKeyDown={handleKeyDown}

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -5,6 +5,7 @@
 
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ElementRange } from '../core/layout.ts';
 import {
@@ -33,13 +34,14 @@ interface HeaderStripsProps {
  */
 export function HeaderStrips(props: HeaderStripsProps): ReactElement {
   const { onSelectRange } = props;
+  const t = useChromeT();
   const groups: ReactElement[] = [];
   for (let group = 1; group <= COLUMN_COUNT; group++) {
     groups.push(
       <HeaderCell
         key={`group-${String(group)}`}
         label={String(group)}
-        title={`Group ${String(group)}`}
+        title={t('periodic.group', { group })}
         column={group + 1}
         row={1}
         onClick={
@@ -57,7 +59,7 @@ export function HeaderStrips(props: HeaderStripsProps): ReactElement {
       <HeaderCell
         key={`period-${String(period)}`}
         label={String(period)}
-        title={`Period ${String(period)}`}
+        title={t('periodic.period', { period })}
         column={1}
         row={period + 1}
         onClick={

package/src/share/ui/ShareButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
-const SHARE_TITLE = 'Share a link to this page, or embed it in your own site';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 /** How the button is dressed for the bar it sits in. */
 export type ShareButtonVariant = 'nav-link' | 'blueprint';
@@ -17,7 +17,7 @@ export interface ShareButtonProps {
   variant?: ShareButtonVariant;
   /**
    * Text of the button, and what a screen reader is told.
-   * @default 'Share'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
   /**
@@ -28,7 +28,7 @@ export interface ShareButtonProps {
   compact?: boolean;
   /**
    * What the pointer is told.
-   * @default 'Share a link to this page, or embed it in your own site'
+   * @default the chrome's own line, in the language of the page
    */
   title?: string;
   /**
@@ -48,11 +48,14 @@ export function ShareButton(props: ShareButtonProps): ReactElement {
   const {
     onClick,
     variant = 'nav-link',
-    label = 'Share',
+    label: given,
     compact = false,
-    title = SHARE_TITLE,
+    title: givenTitle,
     className,
   } = props;
+  const t = useChromeT();
+  const label = given ?? t('share.button');
+  const title = givenTitle ?? t('share.buttonTitle');
   const text = compact ? undefined : label;
 
   if (variant === 'blueprint') {

package/src/share/ui/ShareConfigOptions.tsx

@@ -1,6 +1,7 @@
 import { Checkbox, H6 } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { HideablePart } from '../core/index.ts';
 
 import { SharePartOptions } from './SharePartOptions.tsx';
@@ -35,27 +36,25 @@ export function ShareConfigOptions(
   props: ShareConfigOptionsProps,
 ): ReactElement {
   const { embed, parts, hidden, onEmbedChange, onPartChange } = props;
+  const t = useChromeT();
 
   return (
     <>
       <section className="share-section" style={SECTION_STYLE}>
-        <H6>Layout</H6>
+        <H6>{t('share.layout')}</H6>
         <Checkbox
           checked={embed}
-          label="Embed in another page"
+          label={t('share.embed')}
           onChange={(event) => {
             onEmbedChange(event.currentTarget.checked);
           }}
         />
-        <span style={HINT_STYLE}>
-          Drops the site header and its navigation, so the page sits inside a
-          page of your own.
-        </span>
+        <span style={HINT_STYLE}>{t('share.embedHint')}</span>
       </section>
 
       {parts.length > 0 ? (
         <section className="share-section" style={SECTION_STYLE}>
-          <H6>Show on the page</H6>
+          <H6>{t('share.showOnPage')}</H6>
           <SharePartOptions
             parts={parts}
             hidden={hidden}

package/src/share/ui/ShareDialog.tsx

@@ -1,6 +1,7 @@
 import { Dialog } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   ShareConfig,
   ShareParamCodecs,
@@ -112,13 +113,14 @@ export function ShareDialog<
   Codecs extends ShareParamCodecs = Record<string, never>,
 >(props: ShareDialogProps<Codecs>): ReactElement {
   const { isOpen, onClose, usePortal = true, ...rest } = props;
+  const t = useChromeT();
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
       usePortal={usePortal}
-      title="Share or embed"
+      title={t('share.dialogTitle')}
       icon="share"
       className="share-dialog"
       style={DIALOG_STYLE}