GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

MDX: Allow user to override docs.container parameter (#8968)

Browse Source 
MDX: Allow user to override `docs.container` parameter
This commit is contained in:
Michael Shilman 2019-11-27 08:57:36 +08:00 committed by GitHub
commit 9630ae8edc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 119 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/docs/src/blocks/index.ts
View File

@ -20,6 +20,4 @@ export * from './Title';
export * from './Wrapper';
export * from './shared';
// helper function for MDX
export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
export * from './mdx';

14
addons/docs/src/blocks/mdx.tsx Normal file
View File

@ -0,0 +1,14 @@
import * as React from 'react';
import { DocsContext, DocsContextProps } from './DocsContext';
// Hacky utility for dealing with functions or values in MDX Story elements
export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
// Hacky utilty for adding mdxStoryToId to the default context
export const AddContext: React.FC<DocsContextProps> = props => {
const { children, ...rest } = props;
const parentContext = React.useContext(DocsContext);
return (
<DocsContext.Provider value={{ ...parentContext, ...rest }}>{children}</DocsContext.Provider>
);
};

10
addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -43,10 +43,12 @@ const mdxStoryNameToId = { 'component notes': 'button-id--component-notes' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -77,10 +77,12 @@ const mdxStoryNameToId = { one: 'button--one' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/addon-docs/blocks';
@ -46,10 +46,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -55,10 +55,12 @@ const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-sto
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -78,10 +78,12 @@ const mdxStoryNameToId = {
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
@ -74,10 +74,12 @@ const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button-
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story } from '@storybook/addon-docs/blocks';
@ -35,10 +35,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -43,10 +43,12 @@ const mdxStoryNameToId = { text: 'text--text' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -76,10 +76,12 @@ const mdxStoryNameToId = {
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Meta, Story } from '@storybook/addon-docs/blocks';
export const basicFn = () => <Button mdxType=\\"Button\\" />;
@ -47,10 +47,12 @@ const mdxStoryNameToId = { basic: 'story-function-var--basic' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
const makeShortcode = name =>
function MDXDefaultShortcode(props) {
@ -52,10 +52,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story, Meta } from '@storybook/addon-docs/blocks';
import { Welcome, Button } from '@storybook/angular/demo';
@ -64,10 +64,12 @@ const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story } from '@storybook/addon-docs/blocks';
@ -35,10 +35,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
@ -36,10 +36,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

6
addons/docs/src/mdx/mdx-compiler-plugin.js
View File

@ -179,8 +179,8 @@ function getExports(node, counter) {
const wrapperJs = `
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => <DocsContainer context={{...context, mdxStoryNameToId}}>{children}</DocsContainer>,
page: MDXContent,
...(componentMeta.parameters.docs || {}),
page: () => <AddContext mdxStoryNameToId={mdxStoryNameToId}><MDXContent /></AddContext>,
};
`.trim();
@ -310,7 +310,7 @@ function extractExports(node, options) {
);
const fullJsx = [
'import { DocsContainer, makeStoryFn } from "@storybook/addon-docs/blocks";',
'import { makeStoryFn, AddContext } from "@storybook/addon-docs/blocks";',
defaultJsx,
...storyExports,
`const componentMeta = ${stringifyMeta(metaExport)};`,

17
examples/official-storybook/stories/addon-docs/container-override.stories.mdx Normal file
View File

@ -0,0 +1,17 @@
import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
<Meta
title='Addons/Docs/container-override'
parameters={{
docs: {
// eslint-disable-next-line react/prop-types
container: ({ children, context }) => (
<DocsContainer context={context}>
<div style={{ border: '5px solid red' }}>{children}</div>
</DocsContainer>
),
},
}}
/>
<Story name='dummy'><div>some content</div></Story>