Codemod: convert mdx to module format

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

@@ -4,7 +4,14 @@ const mdx = require('@mdx-js/mdx');
 const prettier = require('prettier');
 const plugin = require('./mdx-compiler-plugin');
 
-function format(code) {
+async function generate(filePath) {
+  const content = await fs.readFile(filePath, 'utf8');
+
+  const code = mdx.sync(content, {
+    filepath: filePath,
+    compilers: [plugin({})],
+  });
+
   return prettier.format(code, {
     parser: 'babel',
     printWidth: 100,
@@ -15,17 +22,6 @@ function format(code) {
   });
 }
 
-async function generate(filePath) {
-  const content = await fs.readFile(filePath, 'utf8');
-
-  const result = mdx.sync(content, {
-    filepath: filePath,
-    compilers: [plugin({})],
-  });
-
-  return format(result);
-}
-
 describe('docs-mdx-compiler-plugin', () => {
   it('supports vanilla mdx', async () => {
     const code = await generate(path.resolve(__dirname, './fixtures/vanilla.mdx'));

lib/codemod/README.md

@@ -211,6 +211,8 @@ This converts all of your component module stories into MDX format, which integr
 ./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/convert-to-module-format.js . --ignore-pattern "node_modules|dist"
 ```
 
+For example:
+
 ```js
 export default {
   title: 'Button',
@@ -237,3 +239,39 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
   <Button label="Story 2" onClick={action('click')} />
 </Story>
 ```
+
+### convert-mdx-to-module
+
+This converts all your MDX stories into module format.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/convert-to-module-format.js . --ignore-pattern "node_modules|dist" --extensions=mdx
+```
+
+For example:
+
+```js
+import React from 'react';
+import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title='Button' />
+
+<Story name='basic stories'><Button label='The Button' /></Story>
+```
+
+Becomes:
+
+```
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const basicStory = () => <Button label="The Button" />;
+basicStory.story = {
+  name: 'basic stories',
+};
+```

lib/codemod/package.json

@@ -21,6 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.0.0",
     "@storybook/node-logger": "5.2.0-beta.1",
     "core-js": "^3.0.1",
     "cross-spawn": "^6.0.5",

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

@@ -0,0 +1,14 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title='Button' />
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
+
+secondStory.story = {
+  name: 'second story',
+};
+
+export const complexStory = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+complexStory.story = {
+  name: 'complex story',
+};

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

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

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

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

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

@@ -0,0 +1,19 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title='Button' />
+
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+export default {
+  title: 'Button',
+  includeStories: ['story1', 'secondStory', 'complexStory'],
+};
+
+export const story1 = () => <Button label="Story 1" />;
+export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
+
+secondStory.story = {
+  name: 'second story',
+};
+
+export const complexStory = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+complexStory.story = {
+  name: 'complex story',
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title='Button'
+  parameters={{
+    component: Button,
+    foo: 1,
+    bar: 2,
+  }} />
+
+<Story name='with kind parameters'><Button label='The Button' /></Story>

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+    foo: 1,
+    bar: 2,
+  },
+};
+
+export const withKindParameters = () => <Button label="The Button" />;
+
+withKindParameters.story = {
+  name: 'with kind parameters',
+};

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

@@ -0,0 +1,3 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Story name="plaintext">Plain text</Story>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export default {};
+export const plaintext = () => 'Plain text';

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

@@ -0,0 +1,18 @@
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title='Button' />
+
+<Story
+  name='with story parameters'
+  parameters={{
+    header: false,
+    inline: true,
+  }}><Button label='The Button' /></Story>
+
+<Story
+  name='foo'
+  parameters={{
+    bar: 1,
+  }}><Button label='Foo' /></Story>

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'Button',
+};
+
+export const withStoryParameters = () => <Button label="The Button" />;
+
+withStoryParameters.story = {
+  name: 'with story parameters',
+
+  parameters: {
+    header: false,
+    inline: true,
+  },
+};
+
+export const foo = () => <Button label="Foo" />;
+
+foo.story = {
+  parameters: {
+    bar: 1,
+  },
+};

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

@@ -0,0 +1,21 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+<Meta
+  title="Addons|Docs/mdx"
+  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+  parameters={{ component: Button, notes: 'component notes' }}
+/>
+
+## Getting into details
+
+<Story name="solo story">
+  <Button onClick={action('clicked')}>solo</Button>
+</Story>
+
+<Source name="hello story" />
+
+## Configurable height
+
+<Story id="basics-button--all-buttons" height="400px" />

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Addons|Docs/mdx',
+
+  decorators: [
+    storyFn => (
+      <div
+        style={{
+          backgroundColor: 'yellow',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+
+  parameters: {
+    component: Button,
+    notes: 'component notes',
+  },
+};
+
+export const soloStory = () => <Button onClick={action('clicked')}>solo</Button>;
+
+soloStory.story = {
+  name: 'solo story',
+};

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/addon-docs/blocks';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { Meta, Story } from '@storybook/addon-docs/blocks';
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/addon-docs/blocks';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { storiesOf } from '@storybook/react';
 import { Meta, Story } from '@storybook/addon-docs/blocks';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from './Button';
 import { storiesOf } from '@storybook/react';
 import { Meta, Story } from '@storybook/addon-docs/blocks';

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

@@ -0,0 +1,15 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+const testNames = [
+  'basic',
+  'decorators',
+  'parameters',
+  'story-parameters',
+  'exclude-stories',
+  'story-refs',
+  'plaintext',
+];
+
+testNames.forEach(testName => {
+  defineTest(__dirname, `convert-mdx-to-module`, null, `convert-mdx-to-module/${testName}`);
+});