build(deps): update latest

.github/workflows/chromatic.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: "pnpm/action-setup@v4.1.0"
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.2.0"
+        uses: "actions/setup-node@v4.4.0"
         with:
           node-version: "24.x"
           cache: "pnpm"

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: "pnpm/action-setup@v4.1.0"
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.2.0"
+        uses: "actions/setup-node@v4.4.0"
         with:
           node-version: "24.x"
           cache: "pnpm"

.vscode/react.code-snippets

@@ -20,7 +20,7 @@
     "scope": "typescriptreact",
     "prefix": "rfcs",
     "body": [
-      "import type { Meta, StoryObj } from \"@storybook/react\"",
+      "import type { Meta, StoryObj } from \"@storybook/nextjs\"",
       "",
       "import { ${1:ComponentName} as ${1:ComponentName}Component } from \"./${1:ComponentName}.tsx\"",
       "",

CONTRIBUTING.md

@@ -32,7 +32,7 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= v24.0.0 [(`nvm install 24`)](https://nvm.sh)
-- [pnpm](https://pnpm.io/) v10.10.0 [(`npm install --global corepack@0.32.0 && corepack enable`)](https://github.com/nodejs/corepack)
+- [pnpm](https://pnpm.io/) v10.11.0 [(`npm install --global corepack@0.32.0 && corepack enable`)](https://github.com/nodejs/corepack)
 - [Docker](https://www.docker.com/)
 
 ### Installation

apps/storybook/.storybook/main.ts

@@ -14,11 +14,8 @@ const config: StorybookConfig = {
   ],
   addons: [
     "@chromatic-com/storybook",
-    "@storybook/addon-essentials",
-    "@storybook/addon-storysource",
+    "@storybook/addon-docs",
     "@storybook/addon-a11y",
-    "@storybook/addon-interactions",
-    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/nextjs",

apps/storybook/.storybook/preview.tsx

@@ -2,18 +2,21 @@ import "@repo/config-tailwind/styles.css"
 import "./storybook-css-overrides.css"
 import i18nMessages from "@repo/i18n/translations/en-US.json"
 import { LOCALE_DEFAULT, TIMEZONE } from "@repo/utils/constants"
-import type { Preview } from "@storybook/react"
+import type { Preview } from "@storybook/nextjs"
 import { NextIntlClientProvider } from "next-intl"
 import { ThemeProvider as NextThemeProvider } from "next-themes"
 import React from "react"
 
 const preview: Preview = {
-  globals: {
+  initialGlobals: {
     a11y: {
       manual: true,
     },
   },
   parameters: {
+    docs: {
+      codePanel: true,
+    },
     nextjs: {
       appDirectory: true,
     },

apps/storybook/package.json

@@ -30,15 +30,10 @@
     "@repo/config-typescript": "workspace:*",
     "@chromatic-com/storybook": "catalog:",
     "@playwright/test": "catalog:",
-    "@storybook/addon-essentials": "catalog:",
-    "@storybook/addon-storysource": "catalog:",
+    "@storybook/addon-docs": "catalog:",
     "@storybook/addon-a11y": "catalog:",
-    "@storybook/addon-interactions": "catalog:",
     "@storybook/addon-themes": "catalog:",
-    "@storybook/blocks": "catalog:",
     "@storybook/nextjs": "catalog:",
-    "@storybook/react": "catalog:",
-    "@storybook/test": "catalog:",
     "@storybook/test-runner": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
@@ -48,7 +43,6 @@
     "eslint": "catalog:",
     "start-server-and-test": "catalog:",
     "storybook": "catalog:",
-    "storybook-dark-mode": "catalog:",
     "postcss": "catalog:",
     "tailwindcss": "catalog:",
     "@tailwindcss/postcss": "catalog:",

apps/storybook/stories/Colors.mdx

@@ -1,4 +1,9 @@
-import { Meta, Title, ColorPalette, ColorItem } from "@storybook/blocks"
+import {
+  Meta,
+  Title,
+  ColorPalette,
+  ColorItem,
+} from "@storybook/addon-docs/blocks"
 import tailwindConfig from "@repo/config-tailwind"
 
 <Meta title="Design System/Colors" />

apps/website/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.0.2-slim AS node-pnpm
+FROM node:24.1.0-slim AS node-pnpm
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN npm install --global corepack@0.32.0 && corepack enable

packages/blog/package.json

@@ -43,9 +43,8 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@total-typescript/ts-reset": "catalog:",
-    "@storybook/blocks": "catalog:",
-    "@storybook/react": "catalog:",
-    "@storybook/test": "catalog:",
+    "storybook": "catalog:",
+    "@storybook/nextjs": "catalog:",
     "eslint": "catalog:",
     "postcss": "catalog:",
     "tailwindcss": "catalog:",

packages/blog/src/stories/BlogPostUI.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { BLOG_POST_MOCK } from "../BlogPost.ts"
 import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI.tsx"

packages/blog/src/stories/BlogPosts.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { BLOG_POST_MOCK } from "../BlogPost.ts"
 import { BlogPosts as BlogPostsComponent } from "../BlogPosts.tsx"

packages/ui/package.json

@@ -45,9 +45,8 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@total-typescript/ts-reset": "catalog:",
-    "@storybook/blocks": "catalog:",
-    "@storybook/react": "catalog:",
-    "@storybook/test": "catalog:",
+    "storybook": "catalog:",
+    "@storybook/nextjs": "catalog:",
     "eslint": "catalog:",
     "postcss": "catalog:",
     "tailwindcss": "catalog:",

packages/ui/src/CurriculumVitae/CurriculumVitae.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae.tsx"
 

packages/ui/src/Design/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { expect, fn, userEvent, within } from "@storybook/test"
+import type { Meta, StoryObj } from "@storybook/nextjs"
+import { expect, fn, userEvent, within } from "storybook/test"
 import { FaCheck } from "react-icons/fa"
 
 import type { ButtonLinkProps } from "./Button.tsx"

packages/ui/src/Design/Link/Link.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Link } from "./Link.tsx"
 

packages/ui/src/Design/Spinner/Spinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Spinner } from "./Spinner.tsx"
 

packages/ui/src/Design/Typography/Typography.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import type { TypographyProps } from "./Typography.tsx"
 import { Typography } from "./Typography.tsx"

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound.tsx"
 

packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { expect, fn, userEvent, within } from "@storybook/test"
+import type { Meta, StoryObj } from "@storybook/nextjs"
+import { expect, fn, userEvent, within } from "storybook/test"
 
 import { ErrorServer as ErrorServerComponent } from "./ErrorServer.tsx"
 

packages/ui/src/Home/About/About.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { About as AboutComponent } from "./About.tsx"
 

packages/ui/src/Home/Interests/Interests.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Interests as InterestsComponent } from "./Interests.tsx"
 

packages/ui/src/Home/OpenSource/OpenSource.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { OpenSource as OpenSourceComponent } from "./OpenSource.tsx"
 

packages/ui/src/Home/Portfolio/Portfolio.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Portfolio as PortfolioComponent } from "./Portfolio.tsx"
 

packages/ui/src/Home/Skills/Skills.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Skills as SkillsComponent } from "./Skills.tsx"
 

packages/ui/src/Layout/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Footer as FooterComponent } from "./Footer.tsx"
 

packages/ui/src/Layout/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
 import { Header as HeaderComponent } from "./Header.tsx"
 

pnpm-workspace.yaml

@@ -17,7 +17,7 @@ catalog:
   "react": "19.1.0"
   "react-dom": "19.1.0"
   "react-icons": "5.5.0"
-  "@types/react": "19.1.4"
+  "@types/react": "19.1.6"
   "@types/react-dom": "19.1.5"
 
   # Blog
@@ -37,23 +37,23 @@ catalog:
   # Markdown Lint
   "markdownlint-cli2": "0.18.1"
   "markdownlint": "0.38.0"
-  "markdownlint-rule-relative-links": "4.1.0"
+  "markdownlint-rule-relative-links": "4.2.0"
 
   # TypeScript
   "typescript": "5.8.3"
   "@total-typescript/ts-reset": "0.6.1"
-  "@types/node": "22.15.20"
+  "@types/node": "22.15.24"
 
   # ESLint
-  "globals": "16.1.0"
-  "typescript-eslint": "8.32.1"
+  "globals": "16.2.0"
+  "typescript-eslint": "8.33.0"
   "@eslint/eslintrc": "3.3.1"
   "eslint": "9.27.0"
   "eslint-config-conventions": "19.2.0"
   "eslint-plugin-promise": "7.2.1"
   "eslint-plugin-unicorn": "59.0.1"
   "eslint-config-next": *next
-  "eslint-plugin-import-x": "4.12.2"
+  "eslint-plugin-import-x": "4.13.3"
 
   # Prettier
   "prettier": "3.5.3"
@@ -61,20 +61,14 @@ catalog:
   "editorconfig-checker": "6.0.1"
 
   # Storybook
-  "storybook": &storybook "8.6.14"
-  "@storybook/addon-essentials": *storybook
-  "@storybook/addon-storysource": *storybook
+  "storybook": &storybook "9.0.0"
+  "@storybook/addon-docs": *storybook
   "@storybook/addon-a11y": *storybook
-  "@storybook/addon-interactions": *storybook
-  "@storybook/blocks": *storybook
   "@storybook/nextjs": *storybook
-  "@storybook/react": *storybook
-  "@storybook/test": *storybook
   "@storybook/addon-themes": *storybook
   "@storybook/test-runner": "0.22.0"
-  "@chromatic-com/storybook": "3.2.6"
-  "chromatic": "11.28.2"
-  "storybook-dark-mode": "4.0.2"
+  "@chromatic-com/storybook": "4.0.0"
+  "chromatic": "12.0.0"
 
   # Testing
   "playwright": &playwright "1.52.0"
@@ -83,10 +77,10 @@ catalog:
   "start-server-and-test": "2.0.12"
 
   # CSS
-  "postcss": "8.5.3"
-  "@tailwindcss/postcss": "4.1.7"
+  "postcss": "8.5.4"
+  "@tailwindcss/postcss": "4.1.8"
   "@tailwindcss/typography": "0.5.16"
-  "tailwindcss": "4.1.7"
+  "tailwindcss": "4.1.8"
   "tailwind-merge": "3.3.0"
   "clsx": "2.1.1"
   "cva": "1.0.0-beta.4"