react-science 6.0.2 → 8.0.0

package/src/app-data/state/producers/plot-view/helpers/zoom.ts

@@ -1,15 +1,15 @@
-import { assert } from '../../../../../components/index';
+import { assert } from '../../../../../components/index.js';
 import {
   getPreferredVariable,
   getVariableByLabel,
-} from '../../../../helpers/variables';
+} from '../../../../helpers/index.js';
 import {
-  AppState,
+  type AppState,
   iterateKindMeasurementsAndView,
-  MeasurementBase,
-  MeasurementKind,
-  Plot2DZoom,
-} from '../../../index';
+  type MeasurementBase,
+  type MeasurementKind,
+  type Plot2DZoom,
+} from '../../../index.js';
 
 export function getInitialZoom(): Plot2DZoom {
   return {

package/src/app-data/state/producers/plot-view/plot-view.ts

@@ -1,7 +1,7 @@
-import { assert } from '../../../../components/index';
-import { AppStateProducer } from '../types';
+import { assert } from '../../../../components/index.js';
+import type { AppStateProducer } from '../types.js';
 
-import { resetZoom } from './helpers/zoom';
+import { resetZoom } from './helpers/zoom.js';
 
 export const plotZoom: AppStateProducer<'PLOT_ZOOM'> = (draft, action) => {
   const { kind, zoom } = action.payload;

package/src/app-data/state/producers/types.ts

@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { AppStateAction } from '../appStateActions';
-import { AppState } from '../index';
+import type { AppStateAction } from '../app_state.actions.js';
+import type { AppState } from '../index.js';
 
 export type ActionType = AppStateAction['type'];
 

package/src/app-data/state/settings/{getEmptyAppSettings.ts → get_empty_app_settings.ts}

@@ -1,4 +1,4 @@
-import { AppSettings } from './AppSettings';
+import { type AppSettings } from './app_settings.js';
 
 export function getEmptyAppSettings(): AppSettings {
   return {

package/src/app-data/state/settings/index.ts

@@ -1,2 +1,2 @@
-export * from './AppSettings';
-export * from './getEmptyAppSettings';
+export * from './app_settings.js';
+export * from './get_empty_app_settings.js';

package/src/app-data/state/view/{AppView.ts → app_view.ts}

@@ -1,5 +1,5 @@
-import { GradientScaleName } from '../../../components/index';
-import type { MeasurementKind } from '../index';
+import { type GradientScaleName } from '../../../components/index.js';
+import type { MeasurementKind } from '../index.js';
 
 export interface AppView {
   selectedKind?: MeasurementKind;

package/src/app-data/state/view/{getEmptyAppView.ts → get_empty_app_view.ts}

@@ -1,4 +1,4 @@
-import { AppView } from './AppView';
+import { type AppView } from './app_view.js';
 
 export function getEmptyAppView(): AppView {
   return {

package/src/app-data/state/view/index.ts

@@ -1,2 +1,2 @@
-export * from './getEmptyAppView';
-export * from './AppView';
+export * from './get_empty_app_view.js';
+export * from './app_view.js';

package/src/components/accordion/{Accordion.tsx → accordion.tsx}

@@ -1,13 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import type {
+  MouseEvent as ReactMouseEvent,
   ReactElement,
   ReactNode,
-  MouseEvent as ReactMouseEvent,
 } from 'react';
 import { useCallback } from 'react';
 
-import { useAccordionContext } from './AccordionContext';
+import { useAccordionContext } from './accordion_context.js';
 
 export interface AccordionProps {
   children?:

package/src/components/accordion/accordion_context.provider.tsx

@@ -0,0 +1,46 @@
+import { type ReactNode, useMemo, useReducer } from 'react';
+
+import { accordionContext, type ContextType } from './accordion_context.js';
+import { reducer } from './accordion_context.state.js';
+
+export function AccordionProvider(props: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, {
+    items: [],
+  });
+
+  const utils = useMemo(
+    () => ({
+      change: (title: string, isOpen: boolean) => {
+        return dispatch({
+          type: 'CHANGE_ITEM',
+          payload: { isOpen, title },
+        });
+      },
+      clear: (except: string) => {
+        return dispatch({ type: 'CLEAR', payload: except });
+      },
+      toggle: (title: string) => {
+        return dispatch({ type: 'TOGGLE', payload: title });
+      },
+      remove: (title: string) => {
+        return dispatch({ type: 'REMOVE_ITEM', payload: title });
+      },
+      create: (title: string, defaultOpened?: boolean) => {
+        const item = { title, isOpen: defaultOpened || false };
+        dispatch({ type: 'CREATE_ITEM', payload: item });
+        return item;
+      },
+    }),
+    [dispatch],
+  );
+
+  const value = useMemo<ContextType>(() => {
+    return [{ items: state.items }, utils];
+  }, [state.items, utils]);
+
+  return (
+    <accordionContext.Provider value={value}>
+      {props.children}
+    </accordionContext.Provider>
+  );
+}

package/src/components/accordion/accordion_context.state.ts

@@ -0,0 +1,82 @@
+import { type Draft, produce } from 'immer';
+import type { Reducer } from 'react';
+
+type ActionType<Action, Payload = void> = Payload extends void
+  ? { type: Action }
+  : { type: Action; payload: Payload };
+
+export type AccordionActions =
+  | ActionType<'TOGGLE', string>
+  | ActionType<'CLEAR', string>
+  | ActionType<'REMOVE_ITEM', string>
+  | ActionType<'CREATE_ITEM', { title: string; isOpen: boolean }>
+  | ActionType<'CHANGE_ITEM', { title: string; isOpen: boolean }>;
+
+export interface AccordionItemState {
+  title: string;
+  isOpen: boolean;
+}
+
+export interface AccordionState {
+  items: AccordionItemState[];
+}
+
+export function getItem(title: string, items: AccordionItemState[]) {
+  return items.find((element) => element.title === title);
+}
+
+export const reducer: Reducer<AccordionState, AccordionActions> = produce(
+  (draft, actions): Draft<AccordionState> => {
+    switch (actions.type) {
+      case 'TOGGLE': {
+        const item = getItem(actions.payload, draft.items);
+
+        if (!item) {
+          draft.items.push({ isOpen: true, title: actions.payload });
+          return draft;
+        }
+
+        item.isOpen = !item.isOpen;
+
+        return draft;
+      }
+      case 'CLEAR': {
+        const item = getItem(actions.payload, draft.items);
+
+        if (!item) {
+          draft.items.push({ isOpen: true, title: actions.payload });
+          return draft;
+        }
+
+        for (const element of draft.items) {
+          element.isOpen = element.title === item.title;
+        }
+
+        return draft;
+      }
+      case 'REMOVE_ITEM': {
+        draft.items = draft.items.filter(
+          (element) => element.title !== actions.payload,
+        );
+
+        return draft;
+      }
+      case 'CREATE_ITEM': {
+        draft.items.push(actions.payload);
+        return draft;
+      }
+      case 'CHANGE_ITEM': {
+        const item = getItem(actions.payload.title, draft.items);
+
+        if (item) {
+          item.isOpen = actions.payload.isOpen;
+        }
+
+        return draft;
+      }
+      default: {
+        return draft;
+      }
+    }
+  },
+);

package/src/components/accordion/accordion_context.ts

@@ -0,0 +1,69 @@
+import { createContext, useContext, useEffect, useMemo } from 'react';
+
+import {
+  type AccordionItemState,
+  type AccordionState,
+  getItem,
+} from './accordion_context.state.js';
+
+export type ContextType = [
+  AccordionContext,
+  {
+    clear: (except: string) => void;
+    toggle: (title: string) => void;
+    remove: (title: string) => void;
+    create: (title: string, defaultOpened?: boolean) => AccordionItemState;
+    change: (title: string, isOpen: boolean) => void;
+  },
+];
+
+type AccordionContext = AccordionState;
+
+export const accordionContext = createContext<ContextType | null>(null);
+
+export function useToggleAccordion() {
+  const context = useContext(accordionContext);
+
+  if (!context) {
+    throw new Error('AccordionContext was not found');
+  }
+
+  const [, utils] = context;
+
+  return useMemo(() => {
+    return {
+      open: (title: string) => utils.change(title, true),
+      close: (title: string) => utils.change(title, false),
+    };
+  }, [utils]);
+}
+
+export function useAccordionContext(title: string, defaultOpened?: boolean) {
+  const context = useContext(accordionContext);
+
+  if (!context) {
+    throw new Error('AccordionContext was not found');
+  }
+
+  const [state, utils] = context;
+
+  useEffect(() => {
+    utils.create(title, defaultOpened);
+    return () => utils.remove(title);
+  }, [defaultOpened, title, utils]);
+
+  const item = getItem(title, state.items);
+
+  return useMemo(
+    () => ({
+      item,
+      utils: {
+        clear: () => utils.clear(title),
+        toggle: () => utils.toggle(title),
+        remove: () => utils.remove(title),
+        create: (defaultOpened?: boolean) => utils.create(title, defaultOpened),
+      },
+    }),
+    [item, title, utils],
+  );
+}

package/src/components/accordion/index.ts

@@ -1,2 +1,7 @@
-export * from './Accordion';
-export * from './AccordionContext';
+export * from './accordion.js';
+export { type AccordionState } from './accordion_context.state.js';
+export {
+  useToggleAccordion,
+  useAccordionContext,
+} from './accordion_context.js';
+export { AccordionProvider } from './accordion_context.provider.js';

package/src/components/button/Button.tsx

@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import {
   AnchorButton as BlueprintAnchorButton,
-  AnchorButtonProps as BlueprintAnchorButtonProps,
+  type AnchorButtonProps as BlueprintAnchorButtonProps,
   Button as BlueprintButton,
-  ButtonProps as BlueprintButtonProps,
+  type ButtonProps as BlueprintButtonProps,
+  Icon,
   Tag,
-  TagProps,
+  type TagProps,
   Tooltip,
-  TooltipProps,
+  type TooltipProps,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { ReactNode } from 'react';
+import { Fragment, type ReactNode } from 'react';
 
 type BlueprintProps = {
   [key in keyof BlueprintButtonProps &
@@ -41,33 +42,45 @@ export function Button(props: ButtonProps) {
       content={content}
       {...otherToolTipProps}
       renderTarget={({ isOpen, ...targetProps }) => (
-        <div style={{ position: 'relative' }}>
-          {tag && (
-            <Tag
-              css={css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                cursor: default;
-                font-size: 0.875em;
-                padding: 2px !important;
-                min-height: 15px;
-                min-width: 15px;
-                line-height: 1em;
-                text-align: center;
-                z-index: 20;
-              `}
-              round
-              intent="success"
-              {...tagProps}
-            >
-              {tag}
-            </Tag>
-          )}
-          <InnerButton {...targetProps} {...buttonProps} style={{}}>
-            {children}
-          </InnerButton>
-        </div>
+        <InnerButton
+          css={css({
+            position: 'relative',
+            '.bp5-icon': !children && {
+              marginRight: '0',
+            },
+          })}
+          {...targetProps}
+          {...buttonProps}
+          icon={
+            <Fragment>
+              <Icon icon={buttonProps.icon} />
+              {tag && (
+                <Tag
+                  css={css`
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    cursor: default;
+                    font-size: 0.875em;
+                    padding: 2px !important;
+                    min-height: 15px;
+                    min-width: 15px;
+                    line-height: 1em;
+                    text-align: center;
+                    z-index: 20;
+                  `}
+                  round
+                  intent="success"
+                  {...tagProps}
+                >
+                  {tag}
+                </Tag>
+              )}
+            </Fragment>
+          }
+        >
+          {children}
+        </InnerButton>
       )}
     />
   );

package/src/components/button/index.ts

@@ -1 +1 @@
-export * from './Button';
+export * from './Button.js';

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,9 +1,12 @@
-import { Popover, PopoverProps } from '@blueprintjs/core';
+import { Popover, type PopoverProps } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
-import FixedColorPreview from '../preview/FixedColorPreview';
-import { ColorPicker, ColorPickerProps } from '../react-color/ColorPicker';
-import * as colorHelper from '../react-color/helpers/color';
+import FixedColorPreview from '../preview/FixedColorPreview.js';
+import {
+  ColorPicker,
+  type ColorPickerProps,
+} from '../react-color/ColorPicker.js';
+import * as colorHelper from '../react-color/helpers/color.js';
 
 interface ColorPickerDropdownProps
   extends Pick<

package/src/components/color-picker/{gradient-select/GradientSelect.tsx → gradient_select/gradient_select.tsx}

@@ -1,30 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import { Button, MenuItem } from '@blueprintjs/core';
-import { ItemRenderer, Select } from '@blueprintjs/select';
+import { type ItemRenderer, Select } from '@blueprintjs/select';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import * as scaleChromatic from 'd3-scale-chromatic';
 import { FaChevronDown } from 'react-icons/fa';
 
-import FixedGradientPreview from '../preview/FixedGradientPreview';
+import FixedGradientPreview from '../preview/FixedGradientPreview.js';
 
-export type GradientScaleName =
-  | 'turbo'
-  | 'viridis'
-  | 'inferno'
-  | 'magma'
-  | 'plasma';
-
-export const fixedGradientScales: Record<
-  GradientScaleName,
-  (t: number) => string
-> = {
-  turbo: scaleChromatic.interpolateTurbo,
-  viridis: scaleChromatic.interpolateViridis,
-  inferno: scaleChromatic.interpolateInferno,
-  magma: scaleChromatic.interpolateMagma,
-  plasma: scaleChromatic.interpolatePlasma,
-};
+import {
+  fixedGradientScales,
+  type GradientScaleName,
+} from './gradient_select.utils.js';
 
 const scaleOptions = Object.keys(fixedGradientScales) as GradientScaleName[];
 
@@ -54,6 +40,7 @@ export interface GradientSelectProps {
   value: GradientScaleName;
   onChange: (value: GradientScaleName) => void;
 }
+
 const renderItem: ItemRenderer<GradientScaleName> = (
   option,
   { handleClick, handleFocus, modifiers },
@@ -81,6 +68,7 @@ const renderItem: ItemRenderer<GradientScaleName> = (
     />
   );
 };
+
 export function GradientSelect(props: GradientSelectProps) {
   const { value, onChange } = props;
   return (

package/src/components/color-picker/gradient_select/gradient_select.utils.ts

@@ -0,0 +1,19 @@
+import * as scaleChromatic from 'd3-scale-chromatic';
+
+export type GradientScaleName =
+  | 'turbo'
+  | 'viridis'
+  | 'inferno'
+  | 'magma'
+  | 'plasma';
+
+export const fixedGradientScales: Record<
+  GradientScaleName,
+  (t: number) => string
+> = {
+  turbo: scaleChromatic.interpolateTurbo,
+  viridis: scaleChromatic.interpolateViridis,
+  inferno: scaleChromatic.interpolateInferno,
+  magma: scaleChromatic.interpolateMagma,
+  plasma: scaleChromatic.interpolatePlasma,
+};

package/src/components/color-picker/gradient_select/index.ts

@@ -0,0 +1,2 @@
+export * from './gradient_select.js';
+export * from './gradient_select.utils.js';

package/src/components/color-picker/index.ts

@@ -1,5 +1,5 @@
-export * from './color-picker-dropdown/ColorPickerDropdown';
-export * from './gradient-select/GradientSelect';
-export * from './preview/ColorPreview';
-export * from './react-color/ColorPicker';
-export * from './palette';
+export * from './color-picker-dropdown/ColorPickerDropdown.js';
+export * from './gradient_select/index.js';
+export * from './preview/ColorPreview.js';
+export * from './react-color/ColorPicker.js';
+export * from './palette.js';

package/src/components/color-picker/preview/ColorPreview.tsx

@@ -1,8 +1,8 @@
-import { ColorConfig } from '../../../app-data/index';
-import { assertUnreachable } from '../../utils/assert';
+import type { ColorConfig } from '../../../app-data/index.js';
+import { assertUnreachable } from '../../utils/assert.js';
 
-import FixedColorPreview from './FixedColorPreview';
-import FixedGradientPreview from './FixedGradientPreview';
+import FixedColorPreview from './FixedColorPreview.js';
+import FixedGradientPreview from './FixedGradientPreview.js';
 
 export interface ColorPreviewProps {
   color: ColorConfig;

package/src/components/color-picker/preview/FixedGradientPreview.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 
 import {
-  GradientScaleName,
   fixedGradientScales,
-} from '../gradient-select/GradientSelect';
+  type GradientScaleName,
+} from '../gradient_select/index.js';
 
 interface FixedGradientPreviewProps {
   gradient: GradientScaleName;

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -1,12 +1,18 @@
-import lodashDebounce from 'lodash/debounce';
-import { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
-
-import { defaultColorPalette } from '../palette';
-
-import { Saturation, Hue, Alpha, CheckBoard } from './common';
-import * as colorHelper from './helpers/color';
-import SketchFields from './sketch/SketchFields';
-import SketchPresetColors from './sketch/SketchPresetColors';
+import lodashDebounce from 'lodash/debounce.js';
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { defaultColorPalette } from '../palette.js';
+
+import { Alpha, CheckBoard, Hue, Saturation } from './common/index.js';
+import * as colorHelper from './helpers/color.js';
+import SketchFields from './sketch/SketchFields.js';
+import SketchPresetColors from './sketch/SketchPresetColors.js';
 
 export interface RGB {
   r: number;

package/src/components/color-picker/react-color/common/{Alpha.jsx → Alpha.tsx}

@@ -1,9 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { useCallback, useRef } from 'react';
 
-import * as alpha from '../helpers/alpha';
+import * as alpha from '../helpers/alpha.js';
 
-import CheckBoard from './CheckBoard';
-import { useOnChange } from './useOnChange';
+import CheckBoard from './CheckBoard.js';
+import { useOnChange } from './useOnChange.js';
 
 const styles = {
   alpha: (borderRadius) => ({

package/src/components/color-picker/react-color/common/{CheckBoard.jsx → CheckBoard.tsx}

@@ -1,6 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { cloneElement, isValidElement } from 'react';
 
-import * as checkBoard from '../helpers/checkBoard';
+import * as checkBoard from '../helpers/checkBoard.js';
 
 const styles = {
   grid: (props) => {

package/src/components/color-picker/react-color/common/{EditableInput.jsx → EditableInput.tsx}

@@ -1,4 +1,7 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 const DEFAULT_ARROW_OFFSET = 1;
 
@@ -22,7 +25,7 @@ const EditableInput = (props) => {
     blurValue: String(props.value).toUpperCase(),
   });
   const inputRef = useRef();
-  const valueRef = useRef(props.value);
+  const valueRef = useRef<number>(props.value);
 
   const inputId = useRef(`rc-editable-input-${idCounter++}`).current;
 
@@ -79,7 +82,7 @@ const EditableInput = (props) => {
       // and update accordingly with a percentage
       // https://github.com/casesandberg/react-color/issues/383
       const value = getNumberValue(e.target.value);
-      const offset = props.arrowOffset || DEFAULT_ARROW_OFFSET;
+      const offset: number = props.arrowOffset || DEFAULT_ARROW_OFFSET;
       if (!Number.isNaN(value) && isValidKeyCode(e.keyCode)) {
         const updatedValue =
           e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
@@ -91,7 +94,7 @@ const EditableInput = (props) => {
   );
 
   const handleDrag = useCallback(
-    (e) => {
+    (e: MouseEvent) => {
       if (props.dragLabel) {
         const newValue = Math.round(valueRef.current + e.movementX);
         if (newValue >= 0 && newValue <= props.dragMax) {

package/src/components/color-picker/react-color/common/{Hue.jsx → Hue.tsx}

@@ -1,8 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { useCallback, useRef } from 'react';
 
-import * as hue from '../helpers/hue';
+import * as hue from '../helpers/hue.js';
 
-import { useOnChange } from './useOnChange';
+import { useOnChange } from './useOnChange.js';
 
 const styles = {
   hue: (borderRadius, boxShadow) => ({