react-cheminfo 0.10.0 → 0.12.0

package/src/spectra/ui/RangeRows.tsx

@@ -1,14 +1,15 @@
-import { Button, InputGroup } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
-import { useState } from 'react';
+import { InputGroup } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
 
 import type { SpectraRange } from '../core/settings.ts';
 
-import { NumberField } from './NumberField.tsx';
-import { fitKeys, nextKey } from './rowKeys.ts';
+import { EditableRows } from './EditableRows.tsx';
+import { XWindowFields } from './XWindowFields.tsx';
+import { LABEL_STYLE, sizedFieldStyle } from './fieldStyles.ts';
+import { POINT_NUMBER_WINS } from './scaleOptions.ts';
 
 /** What {@link RangeRows} edits. */
-export interface RangeRowsProps {
+interface RangeRowsProps {
   /** The named stretches of x whose integral is reported per spectrum. */
   value: readonly SpectraRange[];
   /** Called with the new list on every edit. */
@@ -29,29 +30,18 @@ export interface RangeRowsProps {
  */
 export function RangeRows(props: RangeRowsProps): ReactElement {
   const { value, onChange } = props;
-  const [rowKeys, setRowKeys] = useState<readonly number[]>(() =>
-    value.map((_, index) => index),
-  );
-
-  if (rowKeys.length !== value.length) {
-    setRowKeys(fitKeys(rowKeys, value.length));
-  }
-
-  function write(index: number, patch: SpectraRange): void {
-    onChange(
-      value.map((range, at) => (at === index ? { ...range, ...patch } : range)),
-    );
-  }
 
   return (
-    <div style={LIST_STYLE}>
-      {value.length === 0 ? (
-        <span style={EMPTY_STYLE}>
-          None — nothing is integrated, and no calculation has anything to read.
-        </span>
-      ) : null}
-      {value.map((range, index) => (
-        <div key={rowKeys[index] ?? index} style={ROW_STYLE}>
+    <EditableRows
+      value={value}
+      onChange={onChange}
+      emptyText="None — nothing is integrated, and no calculation has anything to read."
+      addText="Add a range"
+      newEntry={newRange}
+      removeLabel={removeLabel}
+      help={HELP}
+      renderRow={(range, index, replace) => (
+        <>
           <label style={NAME_FIELD_STYLE}>
             <span style={LABEL_STYLE}>Name</span>
             <InputGroup
@@ -64,112 +54,43 @@ export function RangeRows(props: RangeRowsProps): ReactElement {
               autoComplete="off"
               value={range.label ?? ''}
               onValueChange={(label) => {
-                write(index, { label });
+                replace({ ...range, label });
               }}
             />
           </label>
-          <NumberField
-            label="From"
-            value={range.from}
-            placeholder="the first x"
-            onChange={(from) => {
-              write(index, { from });
-            }}
-          />
-          <NumberField
-            label="To"
-            value={range.to}
-            placeholder="the last x"
-            onChange={(to) => {
-              write(index, { to });
+          <XWindowFields
+            value={range}
+            withPoints
+            onChange={(patch) => {
+              replace({ ...range, ...patch });
             }}
           />
-          <NumberField
-            label="From point"
-            value={range.fromIndex}
-            integer
-            placeholder="0"
-            onChange={(fromIndex) => {
-              write(index, { fromIndex });
-            }}
-          />
-          <NumberField
-            label="To point"
-            value={range.toIndex}
-            integer
-            placeholder="the last point"
-            onChange={(toIndex) => {
-              write(index, { toIndex });
-            }}
-          />
-          <Button
-            icon="cross"
-            variant="minimal"
-            size="small"
-            aria-label={`Remove range ${String(index + 1)}`}
-            onClick={() => {
-              setRowKeys(rowKeys.filter((_, at) => at !== index));
-              onChange(value.filter((_, at) => at !== index));
-            }}
-          />
-        </div>
-      ))}
-      <div>
-        <Button
-          icon="plus"
-          size="small"
-          text="Add a range"
-          onClick={() => {
-            setRowKeys([...rowKeys, nextKey(rowKeys)]);
-            onChange([...value, { label: '' }]);
-          }}
-        />
-      </div>
-      <span style={HELP_STYLE}>
-        A range with no name is silently skipped, and the name has to be one a
-        variable could take — no spaces, and not starting with a digit.
-      </span>
-      <span style={HELP_STYLE}>
-        A range resolves its window the same way the scaling does: a point
-        number silently wins, so with From point set, From is never read.
-      </span>
-    </div>
+        </>
+      )}
+    />
   );
 }
 
-const LIST_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 6,
-} as const satisfies CSSProperties;
-
-const ROW_STYLE = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'flex-end',
-  gap: 8,
-} as const satisfies CSSProperties;
-
-const NAME_FIELD_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  minWidth: 140,
-  flex: '1 1 140px',
-} as const satisfies CSSProperties;
+/**
+ * The row a new range opens with: a name still to be given, the whole x axis.
+ * @returns The range.
+ */
+function newRange(): SpectraRange {
+  return { label: '' };
+}
 
-const LABEL_STYLE = {
-  fontSize: 11,
-  fontWeight: 600,
-  color: 'var(--text-muted, #5b6875)',
-} as const satisfies CSSProperties;
+/**
+ * What a screen reader calls one row's remove button.
+ * @param index - The row, counting from zero.
+ * @returns The label.
+ */
+function removeLabel(index: number): string {
+  return `Remove range ${String(index + 1)}`;
+}
 
-const EMPTY_STYLE = {
-  fontSize: 12,
-  color: 'var(--text-faint, #8a96a3)',
-} as const satisfies CSSProperties;
+const HELP: readonly string[] = [
+  'A range with no name is silently skipped, and the name has to be one a variable could take — no spaces, and not starting with a digit.',
+  `A range resolves its window the same way the scaling does. ${POINT_NUMBER_WINS}`,
+];
 
-const HELP_STYLE = {
-  fontSize: 11,
-  color: 'var(--text-faint, #8a96a3)',
-} as const satisfies CSSProperties;
+const NAME_FIELD_STYLE = sizedFieldStyle(140);

package/src/spectra/ui/ScaleFields.tsx

@@ -3,8 +3,16 @@ import type { CSSProperties, ReactElement } from 'react';
 
 import type { ScaleSettings } from '../core/settings.ts';
 
-import { NumberField } from './NumberField.tsx';
+import { XWindowFields } from './XWindowFields.tsx';
 import {
+  FIELD_STYLE,
+  HELP_STYLE,
+  LABEL_STYLE,
+  ROW_STYLE,
+  SWITCH_STYLE,
+} from './fieldStyles.ts';
+import {
+  POINT_NUMBER_WINS,
   scaleMethodOptions,
   withScaleMethod,
   withScaleRange,
@@ -12,7 +20,7 @@ import {
 } from './scaleOptions.ts';
 
 /** What {@link ScaleFields} edits. */
-export interface ScaleFieldsProps {
+interface ScaleFieldsProps {
   /** How every spectrum is scaled onto the reference one. */
   value: ScaleSettings;
   /** Called with the edited scaling on every change. */
@@ -38,7 +46,6 @@ export interface ScaleFieldsProps {
  */
 export function ScaleFields(props: ScaleFieldsProps): ReactElement {
   const { value, onChange, spectrumIds } = props;
-  const range = value.range ?? {};
 
   return (
     <div style={FIELDS_STYLE}>
@@ -96,45 +103,15 @@ export function ScaleFields(props: ScaleFieldsProps): ReactElement {
       </label>
 
       <div style={ROW_STYLE}>
-        <NumberField
-          label="From"
-          value={range.from}
-          placeholder="the first x"
-          onChange={(from) => {
-            onChange(withScaleRange(value, { from }));
-          }}
-        />
-        <NumberField
-          label="To"
-          value={range.to}
-          placeholder="the last x"
-          onChange={(to) => {
-            onChange(withScaleRange(value, { to }));
-          }}
-        />
-        <NumberField
-          label="From point"
-          value={range.fromIndex}
-          integer
-          placeholder="0"
-          onChange={(fromIndex) => {
-            onChange(withScaleRange(value, { fromIndex }));
-          }}
-        />
-        <NumberField
-          label="To point"
-          value={range.toIndex}
-          integer
-          placeholder="the last point"
-          onChange={(toIndex) => {
-            onChange(withScaleRange(value, { toIndex }));
+        <XWindowFields
+          value={value.range ?? {}}
+          withPoints
+          onChange={(patch) => {
+            onChange(withScaleRange(value, patch));
           }}
         />
       </div>
-      <span style={HELP_STYLE}>
-        A point number silently wins over an x value: with From point set, From
-        is never read.
-      </span>
+      <span style={HELP_STYLE}>{POINT_NUMBER_WINS}</span>
 
       <Switch
         checked={value.relative === true}
@@ -153,31 +130,3 @@ const FIELDS_STYLE = {
   flexDirection: 'column',
   gap: 8,
 } as const satisfies CSSProperties;
-
-const FIELD_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-} as const satisfies CSSProperties;
-
-const ROW_STYLE = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: 8,
-} as const satisfies CSSProperties;
-
-const LABEL_STYLE = {
-  fontSize: 11,
-  fontWeight: 600,
-  color: 'var(--text-muted, #5b6875)',
-} as const satisfies CSSProperties;
-
-const HELP_STYLE = {
-  fontSize: 11,
-  color: 'var(--text-faint, #8a96a3)',
-} as const satisfies CSSProperties;
-
-const SWITCH_STYLE = {
-  margin: 0,
-  fontSize: 12,
-} as const satisfies CSSProperties;

package/src/spectra/ui/SettingsPart.tsx

@@ -1,7 +1,9 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { HELP_STYLE } from './fieldStyles.ts';
+
 /** What {@link SettingsPart} frames. */
-export interface SettingsPartProps {
+interface SettingsPartProps {
   /** What the part is called, drawn above everything in it. */
   title: string;
   /**
@@ -29,9 +31,7 @@ export function SettingsPart(props: SettingsPartProps): ReactElement {
   return (
     <section style={PART_STYLE}>
       <h4 style={TITLE_STYLE}>{title}</h4>
-      {summary === undefined ? null : (
-        <span style={SUMMARY_STYLE}>{summary}</span>
-      )}
+      {summary === undefined ? null : <span style={HELP_STYLE}>{summary}</span>}
       {children}
     </section>
   );
@@ -42,19 +42,14 @@ const PART_STYLE = {
   flexDirection: 'column',
   gap: 8,
   padding: 12,
-  borderRadius: 'var(--radius, 6px)',
-  border: '1px solid var(--border, #d8dee6)',
-  background: 'var(--surface, #ffffff)',
+  borderRadius: 'var(--radius)',
+  border: '1px solid var(--border)',
+  background: 'var(--surface)',
 } as const satisfies CSSProperties;
 
 const TITLE_STYLE = {
   margin: 0,
   fontSize: 13,
   fontWeight: 600,
-  color: 'var(--text, #1c2127)',
-} as const satisfies CSSProperties;
-
-const SUMMARY_STYLE = {
-  fontSize: 11,
-  color: 'var(--text-faint, #8a96a3)',
+  color: 'var(--text)',
 } as const satisfies CSSProperties;

package/src/spectra/ui/SpectraSettingsEditor.tsx

@@ -59,6 +59,11 @@ export interface SpectraSettingsEditorProps {
    * @default undefined — no component picker is drawn
    */
   principalComponents?: PrincipalComponentPanel;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -79,7 +84,8 @@ export interface SpectraSettingsEditorProps {
 export function SpectraSettingsEditor(
   props: SpectraSettingsEditorProps,
 ): ReactElement {
-  const { value, onChange, spectrumIds, principalComponents } = props;
+  const { className, value, onChange, spectrumIds, principalComponents } =
+    props;
   const problems = settingsProblems(value);
 
   function writeProcessor(processor: SpectraProcessorSettings): void {
@@ -91,7 +97,7 @@ export function SpectraSettingsEditor(
   }
 
   return (
-    <div style={PANEL_STYLE}>
+    <div className={className} style={PANEL_STYLE}>
       <SettingsPart
         title="Every spectrum onto one grid"
         summary="What the processor is built with. Until this is settled no two spectra can be compared, and changing it recomputes every one of them."

package/src/spectra/ui/SpectrumSelection.tsx

@@ -1,9 +1,16 @@
 import { Checkbox, InputGroup } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { useState } from 'react';
 
+import {
+  FIELD_STYLE,
+  HELP_STYLE,
+  LABEL_STYLE,
+  SWITCH_STYLE,
+} from './fieldStyles.ts';
+
 /** What {@link SpectrumSelection} edits. */
-export interface SpectrumSelectionProps {
+interface SpectrumSelectionProps {
   /**
    * The ids the stage is asked for.
    * @default undefined — every spectrum the processor holds is used
@@ -73,7 +80,7 @@ export function SpectrumSelection(props: SpectrumSelectionProps): ReactElement {
       {boxes.map((id) => (
         <Checkbox
           key={id}
-          style={BOX_STYLE}
+          style={SWITCH_STYLE}
           label={
             held.has(id) ? id : `${id} — not a spectrum the processor holds`
           }
@@ -169,25 +176,3 @@ function toggle(
   }
   return undefined;
 }
-
-const FIELD_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-} as const satisfies CSSProperties;
-
-const LABEL_STYLE = {
-  fontSize: 11,
-  fontWeight: 600,
-  color: 'var(--text-muted, #5b6875)',
-} as const satisfies CSSProperties;
-
-const BOX_STYLE = {
-  margin: 0,
-  fontSize: 12,
-} as const satisfies CSSProperties;
-
-const HELP_STYLE = {
-  fontSize: 11,
-  color: 'var(--text-faint, #8a96a3)',
-} as const satisfies CSSProperties;

package/src/spectra/ui/XWindowFields.tsx

@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+
+import { NumberField } from './NumberField.tsx';
+import type { ScaleRange } from './scaleOptions.ts';
+
+/** What {@link XWindowFields} edits. */
+interface XWindowFieldsProps {
+  /** The stretch of x, as the settings hold it. */
+  value: ScaleRange;
+  /** Called with the one bound that changed, undefined when it was emptied. */
+  onChange: (patch: ScaleRange) => void;
+  /**
+   * Whether the two point numbers are offered beside the two x values.
+   * @default false — only From and To are drawn
+   */
+  withPoints?: boolean;
+}
+
+/**
+ * The bounds of a stretch of x: From and To, and the point numbers that win
+ * over them where the processor resolves the window by index.
+ *
+ * Drawn without a wrapper, so the boxes join whatever row they are put in —
+ * beside a range's name, or beside the number of points of the grid.
+ * @param props - See {@link XWindowFieldsProps}.
+ * @returns The boxes.
+ */
+export function XWindowFields(props: XWindowFieldsProps): ReactElement {
+  const { value, onChange, withPoints = false } = props;
+
+  return (
+    <>
+      <NumberField
+        label="From"
+        value={value.from}
+        placeholder="the first x"
+        onChange={(from) => {
+          onChange({ from });
+        }}
+      />
+      <NumberField
+        label="To"
+        value={value.to}
+        placeholder="the last x"
+        onChange={(to) => {
+          onChange({ to });
+        }}
+      />
+      {withPoints ? (
+        <>
+          <NumberField
+            label="From point"
+            value={value.fromIndex}
+            integer
+            placeholder="0"
+            onChange={(fromIndex) => {
+              onChange({ fromIndex });
+            }}
+          />
+          <NumberField
+            label="To point"
+            value={value.toIndex}
+            integer
+            placeholder="the last point"
+            onChange={(toIndex) => {
+              onChange({ toIndex });
+            }}
+          />
+        </>
+      ) : null}
+    </>
+  );
+}