react-science 19.0.0 → 19.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "19.0.0",
+  "version": "19.2.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -51,64 +51,66 @@
     "@blueprintjs/core": "^6.0.0",
     "@blueprintjs/icons": "^6.0.0",
     "@blueprintjs/select": "^6.0.0",
-    "fifo-logger": "^1.0.0",
+    "fifo-logger": "^1.0.0 || ^2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tanstack/react-form": "^1.19.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.10",
+    "@tanstack/react-virtual": "^3.13.12",
     "d3-scale-chromatic": "^3.1.0",
-    "react-d3-utils": "^3.1.0",
+    "react-d3-utils": "^3.1.1",
     "react-dropzone": "^14.3.8",
     "react-full-screen": "^1.1.1",
     "react-icons": "^5.5.0",
     "react-inspector": "^6.0.2",
     "tinycolor2": "^1.6.0",
-    "ts-pattern": "^5.7.1"
+    "ts-pattern": "^5.7.1",
+    "zod": "^4.0.17"
   },
   "devDependencies": {
     "@blueprintjs/core": "6.0.0",
     "@blueprintjs/icons": "6.0.0",
     "@blueprintjs/select": "6.0.0",
-    "@floating-ui/react": "^0.27.12",
-    "@playwright/experimental-ct-react": "^1.53.0",
-    "@playwright/test": "^1.53.0",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/react-vite": "^9.0.8",
-    "@tanstack/react-query": "^5.80.7",
+    "@floating-ui/react": "^0.27.13",
+    "@playwright/experimental-ct-react": "^1.54.1",
+    "@playwright/test": "^1.54.1",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
+    "@tanstack/react-query": "^5.83.0",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/node": "^22.15.29",
+    "@types/node": "^24.0.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-react": "^4.5.2",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "biologic-converter": "^0.6.0",
     "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.28.0",
-    "eslint-config-zakodium": "^15.0.1",
-    "eslint-plugin-storybook": "^9.0.8",
-    "fifo-logger": "^1.0.0",
+    "eslint": "^9.31.0",
+    "eslint-config-zakodium": "^16.0.0",
+    "eslint-plugin-storybook": "^9.0.16",
+    "fifo-logger": "^2.0.0",
     "filelist-utils": "^1.11.3",
     "immer": "^10.1.1",
     "jcampconverter": "^11.0.3",
-    "ml-gsd": "^12.1.8",
-    "ml-peak-shape-generator": "^4.1.4",
-    "ml-signal-processing": "^1.2.0",
-    "ml-spectra-processing": "^14.12.0",
+    "ml-gsd": "^13.0.1",
+    "ml-peak-shape-generator": "^4.2.0",
+    "ml-signal-processing": "^2.0.0",
+    "ml-spectra-processing": "^14.13.0",
     "ms-spectrum": "^3.9.0",
     "netcdfjs": "^3.0.0",
     "postcss-styled-syntax": "^0.7.1",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.0.0",
@@ -117,16 +119,16 @@
     "react-plot": "^3.1.0",
     "rimraf": "^6.0.1",
     "spc-parser": "^1.0.0",
-    "storybook": "^9.0.8",
-    "stylelint": "^16.20.0",
+    "storybook": "^9.0.16",
+    "stylelint": "^16.21.1",
     "stylelint-config-standard": "^38.0.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.3",
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4",
     "wdf-parser": "^0.3.0"
   },
   "volta": {
-    "node": "22.16.0"
+    "node": "24.4.0"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/components/color-picker/react-color/helpers/color.ts

@@ -91,10 +91,10 @@ const red = {
 };
 
 export {
-  red,
-  isvalidColorString,
   getContrastingColor,
   isValidHex,
+  isvalidColorString,
+  red,
   simpleCheckForValidColor,
   toState,
 };

package/src/components/form/components/hooks/use_input_id.ts

@@ -0,0 +1,19 @@
+import { useId } from 'react';
+
+/**
+ * Generate an automatic id if needed, joined with name if truthy
+ *
+ * @param id
+ * @param name
+ */
+export function useInputId(
+  id: string | null | undefined,
+  name: string | null | undefined,
+) {
+  const reactId = useId();
+
+  // If id is defined, keep id as finalId for predictable behavior.
+  // If name is defined, join name with reactId to simplify debug in devtools.
+  // Else use reactId.
+  return id ?? (name ? `${name}_${reactId}` : reactId);
+}

package/src/components/form/components/input/checkbox.tsx

@@ -0,0 +1,36 @@
+import type { CheckboxProps as BPCheckboxProps } from '@blueprintjs/core';
+import { Checkbox as BPCheckbox, FormGroup } from '@blueprintjs/core';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { getIntent } from '../../utils/use_intent.js';
+
+type CheckboxProps = Omit<BPCheckboxProps, 'defaultChecked' | 'name'>;
+
+export function Checkbox(props: CheckboxProps) {
+  const { ...rest } = props;
+  const field = useFieldContext<boolean>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    const checked = event.target.checked;
+    return field.handleChange(checked);
+  }
+
+  return (
+    <FormGroup intent={intent} helperText={error}>
+      <BPCheckbox
+        {...rest}
+        name={field.name}
+        value={String(field.state.value)}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/input.tsx

@@ -0,0 +1,37 @@
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { Input as FormGroupInput } from '../input_groups/input.js';
+
+interface InputProps {
+  label?: string;
+  inline?: boolean;
+  required?: boolean;
+  placeholder?: string;
+}
+
+export function Input(props: InputProps) {
+  const { label, required, inline, placeholder } = props;
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    return field.handleChange(event.target.value);
+  }
+
+  return (
+    <FormGroupInput
+      required={required}
+      error={error}
+      formGroupProps={{ label, inline }}
+      value={field.state.value}
+      onChange={onChange}
+      name={field.name}
+      placeholder={placeholder}
+      onBlur={field.handleBlur}
+    />
+  );
+}

package/src/components/form/components/input/numeric_input.tsx

@@ -0,0 +1,49 @@
+import type { NumericInputProps as BPNumericInputProps } from '@blueprintjs/core';
+import { FormGroup, NumericInput as BPNumericInput } from '@blueprintjs/core';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { useFieldId } from '../../utils/use_field_id.js';
+import { getIntent } from '../../utils/use_intent.js';
+
+interface NumericInputProps
+  extends Omit<BPNumericInputProps, 'defaultValue' | 'name'> {
+  label?: string;
+  required?: boolean;
+}
+
+export function NumericInput(props: NumericInputProps) {
+  const { label, required, ...rest } = props;
+  const field = useFieldContext<string>();
+  const id = useFieldId(field.name);
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onChange(_: number, valueAsString: string) {
+    return field.handleChange(valueAsString);
+  }
+
+  return (
+    <FormGroup
+      helperText={error}
+      label={label}
+      labelFor={id}
+      intent={intent}
+      labelInfo={label && required && <span style={{ color: 'red' }}>*</span>}
+    >
+      <BPNumericInput
+        {...rest}
+        name={field.name}
+        value={field.state.value ?? ''}
+        onValueChange={onChange}
+        intent={intent}
+        required={required}
+        id={id}
+        onBlur={field.handleBlur}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/reset_button.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+import { Button } from '../../../button/index.js';
+import { useFormContext } from '../../context/use_ts_form.js';
+
+interface ResetButtonProps {
+  children: ReactNode;
+}
+
+export function ResetButton(props: ResetButtonProps) {
+  const { children } = props;
+  const form = useFormContext();
+
+  return (
+    <Button intent="danger" type="reset" onClick={() => form.reset()}>
+      {children}
+    </Button>
+  );
+}

package/src/components/form/components/input/select.tsx

@@ -0,0 +1,47 @@
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { getIntent } from '../../utils/use_intent.js';
+import { Select as FormGroupSelect } from '../input_groups/select.js';
+import type { SelectId } from '../util/select.js';
+
+interface SelectOptionType {
+  label: string;
+  value: string;
+}
+
+interface SelectProps {
+  label?: string;
+  items: SelectOptionType[];
+  required?: boolean;
+}
+
+export function Select(props: SelectProps) {
+  const { label, items, required } = props;
+
+  const field = useFieldContext<SelectId>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onItemSelect(selected: SelectId | undefined) {
+    if (!selected) return;
+    return field.handleChange(selected);
+  }
+
+  return (
+    <FormGroupSelect
+      formGroupProps={{
+        required,
+        label,
+        intent,
+        helperText: error ?? undefined,
+      }}
+      items={items}
+      onChange={onItemSelect}
+      selected={field.state.value}
+      onBlur={field.handleBlur}
+    />
+  );
+}

package/src/components/form/components/input/submit_button.tsx

@@ -0,0 +1,23 @@
+import { useStore } from '@tanstack/react-form';
+
+import type { ButtonProps } from '../../../button/index.js';
+import { Button } from '../../../button/index.js';
+import { useFormContext } from '../../context/use_ts_form.js';
+
+type SubmitButtonProps = ButtonProps;
+
+export function SubmitButton(props: SubmitButtonProps) {
+  const { intent, ...otherProps } = props;
+
+  const form = useFormContext();
+  const isSubmitting = useStore(form.store, (state) => state.isSubmitting);
+
+  return (
+    <Button
+      {...otherProps}
+      intent={intent ?? 'primary'}
+      type="submit"
+      disabled={isSubmitting}
+    />
+  );
+}

package/src/components/form/components/input/switch.tsx

@@ -0,0 +1,33 @@
+import { FormGroup, Switch as BPSwitch } from '@blueprintjs/core';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+
+interface SwitchProps {
+  label?: string;
+}
+
+export function Switch(props: SwitchProps) {
+  const { label } = props;
+
+  const field = useFieldContext<boolean>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    return field.handleChange(event.target.checked);
+  }
+
+  return (
+    <FormGroup helperText={error ?? undefined} intent="danger">
+      <BPSwitch
+        checked={field.state.value}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+        labelElement={label}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input_groups/input.tsx

@@ -0,0 +1,63 @@
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import type { ChangeEvent } from 'react';
+
+import { useInputId } from '../hooks/use_input_id.js';
+
+interface InputProps {
+  error?: string;
+  required?: boolean;
+  id?: string;
+  name: string;
+  type?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+  value: string;
+  placeholder?: string;
+  formGroupProps: {
+    label?: string;
+    className?: string;
+    inline?: boolean;
+  };
+}
+
+export function Input(props: InputProps) {
+  const {
+    id,
+    required = false,
+    error,
+    formGroupProps: { className, inline = false, label },
+    name,
+    onBlur,
+    onChange,
+    type = 'text',
+    value,
+    placeholder,
+  } = props;
+
+  const finalId = useInputId(id, name);
+
+  return (
+    <FormGroup
+      helperText={error ?? undefined}
+      label={label}
+      labelFor={finalId}
+      intent="danger"
+      style={{ margin: 0, position: 'relative' }}
+      className={className}
+      inline={inline}
+      labelInfo={required && <span style={{ color: 'red' }}>*</span>}
+    >
+      <InputGroup
+        id={finalId}
+        name={name}
+        required={required}
+        type={type}
+        onChange={onChange}
+        onBlur={onBlur}
+        intent={error ? 'danger' : 'none'}
+        value={value}
+        placeholder={placeholder}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input_groups/select.tsx

@@ -0,0 +1,196 @@
+import type { FormGroupProps } from '@blueprintjs/core';
+import { FormGroup } from '@blueprintjs/core';
+import type { SelectProps as BPSelectProps } from '@blueprintjs/select';
+import { Select as BPSelect } from '@blueprintjs/select';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { Button } from '../../../button/index.js';
+import { useInputId } from '../hooks/use_input_id.js';
+import type {
+  GetOptionLabel,
+  GetOptionValue,
+  SelectId,
+  SelectOption,
+  SelectOptionLabel,
+} from '../util/select.js';
+import {
+  getItemRenderer,
+  getSelectLabel,
+  getSelectValue,
+} from '../util/select.js';
+
+type FieldGroupProps = Pick<FormGroupProps, 'label' | 'inline'>;
+
+export interface SelectPropsRenderButtonState<OptionType> {
+  error: string | undefined;
+  selectedOption: OptionType | undefined;
+}
+
+interface SelectCustomProps<OptionType, ID extends SelectId> {
+  renderButton?: (state: SelectPropsRenderButtonState<OptionType>) => ReactNode;
+  onChange?: (selected: ID | undefined, option: OptionType | undefined) => void;
+  id?: string;
+  selected?: ID;
+
+  required?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type SelectGetValue<OptionType, ID extends SelectId> = {
+  /**
+   * Optional if OptionType extends SelectOption<ID>
+   * @default getSelectValue
+   */
+  getValue: GetOptionValue<OptionType, ID>;
+};
+
+type SelectGetValueProps<OptionType, ID extends SelectId> =
+  OptionType extends SelectOption<ID>
+    ? Partial<SelectGetValue<OptionType, ID>>
+    : SelectGetValue<OptionType, ID>;
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type SelectGetLabel<OptionType> = {
+  /**
+   * Optional if OptionType extends SelectOptionLabel
+   * @default getSelectLabel
+   */
+  getLabel: GetOptionLabel<OptionType>;
+};
+
+type SelectGetLabelProps<OptionType> = OptionType extends SelectOptionLabel
+  ? Partial<SelectGetLabel<OptionType>>
+  : SelectGetLabel<OptionType>;
+
+export type SelectProps<OptionType, ID extends SelectId> = FieldGroupProps &
+  Pick<
+    BPSelectProps<OptionType>,
+    | 'placeholder'
+    | 'items'
+    | 'className'
+    | 'disabled'
+    | 'popoverProps'
+    | 'filterable'
+    | 'itemDisabled'
+    | 'itemListPredicate'
+    | 'resetOnClose'
+  > &
+  Pick<ComponentProps<typeof FormGroup>, 'helperText' | 'intent'> &
+  SelectCustomProps<OptionType, ID> &
+  SelectGetValueProps<OptionType, ID> &
+  SelectGetLabelProps<OptionType>;
+
+/**
+ * A wrapper for the BlueprintJS Select component that integrates with react-hook-form.
+ * Store in form the selected value.
+ * Find selected option getValue.
+ * Display options with getLabel.
+ *
+ * @param props
+ * @constructor
+ */
+
+interface RealSelectProps<OptionType, ID extends SelectId>
+  extends Pick<BPSelectProps<OptionType>, 'filterable' | 'items'> {
+  onBlur: () => void;
+  id?: string;
+  renderButton?: (
+    state: SelectPropsRenderButtonState<OptionType>,
+    onBlur: () => void,
+  ) => ReactNode;
+  disabled?: boolean;
+  selected?: ID;
+  onChange?: (selected: ID | undefined, option: OptionType | undefined) => void;
+  getLabel?: GetOptionLabel<OptionType>;
+  getValue?: GetOptionValue<OptionType, ID>;
+  formGroupProps: Pick<
+    ComponentProps<typeof FormGroup>,
+    'helperText' | 'intent' | 'label' | 'className' | 'inline'
+  > & {
+    required?: boolean;
+  };
+}
+
+export function Select<
+  OptionType extends SelectOption<ID>,
+  ID extends SelectId,
+>(props: RealSelectProps<OptionType, ID>): ReactElement {
+  const {
+    renderButton,
+    id,
+    disabled,
+    selected,
+    getLabel: _getLabel,
+    getValue: _getValue,
+    formGroupProps: { className, helperText, inline, intent, label, required },
+    // Weirdly, setting the filterable prop on BP's Select component activates the filter input
+    filterable = false,
+    items,
+    onChange,
+    onBlur,
+  } = props;
+
+  const getValue: GetOptionValue<OptionType, ID> = _getValue ?? getSelectValue;
+  const getLabel: GetOptionLabel<OptionType> = _getLabel ?? getSelectLabel;
+
+  const selectedOption = useMemo(
+    () => items.find((item) => getValue(item) === selected),
+    [getValue, items, selected],
+  );
+
+  const itemRenderer = useMemo(() => {
+    return getItemRenderer<OptionType, ID>({
+      selected,
+      getValue,
+      getLabel,
+    });
+  }, [getLabel, getValue, selected]);
+
+  const onItemSelect = useCallback(
+    (option: OptionType | undefined) => {
+      const value = getValue(option);
+      onChange?.(value, option);
+    },
+    [getValue, onChange],
+  );
+
+  const inputId = useInputId(id, null);
+
+  return (
+    <FormGroup
+      label={label}
+      labelFor={inputId}
+      helperText={helperText}
+      intent={intent}
+      style={{ margin: 0, position: 'relative' }}
+      className={className}
+      inline={inline}
+      disabled={disabled}
+      labelInfo={required && <span style={{ color: 'red' }}>*</span>}
+    >
+      <BPSelect<OptionType>
+        filterable={filterable}
+        items={items}
+        onItemSelect={onItemSelect}
+        itemRenderer={itemRenderer}
+        disabled={disabled}
+      >
+        {renderButton ? (
+          renderButton({ selectedOption, error: undefined }, onBlur)
+        ) : (
+          <Button
+            id={inputId}
+            text={getLabel(selectedOption) || 'Select ...'}
+            endIcon="double-caret-vertical"
+            variant="outlined"
+            intent={intent}
+            disabled={disabled}
+            style={{ minWidth: 180 }}
+            onBlur={onBlur}
+          />
+        )}
+      </BPSelect>
+    </FormGroup>
+  );
+}