eslint.config.mjs

import path from 'node:path';
import globals from 'globals';
import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import { configs } from 'eslint-config-airbnb-extended/legacy';
import { rules as prettierConfigRules } from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import storybook from 'eslint-plugin-storybook';
import comments from '@eslint-community/eslint-plugin-eslint-comments/configs';
import reactPerf from 'eslint-plugin-react-perf';
import jsdoc from 'eslint-plugin-jsdoc';

const gitignorePath = path.resolve('.', '.gitignore');
const allFiles = [
  '**/*.js',
  '**/*.cjs',
  '**/*.mjs',
  '**/*.jsx',
  '**/*.ts',
  '**/*.cts',
  '**/*.mts',
  '**/*.tsx',
  '**/*.d.ts',
];

const customIgnores = [
  {
    name: 'x/ignores',
    ignores: ['!.storybook'],
  },
  {
    name: 'playwright',
    ignores: ['./test-vr/playwright-report', './test-vr/screenshots', './test-vr/playwright'],
  },
  {
    name: 'webpack',
    ignores: ['./webpack.config.js'],
  },
  {
    name: 'www autogenerated',
    ignores: ['./www/docs'],
  },
];

const languageOptions = [
  {
    name: 'x/language-options',
    files: allFiles,
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.jest,
      },
    },
  },
];

const jsConfig = [
  // ESLint Recommended Rules
  {
    name: 'js/config',
    ...js.configs.recommended,
  },
  // NOTE: DO NOT ADD ANYTHING AFTER THIS LINE BECAUSE IT WILL BE OVERWRITTEN BY AIRBNB CONFIG
];

const reactConfig = [
  // Airbnb React Recommended Config
  ...configs.react.recommended,
  // Airbnb React Hooks Config
  ...configs.react.hooks,
  {
    name: 'x/general',
    rules: {
      'no-var': 'error',
      'no-unused-vars': 'off',
      'one-var': [
        'error',
        {
          uninitialized: 'always',
        },
      ],
      'one-var-declaration-per-line': ['error', 'initializations'],
      'no-plusplus': 'off',
      'no-bitwise': 'off',
      'class-methods-use-this': ['warn', { ignoreClassesWithImplements: 'public-fields' }],
      'max-len': 'off',
      'prefer-destructuring': 'error',
      'object-curly-newline': 'off',
      'function-paren-newline': 'off',
      'no-restricted-globals': 'error',
      'no-multi-assign': 'off',
      'no-use-before-define': 'off',
      /*
       * Typescript already handles no-redeclare, so we don't need to enforce it with ESLint.
       * Also, Typescript handles it better because TS can handle function overloads
       * which ESLint doesn't.
       * See: https://typescript-eslint.io/rules/no-redeclare/
       */
      'no-redeclare': 'off',
      'no-restricted-imports': [
        'error',
        {
          paths: [
            {
              name: 'lodash',
              message: 'Import [module] from lodash/[module] instead',
            },
          ],
          patterns: [
            {
              group: ['recharts/types/*', 'recharts/src/*'],
              message:
                'Examples should only show usage of public API. Import from the public API (recharts) instead of internal paths. If a symbol is not exported, but it would be useful in an example, then it should be exported.',
            },
          ],
        },
      ],
    },
  },
  {
    name: 'x/import',
    rules: {
      'import/extensions': 'off',
      'import/no-extraneous-dependencies': [
        'error',
        {
          devDependencies: true,
          packageDir: ['.', './www'],
        },
      ],
      'import/prefer-default-export': 'off',
      'import/no-named-as-default': 'error',
      'import/no-cycle': 'error',
      'import/no-default-export': 'error',
      'import/no-import-module-exports': 'error',
      'import/no-relative-packages': 'off',
    },
  },
  {
    name: 'x/react',
    rules: {
      'react/jsx-key': [
        'error',
        {
          checkFragmentShorthand: true,
          checkKeyMustBeforeSpread: true,
          warnOnDuplicates: true,
        },
      ],
      'react/no-did-update-set-state': 'warn',
      'react/jsx-no-constructed-context-values': 'warn',
      'react/no-unused-class-component-methods': 'off',
      'react/sort-comp': 'off',
      'react/jsx-uses-react': 'error',
      'react/jsx-uses-vars': 'error',
      'react/react-in-jsx-scope': 'error',
      'react/jsx-filename-extension': [
        'error',
        {
          extensions: ['.ts', '.tsx', '.js', '.jsx'],
        },
      ],
      'react/jsx-no-bind': 'error',
      'react/prop-types': 'off',
      'react/no-unused-prop-types': 'off',
      'react/require-default-props': 'off',
      'react/default-props-match-prop-types': 'off',
      'react/function-component-definition': 'off',
      /**
       * In a chart, using the index as key is acceptable because the order of items
       * has meaning. Reordering, or removing elements creates a whole new chart.
       * For Recharts, array index is a good identifier.
       */
      'react/no-array-index-key': 'off',
      'react/no-access-state-in-setstate': 'off',
      'react/destructuring-assignment': 'off',
      'react/jsx-closing-tag-location': 'error',
      'react/no-unused-state': 'error',
      'react/prefer-stateless-function': 'error',
      'react/jsx-props-no-spreading': 'off',
      'react/state-in-constructor': 'off',
      'react/static-property-placement': 'off',
    },
  },
  {
    name: 'x/jsx-a11y',
    rules: {
      'jsx-a11y/label-has-associated-control': ['error', { assert: 'either', depth: 2 }],
    },
  },
];

const typescriptConfig = [
  // Typescript ESLint Recommended Config
  ...tseslint.configs.recommended,
  {
    name: 'x/typescript-eslint',
    rules: {
      '@typescript-eslint/no-use-before-define': 'error',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          args: 'after-used',
          ignoreRestSiblings: true,
          argsIgnorePattern: '^_',
        },
      ],
    },
  },
];

const storybookConfig = [
  // Storybook Config
  ...storybook.configs['flat/recommended'],
];

const prettierConfig = [
  // Prettier Plugin
  {
    name: 'prettier/plugin/config',
    plugins: {
      prettier: prettierPlugin,
    },
  },
  // Prettier Config
  {
    name: 'prettier/config',
    rules: {
      ...prettierConfigRules,
      'prettier/prettier': 'error',
      'arrow-body-style': 'off',
      'prefer-arrow-callback': 'off',
    },
  },
];

const commentsConfig = [
  // ESLint Community ESLint Comments
  {
    name: comments.recommended.name,
    plugins: comments.recommended.plugins,
    rules: {
      '@eslint-community/eslint-comments/no-unused-disable': 'error',
    },
  },
];

const overridesConfig = [
  {
    name: 'x/override-1',
    files: ['./test/**/*.tsx'],
    rules: {
      'react/jsx-no-useless-fragment': 'off',
    },
  },
  {
    // https://github.com/airbnb/javascript/issues/1271#issuecomment-548688952
    name: 'allow-for-loop',
    files: allFiles,
    rules: {
      'no-restricted-syntax': [
        'error',
        {
          selector: 'LabeledStatement',
          message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
        },
        {
          selector: 'WithStatement',
          message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
        },
      ],
    },
  },
  {
    name: 'allow-continue',
    files: allFiles,
    rules: {
      'no-continue': 'off',
    },
  },
  {
    name: 'x/override-2',
    files: ['./storybook/**/*.stories.@(ts|tsx)', './storybook/**/*.@(ts|tsx)', '*.js'],
    rules: {
      'no-useless-constructor': 'off',
      'import/no-default-export': 'off',
      /*
       * eslint/import reports false positive errors after bumping to storybook 9
       * https://github.com/storybookjs/storybook/issues/31863
       * This is safe to disable because typescript is checking for imports too
       * so we still get alerted in case of a typo or something.
       */
      'import/no-unresolved': 'off',
      'react-hooks/rules-of-hooks': 'off',
    },
  },
  {
    name: 'x/override-3',
    files: ['src/state/*Slice.ts', 'test/**/*.spec.tsx'],
    // param-reassign is allowed in slices following Redux recommendation: https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations
    rules: {
      'no-param-reassign': ['error', { props: false }],
    },
  },
  {
    name: 'scripts override',
    files: ['scripts/*.js', 'scripts/*.mjs', 'www/scripts/*.tsx'],
    rules: {
      '@typescript-eslint/no-require-imports': 'off',
      'no-console': 'off',
    },
  },
  {
    name: 'x/override-5',
    files: ['eslint.config.mjs', 'prettier.config.mjs', 'stryker.config.mjs'],
    rules: {
      'import/no-default-export': 'off',
    },
  },
  {
    name: 'website-overrides',
    files: ['www/**/*'],
    rules: {
      /*
       * There is something in React 17+ that no longer requires React to be in scope? I think.
       */
      'react/react-in-jsx-scope': 'off',
      /*
       * We use this vite feature to import both the code, and the source code as a string.
       */
      'import/no-duplicates': 'off',
      /*
       * This is a good recommendation, but we have so many that I will leave this as a warning for now.
       */
      'import/no-default-export': 'warn',
    },
  },
  {
    name: 'default-export-override',
    /*
     * Files on the website, that are not index, and that are public examples
     * must have only default export, because they are passed to react-runner
     * which requires default export.
     */
    basePath: './www/src',
    files: [
      'docs/exampleComponents/**/*.tsx',
      'docs/exampleComponents/**/*.ts',
      'docs/apiExamples/**/*.tsx',
      'docs/apiExamples/**/*.ts',
      'components/GuideView/*/*.tsx',
      'components/GuideView/*/*.ts',
      'views/IndexView/*.tsx',
      'views/IndexView/*.ts',
    ],
    ignores: ['**/index.ts', '**/index.tsx'],
    rules: {
      'import/no-default-export': 'off',
      'import/prefer-default-export': 'error',
    },
  },
  {
    name: 'vite-config-override',
    /*
     * Vite config files use default export by convention.
     */
    files: ['**/vite.config*', '**/vitest.config*'],
    rules: {
      'import/no-default-export': 'off',
    },
  },
  {
    name: 'test-helpers-override',
    /*
     * Test helpers sometimes use console logs for debugging purposes.
     */
    files: ['test/helper/**'],
    rules: {
      'no-console': 'off',
    },
  },
];

const omnidocOverrides = [
  {
    name: 'omnidoc-overrides',
    files: ['omnidoc/**'],
    rules: {
      // class methods are not required to use `this` in omnidoc scripts
      'class-methods-use-this': 'off',
      // omnidoc can use console logs
      'no-console': 'off',
      // we're okay if the docs are generated sequentially
      'no-await-in-loop': 'off',
    },
  },
];

const settings = [
  {
    name: 'x/settings',
    files: allFiles,
    settings: {
      'import/resolver': {
        typescript: {},
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx'],
        },
      },
    },
  },
];

const perfOptimization = {
  name: 'perf-optimization-examples',
  files: ['./www/src/docs/exampleComponents/LineChart/CompareTwoLines.tsx'],
  plugins: { 'react-perf': reactPerf },
  rules: {
    // new object as prop creates a new reference on each render - but we can memo this one
    // 'react-perf/jsx-no-new-object-as-prop': 'error',
    'react-perf/jsx-no-new-array-as-prop': 'error',
    'react-perf/jsx-no-new-function-as-prop': 'error',
    'react-perf/jsx-no-jsx-as-prop': 'error',
  },
};

const generatedApiDocsOverrides = {
  name: 'generated-api-docs-overrides',
  files: ['www/src/docs/api/**', 'storybook/stories/API/arg-types/**'],
  rules: {
    // These files are autogenerated so we can be less strict on the contents
    'no-template-curly-in-string': 'off',
  },
};

const jsdocConfig = [
  {
    name: 'jsdoc/config',
    files: allFiles,
    plugins: {
      jsdoc,
    },
    settings: {
      jsdoc: {
        mode: 'typescript',
      },
    },
    rules: {
      'jsdoc/match-description': [
        'error',
        {
          contexts: ['any'],
          matchDescription: '[\\s\\S]*',
          tags: {
            see: {
              match: '^(?!http).*',
              message:
                '@see must not immediately follow http. Use {@link ...} instead. If you use @see https://example.com, then omnidoc splits the https and example.com and the link will be malformed in docs.',
            },
          },
        },
      ],
    },
  },
];

export default [
  // Ignore .gitignore files/folder in eslint
  includeIgnoreFile(gitignorePath),
  // Custom Ignores
  ...customIgnores,
  // Language Options
  ...languageOptions,
  // Javascript Config
  ...jsConfig,
  // React Config
  ...reactConfig,
  // TypeScript Config
  ...typescriptConfig,
  // Storybook Config
  ...storybookConfig,
  // Prettier Config
  ...prettierConfig,
  // ESLint Comments
  ...commentsConfig,
  // Overrides
  ...overridesConfig,
  // Settings
  ...settings,
  // Omnidoc Overrides
  ...omnidocOverrides,
  // JSDoc Config
  ...jsdocConfig,
  generatedApiDocsOverrides,
  perfOptimization,
];