Update Node and many package versions

.github/actions/get-node-version/Dockerfile

@@ -1,5 +1,5 @@
 # Image already pulled on runners
-FROM node:16-alpine
+FROM node:20-alpine
 WORKDIR /src
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile

.github/actions/get-node-version/package.json

@@ -5,16 +5,16 @@
     "directory": ".github/actions/get-node-version"
   },
   "engines": {
-    "node": "^16.6.0"
+    "node": "^20.17.0"
   },
   "scripts": {
     "build": "tsc"
   },
   "dependencies": {
     "@actions/core": "^1.4.0",
-    "@types/node": "^16.6.2",
+    "@types/node": "^20.16.0",
     "@types/semver": "^7.3.8",
     "semver": "^7.3.5",
-    "typescript": "^4.4.2"
+    "typescript": "^5.6.2"
   }
 }

.github/actions/get-node-version/yarn.lock

@@ -7,10 +7,12 @@
   resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.4.0.tgz#cf2e6ee317e314b03886adfeb20e448d50d6e524"
   integrity sha512-CGx2ilGq5i7zSLgiiGUtBCxhRRxibJYU6Fim0Q1Wg2aQL2LTnF27zbqZOrxfvFQ55eSBW0L8uVStgtKMpa0Qlg==
 
-"@types/node@^16.6.2":
-  version "16.11.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.10.tgz#2e3ad0a680d96367103d3e670d41c2fed3da61ae"
-  integrity sha512-3aRnHa1KlOEEhJ6+CvyHKK5vE9BcLGjtUpwvqYLRvYNQKMfabu3BwfJaA/SLW8dxe28LsNDjtHwePTuzn3gmOA==
+"@types/node@^20.16.0":
+  version "20.16.7"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.16.7.tgz#0a245bf5805add998a22b8b5adac612ee70190bc"
+  integrity sha512-QkDQjAY3gkvJNcZOWwzy3BN34RweT0OQ9zJyvLCU0kSK22dO2QYh/NHGfbEAYylPYzRB1/iXcojS79wOg5gFSw==
+  dependencies:
+    undici-types "~6.19.2"
 
 "@types/semver@^7.3.8":
   version "7.3.8"
@@ -31,10 +33,15 @@ semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-typescript@^4.4.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
-  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
+typescript@^5.6.2:
+  version "5.6.2"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
+  integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 yallist@^4.0.0:
   version "4.0.0"

.github/workflows/test.yml

@@ -130,7 +130,7 @@ jobs:
 
   chromatic-deployment:
     runs-on: ubuntu-latest
-    needs: ["test", "pre-commit"]
+    needs: ["test", "pre-commit", "get-node-version"]
     strategy:
       matrix:
         projects: [

apps/cyberstorm-remix/Dockerfile

@@ -1,5 +1,5 @@
 # For running @thunderstore/cyberstorm-remix in Docker container.
-FROM node:18-alpine3.17
+FROM node:20-alpine3.19
 RUN apk add --no-cache libc6-compat
 
 WORKDIR /app

apps/cyberstorm-remix/app/root.tsx

@@ -15,8 +15,7 @@ import {
 } from "@remix-run/react";
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
 import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer";
-import * as RadixTooltip from "@radix-ui/react-tooltip";
-const { TooltipProvider } = RadixTooltip;
+import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 
 import { Navigation } from "cyberstorm/navigation/Navigation";
 import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
@@ -171,7 +170,7 @@ function Root() {
         >
           <LinkingProvider value={LinkLibrary}>
             <Toast.Provider toastDuration={10000}>
-              <TooltipProvider delayDuration={300}>
+              <RadixTooltip delayDuration={300}>
                 <div className={styles.root}>
                   {/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
                   <Navigation />
@@ -190,7 +189,7 @@ function Root() {
                   </section>
                   <Footer />
                 </div>
-              </TooltipProvider>
+              </RadixTooltip>
             </Toast.Provider>
           </LinkingProvider>
         </SessionProvider>
@@ -234,7 +233,7 @@ export function ErrorBoundary() {
         <Scripts />
         <LinkingProvider value={LinkLibrary}>
           <Toast.Provider toastDuration={10000}>
-            <TooltipProvider delayDuration={300}>
+            <RadixTooltip delayDuration={300}>
               <div className={styles.root}>
                 {/* <Navigation user={getEmptyUser} /> */}
                 <section className={styles.content}>
@@ -261,7 +260,7 @@ export function ErrorBoundary() {
                 </section>
                 <Footer />
               </div>
-            </TooltipProvider>
+            </RadixTooltip>
           </Toast.Provider>
         </LinkingProvider>
       </body>

apps/cyberstorm-remix/package.json

@@ -12,40 +12,39 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "^2.12.0",
-    "@remix-run/react": "^2.12.0",
-    "@remix-run/serve": "^2.12.0",
-    "@sentry/remix": "^8.7.0",
-    "@sentry/vite-plugin": "^2.22.2",
+    "@remix-run/node": "^2.12.1",
+    "@remix-run/react": "^2.12.1",
+    "@remix-run/serve": "^2.12.1",
+    "@sentry/remix": "^8.31.0",
+    "@sentry/vite-plugin": "^2.22.4",
     "@thunderstore/cyberstorm": "^0.1.0",
     "@thunderstore/cyberstorm-styles": "^0.1.0",
     "@thunderstore/dapper": "^0.1.0",
     "@thunderstore/dapper-ts": "^0.1.0",
     "buffer": "^6.0.3",
-    "isbot": "^4.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "remix-utils": "^7.6.0"
+    "isbot": "^5.1.17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remix-utils": "^7.7.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.12.0",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.38.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.1.6",
+    "@remix-run/dev": "^2.12.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "eslint": "^8.57.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.1.0",
-    "vite-plugin-cjs-interop": "^2.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite": "^5.4.7",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.17.0"
   }
 }

apps/cyberstorm-remix/vite.config.ts

@@ -2,7 +2,6 @@ import { vitePlugin as remix } from "@remix-run/dev";
 import { installGlobals } from "@remix-run/node";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
-import { cjsInterop } from "vite-plugin-cjs-interop";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 installGlobals();
@@ -86,29 +85,6 @@ export default defineConfig({
       },
     }),
     tsconfigPaths(),
-    cjsInterop({
-      // REMIX TODO: Figure out if some of the radix packages can be updated
-      // so that we don't need to do this.
-      // List of CJS dependencies that require interop
-      dependencies: [
-        "@radix-ui/react-checkbox",
-        "@radix-ui/react-dialog",
-        "@radix-ui/react-dropdown-menu",
-        // "@radix-ui/react-radio-group",
-        // "@radix-ui/react-select",
-        // "@radix-ui/react-switch",
-        // "@radix-ui/react-toast",
-        "@radix-ui/react-tooltip",
-        // "@thunderstore/cyberstorm/**",
-        // "some-package",
-        // // Deep imports should be specified separately
-        // "some-package/deep/import",
-        // // But globs are supported
-        // "some-package/foo/*",
-        // // Even deep globs for scoped packages
-        // "@some-scope/**",
-      ],
-    }),
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,
       project: process.env.SENTRY_PROJECT,

apps/cyberstorm-storybook/Dockerfile

@@ -1,7 +1,7 @@
 # For running @thunderstore/cyberstorm-storybook in Docker container.
 
 # Build Storybook to static files
-FROM node:18-alpine3.17 AS builder
+FROM node:20-alpine3.19 AS builder
 WORKDIR /app
 COPY package.json yarn.lock babel.config.js ./
 COPY apps/cyberstorm-storybook ./apps/cyberstorm-storybook

apps/cyberstorm-storybook/package.json

@@ -5,22 +5,26 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-interactions": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
     "@thunderstore/cyberstorm": "^0.1.0",
     "@thunderstore/cyberstorm-styles": "^0.1.0",
     "@thunderstore/dapper": "^0.1.0",
     "@thunderstore/dapper-fake": "^0.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.4.5",
-    "storybook-css-modules": "^1.0.8"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.3.3",
+    "storybook-css-modules": "^1.0.8",
+    "typescript": "^5.6.2"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "engines": {
+    "node": ">=20.17.0"
   }
 }

package.json

@@ -12,34 +12,34 @@
     "plop": "plop"
   },
   "engines": {
-    "node": "^18.14.0"
+    "node": ">=20.17.0"
   },
   "dependencies": {
-    "@microsoft/eslint-formatter-sarif": "^3.0.0",
-    "@preconstruct/cli": "^2.8.1",
-    "@types/node": "^18",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.28.0",
-    "prettier": "^2.7.1",
-    "typescript": "^5.0.4"
+    "@microsoft/eslint-formatter-sarif": "^3.1.0",
+    "@preconstruct/cli": "^2.8.7",
+    "@types/node": "^20.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.36.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
-    "@babel/core": "7.25",
-    "@babel/plugin-transform-runtime": "^7.20.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.20.0",
-    "chromatic": "^6.4.3",
-    "plop": "^3.1.2",
-    "stylelint": "^14.14.0",
+    "@babel/core": "7.25.2",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "chromatic": "^11.10.3",
+    "plop": "^4.0.1",
+    "stylelint": "^16.9.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-order": "^5.0.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
     "typescript-plugin-css-modules": "^5.1.0",
     "webpack": "^5.94.0"
   },

packages/cyberstorm-forms/package.json

@@ -15,26 +15,26 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "@fortawesome/fontawesome-svg-core": "6.2.0",
-    "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@radix-ui/react-select": "^2.0.0",
+    "@babel/runtime": "^7.25.6",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-select": "^2.1.1",
     "@thunderstore/cyberstorm": "*",
     "@thunderstore/dapper": "^0.1.0",
     "@thunderstore/thunderstore-api": "*",
     "@thunderstore/ts-api-react-actions": "*",
     "@thunderstore/ts-api-react-forms": "*",
     "@thunderstore/use-promise": "^0.1.0",
-    "@types/react": "^18.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.48.2",
-    "styled-components": "^6.0.0-rc.5",
-    "zod": "^3.22.2"
+    "@types/react": "^18.3.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "styled-components": "^6.1.13",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "typescript": "^5.1.6",
+    "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0"
   }
 }