Update dependencies

.github/workflows/check-formatting.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-versions: [16.x]
+        node-versions: [20.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/cypress_tests.yml

@@ -12,6 +12,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

.github/workflows/node_version_test.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-versions: [16.x,18.x]
+        node-versions: [20.x,22.x]
 
     steps:
       - uses: actions/checkout@v2

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
-    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
-    addons: [
+	addons: [
 		'storybook-source-link',
 		//'@storybook/addon-storysource',
 		'@storybook/addon-links',
@@ -14,27 +14,28 @@ module.exports = {
 		},
 	],
 
-    framework: {
-        name: "@storybook/react-webpack5",
-        options: {}
-    },
-
-    webpackFinal: async (config, { configType }) => {
-		// split into more chunks
-		config.optimization = {
-			splitChunks: {
-				chunks: 'all',
-				minSize: 30 * 1024, // 30KB
-				maxSize: 1024 * 1024, // 1MB
-			},
-		};
-
-		config.externals = { fs: 'fs' };
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
 
+	webpackFinal: async (config) => {
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			use: [
+				{
+					loader: require.resolve('babel-loader'),
+					options: {
+						presets: [require.resolve('@babel/preset-typescript')],
+					},
+				},
+			],
+		});
+		config.resolve.extensions.push('.ts', '.tsx');
 		return config;
 	},
 
-    typescript: {
+	typescript: {
 		check: false,
 		checkOptions: {},
 		reactDocgen: 'react-docgen-typescript',
@@ -44,13 +45,13 @@ module.exports = {
 		},
 	},
 
-    docs: {
-        autodocs: true
-    },
+	docs: {
+		autodocs: true,
+	},
 	staticDirs: [
 		'../public',
 	],
 	features: {
-    buildStoriesJson: true,
-  }
+		buildStoriesJson: true,
+	},
 };

.storybook/preview.js

@@ -4,8 +4,6 @@ import { themes } from "@storybook/theming";
 
 import "./style.css";
 
-console.log('ReactDOM.render warning is from storybook still using react 17 to render the UI; The components shown are using 18 thoug. See https://github.com/storybookjs/storybook/issues/17831 for more info. The issue will eventually be resolved by upgrading storybook, once it fully supports React 18');
-
 export const parameters = {
   docs: {
     inlineStories: false,
@@ -30,4 +28,4 @@ export const globalTypes = {
       ],
     },
   },
-};
+};

eslint.config.mjs

@@ -0,0 +1,73 @@
+import react from 'eslint-plugin-react';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+	allConfig: js.configs.all,
+});
+
+export default [
+	{
+		ignores: [
+			'**/.cache',
+			'**/.github',
+			'**/.storybook',
+			'**/.vscode',
+			'**/coverage',
+			'**/dist',
+			'**/docs',
+			'**/docs-build',
+			'**/js-docs',
+			'**/node_modules',
+			'**/storybook-static',
+			'**/scripts',
+		],
+	},
+	...compat.extends(
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+		'plugin:storybook/recommended'
+	),
+	{
+		plugins: {
+			react,
+			'@typescript-eslint': typescriptEslint,
+		},
+
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+				...globals.jest,
+			},
+
+			parser: tsParser,
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+		},
+
+		settings: {
+			react: {
+				version: 'detect',
+			},
+		},
+
+		rules: {
+			'react/prop-types': 'off',
+			'@typescript-eslint/no-empty-function': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/no-unsafe-declaration-merging': 'off',
+		},
+	},
+];

package.json

@@ -23,113 +23,121 @@
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
-		"@emotion/css": "^11.13.0",
-		"@emotion/react": "^11.13.3",
-		"@emotion/styled": "^11.13.0",
-		"@mapbox/mapbox-gl-draw": "^1.4.3",
+		"@emotion/css": "^11.13.5",
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.0",
+		"@eslint/eslintrc": "^3.3.0",
+		"@eslint/js": "^9.22.0",
+		"@mapbox/mapbox-gl-draw": "1.4.3",
 		"@mapbox/mapbox-gl-sync-move": "^0.3.1",
-		"@mui/icons-material": "^6.1.1",
-		"@mui/material": "^6.1.1",
-		"@reduxjs/toolkit": "^2.0.1",
+		"@mui/icons-material": "^6.4.7",
+		"@mui/material": "^6.4.7",
+		"@reduxjs/toolkit": "^2.6.1",
 		"@rollup/plugin-json": "^6.1.0",
-		"@tmcw/togeojson": "^5.8.1",
-		"@turf/turf": "^7.1.0",
+		"@testing-library/dom": "^10.4.0",
+		"@tmcw/togeojson": "^7.0.0",
+		"@turf/turf": "^7.2.0",
 		"@types/d3": "^7.4.3",
-		"@types/geojson": "^7946.0.14",
-		"@types/react-color": "^3.0.11",
-		"@types/topojson-client": "^3.1.4",
-		"@xmldom/xmldom": "^0.8.10",
+		"@types/geojson": "^7946.0.16",
+		"@types/react-color": "^3.0.13",
+		"@types/topojson-client": "^3.1.5",
+		"@xmldom/xmldom": "^0.9.8",
 		"csv2geojson": "^5.1.2",
-		"d3": "^7.8.5",
-		"jspdf": "^2.5.1",
-		"maplibre-gl": "^4.5.2",
-		"osm2geojson-lite": "^0.9.4",
+		"d3": "^7.9.0",
+		"globals": "^16.0.0",
+		"jspdf": "^3.0.0",
+		"maplibre-gl": "5.2.0",
+		"osm2geojson-lite": "^1.0.2",
 		"pako": "^2.1.0",
 		"react-color": "^2.19.3",
 		"react-moveable": "^0.56.0",
-		"react-redux": "^9.1.2",
+		"react-redux": "^9.2.0",
 		"redux": "^5.0.1",
 		"redux-thunk": "^3.1.0",
-		"three": "^0.161.0",
+		"three": "^0.174.0",
 		"topojson-client": "^3.1.0",
-		"uuid": "^9.0.1",
+		"uuid": "^11.1.0",
 		"wms-capabilities": "^0.6.0"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-		"@babel/preset-react": "^7.23.3",
+		"@babel/preset-react": "^7.26.3",
+		"@babel/preset-typescript": "^7.26.0",
 		"@bahmutov/cy-rollup": "^2.0.0",
-		"@cfaester/enzyme-adapter-react-18": "^0.7.1",
+		"@cfaester/enzyme-adapter-react-18": "^0.8.0",
 		"@cypress/react18": "^2.0.1",
 		"@rollup/plugin-babel": "^6.0.4",
-		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-commonjs": "^28.0.3",
 		"@rollup/plugin-url": "^8.0.2",
-		"@storybook/addon-actions": "^7.6.13",
-		"@storybook/addon-docs": "^7.6.13",
-		"@storybook/addon-essentials": "^7.6.13",
-		"@storybook/addon-links": "^7.6.13",
-		"@storybook/addons": "^7.6.13",
-		"@storybook/node-logger": "^7.6.13",
-		"@storybook/react": "^7.6.13",
-		"@storybook/react-webpack5": "^7.6.13",
+		"@storybook/addon-actions": "^8.6.4",
+		"@storybook/addon-docs": "^8.6.4",
+		"@storybook/addon-essentials": "^8.6.4",
+		"@storybook/addon-links": "^8.6.4",
+		"@storybook/addons": "^7.6.17",
+		"@storybook/node-logger": "^8.6.4",
+		"@storybook/react": "^8.6.4",
+		"@storybook/react-webpack5": "^8.6.4",
+		"@storybook/test": "^8.6.4",
 		"@storybook/testing-react": "^2.0.1",
-		"@storybook/theming": "^7.6.13",
+		"@storybook/theming": "^8.6.4",
 		"@svgr/rollup": "^8.1.0",
-		"@testing-library/react": "^14.2.1",
+		"@testing-library/react": "^16.2.0",
 		"@types/elasticlunr": "^0.9.5",
 		"@types/enzyme": "^3.10.18",
-		"@types/expect": "^24.3.0",
-		"@types/jest": "^29.5.12",
-		"@types/mapbox__mapbox-gl-draw": "^1.4.6",
+		"@types/expect": "^24.3.2",
+		"@types/jest": "^29.5.14",
+		"@types/mapbox__mapbox-gl-draw": "^1.4.8",
 		"@types/mapbox__point-geometry": "^0.1.4",
-		"@types/mapbox__vector-tile": "^1.3.4",
+		"@types/mapbox__vector-tile": "^2.0.0",
 		"@types/pako": "^2.0.3",
-		"@types/react": "^18.2.55",
-		"@types/react-dom": "^18.2.19",
+		"@types/react": "^19.0.10",
+		"@types/react-dom": "^19.0.4",
 		"@types/sql.js": "^1.4.9",
-		"@types/three": "^0.161.2",
-		"@types/uuid": "^9.0.8",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
+		"@types/three": "^0.174.0",
+		"@types/uuid": "^10.0.0",
+		"@typescript-eslint/eslint-plugin": "^8.26.1",
+		"@typescript-eslint/parser": "^8.26.1",
 		"avj": "^0.0.0",
 		"babel-jest": "^29.7.0",
+		"babel-loader": "^10.0.0",
 		"babel-plugin-inline-react-svg": "^2.0.2",
 		"babel-plugin-styled-components": "^2.1.4",
-		"babel-preset-react-app": "^10.0.1",
-		"cypress": "^13.6.4",
+		"babel-preset-react-app": "^10.1.0",
+		"cypress": "^14.2.0",
 		"elasticlunr": "^0.9.5",
 		"enzyme": "^3.11.0",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-storybook": "^0.6.15",
-		"glob": "^10.3.10",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-react": "^7.37.4",
+		"eslint-plugin-storybook": "^0.11.4",
+		"glob": "^11.0.1",
 		"jest": "29.7.0",
 		"jest-circus": "29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-enzyme": "^7.1.2",
 		"jest-resolve": "29.7.0",
 		"jest-watch-typeahead": "2.2.2",
 		"node-fetch": "^3.3.2",
-		"postcss": "^8.4.35",
-		"prettier": "3.2.5",
+		"postcss": "^8.5.3",
+		"prettier": "3.5.3",
 		"react": "^18.2.0",
 		"react-app-polyfill": "^3.0.0",
 		"react-dev-utils": "^12.0.1",
 		"react-dom": "^18.2.0",
 		"react-draggable": "^4.4.6",
-		"react-i18next": "^14.0.5",
-		"rollup": "^4.11.0",
-		"rollup-plugin-delete": "^2.0.0",
-		"rollup-plugin-import-css": "^3.4.0",
-		"rollup-plugin-node-externals": "^7.0.1",
+		"react-i18next": "^15.4.1",
+		"rollup": "^4.35.0",
+		"rollup-plugin-delete": "^3.0.1",
+		"rollup-plugin-import-css": "^3.5.8",
+		"rollup-plugin-node-externals": "^8.0.0",
 		"rollup-plugin-typescript2": "^0.36.0",
 		"showdown": "^2.1.0",
-		"sql.js": "^1.10.2",
-		"storybook": "^7.6.13",
+		"sql.js": "^1.12.0",
+		"storybook": "^8.6.4",
 		"storybook-source-link": "^4.0.1",
-		"ts-jest": "^29.1.2",
-		"typescript": "^5.3.3"
+		"ts-jest": "^29.2.6",
+		"ts-loader": "^9.5.2",
+		"typescript": "^5.8.2"
 	},
 	"jest": {
 		"roots": [
@@ -215,6 +223,6 @@
 		]
 	},
 	"resolutions": {
-		"jackspeak": "2.1.1"
+		"jackspeak": "4.1.0"
 	}
 }