eslint.config.js

import panda from '@pandacss/eslint-plugin'
import stylistic from '@stylistic/eslint-plugin'
import typescriptEslint from '@typescript-eslint/eslint-plugin'
import typescriptParser from '@typescript-eslint/parser'
import exportDefaultIdentifier from 'eslint-plugin-export-default-identifier'
import importPlugin from 'eslint-plugin-import'
import jsdoc from 'eslint-plugin-jsdoc'
import prettier from 'eslint-plugin-prettier'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import em from './packages/eslint-plugin-em/index.js'

const rules = {
  'no-irregular-whitespace': 2,
  'no-extra-semi': 2,
  'prefer-const': 2,
  'no-loop-func': 1,
  'no-useless-constructor': 1,
  'react/display-name': 2,
  'no-restricted-globals': [
    2,
    {
      name: 'localStorage',
      message:
        "Use the storage abstraction (import storage from '../util/storage') instead of accessing localStorage directly. This ensures cross-platform compatibility.",
    },
  ],
  'no-restricted-syntax': [
    2,
    {
      selector: 'MemberExpression[object.name="expect"][property.name="poll"]',
      message:
        'expect.poll runs its callback in node, so every attempt is a devtools round trip on an interval. Wait in the page with page.waitForFunction (or a waitFor* helper) instead, which polls on every animation frame for a fixed handful of protocol messages. To report the value that was actually rendered, catch the wait and read it once — see docs/testing.md § Never wait for wall-clock time.',
    },
    {
      selector: 'MemberExpression[object.name="vi"][property.name=/^(waitFor|waitUntil)$/]',
      message:
        'vi.waitFor polls on a real-time interval. In store and JSDOM tests, initStore and createTestApp already enable fake timers, so flush them instead — await vi.runAllTimersAsync() (wrapped in act when it causes React updates), then assert — which settles the work in one step and fails immediately rather than after the poll timeout. In Puppeteer, wait in the page with page.waitForFunction or a waitFor* helper. See docs/testing.md § Never wait for wall-clock time.',
    },
  ],
  'no-restricted-properties': [
    2,
    {
      object: 'window',
      property: 'getSelection',
      message:
        'Please import the appropriate helper function from /src/device/selection.ts to access the browser selection. This is done to abstract the browser selection API from the rest of the codebase.',
    },
  ],
  'export-default-identifier/export-default-identifier': 0,

  'import/prefer-default-export': [
    2,
    {
      // any: Any exporting file must contain a default export.
      // single: When there is only a single export from a module, prefer using default export over named export.
      target: 'any',
    },
  ],

  'jsdoc/check-alignment': 2,
  'jsdoc/check-indentation': 2,
  'jsdoc/check-syntax': 2,
  'jsdoc/check-types': 2,
  'jsdoc/implements-on-classes': 2,
  'jsdoc/no-types': 2,
  'jsdoc/no-undefined-types': 2,
  'jsdoc/check-tag-names': [
    2,
    {
      definedTags: ['packageDocumentation'],
    },
  ],
  'jsdoc/require-description-complete-sentence': [
    2,
    {
      abbreviations: ['e.g.', 'i.e.'],
    },
  ],
  'jsdoc/require-jsdoc': [
    2,
    {
      contexts: ['VariableDeclarator > ArrowFunctionExpression'],
      enableFixer: false,
      require: {
        ClassDeclaration: true,
        ClassExpression: true,
      },
    },
  ],
  'jsx-a11y/anchor-is-valid': 0,
  '@stylistic/jsx-curly-spacing': 2,
  '@stylistic/jsx-equals-spacing': 2,
  'react/react-in-jsx-scope': 0,
  '@stylistic/jsx-tag-spacing': [2, { beforeSelfClosing: 'allow' }],
  'react/no-children-prop': 0,
  'react/no-unescaped-entities': 0,
  'react/prop-types': 0,
  'react-hooks/exhaustive-deps': 2,
  'prettier/prettier': 2,
  'arrow-body-style': 0,
  'prefer-arrow-callback': 0,
  'em/no-direct-durations-config-import': 2,
}

export default [
  {
    ignores: [
      'node_modules/**',
      '.claude/worktrees/**',
      'packages/**/dist/**/*',
      'packages/**/.build/**/*',
      '**/styled-system/*',
      '**/ios/*',
      '**/android/**',
      '**/desktop/**',
      '**/build/*',
      '**/docs/*',
      '**/functions/*',
      'public/wa-sqlite/**',
    ],
  },
  {
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
      },
    },
    plugins: {
      '@stylistic': stylistic,
      '@stylistic/ts': stylistic,
      'export-default-identifier': exportDefaultIdentifier,
      jsdoc,
      react,
      'react-refresh': reactRefresh,
      prettier,
      '@typescript-eslint': typescriptEslint,
      import: importPlugin,
      'react-hooks': reactHooks,
      '@pandacss': panda,
      em,
    },
    rules,
    settings: {
      react: {
        version: '19',
      },
    },
  },
  // Overrides for specific folders
  {
    files: ['src/e2e/**', '**/__tests__/*'],
    rules: {
      'no-restricted-globals': 0,
      'no-restricted-properties': 0,
      'jsdoc/check-tag-names': 0,
    },
  },
  // Overrides for TypeScript files
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
        project: ['./tsconfig.json', './tsconfig.eslint.json'],
      },
    },
    plugins: {
      '@typescript-eslint': typescriptEslint,
    },
    rules: {
      ...typescriptEslint.configs['eslint-recommended'].rules,
      ...typescriptEslint.configs.recommended.rules,
      semi: [2, 'never'],
      'no-extra-parens': 0,
      'no-unused-vars': 0,
      'no-use-before-define': 0,
      '@stylistic/ts/member-delimiter-style': [
        2,
        {
          multiline: {
            delimiter: 'none',
          },
        },
      ],
      '@typescript-eslint/no-var-requires': 2,
      '@typescript-eslint/no-require-imports': 0,
      '@typescript-eslint/no-explicit-any': 2,
      '@typescript-eslint/prefer-namespace-keyword': 2,
      '@typescript-eslint/no-non-null-assertion': 0,
      '@typescript-eslint/no-use-before-define': 2,
      '@typescript-eslint/no-unused-vars': [2, { args: 'none', caughtErrors: 'none', varsIgnorePattern: '^_' }],
      '@typescript-eslint/explicit-function-return-type': 0,
      '@typescript-eslint/explicit-module-boundary-types': 0,
      '@typescript-eslint/array-type': 2,
      'jsx-quotes': [2, 'prefer-single'],
      'react-refresh/only-export-components': 2,
      'em/no-store-subscribe-in-components': 2,
      ...panda.configs.recommended.rules,
      '@pandacss/no-config-function-in-source': 0,
      '@pandacss/prefer-longhand-properties': 2,
      '@pandacss/no-dynamic-styling': 0,
      '@pandacss/no-hardcoded-color': [
        2,
        {
          whitelist: ['inherit', 'currentColor'],
        },
      ],
      '@pandacss/no-property-renaming': 2,
      '@typescript-eslint/return-await': ['error', 'in-try-catch'],
    },
  },

  {
    files: ['./src/**/*.ts', './src/**/*.tsx'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2018,
        sourceType: 'module',
        project: './tsconfig.json',
      },
    },
  },
  // The iOS WebdriverIO tests are typechecked by their own tsconfig, the only program that declares
  // WebdriverIO's globals (browser, $, expect) and @wdio/browserstack-service's global interfaces. The root
  // tsconfig excludes src/e2e/iOS, so type-aware linting of those files has to use theirs.
  {
    files: ['./src/e2e/iOS/**/*.ts'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2018,
        sourceType: 'module',
        project: './src/e2e/iOS/tsconfig.json',
      },
    },
  },
  {
    files: ['./src/e2e/**/*.ts'],
    rules: {
      'jsdoc/check-tag-names': 0,
    },
  },
  // Allow direct localStorage access only in the storage abstraction layer
  {
    files: ['./src/util/storage.ts'],
    rules: {
      'no-restricted-globals': 0,
    },
  },
  // actions/github-script evaluates its `script:` body in a CommonJS context and resolves relative
  // require() paths against the workspace, so the scripts it loads must be CommonJS. package.json
  // sets "type": "module", hence the .cjs extension.
  {
    files: ['**/*.cjs'],
    languageOptions: {
      sourceType: 'commonjs',
      globals: {
        __dirname: 'readonly',
        __filename: 'readonly',
        module: 'writable',
        process: 'readonly',
        require: 'readonly',
      },
    },
  },
  // A constants module is a collection of peer values with no primary export, so there is no
  // meaningful default export to prefer. Named exports keep them individually tree-shakeable and
  // importable by name.
  {
    files: ['**/constants.ts'],
    rules: {
      'import/prefer-default-export': 0,
    },
  },
]