GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-19 05:02:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Addon-docs: Fix CSF names importing in MDX

Browse Source
This commit is contained in:
Michael Shilman 2020-08-15 10:22:57 +08:00
parent f53144e0b0
commit 0459349271
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
addons/docs/src/mdx/__testfixtures__/csf-imports.mdx
View File

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/addon-docs/blocks';
import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Welcome, Button } from '@storybook/angular/demo';
import * as MyStories from './My.stories';
import { Other } from './Other.stories';
@ -9,6 +9,8 @@ import { Other } from './Other.stories';
<Story story={MyStories.Basic} />
<Story story={Other} />
<Canvas>
<Story story={Other} />
</Canvas>
<Story name="renamed" story={MyStories.Foo} />

6
addons/docs/src/mdx/__testfixtures__/csf-imports.output.snapshot
View File

@ -4,7 +4,7 @@ exports[`docs-mdx-compiler-plugin csf-imports.mdx 1`] = `
"/* @jsx mdx */
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story, Meta } from '@storybook/addon-docs/blocks';
import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Welcome, Button } from '@storybook/angular/demo';
import * as MyStories from './My.stories';
import { Other } from './Other.stories';
@ -27,7 +27,9 @@ function MDXContent({ components, ...props }) {
<Meta title=\\"MDX/CSF imports\\" mdxType=\\"Meta\\" />
<h1>{\`Stories from CSF imports\`}</h1>
<Story story={MyStories.Basic} name=\\"BasicStory\\" mdxType=\\"Story\\" />
<Story story={Other} name=\\"OtherStory\\" mdxType=\\"Story\\" />
<Canvas mdxType=\\"Canvas\\">
<Story story={Other} name=\\"OtherStory\\" mdxType=\\"Story\\" />
</Canvas>
<Story name=\\"renamed\\" story={MyStories.Foo} mdxType=\\"Story\\" />
</MDXLayout>
);

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

@ -249,7 +249,14 @@ function getExports(node, counter, options) {
if (CANVAS_REGEX.exec(value)) {
// Canvas/Preview, possibly containing multiple stories
const ast = parser.parseExpression(value, { plugins: ['jsx'] });
return { stories: genCanvasExports(ast, counter) };
const canvasExports = genCanvasExports(ast, counter);
const { code } = generate(ast, {});
// eslint-disable-next-line no-param-reassign
node.value = code;
return { stories: canvasExports };
}
if (META_REGEX.exec(value)) {
const ast = parser.parseExpression(value, { plugins: ['jsx'] });

2
examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx
View File

@ -14,7 +14,7 @@ I can define a story with the function imported from CSF:
<ArgsTable />
<Canvas>
<Story name="basic" story={Csf.Basic} />
<Story story={Csf.Basic} />
</Canvas>
<Canvas>