chore(deps): Q2 2026 dependency upgrade epic (#18)

.github/workflows/ci.yml

@@ -12,14 +12,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
-    
+        node-version: [20.x, 22.x]
+
     steps:
     - uses: actions/checkout@v4
-    
-    - uses: pnpm/action-setup@v2
+
+    - uses: pnpm/action-setup@v4
       with:
-        version: 9
+        version: 10
 
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
@@ -40,12 +40,13 @@ jobs:
       run: pnpm test:ci
 
     - name: Upload coverage reports
-      uses: codecov/codecov-action@v3
-      if: matrix.node-version == '20.x'
+      uses: codecov/codecov-action@v5
+      if: matrix.node-version == '22.x'
       with:
-        file: ./coverage/clover.xml
+        files: ./coverage/clover.xml
         flags: unittests
         name: codecov-umbrella
+        token: ${{ secrets.CODECOV_TOKEN }}
 
     - name: Build package
       run: pnpm build

.github/workflows/main.yml

@@ -20,13 +20,13 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10
           run_install: false
 
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'pnpm'
 
       - name: Get pnpm store directory
@@ -46,7 +46,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Check types
-        run: pnpm tsc
+        run: pnpm typecheck
 
       - name: Check linting
         run: pnpm lint:ci

.github/workflows/publish.yml

@@ -25,13 +25,13 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10
           run_install: false
 
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'pnpm'
 
       - name: Get pnpm store directory

.github/workflows/release.yml

@@ -18,13 +18,13 @@ jobs:
       with:
         fetch-depth: 0
 
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v4
       with:
-        version: 9
-    
+        version: 10
+
     - uses: actions/setup-node@v4
       with:
-        node-version: '20.x'
+        node-version: '22.x'
         registry-url: 'https://registry.npmjs.org'
         cache: 'pnpm'
 

.gitignore

@@ -32,3 +32,8 @@ yarn-error.log*
 .env.production.local
 
 storybook-static
+
+# Playwright
+playwright-report/
+test-results/
+playwright/.cache/

.storybook/main.ts

@@ -1,31 +1,30 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
-	stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-interactions",
-		"@storybook/addon-webpack5-compiler-swc",
-	],
-	framework: {
+    stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-webpack5-compiler-swc",
+        "@storybook/addon-docs"
+    ],
+
+    framework: {
 		name: "@storybook/react-webpack5",
 		options: {
 			builder: {
 				useSWC: true,
 			},
 		},
 	},
-	swc: () => ({
+
+    swc: () => ({
 		jsc: {
 			transform: {
 				react: {
 					runtime: "automatic",
 				},
 			},
 		},
-	}),
-	docs: {
-		autodocs: "tag",
-	},
+	})
 };
 export default config;

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-webpack5";
 
 const preview: Preview = {
 	parameters: {

CHANGELOG.md

@@ -7,6 +7,57 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.6] - 2026-05-12
+
+Comprehensive Q2 2026 dependency upgrade (Epic #18).
+
+### Added
+- Playwright e2e test suite running against built Storybook (5 specs covering
+  story smoke checks and breakpoint detection across viewport sizes)
+- New scripts: `test:e2e`, `test:e2e:ui`, `test:e2e:install`, `storybook:e2e`
+  (dedicated port 6010 to avoid collisions with default 6006)
+- `@playwright/test` devDep
+- `@emotion/react` devDep (required peer of MUI 9)
+- `@eslint-react/eslint-plugin` (modern React lint rules with ESLint 10 support)
+
+### Changed
+- **BREAKING**: `engines.node` raised from `>=18.0.0` to `>=20.0.0`. Node 18
+  reached EOL on 2025-04-30 and Vitest 4 / React 19 / `@types/node` 25 require
+  Node 20+.
+- React 18 → 19 (devDep + types). `peerDependencies` for consumers remain
+  `>=17`; no React-19-only API is used in the lib's public surface.
+- Storybook 8 → 10 (all `@storybook/*` packages; addon consolidation applied
+  per the official Storybook 9/10 migration guides).
+- MUI 6 → 9 (devDep — used in Storybook stories only).
+- TypeScript 5.9 → 6.0. Added `types: ["node"]` and `ignoreDeprecations: "6.0"`
+  to `tsconfig.json` (the latter for tsup's internal DTS generator).
+- Vitest 2 → 4 (+ Vite 8 as required peer). `@vitest/coverage-v8` matched.
+- ESLint 9 → 10 via migration to `@eslint-react/eslint-plugin`. The legacy
+  `eslint-plugin-react` has no ESLint 10 support yet.
+- Tooling: `release-it` 17 → 20, `lefthook` 1 → 2, `jsdom` 25 → 29,
+  `@types/node` 22 → 25, `typescript-eslint` 8.54 → 8.59.
+- Internally adopted React 19 idioms: `<BreakpointContext value={...}>` instead
+  of `.Provider`, `use(BreakpointContext)` instead of `useContext(...)`.
+  Public API unchanged.
+- CI workflows updated for Node 20+ engines; pnpm pinned to v10; matrix tests
+  now run on Node 20.x and 22.x; codecov-action upgraded v3 → v5.
+
+### Fixed
+- `BreakpointContext.tsx`: missing `shouldLog` dependency in the
+  width-vs-smallest-breakpoint `useEffect`. Runtime `devMode` toggles now
+  correctly re-evaluate the log gate (caught by the new ESLint setup).
+
+### Removed
+- `react-test-renderer` and `@types/react-test-renderer` (deprecated in React
+  19, not used in this project).
+- `eslint-plugin-react` (replaced by `@eslint-react/eslint-plugin`).
+- `eslint-plugin-react-hooks` (redundant — `@eslint-react` ships both
+  `rules-of-hooks` and `exhaustive-deps`).
+- Storybook consolidations no longer pinned individually: `@storybook/react`,
+  `@storybook/blocks`, `@storybook/addon-essentials`,
+  `@storybook/addon-interactions`, `@storybook/test` (their functionality
+  moved into the `storybook` core package in v9).
+
 ## [0.2.0] - 2025-07-12
 
 ### Added
@@ -40,6 +91,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Storybook stories with examples
 - Comprehensive documentation
 
-[Unreleased]: https://github.com/smartlabsat/react-resize-detector-context/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/smartlabsat/react-resize-detector-context/compare/v0.2.6...HEAD
+[0.2.6]: https://github.com/smartlabsat/react-resize-detector-context/compare/v0.2.5...v0.2.6
 [0.2.0]: https://github.com/smartlabsat/react-resize-detector-context/compare/v0.1.2...v0.2.0
 [0.1.2]: https://github.com/smartlabsat/react-resize-detector-context/releases/tag/v0.1.2

eslint.config.mjs

@@ -1,7 +1,13 @@
+// Flat config for ESLint 10.
+// @eslint-react replaces the legacy eslint-plugin-react (no ESLint 10 support
+// at time of writing) and ships both the rules-of-hooks and exhaustive-deps
+// rules under its own namespace.
+
 import globals from 'globals';
 import pluginJs from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import pluginReact from 'eslint-plugin-react';
+import eslintReact from '@eslint-react/eslint-plugin';
+import storybook from 'eslint-plugin-storybook';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -17,12 +23,9 @@ export default [
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
   {
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
+    files: ['**/*.{ts,tsx}'],
+    ...eslintReact.configs['recommended-typescript'],
   },
-];
+  ...storybook.configs['flat/recommended'],
+];

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-resize-detector-context",
   "description": "React context that detects element width and provides responsive breakpoint utilities with conditional rendering components",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "author": "Christopher Schwarz",
   "license": "MIT",
   "keywords": [
@@ -27,9 +27,13 @@
     "format": "prettier --write src",
     "test": "vitest",
     "test:ci": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:install": "playwright install --with-deps chromium",
     "typecheck": "tsc --noEmit",
     "commit": "cz",
     "storybook": "storybook dev -p 6006",
+    "storybook:e2e": "storybook dev -p 6010 --ci --no-open",
     "storybook:build": "storybook build",
     "release": "pnpm build && pnpm release-it",
     "link:self": "pnpm link --global",
@@ -68,52 +72,50 @@
     }
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@eslint/js": "^9.39.2",
-    "@mui/material": "^6.4.3",
+    "@eslint-react/eslint-plugin": "^5.7.6",
+    "@eslint/js": "^10.0.1",
+    "@mui/material": "^9.0.1",
+    "@playwright/test": "^1.60.0",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "2.0.0",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
-    "@storybook/test": "8.6.14",
+    "@storybook/addon-links": "10.3.6",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.3",
+    "@storybook/react-webpack5": "10.3.6",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "22.10.5",
-    "@types/react": "18.3.13",
-    "@types/react-dom": "18.3.1",
-    "@types/react-test-renderer": "18.3.0",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@vitest/coverage-v8": "2.1.9",
+    "@vitest/coverage-v8": "^4.1.6",
     "concurrently": "9.2.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint": "^10.3.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "jsdom": "25.0.1",
-    "lefthook": "1.10.1",
+    "jsdom": "^29.1.1",
+    "lefthook": "^2.1.6",
     "lint-staged": "^15.4.3",
     "prettier": "^3.8.1",
     "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-test-renderer": "18.3.1",
-    "release-it": "17.11.0",
-    "storybook": "8.6.14",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "release-it": "^20.0.1",
+    "storybook": "10.3.6",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tsup": "8.5.1",
     "tsx": "4.21.0",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.54.0",
-    "vitest": "^2.1.9"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "typescript-eslint": "^8.59.3",
+    "vitest": "^4.1.6",
+    "eslint-plugin-storybook": "10.3.6",
+    "@storybook/addon-docs": "10.3.6"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -127,4 +129,4 @@
   "dependencies": {
     "react-resize-detector": "^12.3.0"
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'github' : 'html',
+  use: {
+    baseURL: 'http://127.0.0.1:6010',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm storybook:e2e',
+    url: 'http://127.0.0.1:6010',
+    reuseExistingServer: !process.env.CI,
+    timeout: 180_000,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+});