Merge pull request #1410 from silx-kit/deps

Upgrade dependencies, including zustand

apps/demo/package.json

@@ -23,19 +23,19 @@
   "dependencies": {
     "@h5web/app": "workspace:*",
     "@h5web/h5wasm": "workspace:*",
-    "axios": "1.2.2",
+    "axios": "1.3.4",
     "axios-hooks": "4.0.0",
     "normalize.css": "8.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "14.2.3",
-    "react-icons": "4.7.1",
+    "react-icons": "4.8.0",
     "react-router-dom": "6.3.0"
   },
   "devDependencies": {
-    "@types/node": "^16.18.11",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/node": "^16.18.23",
+    "@types/react": "^17.0.56",
+    "@types/react-dom": "^17.0.19",
     "@types/react-router-dom": "5.3.3",
     "@vitejs/plugin-react": "2.2.0",
     "eslint": "8.28.0",

apps/storybook/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@h5web/lib": "workspace:*",
     "@h5web/shared": "workspace:*",
-    "@react-hookz/web": "22.0.0",
+    "@react-hookz/web": "23.0.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.26",
     "d3-format": "3.1.0",
@@ -33,24 +33,24 @@
     "normalize.css": "8.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "4.7.1",
+    "react-icons": "4.8.0",
     "react-suspense-fetch": "0.4.1",
     "three": "0.141.0"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
-    "@storybook/addon-docs": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-links": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
     "@types/d3-format": "3.0.1",
-    "@types/lodash": "4.14.191",
+    "@types/lodash": "4.14.192",
     "@types/ndarray": "1.0.11",
-    "@types/node": "^16.18.11",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/node": "^16.18.23",
+    "@types/react": "^17.0.56",
+    "@types/react-dom": "^17.0.19",
     "@types/three": "0.141.0",
     "babel-loader": "8.2.5",
     "eslint": "8.28.0",

eslint.shared.js

@@ -99,6 +99,9 @@ module.exports = {
             // Disallow shadowing variables for an outer scope, as this can cause bugs
             // when the inner-scope variable is removed, for instance
             '@typescript-eslint/no-shadow': 'error',
+
+            // Warn on deprecated APIs (TypeScript strikes them out but doesn't report them)
+            'etc/no-deprecated': 'warn',
           },
         }),
         createJestOverride({

package.json

@@ -35,8 +35,8 @@
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
     "@types/cypress-image-snapshot": "3.1.6",
-    "@types/jest": "^29.2.5",
-    "@types/node": "^16.18.11",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^16.18.23",
     "cypress": "12.3.0",
     "cypress-image-snapshot": "4.0.1",
     "cypress-wait-for-stable-dom": "0.1.0",
@@ -46,7 +46,7 @@
     "jest": "29.3.1",
     "jest-transform-stub": "2.0.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.3",
+    "prettier": "2.8.7",
     "ts-jest": "29.0.5",
     "typescript": "4.9.4"
   },

packages/app/package.json

@@ -43,34 +43,34 @@
   },
   "dependencies": {
     "@h5web/lib": "workspace:*",
-    "@react-hookz/web": "22.0.0",
+    "@react-hookz/web": "23.0.0",
     "@react-three/fiber": "7.0.26",
-    "axios": "1.2.2",
+    "axios": "1.3.4",
     "d3-format": "3.1.0",
     "lodash": "4.17.21",
     "ndarray": "1.0.19",
     "ndarray-ops": "1.2.2",
     "react-error-boundary": "3.1.4",
-    "react-icons": "4.7.1",
-    "react-reflex": "4.0.9",
+    "react-icons": "4.8.0",
+    "react-reflex": "4.0.12",
     "react-slider": "2.0.4",
     "react-suspense-fetch": "0.4.1",
     "three": "0.141.0",
-    "zustand": "4.1.5"
+    "zustand": "4.3.7"
   },
   "devDependencies": {
     "@h5web/shared": "workspace:*",
-    "@rollup/plugin-alias": "4.0.2",
+    "@rollup/plugin-alias": "4.0.3",
     "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.4.3",
     "@types/d3-format": "3.0.1",
-    "@types/lodash": "4.14.191",
+    "@types/lodash": "4.14.192",
     "@types/ndarray": "1.0.11",
-    "@types/node": "^16.18.11",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/node": "^16.18.23",
+    "@types/react": "^17.0.56",
+    "@types/react-dom": "^17.0.19",
     "@types/react-slider": "1.3.1",
     "@types/testing-library__jest-dom": "5.14.5",
     "@vitejs/plugin-react": "2.2.0",

packages/app/src/App.tsx

@@ -28,8 +28,8 @@ interface Props {
 
 function App(props: Props) {
   const {
-    explorerOpen = true,
-    sidebarOpen: initialSidebarOpen = explorerOpen,
+    explorerOpen = true, // eslint-disable-line etc/no-deprecated
+    sidebarOpen: initialSidebarOpen = explorerOpen, // eslint-disable-line etc/no-deprecated
     initialPath = '/',
     getFeedbackURL,
     disableDarkMode,

packages/app/src/vis-packs/core/complex/config.tsx

@@ -1,6 +1,6 @@
+import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
-import create from 'zustand';
-import createContext from 'zustand/context';
+import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
@@ -11,8 +11,8 @@ export interface ComplexConfig {
   setVisType: (visType: ComplexVisType) => void;
 }
 
-function createStore() {
-  return create<ComplexConfig>()(
+function createComplexConfigStore() {
+  return createStore<ComplexConfig>()(
     persist(
       (set) => ({
         visType: ComplexVisType.Amplitude,
@@ -26,10 +26,18 @@ function createStore() {
   );
 }
 
-const { Provider, useStore } = createContext<StoreApi<ComplexConfig>>();
-export { useStore as useComplexConfig };
+const StoreContext = createContext({} as StoreApi<ComplexConfig>);
 
 export function ComplexConfigProvider(props: ConfigProviderProps) {
   const { children } = props;
-  return <Provider createStore={createStore}>{children}</Provider>;
+
+  const [store] = useState(createComplexConfigStore);
+
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
+}
+
+export function useComplexConfig(): ComplexConfig {
+  return useStore(useContext(StoreContext));
 }

packages/app/src/vis-packs/core/complex/lineConfig.tsx

@@ -1,6 +1,6 @@
+import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
-import create from 'zustand';
-import createContext from 'zustand/context';
+import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
@@ -12,8 +12,8 @@ export interface ComplexLineConfig {
   setVisType: (visType: ComplexLineVisType) => void;
 }
 
-function createStore() {
-  return create<ComplexLineConfig>()(
+function createComplexLineConfigStore() {
+  return createStore<ComplexLineConfig>()(
     persist(
       (set) => ({
         visType: ComplexVisType.Amplitude,
@@ -27,10 +27,18 @@ function createStore() {
   );
 }
 
-const { Provider, useStore } = createContext<StoreApi<ComplexLineConfig>>();
-export const useComplexLineConfig = useStore;
+const StoreContext = createContext({} as StoreApi<ComplexLineConfig>);
 
 export function ComplexLineConfigProvider(props: ConfigProviderProps) {
   const { children } = props;
-  return <Provider createStore={createStore}>{children}</Provider>;
+
+  const [store] = useState(createComplexLineConfigStore);
+
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
+}
+
+export function useComplexLineConfig(): ComplexLineConfig {
+  return useStore(useContext(StoreContext));
 }

packages/app/src/vis-packs/core/compound/MappedCompoundMatrixVis.tsx

@@ -54,6 +54,7 @@ function MappedCompoundMatrixVis(props: Props) {
           <MatrixToolbar
             cellWidth={cellWidth}
             isSlice={selection !== undefined}
+            config={config}
             getExportURL={
               getExportURL &&
               ((format) => getExportURL(format, dataset, selection, value))

packages/app/src/vis-packs/core/heatmap/config.tsx

@@ -1,9 +1,9 @@
 import type { CustomDomain } from '@h5web/lib';
 import { isDefined, ScaleType } from '@h5web/shared';
 import { useMap } from '@react-hookz/web';
+import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
-import create from 'zustand';
-import createContext from 'zustand/context';
+import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
@@ -32,8 +32,8 @@ export interface HeatmapConfig {
   toggleYAxisFlip: () => void;
 }
 
-function createStore() {
-  return create<HeatmapConfig>()(
+function createHeatmapConfigStore() {
+  return createStore<HeatmapConfig>()(
     persist(
       (set) => ({
         customDomain: [null, null],
@@ -71,11 +71,16 @@ function createStore() {
   );
 }
 
-const { Provider, useStore } = createContext<StoreApi<HeatmapConfig>>();
+const StoreContext = createContext({} as StoreApi<HeatmapConfig>);
 
 export function HeatmapConfigProvider(props: ConfigProviderProps) {
   const { children } = props;
-  return <Provider createStore={createStore}>{children}</Provider>;
+
+  const [store] = useState(createHeatmapConfigStore);
+
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
 }
 
 export function useHeatmapConfig(
@@ -87,7 +92,7 @@ export function useHeatmapConfig(
     Object.entries(initialSuggestedOpts).filter(([, val]) => isDefined(val))
   );
 
-  const persistedConfig = useStore();
+  const persistedConfig = useStore(useContext(StoreContext));
   const {
     setScaleType: setPersistedScaleType,
     toggleKeepRatio: togglePersistedKeepRatio,

packages/app/src/vis-packs/core/line/config.tsx

@@ -2,9 +2,9 @@ import { CurveType } from '@h5web/lib';
 import { isDefined, ScaleType } from '@h5web/shared';
 import { useMap } from '@react-hookz/web';
 import { omit } from 'lodash';
+import { createContext, useContext, useState } from 'react';
 import type { StoreApi } from 'zustand';
-import create from 'zustand';
-import createContext from 'zustand/context';
+import { createStore, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import type { ConfigProviderProps } from '../../models';
@@ -28,8 +28,8 @@ export interface LineConfig {
   toggleErrors: () => void;
 }
 
-function createStore() {
-  return create<LineConfig>()(
+function createLineConfigStore() {
+  return createStore<LineConfig>()(
     persist(
       (set) => ({
         curveType: CurveType.LineOnly,
@@ -60,11 +60,16 @@ function createStore() {
   );
 }
 
-const { Provider, useStore } = createContext<StoreApi<LineConfig>>();
+const StoreContext = createContext({} as StoreApi<LineConfig>);
 
 export function LineConfigProvider(props: ConfigProviderProps) {
   const { children } = props;
-  return <Provider createStore={createStore}>{children}</Provider>;
+
+  const [store] = useState(createLineConfigStore);
+
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
 }
 
 export function useLineConfig(
@@ -76,7 +81,7 @@ export function useLineConfig(
     Object.entries(initialSuggestedOpts).filter(([, val]) => isDefined(val))
   );
 
-  const persistedConfig = useStore();
+  const persistedConfig = useStore(useContext(StoreContext));
   const {
     setXScaleType: setPersistedXScaleType,
     setYScaleType: setPersistedYScaleType,

packages/app/src/vis-packs/core/matrix/MappedMatrixVis.tsx

@@ -44,6 +44,7 @@ function MappedMatrixVis(props: Props) {
           <MatrixToolbar
             cellWidth={cellWidth}
             isSlice={selection !== undefined}
+            config={config}
             getExportURL={
               getExportURL &&
               ((format) => getExportURL(format, dataset, selection, value))

packages/app/src/vis-packs/core/matrix/MatrixToolbar.tsx

@@ -9,27 +9,27 @@ import {
 import { FiAnchor } from 'react-icons/fi';
 
 import type { ExportFormat, ExportURL } from '../../../providers/models';
-import { useMatrixConfig } from './config';
+import type { MatrixVisConfig } from './config';
 
 const EXPORT_FORMATS: ExportFormat[] = ['npy', 'csv'];
 
 interface Props {
   cellWidth: number;
   isSlice: boolean;
+  config: MatrixVisConfig;
   getExportURL: ((format: ExportFormat) => ExportURL) | undefined;
 }
 
 function MatrixToolbar(props: Props) {
-  const { cellWidth, isSlice, getExportURL } = props;
-
+  const { cellWidth, isSlice, config, getExportURL } = props;
   const {
     sticky,
     toggleSticky,
     customCellWidth,
     setCustomCellWidth,
     notation,
     setNotation,
-  } = useMatrixConfig();
+  } = config;
 
   return (
     <Toolbar>