dorfteich/eslint.config.mjs
Claude Opus 5 5a4a99196e
All checks were successful
CI / Auth e2e pack (pull_request) Successful in 8m36s
CI / Import/export fidelity gate (pull_request) Successful in 58s
CI / Lint, typecheck, test (pull_request) Successful in 6m22s
CI / Build container images (pull_request) Successful in 3m51s
CD / Build and push images (push) Successful in 15s
CD / Deploy to Test (push) Successful in 16s
CD / Smoke tests against Test (push) Successful in 1m16s
CD / Promote to Int (push) Successful in 13s
CI / Lint, typecheck, test (push) Successful in 6m32s
CI / Build container images (push) Has been skipped
CI / Auth e2e pack (push) Successful in 8m25s
CI / Import/export fidelity gate (push) Successful in 58s
#300: route icon-only controls through IconButton/IconLink
The notification bell sat higher and larger than search and the theme
toggle next to it. The cause was not the glyph: `.notifications-bell__button`
carried its own rules with neither flex centring nor an icon size, so the
svg was laid out inline on the text baseline and rendered at lucide's
24px default instead of the 1.15rem the shared `.icon-button` enforces.

Route every icon-only control through the shared components instead:

- `IconLink` joins `IconButton`, sharing one class helper. Three controls
  navigate (pond settings, graph, trash) and are links, not buttons —
  without a link twin they would have stayed the one group gluing the
  class on by hand.
- 17 hand-applied `className="icon-button …"` usages across nine files
  now go through the components, which is what enforces the accessible
  name on a control that shows only an icon.
- The bell's unread count reaches assistive technology. The badge sits
  inside the control, so `aria-label` hid it and a screen reader
  announced "Notifications" without ever saying how many.

An ESLint rule keeps it that way: `icon-button` on a raw button, anchor
or Link is now an error, in both string and template-literal form.

The plugin uninstall button keeps a title that differs from its name (it
explains why a required plugin is locked); IconButton spreads rest last,
so the explicit title still wins.

Also drops the graphify block from CLAUDE.md — it duplicates the
workspace-level instructions.
2026-08-01 06:56:13 +02:00

92 lines
3.2 KiB
JavaScript

// Repo-wide ESLint flat config. Packages inherit these rules; add
// package-specific overrides here (scoped by `files`) rather than with
// per-package config files, so rules stay consistent across the monorepo.
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
export default tseslint.config(
{
ignores: [
'**/dist/**',
// Vendored third-party apps bundled into plugins (drawio) — never linted.
'packages/plugins/*/vendor/**',
'**/node_modules/**',
'**/coverage/**',
'**/.pnpm-store/**',
'**/*.gen.ts',
// Runtime data volumes (installed plugin bundles, uploads) — not source.
'apps/api/data/**',
],
},
js.configs.recommended,
...tseslint.configs.recommended,
prettier,
{
// Plain-Node maintenance/build scripts (no TypeScript, no bundler).
files: [
'scripts/**/*.mjs',
'deploy/**/*.mjs',
'packages/plugins/*/build.mjs',
'apps/api/scripts/**/*.mjs',
],
languageOptions: {
globals: {
console: 'readonly',
process: 'readonly',
URL: 'readonly',
fetch: 'readonly',
Buffer: 'readonly',
setTimeout: 'readonly',
},
},
},
{
// Classic browser scripts served verbatim from public/ (theme-init.js,
// issue #180): no bundler, no modules, browser globals only.
files: ['apps/web/public/*.js'],
languageOptions: {
globals: {
window: 'readonly',
document: 'readonly',
},
},
},
{
// Icon-only controls go through the shared components (issue #300).
// Gluing `icon-button` onto a raw element copies the looks but skips the
// contract that guarantees an accessible name — that is how the
// notification bell drifted into its own size and focus ring.
files: ['apps/web/src/**/*.tsx'],
ignores: ['apps/web/src/components/IconButton.tsx'],
rules: {
'no-restricted-syntax': [
'error',
{
selector:
'JSXOpeningElement[name.name=/^(button|a|Link)$/] > JSXAttribute[name.name="className"] > Literal[value=/(^|\\s)icon-button(\\s|$)/]',
message:
'Use <IconButton> (or <IconLink> for navigation) from components/IconButton instead of putting the icon-button class on a raw element — the component enforces the accessible name.',
},
{
selector:
'JSXOpeningElement[name.name=/^(button|a|Link)$/] > JSXAttribute[name.name="className"] > JSXExpressionContainer > TemplateLiteral > TemplateElement[value.raw=/(^|\\s)icon-button(\\s|$)/]',
message:
'Use <IconButton> (or <IconLink> for navigation) from components/IconButton instead of putting the icon-button class on a raw element — the component enforces the accessible name.',
},
],
},
},
{
rules: {
// Unused values are usually bugs; underscore-prefix marks intentional ones.
'@typescript-eslint/no-unused-vars': [
'error',
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
],
// `any` defeats the shared Zod/type contracts between client and server.
'@typescript-eslint/no-explicit-any': 'error',
},
},
);