fix: use a custom mdx compiler

Author: TkDodo

knip.config.ts

@@ -1,3 +1,4 @@
+import {compile} from '@mdx-js/mdx';
 import type {KnipConfig} from 'knip';
 
 const productionEntryPoints = [
@@ -60,7 +61,15 @@ const config: KnipConfig = {
     '!static/app/stories/*.{js,mjs,ts,tsx}!',
   ],
   compilers: {
-    mdx: true,
+    mdx: async text => {
+      const result = await compile(text, {
+        providerImportSource: '@mdx-js/react',
+        jsx: true,
+        outputFormat: 'program',
+      });
+
+      return String(result);
+    },
   },
   rules: {
     binaries: 'off',

package.json

@@ -182,6 +182,7 @@
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
     "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/mdx": "^3.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
     "@sentry/jest-environment": "6.0.0",
     "@sentry/profiling-node": "9.16.1",

static/app/styles/colors.mdx

@@ -12,7 +12,7 @@ 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';
-import {ThemeToggle, SideBySide} from 'sentry/stories';
+import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
 export const GRAY_PALETTES = [
@@ -66,7 +66,7 @@ export const FixedWidth = styled('div')`
   max-width: 800px;
 `;
 
-export const SideBySideUl = styled('ul')`
+export const SideBySide = styled('ul')`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -158,7 +158,7 @@ export const ColorPalette = ({name, palette}) => {
   const theme = useTheme();
 
   return (
-    <SideBySideUl>
+    <SideBySide>
       {palette.map((section, i) => {
         return (
           <li key={`${name}-${i}`}>
@@ -179,7 +179,7 @@ export const ColorPalette = ({name, palette}) => {
           </li>
         );
       })}
-    </SideBySideUl>
+    </SideBySide>
   );
 }
 
@@ -201,9 +201,9 @@ Here are the recommended use cases:
 - **Gray 200:** borders around large elements (cards, panels, dialogs, tables).
 - **Gray 100:** dividers and borders around small elements (buttons, form inputs). */}
 
-<ThemeToggle>
+<Storybook.ThemeToggle>
   <ColorPalette name="grays" palette={GRAY_PALETTES} />
-</ThemeToggle>
+</Storybook.ThemeToggle>
 
 ## Accent Colors
 
@@ -229,9 +229,9 @@ Each hue comes in 4 levels: 400 (dark), 300 (full opacity), 200 (medium opacity)
 - **The 200 level** has medium opacity, useful for borders and dividers.
 - **The 100 level** has very low opacity, useful as background fills.
 
-<ThemeToggle>
+<Storybook.ThemeToggle>
   <ColorPalette name="levels" palette={LEVELS_PALETTES} />
-</ThemeToggle>
+</Storybook.ThemeToggle>
 
 ## Accessibility
 
@@ -245,7 +245,7 @@ In Sentry's color palette, only Gray 300 and above satisfy the contrast requirem
 
 Accent colors in the 300 series, except for Yellow 300, satisfy the contrast requirement for large text.
 
-<SideBySide>
+<Storybook.SideBySide>
   <ExampleCard
     imgSrc={DoContrast}
     text="Use Gray 300 and above for normal text"
@@ -264,15 +264,15 @@ Accent colors in the 300 series, except for Yellow 300, satisfy the contrast req
     imgSrc={DontAccentColors}
     text="Use accent colors in the 100 or 200 series for any text"
   />
-</SideBySide>
+</Storybook.SideBySide>
 
 ### Separation
 
 Color can be an effective way to visually separate elements in the user interface. However, not all users see color in the same way. Some are color-blind and cannot reliably differentiate one color from another. Some have color filters on their screens, like Night Shift in MacOS. Others are in bright environments with high levels of glare, reducing their ability to see color clearly.
 
 As such, color is an unreliable way to separate elements. Whenever possible, provide additional visual cues like icons, text labels, line type (solid, dashed, dotted),… to further reinforce the separation.
 
-<SideBySide>
+<Storybook.SideBySide>
   <ExampleCard
     imgSrc={DoDifferentiation}
     text="Provide additional visual encoding (e.g. line type) besides color to differentiate elements"
@@ -282,4 +282,4 @@ As such, color is an unreliable way to separate elements. Whenever possible, pro
     imgSrc={DontDifferentiation}
     text="Use color as the only way to differentiate elements"
   />
-</SideBySide>
+</Storybook.SideBySide>

yarn.lock

@@ -2044,7 +2044,7 @@
     "@mdx-js/mdx" "^3.0.0"
     source-map "^0.7.0"
 
-"@mdx-js/mdx@^3.0.0":
+"@mdx-js/mdx@^3.0.0", "@mdx-js/mdx@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-3.1.0.tgz#10235cab8ad7d356c262e8c21c68df5850a97dc3"
   integrity sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==