Upgrades (#5)

Upgrade package versions to latest, and upgrade some things related to
new versions.

- clean up prettier config, re-add `prettier-plugin-tailwindcss` just to
format `.css` files. (more than just formatting, can catch CSS bugs like
applying two conflicting classes)
- remove `prettier-plugin-css-order` plugin, as it's barely necessary
when 99% of styles are using tailwind
- remove react-refresh eslint plugin. only rule was turned off anyway
because warning was annoying, and rule generally isn't that helpful.
- clean up eslint config to match current recommended style from each
plugin library
- format all files with prettier, not just src
- use new v4 of eslint better tailwind plugin. prev version formatted
classes like ``className={`classes`}``, new version just does
`className="classes"`.
- fix issue i noticed where database pill is not keyboard focusable
- `@base-ui-components` moved out of beta and into v1, and became just
`@base-ui`
- make popover just use children prop instead of trigger, to be
consistent with tooltip
- move stuff that is common to tooltip/popover/autocomplete to tooltip
(expected to be most commonly used)
- manually provide aria label on tooltip target, as baseui doesn't
- wrap global styles in `@layer components` for lower specificity and
easier override in-situ (w/o need for `!`)
- update `useChanged` hook and a useEffect to match new React Compiler
Eslint rules

Author: vincerubinetti

frontend/.gitignore

@@ -7,3 +7,6 @@ dist
 *.local
 
 !.env
+
+tsconfig.tsbuildinfo
+tsconfig.*.tsbuildinfo

frontend/.prettierrc

@@ -1,20 +1,31 @@
 {
-  "plugins": [
-    "@ianvs/prettier-plugin-sort-imports",
-    "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-    "prettier-plugin-css-order"
-  ],
-  "importOrder": [
-    "^react",
-    "^@[a-zA-Z]",
-    "^[a-zA-Z]",
-    "^@/",
-    "^/",
-    "^./",
-    "^../"
-  ],
-  "importOrderParserPlugins": ["typescript", "jsx", "importAssertions"],
-  "cssDeclarationSorterOrder": "smacss",
-  "jsdocCapitalizeDescription": false,
-  "htmlWhitespaceSensitivity": "strict"
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "plugins": ["prettier-plugin-tailwindcss"]
+      }
+    },
+    {
+      "files": "*.*",
+      "options": {
+        "plugins": [
+          "@ianvs/prettier-plugin-sort-imports",
+          "prettier-plugin-jsdoc"
+        ],
+        "importOrder": [
+          "^react",
+          "^@[a-zA-Z]",
+          "^[a-zA-Z]",
+          "^@/",
+          "^/",
+          "^./",
+          "^../"
+        ],
+        "importOrderParserPlugins": ["typescript", "jsx", "importAssertions"],
+        "jsdocCapitalizeDescription": false,
+        "htmlWhitespaceSensitivity": "strict"
+      }
+    }
+  ]
 }

frontend/bun.lock

@@ -1,50 +1,56 @@
 import eslintJs from "@eslint/js";
 import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
 import eslintPluginJsxA11y from "eslint-plugin-jsx-a11y";
-import eslintPluginPrettier from "eslint-plugin-prettier";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
-import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
 import { defineConfig, globalIgnores } from "eslint/config";
 import globals from "globals";
 import typescriptEslint from "typescript-eslint";
 
 export default defineConfig([
   globalIgnores(["dist", "public"]),
+  eslintJs.configs.recommended,
+  typescriptEslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+  eslintPluginReactHooks.configs.flat.recommended,
+  eslintPluginJsxA11y.flatConfigs.recommended,
   {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      eslintJs.configs.recommended,
-      typescriptEslint.configs.recommended,
-      eslintPluginReactHooks.configs["recommended-latest"],
-      eslintPluginReactRefresh.configs.vite,
-      eslintPluginPrettierRecommended,
-      eslintPluginJsxA11y.flatConfigs.recommended,
-    ],
     plugins: {
-      prettier: eslintPluginPrettier,
       "better-tailwindcss": eslintPluginBetterTailwindcss,
     },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     rules: {
-      ...eslintPluginReactHooks.configs.recommended.rules,
-      ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
-      "prettier/prettier": "warn",
+      /** GENERAL */
       "prefer-const": ["error", { destructuring: "all" }],
+
+      /** TYPESCRIPT */
       "@typescript-eslint/no-unused-vars": ["warn", { caughtErrors: "none" }],
       "@typescript-eslint/consistent-type-definitions": ["error", "type"],
       "@typescript-eslint/consistent-type-imports": "error",
-      "react-refresh/only-export-components": ["off"],
+
+      /** ACCESSIBILITY */
+      /** https://github.com/dequelabs/axe-core/issues/4566 */
+      "jsx-a11y/no-noninteractive-tabindex": ["off"],
+      /**
+       * allow <label>some text<AnyComponent/></label> but still catch
+       * <label>just text</label>
+       */
       "jsx-a11y/label-has-associated-control": [
         "error",
-        { controlComponents: ["Select"] },
+        { controlComponents: ["*"] },
+      ],
+
+      /** FORMATTING */
+      "prettier/prettier": "warn",
+      ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
+      /** https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/302 */
+      "better-tailwindcss/enforce-consistent-line-wrapping": [
+        "warn",
+        { strictness: "loose" },
       ],
-      "better-tailwindcss/enforce-consistent-variable-syntax": "warn",
-      "better-tailwindcss/enforce-shorthand-classes": "warn",
-      "better-tailwindcss/no-deprecated-classes": "warn",
     },
     settings: { "better-tailwindcss": { entryPoint: "src/styles.css" } },
   },

frontend/eslint.config.js

@@ -5,62 +5,60 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix",
-    "format": "prettier --write src/",
+    "format": "prettier --write .",
     "test:types": "tsc -b",
     "test:lint": "eslint .",
-    "test:format": "prettier --check src/",
+    "test:format": "prettier --check .",
     "test": "bun run test:types && bun run test:lint && bun run test:format",
     "clean": "rm -rf node_modules dist bun.lock && bun pm cache rm"
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-beta.4",
-    "@reactuses/core": "^6.1.1",
-    "@tailwindcss/vite": "^4.1.16",
-    "@tanstack/react-query": "^5.90.5",
+    "@base-ui/react": "^1.1.0",
+    "@reactuses/core": "^6.1.11",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.19",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
-    "gsap": "^3.13.0",
+    "gsap": "^3.14.2",
     "highlight.js": "^11.11.1",
     "javascript-time-ago": "^2.5.12",
-    "jotai": "^2.15.0",
+    "jotai": "^2.16.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.548.0",
-    "react": "^19.2.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.3",
     "react-children-utilities": "^2.10.0",
-    "react-dom": "^19.2.0",
-    "react-router": "^7.9.4",
+    "react-dom": "^19.2.3",
+    "react-router": "^7.12.0",
     "react-time-ago": "^7.3.5",
-    "tailwindcss": "^4.1.16"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
-    "@eslint/js": "^9.38.0",
+    "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@types/lodash": "^4.17.20",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^5.1.0",
-    "eslint": "^9.38.0",
+    "@types/lodash": "^4.17.23",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-better-tailwindcss": "^3.7.11",
+    "eslint-plugin-better-tailwindcss": "^4.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.4.0",
-    "msw": "^2.11.6",
-    "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.3",
-    "type-fest": "^5.1.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.0.0",
+    "msw": "^2.12.7",
+    "prettier": "^3.8.0",
+    "prettier-plugin-jsdoc": "^1.8.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "type-fest": "^5.4.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
     "vite-plugin-svgr": "^4.5.0"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
   }
-}
+}

frontend/package.json

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.6'
+const PACKAGE_VERSION = '2.12.7'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

frontend/public/mockServiceWorker.js

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import {
   createBrowserRouter,
   Outlet,
@@ -15,8 +16,7 @@ import NotFound from "@/pages/NotFound";
 import Search from "@/pages/Search";
 import Testbed from "@/pages/Testbed";
 import { getDocBbox, glow, scrollTo } from "@/util/dom";
-import { useChanged } from "@/util/hooks";
-import { sleep, waitFor, waitForStable } from "@/util/misc";
+import { waitFor, waitForStable } from "@/util/misc";
 import { redirectPath, redirectState } from "@/util/url";
 
 /** app entrypoint */
@@ -31,13 +31,11 @@ export default function App() {
 /** route layout */
 const Layout = () => {
   /** current route info */
-  const { hash, pathname, search } = useLocation();
+  const { hash } = useLocation();
 
-  /** which parts of route have changed from prev render */
-  const hashChanged = useChanged(hash);
-  const restChanged = useChanged({ pathname, search });
-
-  scrollToHash(hash, hashChanged, restChanged);
+  useEffect(() => {
+    scrollToHash(hash);
+  }, [hash]);
 
   return (
     <>
@@ -109,29 +107,13 @@ const queryClient = new QueryClient({
 });
 
 /** scroll to target of url hash on page */
-const scrollToHash = async (
-  hash: string,
-  hashChanged: boolean,
-  restChanged: boolean,
-) => {
-  if (!hash) return;
-  if (!hashChanged) return;
-
+const scrollToHash = async (hash: string) => {
   /** wait for element to appear */
   const element = await waitFor(() => document.querySelector(hash));
   if (!element) return;
 
-  /**
-   * if not just hash changed (indicating we may be on first load of page or
-   * otherwise expecting significant layout changes)
-   */
-  if (restChanged) {
-    /** wait for layout shifts to stabilize */
-    await waitForStable(() => getDocBbox(element).top);
-    /** scroll down a bit to trigger small header */
-    window.scrollBy(0, 100);
-    await sleep();
-  }
+  /** wait for layout shifts to stabilize */
+  await waitForStable(() => getDocBbox(element).top);
 
   /** scroll to element */
   scrollTo(hash);

frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { useRef } from "react";
 import type { ReactElement, ReactNode } from "react";
-import { Autocomplete as _Autocomplete } from "@base-ui-components/react/autocomplete";
+import { Autocomplete as _Autocomplete } from "@base-ui/react";
 import clsx from "clsx";
 import { Search } from "lucide-react";
-import { padding } from "@/components/Popover";
+import { padding } from "@/components/Tooltip";
 
 type Props = {
   /** search value */
@@ -45,7 +45,7 @@ export default function Autocomplete({
       mode="none"
       openOnInputClick
     >
-      <div className={`relative flex items-center`}>
+      <div className="relative flex items-center">
         <_Autocomplete.Input
           render={
             <input
@@ -61,19 +61,19 @@ export default function Autocomplete({
             />
           }
         />
-        <Search className={`absolute right-0 px-2 text-theme`} />
+        <Search className="absolute right-0 px-2 text-theme" />
       </div>
 
       <_Autocomplete.Portal>
         <_Autocomplete.Positioner collisionPadding={padding}>
           <_Autocomplete.Popup
-            className={`
+            className="
               flex max-h-(--available-height) w-(--anchor-width) grow flex-col
               overflow-y-auto rounded-sm bg-white shadow-thick
-            `}
+            "
           >
             {status && (
-              <_Autocomplete.Status className={`flex gap-2 p-2 leading-none`}>
+              <_Autocomplete.Status className="flex gap-2 p-2 leading-none">
                 {status}
               </_Autocomplete.Status>
             )}
@@ -83,10 +83,10 @@ export default function Autocomplete({
                   <_Autocomplete.Item
                     key={index}
                     value={tag.value}
-                    className={`
+                    className="
                       flex cursor-pointer gap-2 p-2 leading-none
                       data-highlighted:bg-theme/10
-                    `}
+                    "
                     onClick={(event) => {
                       event.preventDefault();
                       /** select option */

frontend/src/components/Autocomplete.tsx

@@ -1,7 +1,6 @@
 import { useId } from "react";
 import type { ReactElement, ReactNode } from "react";
-import { Radio } from "@base-ui-components/react/radio";
-import { RadioGroup } from "@base-ui-components/react/radio-group";
+import { Radio, RadioGroup } from "@base-ui/react";
 import clsx from "clsx";
 import { CheckCircle2 } from "lucide-react";
 
@@ -48,11 +47,11 @@ export default function BigRadios<O extends Option>({
               if (option.value === value) el?.scrollIntoView(true);
             }}
             key={index}
-            className={`
+            className="
               relative flex min-w-50 flex-1 cursor-pointer flex-col items-start!
               gap-2 rounded-sm border border-slate-300 p-2 transition-colors
               hover:bg-slate-100
-            `}
+            "
           >
             <Radio.Root
               value={option.value}
@@ -61,9 +60,7 @@ export default function BigRadios<O extends Option>({
               nativeButton={false}
             />
             {option.value === value && (
-              <CheckCircle2
-                className={`absolute top-2 right-2 text-xl text-green-500`}
-              />
+              <CheckCircle2 className="absolute top-2 right-2 text-xl text-green-500" />
             )}
           </label>
         ))}