Dependency update (#48)

## Describe your changes
Updating all dependencies

## Checklist before requesting a review
- [x] I have performed a self-review of my code
- [x] If it is a core feature, I have added thorough tests.

Author: lounsbrough

.eslintrc.js

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}

.github/workflows/pr-tests.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
@@ -32,7 +32,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}

.github/workflows/publish-new-release.yml

@@ -1,10 +1,11 @@
 import { mount } from 'cypress/react18'
+import { shouldHaveColor } from './support/commands'
 
 declare global {
   namespace Cypress {
     interface Chainable {
       mount: typeof mount
-      shouldHaveColor: Function
+      shouldHaveColor: typeof shouldHaveColor
     }
   }
 }

cypress/cypress.d.ts

@@ -4,10 +4,12 @@ import { colord } from 'colord'
 
 const expectColorsToMatch = (color1: string | undefined, color2: string | undefined) => {
   expect(Boolean(color1), 'expected both color to be defined or undefined').to.equal(Boolean(color2))
-  expect(colord(color1).toHex()).to.be.equal(colord(color2).toHex())
+  if (color1 && color2) {
+    expect(colord(color1).toHex()).to.be.equal(colord(color2).toHex())
+  }
 }
 
-Cypress.Commands.addQuery('shouldHaveColor', function (type: 'attr' | 'css', property: string, expectedColor: string) {
+export const shouldHaveColor = function (this: unknown, type: 'attr' | 'css', property: string, expectedColor: string): ($el: JQuery) => JQuery<HTMLElement> {
   return ($el: JQuery) => {
     expect(type).to.be.oneOf(['attr', 'css'])
 
@@ -19,4 +21,6 @@ Cypress.Commands.addQuery('shouldHaveColor', function (type: 'attr' | 'css', pro
 
     return $el
   }
-})
+}
+
+Cypress.Commands.addQuery('shouldHaveColor', shouldHaveColor)

cypress/support/commands.ts

@@ -3,33 +3,32 @@
   "homepage": "https://Bayer-Group.github.io/react-color-a11y",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6.0.2",
-    "@mui/material": "^6.0.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/material": "^6.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^22.0.2",
-    "@types/react": "^18.2.54",
-    "@types/react-dom": "^18.2.18",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.3",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-helmet": "^6.1.11",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-color-a11y": "workspace:*",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.4",
+    "react-dom": "^19.0.0",
+    "react-helmet-async": "^2.0.5",
     "react-scripts": "5.0.1",
-    "typescript": "^5.3.3",
-    "web-vitals": "^4.2.0"
+    "typescript": "^5.7.2",
+    "web-vitals": "^4.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --ext .ts,.tsx ."
+    "eject": "react-scripts eject"
   },
   "browserslist": {
     "production": [

demo/.eslintrc.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { JSX, useCallback, useRef, useState } from 'react'
 import ReactColorA11y from 'react-color-a11y'
 import {
   Box,

demo/package.json

@@ -0,0 +1,16 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+  files: ['**/*.ts'],
+  extends: [
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+  ],
+  ignores: [
+    'lib/*'
+  ],
+  rules: {
+    'semi': ['error', 'never']
+  }
+})

demo/src/App.tsx

@@ -9,7 +9,7 @@
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "scripts": {
     "clean": "rm -rf lib",
@@ -19,7 +19,7 @@
     "start-demo": "pnpm --prefix demo start",
     "build-demo": "pnpm --prefix demo build",
     "deploy-demo": "pnpm build-demo && gh-pages -d demo/build",
-    "lint": "eslint --ext .ts,.tsx . && pnpm --prefix demo lint",
+    "lint": "eslint .",
     "test": "pnpm cypress run --component",
     "test-interactive": "pnpm cypress open"
   },
@@ -45,29 +45,26 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@eslint/js": "^9.17.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@types/node": "^22.0.2",
-    "@types/react": "^18.2.54",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "cypress": "^13.6.4",
-    "eslint": "^8.56.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "gh-pages": "^6.1.1",
-    "postcss": "^8.4.33",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.9.6",
+    "@types/node": "^22.10.3",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "cypress": "^13.17.0",
+    "eslint": "^9.17.0",
+    "gh-pages": "^6.2.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.29.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.1"
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "webpack": "^5.97.1"
   }
 }