Update MDX stories to use MDXProvider

addons/docs/src/DocsRenderer.tsx

@@ -6,7 +6,7 @@ import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';
 
-const defaultComponents = {
+export const defaultComponents = {
   ...htmlComponents,
   code: CodeOrSourceMdx,
   a: AnchorMdx,

examples/official-storybook/stories/addon-docs/mdx.stories.js

@@ -1,45 +1,48 @@
 import React from 'react';
 import { DocsContainer } from '@storybook/addon-docs';
 import { themes } from '@storybook/theming';
+import { MDXProvider } from '@mdx-js/react';
+
 import markdown from './markdown.stories.mdx';
+import { defaultComponents } from '../../../../addons/docs/src/DocsRenderer';
 
 export default {
   title: 'Addons/Docs/mdx-in-story',
-  decorators: [
-    (storyFn) => (
-      <DocsContainer
-        context={{ componentStories: () => [], storyById: () => ({ parameters: {} }) }}
-      >
-        {storyFn()}
-      </DocsContainer>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  parameters: { layout: 'fullscreen' },
 };
 
-// This renders the contents of the docs panel into story content
+// The purpose of these stories are to document that MDX renders properly in docs itself
+// As tools like Chromatic cannot capture docs entries, we need to create a story that
+// actually renders it's own docs, much like the DocsRenderer might.
 export const Typography = () => {
   const Docs = markdown.parameters.docs.page;
   return <Docs />;
 };
 
+Typography.decorators = [
+  (storyFn) => (
+    <MDXProvider components={defaultComponents}>
+      <DocsContainer context={{ componentStories: () => [], storyById: () => ({}) }}>
+        {storyFn()}
+      </DocsContainer>
+    </MDXProvider>
+  ),
+];
+
 export const DarkModeDocs = () => {
   const Docs = markdown.parameters.docs.page;
   return <Docs />;
 };
 
 DarkModeDocs.decorators = [
   (storyFn) => (
-    <DocsContainer
-      context={{
-        type: 'legacy',
-        componentStories: () => [],
-        storyById: () => ({ parameters: { docs: { theme: themes.dark } } }),
-      }}
-    >
-      {storyFn()}
-    </DocsContainer>
+    <MDXProvider components={defaultComponents}>
+      <DocsContainer
+        context={{ componentStories: () => [], storyById: () => ({}) }}
+        theme={themes.dark}
+      >
+        {storyFn()}
+      </DocsContainer>
+    </MDXProvider>
   ),
 ];