migrate to eslint 9

.github/workflows/ci.yml

@@ -78,7 +78,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@v2
 

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- migrated to eslint 9 flat config
+- removed obsolete storybook
+
 ## [5.13.0] - 2025-10-08
 
 ### Changed

eslint.config.mjs

@@ -0,0 +1,4 @@
+import neolutionEslintConfig from "@neolution-ch/eslint-config-neolution";
+import storybook from "eslint-plugin-storybook";
+
+export default [...neolutionEslintConfig.configs.flat["react-library"], ...storybook.configs["flat/recommended"]];

package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "build": "rollup -c && yarn copy-definitionfile",
     "build-storybook": "build-storybook",
-    "lint": "eslint \"**/*.{ts,tsx}\" --cache --max-warnings 0",
+    "lint": "eslint --cache",
     "prepack": "yarn build",
     "prepare-pr": "yarn prettier . --write && yarn lint && yarn build && yarn test\"",
     "prettier-check": "prettier --check .",
@@ -49,6 +49,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@neolution-ch/eslint-config-neolution": "https://pkg.pr.new/neolution-ch/eslint-config-neolution/@neolution-ch/eslint-config-neolution@18",
     "@neolution-ch/react-pattern-ui": "^5.3.0",
     "@tanstack/react-table": "^8.12.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -84,17 +85,12 @@
     "bootstrap": "^4.0.0",
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^9.37.0",
+    "eslint-plugin-storybook": "^0.10.0",
     "gh-pages": "^5.0.0",
     "jest": "^27.5.1",
     "nodemon": "^2.0.22",
-    "prettier": "^2.8.8",
+    "prettier": "^3.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "reactstrap": "^8.10.1",
@@ -118,7 +114,7 @@
     "reactstrap": "^8.0.0 || ^9.0.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "publishConfig": {
     "access": "public",

rollup.config.mjs

@@ -1,4 +1,5 @@
 import commonjs from "@rollup/plugin-commonjs";
+// eslint-disable-next-line import/no-named-as-default
 import nodeResolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import terser from "@rollup/plugin-terser";
@@ -41,7 +42,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
       interop: "auto",
     },
     plugins,
@@ -55,7 +55,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },
@@ -68,7 +67,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -8,19 +8,20 @@ import { reactDataTableTranslations } from "../translations/translations";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 import { FilterModel } from "../types/TableState";
 import { getModelFromColumnFilter } from "../utils/getModelFromColumnFilter";
-import { Fragment } from "react";
+import { Fragment, useRef } from "react";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { getCommonPinningStyles } from "../utils/getCommonPinningStyles";
 import { getFilterValue, setFilterValue } from "../utils/customFilterMethods";
 import { useVirtualizer, Virtualizer } from "@tanstack/react-virtual";
-import { useRef } from "react";
+
 import { TableBody } from "./TableBody";
 
 interface TableInternalProps<TData, TFilter extends FilterModel = Record<string, never>> extends ReactDataTableProps<TData, TFilter> {
   virtualizer?: Virtualizer<HTMLDivElement, Element>;
 }
 
+// eslint-disable-next-line complexity
 const TableInternal = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableInternalProps<TData, TFilter>) => {
   const {
     virtualizer,
@@ -96,6 +97,7 @@ const TableInternal = <TData, TFilter extends FilterModel = Record<string, never
               </tr>
               {!withoutHeaderFilters && !headerGroup.headers.every((x) => !!x.column.columnDef.meta?.hideHeaderFilters) && (
                 <tr key={`${headerGroup.id}-col-filters`}>
+                  {/* eslint-disable-next-line complexity */}
                   {headerGroup.headers.map((header) => {
                     const {
                       column: {
@@ -336,4 +338,6 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
   );
 };
 
-export { ReactDataTable, ReactDataTableProps };
+export { ReactDataTable };
+
+export { ReactDataTableProps } from "./ReactDataTableProps";

src/lib/ReactDataTable/TableBody.tsx

@@ -56,16 +56,16 @@ const TableBody = <TData, TFilter extends FilterModel = Record<string, never>>(p
           <DraggableRow<TData, TFilter>
             key={index}
             row={row}
-            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
-            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowClick={enableRowClick}
+            onRowClick={onRowClick}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={{
-              ...(x.rowStyle ?? {}),
+              ...x.rowStyle,
               ...(rowStyle ? rowStyle(row.original) : {}),
             }}
             fullRowSelectable={fullRowSelectable}
-            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+            subRowComponent={subRowComponent}
           />
         );
       })}
@@ -78,17 +78,17 @@ const TableBody = <TData, TFilter extends FilterModel = Record<string, never>>(p
           <InternalTableRow<TData, TFilter>
             key={index}
             row={row}
-            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
-            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowClick={enableRowClick}
+            onRowClick={onRowClick}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={{
-              ...(x.rowStyle ?? {}),
+              ...x.rowStyle,
               ...(rowStyle ? rowStyle(row.original) : {}),
             }}
             fullRowSelectable={fullRowSelectable}
             hasPinnedColumns={table.getIsSomeColumnsPinned()}
-            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+            subRowComponent={subRowComponent}
           />
         );
       })}

src/lib/translations/translations.ts

@@ -1,6 +1,5 @@
 /**
  * This are the possible translations for the data table
- *
  * @interface DataTableTranslations
  * @property {string} clearSearchToolTip is used to print out the bottom text, possible placeholders are: {from}, {to} and {total}
  */

src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx

@@ -22,6 +22,8 @@ interface useFullyControlledReactDataTableProps<TData, TFilter extends FilterMod
 
 /**
  * A helper hook to use the useReactDataTable hook which is fully controlled. Usefull for server side filtering, sorting and pagination.
+ * @param props The properties to configure the table
+ * @returns The table instance and the state of the table
  */
 const useFullyControlledReactDataTable = <TData, TFilter extends FilterModel>(
   props: useFullyControlledReactDataTableProps<TData, TFilter>,

src/lib/useReactDataTable/useReactDataTable.tsx

@@ -21,7 +21,10 @@ import { useMemo } from "react";
 
 /**
  * A react hook that returns a react table instance and the state of the table
+ * @param props The properties to configure the table
+ * @returns The table instance and the state of the table
  */
+// eslint-disable-next-line complexity
 const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, never>>(
   props: useReactDataTableProps<TData, TFilter>,
 ): useReactDataTableResult<TData, TFilter> => {
@@ -96,14 +99,14 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
   const effectiveOnColumnPinningChange = onColumnPinningChange ?? setColumnPinningInternal;
 
   // If we active the manual filtering, we have to unset the filter function, else it still does automatic filtering
-  if (manualFiltering) columns.forEach((x) => (x.filterFn = undefined));
+  if (manualFiltering) for (const x of columns) x.filterFn = undefined;
 
   const internalColumns = columns.filter((x) => x.meta?.isHidden !== true);
   const skeletonColumns = internalColumns.map((column) => ({
     ...column,
     cell: () => <Skeleton />,
   }));
-  const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({} as TData));
+  const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({}) as TData);
 
   const columnFilters = useMemo(() => getColumnFilterFromModel(effectiveColumnFilters), [effectiveColumnFilters]);
   const sorting = useMemo(() => getSortingStateFromModel(effectiveSorting), [effectiveSorting]);
@@ -113,29 +116,29 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
     columns: isLoading ? skeletonColumns : internalColumns,
 
     onColumnFiltersChange: (filtersOrUpdaterFn) => {
-      const newFilter = typeof filtersOrUpdaterFn !== "function" ? filtersOrUpdaterFn : filtersOrUpdaterFn(columnFilters);
+      const newFilter = typeof filtersOrUpdaterFn === "function" ? filtersOrUpdaterFn(columnFilters) : filtersOrUpdaterFn;
       return effectiveOnColumnFiltersChange(getModelFromColumnFilter(newFilter));
     },
     onPaginationChange: (paginationOrUpdaterFn) => {
-      const newFilter = typeof paginationOrUpdaterFn !== "function" ? paginationOrUpdaterFn : paginationOrUpdaterFn(effectivePagination);
+      const newFilter = typeof paginationOrUpdaterFn === "function" ? paginationOrUpdaterFn(effectivePagination) : paginationOrUpdaterFn;
       return effectiveOnPaginationChange(newFilter);
     },
     onSortingChange: (sortingOrUpdaterFn) => {
-      const newFilter = typeof sortingOrUpdaterFn !== "function" ? sortingOrUpdaterFn : sortingOrUpdaterFn(sorting);
+      const newFilter = typeof sortingOrUpdaterFn === "function" ? sortingOrUpdaterFn(sorting) : sortingOrUpdaterFn;
       return effectiveOnSortingChange(getModelFromSortingState(newFilter));
     },
     onRowSelectionChange: (rowSelectionOrUpdaterFn) => {
       const newRowSelection =
-        typeof rowSelectionOrUpdaterFn !== "function" ? rowSelectionOrUpdaterFn : rowSelectionOrUpdaterFn(effectiveRowSelection);
+        typeof rowSelectionOrUpdaterFn === "function" ? rowSelectionOrUpdaterFn(effectiveRowSelection) : rowSelectionOrUpdaterFn;
       return effectiveOnRowSelectionChange(newRowSelection);
     },
     onExpandedChange: (expandedOrUpdaterFn) => {
-      const newExpanded = typeof expandedOrUpdaterFn !== "function" ? expandedOrUpdaterFn : expandedOrUpdaterFn(effectiveExpanded);
+      const newExpanded = typeof expandedOrUpdaterFn === "function" ? expandedOrUpdaterFn(effectiveExpanded) : expandedOrUpdaterFn;
       return effectiveOnExpandedChange(newExpanded);
     },
     onColumnPinningChange: (columnPinningOrUpdaterFn) => {
       const newColumnPinning =
-        typeof columnPinningOrUpdaterFn !== "function" ? columnPinningOrUpdaterFn : columnPinningOrUpdaterFn(effectiveColumnPinning);
+        typeof columnPinningOrUpdaterFn === "function" ? columnPinningOrUpdaterFn(effectiveColumnPinning) : columnPinningOrUpdaterFn;
       return effectiveOnColumnPinningChange(newColumnPinning);
     },
 
@@ -184,7 +187,7 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
 
   return {
     table,
-    columnFilters: effectiveColumnFilters as TFilter,
+    columnFilters: effectiveColumnFilters,
     pagination: effectivePagination,
     sorting: effectiveSorting,
     rowSelection: effectiveRowSelection,
@@ -199,4 +202,8 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
   };
 };
 
-export { useReactDataTable, useReactDataTableProps, useReactDataTableResult };
+export { useReactDataTable };
+
+export { useReactDataTableProps } from "./useReactDataTableProps";
+
+export { useReactDataTableResult } from "./useReactDataTableResult";

src/lib/useReactDataTableState/useReactDataTableState.ts

@@ -8,6 +8,7 @@ import { OptionalNullable } from "../types/NullableTypes";
 
 /**
  * A custom hook that will initialize all the state needed for the react data table
+ * @param props The properties to configure the initial state
  * @returns the state and the setters
  */
 const useReactDataTableState = <TData, TFilter extends FilterModel = Record<string, never>>(
@@ -46,4 +47,8 @@ const useReactDataTableState = <TData, TFilter extends FilterModel = Record<stri
   };
 };
 
-export { useReactDataTableState, useReactDataTableStateProps, useReactDataTableStateResult };
+export { useReactDataTableState };
+
+export { useReactDataTableStateProps } from "./useReactDataTableStateProps";
+
+export { useReactDataTableStateResult } from "./useReactDataTableStateResult";