.eslintrc

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": ["testing-library", "@chanzuckerberg/stories"],
  "extends": [
    "@chanzuckerberg/eslint-config-edu-js",
    "@chanzuckerberg/eslint-config-edu-ts",
    "plugin:prettier/recommended",
    "plugin:storybook/recommended",
    "plugin:testing-library/react",
    "plugin:@chanzuckerberg/eslint-plugin-edu-react/recommended",
    "plugin:@chanzuckerberg/stories/strict"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "src/**/*.test.{ts,tsx}",
          "src/**/*.stories.{ts,tsx}",
          "**/*.config.{js,ts,mjs}",
          "**/*.setup.{js,ts}",
          ".storybook/**",
          "scripts/stylelint/**",
          "plopfile.js"
        ]
      }
    ],
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        },
        "groups": ["builtin", "external", "sibling", "parent", "index"],
        "pathGroups": [
          {
            "pattern": "*.module.css",
            "group": "index",
            "patternOptions": { "matchBase": true },
            "position": "after"
          }
        ]
      }
    ],
    "@typescript-eslint/no-unused-vars": "warn",
    "no-unused-vars": "off",
    "react/jsx-boolean-value": "warn"
  },
  "overrides": [
    {
      "files": ["*.test.{js,ts}", "*.test.tsx", "**/test/**"],
      "plugins": ["jest"],
      "extends": ["plugin:jest/recommended"],
      "env": {
        "jest/globals": true
      }
    },
    {
      "files": [
        "config.js",
        "*.config.js",
        "main.ts",
        "plopfile.js",
        "src/**/*.js"
      ],
      "env": {
        "browser": false,
        "node": true
      }
    },
    {
      "files": ["src/**/*.stories.{ts,tsx}"],
      "rules": {
        "no-restricted-imports": [
          "error",
          {
            "patterns": [
              {
                "group": [".storybook"],
                "message": "Do not import files from `.storybook/` into `src`. If needed, move files into `src/storyUtils` instead."
              },
              {
                "group": ["**/docs/*"],
                "message": "Do not import files from `docs/` into `src`. If needed, move files into `src/storyUtils` instead."
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["src/**/*.{ts,tsx}"],
      "excludedFiles": ["src/**/*.{stories,test,spec}.{ts,tsx}"],
      "rules": {
        "no-restricted-imports": [
          "error",
          {
            "paths": [
              {
                "name": "lodash",
                "message": "For better tree shaking, prefer deep imports from lodash (e.g. import at from 'lodash/at') instead of named (e.g. import {at} from 'lodash)"
              }
            ],
            "patterns": [
              {
                "group": ["**/tokens-dist/ts/colors"],
                "message": "Do not import JavaScript color variables into component files. Use CSS variables in styles instead."
              }
            ]
          }
        ]
      }
    }
  ],
  "ignorePatterns": ["!.storybook"]
}