storybook: test markdown support

Author: JonasBa

package.json

@@ -182,6 +182,7 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
+    "@mdx-js/loader": "^3.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
     "@sentry/jest-environment": "6.0.0",
     "@sentry/profiling-node": "9.16.1",
@@ -255,6 +256,7 @@
     "dev-ui-admin": "SENTRY_ADMIN_UI_DEV=1 yarn dev-ui",
     "dev-ui-admin-rspack": "SENTRY_ADMIN_UI_DEV=1 yarn dev-ui-rspack",
     "dev-ui-storybook": "STORYBOOK_TYPES=1 yarn dev-ui",
+    "dev-ui-storybook-rspack": "STORYBOOK_TYPES=1 yarn dev-ui-rspack",
     "dev-acceptance": "NO_DEV_SERVER=1 NODE_ENV=development webpack --watch",
     "dev-acceptance-rspack": "NO_DEV_SERVER=1 NODE_ENV=development rspack --watch",
     "webpack-profile": "NO_TS_FORK=1 webpack --profile --json > stats.json",

rspack.config.ts

@@ -7,6 +7,7 @@ import type {
   DevServer,
   OptimizationSplitChunksCacheGroup,
   RspackPluginInstance,
+  RuleSetRule,
 } from '@rspack/core';
 import rspack from '@rspack/core';
 import ReactRefreshRspackPlugin from '@rspack/plugin-react-refresh';
@@ -170,6 +171,35 @@ for (const locale of supportedLocales) {
   };
 }
 
+const swcReactLoaderConfig: RuleSetRule['options'] = {
+  jsc: {
+    experimental: {
+      plugins: [
+        [
+          '@swc/plugin-emotion',
+          {
+            sourceMap: true,
+            // The "dev-only" option does not seem to apply correctly
+            autoLabel: DEV_MODE ? 'always' : 'never',
+          },
+        ],
+      ],
+    },
+    parser: {
+      syntax: 'typescript',
+      tsx: true,
+    },
+    transform: {
+      react: {
+        runtime: 'automatic',
+        development: DEV_MODE,
+        refresh: DEV_MODE,
+        importSource: '@emotion/react',
+      },
+    },
+  },
+};
+
 /**
  * Main Webpack config for Sentry React SPA.
  */
@@ -217,34 +247,19 @@ const appConfig: Configuration = {
         test: /\.(js|jsx|ts|tsx)$/,
         exclude: /\/node_modules\//,
         loader: 'builtin:swc-loader',
-        options: {
-          jsc: {
-            experimental: {
-              plugins: [
-                [
-                  '@swc/plugin-emotion',
-                  {
-                    sourceMap: true,
-                    // The "dev-only" option does not seem to apply correctly
-                    autoLabel: DEV_MODE ? 'always' : 'never',
-                  },
-                ],
-              ],
-            },
-            parser: {
-              syntax: 'typescript',
-              tsx: true,
-            },
-            transform: {
-              react: {
-                runtime: 'automatic',
-                development: DEV_MODE,
-                refresh: DEV_MODE,
-                importSource: '@emotion/react',
-              },
-            },
+        options: swcReactLoaderConfig,
+      },
+      {
+        test: /\.mdx?$/,
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: swcReactLoaderConfig,
           },
-        },
+          {
+            loader: '@mdx-js/loader',
+          },
+        ],
       },
       {
         test: /\.po$/,

static/app/components/core/colors.mdx

@@ -0,0 +1,5 @@
+import {Button} from 'sentry/components/core/button';
+
+## Colors are rendering
+
+<Button priority="primary">Test</Button>

static/app/views/stories/useStoriesLoader.tsx

@@ -4,19 +4,33 @@ import {useMemo} from 'react';
 import {useQuery, type UseQueryResult} from 'sentry/utils/queryClient';
 
 const context = require.context('sentry', true, /\.stories.tsx$/, 'lazy');
+const mdxContext = require.context('sentry', true, /\.mdx$/, 'lazy');
 
 export interface StoryDescriptor {
   exports: Record<string, React.ComponentType | any>;
   filename: string;
 }
 
 export function useStoryBookFiles() {
-  return useMemo(() => context.keys().map(file => file.replace(/^\.\//, 'app/')), []);
+  return useMemo(
+    () =>
+      [...context.keys(), ...mdxContext.keys()].map(file =>
+        file.replace(/^\.\//, 'app/')
+      ),
+    []
+  );
 }
 
 async function importStory(filename: string): Promise<StoryDescriptor> {
-  const story = await context(filename.replace(/^app\//, './'));
+  if (filename.endsWith('.mdx')) {
+    const story = await mdxContext(filename.replace(/^app\//, './'));
+    return {
+      exports: story,
+      filename,
+    };
+  }
 
+  const story = await context(filename.replace(/^app\//, './'));
   return {
     exports: story,
     filename,

webpack.config.ts

@@ -244,9 +244,18 @@ const appConfig: webpack.Configuration = {
       {
         test: /\.[tj]sx?$/,
         include: [staticPrefix],
-        exclude: /(vendor|node_modules|dist)/,
+        exclude: [/(vendor|node_modules|dist)/],
         use: babelLoaderConfig,
       },
+      {
+        test: /\.mdx?$/,
+        use: [
+          babelLoaderConfig,
+          {
+            loader: '@mdx-js/loader',
+          },
+        ],
+      },
       {
         test: /\.po$/,
         use: {