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: [

.github/workflows/visual-diff.yml

@@ -37,6 +37,7 @@ jobs:
   visual-diff:
     name: "Generate visual diffs"
     runs-on: "ubuntu-latest"
+    needs: get-node-version
     steps:
       - name: "Checkout"
         uses: actions/checkout@v4

README.md

@@ -160,3 +160,5 @@ files to your commit and re-run the commit command.
 Pre-commit can be disabled for a single commit with `--no-verify` option, but
 note that CI also runs pre-commit and will fail if any problems are encountered
 at this stage.
+
+## Systems

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": "*",
-    "@remix-run/react": "*",
-    "@remix-run/serve": "*",
-    "@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.9.1",
-    "@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/.storybook/main.js

@@ -1,4 +1,4 @@
-import path from "path";
+import path, { dirname, join } from "path";
 
 export default {
   core: {
@@ -13,9 +13,9 @@ export default {
     },
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
     {
       name: "storybook-css-modules",
       options: {
@@ -27,20 +27,24 @@ export default {
         },
       },
     },
+    getAbsolutePath("@storybook/addon-webpack5-compiler-babel"),
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
   staticDirs: ["../public"],
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
   babel: (config) => ({
     ...config,
     configFile: path.resolve(__dirname, "../../../babel.config.js"),
   }),
   typescript: {
     check: true,
+    reactDocgen: "react-docgen-typescript",
   },
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/cyberstorm-storybook/.storybook/preview.js

@@ -30,3 +30,4 @@ export const decorators = [
     );
   },
 ];
+export const tags = ["autodocs", "autodocs"];

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,29 @@
   "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"
+  },
+  "devDependencies": {
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }