Update JS deps

This updates all the JS deps to the latest versions. Some type changes
had to be made to get the react update happy and some css changes had
to be made to get the tailwind update happy.

Author: JordonPhillips

docs/landing-page/.storybook/main.ts

@@ -5,10 +5,9 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-vite",

docs/landing-page/.storybook/preview.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import "../src/i18n/client.tsx";
 import "../src/index.css";
 
 const preview: Preview = {
   parameters: {
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
     controls: {
       matchers: {
         color: /(background|color)$/i,

docs/landing-page/package-lock.json

@@ -23,48 +23,44 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "i18next": "^23.16.3",
+    "i18next": "^25.7.1",
     "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-http-backend": "^2.6.2",
-    "lucide-react": "^0.554.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.1.0",
-    "tailwind-merge": "^2.5.4",
+    "i18next-http-backend": "^3.0.2",
+    "lucide-react": "^0.555.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-i18next": "^16.3.5",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-onboarding": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.6.14",
-    "@types/node": "^22.7.7",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@storybook/addon-docs": "10.1.4",
+    "@storybook/addon-links": "10.1.4",
+    "@storybook/addon-onboarding": "10.1.4",
+    "@storybook/addon-themes": "10.1.4",
+    "@storybook/react-vite": "10.1.4",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^0.10.1",
-    "globals": "^15.9.0",
+    "eslint-plugin-storybook": "10.1.4",
+    "globals": "^16.5.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "storybook": "^8.6.12",
-    "tailwindcss": "^3.4.14",
-    "tsx": "^4.20.6",
+    "prettier": "^3.7.4",
+    "storybook": "10.1.4",
+    "tailwindcss": "^4.1.17",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.47.0",
-    "vite": "^5.4.21"
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

docs/landing-page/package.json

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

docs/landing-page/postcss.config.js

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import App from "./App";
 

docs/landing-page/src/App.stories.tsx

@@ -17,7 +17,7 @@ function App() {
   return (
     <>
       <TopNavigation />
-      <main className="pt-[var(--nav-offset)]">
+      <main className="pt-(--nav-offset)">
         <Heading serviceExampleRef={serviceExample} />
 
         <SubHeading modelRef={modelRef} />

docs/landing-page/src/App.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { Features } from ".";
 

docs/landing-page/src/components/landing-page/Features/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Footer } from "./";
 

docs/landing-page/src/components/landing-page/Footer/index.stories.tsx

@@ -39,7 +39,7 @@ export const Diagram = () => {
         </CardHeader>
       </Card>
 
-      <SmithyGlow className="mt-20 p-24 bg-[position:center_center] bg-[size:91%_85%]">
+      <SmithyGlow className="mt-20 p-24 bg-position-[center_center] bg-size-[91%_85%]">
         <Card
           variant={"gradient-border"}
           className="bg-smithy-black text-center"