chore: Bump Eslint to v9

.storybook/main.ts

@@ -47,9 +47,12 @@ const config: StorybookConfig = {
     webpackFinal: (webpackConfig) => {
         // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook
         const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => {
-            if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule)?.test instanceof RegExp) {
-                return (rule as Record<string, any>).test?.test('.svg');
+            if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule).test instanceof RegExp) {
+                const testRegExp = (rule as RuleSetRule).test as RegExp;
+                return testRegExp.test('.svg');
             }
+
+            return undefined;
         });
 
         if (typeof svgWebpackRule !== 'string') {

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 -   Update minor and patch NPM dependencies
+-   Update `eslint` to v9
 
 ## [1.0.54] - 2024-11-11
 

eslint.config.js

@@ -0,0 +1,108 @@
+const globals = require('globals');
+
+const eslint = require('@eslint/js');
+const tsEslint = require('typescript-eslint');
+
+const importPlugin = require('eslint-plugin-import');
+const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const storybookPlugin = require('eslint-plugin-storybook');
+const tailwindPlugin = require('eslint-plugin-tailwindcss');
+const testingLibraryPlugin = require('eslint-plugin-testing-library');
+
+const tsConfig = require('./tsconfig.json');
+
+const config = tsEslint.config(
+    // Default rules
+    eslint.configs.recommended,
+    importPlugin.flatConfigs.recommended,
+    importPlugin.flatConfigs.typescript,
+    jsxA11yPlugin.flatConfigs.recommended,
+    reactPlugin.configs.flat.recommended,
+    reactPlugin.configs.flat['jsx-runtime'],
+    ...storybookPlugin.configs['flat/recommended'],
+    ...tailwindPlugin.configs['flat/recommended'],
+    ...tsEslint.configs.recommendedTypeChecked,
+    ...tsEslint.configs.strictTypeChecked,
+    ...tsEslint.configs.stylisticTypeChecked,
+    {
+        languageOptions: {
+            globals: {
+                ...globals.node,
+            },
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: __dirname,
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+            'import/resolver': {
+                typescript: true,
+                node: true,
+            },
+            tailwindcss: {
+                callees: ['classnames', 'classNames'],
+            },
+        },
+        plugins: {
+            'react-hooks': reactHooksPlugin,
+        },
+    },
+    {
+        ignores: tsConfig.exclude,
+    },
+    {
+        rules: {
+            'no-console': 'warn',
+            curly: 'warn',
+            'prefer-template': 'warn',
+            'no-useless-concat': 'warn',
+            '@typescript-eslint/no-empty-object-type': ['error', { allowInterfaces: 'always' }],
+            '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+            '@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
+            '@typescript-eslint/no-confusing-void-expression': ['error', { ignoreArrowShorthand: true }],
+            '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
+            '@typescript-eslint/no-non-null-assertion': 'off',
+            'import/no-cycle': 'warn',
+            'react/prop-types': 'off',
+            'react/jsx-boolean-value': ['warn', 'always'],
+            'react/self-closing-comp': 'warn',
+            'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
+            ...reactHooksPlugin.configs.recommended.rules,
+        },
+    },
+    // Rules for JavaScript files
+    {
+        files: ['**/*.js'],
+        ...tsEslint.configs.disableTypeChecked,
+        rules: {
+            ...tsEslint.configs.disableTypeChecked.rules,
+            '@typescript-eslint/no-require-imports': 'off',
+        },
+    },
+    // Rules for test files
+    {
+        files: ['**/*.test.ts', '**/*.test.tsx'],
+        ...testingLibraryPlugin.configs['flat/react'],
+        rules: {
+            ...testingLibraryPlugin.configs['flat/react'].rules,
+            '@typescript-eslint/unbound-method': 'off',
+        },
+    },
+    // Rules for Storybook files
+    {
+        files: ['**/*.stories.tsx'],
+        rules: {
+            'react-hooks/rules-of-hooks': 'off',
+        },
+    },
+);
+
+module.exports = config;

package.json

@@ -113,11 +113,10 @@
     "@types/luxon": "^3.4.2",
     "@types/react-dom": "^18.3.1",
     "@types/sanitize-html": "^2.13.0",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^9.14.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
@@ -144,6 +143,7 @@
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.13.0",
     "viem": "^2.21.44",
     "wagmi": "^2.12.29"
   },

src/core/assets/copy/coreCopy.ts

@@ -19,7 +19,8 @@ export const coreCopy = {
     },
     dataListPagination: {
         more: 'More',
-        outOf: ({ total, entityLabel }: { total: number; entityLabel: string }) => `of ${total} ${entityLabel}`,
+        outOf: ({ total, entityLabel }: { total: number; entityLabel: string }) =>
+            `of ${total.toString()} ${entityLabel}`,
     },
     inputNumberMax: {
         max: 'Max',

src/core/components/accordion/accordionContainer/accordionContainer.stories.tsx

@@ -15,8 +15,8 @@ const meta: Meta<typeof Accordion.Container> = {
 type Story = StoryObj<typeof Accordion.Container>;
 
 const DefaultChildComponent = (childCount: number, forceMount?: true) =>
-    [...Array(childCount)].map((_, index) => (
-        <Accordion.Item key={`item-${index}`} value={`item-${index}`}>
+    [...Array<number>(childCount)].map((_, index) => (
+        <Accordion.Item key={`item-${index.toString()}`} value={`item-${index.toString()}`}>
             <Accordion.ItemHeader>Item {index + 1} Header</Accordion.ItemHeader>
             <Accordion.ItemContent forceMount={forceMount}>
                 <div className="flex h-24 w-full items-center justify-center border border-dashed border-info-300 bg-info-100">

src/core/components/accordion/accordionContainer/accordionContainer.tsx

@@ -33,7 +33,7 @@ export const AccordionContainer = forwardRef<HTMLDivElement, IAccordionContainer
 
     const accordionContainerClasses = classNames('grow bg-neutral-0', className);
 
-    if (isMulti === true) {
+    if (isMulti) {
         return (
             <RadixAccordionRoot
                 className={accordionContainerClasses}

src/core/components/avatars/avatar/avatar.test.tsx

@@ -15,8 +15,8 @@ describe('<Avatar /> component', () => {
 
     beforeAll(() => {
         (window.Image as unknown) = class MockImage {
-            onload: () => void = () => {};
-            src: string = '';
+            onload = jest.fn();
+            src = '';
             constructor() {
                 setTimeout(() => {
                     this.onload();
@@ -39,14 +39,14 @@ describe('<Avatar /> component', () => {
         expect(screen.queryByRole('img')).not.toBeInTheDocument();
     });
 
-    it('does not render fallback when valid image provided', async () => {
+    it('does not render fallback when valid image provided', () => {
         const fallbackContent = 'fallback content';
         render(createTestComponent({ fallback: fallbackContent, src: 'img.jpg' }));
 
         expect(screen.queryByText(fallbackContent)).not.toBeInTheDocument();
     });
 
-    it('renders loading animation while image is loading', async () => {
+    it('renders loading animation while image is loading', () => {
         render(createTestComponent({ src: 'img.jpg' }));
 
         const fallback = screen.getByTestId('fallback');

src/core/components/button/button.stories.tsx

@@ -42,7 +42,6 @@ export const OnlyIcon: Story = {
 export const Link: Story = {
     args: {
         children: 'Link label',
-        onClick: () => alert('click'),
         href: 'https://www.google.com',
         target: '_blank',
     },

src/core/components/button/button.tsx

@@ -238,7 +238,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, IButtonP
     });
 
     const iconSize = sizeToIconSize[size][buttonContext];
-    const iconResponsiveSize = Object.keys(responsiveSize ?? {}).reduce<ResponsiveAttribute<IconSize>>(
+    const iconResponsiveSize = Object.keys(responsiveSize).reduce<ResponsiveAttribute<IconSize>>(
         (current, breakpoint) => ({
             ...current,
             [breakpoint]: sizeToIconSize[responsiveSize[breakpoint as Breakpoint]!][buttonContext],
@@ -247,7 +247,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, IButtonP
     );
 
     const spinnerSize = sizeToSpinnerSize[size];
-    const spinnerResponsiveSize = Object.keys(responsiveSize ?? {}).reduce<ResponsiveAttribute<SpinnerSize>>(
+    const spinnerResponsiveSize = Object.keys(responsiveSize).reduce<ResponsiveAttribute<SpinnerSize>>(
         (current, breakpoint) => ({
             ...current,
             [breakpoint]: sizeToSpinnerSize[responsiveSize[breakpoint as Breakpoint]!],

src/core/components/cards/cardCollapsible/cardCollapsible.test.tsx

@@ -1,12 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { CardCollapsible, type ICardCollapsibleProps } from './cardCollapsible';
 
-global.ResizeObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-};
-
 describe('<CardCollapsible /> component', () => {
     const createTestComponent = (props?: Partial<ICardCollapsibleProps>) => {
         const completeProps = { ...props };

src/core/components/cards/cardSummary/cardSummary.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
     args: {
         value: '5',
         description: 'Proposals created',
-        action: { label: 'Proposal', onClick: () => alert('Click') },
+        action: { label: 'Proposal' },
         icon: IconType.APP_PROPOSALS,
     },
 };
@@ -34,7 +34,7 @@ export const HorizontalLayout: Story = {
     args: {
         value: '22',
         description: 'Members',
-        action: { label: 'Delegate', onClick: () => alert('Click') },
+        action: { label: 'Delegate' },
         icon: IconType.APP_MEMBERS,
         isStacked: false,
     },

src/core/components/collapsible/collapsible.test.tsx

@@ -10,21 +10,6 @@ describe('<Collapsible /> component', () => {
         return <Collapsible {...completeProps} />;
     };
 
-    let originalResizeObserver: typeof global.ResizeObserver;
-
-    beforeAll(() => {
-        originalResizeObserver = global.ResizeObserver;
-        global.ResizeObserver = class {
-            observe() {}
-            unobserve() {}
-            disconnect() {}
-        };
-    });
-
-    afterAll(() => {
-        global.ResizeObserver = originalResizeObserver;
-    });
-
     beforeEach(() => {
         jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(500);
     });