diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap index 34e98971afbf..0986c6fd5281 100644 --- a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap +++ b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap @@ -80,7 +80,11 @@ function MDXContent({ components, ...props }) { mdxType=\\"Meta\\" />

{\`Decorated story\`}

- +
{storyFn()}
]} + mdxType=\\"Story\\" + >
@@ -92,6 +96,7 @@ MDXContent.isMDXComponent = true; export const one = () => ; one.story = {}; one.story.parameters = { mdxSource: \`\` }; +one.story.decorators = [storyFn =>
{storyFn()}
]; const componentMeta = { title: 'Button', diff --git a/addons/docs/fixtures/decorators.mdx b/addons/docs/fixtures/decorators.mdx index 2f4e84e6ded0..1a38b0053aef 100644 --- a/addons/docs/fixtures/decorators.mdx +++ b/addons/docs/fixtures/decorators.mdx @@ -8,6 +8,6 @@ import { Story, Meta } from '@storybook/addon-docs/blocks'; # Decorated story - +
{storyFn()}
]}>
diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js index c5586977381b..f8f22c520595 100644 --- a/addons/docs/mdx-compiler-plugin.js +++ b/addons/docs/mdx-compiler-plugin.js @@ -82,7 +82,12 @@ function genStoryExport(ast, counter) { statements.push(`${storyKey}.story.parameters = { mdxSource: ${source} };`); } - // console.log(statements); + let decorators = getAttr(ast.openingElement, 'decorators'); + decorators = decorators && decorators.expression; + if (decorators) { + const { code: decos } = generate(decorators, {}); + statements.push(`${storyKey}.story.decorators = ${decos};`); + } return { [storyKey]: statements.join('\n'), diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js index 95d04d672da0..d87384bcc59c 100644 --- a/examples/official-storybook/stories/addon-info/options.stories.js +++ b/examples/official-storybook/stories/addon-info/options.stories.js @@ -140,9 +140,7 @@ export const useInfoAsStoryDecorator = () => ; useInfoAsStoryDecorator.story = { name: 'Use Info as story decorator', - parameters: { - decorators: [withInfo('Info can take options via the global or local decorator as well.')], - }, + decorators: [withInfo('Info can take options via the global or local decorator as well.')], }; export const usingParamatersAcrossAllStories = () => ; diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js index 314ac9308386..6d301a93db54 100644 --- a/examples/official-storybook/stories/core/decorators.stories.js +++ b/examples/official-storybook/stories/core/decorators.stories.js @@ -28,11 +28,23 @@ export default { export const all = () =>

Story

; all.story = { + decorators: [ + s => ( + <> +

Local Decorator

+ {s()} + + ), + ], +}; + +export const deprecated = () =>

Story

; +deprecated.story = { parameters: { decorators: [ s => ( <> -

Local Decorator

+

Deprecated Local Decorator

{s()} ), diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/decorators.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/decorators.input.js index a0f7a6be726c..2c9bc768f8f4 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/decorators.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/decorators.input.js @@ -5,4 +5,4 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; title='Some.Button' decorators={[withKnobs, storyFn =>
{storyFn}
]} /> -