Core: Module format story decorators (#7490)

Core: Module format story decorators

addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap

@@ -80,7 +80,11 @@ function MDXContent({ components, ...props }) {
         mdxType=\\"Meta\\"
       />
       <h1>{\`Decorated story\`}</h1>
-      <Story name=\\"one\\" mdxType=\\"Story\\">
+      <Story
+        name=\\"one\\"
+        decorators={[storyFn => <div className=\\"local\\">{storyFn()}</div>]}
+        mdxType=\\"Story\\"
+      >
         <Button mdxType=\\"Button\\">One</Button>
       </Story>
     </MDXLayout>
@@ -92,6 +96,7 @@ MDXContent.isMDXComponent = true;
 export const one = () => <Button>One</Button>;
 one.story = {};
 one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
 
 const componentMeta = {
   title: 'Button',

addons/docs/fixtures/decorators.mdx

@@ -8,6 +8,6 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
 
 # Decorated story
 
-<Story name="one">
+<Story name="one" decorators={[storyFn => <div className="local">{storyFn()}</div>]}>
   <Button>One</Button>
 </Story>

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'),

examples/official-storybook/stories/addon-info/options.stories.js

@@ -140,9 +140,7 @@ export const useInfoAsStoryDecorator = () => <BaseButton label="Button" />;
 
 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 = () => <BaseButton label="Button" />;

examples/official-storybook/stories/core/decorators.stories.js

@@ -28,11 +28,23 @@ export default {
 
 export const all = () => <p>Story</p>;
 all.story = {
+  decorators: [
+    s => (
+      <>
+        <p>Local Decorator</p>
+        {s()}
+      </>
+    ),
+  ],
+};
+
+export const deprecated = () => <p>Story</p>;
+deprecated.story = {
   parameters: {
     decorators: [
       s => (
         <>
-          <p>Local Decorator</p>
+          <p>Deprecated Local Decorator</p>
           {s()}
         </>
       ),

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 => <div className='foo'>{storyFn}</div>]} />
 
-<Story name='with decorator'><Button label='The Button' /></Story>
+<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>

lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/decorators.output.js

@@ -10,4 +10,5 @@ export const withDecorator = () => <Button label="The Button" />;
 
 withDecorator.story = {
   name: 'with decorator',
+  decorators: [withKnobs],
 };

lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/decorators.input.js

@@ -7,4 +7,7 @@ export default {
 };
 
 export const story1 = () => <Button label="The Button" />;
-story1.story = { name: 'with decorator' };
+story1.story = {
+  name: 'with decorator',
+  decorators: [withKnobs],
+};

lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/decorators.output.js

@@ -5,4 +5,4 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
   title='Some.Button'
   decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
 
-<Story name='with decorator'><Button label='The Button' /></Story>
+<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/story-decorators.input.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from './Button';
+
+storiesOf('Some.Button', module)
+  .add('with story params and decorators', () => <Button label="The Button" />, {
+    bar: 1,
+    decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+  })
+  .add('with story decorators', () => <Button label="The Button" />, {
+    decorators: [withKnobs],
+  });

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/story-decorators.output.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Some.Button',
+};
+
+export const withStoryParamsAndDecorators = () => <Button label="The Button" />;
+
+withStoryParamsAndDecorators.story = {
+  name: 'with story params and decorators',
+
+  parameters: {
+    bar: 1,
+  },
+
+  decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+};
+
+export const withStoryDecorators = () => <Button label="The Button" />;
+
+withStoryDecorators.story = {
+  name: 'with story decorators',
+  decorators: [withKnobs],
+};

lib/codemod/src/transforms/__tests__/convert-storiesof-to-module.test.js

@@ -13,6 +13,7 @@ const testNames = [
   'exports',
   'collision',
   'const',
+  'story-decorators',
 ];
 
 testNames.forEach(testName => {

lib/codemod/src/transforms/convert-storiesof-to-module.js

@@ -28,6 +28,23 @@ export default function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
 
+  function extractDecorators(parameters) {
+    if (!parameters) {
+      return {};
+    }
+    let storyDecorators = parameters.properties.find(p => p.key.name === 'decorators');
+    if (!storyDecorators) {
+      return { storyParams: parameters };
+    }
+    storyDecorators = storyDecorators.value;
+    const storyParams = { ...parameters };
+    storyParams.properties = storyParams.properties.filter(p => p.key.name !== 'decorators');
+    if (storyParams.properties.length === 0) {
+      return { storyDecorators };
+    }
+    return { storyParams, storyDecorators };
+  }
+
   function convertToModuleExports(path, originalExports, counter) {
     const base = j(path);
 
@@ -144,8 +161,14 @@ export default function transformer(file, api, options) {
       }
 
       if (add.node.arguments.length > 2) {
-        const storyParams = add.node.arguments[2];
-        storyAnnotations.push(j.property('init', j.identifier('parameters'), storyParams));
+        const originalStoryParams = add.node.arguments[2];
+        const { storyParams, storyDecorators } = extractDecorators(originalStoryParams);
+        if (storyParams) {
+          storyAnnotations.push(j.property('init', j.identifier('parameters'), storyParams));
+        }
+        if (storyDecorators) {
+          storyAnnotations.push(j.property('init', j.identifier('decorators'), storyDecorators));
+        }
       }
 
       if (storyAnnotations.length > 0) {

lib/core/src/client/preview/start.js

@@ -349,8 +349,13 @@ export default function start(render, { decorateStory } = {}) {
       Object.keys(exports).forEach(key => {
         if (isExportStory(key, meta)) {
           const storyFn = exports[key];
-          const { name, parameters } = storyFn.story || {};
-          kind.add(name || key, storyFn, parameters);
+          const { name, parameters, decorators } = storyFn.story || {};
+          if (parameters && parameters.decorators) {
+            deprecate(() => {},
+            `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
+          }
+          const decoratorParams = decorators ? { decorators } : null;
+          kind.add(name || key, storyFn, { ...parameters, ...decoratorParams });
         }
       });