Update other deps

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

Dockerfile

@@ -2,8 +2,8 @@ FROM node:18 as builder
 WORKDIR /maputnik
 
 # Only copy package.json to prevent npm install from running on every build
-COPY package.json package-lock.json ./
+COPY package.json package-lock.json .npmrc ./
-RUN npm install
+RUN npm ci
 
 # Build maputnik
 COPY . .

README.md

@@ -93,11 +93,6 @@ You can also see the tests as they run or select which suites to run by executin
 npm run cy:open
 ```
 
-
-## Related Projects
-
-- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik.
-
 ## Sponsors
 
 Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.

cypress/e2e/maputnik-driver.ts

@@ -1,3 +1,5 @@
+/// <reference types="cypress-plugin-tab" />
+
 import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikCypressHelper from "./maputnik-cypress-helper";
@@ -14,7 +16,7 @@ const styleFromWindow = (win: Window) => {
 export class MaputnikAssertable<T> extends Assertable<T> {
   shouldEqualToStoredStyle = () =>
     then(
-      new CypressHelper().get.window().then((win) => {
+      new CypressHelper().get.window().then((win: Window) => {
         const style = styleFromWindow(win);
         then(this.chainable).shouldDeepNestedInclude(style);
       })

cypress/e2e/modals.cy.ts

@@ -142,7 +142,7 @@ describe("modals", () => {
       );
       when.click("modal:settings.name");
       then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
       ).shouldInclude({
         "maputnik:openmaptiles_access_token": apiKey,
       });
@@ -156,7 +156,7 @@ describe("modals", () => {
       );
       when.click("modal:settings.name");
       then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
       ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
     });
 

package.json

@@ -23,19 +23,21 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@maplibre/maplibre-gl-geocoder": "^1.5.0",
     "@maplibre/maplibre-gl-inspect": "^1.6.3",
-    "@maplibre/maplibre-gl-style-spec": "^20.1.0",
+    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
-    "@mdi/js": "^6.6.96",
+    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.5.0",
+    "@mdi/react": "^1.6.1",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/parser": "^7.3.1",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
+    "classnames": "^2.5.1",
     "codemirror": "^5.65.2",
     "color": "^4.2.3",
+    "cypress-plugin-tab": "^1.0.5",
     "detect-browser": "^5.3.0",
+    "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "json-stringify-pretty-compact": "^3.0.0",
+    "json-stringify-pretty-compact": "^4.0.0",
     "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash": "^4.17.21",
@@ -45,29 +47,29 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^4.0.0",
+    "maplibre-gl": "^4.1.1",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",
     "prop-types": "^15.8.1",
-    "react": "^16.0.0",
+    "react": "^18.2.0",
-    "react-accessible-accordion": "^4.0.0",
+    "react-accessible-accordion": "^5.0.0",
     "react-aria-menubutton": "^7.0.3",
-    "react-aria-modal": "^4.0.1",
+    "react-aria-modal": "^5.0.2",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.2.0",
     "react-file-reader-input": "^2.0.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^4.3.1",
+    "react-icons": "^5.0.1",
     "react-sortable-hoc": "^2.0.0",
     "reconnecting-websocket": "^4.4.0",
-    "sass": "^1.50.0",
+    "sass": "^1.72.0",
-    "slugify": "^1.6.5",
+    "slugify": "^1.6.6",
     "string-hash": "^1.1.3",
-    "url": "^0.11.0"
+    "url": "^0.11.3"
   },
   "jshintConfig": {
     "esversion": 6
@@ -87,15 +89,15 @@
     }
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.12.15",
+    "@cypress/code-coverage": "^3.12.30",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^5.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.17",
+    "@shellygo/cypress-test-utils": "^2.0.52",
     "@types/codemirror": "^5.60.15",
     "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
     "@types/file-saver": "^2.0.7",
-    "@types/geojson": "^7946.0.13",
+    "@types/geojson": "^7946.0.14",
     "@types/json-to-ast": "^2.1.4",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.clamp": "^4.0.9",
@@ -103,37 +105,37 @@
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/mocha": "^10.0.6",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^16.14.52",
+    "@types/react": "^18.2.67",
-    "@types/react-aria-menubutton": "^6.2.13",
+    "@types/react-aria-menubutton": "^6.2.14",
-    "@types/react-aria-modal": "^4.0.9",
+    "@types/react-aria-modal": "^4.0.10",
-    "@types/react-autocomplete": "^1.8.9",
+    "@types/react-autocomplete": "^1.8.10",
     "@types/react-collapse": "^5.0.4",
-    "@types/react-color": "^3.0.10",
+    "@types/react-color": "^3.0.12",
-    "@types/react-dom": "^16.9.24",
+    "@types/react-dom": "^18.2.22",
     "@types/react-file-reader-input": "^2.0.4",
     "@types/react-icon-base": "^2.1.6",
     "@types/string-hash": "^1.1.3",
-    "@types/uuid": "^9.0.7",
+    "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "cors": "^2.8.5",
-    "cypress": "^13.6.1",
+    "cypress": "^13.7.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.6",
-    "express": "^4.17.3",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^3.2.0",
+    "istanbul-lib-coverage": "^3.2.2",
-    "mocha": "^9.2.2",
+    "mocha": "^10.3.0",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.38",
-    "react-hot-loader": "^4.13.0",
+    "react-hot-loader": "^4.13.1",
-    "stylelint": "^14.6.1",
+    "stylelint": "^16.2.1",
-    "stylelint-config-recommended-scss": "^6.0.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-scss": "^4.2.0",
+    "stylelint-scss": "^6.2.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.3",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.1",
-    "vite": "^5.0.12",
+    "vite": "^5.2.2",
-    "vite-plugin-istanbul": "^5.0.0"
+    "vite-plugin-istanbul": "^6.0.0"
   }
 }

src/components/AppMessagePanel.tsx

@@ -4,7 +4,7 @@ import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
 
 type AppMessagePanelProps = {
   errors?: unknown[]
-  infos?: unknown[]
+  infos?: string[]
   mapStyle?: StyleSpecification
   onLayerSelect?(...args: unknown[]): unknown
   currentLayer?: LayerSpecification

src/components/Block.tsx

@@ -1,10 +1,10 @@
-import React, {SyntheticEvent} from 'react'
+import React, {PropsWithChildren, SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 
-type BlockProps = {
+type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
   label?: string
   action?: React.ReactElement

src/components/FieldDocLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {
-  label: object | string | undefined
+  label: JSX.Element | string | undefined
   fieldSpec?: {
     doc?: string
   }

src/components/Fieldset.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 import generateUniqueId from '../libs/document-uid';
 
-type FieldsetProps = {
+type FieldsetProps = PropsWithChildren & {
   label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,

src/components/FilterEditorBlock.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
-type FilterEditorBlockProps = {
+type FilterEditorBlockProps = PropsWithChildren & {
   onDelete(...args: unknown[]): unknown
 };
 

src/components/LayerListItem.tsx

@@ -139,6 +139,6 @@ class LayerListItem extends React.Component<LayerListItemProps> {
   }
 }
 
-const LayerListItemSortable = SortableElement((props: LayerListItemProps) => <LayerListItem {...props} />);
+const LayerListItemSortable = SortableElement<LayerListItemProps>((props: LayerListItemProps) => <LayerListItem {...props} />);
 
 export default LayerListItemSortable;

src/components/Modal.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';
 
 
-type ModalProps = {
+type ModalProps = PropsWithChildren & {
   "data-wd-key"?: string
   isOpen: boolean
   title: string

src/index.jsx

@@ -1,15 +1,15 @@
 import { IconContext } from "react-icons";
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './favicon.ico'
 import './styles/index.scss'
 import App from './components/App';
 
-ReactDOM.render(
+const root = createRoot(document.querySelector("#app"));
+root.render(
   <IconContext.Provider value={{className: 'react-icons'}}>
     <App/>
-  </IconContext.Provider>,
+  </IconContext.Provider>
-  document.querySelector("#app")
 );
 
 // Hide the loader.