react-cheminfo 0.25.0 → 0.26.0

package/src/clipboard/ui/CopyButton.tsx

@@ -2,6 +2,8 @@ import type { IconName, Intent } from '@blueprintjs/core';
 import { Button } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import {
   DEFAULT_COPY_RESET_AFTER,
   useCopyToClipboard,
@@ -24,12 +26,12 @@ export interface CopyButtonProps {
   label?: string;
   /**
    * Text shown while the copy is being confirmed, when there is a label.
-   * @default 'Copied'
+   * @default the chrome's own word for it, in the language of the page
    */
   copiedLabel?: string;
   /**
    * Text shown while a refused copy is being reported, when there is a label.
-   * @default 'Copy failed'
+   * @default the chrome's own line, in the language of the page
    */
   failedLabel?: string;
   /**
@@ -59,7 +61,7 @@ export interface CopyButtonProps {
   resetAfter?: number;
   /**
    * What the pointer and a screen reader are told.
-   * @default 'Copy to clipboard'
+   * @default the chrome's own line, in the language of the page
    */
   title?: string;
   /**
@@ -79,24 +81,26 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
   const {
     content,
     label,
-    copiedLabel = 'Copied',
-    failedLabel = 'Copy failed',
+    copiedLabel,
+    failedLabel,
     minimal = false,
     small = false,
     icon = 'clipboard',
     disabled = false,
     resetAfter = DEFAULT_COPY_RESET_AFTER,
-    title = 'Copy to clipboard',
+    title,
     className,
   } = props;
+  const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard(resetAfter);
+  const hoverTitle = title ?? t('clipboard.copyToClipboard');
   const look = buttonLook({
     copied,
     failed,
     icon,
     label,
-    copiedLabel,
-    failedLabel,
+    copiedLabel: copiedLabel ?? t('clipboard.copied'),
+    failedLabel: failedLabel ?? t('clipboard.failed'),
   });
 
   return (
@@ -108,8 +112,8 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
       intent={look.intent}
       text={look.text}
       disabled={disabled}
-      title={title}
-      aria-label={label ?? title}
+      title={hoverTitle}
+      aria-label={label ?? hoverTitle}
       onClick={() => {
         void copy(typeof content === 'function' ? content() : content);
       }}

package/src/color/ui/ColorScaleEditor.tsx

@@ -2,6 +2,7 @@ import { Button, HTMLSelect } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { normalizeHexColor } from '../core/hex.ts';
 import type {
   ColorInterpolation,
@@ -22,14 +23,11 @@ const POSITION_DECIMALS = 2;
 // hex colour is shown as black until it is picked again.
 const UNREADABLE_COLOR = '#000000';
 
-/** What each path between two anchors is called. */
-const INTERPOLATION_LABELS: Array<{
-  value: ColorInterpolation;
-  label: string;
-}> = [
-  { value: 'rgb', label: 'RGB — mix the channels' },
-  { value: 'hsv', label: 'HSV — turn the short way' },
-  { value: 'hsv-long', label: 'HSV — turn the long way' },
+/** The paths between two anchors, in the order the picker lists them. */
+const INTERPOLATIONS: readonly ColorInterpolation[] = [
+  'rgb',
+  'hsv',
+  'hsv-long',
 ];
 
 /** What {@link ColorScaleEditor} edits. */
@@ -57,6 +55,7 @@ export interface ColorScaleEditorProps {
  */
 export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
   const { className, value, onChange } = props;
+  const t = useChromeT();
   const stops = value.stops;
 
   function write(next: readonly ColorStop[]): void {
@@ -69,7 +68,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         scale={value}
         height={PREVIEW_HEIGHT}
         samples={PREVIEW_SAMPLES}
-        label="The scale being edited"
+        label={t('color.scaleBeingEdited')}
       />
 
       <div style={ROWS_STYLE}>
@@ -77,7 +76,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
           <div key={`${String(index)}-${stop.color}`} style={ROW_STYLE}>
             <input
               type="color"
-              aria-label={`Colour of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorColour', { index: index + 1 })}
               value={normalizeHexColor(stop.color) ?? UNREADABLE_COLOR}
               style={SWATCH_STYLE}
               onChange={(event) => {
@@ -86,7 +85,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
             />
             <input
               type="range"
-              aria-label={`Position of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorPosition', { index: index + 1 })}
               min={0}
               max={1}
               step={POSITION_STEP}
@@ -107,7 +106,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
               icon="cross"
               variant="minimal"
               size="small"
-              aria-label={`Remove anchor ${String(index + 1)}`}
+              aria-label={t('color.removeAnchor', { index: index + 1 })}
               disabled={stops.length <= MINIMUM_STOPS}
               onClick={() => {
                 write(stops.filter((_, at) => at !== index));
@@ -121,16 +120,19 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         <Button
           icon="plus"
           size="small"
-          text="Add a colour"
+          text={t('color.addColour')}
           disabled={stops.length >= MAXIMUM_CUSTOM_STOPS}
           onClick={() => {
             write(withAddedStop(value));
           }}
         />
         <HTMLSelect
-          aria-label="Path between two anchors"
+          aria-label={t('color.path')}
           value={value.interpolation}
-          options={INTERPOLATION_LABELS}
+          options={INTERPOLATIONS.map((interpolation) => ({
+            value: interpolation,
+            label: t(`color.interpolation.${interpolation}`),
+          }))}
           onChange={(event) => {
             onChange({
               stops,

package/src/color/ui/ColorScaleEntry.tsx

@@ -1,6 +1,7 @@
 import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { resolveColorScale } from '../core/scaleText.ts';
 import type { ColorScaleKind } from '../core/scales.ts';
 import { COLOR_SCALE_KIND_LABELS } from '../core/scales.ts';
@@ -33,14 +34,15 @@ interface ColorScaleEntryProps {
  */
 export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   const { id, label, kind, description, previous, selected, onChange } = props;
+  const t = useChromeT();
   const entry = (
     <MenuItem
       roleStructure="listoption"
       selected={selected}
-      htmlTitle={description}
+      htmlTitle={t.or(`color.scale.${id}.description`, description)}
       text={
         <span style={ITEM_STYLE}>
-          <span>{label}</span>
+          <span>{t.or(`color.scale.${id}.label`, label)}</span>
           <ColorScaleBar scale={resolveColorScale(id).scale} />
         </span>
       }
@@ -52,7 +54,9 @@ export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   if (previous === kind) return entry;
   return (
     <>
-      <MenuDivider title={COLOR_SCALE_KIND_LABELS[kind]} />
+      <MenuDivider
+        title={t.or(`color.kind.${kind}`, COLOR_SCALE_KIND_LABELS[kind])}
+      />
       {entry}
     </>
   );

package/src/color/ui/ColorScaleLegend.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useId } from 'react';
 
 import { formatTrimmed } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ColorScale } from '../core/interpolate.ts';
 import { evenScale, sampleScale } from '../core/interpolate.ts';
@@ -66,6 +67,7 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
     label = '',
     formatValue = defaultFormatValue,
   } = props;
+  const t = useChromeT();
   const gradientId = useId();
 
   const stops = gradientStops('stops' in scale ? scale : evenScale(scale));
@@ -81,7 +83,11 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
         viewBox={`0 0 ${BAR_WIDTH} ${BAR_HEIGHT}`}
         preserveAspectRatio="none"
         role="img"
-        aria-label={`${label === '' ? 'Colour scale' : label} from ${low} to ${high}`}
+        aria-label={t('color.legendLabel', {
+          what: label === '' ? t('color.colourScale') : label,
+          low,
+          high,
+        })}
       >
         {stops.length === 0 ? null : (
           <defs>

package/src/color/ui/ColorScaleSelect.tsx

@@ -8,6 +8,7 @@ import {
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
 import { COLOR_SCALES } from '../core/scales.ts';
@@ -68,6 +69,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     allowCustom = true,
     testId,
   } = props;
+  const t = useChromeT();
   const [isOpen, setOpen] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const resolved = resolveColorScale(value);
@@ -79,14 +81,14 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           icon="chevron-left"
           variant="minimal"
           size="small"
-          text="Scales"
+          text={t('color.scales')}
           onClick={() => {
             setEditing(false);
           }}
         />
         <Button
           size="small"
-          text="Done"
+          text={t('color.done')}
           onClick={() => {
             setEditing(false);
             setOpen(false);
@@ -119,8 +121,8 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           <MenuDivider />
           <MenuItem
             icon="edit"
-            text="Custom…"
-            label={resolved.id === null ? 'in use' : undefined}
+            text={t('color.customEllipsis')}
+            label={resolved.id === null ? t('color.inUse') : undefined}
             shouldDismissPopover={false}
             onClick={() => {
               setEditing(true);
@@ -150,13 +152,17 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
       >
         <Button
           alignText="start"
-          aria-label={label === '' ? 'Colour scale' : label}
+          aria-label={label === '' ? t('color.colourScale') : label}
           data-testid={testId}
           endIcon="caret-down"
           fill
           text={
             <span style={BUTTON_TEXT_STYLE}>
-              <span>{resolved.label}</span>
+              <span>
+                {resolved.id === null
+                  ? t('color.custom')
+                  : t.or(`color.scale.${resolved.id}.label`, resolved.label)}
+              </span>
               <ColorScaleBar
                 scale={resolved.scale}
                 style={{ width: BUTTON_BAR_WIDTH }}

package/src/confirm/ui/ConfirmButton.tsx

@@ -3,6 +3,8 @@ import { Alert, Button } from '@blueprintjs/core';
 import type { ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 /** Props of {@link ConfirmButton}: a Blueprint button, and what it asks. */
 export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   /**
@@ -14,12 +16,12 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   onConfirm: () => void;
   /**
    * Text of the button that goes ahead: the verb of what happens, never `OK`.
-   * @default 'Delete'
+   * @default the chrome's own word for it, in the language of the page
    */
   confirmLabel?: string;
   /**
    * Text of the button that backs out.
-   * @default 'Cancel'
+   * @default the chrome's own word for it, in the language of the page
    */
   cancelLabel?: string;
 }
@@ -35,13 +37,9 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
  * @returns The button, and the alert it opens.
  */
 export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
-  const {
-    question,
-    onConfirm,
-    confirmLabel = 'Delete',
-    cancelLabel = 'Cancel',
-    ...buttonProps
-  } = props;
+  const { question, onConfirm, confirmLabel, cancelLabel, ...buttonProps } =
+    props;
+  const t = useChromeT();
   const [asking, setAsking] = useState(false);
 
   return (
@@ -58,8 +56,8 @@ export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
         icon={alertIcon(buttonProps.icon)}
         canEscapeKeyCancel
         canOutsideClickCancel
-        cancelButtonText={cancelLabel}
-        confirmButtonText={confirmLabel}
+        cancelButtonText={cancelLabel ?? t('confirm.cancel')}
+        confirmButtonText={confirmLabel ?? t('confirm.delete')}
         onCancel={() => {
           setAsking(false);
         }}

package/src/core.ts

@@ -10,6 +10,7 @@ export * from './download/core/index.ts';
 export * from './ecosystem/core/index.ts';
 export * from './error/core/index.ts';
 export * from './format/core/index.ts';
+export * from './i18n/core/index.ts';
 export * from './language/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';

package/src/credits/ui/CreditsList.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement } 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 { CreditEntry } from '../core/credits.ts';
@@ -32,6 +33,7 @@ export interface CreditsListProps {
  */
 export function CreditsList(props: CreditsListProps): ReactElement {
   const { entries, showLicense = true, className } = props;
+  const t = useChromeT();
 
   return (
     <ul
@@ -53,7 +55,9 @@ export function CreditsList(props: CreditsListProps): ReactElement {
           ) : (
             ' '
           )}
-          <span>{entry.description}</span>
+          <span>
+            {t.or(`credits.${entry.id}.description`, entry.description)}
+          </span>
         </li>
       ))}
     </ul>

package/src/delimited/ui/DelimitedTextDialog.tsx

@@ -1,6 +1,8 @@
 import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import type { DelimitedTextPanelProps } from './DelimitedTextPanel.tsx';
 import { DelimitedTextPanel } from './DelimitedTextPanel.tsx';
 
@@ -26,27 +28,25 @@ export interface DelimitedTextDialogProps extends DelimitedTextPanelProps {
 export function DelimitedTextDialog(
   props: DelimitedTextDialogProps,
 ): ReactElement {
-  const {
-    isOpen,
-    onClose,
-    title = 'Copy the table',
-    className,
-    ...panel
-  } = props;
+  const { isOpen, onClose, title, className, ...panel } = props;
+  const t = useChromeT();
+  const heading = title ?? t('delimited.copyTable');
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title={title}
+      title={heading}
       icon="th"
       className={className}
       style={DIALOG_STYLE}
     >
       <DialogBody>
-        <DelimitedTextPanel {...panel} label={panel.label ?? title} />
+        <DelimitedTextPanel {...panel} label={panel.label ?? heading} />
       </DialogBody>
-      <DialogFooter actions={<Button text="Close" onClick={onClose} />} />
+      <DialogFooter
+        actions={<Button text={t('delimited.close')} onClick={onClose} />}
+      />
     </Dialog>
   );
 }

package/src/delimited/ui/DelimitedTextPanel.tsx

@@ -6,7 +6,7 @@ import { CopyButton } from '../../clipboard/ui/CopyButton.tsx';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
 import { formatInteger } from '../../format/core/numbers.ts';
-import { pluralize } from '../../format/core/words.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { DelimiterId } from '../core/delimiters.ts';
@@ -82,9 +82,10 @@ export function DelimitedTextPanel(
     fileName = 'table',
     defaultDelimiter = 'tab',
     downloadable = true,
-    label = 'The table, as text',
+    label,
     height = 320,
   } = props;
+  const t = useChromeT();
   const [delimiterId, setDelimiterId] = useState<string>(defaultDelimiter);
 
   const choice = delimiterChoice(delimiterId);
@@ -96,10 +97,16 @@ export function DelimitedTextPanel(
   return (
     <div className={joinClassNames('delimited-text', className)}>
       <Callout intent="primary" compact icon="info-sign">
-        {description ?? defaultDescription(rows.length)}
+        {description ??
+          t(
+            rows.length === 1
+              ? 'delimited.descriptionOne'
+              : 'delimited.descriptionMany',
+            { count: formatInteger(rows.length) },
+          )}
       </Callout>
       <div style={CONTROLS_STYLE}>
-        <span style={LABEL_STYLE}>Separator</span>
+        <span style={LABEL_STYLE}>{t('delimited.separator')}</span>
         <SegmentedControl
           size="small"
           options={DELIMITER_CHOICES.map((option) => ({
@@ -113,7 +120,7 @@ export function DelimitedTextPanel(
         {downloadable ? (
           <Button
             icon="download"
-            text="Save"
+            text={t('delimited.save')}
             size="small"
             onClick={() =>
               downloadText(
@@ -124,13 +131,18 @@ export function DelimitedTextPanel(
             }
           />
         ) : null}
-        <CopyButton content={text} label="Copy" icon="clipboard" small />
+        <CopyButton
+          content={text}
+          label={t('delimited.copy')}
+          icon="clipboard"
+          small
+        />
       </div>
       <textarea
         readOnly
         value={text}
         spellCheck={false}
-        aria-label={label}
+        aria-label={label ?? t('delimited.tableAsText')}
         className={Classes.INPUT}
         style={{ ...TEXT_STYLE, height }}
         onFocus={(event) => event.currentTarget.select()}
@@ -139,11 +151,6 @@ export function DelimitedTextPanel(
   );
 }
 
-function defaultDescription(rowCount: number): string {
-  const rows = `${formatInteger(rowCount)} ${pluralize(rowCount, 'row')}`;
-  return `${rows}, one per line. Copy them, then paste into a spreadsheet.`;
-}
-
 const CONTROLS_STYLE = {
   display: 'flex',
   flexWrap: 'wrap',

package/src/download/ui/FigureDownload.tsx

@@ -3,6 +3,7 @@ import { PopoverNext } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { OverlayIconButton } from '../../overlay/ui/OverlayIconButton.tsx';
 import type { FigureFormat } from '../core/downloadFigure.ts';
 import { downloadFigure } from '../core/downloadFigure.ts';
@@ -50,12 +51,12 @@ export interface FigureDownloadProps {
   background?: string;
   /**
    * What the glyph is called, for the pointer and for a screen reader.
-   * @default 'Save this figure'
+   * @default the chrome's own line, in the language of the page
    */
   label?: string;
   /**
    * What the panel behind it is called.
-   * @default 'Save figure'
+   * @default the chrome's own line, in the language of the page
    */
   title?: string;
   /**
@@ -92,9 +93,10 @@ export interface FigureDownloadProps {
 export function FigureDownload(props: FigureDownloadProps): ReactElement {
   const { targetId, fileName, background, scales = FIGURE_SCALES } = props;
   const { defaultFormat = 'png', defaultScale = DEFAULT_FIGURE_SCALE } = props;
-  const { label = 'Save this figure', title = 'Save figure' } = props;
+  const { label, title } = props;
   const { icon = 'download', testId } = props;
 
+  const t = useChromeT();
   const [open, setOpen] = useState(false);
   const [format, setFormat] = useState<FigureFormat>(defaultFormat);
   const [scale, setScale] = useState(defaultScale);
@@ -132,7 +134,7 @@ export function FigureDownload(props: FigureDownloadProps): ReactElement {
       onInteraction={interact}
       content={
         <FigureDownloadPanel
-          title={title}
+          title={title ?? t('download.saveFigure')}
           format={format}
           scale={scale}
           scales={scales}
@@ -147,7 +149,7 @@ export function FigureDownload(props: FigureDownloadProps): ReactElement {
     >
       <OverlayIconButton
         icon={icon}
-        label={label}
+        label={label ?? t('download.saveThisFigure')}
         value={format.toUpperCase()}
         active={open}
         testId={testId}