Upgrade frontend stack and replace ESLint/Prettier with Oxc

.github/workflows/frontend.yml

@@ -5,12 +5,14 @@ on:
     branches: [main]
     paths:
       - 'frontend/**'
+      - 'backend/doc/swagger/**'
       - 'Makefile'
       - '.github/workflows/frontend.yml'
   pull_request:
     branches: [main]
     paths:
       - 'frontend/**'
+      - 'backend/doc/swagger/**'
       - 'Makefile'
       - '.github/workflows/frontend.yml'
   workflow_dispatch:
@@ -27,14 +29,25 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: '1'
+      STORYBOOK_DISABLE_TELEMETRY: '1'
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24.22.1'
       - name: Install dependencies
-        run: node .yarn/releases/yarn-3.6.1.cjs install --immutable
+        run: node .yarn/releases/yarn-4.18.1.cjs install --immutable
       - name: Lint
-        run: node .yarn/releases/yarn-3.6.1.cjs lint
+        run: node .yarn/releases/yarn-4.18.1.cjs lint
+      - name: Check formatting
+        run: node .yarn/releases/yarn-4.18.1.cjs format:check
+      - name: Verify generated API client
+        run: |
+          node .yarn/releases/yarn-4.18.1.cjs generate
+          git diff --exit-code -- generated/api-types
+      - name: Type check
+        run: node .yarn/releases/yarn-4.18.1.cjs typecheck
       - name: Build
-        run: node .yarn/releases/yarn-3.6.1.cjs build
+        run: node .yarn/releases/yarn-4.18.1.cjs build
+      - name: Build Storybook
+        run: node .yarn/releases/yarn-4.18.1.cjs build-storybook

AGENTS.md

@@ -1,6 +1,6 @@
 # Talebound monorepo
 
-- `frontend/` contains Next.js, React, TypeScript, and its Yarn 3.6.1 lockfile.
+- `frontend/` contains Next.js, React, TypeScript, and its Yarn 4.18.1 lockfile.
 - `backend/` contains the Go module, protobuf definitions, database migrations,
   Docker configuration, and deployment manifests.
 - Run commands through the root Makefile or from the relevant application directory.

Makefile

@@ -1,7 +1,7 @@
 .DEFAULT_GOAL := help
 
 NODE ?= node
-FRONTEND_YARN = cd frontend && $(NODE) .yarn/releases/yarn-3.6.1.cjs
+FRONTEND_YARN = cd frontend && $(NODE) .yarn/releases/yarn-4.18.1.cjs
 WORKTREE_DEV = scripts/worktree-dev/talebound-worktree-dev
 
 .PHONY: help dev-setup dev-up dev-down dev-status dev-logs frontend-install frontend-dev frontend-build frontend-lint backend-dev backend-build backend-test backend-migrate api-generate services-up services-down

README.md

@@ -4,14 +4,14 @@ The frontend and backend for Talebound, developed together in one repository.
 
 | Directory | Application |
 | --- | --- |
-| `frontend/` | Next.js / React / TypeScript, managed with Yarn 3.6.1 |
+| `frontend/` | Next.js / React / TypeScript, managed with Yarn 4.18.1 |
 | `backend/` | Go API, protobuf/gRPC, PostgreSQL migrations, and Docker configuration |
 | `.github/workflows/` | Frontend checks, backend tests, and manual backend deployment |
 
 ## Development
 
 On Linux/WSL, use Bash, Python 3.9+, Git, and Docker with Compose v2. The supported
-worktree launcher runs Node.js 22, Go 1.23, PostgreSQL 15, Redis 7, and Mailpit in
+worktree launcher runs Node.js 24, Go 1.23, PostgreSQL 15, Redis 7, and Mailpit in
 containers. No host Node, Go, Yarn, or Make installation is needed to run the app.
 
 ```sh
@@ -50,7 +50,7 @@ make api-generate
 ```
 
 Backend tests use the current worktree's migrated PostgreSQL database. The
-frontend checks/API generator and `backend-build` use host Node.js 22/Go 1.23;
+frontend checks/API generator and `backend-build` use host Node.js 24/Go 1.23;
 their container equivalents are documented in the worktree guide. API generation reads
 `backend/doc/swagger/talebound.swagger.json` directly; it no longer needs a
 running backend or the old development server. After changing protobuf API
@@ -69,7 +69,7 @@ existing imports and protobuf package identities. Go builds use the local
   client without changes. The Yarn lockfile installed with `--immutable`.
 - GitHub Actions workflows passed `actionlint`; Compose configuration and root
   Makefile command paths were checked.
-- Frontend lint, TypeScript checking, and the production build pass with Node 22
+- Frontend lint, TypeScript checking, and the production build pass with Node 24
   and the checked-in Yarn lockfile. The inherited API/type mismatches and unused
   code have been corrected; lint and type checking remain enabled.
 

frontend/.gitignore

@@ -37,3 +37,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Storybook static build
+/storybook-static/

frontend/.oxfmtrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "node_modules/**",
+    ".next/**",
+    "public/**",
+    "out/**",
+    "dist/**",
+    ".yarn/**",
+    "storybook-static/**",
+    "next-env.d.ts",
+    "yarn.lock"
+  ]
+}

frontend/.oxlintrc.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "react"],
+  "categories": {
+    "correctness": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2021": true
+  },
+  "settings": {
+    "react": {
+      "version": "19.3"
+    }
+  },
+  "ignorePatterns": [
+    "node_modules/**",
+    ".next/**",
+    "public/**",
+    "out/**",
+    "dist/**",
+    ".yarn/**",
+    "storybook-static/**",
+    "*.config.js"
+  ],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/exhaustive-deps": "warn",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "typescript/ban-ts-comment": "error",
+    "no-array-constructor": "error",
+    "typescript/no-duplicate-enum-values": "error",
+    "typescript/no-empty-object-type": "error",
+    "typescript/no-explicit-any": "error",
+    "typescript/no-extra-non-null-assertion": "error",
+    "typescript/no-misused-new": "error",
+    "typescript/no-namespace": "error",
+    "typescript/no-non-null-asserted-optional-chain": "error",
+    "typescript/no-require-imports": "error",
+    "typescript/no-this-alias": "error",
+    "typescript/no-unnecessary-type-constraint": "error",
+    "typescript/no-unsafe-declaration-merging": "error",
+    "typescript/no-unsafe-function-type": "error",
+    "no-unused-expressions": "error",
+    "typescript/no-wrapper-object-types": "error",
+    "typescript/prefer-as-const": "error",
+    "typescript/prefer-namespace-keyword": "error",
+    "typescript/triple-slash-reference": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "react/display-name": "error",
+    "react/jsx-key": "error",
+    "react/jsx-no-comment-textnodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "error",
+    "react/jsx-no-undef": "error",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-string-refs": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unknown-property": "error",
+    "react/require-render-return": "error",
+    "for-direction": "error",
+    "no-async-promise-executor": "error",
+    "no-case-declarations": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    "no-constant-condition": "error",
+    "no-control-regex": "error",
+    "no-debugger": "error",
+    "no-delete-var": "error",
+    "no-dupe-else-if": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-fallthrough": "error",
+    "no-global-assign": "error",
+    "no-inner-declarations": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "error",
+    "no-loss-of-precision": "error",
+    "no-misleading-character-class": "error",
+    "no-nonoctal-decimal-escape": "error",
+    "no-prototype-builtins": "error",
+    "no-regex-spaces": "error",
+    "no-self-assign": "error",
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-unexpected-multiline": "error",
+    "no-unsafe-finally": "error",
+    "no-unsafe-optional-chaining": "error",
+    "no-unused-labels": "error",
+    "no-useless-backreference": "error",
+    "no-useless-catch": "error",
+    "no-useless-escape": "error",
+    "require-yield": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "react/no-unsafe": [
+      "error",
+      {
+        "checkAliases": true
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.stories.{ts,tsx,js,jsx,mjs,cjs}", "**/*.story.{ts,tsx,js,jsx,mjs,cjs}"],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "@storybook/react",
+                "message": "Import story types from @storybook/nextjs, the configured framework."
+              },
+              {
+                "name": "@storybook/jest",
+                "message": "Import interaction helpers from storybook/test."
+              },
+              {
+                "name": "@storybook/testing-library",
+                "message": "Import interaction helpers from storybook/test."
+              },
+              {
+                "name": "@storybook/test",
+                "message": "Import interaction helpers from storybook/test in Storybook 10."
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

frontend/.storybook/main.ts

@@ -5,18 +5,11 @@ const config: StorybookConfig = {
     '../@(components|components-radix-ui)/**/*.mdx',
     '../@(components|components-radix-ui)/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  staticDirs: ['../public'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-links'],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
 };
 export default config;