---
env:
  browser: true
  commonjs: true
  es6: true
  jest: true
  node: true
ignorePatterns:
  - "jest.polyfills.js"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - plugin:eslint-comments/recommended
  - plugin:import/recommended
  - plugin:import/typescript
  - plugin:react/recommended
  - plugin:jsx-a11y/strict
  - plugin:compat/recommended
  - prettier
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: 2018
  project: "./tsconfig.json"
  sourceType: module
  ecmaFeatures:
    jsx: true
  # REMARK(Grey): We might want to move this to repository root eventually to
  #               lint multiple projects (supply array to project property).
  tsconfigRootDir: "./"
plugins:
  - "@typescript-eslint"
  - import
  - react-hooks
  - jest
  - unicorn
  - testing-library
overrides:
  - files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"]
    extends: ["plugin:testing-library/react", "plugin:testing-library/dom"]
    rules:
      # Occasionally, we must traverse the DOM when querying for an element to
      # avoid the performance costs that come with using selectors like ByRole.
      # You can read more about these performance costs here:
      # https://coder.com/docs/v2/latest/contributing/frontend#tests-getting-too-slow.
      testing-library/no-node-access: off
      testing-library/no-container: off
  - files: ["e2e/**/*.[tj]s"]
    extends: ["plugin:testing-library/react", "plugin:testing-library/dom"]
    rules:
      # Sometimes the eslint-plugin-testing-library believes playwright queries are
      # also react-testing-library queries, which is not the case. So we disable this
      # rule for all e2e tests.
      testing-library/prefer-screen-queries: "off"
root: true
rules:
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-misused-promises": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-unsafe-argument": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-unsafe-assignment": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-unsafe-call": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-unsafe-member-access": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/no-unsafe-return": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/require-await": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/restrict-plus-operands": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/restrict-template-expressions": "off"
  # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
  "@typescript-eslint/unbound-method": "off"

  "@typescript-eslint/brace-style":
    ["error", "1tbs", { "allowSingleLine": false }]
  "@typescript-eslint/consistent-type-imports":
    - error
    - fixStyle: inline-type-imports
  "@typescript-eslint/method-signature-style": ["error", "property"]
  "@typescript-eslint/no-import-type-side-effects": "error"
  # We're disabling the `no-namespace` rule to use a pattern of defining an interface,
  # and then defining functions that operate on that data via namespace. This is helpful for
  # dealing with immutable objects. This is a common pattern that shows up in some other
  # large TypeScript projects, like VSCode.
  # More details: https://github.com/coder/m/pull/9720#discussion_r697609528
  "@typescript-eslint/no-namespace": "off"
  "@typescript-eslint/no-unused-vars":
    - error
    - argsIgnorePattern: "^_"
      varsIgnorePattern: "^_"
      ignoreRestSiblings: true
  "@typescript-eslint/no-empty-interface":
    - error
    - allowSingleExtends: true
  "brace-style": "off"
  "curly": ["error", "all"]
  "eslint-comments/disable-enable-pair":
    - error
    - allowWholeFile: true
  "eslint-comments/require-description": "error"
  eqeqeq: error
  import/default: "off"
  import/namespace: "off"
  import/newline-after-import:
    - error
    - count: 1
  import/no-named-as-default: "off"
  import/no-named-as-default-member: "off"
  import/prefer-default-export: "off"
  import/order:
    - error
    - groups: [["builtin", "external"], "internal", "parent"]
      newlines-between: never
      alphabetize:
        order: asc
        caseInsensitive: true
  jest/no-focused-tests: "error"
  jsx-a11y/label-has-for: "off"
  jsx-a11y/no-autofocus: "off"
  no-console:
    - warn
    - allow:
        - warn
        - error
        - info
        - debug
  no-dupe-class-members: "off"
  no-implicit-coercion: "error"
  no-restricted-imports:
    - error
    - paths:
        - name: "@mui/material"
          message:
            "Use path imports to avoid pulling in unused modules. See:
            https://material-ui.com/guides/minimizing-bundle-size/"
        - name: "@mui/icons-material"
          message:
            "Use path imports to avoid pulling in unused modules. See:
            https://material-ui.com/guides/minimizing-bundle-size/"
        - name: "@mui/material/Avatar"
          message:
            "You should use the Avatar component provided on
            components/Avatar/Avatar"
        - name: "@mui/material/Alert"
          message:
            "You should use the Alert component provided on
            components/Alert/Alert"
        - name: "@mui/material/Popover"
          message:
            "You should use the Popover component provided on
            components/Popover/Popover"
        - name: "@mui/material/Typography"
          message:
            "You should use the native HTML elements as span, p, h1, h2, h3..."
        - name: "@mui/material/Box"
          message: "You should use a <div> instead"
        - name: "@mui/material/styles"
          importNames: ["Interpolation", "Theme", "useTheme"]
          message: "Import from @emotion/react instead."
        - name: "lodash"
          message: "Import from lodash/<name> instead."
  no-unused-vars: "off"
  "object-curly-spacing": "off"
  react-hooks/exhaustive-deps: warn
  react-hooks/rules-of-hooks: error
  react/display-name: "off"
  react/jsx-no-script-url:
    - error
    - - name: Link
        props:
          - to
      - name: Button
        props:
          - href
      - name: IconButton
        props:
          - href
  react/prop-types: "off"
  react/jsx-boolean-value: ["error", "never"]
  react/jsx-curly-brace-presence:
    - error
    - children: ignore
  # https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
  react/jsx-key: error
  react/jsx-uses-react: "off"
  react/no-unknown-property: ["error", { ignore: ["css"] }]
  react/react-in-jsx-scope: "off"
  # https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944
  no-restricted-syntax:
    [
      "error",
      {
        selector: "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
        message: "Default React import not allowed",
      },
    ]
settings:
  react:
    version: detect
  import/resolver:
    typescript: {}