fix: update React.js to v19.2.1 (security release)

Ref: https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

.github/workflows/chromatic.yml

@@ -18,23 +18,23 @@ jobs:
       NEXT_TELEMETRY_DISABLED: "1"
       STORYBOOK_DISABLE_TELEMETRY: "1"
     steps:
-      - uses: "actions/checkout@v5.0.0"
+      - uses: "actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8" # v5.0.0
         with:
           fetch-depth: 0
 
-      - uses: "pnpm/action-setup@v4.1.0"
+      - uses: "pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda" # v4.1.0
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v5.0.0"
+        uses: "actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903" # v6.0.0
         with:
-          node-version: "24.x"
+          node-version: "24.11.1"
           cache: "pnpm"
 
       - name: "Install dependencies"
         run: "pnpm install --frozen-lockfile"
 
       - name: "Run Chromatic"
-        uses: "chromaui/action@latest"
+        uses: "chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6" # latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: "apps/storybook"

.github/workflows/ci.yml

@@ -18,14 +18,14 @@ jobs:
       NEXT_TELEMETRY_DISABLED: "1"
       STORYBOOK_DISABLE_TELEMETRY: "1"
     steps:
-      - uses: "actions/checkout@v5.0.0"
+      - uses: "actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3" # v6.0.0
 
-      - uses: "pnpm/action-setup@v4.1.0"
+      - uses: "pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda" # v4.1.0
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v5.0.0"
+        uses: "actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903" # v6.0.0
         with:
-          node-version: "24.x"
+          node-version: "24.11.1"
           cache: "pnpm"
 
       - name: "Install dependencies"

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
     "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
+    "prettier.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "davidanson.vscode-markdownlint",
     "bradlc.vscode-tailwindcss",

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.wordWrap": "on",
   "prettier.configPath": ".prettierrc.json",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "prettier.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",

CONTRIBUTING.md

@@ -28,7 +28,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.18.2 [(`npm install --global corepack@0.34.0 && corepack enable`)](https://github.com/nodejs/corepack)
+- [pnpm](https://pnpm.io/) v10.24.0 [(`npm install --global corepack@0.34.5 && corepack enable`)](https://github.com/nodejs/corepack)
 - [Docker](https://www.docker.com/)
 
 ### Installation

apps/website/Dockerfile

@@ -1,7 +1,7 @@
-FROM node:24.10.0-slim AS node-pnpm
+FROM node:24.11.1-slim@sha256:0afb7822fac7bf9d7c1bf3b6e6c496dee6b2b64d8dfa365501a3c68e8eba94b2 AS node-pnpm
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install --global corepack@0.34.0 && corepack enable
+RUN npm install --global corepack@0.34.5 && corepack enable
 ENV TURBO_TELEMETRY_DISABLED=1
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV DO_NOT_TRACK=1
@@ -9,7 +9,7 @@ WORKDIR /usr/src/app
 
 FROM node-pnpm AS builder
 COPY ./ ./
-RUN pnpm install --global turbo@2.5.8
+RUN pnpm install --global turbo@2.6.3
 RUN turbo prune @repo/website --docker
 
 FROM node-pnpm AS installer

apps/website/next.config.ts

@@ -11,12 +11,12 @@ const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    turbopackFileSystemCacheForDev: true,
+  },
 }
 
 const withNextIntl = createNextIntlPlugin({

apps/website/package.json

@@ -7,8 +7,8 @@
     "#*": "./*"
   },
   "scripts": {
-    "dev": "next dev --port 3000 --turbopack",
-    "build": "next build --turbopack",
+    "dev": "next dev --port 3000",
+    "build": "next build",
     "start": "next start --port 3000",
     "typegen": "next typegen",
     "lint:eslint": "eslint app --max-warnings 0",

configs/config-tailwind/styles.css

@@ -48,7 +48,7 @@
 
   q,
   blockquote {
-    @apply italic tracking-wider;
+    @apply tracking-wider italic;
   }
   blockquote {
     @apply border-gray-lighter border-l-4 pl-3 italic;

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0-develop",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.18.2+sha512.9fb969fa749b3ade6035e0f109f0b8a60b5d08a1a87fdf72e337da90dcc93336e2280ca4e44f2358a649b83c17959e9993e777c2080879f3801e6f0d999ad3dd",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "engines": {
     "node": ">=24.0.0"
   },

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

@@ -7,7 +7,7 @@ import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"
 
 const buttonVariants = cva({
-  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
       solid: "bg-primary hover:bg-primary/80 text-white",
@@ -34,8 +34,9 @@ interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
 }
 
 interface ButtonElementProps extends React.ComponentPropsWithoutRef<"button"> {}
-interface LinkElementProps
-  extends React.ComponentPropsWithoutRef<typeof NextLink> {}
+interface LinkElementProps extends React.ComponentPropsWithoutRef<
+  typeof NextLink
+> {}
 
 export type ButtonLinkProps = ButtonBaseProps &
   LinkElementProps & { href: string }

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

@@ -17,7 +17,7 @@ export const Link: React.FC<LinkProps> = (props) => {
   return (
     <NextLink
       className={classNames(
-        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
         className,
       )}
       target={target}

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

@@ -11,8 +11,8 @@ const typographyVariants = cva({
       h4: "text-primary dark:text-primary-dark text-xl font-semibold",
       h5: "text-primary dark:text-primary-dark text-xl font-medium",
       h6: "text-primary dark:text-primary-dark text-lg font-medium",
-      text1: "break-words text-base",
-      text2: "break-words text-sm",
+      text1: "text-base break-words",
+      text2: "text-sm break-words",
     },
   },
 })

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

@@ -62,7 +62,7 @@ export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
 
   return (
     <div className="flex items-center justify-center" onClick={toggleTheme}>
-      <div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
+      <div className="relative inline-block cursor-pointer touch-pan-x border-0 bg-transparent p-0 select-none">
         <div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
           <div
             className={classNames(

packages/ui/src/Layout/MainLayout/MainLayout.tsx

@@ -1,7 +1,6 @@
 import { classNames } from "@repo/config-tailwind/classNames"
 
-export interface MainLayoutProps
-  extends React.ComponentPropsWithoutRef<"main"> {
+export interface MainLayoutProps extends React.ComponentPropsWithoutRef<"main"> {
   className?: string
   center?: boolean
 }

packages/ui/src/Layout/Section/Section.tsx

@@ -4,8 +4,7 @@ import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export * from "./RevealFade.tsx"
 
-export interface SectionProps
-  extends React.ComponentPropsWithoutRef<"section"> {
+export interface SectionProps extends React.ComponentPropsWithoutRef<"section"> {
   verticalSpacing?: boolean
   horizontalSpacing?: boolean
 }
@@ -64,8 +63,7 @@ export const SectionDescription: React.FC<SectionDescriptionProps> = (
   )
 }
 
-export interface SectionContentProps
-  extends React.ComponentPropsWithoutRef<"div"> {
+export interface SectionContentProps extends React.ComponentPropsWithoutRef<"div"> {
   shadowContainer?: boolean
 }
 
@@ -75,7 +73,7 @@ export const SectionContent: React.FC<SectionContentProps> = (props) => {
   return (
     <div
       className={classNames(
-        "size-full max-w-full break-words px-6 py-4 sm:px-16",
+        "size-full max-w-full px-6 py-4 break-words sm:px-16",
         {
           "shadow-light dark:shadow-dark max-w-full rounded-2xl border border-solid border-black":
             shadowContainer,

pnpm-workspace.yaml

@@ -7,30 +7,30 @@ catalogMode: "strict"
 
 catalog:
   # Turborepo
-  "turbo": "2.5.8"
+  "turbo": "2.6.3"
 
   # TypeScript
   "typescript": "5.9.3"
   "@total-typescript/ts-reset": "0.6.1"
-  "@types/node": "24.7.2"
+  "@types/node": "24.10.1"
 
   # Utils
   "mime": "4.1.0"
 
   # React.js/Next.js
-  "next": &next "15.5.4"
-  "next-intl": "4.3.12"
+  "next": &next "16.0.7"
+  "next-intl": "4.5.8"
   "next-themes": "0.4.6"
-  "react": "19.2.0"
-  "react-dom": "19.2.0"
-  "@types/react": "19.2.2"
-  "@types/react-dom": "19.2.1"
+  "react": "19.2.1"
+  "react-dom": "19.2.1"
+  "@types/react": "19.2.7"
+  "@types/react-dom": "19.2.3"
   "react-icons": "5.5.0"
 
   # Blog
   "@giscus/react": "3.1.0"
   "gray-matter": "4.0.3"
-  "katex": "0.16.23"
+  "katex": "0.16.25"
   "next-mdx-remote": "5.0.0"
   "@mdx-js/mdx": "3.1.1"
   "rehype-katex": "7.0.1"
@@ -42,48 +42,48 @@ catalog:
   "@shikijs/rehype": "1.24.0"
 
   # Markdown Lint
-  "markdownlint-cli2": "0.18.1"
-  "markdownlint": "0.38.0"
+  "markdownlint-cli2": "0.19.1"
+  "markdownlint": "0.39.0"
   "markdownlint-rule-relative-links": "4.2.0"
 
   # ESLint
-  "globals": "16.4.0"
-  "typescript-eslint": "8.46.0"
-  "eslint": "9.37.0"
-  "eslint-config-conventions": "21.0.3"
+  "globals": "16.5.0"
+  "typescript-eslint": "8.48.1"
+  "eslint": "9.39.1"
+  "eslint-config-conventions": "21.1.1"
   "eslint-plugin-promise": "7.2.1"
-  "eslint-plugin-unicorn": "61.0.2"
+  "eslint-plugin-unicorn": "62.0.0"
   "eslint-plugin-import-x": "4.16.1"
   "@next/eslint-plugin-next": *next
   "eslint-plugin-react": "7.37.5"
-  "eslint-plugin-react-hooks": "7.0.0"
+  "eslint-plugin-react-hooks": "7.0.1"
 
   # Prettier
-  "prettier": "3.6.2"
-  "prettier-plugin-tailwindcss": "0.6.14"
-  "editorconfig-checker": "6.1.0"
+  "prettier": "3.7.4"
+  "prettier-plugin-tailwindcss": "0.7.2"
+  "editorconfig-checker": "6.1.1"
 
   # Storybook
-  "storybook": &storybook "9.1.10"
+  "storybook": &storybook "10.1.4"
   "@storybook/addon-docs": *storybook
   "@storybook/addon-a11y": *storybook
   "@storybook/nextjs": *storybook
   "@storybook/addon-themes": *storybook
-  "@storybook/test-runner": "0.23.0"
-  "@chromatic-com/storybook": "4.1.1"
-  "chromatic": "13.3.0"
+  "@storybook/test-runner": "0.24.2"
+  "@chromatic-com/storybook": "4.1.3"
+  "chromatic": "13.3.4"
 
   # Testing
-  "playwright": &playwright "1.56.0"
+  "playwright": &playwright "1.57.0"
   "@playwright/test": *playwright
-  "start-server-and-test": "2.1.2"
+  "start-server-and-test": "2.1.3"
 
   # CSS
   "postcss": "8.5.6"
-  "@tailwindcss/postcss": "4.1.14"
+  "@tailwindcss/postcss": "4.1.17"
   "@tailwindcss/typography": "0.5.19"
-  "tailwindcss": "4.1.14"
-  "tailwind-merge": "3.3.1"
+  "tailwindcss": "4.1.17"
+  "tailwind-merge": "3.4.0"
   "clsx": "2.1.1"
   "cva": "1.0.0-beta.4"
   "@fontsource/montserrat": "5.2.8"

turbo.json

@@ -1,5 +1,6 @@
 {
   "$schema": "./node_modules/turbo/schema.json",
+  "noUpdateNotifier": true,
   "ui": "tui",
   "tasks": {
     "build": {