react-cheminfo 0.32.0 → 0.34.0

package/src/i18n/core/languages.ts

@@ -1,13 +1,13 @@
 /**
  * The languages the family speaks.
  *
- * Four, decided together rather than site by site: a visitor who switches to
- * German on one tool and follows a link to the next must land in German there
- * too, and a list that differs between two sites makes that impossible.
+ * Decided together rather than site by site: a visitor who switches to German
+ * on one tool and follows a link to the next must land in German there too, and
+ * a list that differs between two sites makes that impossible.
  */
 
 /** Every language a site of the family is written in. */
-export const LANGUAGES = ['en', 'fr', 'de', 'es'] as const;
+export const LANGUAGES = ['en', 'fr', 'de', 'es', 'it'] as const;
 
 /** One of {@link LANGUAGES}. */
 export type Language = (typeof LANGUAGES)[number];
@@ -31,6 +31,7 @@ export const LANGUAGE_LABELS: Record<Language, string> = {
   fr: 'Français',
   de: 'Deutsch',
   es: 'Español',
+  it: 'Italiano',
 };
 
 /**

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

@@ -232,7 +232,14 @@
   "overlay.reset": "Zurücksetzen",
   "overlay.hoverAName": "Fahren Sie über einen Namen, um zu sehen, was er bewirkt.",
   "overlay.dismiss": "Schließen",
+  "axis.scale": "Skala",
+  "axis.xScale": "X-Skala",
+  "axis.yScale": "Y-Skala",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Wie die Achse geteilt ist. Linear bekommt jede Einheit gleich viel Platz, so werden die größten Werte miteinander verglichen; logarithmisch bekommt jeder Faktor zehn gleich viel Platz, so sind die kleinen überhaupt sichtbar.",
   "delimited.copyTable": "Tabelle kopieren",
+  "delimited.copyOrDownload": "Daten kopieren oder herunterladen",
   "delimited.close": "Schließen",
   "delimited.separator": "Trennzeichen",
   "delimited.save": "Speichern",
@@ -262,6 +269,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.",

package/src/locales/en.json

@@ -232,7 +232,14 @@
   "overlay.reset": "Reset",
   "overlay.hoverAName": "Hover a name for what it does.",
   "overlay.dismiss": "Dismiss",
+  "axis.scale": "Scale",
+  "axis.xScale": "X scale",
+  "axis.yScale": "Y scale",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "How the axis is spaced. Linear gives every unit the same room, so the largest values are read against each other; logarithmic gives every factor of ten the same room, so the small ones are visible at all.",
   "delimited.copyTable": "Copy the table",
+  "delimited.copyOrDownload": "Copy or download data",
   "delimited.close": "Close",
   "delimited.separator": "Separator",
   "delimited.save": "Save",
@@ -435,6 +442,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.",

package/src/locales/es.json

@@ -232,7 +232,14 @@
   "overlay.reset": "Reiniciar",
   "overlay.hoverAName": "Pase el puntero sobre un nombre para ver qué hace.",
   "overlay.dismiss": "Cerrar",
+  "axis.scale": "Escala",
+  "axis.xScale": "Escala X",
+  "axis.yScale": "Escala Y",
+  "axis.linear": "Lineal",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Cómo se gradúa el eje. En lineal cada unidad ocupa el mismo espacio, de modo que se comparan los valores mayores entre sí; en logarítmica cada factor diez ocupa el mismo espacio, de modo que los pequeños llegan a verse.",
   "delimited.copyTable": "Copiar la tabla",
+  "delimited.copyOrDownload": "Copiar o descargar los datos",
   "delimited.close": "Cerrar",
   "delimited.separator": "Separador",
   "delimited.save": "Guardar",
@@ -262,6 +269,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.",

package/src/locales/fr.json

@@ -232,7 +232,14 @@
   "overlay.reset": "Réinitialiser",
   "overlay.hoverAName": "Survolez un nom pour savoir ce qu'il fait.",
   "overlay.dismiss": "Fermer",
+  "axis.scale": "Échelle",
+  "axis.xScale": "Échelle X",
+  "axis.yScale": "Échelle Y",
+  "axis.linear": "Linéaire",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Comment l'axe est gradué. En linéaire, chaque unité occupe la même place, ce qui compare les grandes valeurs entre elles ; en logarithmique, chaque facteur dix occupe la même place, ce qui rend les petites visibles.",
   "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 +269,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.",