upgrade package versions (#251)

## Description

Upgrades all frontend (site) package versions to latest. A few are
breaking changes, so I went through the associated changelogs/migration
guides and made changes as appropriate or found that we were not
affected. Please just spot check the pages to make sure no behavior has
changed.

## Checklist

- [x] All changes are well summarized
- [x] Check all tests pass
- [x] Check that the website preview looks good
- [x] Update the STRchive version in `CITATION.cff`, format X.Y.Z. If
any major changes, increment Y. If only minor changes, increment Z. If
the breaking change (rare), increment X.
- [x] Ask someone to review this PR

Author: vincerubinetti

site/bun.lock

@@ -11,33 +11,33 @@
     "lint": "prettier **/*.{astro,js,jsx,ts,mdx,mjs,module.css,css,html,md} --write --no-error-on-unmatched-pattern"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.8",
-    "@astrojs/react": "^3.6.2",
-    "@kbox-labs/react-echarts": "^1.4.0",
-    "@reactuses/core": "^5.0.23",
-    "@tanstack/react-table": "^8.20.5",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "astro": "^4.16.3",
+    "@astrojs/mdx": "4.3.3",
+    "@astrojs/react": "4.3.0",
+    "@kbox-labs/react-echarts": "^1.4.2",
+    "@reactuses/core": "^6.0.6",
+    "@tanstack/react-table": "^8.21.3",
+    "astro": "5.12.9",
     "astro-google-analytics": "^1.0.3",
     "clsx": "^2.1.1",
-    "echarts": "^5.5.1",
+    "echarts": "^6.0.0",
     "lodash-es": "^4.17.21",
-    "plotly.js-dist": "^2.35.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
-    "string-strip-html": "^13.4.8",
+    "plotly.js-dist": "^3.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
+    "string-strip-html": "^13.4.13",
     "tippy.js": "^6.3.7",
     "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.6.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-css-order": "^2.1.2",
-    "vite-plugin-svgr": "^4.2.0",
-    "yaml": "^2.6.1"
+    "vite-plugin-svgr": "^4.3.0",
+    "yaml": "^2.8.1"
   }
 }

site/package.json

@@ -1,7 +1,11 @@
 import { cloneElement, createContext, useRef, useState } from "react";
 import { FaXmark } from "react-icons/fa6";
 import clsx from "clsx";
-import { useClickOutside, useEventListener } from "@reactuses/core";
+import {
+  useClickOutside,
+  useEventListener,
+  useScrollLock,
+} from "@reactuses/core";
 import Button from "./Button";
 import classes from "./Dialog.module.css";
 
@@ -11,15 +15,18 @@ const Dialog = ({ trigger, title, children }) => {
   const dialogRef = useRef(null);
   const boxRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [, setLocked] = useScrollLock();
 
   const open = () => {
     setIsOpen(true);
     dialogRef.current?.showModal();
+    setLocked(true);
   };
 
   const close = () => {
     setIsOpen(false);
     dialogRef.current?.close();
+    setLocked(false);
   };
 
   useEventListener("close", () => setIsOpen(false), dialogRef);

site/src/components/Dialog.jsx

@@ -15,7 +15,7 @@ const LineChart = ({
   max = undefined,
   className = "",
 }) => {
-  const ref = useRef();
+  const ref = useRef(null);
 
   /** rows with missing values filtered out */
   const filteredRows = rows.filter(({ values }) =>

site/src/components/LineChart.jsx

@@ -4,7 +4,7 @@ import classes from "./PlotlyChart.module.css";
 
 /** plotly chart that supports any plotly options */
 const PlotlyChart = ({ data, layout, ...props }) => {
-  const ref = useRef();
+  const ref = useRef(null);
 
   useEffect(() => {
     if (!ref.current) return;

site/src/components/PlotlyChart.jsx

@@ -4,7 +4,7 @@ import classes from "./ShowMoreLines.module.css";
 
 /** add "show more/less" control to long lines of content if needed */
 const ShowMoreLines = ({ lines = 2, children }) => {
-  const ref = useRef();
+  const ref = useRef(null);
   /** whether to show the control at all */
   const [show, setShow] = useState(false);
   /** whether to show all content */

site/src/components/ShowMoreLines.jsx

@@ -5,7 +5,7 @@ import classes from "./TextBox.module.css";
 
 /** text input with label */
 const TextBox = ({ label, multi, onChange, ...props }) => {
-  const ref = useRef();
+  const ref = useRef(null);
 
   const Component = multi ? "textarea" : "input";