tools: run eslint on mdx files (#92324)

Enable eslint linting for mdx files. Currently with type aware linting
disabled as MDX doesn't support TS expressions

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: JonasBa

eslint.config.mjs

@@ -18,6 +18,7 @@ import prettier from 'eslint-config-prettier';
 import importPlugin from 'eslint-plugin-import';
 import jest from 'eslint-plugin-jest';
 import jestDom from 'eslint-plugin-jest-dom';
+import * as mdx from 'eslint-plugin-mdx';
 import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
@@ -37,9 +38,14 @@ invariant(react.configs.flat, 'For typescript');
 invariant(react.configs.flat.recommended, 'For typescript');
 invariant(react.configs.flat['jsx-runtime'], 'For typescript');
 
+// Exclude MDX files from type-aware linting
+// https://github.com/orgs/mdx-js/discussions/2454
+const MDXIgnore = ['**/*.mdx'];
+
 // lint rules that need type information need to go here
 export const typeAwareLintRules = {
   name: 'plugin/typescript-eslint/type-aware-linting',
+  ignores: MDXIgnore,
   rules: {
     '@typescript-eslint/await-thenable': 'error',
     '@typescript-eslint/no-array-delete': 'error',
@@ -457,8 +463,10 @@ export default typescript.config([
       'react-hooks/rules-of-hooks': 'error',
     },
   },
+  typeAwareLintRules,
   {
     name: 'plugin/typescript-eslint/custom',
+    ignores: MDXIgnore,
     rules: {
       'no-shadow': 'off', // Disabled in favor of @typescript-eslint/no-shadow
       'no-use-before-define': 'off', // See also @typescript-eslint/no-use-before-define
@@ -502,7 +510,6 @@ export default typescript.config([
   // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/stylistic.ts
   ...typescript.configs.strict.map(c => ({...c, name: `plugin/${c.name}`})),
   ...typescript.configs.stylistic.map(c => ({...c, name: `plugin/${c.name}`})),
-  typeAwareLintRules,
   {
     name: 'plugin/typescript-eslint/overrides',
     // https://typescript-eslint.io/rules/
@@ -976,4 +983,11 @@ export default typescript.config([
       'no-restricted-imports': 'off',
     },
   },
+
+  // MDX Configuration
+  {
+    ...mdx.flat,
+    name: 'files/mdx',
+    files: ['**/*.mdx'],
+  },
 ]);

package.json

@@ -19,8 +19,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/babel-plugin": "^11.13.5",
-    "@emotion/css": "^11.13.5",
     "@emotion/cache": "^11.14.0",
+    "@emotion/css": "^11.13.5",
     "@emotion/is-prop-valid": "^1.3.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -195,9 +195,9 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/mdx": "^3.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
+    "@sentry-internal/rrweb-types": "2.34.0",
     "@sentry/jest-environment": "6.0.0",
     "@sentry/profiling-node": "9.16.1",
-    "@sentry-internal/rrweb-types": "2.34.0",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@swc/plugin-emotion": "9.0.4",
     "@tanstack/eslint-plugin-query": "^5.66.1",
@@ -215,6 +215,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-mdx": "^3.4.2",
     "eslint-plugin-no-relative-import-paths": "^1.6.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "5.2.0",

static/app/styles/colors.mdx

@@ -8,7 +8,6 @@ import DontAccentColors from 'sentry-images/stories/color/dont-accent-colors.svg
 import DontContrast from 'sentry-images/stories/color/dont-contrast.svg';
 import DontDifferentiation from 'sentry-images/stories/color/dont-differentiation.svg';
 
-import ExternalLink from 'sentry/components/links/externalLink';
 import Panel from 'sentry/components/panels/panel';
 import PanelItem from 'sentry/components/panels/panelItem';
 import {IconCheckmark, IconClose} from 'sentry/icons';
@@ -144,17 +143,19 @@ export const ExampleCardGrid = styled('figcaption')`
   padding: ${space(1)} ${space(1)} 0;
 `;
 
-export const ExampleCard = ({imgSrc, text, isPositive}) => (
-  <figure>
-    <ExampleImg src={imgSrc} />
-    <ExampleCardGrid>
-      {isPositive ? <PositiveLabel /> : <NegativeLabel />}
-      <span>{text}</span>
-    </ExampleCardGrid>
-  </figure>
-);
-
-export const ColorPalette = ({name, palette}) => {
+export function ExampleCard({imgSrc, text, isPositive}) {
+  return (
+    <figure>
+      <ExampleImg src={imgSrc} />
+      <ExampleCardGrid>
+        {isPositive ? <PositiveLabel /> : <NegativeLabel />}
+        <span>{text}</span>
+      </ExampleCardGrid>
+    </figure>
+  );
+}
+
+export function ColorPalette({name, palette}) {
   const theme = useTheme();
 
 return (