Merge pull request #21448 from storybookjs/kasper/mdx-csf-imports

Fix mdx-to-csf codemod blocks imports
storybookjs · Mar 7, 2023 · 3a7e11d · 3a7e11d
2 parents cc5dad2 + 97fa0ad
commit 3a7e11d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
@@ -138,6 +138,30 @@ test('convert correct story nodes', () => {
   `);
 });
 
+test('convert addon-docs imports', () => {
+  const input = dedent`
+      import { Meta } from '@storybook/addon-docs';
+      import { Story } from '@storybook/addon-docs/blocks';
+
+      <Meta title="Foobar" />
+      
+      <Story name="Primary">Story</Story>
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta } from '@storybook/blocks';
+    import { Story } from '@storybook/blocks';
+    import * as FoobarStories from './Foobar.stories';
+
+    <Meta of={FoobarStories} />
+
+    <Story of={FoobarStories.Primary} />
+
+  `);
+});
+
 test('convert story nodes with spaces', () => {
   const input = dedent`
       import { Meta, Story } from '@storybook/addon-docs';

diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts
@@ -75,8 +75,8 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
   // 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');
+      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks')
+      .replaceAll('@storybook/addon-docs', '@storybook/blocks');
   });
 
   const file = getEsmAst(root);