From de2c4854e2fb09077d1ef8f2482f6a6cee0f15b2 Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Wed, 13 Mar 2024 09:40:03 +0000 Subject: [PATCH 01/10] Upgrade node --- Dockerfile | 2 +- server/phoenix_static_buildpack.config | 2 +- ui/.node-version | 2 +- ui/package-lock.json | 19 ++++++++++++++----- ui/package.json | 2 +- 5 files changed, 18 insertions(+), 9 deletions(-) diff --git a/Dockerfile b/Dockerfile index 1acf55fb..a3cdfacf 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,6 @@ # Largely based on https://github.com/nicbet/docker-phoenix/blob/main/Dockerfile ARG ELIXIR_VERSION=1.16-otp-25 -ARG NODE_VERSION=20.5.0 +ARG NODE_VERSION=20.11.1 FROM node:${NODE_VERSION}-alpine AS node FROM elixir:${ELIXIR_VERSION}-alpine AS setup diff --git a/server/phoenix_static_buildpack.config b/server/phoenix_static_buildpack.config index a37e4408..709882f9 100644 --- a/server/phoenix_static_buildpack.config +++ b/server/phoenix_static_buildpack.config @@ -1,3 +1,3 @@ assets_path=ui clean_cache=true -node_version=20.5.0 \ No newline at end of file +node_version=20.11.1 \ No newline at end of file diff --git a/ui/.node-version b/ui/.node-version index c941ad3d..726a201e 100644 --- a/ui/.node-version +++ b/ui/.node-version @@ -1 +1 @@ -20.5.0 \ No newline at end of file +20.11.1 \ No newline at end of file diff --git a/ui/package-lock.json b/ui/package-lock.json index 5bc349fc..bf1d5aef 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -41,7 +41,7 @@ "@next/bundle-analyzer": "^13.4.12", "@tanstack/react-query-devtools": "^4.32.0", "@types/leaflet": "^1.9.3", - "@types/node": "20.4.5", + "@types/node": "20.11.30", "@types/phoenix": "^1.6.0", "@types/react": "18.2.17", "@types/react-dom": "18.2.7", @@ -3146,10 +3146,13 @@ } }, "node_modules/@types/node": { - "version": "20.4.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz", - "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg==", - "dev": true + "version": "20.11.30", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz", + "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -9875,6 +9878,12 @@ "node": ">=0.10.0" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/unixify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unixify/-/unixify-1.0.0.tgz", diff --git a/ui/package.json b/ui/package.json index f1578be1..b205ce94 100644 --- a/ui/package.json +++ b/ui/package.json @@ -49,7 +49,7 @@ "@next/bundle-analyzer": "^13.4.12", "@tanstack/react-query-devtools": "^4.32.0", "@types/leaflet": "^1.9.3", - "@types/node": "20.4.5", + "@types/node": "20.11.30", "@types/phoenix": "^1.6.0", "@types/react": "18.2.17", "@types/react-dom": "18.2.7", From cedff4440d777bc79de8947b2133093f9116d093 Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Wed, 13 Mar 2024 09:54:23 +0000 Subject: [PATCH 02/10] Upgrade next and react types --- ui/package-lock.json | 176 ++++++++++++++++++------------------------- ui/package.json | 6 +- 2 files changed, 78 insertions(+), 104 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index bf1d5aef..ec0c1894 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -22,7 +22,7 @@ "graphql": "^16.7.1", "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.2", - "next": "13.4.12", + "next": "14.1.4", "phoenix": "^1.7.7", "react": "18.2.0", "react-dom": "18.2.0", @@ -43,8 +43,8 @@ "@types/leaflet": "^1.9.3", "@types/node": "20.11.30", "@types/phoenix": "^1.6.0", - "@types/react": "18.2.17", - "@types/react-dom": "18.2.7", + "@types/react": "18.2.70", + "@types/react-dom": "18.2.22", "@types/video.js": "^7.3.52", "@typescript-eslint/eslint-plugin": "^6.2.0", "eslint": "8.45.0", @@ -2722,9 +2722,9 @@ } }, "node_modules/@next/env": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.12.tgz", - "integrity": "sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ==" + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz", + "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==" }, "node_modules/@next/eslint-plugin-next": { "version": "13.4.12", @@ -2756,9 +2756,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz", - "integrity": "sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz", + "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==", "cpu": [ "arm64" ], @@ -2771,9 +2771,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.12.tgz", - "integrity": "sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz", + "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==", "cpu": [ "x64" ], @@ -2786,9 +2786,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.12.tgz", - "integrity": "sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz", + "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==", "cpu": [ "arm64" ], @@ -2801,9 +2801,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.12.tgz", - "integrity": "sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz", + "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==", "cpu": [ "arm64" ], @@ -2816,9 +2816,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.12.tgz", - "integrity": "sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz", + "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==", "cpu": [ "x64" ], @@ -2831,9 +2831,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.12.tgz", - "integrity": "sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz", + "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==", "cpu": [ "x64" ], @@ -2846,9 +2846,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.12.tgz", - "integrity": "sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz", + "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==", "cpu": [ "arm64" ], @@ -2861,9 +2861,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.12.tgz", - "integrity": "sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz", + "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==", "cpu": [ "ia32" ], @@ -2876,9 +2876,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.12.tgz", - "integrity": "sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz", + "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==", "cpu": [ "x64" ], @@ -3028,9 +3028,9 @@ "dev": true }, "node_modules/@swc/helpers": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", - "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", + "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==", "dependencies": { "tslib": "^2.4.0" } @@ -3171,9 +3171,9 @@ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { - "version": "18.2.17", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.17.tgz", - "integrity": "sha512-u+e7OlgPPh+aryjOm5UJMX32OvB2E3QASOAqVMY6Ahs90djagxwv2ya0IctglNbNTexC12qCSMZG47KPfy1hAA==", + "version": "18.2.70", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz", + "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3181,9 +3181,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", - "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "version": "18.2.22", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz", + "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==", "dev": true, "dependencies": { "@types/react": "*" @@ -4265,9 +4265,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001517", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz", - "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==", + "version": "1.0.30001597", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz", + "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==", "funding": [ { "type": "opencollective", @@ -6085,11 +6085,6 @@ "node": ">=10.13.0" } }, - "node_modules/glob-to-regexp": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", - "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" - }, "node_modules/global": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", @@ -7988,9 +7983,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "funding": [ { "type": "github", @@ -8017,39 +8012,37 @@ "dev": true }, "node_modules/next": { - "version": "13.4.12", - "resolved": "https://registry.npmjs.org/next/-/next-13.4.12.tgz", - "integrity": "sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==", + "version": "14.1.4", + "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz", + "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==", "dependencies": { - "@next/env": "13.4.12", - "@swc/helpers": "0.5.1", + "@next/env": "14.1.4", + "@swc/helpers": "0.5.2", "busboy": "1.6.0", - "caniuse-lite": "^1.0.30001406", - "postcss": "8.4.14", - "styled-jsx": "5.1.1", - "watchpack": "2.4.0", - "zod": "3.21.4" + "caniuse-lite": "^1.0.30001579", + "graceful-fs": "^4.2.11", + "postcss": "8.4.31", + "styled-jsx": "5.1.1" }, "bin": { "next": "dist/bin/next" }, "engines": { - "node": ">=16.8.0" + "node": ">=18.17.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "13.4.12", - "@next/swc-darwin-x64": "13.4.12", - "@next/swc-linux-arm64-gnu": "13.4.12", - "@next/swc-linux-arm64-musl": "13.4.12", - "@next/swc-linux-x64-gnu": "13.4.12", - "@next/swc-linux-x64-musl": "13.4.12", - "@next/swc-win32-arm64-msvc": "13.4.12", - "@next/swc-win32-ia32-msvc": "13.4.12", - "@next/swc-win32-x64-msvc": "13.4.12" + "@next/swc-darwin-arm64": "14.1.4", + "@next/swc-darwin-x64": "14.1.4", + "@next/swc-linux-arm64-gnu": "14.1.4", + "@next/swc-linux-arm64-musl": "14.1.4", + "@next/swc-linux-x64-gnu": "14.1.4", + "@next/swc-linux-x64-musl": "14.1.4", + "@next/swc-win32-arm64-msvc": "14.1.4", + "@next/swc-win32-ia32-msvc": "14.1.4", + "@next/swc-win32-x64-msvc": "14.1.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", - "fibers": ">= 3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.3.0" @@ -8058,9 +8051,6 @@ "@opentelemetry/api": { "optional": true }, - "fibers": { - "optional": true - }, "sass": { "optional": true } @@ -8590,9 +8580,9 @@ } }, "node_modules/postcss": { - "version": "8.4.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", - "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -8601,10 +8591,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -10186,18 +10180,6 @@ "global": "^4.3.1" } }, - "node_modules/watchpack": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", - "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", - "dependencies": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - }, - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -10472,14 +10454,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "node_modules/zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } } } } diff --git a/ui/package.json b/ui/package.json index b205ce94..5b654e03 100644 --- a/ui/package.json +++ b/ui/package.json @@ -30,7 +30,7 @@ "graphql": "^16.7.1", "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.2", - "next": "13.4.12", + "next": "14.1.4", "phoenix": "^1.7.7", "react": "18.2.0", "react-dom": "18.2.0", @@ -51,8 +51,8 @@ "@types/leaflet": "^1.9.3", "@types/node": "20.11.30", "@types/phoenix": "^1.6.0", - "@types/react": "18.2.17", - "@types/react-dom": "18.2.7", + "@types/react": "18.2.70", + "@types/react-dom": "18.2.22", "@types/video.js": "^7.3.52", "@typescript-eslint/eslint-plugin": "^6.2.0", "eslint": "8.45.0", From 0917362a5afabf98abbd69e88cadb36ec5d73dd8 Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Wed, 13 Mar 2024 09:57:46 +0000 Subject: [PATCH 03/10] Upgrade typescript --- ui/package-lock.json | 8 ++++---- ui/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index ec0c1894..1dc0562d 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -55,7 +55,7 @@ "husky": "^9.0.7", "lint-staged": "^15.2.0", "prettier": "3.0.0", - "typescript": "5.1.6" + "typescript": "5.4.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -9817,9 +9817,9 @@ } }, "node_modules/typescript": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", - "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/ui/package.json b/ui/package.json index 5b654e03..9c2c63da 100644 --- a/ui/package.json +++ b/ui/package.json @@ -63,6 +63,6 @@ "husky": "^9.0.7", "lint-staged": "^15.2.0", "prettier": "3.0.0", - "typescript": "5.1.6" + "typescript": "5.4.3" } } From 93dbf825e255240f183380c5ff43145e6f88b839 Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Tue, 19 Mar 2024 14:39:37 +0000 Subject: [PATCH 04/10] Fix types --- ui/src/hooks/useTimestampFetcher.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/hooks/useTimestampFetcher.ts b/ui/src/hooks/useTimestampFetcher.ts index 2f51c207..2fa88106 100644 --- a/ui/src/hooks/useTimestampFetcher.ts +++ b/ui/src/hooks/useTimestampFetcher.ts @@ -43,7 +43,7 @@ export function useTimestampFetcher( useEffect(() => { let currentXhr: XMLHttpRequest | undefined; - let intervalId: NodeJS.Timer | undefined; + let intervalId: NodeJS.Timeout | undefined; const fetchTimestamp = (feed: string) => { const timestampURI = `${S3_BUCKET_BASE}/${feed}/latest.txt`; From a0224274d0a3d6f85d32ab88e74ea294145cac7c Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Tue, 19 Mar 2024 14:40:20 +0000 Subject: [PATCH 05/10] Update tsconfig to latest settings --- ui/tsconfig.json | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/ui/tsconfig.json b/ui/tsconfig.json index e066aa5d..4bbb113e 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -1,15 +1,13 @@ { "compilerOptions": { - "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -17,13 +15,8 @@ "paths": { "@/*": ["./src/*"], "@/public/*": ["./public/*"] - }, - "plugins": [ - { - "name": "next" - } - ] + } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } From c7595e2d48447c0fd73caf77067212e36d66af65 Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Mon, 25 Mar 2024 19:33:56 +0000 Subject: [PATCH 06/10] Upgrade MUI and related styling deps --- ui/package-lock.json | 284 ++++++++++++++++++++++--------------------- ui/package.json | 10 +- 2 files changed, 150 insertions(+), 144 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 1dc0562d..c60c90d1 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9,13 +9,13 @@ "version": "3.0.0", "dependencies": { "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.1", + "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@fontsource/montserrat": "^5.0.5", - "@fontsource/mukta": "^5.0.5", - "@mui/icons-material": "^5.14.1", - "@mui/material": "^5.14.2", + "@fontsource/montserrat": "^5.0.17", + "@fontsource/mukta": "^5.0.19", + "@mui/icons-material": "^5.15.14", + "@mui/material": "^5.15.14", "@tanstack/react-query": "^4.32.0", "clsx": "^2.0.0", "dotenv-cli": "^7.2.1", @@ -1063,11 +1063,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.22.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", - "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", + "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -1170,14 +1170,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "node_modules/@emotion/react": { - "version": "11.11.1", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", - "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.2", + "@emotion/serialize": "^1.1.3", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", "@emotion/utils": "^1.2.1", "@emotion/weak-memoize": "^0.3.1", @@ -1193,9 +1193,9 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz", + "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==", "dependencies": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -1356,15 +1356,49 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", + "dependencies": { + "@floating-ui/dom": "^1.6.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@fontsource/montserrat": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.0.5.tgz", - "integrity": "sha512-kR4hwC44p0GZQsy1oA2X8EdFMg/lC7qwVX9jNgNBQ+uSZXKoV4Vyc1VepcRAcGRKPIgcc/3OC1j7FNQDYpFLJA==" + "version": "5.0.17", + "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.0.17.tgz", + "integrity": "sha512-3V3F8GqeN8wawLmAkAfTCYsBYRKu+JLm6ivWWX/v0dCYYPcwtQX0h5Z8j68N1YumuT75MqrghqU42w9DnFHojQ==" }, "node_modules/@fontsource/mukta": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@fontsource/mukta/-/mukta-5.0.5.tgz", - "integrity": "sha512-XnZ2coh1XKx+hFd9d4K32/nvKUNG/zMiu5a6eiBxLi26v4NbcoNVShVLmeyaVulylsZPBNS9SH/xhX0LpDRWaA==" + "version": "5.0.19", + "resolved": "https://registry.npmjs.org/@fontsource/mukta/-/mukta-5.0.19.tgz", + "integrity": "sha512-SsO4WYvQELAtnxeRjGG2SOElc1P4lltPlpL7UeBFAwDJLITm0Xybp/WBOn2TJb5VDcU3iqj+T7kvxKyH9jYNjw==" }, "node_modules/@graphql-codegen/add": { "version": "5.0.0", @@ -2448,25 +2482,24 @@ "dev": true }, "node_modules/@mui/base": { - "version": "5.0.0-beta.8", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", - "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", - "dependencies": { - "@babel/runtime": "^7.22.6", - "@emotion/is-prop-valid": "^1.2.1", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.1", + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", "@popperjs/core": "^2.11.8", - "clsx": "^1.2.1", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" + "clsx": "^2.1.0", + "prop-types": "^15.8.1" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", @@ -2479,36 +2512,28 @@ } } }, - "node_modules/@mui/base/node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.14.2", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz", - "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz", + "integrity": "sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==", "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "5.14.1", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.1.tgz", - "integrity": "sha512-xV/f26muQqtWzerzOIdGPrXoxp/OKaE2G2Wp9gnmG47mHua5Slup/tMc3fA4ZYUreGGrK6+tT81TEvt1Wsng8Q==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.14.tgz", + "integrity": "sha512-vj/51k7MdFmt+XVw94sl30SCvGx6+wJLsNYjZRgxhS6y3UtnWnypMOsm3Kmg8TN+P0dqwsjy4/fX7B1HufJIhw==", "dependencies": { - "@babel/runtime": "^7.22.6" + "@babel/runtime": "^7.23.9" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@mui/material": "^5.0.0", @@ -2522,19 +2547,19 @@ } }, "node_modules/@mui/material": { - "version": "5.14.2", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz", - "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==", - "dependencies": { - "@babel/runtime": "^7.22.6", - "@mui/base": "5.0.0-beta.8", - "@mui/core-downloads-tracker": "^5.14.2", - "@mui/system": "^5.14.1", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.1", - "@types/react-transition-group": "^4.4.6", - "clsx": "^1.2.1", - "csstype": "^3.1.2", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz", + "integrity": "sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.14", + "@mui/system": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.2.0", "react-transition-group": "^4.4.5" @@ -2544,7 +2569,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2565,21 +2590,13 @@ } } }, - "node_modules/@mui/material/node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@mui/private-theming": { - "version": "5.13.7", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", - "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", "dependencies": { - "@babel/runtime": "^7.22.5", - "@mui/utils": "^5.13.7", + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", "prop-types": "^15.8.1" }, "engines": { @@ -2587,7 +2604,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", @@ -2600,13 +2617,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.13.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", - "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { @@ -2614,7 +2631,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.4.1", @@ -2631,17 +2648,17 @@ } }, "node_modules/@mui/system": { - "version": "5.14.1", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz", - "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==", - "dependencies": { - "@babel/runtime": "^7.22.6", - "@mui/private-theming": "^5.13.7", - "@mui/styled-engine": "^5.13.2", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.1", - "clsx": "^1.2.1", - "csstype": "^3.1.2", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz", + "integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { @@ -2649,7 +2666,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2669,20 +2686,12 @@ } } }, - "node_modules/@mui/system/node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@mui/types": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", - "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", "peerDependencies": { - "@types/react": "*" + "@types/react": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2691,13 +2700,12 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz", - "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/prop-types": "^15.7.5", - "@types/react-is": "^18.2.1", + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -2706,10 +2714,16 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/@next/bundle-analyzer": { @@ -3166,9 +3180,9 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.5", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/react": { "version": "18.2.70", @@ -3189,18 +3203,10 @@ "@types/react": "*" } }, - "node_modules/@types/react-is": { - "version": "18.2.1", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz", - "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", "dependencies": { "@types/react": "*" } @@ -4441,9 +4447,9 @@ } }, "node_modules/clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", "engines": { "node": ">=6" } @@ -4573,9 +4579,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -8793,9 +8799,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", diff --git a/ui/package.json b/ui/package.json index 9c2c63da..e05d4ab9 100644 --- a/ui/package.json +++ b/ui/package.json @@ -17,13 +17,13 @@ }, "dependencies": { "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.1", + "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@fontsource/montserrat": "^5.0.5", - "@fontsource/mukta": "^5.0.5", - "@mui/icons-material": "^5.14.1", - "@mui/material": "^5.14.2", + "@fontsource/montserrat": "^5.0.17", + "@fontsource/mukta": "^5.0.19", + "@mui/icons-material": "^5.15.14", + "@mui/material": "^5.15.14", "@tanstack/react-query": "^4.32.0", "clsx": "^2.0.0", "dotenv-cli": "^7.2.1", From 659818d54da87eb081c20bc9363a0f50f63a516f Mon Sep 17 00:00:00 2001 From: Paul Cretu Date: Mon, 25 Mar 2024 20:18:51 +0000 Subject: [PATCH 07/10] Update MUI setup to latest example using new @mui/material-nextjs package --- ui/package-lock.json | 35 ++++++++++++ ui/package.json | 1 + ui/src/components/Link.tsx | 20 +------ ui/src/pages/_app.tsx | 27 ++++----- ui/src/pages/_document.tsx | 88 ++++++----------------------- ui/src/styles/createEmotionCache.ts | 21 ------- 6 files changed, 66 insertions(+), 126 deletions(-) delete mode 100644 ui/src/styles/createEmotionCache.ts diff --git a/ui/package-lock.json b/ui/package-lock.json index c60c90d1..e0563313 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -16,6 +16,7 @@ "@fontsource/mukta": "^5.0.19", "@mui/icons-material": "^5.15.14", "@mui/material": "^5.15.14", + "@mui/material-nextjs": "^5.15.11", "@tanstack/react-query": "^4.32.0", "clsx": "^2.0.0", "dotenv-cli": "^7.2.1", @@ -2590,6 +2591,40 @@ } } }, + "node_modules/@mui/material-nextjs": { + "version": "5.15.11", + "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.15.11.tgz", + "integrity": "sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/cache": "^11.11.0", + "@emotion/server": "^11.11.0", + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "next": "^13.0.0 || ^14.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/cache": { + "optional": true + }, + "@emotion/server": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/private-theming": { "version": "5.15.14", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", diff --git a/ui/package.json b/ui/package.json index e05d4ab9..a5e6a13f 100644 --- a/ui/package.json +++ b/ui/package.json @@ -24,6 +24,7 @@ "@fontsource/mukta": "^5.0.19", "@mui/icons-material": "^5.15.14", "@mui/material": "^5.15.14", + "@mui/material-nextjs": "^5.15.11", "@tanstack/react-query": "^4.32.0", "clsx": "^2.0.0", "dotenv-cli": "^7.2.1", diff --git a/ui/src/components/Link.tsx b/ui/src/components/Link.tsx index 727c8d68..f73ce264 100644 --- a/ui/src/components/Link.tsx +++ b/ui/src/components/Link.tsx @@ -1,12 +1,12 @@ // Special component that combines nextjs and mui Link into one -// From https://github.com/mui/material-ui/blob/master/examples/material-next-ts/src/Link.tsx +// From https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx import MuiLink, { LinkProps as MuiLinkProps } from "@mui/material/Link"; import { styled } from "@mui/material/styles"; import clsx from "clsx"; import NextLink, { LinkProps as NextLinkProps } from "next/link"; import { useRouter } from "next/router"; -import React from "react"; +import * as React from "react"; // Add support for the sx prop for consistency with the other branches. const Anchor = styled("a")({}); @@ -66,7 +66,7 @@ export type LinkProps = { Omit; // A styled version of the Next.js Link component: -// https://nextjs.org/docs/api-reference/next/link +// https://nextjs.org/docs/pages/api-reference/components/link const Link = React.forwardRef( function Link(props, ref) { const { @@ -92,20 +92,6 @@ const Link = React.forwardRef( [activeClassName]: router.pathname === pathname && activeClassName, }); - const isExternal = - typeof href === "string" && - (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0); - - if (isExternal) { - if (noLinkStyle) { - return ( - - ); - } - - return ; - } - const linkAs = linkAsProp || as; const nextjsProps = { to: href, diff --git a/ui/src/pages/_app.tsx b/ui/src/pages/_app.tsx index 47f2e1b7..e21de31f 100644 --- a/ui/src/pages/_app.tsx +++ b/ui/src/pages/_app.tsx @@ -1,6 +1,6 @@ -import { CacheProvider, EmotionCache } from "@emotion/react"; import CssBaseline from "@mui/material/CssBaseline"; import { ThemeProvider } from "@mui/material/styles"; +import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter"; import { Hydrate, QueryClient, @@ -13,7 +13,6 @@ import Head from "next/head"; import { ReactElement, ReactNode, useState } from "react"; import ReactGA from "react-ga4"; -import createEmotionCache from "@/styles/createEmotionCache"; import theme from "@/styles/theme"; import { GA_TRACKING_ID } from "@/utils/analytics"; @@ -21,27 +20,23 @@ export type NextPageWithLayout

= NextPage & { getLayout?: (page: ReactElement) => ReactNode; }; -export type MyAppProps = AppProps & { +type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; - emotionCache?: EmotionCache; }; if (GA_TRACKING_ID) { ReactGA.initialize(GA_TRACKING_ID); } -// Client-side cache, shared for the whole session of the user in the browser. -// https://github.com/mui/material-ui/blob/master/examples/material-next-ts/pages/_app.tsx -const clientSideEmotionCache = createEmotionCache(); +// App needs to be customized in order to make MUI work with SSR +// https://mui.com/material-ui/integrations/nextjs/#pages-router +// https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx +export default function MyApp(props: AppPropsWithLayout) { + const { Component, pageProps } = props; -export default function MyApp({ - Component, - pageProps, - emotionCache = clientSideEmotionCache, -}: MyAppProps) { // Allow pages to define custom per-page layout - // Based on https://nextjs.org/docs/basic-features/layouts - const getLayout = Component.getLayout || ((page) => page); + // Based on https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript + const getLayout = Component.getLayout ?? ((page) => page); // Configure react-query using the hydration setup // https://react-query.tanstack.com/guides/ssr#using-hydration @@ -59,7 +54,7 @@ export default function MyApp({ return ( - + Orcasound {getLayout()} - + diff --git a/ui/src/pages/_document.tsx b/ui/src/pages/_document.tsx index 95778468..adfac78a 100644 --- a/ui/src/pages/_document.tsx +++ b/ui/src/pages/_document.tsx @@ -1,9 +1,13 @@ -// Document needs to be customized in order to make material-ui work with SSR -// From https://github.com/mui/material-ui/blob/master/examples/material-next-ts/pages/_document.tsx - -import createEmotionServer from "@emotion/server/create-instance"; -import { AppType } from "next/app"; -import Document, { +// Document needs to be customized in order to make MUI work with SSR +// https://mui.com/material-ui/integrations/nextjs/#pages-router +// https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx + +import { + documentGetInitialProps, + DocumentHeadTags, + DocumentHeadTagsProps, +} from "@mui/material-nextjs/v14-pagesRouter"; +import { DocumentContext, DocumentProps, Head, @@ -13,15 +17,11 @@ import Document, { } from "next/document"; import React from "react"; -import { MyAppProps } from "@/pages/_app"; -import createEmotionCache from "@/styles/createEmotionCache"; import theme from "@/styles/theme"; -interface MyDocumentProps extends DocumentProps { - emotionStyleTags: JSX.Element[]; -} - -export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { +export default function MyDocument( + props: DocumentProps & DocumentHeadTagsProps, +) { return ( @@ -38,7 +38,7 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { - {emotionStyleTags} +

@@ -48,63 +48,7 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { ); } -// `getInitialProps` belongs to `_document` (instead of `_app`), -// it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx: DocumentContext) => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render - - const originalRenderPage = ctx.renderPage; - - // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. - // However, be aware that it can have global side effects. - const cache = createEmotionCache(); - const { extractCriticalToChunks } = createEmotionServer(cache); - - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: ( - App: React.ComponentType & MyAppProps>, - ) => - function EnhanceApp(props) { - return ; - }, - }); - - const initialProps = await Document.getInitialProps(ctx); - // This is important. It prevents Emotion to render invalid HTML. - // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 - const emotionStyles = extractCriticalToChunks(initialProps.html); - const emotionStyleTags = emotionStyles.styles.map((style) => ( -