feat(frontend): XState statecharts

Expressing logic in statecharts for complex stateful behaviours should
improve maintainability

We use @xstate/cli to statically analyze statcharts before typechecking

1 files changed, 17 insertions, 13 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index b80e0561..9202542b 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "build": "cross-env MODE=production vite build",
     "serve": "cross-env MODE=development vite serve",
+    "typegen": "xstate typegen \"src/**/*.ts?(x)\"",
     "typecheck": "tsc -p tsconfig.node.json && tsc -p tsconfig.json",
     "lint": "eslint .",
     "lint:ci": "eslint -f json -o build/eslint.json .",
@@ -28,17 +29,17 @@
     "@codemirror/lint": "^6.0.0",
     "@codemirror/search": "^6.2.0",
     "@codemirror/state": "^6.1.1",
-    "@codemirror/view": "^6.2.1",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@codemirror/view": "^6.2.2",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@fontsource/jetbrains-mono": "^4.5.10",
     "@fontsource/roboto": "^4.5.8",
-    "@lezer/common": "^1.0.0",
+    "@lezer/common": "^1.0.1",
     "@lezer/highlight": "^1.0.0",
     "@lezer/lr": "^1.2.3",
-    "@material-icons/svg": "^1.0.32",
-    "@mui/icons-material": "5.10.2",
-    "@mui/material": "5.10.2",
+    "@material-icons/svg": "^1.0.33",
+    "@mui/icons-material": "5.10.3",
+    "@mui/material": "5.10.3",
     "ansi-styles": "^6.1.0",
     "escape-string-regexp": "^5.0.0",
     "lodash-es": "^4.17.21",
@@ -50,6 +51,7 @@
     "notistack": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "xstate": "^4.33.5",
     "zod": "^3.18.0"
   },
   "devDependencies": {
@@ -57,13 +59,15 @@
     "@types/eslint": "^8.4.6",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.7.13",
+    "@types/ms": "^0.7.31",
+    "@types/node": "^18.7.14",
     "@types/prettier": "^2.7.0",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "@vitejs/plugin-react": "^2.0.1",
+    "@xstate/cli": "^0.3.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.23.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -74,14 +78,14 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-mobx": "^0.0.9",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-react": "^7.31.6",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-minifier-terser": "^7.0.0",
     "prettier": "^2.7.1",
     "typescript": "~4.8.2",
     "vite": "^3.0.9",
     "vite-plugin-inject-preload": "^1.1.0",
-    "vite-plugin-pwa": "^0.12.3",
+    "vite-plugin-pwa": "^0.12.6",
     "workbox-window": "^6.5.4"
   }
 }