react-cheminfo 0.24.0 → 0.26.0

package/src/about/ui/AboutPage.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { CreditsList } from '../../credits/ui/CreditsList.tsx';
 import { Wordmark } from '../../ecosystem/ui/Wordmark.tsx';
 import { SiteMark } from '../../ecosystem/ui/marks.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { AboutContent } from '../core/about.ts';
 import { resolveAbout } from '../core/about.ts';
 
@@ -58,6 +59,7 @@ export interface AboutPageProps {
  */
 export function AboutPage(props: AboutPageProps): ReactElement {
   const { content, className, children, logo, mark } = props;
+  const t = useChromeT();
   const about = resolveAbout(content);
   const site = about.site;
 
@@ -76,7 +78,9 @@ export function AboutPage(props: AboutPageProps): ReactElement {
           <h1 style={logo === undefined ? NAME_STYLE : LOGO_NAME_STYLE}>
             {logo ?? <Wordmark site={site} size={26} />}
           </h1>
-          <p style={TAGLINE_STYLE}>{site.tagline}</p>
+          <p style={TAGLINE_STYLE}>
+            {t.or(`site.${site.id}.tagline`, site.tagline)}
+          </p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
         <AboutVersion
@@ -87,12 +91,15 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
-        <AboutSection title="Provided by" className="about-provided-by">
+        <AboutSection
+          title={t('about.providedBy')}
+          className="about-provided-by"
+        >
           <AboutProvidedBy people={about.people} providers={about.providedBy} />
         </AboutSection>
       )}
 
-      <AboutSection title="What you can do here" className="about-can">
+      <AboutSection title={t('about.whatYouCanDo')} className="about-can">
         <ul style={CAN_LIST_STYLE}>
           {about.can.map((line) => (
             <li key={line}>{line}</li>
@@ -115,12 +122,12 @@ export function AboutPage(props: AboutPageProps): ReactElement {
 
       {children}
 
-      <AboutSection title="Built on" className="about-credits">
+      <AboutSection title={t('about.builtOn')} className="about-credits">
         <CreditsList entries={about.credits} />
       </AboutSection>
 
       {about.cite.length === 0 ? null : (
-        <AboutSection title="How to cite" className="about-cite">
+        <AboutSection title={t('about.howToCite')} className="about-cite">
           <AboutCitations works={about.cite} />
         </AboutSection>
       )}
@@ -131,11 +138,16 @@ export function AboutPage(props: AboutPageProps): ReactElement {
         The version stays in the hero, unlinked, so a report still names a build.
       */}
       {!about.publicRepository ? null : (
-        <AboutSection title="Licence and source" className="about-licence">
+        <AboutSection
+          title={t('about.licenceAndSource')}
+          className="about-licence"
+        >
           <p style={FIRST_PARAGRAPH_STYLE}>
-            {about.license}, © cheminfo. Use it in a course, fork it, or lift a
-            piece of it into something else. The sources are at{' '}
-            <ExternalLink href={about.repository} />.
+            {around(
+              t('about.licence', { license: about.license }),
+              'sources',
+              <ExternalLink key="sources" href={about.repository} />,
+            )}
           </p>
           {about.build === undefined ? null : (
             <AboutBuild build={about.build} repository={about.repository} />
@@ -148,10 +160,13 @@ export function AboutPage(props: AboutPageProps): ReactElement {
         the tracker of a private repository answers 404 to every visitor.
       */}
       {about.issues === undefined ? null : (
-        <AboutSection title="Found a problem?" className="about-issues">
+        <AboutSection title={t('about.foundAProblem')} className="about-issues">
           <p style={FIRST_PARAGRAPH_STYLE}>
-            Tell us: a report naming what you typed and what came back is the
-            fastest fix there is. <ExternalLink href={about.issues} />.
+            {around(
+              t('about.reportIt'),
+              'tracker',
+              <ExternalLink key="tracker" href={about.issues} />,
+            )}
           </p>
         </AboutSection>
       )}
@@ -159,6 +174,17 @@ export function AboutPage(props: AboutPageProps): ReactElement {
   );
 }
 
+// A link sits inside a sentence whose word order is the translator's, so the
+// message names where it goes with a placeholder and is split there.
+function around(
+  message: string,
+  placeholder: string,
+  link: ReactNode,
+): ReactNode[] {
+  const [before = '', after = ''] = message.split(`{${placeholder}}`);
+  return [before, link, after];
+}
+
 function ExternalLink(props: { href: string }): ReactElement {
   const { href } = props;
 

package/src/about/ui/AboutProvidedBy.tsx

@@ -1,5 +1,8 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { AboutPerson } from '../core/about.ts';
 import type { ProviderEntry } from '../core/providers.ts';
 
@@ -19,6 +22,7 @@ export interface AboutProvidedByProps {
  */
 export function AboutProvidedBy(props: AboutProvidedByProps): ReactElement {
   const { people, providers } = props;
+  const t = useChromeT();
   const withRoles = people.filter((person) => person.role !== undefined);
 
   return (
@@ -42,7 +46,7 @@ export function AboutProvidedBy(props: AboutProvidedByProps): ReactElement {
           }
         >
           {people.length === 0 ? null : (
-            <p style={NAMES_STYLE}>{joinNames(people)}</p>
+            <p style={NAMES_STYLE}>{joinNames(people, t)}</p>
           )}
           {providers.map((provider) => (
             <p key={provider.id} style={INSTITUTION_STYLE}>
@@ -65,10 +69,16 @@ export function AboutProvidedBy(props: AboutProvidedByProps): ReactElement {
   );
 }
 
-function joinNames(people: readonly AboutPerson[]): string {
+function joinNames(
+  people: readonly AboutPerson[],
+  t: Translate<ChromeKey>,
+): string {
   const names = people.map((person) => person.name);
   if (names.length < 2) return names.join('');
-  return `${names.slice(0, -1).join(', ')} and ${names.at(-1)}`;
+  return t('about.nameList', {
+    names: names.slice(0, -1).join(', '),
+    last: names.at(-1) ?? '',
+  });
 }
 
 function ProviderLogo(props: { provider: ProviderEntry }): ReactElement {

package/src/capsule/ui/Capsule.tsx

@@ -0,0 +1,48 @@
+/**
+ * One capsule of a filter row: an interactive tag that keeps its semantic
+ * colour whether or not it is selected, the filled shape being what encodes
+ * the selection.
+ */
+
+import type { Intent } from '@blueprintjs/core';
+import { Tag } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+
+/** What one capsule needs. */
+export interface CapsuleProps {
+  /** What the capsule reads, count included. */
+  text: string;
+  /** Whether it is filled. */
+  selected: boolean;
+  /**
+   * Colour of the capsule, which says what the outcome means.
+   * @default undefined — the capsule takes no intent
+   */
+  intent?: Intent;
+  /** What the pointer is told, or `undefined` for no title at all. */
+  title: string | undefined;
+  /** Called when the capsule is picked. */
+  onClick: () => void;
+}
+
+/**
+ * One capsule.
+ * @param props - See {@link CapsuleProps}.
+ * @returns The tag.
+ */
+export function Capsule(props: CapsuleProps): ReactElement {
+  const { text, selected, intent, title, onClick } = props;
+  return (
+    <Tag
+      interactive
+      round
+      minimal={!selected}
+      intent={intent}
+      aria-pressed={selected}
+      htmlTitle={title}
+      onClick={onClick}
+    >
+      {text}
+    </Tag>
+  );
+}

package/src/capsule/ui/CapsuleFilter.tsx

@@ -1,9 +1,11 @@
 import type { Intent } from '@blueprintjs/core';
-import { Tag } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
-import { formatInteger } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+import { capsuleFilterCapsules } from './capsuleFilterCapsules.tsx';
 
 /** One capsule of a {@link CapsuleFilter} row. */
 export interface CapsuleOption<TValue extends string = string> {
@@ -43,6 +45,13 @@ export interface CapsuleAllOption {
    * @default undefined
    */
   title?: string;
+  /**
+   * Whether the capsule is filled, for a row that reads its selection back
+   * from a richer state: a pick no capsule can spell leaves `values` empty
+   * without meaning every row is kept.
+   * @default undefined — filled while no capsule is selected
+   */
+  selected?: boolean;
 }
 
 /** What every row of filter capsules needs, whatever it selects. */
@@ -51,7 +60,7 @@ export interface CapsuleFilterBaseProps<TValue extends string = string> {
   options: ReadonlyArray<CapsuleOption<TValue>>;
   /**
    * What the group is called, for a screen reader reaching the row.
-   * @default 'Filter'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
   /**
@@ -64,6 +73,14 @@ export interface CapsuleFilterBaseProps<TValue extends string = string> {
    * @default undefined
    */
   className?: string;
+  /**
+   * What the row reads back, drawn muted after the last capsule: the selection
+   * the capsules cannot spell on their own, or how else it is made. It wraps
+   * with them rather than sitting on a line of its own, so the one place a
+   * selection is made is the one place it is read.
+   * @default undefined — the row is capsules alone
+   */
+  note?: ReactNode;
 }
 
 /** A row where exactly one capsule is selected. */
@@ -109,136 +126,43 @@ export type CapsuleFilterProps<TValue extends string = string> =
  * Every capsule keeps its semantic colour whether or not it is selected, so
  * what a status means stays learnable — the filled shape is what encodes the
  * selection. Each is a real interactive tag, so the row is reachable by tab and
- * a capsule answers to Enter and Space.
+ * a capsule answers to Enter and Space. A `note` rides at the end of the row,
+ * which is where a selection finer than the capsules can spell is read back.
  * @param props - See {@link CapsuleFilterProps}.
  * @returns The capsule row.
  */
 export function CapsuleFilter<TValue extends string = string>(
   props: CapsuleFilterProps<TValue>,
 ): ReactElement {
-  const capsules =
-    props.multiple === true ? multipleCapsules(props) : singleCapsules(props);
-  const { label = 'Filter', className } = props;
+  const { label, className, note } = props;
+  const t = useChromeT();
 
   return (
     <div
       role="group"
-      aria-label={label}
+      aria-label={label ?? t('capsule.filter')}
       className={joinClassNames('capsule-filter', className)}
       style={ROW_STYLE}
     >
-      {capsules}
+      {capsuleFilterCapsules(props)}
+      {note === undefined ? null : (
+        <span className="capsule-filter__note" style={NOTE_STYLE}>
+          {note}
+        </span>
+      )}
     </div>
   );
 }
 
-function singleCapsules<TValue extends string>(
-  props: SingleCapsuleFilterProps<TValue>,
-): ReactElement[] {
-  const { options, value, onChange, formatCount = formatInteger } = props;
-  const capsules: ReactElement[] = [];
-  for (const option of options) {
-    capsules.push(
-      <Capsule
-        key={`option:${option.value}`}
-        text={capsuleText(option, formatCount)}
-        selected={option.value === value}
-        intent={option.intent}
-        title={option.title}
-        onClick={() => onChange(option.value)}
-      />,
-    );
-  }
-  return capsules;
-}
-
-function multipleCapsules<TValue extends string>(
-  props: MultipleCapsuleFilterProps<TValue>,
-): ReactElement[] {
-  const {
-    options,
-    values,
-    onChange,
-    allOption,
-    formatCount = formatInteger,
-  } = props;
-  const capsules: ReactElement[] = [];
-  if (allOption !== undefined) {
-    capsules.push(
-      <Capsule
-        key="all"
-        text={capsuleText(allOption, formatCount)}
-        selected={values.length === 0}
-        title={allOption.title}
-        onClick={() => onChange([])}
-      />,
-    );
-  }
-  for (const option of options) {
-    capsules.push(
-      <Capsule
-        key={`option:${option.value}`}
-        text={capsuleText(option, formatCount)}
-        selected={values.includes(option.value)}
-        intent={option.intent}
-        title={option.title}
-        onClick={() => onChange(toggled(options, values, option.value))}
-      />,
-    );
-  }
-  return capsules;
-}
-
-interface CapsuleProps {
-  text: string;
-  selected: boolean;
-  intent?: Intent;
-  title: string | undefined;
-  onClick: () => void;
-}
-
-function Capsule(props: CapsuleProps): ReactElement {
-  const { text, selected, intent, title, onClick } = props;
-  return (
-    <Tag
-      interactive
-      round
-      minimal={!selected}
-      intent={intent}
-      aria-pressed={selected}
-      htmlTitle={title}
-      onClick={onClick}
-    >
-      {text}
-    </Tag>
-  );
-}
-
-function capsuleText(
-  capsule: { label: string; count?: number },
-  formatCount: (count: number) => string,
-): string {
-  return capsule.count === undefined
-    ? capsule.label
-    : `${capsule.label} (${formatCount(capsule.count)})`;
-}
-
-function toggled<TValue extends string>(
-  options: ReadonlyArray<CapsuleOption<TValue>>,
-  values: readonly TValue[],
-  flipped: TValue,
-): TValue[] {
-  const next: TValue[] = [];
-  for (const option of options) {
-    const kept = values.includes(option.value);
-    if (option.value === flipped ? !kept : kept) next.push(option.value);
-  }
-  return next;
-}
-
 const ROW_STYLE = {
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'center',
   gap: 6,
 } as const satisfies CSSProperties;
+
+const NOTE_STYLE = {
+  marginLeft: 2,
+  color: TOKEN.textMuted,
+  fontSize: '0.75rem',
+} as const satisfies CSSProperties;

package/src/capsule/ui/capsuleFilterCapsules.tsx

@@ -0,0 +1,110 @@
+/**
+ * The capsules of a filter row, and nothing around them.
+ *
+ * They are a plain function of the row's props; the row itself reads the
+ * language of the page, which only a render can do, so the two are separate.
+ */
+
+import type { ReactElement } from 'react';
+
+import { formatInteger } from '../../format/core/numbers.ts';
+
+import { Capsule } from './Capsule.tsx';
+import type {
+  CapsuleFilterProps,
+  CapsuleOption,
+  MultipleCapsuleFilterProps,
+  SingleCapsuleFilterProps,
+} from './CapsuleFilter.tsx';
+
+/**
+ * The capsules a row draws, in order.
+ * @param props - See `CapsuleFilterProps`.
+ * @returns The capsules.
+ */
+export function capsuleFilterCapsules<TValue extends string = string>(
+  props: CapsuleFilterProps<TValue>,
+): ReactElement[] {
+  return props.multiple === true
+    ? multipleCapsules(props)
+    : singleCapsules(props);
+}
+
+function singleCapsules<TValue extends string>(
+  props: SingleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const { options, value, onChange, formatCount = formatInteger } = props;
+  const capsules: ReactElement[] = [];
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={option.value === value}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(option.value)}
+      />,
+    );
+  }
+  return capsules;
+}
+
+function multipleCapsules<TValue extends string>(
+  props: MultipleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const {
+    options,
+    values,
+    onChange,
+    allOption,
+    formatCount = formatInteger,
+  } = props;
+  const capsules: ReactElement[] = [];
+  if (allOption !== undefined) {
+    capsules.push(
+      <Capsule
+        key="all"
+        text={capsuleText(allOption, formatCount)}
+        selected={allOption.selected ?? values.length === 0}
+        title={allOption.title}
+        onClick={() => onChange([])}
+      />,
+    );
+  }
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={values.includes(option.value)}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(toggled(options, values, option.value))}
+      />,
+    );
+  }
+  return capsules;
+}
+
+function capsuleText(
+  capsule: { label: string; count?: number },
+  formatCount: (count: number) => string,
+): string {
+  return capsule.count === undefined
+    ? capsule.label
+    : `${capsule.label} (${formatCount(capsule.count)})`;
+}
+
+function toggled<TValue extends string>(
+  options: ReadonlyArray<CapsuleOption<TValue>>,
+  values: readonly TValue[],
+  flipped: TValue,
+): TValue[] {
+  const next: TValue[] = [];
+  for (const option of options) {
+    const kept = values.includes(option.value);
+    if (option.value === flipped ? !kept : kept) next.push(option.value);
+  }
+  return next;
+}

package/src/chart/ui/ChartTrackingLayer.tsx

@@ -8,6 +8,7 @@
 import type { CSSProperties, MouseEvent, ReactElement } from 'react';
 import { useRef } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { ChartAxisScale } from '../core/chartAxisScale.ts';
 import type { ChartBand } from '../core/chartBand.ts';
 import { chartBandCenter, chartBandIndexAt } from '../core/chartBand.ts';
@@ -64,6 +65,7 @@ export function ChartTrackingLayer(
 ): ReactElement {
   const { plot, band, y, categories, series, index, onTrack, onSelect } = props;
   const { slotAxis, title } = props;
+  const t = useChromeT();
   const entered = useRef<number | null>(null);
   const slot = index ?? -1;
   const tracked = slot >= 0 && slot < band.count;
@@ -137,8 +139,8 @@ export function ChartTrackingLayer(
         role="button"
         aria-label={
           tracked
-            ? `Measurement ${categories[slot]}`
-            : (title ?? 'Measurements')
+            ? t('chart.measurement', { name: categories[slot] ?? '' })
+            : (title ?? t('chart.measurements'))
         }
         onPointerDown={move}
         onPointerMove={move}

package/src/chrome/ui/SiteHeader.tsx

@@ -5,6 +5,7 @@ import { siteById } from '../../ecosystem/core/lookup.ts';
 import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { Wordmark } from '../../ecosystem/ui/Wordmark.tsx';
 import { SiteMark } from '../../ecosystem/ui/marks.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 import { NavLink } from './NavLink.tsx';
 import { NavMenuButton } from './NavMenuButton.tsx';
@@ -86,7 +87,7 @@ export interface SiteHeaderProps {
   /**
    * What the menu the pages fold into on a phone is called, for the pointer
    * and a screen reader.
-   * @default 'Pages'
+   * @default the chrome's own word for it, in the language of the page
    */
   pagesLabel?: string;
 }
@@ -118,8 +119,9 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
     onHome,
     markSize = 28,
     width = 'page',
-    pagesLabel = 'Pages',
+    pagesLabel,
   } = props;
+  const t = useChromeT();
 
   if (embedded) return null;
 
@@ -158,7 +160,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
         {nav.length > 1 ? (
           <div className="app-header-nav-menu">
             <NavMenuButton
-              label={pagesLabel}
+              label={pagesLabel ?? t('chrome.pages')}
               icon="menu"
               compact
               items={nav}

package/src/citation/ui/CitationMenu.tsx

@@ -2,6 +2,7 @@ import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { SvgLogoDoi } from 'cheminfo-font';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_DOWNLOADS } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
 import { doiUrl } from '../core/reference.ts';
@@ -31,7 +32,7 @@ export interface CitedWorksProps {
   /**
    * The line heading the menu, saying which of the works a reader is expected
    * to cite.
-   * @default 'Please cite both works', or 'Please cite every work' past two
+   * @default the chrome's own line, in the language of the page
    */
   guidance?: string;
 }
@@ -69,6 +70,7 @@ export function CitationMenu(props: CitationMenuProps): ReactElement {
  */
 function OneWorkMenu(props: CitedReferenceProps): ReactElement {
   const { reference } = props;
+  const t = useChromeT();
   const feedback = useCopyFeedback();
   const references = [reference];
 
@@ -82,7 +84,7 @@ function OneWorkMenu(props: CitedReferenceProps): ReactElement {
         target="_blank"
         rel="noreferrer"
       />
-      <MenuDivider title="Copy the reference as" />
+      <MenuDivider title={t('cite.copyReferenceAs')} />
       <CopyFormatEntries references={references} feedback={feedback} />
       <ImportSection references={references} />
     </Menu>
@@ -97,6 +99,7 @@ function OneWorkMenu(props: CitedReferenceProps): ReactElement {
  */
 function WorkSetMenu(props: CitedWorksProps): ReactElement {
   const { works, guidance } = props;
+  const t = useChromeT();
   const feedback = useCopyFeedback();
   const references = citedReferences(works);
   const both = works.length === 2;
@@ -106,14 +109,14 @@ function WorkSetMenu(props: CitedWorksProps): ReactElement {
       <MenuDivider
         title={
           guidance ??
-          (both ? 'Please cite both works' : 'Please cite every work')
+          (both ? t('cite.pleaseCiteBoth') : t('cite.pleaseCiteEvery'))
         }
       />
       {works.map((work) => (
         <WorkEntry key={work.reference.doi} work={work} feedback={feedback} />
       ))}
       <MenuDivider
-        title={both ? 'Copy both references as' : 'Copy every reference as'}
+        title={both ? t('cite.copyBothAs') : t('cite.copyEveryAs')}
       />
       <CopyFormatEntries references={references} feedback={feedback} />
       <ImportSection references={references} />
@@ -132,9 +135,10 @@ function ImportSection(props: {
   references: readonly Reference[];
 }): ReactElement {
   const { references } = props;
+  const t = useChromeT();
   return (
     <>
-      <MenuDivider title="Import into a reference manager" />
+      <MenuDivider title={t('cite.importIntoManager')} />
       {CITATION_DOWNLOADS.map((download) => (
         <DownloadEntry
           key={download.format}

package/src/citation/ui/CiteButton.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
 import { MenuButton } from '../../shared/ui/MenuButton.tsx';
 
@@ -10,7 +11,7 @@ interface CiteButtonBaseProps extends HeaderButtonProps {
   /**
    * Text of the button. In a compact bar it is not written, but it stays what
    * the pointer and a screen reader are told.
-   * @default 'Cite'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
 }
@@ -33,7 +34,8 @@ export type CiteButtonProps = CiteOneWorkProps | CiteWorksProps;
  * @returns The button and its menu.
  */
 export function CiteButton(props: CiteButtonProps): ReactElement {
-  const label = props.label ?? 'Cite';
+  const t = useChromeT();
+  const label = props.label ?? t('cite.button');
 
   return (
     <MenuButton