feat: installs zustand devtools

package-lock.json

@@ -34,7 +34,7 @@
         "@types/jest": "^27.5.2",
         "@types/jsdom": "^21.1.0",
         "@types/pathfinding": "^0.0.6",
-        "@types/react": "^17.0.62",
+        "@types/react": "^18.2.0",
         "@types/react-dom": "^18.0.11",
         "@types/uuid": "^9.0.2",
         "@types/webpack-env": "^1.18.0",
@@ -58,6 +58,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "recharts": "^2.7.2",
+        "simple-zustand-devtools": "^1.1.0",
         "style-loader": "^3.3.3",
         "svg-url-loader": "^8.0.0",
         "ts-jest": "^29.0.5",
@@ -2830,9 +2831,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.62",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.62.tgz",
-      "integrity": "sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==",
+      "version": "18.2.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.19.tgz",
+      "integrity": "sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -12737,6 +12738,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/simple-zustand-devtools": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-zustand-devtools/-/simple-zustand-devtools-1.1.0.tgz",
+      "integrity": "sha512-Axfcfr9L3YL3kto7aschCQLY2VUlXXMnIVtaTe9Y0qWbNmPsX/y7KsNprmxBZoB0pww5ZGs1u/ohcrvQ3tE6jA==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "@types/react-dom": ">=18.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "zustand": ">=1.0.2"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16684,9 +16698,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.62",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.62.tgz",
-      "integrity": "sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==",
+      "version": "18.2.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.19.tgz",
+      "integrity": "sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -24060,6 +24074,13 @@
         "semver": "^7.5.3"
       }
     },
+    "simple-zustand-devtools": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-zustand-devtools/-/simple-zustand-devtools-1.1.0.tgz",
+      "integrity": "sha512-Axfcfr9L3YL3kto7aschCQLY2VUlXXMnIVtaTe9Y0qWbNmPsX/y7KsNprmxBZoB0pww5ZGs1u/ohcrvQ3tE6jA==",
+      "dev": true,
+      "requires": {}
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",

package.json

@@ -26,7 +26,7 @@
     "@types/jest": "^27.5.2",
     "@types/jsdom": "^21.1.0",
     "@types/pathfinding": "^0.0.6",
-    "@types/react": "^17.0.62",
+    "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "^9.0.2",
     "@types/webpack-env": "^1.18.0",
@@ -50,6 +50,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.7.2",
+    "simple-zustand-devtools": "^1.1.0",
     "style-loader": "^3.3.3",
     "svg-url-loader": "^8.0.0",
     "ts-jest": "^29.0.5",

src/Isoflow.tsx

@@ -20,7 +20,7 @@ import { ItemControlsManager } from './components/ItemControls/ItemControlsManag
 import { UiStateProvider, useUiStateStore } from './stores/uiStateStore';
 
 interface Props {
-  initialScene: SceneInput & {
+  initialScene?: SceneInput & {
     zoom?: number;
   };
   interactionsEnabled?: boolean;
@@ -48,12 +48,14 @@ const App = ({
   });
 
   useEffect(() => {
-    uiActions.setZoom(initialScene.zoom ?? 1);
+    uiActions.setZoom(initialScene?.zoom ?? 1);
     uiActions.setInteractionsEnabled(interactionsEnabledProp);
-  }, [initialScene.zoom, interactionsEnabledProp, sceneActions, uiActions]);
+  }, [initialScene?.zoom, interactionsEnabledProp, sceneActions, uiActions]);
 
   useEffect(() => {
-    sceneActions.setScene(initialScene);
+    if (initialScene) {
+      sceneActions.setScene(initialScene);
+    }
   }, [initialScene, sceneActions]);
 
   return (

src/stores/sceneStore.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useRef, useContext } from 'react';
+import React, { createContext, useRef, useContext, useEffect } from 'react';
 import { createStore, useStore } from 'zustand';
+import { mountStoreDevtool } from 'simple-zustand-devtools'; // eslint-disable-line import/no-extraneous-dependencies
 import { v4 as uuid } from 'uuid';
 import { produce } from 'immer';
 import { NODE_DEFAULTS } from 'src/config';
@@ -89,6 +90,12 @@ export const SceneProvider = ({ children }: ProviderProps) => {
 export function useSceneStore<T>(selector: (state: SceneStore) => T) {
   const store = useContext(SceneContext);
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      mountStoreDevtool('SceneStore', store);
+    }
+  }, [store]);
+
   if (store === null) {
     throw new Error('Missing provider in the tree');
   }

src/stores/uiStateStore.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useRef } from 'react';
+import React, { createContext, useContext, useRef, useEffect } from 'react';
 import { createStore, useStore } from 'zustand';
+import { mountStoreDevtool } from 'simple-zustand-devtools'; // eslint-disable-line import/no-extraneous-dependencies
 import { CoordsUtils, incrementZoom, decrementZoom } from 'src/utils';
 import { UiState, UiStateActions } from 'src/types';
 
@@ -104,6 +105,12 @@ export const UiStateProvider = ({ children }: ProviderProps) => {
 export function useUiStateStore<T>(selector: (state: UiStateStore) => T) {
   const store = useContext(UiStateContext);
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      mountStoreDevtool('UIStore', store);
+    }
+  }, [store]);
+
   if (store === null) {
     throw new Error('Missing provider in the tree');
   }

src/types/ui.ts

@@ -52,7 +52,7 @@ export interface PanMode {
 }
 
 export interface LassoMode {
-  type: 'LASSO'; // TODO: Put these into an enum
+  type: 'LASSO';
   showCursor: boolean;
   selection: {
     startTile: Coords;