migrate to eslint 9

.github/workflows/ci.yml

@@ -73,7 +73,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x, 22.x]
     steps:
       - uses: actions/checkout@v4
 

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- migrated to eslint 9 with the neolution eslint config
+
 ## [5.0.0] - 2025-03-04
 
 ### dependabot: \#68 Bump the github-actions group with 5 updates

cypress/cypress/component/Paging/Paging.cy.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import { Paging } from "react-pattern-ui";
 import { faker } from "@faker-js/faker";
 
@@ -31,10 +30,10 @@ describe("Paging.cy.tsx", () => {
     );
     cy.get("[data-cy-root] > .container-fluid > .row > .col-6:first-of-type > .btn-group > .dropdown-menu > .dropdown-item").then(
       (items: JQuery<HTMLElement>) => {
-        expect(items.map((_, item) => item.innerText).toArray(), "possible items per page").to.deep.eq(
+        expect(items.map((_, item) => item.textContent).toArray(), "possible items per page").to.deep.eq(
           [25, 50, 100, 200, itemsPerPage].sort((a, b) => a - b).map((itemNumber): string => itemNumber.toString()),
         );
-        cy.wrap(items.filter((_, item) => item.innerText === "25")).click();
+        cy.wrap(items.filter((_, item) => item.textContent === "25")).click();
         cy.get("@setItemsPerPage").should("be.calledOnceWith", 25);
       },
     );
@@ -52,15 +51,15 @@ describe("Paging.cy.tsx", () => {
     cy.get("[data-cy-root] > .container-fluid > .row > .col-6:nth-of-type(2) > .btn-group > button.btn").then(
       (items: JQuery<HTMLElement>) => {
         expect(items.length, "navigation buttons count").to.eq(Math.min(7, pages) + 4);
-        cy.wrap(items.filter((_, item) => item.innerText === "<<")).click();
+        cy.wrap(items.filter((_, item) => item.textContent === "<<")).click();
         cy.get("@setCurrentPage").should("be.calledOnceWith", 1);
-        cy.wrap(items.filter((_, item) => item.innerText === "<")).click();
+        cy.wrap(items.filter((_, item) => item.textContent === "<")).click();
         cy.get("@setCurrentPage").should("be.calledWith", currentPage - 1);
-        cy.wrap(items.filter((_, item) => item.innerText === (currentPage - 1).toString())).click();
+        cy.wrap(items.filter((_, item) => item.textContent === (currentPage - 1).toString())).click();
         cy.get("@setCurrentPage").should("be.calledWith", currentPage - 1);
-        cy.wrap(items.filter((_, item) => item.innerText === ">")).click();
+        cy.wrap(items.filter((_, item) => item.textContent === ">")).click();
         cy.get("@setCurrentPage").should("be.calledWith", currentPage + 1);
-        cy.wrap(items.filter((_, item) => item.innerText === ">>")).click();
+        cy.wrap(items.filter((_, item) => item.textContent === ">>")).click();
         cy.get("@setCurrentPage").should("be.calledWith", pages);
       },
     );

cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from "react";
+/* eslint-disable max-lines */
+import { PropsWithChildren } from "react";
 import {
   PanelSideBarProvider,
   PanelSideBarLayout,
@@ -30,11 +31,11 @@ const getPanelSidebarInternal = (items: TSideBarMenuItem[], config?: PanelSideBa
           onClick={() => {
             const pageContent = document.getElementById("pageContent");
             if (pageContent) {
-              pageContent.innerText = elem.item.id;
+              pageContent.textContent = elem.item.id;
             }
           }}
         >
-          <>{elem.children}</>
+          {(elem as React.PropsWithChildren).children}
         </div>
       )}
     >
@@ -230,7 +231,11 @@ describe("PanelSidebar.cy.tsx", () => {
       );
     };
 
-    cy.mount(<PanelSideBarWithTiles expanded children={<Button />} />);
+    cy.mount(
+      <PanelSideBarWithTiles expanded>
+        <Button />
+      </PanelSideBarWithTiles>,
+    );
     cy.get("button[title=Settings]").click();
     cy.get("li:has(.dropdown-toggle)").should("be.visible").should("have.class", "menu-open");
     cy.get("#test-toggle").click();
@@ -249,7 +254,11 @@ describe("PanelSidebar.cy.tsx", () => {
       );
     };
 
-    cy.mount(<PanelSideBarWithTiles expanded children={<Button />} />);
+    cy.mount(
+      <PanelSideBarWithTiles expanded>
+        <Button />
+      </PanelSideBarWithTiles>,
+    );
     cy.get("button[title=Settings]").click();
     cy.get("#dropdown-test1").should("be.visible");
     cy.get("#dropdown-test2").should("be.visible");
@@ -273,7 +282,11 @@ describe("PanelSidebar.cy.tsx", () => {
       );
     };
 
-    cy.mount(<PanelSideBarWithTiles children={<Button />} />);
+    cy.mount(
+      <PanelSideBarWithTiles>
+        <Button />
+      </PanelSideBarWithTiles>,
+    );
     cy.get("button[title=Settings]").click();
     cy.get("li:has(.dropdown-toggle)").should("be.visible").should("not.have.class", "menu-open");
     cy.get("#test-open-item").click();

cypress/cypress/support/commands.ts

@@ -37,7 +37,9 @@
 // }
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     interface Chainable {}
   }
 }

cypress/cypress/support/component-index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/cypress/support/component.ts

@@ -14,6 +14,7 @@
 // ***********************************************************
 
 import "bootstrap/dist/css/bootstrap.min.css";
+
 import "react-pattern-ui/styles.css";
 
 // Import commands.js using ES2015 syntax:
@@ -29,6 +30,7 @@ import { mount } from "cypress/react18";
 // Alternatively, can be defined in cypress/support/component.d.ts
 // with a <reference path="./component" /> at the top of your spec.
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       mount: typeof mount;

cypress/eslint.config.mjs

@@ -0,0 +1,3 @@
+import neolutionEslintConfig from "@neolution-ch/eslint-config-neolution";
+
+export default [...neolutionEslintConfig.configs.flat.cypress];

cypress/package.json

@@ -8,18 +8,17 @@
     "cyo": "yarn cy open",
     "cyr": "yarn cy run --component",
     "dev": "next dev",
-    "lint": "eslint \"**/*.{ts,tsx}\" --cache --max-warnings 0",
+    "lint": "eslint --cache",
     "start": "next start"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.2",
+    "eslint": "^9.18.0",
     "next": "13.0.2",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
@@ -28,6 +27,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
+    "@neolution-ch/eslint-config-neolution": "^2.1.0",
     "cypress": "^11.0.0"
   }
 }

cypress/pages/_app.tsx

@@ -3,6 +3,8 @@ import type { AppProps } from "next/app";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 
-export default function App({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />;
-}
+};
+
+export default App;

cypress/styles/globals.css

@@ -2,7 +2,17 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
     sans-serif;
 }