veza/apps/web/eslint.config.js

// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
import storybook from "eslint-plugin-storybook";

// eslint-plugin-storybook optional: install if needed for Storybook-specific lint rules
// import storybook from "eslint-plugin-storybook";

import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default [js.configs.recommended, {
  files: ['**/*.{ts,tsx,js,jsx}'],
  languageOptions: {
    parser: typescriptParser,
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      ecmaVersion: 2022,
      sourceType: 'module',
    },
    globals: {
      // Browser globals
      window: 'readonly',
      document: 'readonly',
      localStorage: 'readonly',
      sessionStorage: 'readonly',
      console: 'readonly',
      setTimeout: 'readonly',
      clearTimeout: 'readonly',
      setInterval: 'readonly',
      clearInterval: 'readonly',
      fetch: 'readonly',
      WebSocket: 'readonly',
      File: 'readonly',
      FormData: 'readonly',
      CustomEvent: 'readonly',
      Event: 'readonly',
      CloseEvent: 'readonly',
      MessageEvent: 'readonly',
      KeyboardEvent: 'readonly',
      HTMLElement: 'readonly',
      HTMLDivElement: 'readonly',
      HTMLInputElement: 'readonly',
      HTMLButtonElement: 'readonly',
      HTMLAnchorElement: 'readonly',
      HTMLParagraphElement: 'readonly',
      HTMLHeadingElement: 'readonly',
      HTMLTextAreaElement: 'readonly',
      HTMLSelectElement: 'readonly',
      HTMLImageElement: 'readonly',
      HTMLAudioElement: 'readonly',
      Element: 'readonly',
      Node: 'readonly',
      MouseEvent: 'readonly',
      Blob: 'readonly',
      FileReader: 'readonly',
      Image: 'readonly',
      global: 'readonly',
      NodeJS: 'readonly',
      Buffer: 'readonly',
      crypto: 'readonly',
      performance: 'readonly',
      require: 'readonly',
      process: 'readonly',
      // URL API globals
      URL: 'readonly',
      URLSearchParams: 'readonly',
      // DOM API globals
      DOMRect: 'readonly',
      DOMRectReadOnly: 'readonly',
      Headers: 'readonly',
      navigator: 'readonly',
      WindowEventMap: 'readonly',
      requestAnimationFrame: 'readonly',
      cancelAnimationFrame: 'readonly',
      Notification: 'readonly',
      NotificationOptions: 'readonly',
      NotificationPermission: 'readonly',
      IntersectionObserver: 'readonly',
      IntersectionObserverInit: 'readonly',
      MessageChannel: 'readonly',
      confirm: 'readonly',
      alert: 'readonly',
      // Web API globals
      AudioContext: 'readonly',
      AnalyserNode: 'readonly',
      MediaElementAudioSourceNode: 'readonly',
      HTMLIFrameElement: 'readonly',
      HTMLMediaElement: 'readonly',
      XMLHttpRequest: 'readonly',
      BinaryType: 'readonly',
      EventListenerOrEventListenerObject: 'readonly',
      ReadableStream: 'readonly',
      BeforeUnloadEvent: 'readonly',
      CryptoKey: 'readonly',
      btoa: 'readonly',
      atob: 'readonly',
      TextEncoder: 'readonly',
      TextDecoder: 'readonly',
      CanvasRenderingContext2D: 'readonly',
      MutationObserver: 'readonly',
      Window: 'readonly',
      Storage: 'readonly',
      TransformStream: 'readonly',
      // Service Worker globals
      self: 'readonly',
      caches: 'readonly',
      ServiceWorkerRegistration: 'readonly',
      Cache: 'readonly',
      CacheStorage: 'readonly',
      Response: 'readonly',
      Request: 'readonly',
      clients: 'readonly',
      // React globals
      React: 'readonly',
      // Test globals
      beforeAll: 'readonly',
      afterAll: 'readonly',
      afterEach: 'readonly',
      beforeEach: 'readonly',
      describe: 'readonly',
      it: 'readonly',
      test: 'readonly',
      expect: 'readonly',
      vi: 'readonly',
      vitest: 'readonly',
      waitFor: 'readonly',
      jest: 'readonly',
      AbortController: 'readonly',
      AbortSignal: 'readonly',
      BroadcastChannel: 'readonly',
      DOMException: 'readonly',
      atob: 'readonly',
      PerformanceNavigationTiming: 'readonly',
      PerformanceObserver: 'readonly',
      HTMLFormElement: 'readonly',
      HTMLTableElement: 'readonly',
      HTMLTableSectionElement: 'readonly',
      HTMLTableRowElement: 'readonly',
      HTMLTableCellElement: 'readonly',
      HTMLTableCaptionElement: 'readonly',
      HTMLSpanElement: 'readonly',
      HTMLCanvasElement: 'readonly',
      HTMLLabelElement: 'readonly',
      FileList: 'readonly',
      MediaQueryListEvent: 'readonly',
      IntersectionObserver: 'readonly',
      IntersectionObserverEntry: 'readonly',
      IntersectionObserverCallback: 'readonly',
      ResizeObserver: 'readonly',
      ResizeObserverEntry: 'readonly',
      HeadersInit: 'readonly',
      EventListener: 'readonly',
    },
  },
  plugins: {
    '@typescript-eslint': typescript,
    'react': react,
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
    'jsx-a11y': jsxA11y,
  },
  rules: {
    // TypeScript
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    '@typescript-eslint/no-non-null-assertion': 'warn',

    // React
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true }
    ],

    // General
    'no-console': 'off',
    'no-debugger': 'error',
    'prefer-const': 'error',
    'no-var': 'error',
    'object-shorthand': 'error',
    'prefer-template': 'error',
    'no-unused-vars': 'off', // Handled by @typescript-eslint/no-unused-vars
    'no-useless-escape': 'error',
    'no-prototype-builtins': 'warn',

    // Typography: Enforce type scale usage
    // Warn on arbitrary text sizes in className strings (e.g., text-[10px], text-[9px])
    // Note: SVG chart text (text-[2px], text-[1.5px]) may need exceptions - review case by case
    'no-restricted-syntax': [
      'warn',
      {
        selector:
          "Literal[value=/text-\\[\\d+(\\.\\d+)?(px|rem)\\]/], TemplateElement[value.raw=/text-\\[\\d+(\\.\\d+)?(px|rem)\\]/]",
        message:
          'Use type scale classes (text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl) instead of arbitrary sizes. SVG chart text (text-[2px], text-[1.5px]) may be an exception - add eslint-disable comment if needed.',
      },
      // Spacing: Enforce spacing scale usage
      // Warn on arbitrary spacing values that don't follow 4px base scale
      // Valid scale values: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
      // Arbitrary values like gap-[7px], p-[9px], etc. should use scale values instead
      {
        selector:
          "Literal[value=/(gap-|p-|m-|px-|py-|mx-|my-|space-[xy]-)\\[\\d+(\\.\\d+)?(px|rem)\\]/], TemplateElement[value.raw=/(gap-|p-|m-|px-|py-|mx-|my-|space-[xy]-)\\[\\d+(\\.\\d+)?(px|rem)\\]/]",
        message:
          'Use spacing scale classes (gap-0 through gap-24, p-0 through p-24, etc.) instead of arbitrary sizes. Valid scale values follow 4px base: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24. For exceptions, add eslint-disable comment.',
      },
      // Colors: Prevent Tailwind default colors (use SUMI design system semantic tokens instead)
      // Warn on default Tailwind color classes: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
      // Allow: semantic tokens (primary, secondary, destructive, success, warning, muted, etc.) and sumi-* tokens
      {
        selector:
          "Literal[value=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/], TemplateElement[value.raw=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/]",
        message:
          'Use SUMI design system semantic tokens (primary, secondary, destructive, success, warning, muted, foreground, etc.) instead of Tailwind default colors. See apps/web/docs/DESIGN_TOKENS.md for token mapping. For exceptions (e.g., test files), add eslint-disable comment.',
      },
      // Components: Enforce Button component usage (prevent native button elements)
      // Warn on native <button> elements - use <Button> component from @/components/ui/button instead
      {
        selector: 'JSXOpeningElement[name.name="button"]',
        message:
          'Use the Button component from @/components/ui/button instead of native <button> elements. This ensures consistent styling, accessibility, and design system compliance. For exceptions (e.g., test files, third-party components), add eslint-disable comment.',
      },
      // Width: Avoid arbitrary width classes — use layout tokens or scale (w-4, max-w-layout-content, etc.)
      {
        selector:
          "Literal[value=/.*(w-|min-w-|max-w-)\\[[^]]+\\].*/], TemplateElement[value.raw=/.*(w-|min-w-|max-w-)\\[[^]]+\\].*/]",
        message:
          'Avoid arbitrary width classes (w-[...], min-w-[...], max-w-[...]). Use scale (w-4, min-w-80) or layout tokens (max-w-layout-content). See docs/DESIGN_TOKENS.md. For exceptions (e.g. SVG), add eslint-disable.',
      },
      // Height: Avoid arbitrary height classes
      {
        selector:
          "Literal[value=/.*(h-|min-h-|max-h-)\\[[^]]+\\].*/], TemplateElement[value.raw=/.*(h-|min-h-|max-h-)\\[[^]]+\\].*/]",
        message:
          'Avoid arbitrary height classes (h-[...], min-h-[...], max-h-[...]). Use scale (h-4, min-h-8) or layout tokens. See docs/DESIGN_TOKENS.md. For exceptions, add eslint-disable.',
      },
      // Rounded: Avoid arbitrary rounded — use rounded, rounded-lg, rounded-xl, rounded-full or var(--radius-xl)
      {
        selector:
          "Literal[value=/.*rounded-\\[[^]]+\\].*/], TemplateElement[value.raw=/.*rounded-\\[[^]]+\\].*/]",
        message:
          'Avoid arbitrary rounded classes (rounded-[...]). Use rounded, rounded-lg, rounded-xl, rounded-full or rounded-[var(--radius-xl)]. See docs/DESIGN_TOKENS.md.',
      },
      // Shadow: Avoid arbitrary shadow — use tokens (shadow-card, shadow-modal, shadow-lg, etc.)
      {
        selector:
          "Literal[value=/.*shadow-\\[[^]]+\\].*/], TemplateElement[value.raw=/.*shadow-\\[[^]]+\\].*/]",
        message:
          'Avoid arbitrary shadow classes (shadow-[...]). Use design tokens (shadow-card, shadow-modal, shadow-button-primary-glow) or Tailwind shadow-lg, shadow-xl. See docs/DESIGN_TOKENS.md. For exceptions, add eslint-disable.',
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}, {
  files: ['**/*.stories.tsx', '**/*.stories.ts'],
  rules: {
    'react-hooks/rules-of-hooks': 'off',
  },
}, {
  files: ['**/*.test.ts', '**/*.test.tsx', '**/__tests__/**'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
  },
}, {
  ignores: [
    'node_modules/',
    'dist/',
    'dist_verification/',
    'build/',
    'target/',
    'storybook-static/',
    'e2e/',
    'playwright-report/',
    'public/sw.js',
    'scripts/',
    'src/types/generated/',
    '_archive/',
    'archive/',
    '*.config.js',
    '*.config.ts',
    '*.config.cjs',
    '**/ui.backup/**',
  ],
}, ...storybook.configs["flat/recommended"]];