Merge pull request #21073 from storybookjs/kasper/mdx-to-mdx-and-csf

Codemod: Convert `.stories.mdx` to MDX and CSF

code/jest.config.base.js

@@ -22,6 +22,31 @@ const skipOnWindows = [
   'lib/csf-tools/src/enrichCsf.test.ts',
 ];
 
+const modulesToTransform = [
+  '@angular',
+  'ccount',
+  'rxjs',
+  'nanoid',
+  'uuid',
+  'lit-html',
+  'lit',
+  '@lit',
+  '@mdx-js',
+  'remark',
+  'unified',
+  'vfile',
+  'vfile-message',
+  'mdast',
+  'micromark',
+  'unist',
+  'estree',
+  'decode-named-character-reference',
+  'character-entities',
+  'zwitch',
+  'stringify-entities',
+];
+
+/** @type { import('jest').Config } */
 module.exports = {
   cacheDirectory: path.resolve('.cache/jest'),
   clearMocks: true,
@@ -36,9 +61,7 @@ module.exports = {
     '^.+\\.(t|j)sx?$': ['@swc/jest', swcrc],
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
-  transformIgnorePatterns: [
-    '/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|lit|@mdx-js|@lit)',
-  ],
+  transformIgnorePatterns: [`(?<!node_modules.+)node_modules/(?!${modulesToTransform.join('|')})`],
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
     '/storybook-static/',

code/lib/codemod/jest.config.js

@@ -5,4 +5,5 @@ const baseConfig = require('../../jest.config.node');
 module.exports = {
   ...baseConfig,
   displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+  resetMocks: true,
 };

code/lib/codemod/package.json

@@ -24,13 +24,13 @@
     ".": {
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
     "./dist/transforms/add-component-parameters.js": "./dist/transforms/add-component-parameters.js",
     "./dist/transforms/csf-2-to-3.js": "./dist/transforms/csf-2-to-3.js",
     "./dist/transforms/csf-hoist-story-annotations.js": "./dist/transforms/csf-hoist-story-annotations.js",
     "./dist/transforms/move-builtin-addons.js": "./dist/transforms/move-builtin-addons.js",
+    "./dist/transforms/mdx-to-csf.js": "./dist/transforms/mdx-to-csf.js",
     "./dist/transforms/storiesof-to-csf.js": "./dist/transforms/storiesof-to-csf.js",
     "./dist/transforms/update-addon-info.js": "./dist/transforms/update-addon-info.js",
     "./dist/transforms/update-organisation-name.js": "./dist/transforms/update-organisation-name.js",
@@ -39,7 +39,6 @@
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
@@ -66,24 +65,36 @@
     "ansi-regex": "^5.0.1",
     "jest": "^29.3.1",
     "jest-specific-snapshot": "^7.0.0",
-    "typescript": "~4.9.3"
+    "mdast-util-mdx-jsx": "^2.1.2",
+    "mdast-util-mdxjs-esm": "^1.3.1",
+    "remark": "^14.0.2",
+    "remark-mdx": "^2.2.1",
+    "ts-dedent": "^2.2.0",
+    "typescript": "~4.9.3",
+    "unist-util-is": "^5.2.0",
+    "unist-util-select": "^4.0.3",
+    "unist-util-visit": "^4.1.2",
+    "vfile": "^5.3.7"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
-    "platform": "node",
     "entries": [
       "./src/index.js",
       "./src/transforms/add-component-parameters.js",
       "./src/transforms/csf-2-to-3.ts",
       "./src/transforms/csf-hoist-story-annotations.js",
+      "./src/transforms/mdx-to-csf.ts",
       "./src/transforms/move-builtin-addons.js",
       "./src/transforms/storiesof-to-csf.js",
       "./src/transforms/update-addon-info.js",
       "./src/transforms/update-organisation-name.js",
       "./src/transforms/upgrade-deprecated-types.ts",
       "./src/transforms/upgrade-hierarchy-separators.js"
+    ],
+    "formats": [
+      "cjs"
     ]
   },
   "gitHead": "1f559ed69a4fdd8eeb88e4190b16a8932104908e"

code/lib/codemod/src/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint import/prefer-default-export: "off" */
 import fs from 'fs';
 import path from 'path';
@@ -62,7 +63,7 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
 
   if (!dryRun && files.length > 0) {
     const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
-    spawnSync(
+    const result = spawnSync(
       'node',
       [
         require.resolve('jscodeshift/bin/jscodeshift'),
@@ -70,6 +71,7 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
         // which is faster, and also makes sure the user won't see babel messages such as:
         // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
         '--no-babel',
+        '--fail-on-error',
         '-t',
         `${TRANSFORM_DIR}/${codemod}.js`,
         ...parserArgs,
@@ -80,6 +82,15 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
         shell: true,
       }
     );
+    if (result.status === 1) {
+      logger.log('Skipped renaming because of errors.');
+      return;
+    }
+  }
+
+  if (!renameParts && codemod === 'mdx-to-csf') {
+    renameParts = ['.stories.mdx', '.mdx'];
+    rename = '.stories.mdx:.mdx;';
   }
 
   if (renameParts) {

code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts

@@ -0,0 +1,574 @@
+import * as fs_ from 'node:fs';
+import { expect, test } from '@jest/globals';
+import dedent from 'ts-dedent';
+import jscodeshift, { nameToValidExport } from '../mdx-to-csf';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => (typeof val === 'string' ? val : JSON.stringify(val, null, 2) ?? ''),
+  test: () => true,
+});
+
+jest.mock('node:fs');
+const fs = fs_ as jest.Mocked<typeof import('node:fs')>;
+
+beforeEach(() => {
+  fs.existsSync.mockImplementation(() => false);
+});
+
+test('drop invalid story nodes', () => {
+  const input = dedent`
+      import { Meta } from '@storybook/addon-docs';
+
+      <Meta title="Foobar" />
+      
+      <Story>No name!</Story>  
+      
+      <Story name="Primary">Story</Story>
+     
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta } from '@storybook/addon-docs';
+
+    <Meta of={FoobarStories} />
+
+
+
+    <Story of={FoobarStories.Primary} />
+
+  `);
+});
+
+test('convert story re-definition', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+      import { Primary } from './Foobar.stories';
+
+      <Meta title="Foobar" />
+      
+      <Story story={Primary} />
+    `;
+
+  fs.existsSync.mockImplementation((path) => path === 'Foobar.stories.js');
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import { Primary } from './Foobar.stories';
+    import * as FoobarStories from './Foobar_.stories';
+
+    <Meta of={FoobarStories} />
+
+    <Story of={FoobarStories.Primary} />
+
+  `);
+  const [csfFileName, csf] = fs.writeFileSync.mock.calls[0];
+  expect(csfFileName).toMatchInlineSnapshot(`Foobar_.stories.js`);
+  expect(csf).toMatchInlineSnapshot(`
+    import { Primary } from './Foobar.stories';
+
+    export default {
+      title: 'Foobar',
+    };
+
+    export { Primary };
+
+  `);
+});
+
+test('Comment out story nodes with id', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+
+      <Meta title="Foobar" />
+      
+      <Story id="button--primary" />
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import * as FoobarStories from './Foobar.stories';
+
+    <Meta of={FoobarStories} />
+
+    {/* <Story id="button--primary" /> is deprecated, please migrate it to <Story of={referenceToStory} /> */}
+
+    <Story id="button--primary" />
+
+  `);
+});
+
+test('convert correct story nodes', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+
+      <Meta title="Foobar" />
+      
+      <Story name="Primary">Story</Story>
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import * as FoobarStories from './Foobar.stories';
+
+    <Meta of={FoobarStories} />
+
+    <Story of={FoobarStories.Primary} />
+
+  `);
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+  expect(csf).toMatchInlineSnapshot(`
+    export default {
+      title: 'Foobar',
+    };
+
+    export const Primary = {
+      render: () => 'Story',
+      name: 'Primary',
+    };
+
+  `);
+});
+
+test('convert story nodes with spaces', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+
+      <Meta title="Foobar" />
+      
+      <Story name="Primary Space">Story</Story>
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import * as FoobarStories from './Foobar.stories';
+
+    <Meta of={FoobarStories} />
+
+    <Story of={FoobarStories.PrimarySpace} />
+
+  `);
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+  expect(csf).toMatchInlineSnapshot(`
+    export default {
+      title: 'Foobar',
+    };
+
+    export const PrimarySpace = {
+      render: () => 'Story',
+      name: 'Primary Space',
+    };
+
+  `);
+});
+
+test('extract esm into csf head code', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './Button';
+
+      # hello
+
+      export const args = { bla: 1 };
+      export const Template = (args) => <Button {...args} />;
+
+      <Meta title="foobar" />
+
+      world {2 + 1}
+
+      <Story name="foo">bar</Story>
+      
+      <Story 
+        name="Unchecked"
+        args={{
+          ...args,
+          label: 'Unchecked',
+        }}>
+        {Template.bind({})}
+      </Story>
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import { Button } from './Button';
+    import * as FoobarStories from './Foobar.stories';
+
+    # hello
+
+    export const args = { bla: 1 };
+    export const Template = (args) => <Button {...args} />;
+
+    <Meta of={FoobarStories} />
+
+    world {2 + 1}
+
+    <Story of={FoobarStories.Foo} />
+
+    <Story of={FoobarStories.Unchecked} />
+
+  `);
+
+  const [csfFileName, csf] = fs.writeFileSync.mock.calls[0];
+  expect(csfFileName).toMatchInlineSnapshot(`Foobar.stories.js`);
+  expect(csf).toMatchInlineSnapshot(`
+    import { Button } from './Button';
+
+    const args = { bla: 1 };
+    const Template = (args) => <Button {...args} />;
+
+    export default {
+      title: 'foobar',
+    };
+
+    export const Foo = {
+      render: () => 'bar',
+      name: 'foo',
+    };
+
+    export const Unchecked = {
+      render: Template.bind({}),
+      name: 'Unchecked',
+
+      args: {
+        ...args,
+        label: 'Unchecked',
+      },
+    };
+
+  `);
+});
+
+test('extract all meta parameters', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+
+      export const args = { bla: 1 };
+      
+      <Meta title="foobar" args={{...args}} parameters={{a: '1'}} />
+      
+      <Story name="foo">bar</Story>
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+    const args = { bla: 1 };
+
+    export default {
+      title: 'foobar',
+
+      args: {
+        ...args,
+      },
+
+      parameters: {
+        a: '1',
+      },
+    };
+
+    export const Foo = {
+      render: () => 'bar',
+      name: 'foo',
+    };
+
+  `);
+});
+
+test('extract all story attributes', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './Button';
+
+      export const args = { bla: 1 };
+      export const Template = (args) => <Button {...args} />;
+      
+      <Meta title="foobar" />
+
+      <Story name="foo">bar</Story>
+      
+      <Story 
+        name="Unchecked"
+        args={{
+          ...args,
+          label: 'Unchecked',
+        }}>    
+        {Template.bind({})}
+      </Story>
+      
+      <Story name="Second">{Template.bind({})}</Story>
+      
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+    import { Button } from './Button';
+
+    const args = { bla: 1 };
+    const Template = (args) => <Button {...args} />;
+
+    export default {
+      title: 'foobar',
+    };
+
+    export const Foo = {
+      render: () => 'bar',
+      name: 'foo',
+    };
+
+    export const Unchecked = {
+      render: Template.bind({}),
+      name: 'Unchecked',
+
+      args: {
+        ...args,
+        label: 'Unchecked',
+      },
+    };
+
+    export const Second = {
+      render: Template.bind({}),
+      name: 'Second',
+    };
+
+  `);
+});
+
+test('duplicate story name', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './Button';
+
+      export const Default = (args) => <Button {...args} />;
+      
+      <Meta title="Button" />
+
+      <Story name="Default">    
+        {Default.bind({})}
+      </Story>
+      
+      <Story name="Second">{Default.bind({})}</Story>
+      
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+    import { Button } from './Button';
+
+    const Default = (args) => <Button {...args} />;
+
+    export default {
+      title: 'Button',
+    };
+
+    export const Default_ = {
+      render: Default.bind({}),
+      name: 'Default',
+    };
+
+    export const Second = {
+      render: Default.bind({}),
+      name: 'Second',
+    };
+
+  `);
+});
+
+test('kebab case file name', () => {
+  const input = dedent`
+      import { Meta, Story } from '@storybook/addon-docs';
+      import { Kebab } from './my-component/some-kebab-case';
+
+      export const Template = (args) => <Kebab {...args} />;
+      
+      <Meta title="Kebab" />
+
+      <Story name="Much-Kebab">    
+        {Template.bind({})}
+      </Story>
+      
+      <Story name="Really-Much-Kebab">{Template.bind({})}</Story>
+      
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'some-kebab-case.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta, Story } from '@storybook/blocks';
+    import { Kebab } from './my-component/some-kebab-case';
+    import * as SomeKebabCaseStories from './some-kebab-case.stories';
+
+    export const Template = (args) => <Kebab {...args} />;
+
+    <Meta of={SomeKebabCaseStories} />
+
+    <Story of={SomeKebabCaseStories.MuchKebab} />
+
+    <Story of={SomeKebabCaseStories.ReallyMuchKebab} />
+
+  `);
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+    import { Kebab } from './my-component/some-kebab-case';
+
+    const Template = (args) => <Kebab {...args} />;
+
+    export default {
+      title: 'Kebab',
+    };
+
+    export const MuchKebab = {
+      render: Template.bind({}),
+      name: 'Much-Kebab',
+    };
+
+    export const ReallyMuchKebab = {
+      render: Template.bind({}),
+      name: 'Really-Much-Kebab',
+    };
+
+  `);
+});
+
+test('story child is jsx', () => {
+  const input = dedent`
+      import { Canvas, Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './button';
+      
+      <Story name="Primary">
+        <Button>
+          <div>Hello!</div>
+        </Button>
+      </Story>
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+      import { Button } from './button';
+      export default {};
+
+      export const Primary = {
+        render: () => (
+          <Button>
+            <div>Hello!</div>
+          </Button>
+        ),
+
+        name: 'Primary',
+      };
+
+    `);
+});
+
+test('story child is CSF3', () => {
+  const input = dedent`
+      import { Story } from '@storybook/addon-docs';
+      import { Button } from './button';
+             
+      <Story name="Primary" render={(args) => <Button {...args}></Button> } args={{label: 'Hello' }} />
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+    import { Button } from './button';
+    export default {};
+
+    export const Primary = {
+      name: 'Primary',
+      render: (args) => <Button {...args}></Button>,
+
+      args: {
+        label: 'Hello',
+      },
+    };
+
+  `);
+});
+
+test('story child is arrow function', () => {
+  const input = dedent`
+      import { Canvas, Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './button';
+      
+      <Story name="Primary">
+        {(args) => <Button />}
+      </Story>
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+      import { Button } from './button';
+      export default {};
+
+      export const Primary = {
+        render: (args) => <Button />,
+        name: 'Primary',
+      };
+
+    `);
+});
+
+test('story child is identifier', () => {
+  const input = dedent`
+      import { Canvas, Meta, Story } from '@storybook/addon-docs';
+      import { Button } from './button';
+      
+      <Story name="Primary">
+        {Button}
+      </Story>
+    `;
+
+  jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  const [, csf] = fs.writeFileSync.mock.calls[0];
+
+  expect(csf).toMatchInlineSnapshot(`
+      import { Button } from './button';
+      export default {};
+
+      export const Primary = {
+        render: Button,
+        name: 'Primary',
+      };
+
+    `);
+});
+
+test('nameToValidExport', () => {
+  expect(nameToValidExport('1 starts with digit')).toMatchInlineSnapshot(`$1StartsWithDigit`);
+  expect(nameToValidExport('name')).toMatchInlineSnapshot(`Name`);
+  expect(nameToValidExport('Multi words')).toMatchInlineSnapshot(`MultiWords`);
+  // Unicode is valid in JS variable names
+  expect(nameToValidExport('Keep unicode 😅')).toMatchInlineSnapshot(`KeepUnicode😅`);
+});

code/lib/codemod/src/transforms/mdx-to-csf.ts

@@ -0,0 +1,349 @@
+/* eslint-disable no-param-reassign,@typescript-eslint/no-shadow,consistent-return */
+import type { FileInfo } from 'jscodeshift';
+import { babelParse, babelParseExpression } from '@storybook/csf-tools';
+import { remark } from 'remark';
+import type { Root } from 'remark-mdx';
+import remarkMdx from 'remark-mdx';
+import { SKIP, visit } from 'unist-util-visit';
+import { is } from 'unist-util-is';
+import type {
+  MdxJsxAttribute,
+  MdxJsxExpressionAttribute,
+  MdxJsxFlowElement,
+  MdxJsxTextElement,
+} from 'mdast-util-mdx-jsx';
+import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
+import * as t from '@babel/types';
+import type { BabelFile } from '@babel/core';
+import * as babel from '@babel/core';
+import * as recast from 'recast';
+import * as path from 'node:path';
+import prettier from 'prettier';
+import * as fs from 'node:fs';
+import camelCase from 'lodash/camelCase';
+import type { MdxFlowExpression } from 'mdast-util-mdx-expression';
+
+const mdxProcessor = remark().use(remarkMdx) as ReturnType<typeof remark>;
+
+export default function jscodeshift(info: FileInfo) {
+  const parsed = path.parse(info.path);
+
+  let baseName = path.join(
+    parsed.dir,
+    parsed.name.replace('.mdx', '').replace('.stories', '').replace('.story', '')
+  );
+
+  // make sure the new csf file we are going to create exists
+  while (fs.existsSync(`${baseName}.stories.js`)) {
+    baseName += '_';
+  }
+
+  const result = transform(info.source, path.basename(baseName));
+
+  if (result == null) {
+    // We can not make a valid migration.
+    return;
+  }
+
+  const [mdx, csf] = result;
+
+  fs.writeFileSync(`${baseName}.stories.js`, csf);
+
+  return mdx;
+}
+
+export function transform(source: string, baseName: string): [mdx: string, csf: string] {
+  const root = mdxProcessor.parse(source);
+  const storyNamespaceName = nameToValidExport(`${baseName}Stories`);
+
+  let containsMeta = false;
+  const metaAttributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> = [];
+  const storiesMap = new Map<
+    string,
+    | {
+        type: 'value';
+        attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute>;
+        children: (MdxJsxFlowElement | MdxJsxTextElement)['children'];
+      }
+    | {
+        type: 'reference';
+      }
+    | {
+        type: 'id';
+      }
+  >();
+
+  // rewrite addon docs import
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    node.value = node.value
+      .replaceAll('@storybook/addon-docs', '@storybook/blocks')
+      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks');
+  });
+
+  visit(
+    root,
+    ['mdxJsxFlowElement', 'mdxJsxTextElement'],
+    (node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
+      if (is(node, { name: 'Meta' })) {
+        containsMeta = true;
+        metaAttributes.push(...node.attributes);
+        node.attributes = [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'of',
+            value: {
+              type: 'mdxJsxAttributeValueExpression',
+              value: storyNamespaceName,
+            },
+          },
+        ];
+      }
+      if (is(node, { name: 'Story' })) {
+        const nameAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'name'
+        );
+        const idAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'id'
+        );
+        const storyAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'story'
+        );
+        if (typeof nameAttribute?.value === 'string') {
+          const name = nameToValidExport(nameAttribute.value);
+          storiesMap.set(name, {
+            type: 'value',
+            attributes: node.attributes,
+            children: node.children,
+          });
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+        } else if (idAttribute?.value) {
+          // e.g. <Story id="button--primary" />
+          // should be migrated manually as it is very hard to find out where the definition of such a string id is located
+          const nodeString = mdxProcessor.stringify({ type: 'root', children: [node] }).trim();
+          const newNode: MdxFlowExpression = {
+            type: 'mdxFlowExpression',
+            value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> */`,
+          };
+          storiesMap.set(idAttribute.value as string, { type: 'id' });
+          parent.children.splice(index, 0, newNode);
+          // current index is the new comment, and index + 1 is current node
+          // SKIP traversing current node, and continue with the node after that
+          return [SKIP, index + 2];
+        } else if (
+          storyAttribute?.type === 'mdxJsxAttribute' &&
+          typeof storyAttribute.value === 'object' &&
+          storyAttribute.value.type === 'mdxJsxAttributeValueExpression'
+        ) {
+          // e.g. <Story story={Primary} />
+
+          const name = storyAttribute.value.value;
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+
+          storiesMap.set(name, { type: 'reference' });
+        } else {
+          parent.children.splice(index, 1);
+          // Do not traverse `node`, continue at the node *now* at `index`.
+          return [SKIP, index];
+        }
+      }
+      return undefined;
+    }
+  );
+
+  const metaProperties = metaAttributes.flatMap((attribute) => {
+    if (attribute.type === 'mdxJsxAttribute') {
+      if (typeof attribute.value === 'string') {
+        return [t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value))];
+      }
+      return [
+        t.objectProperty(t.identifier(attribute.name), babelParseExpression(attribute.value.value)),
+      ];
+    }
+    return [];
+  });
+
+  const file = getEsmAst(root);
+
+  if (containsMeta || storiesMap.size > 0) {
+    addStoriesImport(root, baseName, storyNamespaceName);
+  }
+
+  file.path.traverse({
+    // remove mdx imports from csf
+    ImportDeclaration(path) {
+      if (path.node.source.value === '@storybook/blocks') {
+        path.remove();
+      }
+    },
+    // remove exports from csf file
+    ExportNamedDeclaration(path) {
+      path.replaceWith(path.node.declaration);
+    },
+  });
+
+  if (storiesMap.size === 0) {
+    // A CSF file must have at least one story, so skip migrating if this is the case.
+    return null;
+  }
+
+  const newStatements: t.Statement[] = [
+    t.exportDefaultDeclaration(t.objectExpression(metaProperties)),
+  ];
+
+  function mapChildrenToRender(children: (MdxJsxFlowElement | MdxJsxTextElement)['children']) {
+    const child = children[0];
+
+    if (!child) return undefined;
+
+    if (child.type === 'text') {
+      return t.arrowFunctionExpression([], t.stringLiteral(child.value));
+    }
+    if (child.type === 'mdxFlowExpression' || child.type === 'mdxTextExpression') {
+      const expression = babelParseExpression(child.value);
+
+      // Recreating those lines: https://github.com/storybookjs/mdx1-csf/blob/f408fc97e9a63097ca1ee577df9315a3cccca975/src/sb-mdx-plugin.ts#L185-L198
+      const BIND_REGEX = /\.bind\(.*\)/;
+      if (BIND_REGEX.test(child.value)) {
+        return expression;
+      }
+      if (t.isIdentifier(expression)) {
+        return expression;
+      }
+      if (t.isArrowFunctionExpression(expression)) {
+        return expression;
+      }
+      return t.arrowFunctionExpression([], expression);
+    }
+
+    const expression = babelParseExpression(
+      mdxProcessor.stringify({ type: 'root', children: [child] })
+    );
+    return t.arrowFunctionExpression([], expression);
+  }
+
+  function variableNameExists(name: string) {
+    let found = false;
+    file.path.traverse({
+      VariableDeclarator: (path) => {
+        const lVal = path.node.id;
+        if (t.isIdentifier(lVal) && lVal.name === name) found = true;
+      },
+    });
+    return found;
+  }
+
+  newStatements.push(
+    ...[...storiesMap].flatMap(([key, value]) => {
+      if (value.type === 'id') return [];
+      if (value.type === 'reference') {
+        return [
+          t.exportNamedDeclaration(null, [t.exportSpecifier(t.identifier(key), t.identifier(key))]),
+        ];
+      }
+      const renderProperty = mapChildrenToRender(value.children);
+      const newObject = t.objectExpression([
+        ...(renderProperty
+          ? [t.objectProperty(t.identifier('render'), mapChildrenToRender(value.children))]
+          : []),
+        ...value.attributes.flatMap((attribute) => {
+          if (attribute.type === 'mdxJsxAttribute') {
+            if (typeof attribute.value === 'string') {
+              return [
+                t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value)),
+              ];
+            }
+            return [
+              t.objectProperty(
+                t.identifier(attribute.name),
+                babelParseExpression(attribute.value.value)
+              ),
+            ];
+          }
+          return [];
+        }),
+      ]);
+
+      let newExportName = key;
+      while (variableNameExists(newExportName)) {
+        newExportName += '_';
+      }
+
+      return [
+        t.exportNamedDeclaration(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(t.identifier(newExportName), newObject),
+          ])
+        ),
+      ];
+    })
+  );
+
+  file.path.node.body = [...file.path.node.body, ...newStatements];
+
+  const newMdx = mdxProcessor.stringify(root);
+  let output = recast.print(file.path.node).code;
+
+  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  };
+
+  output = prettier.format(output, { ...prettierConfig, filepath: `file.jsx` });
+
+  return [newMdx, output];
+}
+
+function getEsmAst(root: Root) {
+  const esm: string[] = [];
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    esm.push(node.value);
+  });
+  const esmSource = `${esm.join('\n\n')}`;
+
+  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+  const file: BabelFile = new babel.File(
+    { filename: 'info.path' },
+    { code: esmSource, ast: babelParse(esmSource) }
+  );
+  return file;
+}
+
+function addStoriesImport(root: Root, baseName: string, storyNamespaceName: string): void {
+  let found = false;
+
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    if (!found) {
+      node.value += `\nimport * as ${storyNamespaceName} from './${baseName}.stories';`;
+      found = true;
+    }
+  });
+}
+
+export function nameToValidExport(name: string) {
+  const [first, ...rest] = Array.from(camelCase(name));
+
+  return `${first.match(/[a-zA-Z_$]/) ? first.toUpperCase() : `$${first}`}${rest.join('')}`;
+}

code/lib/csf-tools/src/babelParse.ts

@@ -1,22 +1,29 @@
 import * as parser from '@babel/parser';
 import * as recast from 'recast';
+import type { ParserOptions } from '@babel/parser';
+
+export const parserOptions: ParserOptions = {
+  sourceType: 'module',
+  // FIXME: we should get this from the project config somehow?
+  plugins: [
+    'jsx',
+    'typescript',
+    ['decorators', { decoratorsBeforeExport: true }],
+    'classProperties',
+  ],
+  tokens: true,
+};
 
 export const babelParse = (code: string) => {
   return recast.parse(code, {
     parser: {
       parse(source: string) {
-        return parser.parse(source, {
-          sourceType: 'module',
-          // FIXME: we should get this from the project config somehow?
-          plugins: [
-            'jsx',
-            'typescript',
-            ['decorators', { decoratorsBeforeExport: true }],
-            'classProperties',
-          ],
-          tokens: true,
-        });
+        return parser.parse(source, parserOptions);
       },
     },
   });
 };
+
+export const babelParseExpression = (code: string) => {
+  return parser.parseExpression(code, parserOptions);
+};

code/lib/csf-tools/src/index.ts

@@ -2,3 +2,4 @@ export * from './CsfFile';
 export * from './ConfigFile';
 export * from './getStorySortParameter';
 export * from './enrichCsf';
+export * from './babelParse';