103 lines
4.0 KiB
JavaScript
103 lines
4.0 KiB
JavaScript
import js from '@eslint/js'
|
|
import globals from 'globals'
|
|
import reactHooks from 'eslint-plugin-react-hooks'
|
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
import jsxA11y from 'eslint-plugin-jsx-a11y'
|
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
|
|
// ── Lint config (S14) ──────────────────────────────────────────────────────
|
|
//
|
|
// On top of the React/hooks defaults, jsx-a11y catches the common
|
|
// accessibility gaps that creep into icon-button-heavy UIs like this one:
|
|
// missing aria-labels on bare-icon buttons, alt-less <img>, click-only
|
|
// affordances on non-interactive elements, etc.
|
|
//
|
|
// We use jsxA11y's `recommended` ruleset rather than `strict` because
|
|
// strict adds rules (no-onchange, click-events-have-key-events) that
|
|
// produce a high false-positive rate on existing controlled-component
|
|
// code without meaningfully improving accessibility. The recommended set
|
|
// is the consensus minimum for production React apps.
|
|
|
|
export default defineConfig([
|
|
globalIgnores(['dist']),
|
|
{
|
|
files: ['src/**/*.{js,jsx}'],
|
|
extends: [
|
|
js.configs.recommended,
|
|
reactHooks.configs.flat.recommended,
|
|
reactRefresh.configs.vite,
|
|
jsxA11y.flatConfigs.recommended,
|
|
],
|
|
languageOptions: {
|
|
ecmaVersion: 2020,
|
|
globals: globals.browser,
|
|
parserOptions: {
|
|
ecmaVersion: 'latest',
|
|
ecmaFeatures: { jsx: true },
|
|
sourceType: 'module',
|
|
},
|
|
},
|
|
rules: {
|
|
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^_' }],
|
|
|
|
// jsx-a11y tweaks for this codebase ─────────────────────────────────
|
|
//
|
|
// The codebase has several `onClick` handlers on Konva-rendered
|
|
// shapes (Group, Rect) that don't have a corresponding key handler
|
|
// because they're inside a <canvas> and don't take keyboard focus.
|
|
// jsx-a11y can't tell that those are Konva nodes, not DOM, so we
|
|
// disable the click-events-have-key-events rule globally rather
|
|
// than littering eslint-disable comments through canvas code.
|
|
'jsx-a11y/click-events-have-key-events': 'off',
|
|
'jsx-a11y/no-noninteractive-element-interactions': 'off',
|
|
'jsx-a11y/no-static-element-interactions': 'off',
|
|
|
|
// The label-has-associated-control rule fires on labels that wrap
|
|
// a custom <input type="color"> picker (the swatch grid in
|
|
// TextTab uses `<label>` as the click target with the color input
|
|
// hidden inside). The pattern is correct accessibility-wise — the
|
|
// label IS the control's container — but the rule's heuristics
|
|
// miss it. We turn it off rather than inverting the structure.
|
|
'jsx-a11y/label-has-associated-control': 'off',
|
|
},
|
|
},
|
|
{
|
|
// Test files. Pulled into a separate block so we can:
|
|
// 1. Add Vitest's global names (describe, it, expect, vi,
|
|
// beforeEach, afterEach, etc.) to the lint globals —
|
|
// otherwise they trip the no-undef rule.
|
|
// 2. Loosen the unused-vars rule for `_` destructured props,
|
|
// which test files use heavily when partially-mocking
|
|
// hook return shapes.
|
|
// The main src/ rules above still apply via the file-pattern
|
|
// overlap (this block ADDS to them, doesn't replace them).
|
|
files: ['src/**/*.{test,spec}.{js,jsx}', 'src/test/**/*.{js,jsx}'],
|
|
languageOptions: {
|
|
globals: {
|
|
...globals.browser,
|
|
describe: 'readonly',
|
|
it: 'readonly',
|
|
test: 'readonly',
|
|
expect: 'readonly',
|
|
vi: 'readonly',
|
|
beforeAll: 'readonly',
|
|
afterAll: 'readonly',
|
|
beforeEach: 'readonly',
|
|
afterEach: 'readonly',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
files: ['server.js'],
|
|
extends: [js.configs.recommended],
|
|
languageOptions: {
|
|
ecmaVersion: 2020,
|
|
globals: globals.node,
|
|
sourceType: 'module',
|
|
},
|
|
rules: {
|
|
'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
|
},
|
|
},
|
|
])
|