.eslintrc.yaml

env:
  browser: true
  es6: true
  node: true

ignorePatterns:
  - dist
  - out
  - template
  - "packages/**/wasm/*.js"
  - "!.storybook"
  - storybook-static

plugins:
  - file-progress
  - tss-unused-classes
  - "@foxglove/eslint-plugin-studio"

extends:
  - plugin:@foxglove/base
  - plugin:@foxglove/react
  - plugin:@foxglove/jest
  - plugin:storybook/recommended

settings:
  import/internal-regex: "^@foxglove"

rules:
  "@foxglove/license-header": error
  "@foxglove/prefer-hash-private": error
  "@foxglove/studio/link-target": error

  tss-unused-classes/unused-classes: error

  # show progress while linting
  file-progress/activate: warn

  # enabled in .eslintrc.ci.yaml
  prettier/prettier: off
  import/no-self-import: off
  import/no-duplicates: off

  id-denylist:
    - error
    - useEffectOnce
    - window # don't allow redefining window
  no-console: off # configured in no-restricted-syntax

  react/jsx-uses-react: off
  react/prop-types: off # Unnecessary with typescript validation
  react-hooks/exhaustive-deps:
    - error
    - additionalHooks: "(useAsync(?!AppConfigurationValue))|useCallbackWithToast"
  react/jsx-curly-brace-presence: [error, never]

  # The _sx_ property is slow
  # https://stackoverflow.com/questions/68383046/is-there-a-performance-difference-between-the-sx-prop-and-the-makestyles-function
  react/forbid-component-props:
    - error
    - forbid:
        - propName: "sx"
          message: "Use of the sx prop is not advised due to performance issues. Consider using alternative styling methods instead."

  no-warning-comments:
    - error
    - terms: ["fixme", "xxx", "todo"]
      location: anywhere

  no-restricted-imports:
    - error
    - paths:
        - name: "@emotion/styled"
          importNames: [styled]
          message: "@emotion/styled has performance implications. Use tss-react/mui instead."

        - name: "@mui/material"
          importNames: [styled]
          message: "@mui/styled has performance implications. Use tss-react/mui instead."

        - name: "@mui/system"
          importNames: [styled]
          message: "@mui/styled has performance implications. Use tss-react/mui instead."

        - name: "@mui/material/styles/styled"
          message: "@mui/styled has performance implications. Use tss-react/mui instead."

        - name: "@mui/material"
          importNames: [Box]
          message: "@mui/Box has performance implications. Use tss-react/mui instead."

        - name: "@mui/system"
          importNames: [Box]
          message: "@mui/Box has performance implications. Use tss-react/mui instead."

        - name: "lodash"
          importNames: [get]
          message: "Use optional chaining instead of lodash.get."

        - name: "lodash/get"
          message: "Use optional chaining instead of lodash.get."

  no-restricted-syntax:
    - error
    - selector: "MethodDefinition[kind='get'], Property[kind='get']"
      message: "Property getters are not allowed; prefer function syntax instead."
    - selector: "MethodDefinition[kind='set'], Property[kind='set']"
      message: "Property setters are not allowed; prefer function syntax instead."

    # We disable console methods here rather than using no-console so that it doesn't prohibit overrides such as "console.info = ..."
    - selector: "CallExpression[callee.object.name='console'][callee.property.name!=/^(warn|error|debug|assert)$/]"
      message: "Unexpected property on console object was called"

    - selector: "TSNullKeyword, Literal[raw=null]"
      message: >
        Prefer undefined instead of null. When required for React refs/components, use
        the `ReactNull` alias. Otherwise, if strictly necessary, disable this error with
        `// eslint-disable-next-line no-restricted-syntax`. For rationale, see:
        https://github.com/sindresorhus/meta/discussions/7"

    - selector: "CallExpression[callee.name='setTimeout'][arguments.length<2]"
      message: "`setTimeout()` must be invoked with at least two arguments."
    - selector: "CallExpression[callee.name='setInterval'][arguments.length<2]"
      message: "`setInterval()` must be invoked with at least two arguments."

  jest/expect-expect:
    [error, { assertFunctionNames: [expect*, sendNotification.expectCalledDuringTest] }]

overrides:
  - files: ["*.ts", "*.tsx"]
    extends:
      - plugin:@foxglove/typescript
    parserOptions:
      project: ./tsconfig.eslint.json
    rules:
      "@typescript-eslint/ban-ts-comment":
        - error
        - ts-expect-error: allow-with-description

      "@typescript-eslint/explicit-member-accessibility": error

      "@typescript-eslint/no-inferrable-types": off # It's sometimes useful to explicitly name to guard against future changes
      "@typescript-eslint/no-empty-function": off
      "@typescript-eslint/no-implied-eval": off # We need to use `new Function()`

      # These are related to `any` types, which we generally don't have except from imports
      "@typescript-eslint/no-unsafe-member-access": off
      "@typescript-eslint/no-unsafe-return": off
      "@typescript-eslint/no-unsafe-assignment": off
      "@typescript-eslint/no-unsafe-call": off

      "@typescript-eslint/require-await": off # Async functions without await are used to satisfy interface requirements

      # These could theoretically be turned on (or merit investigation) but are currently noisy
      "@typescript-eslint/no-misused-promises": off # Often used with e.g. useCallback(async () => {})
      "@typescript-eslint/restrict-template-expressions": off

      "@typescript-eslint/prefer-regexp-exec": off
      "@typescript-eslint/no-unnecessary-condition": error
      "@typescript-eslint/unbound-method": [error, { ignoreStatic: true }]

  - rules:
      "@typescript-eslint/no-explicit-any": off
    files:
      - "**/*.stories.tsx"
      - "**/*.test.tsx"
      - "**/*.test.ts"

  - rules:
      react/forbid-component-props: off
    files:
      - "**/*.stories.tsx"

  - rules:
      "@foxglove/no-restricted-imports": off
    files:
      # Ignore existing implementations of @mui/styled and @mui/Box
      - "packages/studio-base/src/components/DataSourceSidebar/DataSourceSidebar.tsx"
      - "packages/studio-base/src/components/LayoutBrowser/LayoutRow.tsx"
      - "packages/studio-base/src/panels/Image/components/Toolbar.tsx"
      - "packages/studio-base/src/panels/Image/components/ZoomMenu.tsx"