-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update MDX stories to use
MDXProvider
- Loading branch information
Showing
2 changed files
with
26 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 25 additions & 22 deletions
47
examples/official-storybook/stories/addon-docs/mdx.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
), | ||
]; |