react-cheminfo 0.31.0 → 0.33.0

package/src/i18n/core/prose.ts

@@ -0,0 +1,53 @@
+/**
+ * Cutting a paragraph at the placeholders that stand for something drawn.
+ *
+ * Pure, and its own module: where a link falls in a sentence is the
+ * translator's decision — German puts the verb last, French rewrites the
+ * possessive around it — so the paragraph is one message with a `{name}` in it
+ * rather than fragments glued around a fixed anchor. What the pieces are drawn
+ * as is `Prose` in `react-cheminfo/ui`.
+ */
+
+/** One piece of a paragraph: authored prose, or something the page draws. */
+export type ProsePiece =
+  | { kind: 'text'; at: number; text: string }
+  | { kind: 'node'; at: number; name: string };
+
+const PLACEHOLDER = /\{(?<name>\w+)\}/g;
+
+/**
+ * Split a paragraph at the placeholders the page has something to draw for.
+ *
+ * A placeholder nobody named is left inside its text piece: it is either a
+ * value the message already had filled in, or a key a translation has got
+ * wrong, and neither is worth throwing the paragraph away for.
+ * @param text - The message, already written in the language of the page.
+ * @param names - The placeholders that stand for something drawn.
+ * @returns The pieces, in order, with no empty text piece between two nodes.
+ * `at` is the offset in the message, which makes it a stable React key.
+ */
+export function splitProse(
+  text: string,
+  names: readonly string[],
+): ProsePiece[] {
+  const wanted = new Set(names);
+  const pieces: ProsePiece[] = [];
+  let cursor = 0;
+  for (const match of text.matchAll(PLACEHOLDER)) {
+    const name = match.groups?.name ?? '';
+    if (!wanted.has(name)) continue;
+    if (match.index > cursor) {
+      pieces.push({
+        kind: 'text',
+        at: cursor,
+        text: text.slice(cursor, match.index),
+      });
+    }
+    pieces.push({ kind: 'node', at: match.index, name });
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < text.length) {
+    pieces.push({ kind: 'text', at: cursor, text: text.slice(cursor) });
+  }
+  return pieces;
+}

package/src/i18n/ui/Prose.tsx

@@ -0,0 +1,47 @@
+/**
+ * A paragraph of authored prose, with its inline marks drawn and its links put
+ * back where the sentence wants them.
+ *
+ * An explanation page is prose, not labels: it carries bold lead-ins, italics
+ * and a handful of links into the tool. `**strong**`, `*emphasis*` and
+ * `` `code` `` are the inline marks `InlineText` reads. A link is a `{name}`
+ * placeholder instead, cut out by `splitProse`, so a translation decides where
+ * in the sentence it falls.
+ */
+
+import type { ReactElement, ReactNode } from 'react';
+import { Fragment } from 'react';
+
+import { InlineText } from '../../pedagogy/ui/InlineText.tsx';
+import { splitProse } from '../core/prose.ts';
+
+/** Props of {@link Prose}. */
+export interface ProseProps {
+  /** The message, already written in the language of the page. */
+  text: string;
+  /**
+   * What each `{name}` placeholder of the message stands for.
+   * @default {}
+   */
+  nodes?: Readonly<Record<string, ReactNode>>;
+}
+
+/**
+ * Draw one piece of prose.
+ * @param props - See {@link ProseProps}.
+ * @returns The prose, marks drawn and placeholders replaced.
+ */
+export function Prose(props: ProseProps): ReactElement {
+  const { text, nodes = {} } = props;
+  return (
+    <>
+      {splitProse(text, Object.keys(nodes)).map((piece) =>
+        piece.kind === 'text' ? (
+          <InlineText key={piece.at} text={piece.text} />
+        ) : (
+          <Fragment key={piece.at}>{nodes[piece.name]}</Fragment>
+        ),
+      )}
+    </>
+  );
+}

package/src/i18n/ui/index.ts

@@ -1,5 +1,7 @@
 export type { LanguageSelectProps } from './LanguageSelect.tsx';
 export { LanguageSelect } from './LanguageSelect.tsx';
+export type { ProseProps } from './Prose.tsx';
+export { Prose } from './Prose.tsx';
 export {
   useIsTranslating,
   useLanguage,

package/src/locales/de.json

@@ -233,6 +233,7 @@
   "overlay.hoverAName": "Fahren Sie über einen Namen, um zu sehen, was er bewirkt.",
   "overlay.dismiss": "Schließen",
   "delimited.copyTable": "Tabelle kopieren",
+  "delimited.copyOrDownload": "Daten kopieren oder herunterladen",
   "delimited.close": "Schließen",
   "delimited.separator": "Trennzeichen",
   "delimited.save": "Speichern",
@@ -262,6 +263,9 @@
   "orbital.axesTitle": "Kartesische Achsen",
   "orbital.axesBody": "x, y und z durch den Kern zeichnen. Die Bezeichnung benennt ein Orbital danach, wo seine Keulen gegenüber ihnen liegen.",
   "orbital.axesExample": "vier Keulen zwischen der y- und der z-Achse, keine auf einer von beiden.",
+  "orbital.spin": "Das Orbital drehen",
+  "orbital.spinTitle": "Drehung",
+  "orbital.spinBody": "Das Orbital langsam um seine senkrechte Achse drehen. Ein fester Blickwinkel verbirgt, welche Keulen auf Sie zeigen; ein drehendes Orbital nicht.",
   "orbital.resetTitle": "Ansicht zurücksetzen",
   "orbital.resetBody": "Zurück zu Blickwinkel und Zoom, mit denen das Orbital geöffnet wurde. Ein Wechsel des Orbitals behält die Ansicht bei, in die Sie es gedreht haben.",
   "viewer.capability.noWindow": "Der 3D-Betrachter braucht ein Browserfenster.",
@@ -449,5 +453,7 @@
   "molecule3d.input.scroll": "Scrollen",
   "molecule3d.input.clickAtom": "Ein Atom anklicken",
   "molecule3d.input.clickBackground": "Den Hintergrund anklicken",
-  "molecule3d.helpNote": "Die Tasten wirken, solange der Zeiger über dem Molekül ist. Auf dem Mac ist Ctrl die Control-Taste, nicht ⌘. Bei eingeschaltetem Messwerkzeug wählt ein Klick ein Atom."
+  "molecule3d.helpNote": "Die Tasten wirken, solange der Zeiger über dem Molekül ist. Auf dem Mac ist Ctrl die Control-Taste, nicht ⌘. Bei eingeschaltetem Messwerkzeug wählt ein Klick ein Atom.",
+  "number.increment": "Erhöhen",
+  "number.decrement": "Verringern"
 }

package/src/locales/en.json

@@ -233,6 +233,7 @@
   "overlay.hoverAName": "Hover a name for what it does.",
   "overlay.dismiss": "Dismiss",
   "delimited.copyTable": "Copy the table",
+  "delimited.copyOrDownload": "Copy or download data",
   "delimited.close": "Close",
   "delimited.separator": "Separator",
   "delimited.save": "Save",
@@ -435,6 +436,9 @@
   "orbital.axesTitle": "Cartesian axes",
   "orbital.axesBody": "Draw x, y and z through the nucleus. The label names an orbital by where its lobes sit against them.",
   "orbital.axesExample": "four lobes between the y and z axes, none on either.",
+  "orbital.spin": "Spin the orbital",
+  "orbital.spinTitle": "Spin",
+  "orbital.spinBody": "Turn the orbital slowly on its vertical axis. One fixed angle hides which lobes point towards you; a turning one does not.",
   "orbital.resetTitle": "Reset the view",
   "orbital.resetBody": "Back to the angle and zoom the orbital opened on. A change of orbital keeps whatever view you have turned it to.",
   "viewer.capability.noWindow": "The 3D viewer needs a browser window.",
@@ -449,5 +453,7 @@
   "conformers.strategyDetail.likely-random": "Draws torsions at random from the torsion database, weighted by how often each angle is seen in crystal structures.",
   "conformers.strategyDetail.pure-random": "Draws every torsion uniformly at random, ignoring how likely the angle is — the widest spread and the least realistic set.",
   "conformers.strategyDetail.likely-systematic": "Walks the torsion combinations in decreasing likelihood, so the first conformers are the most probable ones and the set is reproducible.",
-  "conformers.minimisation.none": "None (no energies)"
+  "conformers.minimisation.none": "None (no energies)",
+  "number.increment": "Increase",
+  "number.decrement": "Decrease"
 }

package/src/locales/es.json

@@ -233,6 +233,7 @@
   "overlay.hoverAName": "Pase el puntero sobre un nombre para ver qué hace.",
   "overlay.dismiss": "Cerrar",
   "delimited.copyTable": "Copiar la tabla",
+  "delimited.copyOrDownload": "Copiar o descargar los datos",
   "delimited.close": "Cerrar",
   "delimited.separator": "Separador",
   "delimited.save": "Guardar",
@@ -262,6 +263,9 @@
   "orbital.axesTitle": "Ejes cartesianos",
   "orbital.axesBody": "Trazar x, y y z a través del núcleo. La etiqueta nombra un orbital por dónde quedan sus lóbulos respecto a ellos.",
   "orbital.axesExample": "cuatro lóbulos entre los ejes y y z, ninguno sobre ninguno de los dos.",
+  "orbital.spin": "Girar el orbital",
+  "orbital.spinTitle": "Giro",
+  "orbital.spinBody": "Girar lentamente el orbital sobre su eje vertical. Un ángulo fijo oculta qué lóbulos apuntan hacia usted; uno que gira, no.",
   "orbital.resetTitle": "Reiniciar la vista",
   "orbital.resetBody": "Volver al ángulo y al zoom con los que se abrió el orbital. Un cambio de orbital conserva la vista a la que usted lo haya girado.",
   "viewer.capability.noWindow": "El visor 3D necesita una ventana de navegador.",
@@ -449,5 +453,7 @@
   "molecule3d.input.scroll": "Rueda",
   "molecule3d.input.clickAtom": "Hacer clic en un átomo",
   "molecule3d.input.clickBackground": "Hacer clic en el fondo",
-  "molecule3d.helpNote": "Las teclas actúan mientras el puntero está sobre la molécula. En un Mac, Ctrl es la tecla Control, no ⌘. Con una herramienta de medida activa, un clic elige un átomo."
+  "molecule3d.helpNote": "Las teclas actúan mientras el puntero está sobre la molécula. En un Mac, Ctrl es la tecla Control, no ⌘. Con una herramienta de medida activa, un clic elige un átomo.",
+  "number.increment": "Aumentar",
+  "number.decrement": "Disminuir"
 }

package/src/locales/fr.json

@@ -233,6 +233,7 @@
   "overlay.hoverAName": "Survolez un nom pour savoir ce qu'il fait.",
   "overlay.dismiss": "Fermer",
   "delimited.copyTable": "Copier le tableau",
+  "delimited.copyOrDownload": "Copier ou télécharger les données",
   "delimited.close": "Fermer",
   "delimited.separator": "Séparateur",
   "delimited.save": "Enregistrer",
@@ -262,6 +263,9 @@
   "orbital.axesTitle": "Axes cartésiens",
   "orbital.axesBody": "Tracer x, y et z à travers le noyau. L'étiquette nomme une orbitale par la position de ses lobes par rapport à eux.",
   "orbital.axesExample": "quatre lobes entre les axes y et z, aucun sur l'un ou l'autre.",
+  "orbital.spin": "Faire tourner l'orbitale",
+  "orbital.spinTitle": "Rotation",
+  "orbital.spinBody": "Faire tourner lentement l'orbitale sur son axe vertical. Un angle fixe cache quels lobes pointent vers vous ; une orbitale qui tourne, non.",
   "orbital.resetTitle": "Réinitialiser la vue",
   "orbital.resetBody": "Revenir à l'angle et au zoom d'ouverture de l'orbitale. Un changement d'orbitale conserve la vue à laquelle vous l'avez tournée.",
   "viewer.capability.noWindow": "La visionneuse 3D a besoin d'une fenêtre de navigateur.",
@@ -449,5 +453,7 @@
   "molecule3d.input.scroll": "Molette",
   "molecule3d.input.clickAtom": "Cliquer un atome",
   "molecule3d.input.clickBackground": "Cliquer le fond",
-  "molecule3d.helpNote": "Les touches agissent tant que le pointeur est sur la molécule. Sur un Mac, Ctrl est la touche Contrôle, pas ⌘. Avec un outil de mesure actif, un clic choisit un atome."
+  "molecule3d.helpNote": "Les touches agissent tant que le pointeur est sur la molécule. Sur un Mac, Ctrl est la touche Contrôle, pas ⌘. Avec un outil de mesure actif, un clic choisit un atome.",
+  "number.increment": "Augmenter",
+  "number.decrement": "Diminuer"
 }