eslint.design.config.mjs

// Minimal ESLint config for the design-system gate.
//
// Used by `npm run lint:design` (wired into the standard `npm run lint`). It
// deliberately does NOT extend eslint:recommended / typescript-eslint, so the
// only diagnostics are the warn-level design-token + primitives guardrails —
// the run always exits 0 and never drags in the recommended-rule backlog that
// `lint:eslint` carries. See eslint.design.mjs for the shared rule definitions.

import tsParser from "@typescript-eslint/parser";
import {
  designTokenIgnores,
  designTokensPlugin,
  noRestrictedImports,
  noRestrictedSyntax,
} from "./eslint.design.mjs";

// Source files carry inline `// eslint-disable … <rule>` comments for rules
// that this lean config does not load (e.g. react-hooks/exhaustive-deps,
// @typescript-eslint/no-require-imports). Without the rule registered, ESLint
// errors on the directive ("Definition for rule … was not found"). Register
// the referenced rules as no-ops so the directives resolve harmlessly. Add a
// name here if a new disable directive ever trips the gate.
const noopRule = { create: () => ({}) };
const directiveStubs = {
  "react-hooks": { rules: { "exhaustive-deps": noopRule } },
  "@typescript-eslint": { rules: { "no-require-imports": noopRule } },
};

export default [
  {
    ignores: ["dist/**/*", "build/**/*", "coverage/**/*"],
  },
  {
    files: ["src/**/*.{ts,tsx}"],
    ignores: designTokenIgnores,
    plugins: { ...directiveStubs, "design-tokens": designTokensPlugin },
    // This gate only reports the design-token guardrails; it is not the place
    // to flag unused disable directives for rules it intentionally stubs out.
    linterOptions: {
      reportUnusedDisableDirectives: "off",
    },
    languageOptions: {
      parser: tsParser,
      ecmaVersion: 2021,
      sourceType: "module",
      parserOptions: {
        ecmaFeatures: { jsx: true },
        project: null,
      },
    },
    rules: {
      "react-hooks/exhaustive-deps": "off",
      "@typescript-eslint/no-require-imports": "off",
      "no-restricted-imports": noRestrictedImports,
      "no-restricted-syntax": noRestrictedSyntax,
      // Raw MUI component imports are fully migrated (zero violations) — locked
      // in as an error so any new one fails the gate. See docs/DESIGN.md and
      // ui_primitives/STRATEGY.md.
      "design-tokens/no-raw-mui": "error",
      // Spacing is fully migrated (zero violations) — locked in as an error so
      // any new raw-px padding/margin/gap fails the gate. See docs/DESIGN.md §2.
      "design-tokens/spacing-tokens": "error",
      // Font size and color are fully migrated (zero violations) — locked in as
      // errors. See docs/DESIGN.md §1 (font size) and §3 (color).
      "design-tokens/font-size-tokens": "error",
      "design-tokens/color-tokens": "error",
      // Border radius is fully migrated (zero violations) — locked in as an
      // error so any new raw/magic/var(--rounded-*) radius fails the gate. See
      // docs/DESIGN.md §4.
      "design-tokens/border-radius-tokens": "error",
      // Z-index is fully migrated (zero violations) — locked in as an error so
      // any new magic z-index integer fails the gate. See docs/DESIGN.md §6.
      "design-tokens/zindex-tokens": "error",
      // Motion (transition/animation timing) is fully migrated (zero
      // violations) — locked in as an error so any new raw s/ms timing fails the
      // gate. See docs/DESIGN.md §5.
      "design-tokens/motion-tokens": "error",
      // A stored media locator (asset://, memory://) written straight into a
      // JSX url attribute renders nothing — media resolution is the rendering
      // boundary. Zero violations; locked in as an error. See
      // utils/resolveMediaUri.ts and scripts/test-media-src-rule.mjs.
      "design-tokens/no-unresolved-media-src": "error",
    },
  },
];