chore: update code quality tools (#6894)

Author: kyletsang

.eslintignore

@@ -0,0 +1,94 @@
+import eslint from '@eslint/js';
+import globals from 'globals';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+
+  prettierPlugin,
+  react.configs.flat.recommended,
+  react.configs.flat['jsx-runtime'],
+
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.mts'],
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: {
+          jsx: true,
+        },
+        warnOnUnsupportedTypeScriptVersion: false,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          caughtErrors: 'none',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: false,
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['**/node_modules/**', '**/lib/**', '**/www/**'],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+        ...globals.node,
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+  },
+  {
+    files: ['**/test/**/*'],
+    rules: {
+      'no-script-url': 'off',
+      'no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'padded-blocks': 'off',
+      'react/no-multi-comp': 'off',
+      'react/display-name': 'off',
+    },
+  },
+  {
+    rules: {
+      'react/prop-types': 'off',
+      'react/no-unknown-property': ['error', { ignore: ['x-placement'] }],
+    },
+  },
+);

.eslintrc

@@ -41,8 +41,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "check-types": "tsc -p ./test/tsconfig.json --noEmit",
     "deploy-docs": "yarn --cwd www deploy",
-    "format": "eslint --ext tsx --ext ts src --fix",
-    "lint": "eslint --ext tsx --ext ts src && tsc --noEmit && yarn check-types",
+    "lint": "eslint src test",
     "prepublishOnly": "npm run build",
     "release": "rollout",
     "start": "yarn --cwd www start",
@@ -77,51 +76,40 @@
     "@4c/tsconfig": "^0.4.1",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",
-    "@babel/eslint-parser": "^7.24.1",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.22.15",
     "@react-bootstrap/babel-preset": "^2.2.0",
-    "@react-bootstrap/eslint-config": "^3.0.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.2.0",
     "@types/invariant": "^2.2.37",
-    "@types/mocha": "^10.0.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/warning": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "@vitest/browser": "^2.1.3",
-    "@vitest/coverage-istanbul": "^2.1.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.4",
+    "@vitest/coverage-istanbul": "^3.0.4",
     "babel-loader": "^9.1.3",
-    "babel-plugin-istanbul": "^6.1.1",
     "chalk": "^4.1.2",
     "cherry-pick": "^0.5.0",
-    "conventional-changelog-cli": "^2.2.2",
-    "cpy-cli": "^3.1.1",
+    "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "dtslint": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-config-4catalyzer-typescript": "^3.3.0",
-    "eslint-import-resolver-node": "^0.3.9",
-    "eslint-import-resolver-webpack": "^0.13.8",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.1.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "lodash": "^4.17.21",
-    "playwright": "^1.45.3",
-    "prettier": "^3.3.2",
-    "process": "^0.11.10",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "playwright": "^1.50.0",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4",
-    "vitest": "^2.1.3",
+    "typescript-eslint": "^8.22.0",
+    "vitest": "^3.0.4",
     "webpack": "^5.93.0"
   },
   "peerDependencies": {

.travis.yml

@@ -77,6 +77,7 @@ const AbstractModalHeader = React.forwardRef<
   },
 );
 
+AbstractModalHeader.displayName = 'AbstractModalHeader';
 AbstractModalHeader.propTypes = propTypes;
 
 export default AbstractModalHeader;

eslint.config.mjs

@@ -20,8 +20,7 @@ class BootstrapModalManager extends ModalManager {
     adjust: number,
   ) {
     const actual = element.style[prop];
-    // TODO: DOMStringMap and CSSStyleDeclaration aren't strictly compatible
-    // @ts-ignore
+    // @ts-expect-error TODO: DOMStringMap and CSSStyleDeclaration aren't strictly compatible
     element.dataset[prop] = actual;
     css(element, {
       [prop]: `${parseFloat(css(element, prop as any)) + adjust}px`,

karma.conf.js

@@ -35,7 +35,7 @@ export interface CarouselRef {
 
 export interface CarouselProps
   extends BsPrefixProps,
-  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   slide?: boolean;
   fade?: boolean;
   controls?: boolean;
@@ -56,7 +56,9 @@ export interface CarouselProps
   nextIcon?: React.ReactNode;
   nextLabel?: React.ReactNode;
   variant?: CarouselVariant;
-  ref?: React.Ref<CarouselRef> | React.MutableRefObject<CarouselRef | undefined>
+  ref?:
+    | React.Ref<CarouselRef>
+    | React.MutableRefObject<CarouselRef | undefined>;
 }
 
 const SWIPE_THRESHOLD = 40;
@@ -197,6 +199,7 @@ function isVisible(element) {
 }
 
 const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
+  // eslint-disable-next-line react/display-name
   React.forwardRef<CarouselRef, CarouselProps>(
     ({ defaultActiveIndex = 0, ...uncontrolledProps }, ref) => {
       const {
@@ -589,9 +592,9 @@ const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
                         child.props.className,
                         isActive && status !== 'entered' && orderClassName,
                         (status === 'entered' || status === 'exiting') &&
-                        'active',
+                          'active',
                         (status === 'entering' || status === 'exiting') &&
-                        directionalClassName,
+                          directionalClassName,
                       ),
                     })
                   }

package.json

@@ -29,7 +29,7 @@ type ColOrder = ColOrderNumber | 'first' | 'last';
 type ColSize = boolean | 'auto' | NumberAttr;
 type ColSpec =
   | ColSize
-  | { span?: ColSize; offset?: NumberAttr; order?: ColOrder };
+  | { span?: ColSize | null; offset?: NumberAttr; order?: ColOrder };
 
 export interface ColProps
   extends BsPrefixProps,