@storybook/codemod 7.0.0-beta.51 → 7.0.0-beta.53

package/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,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.0-beta.51",
+  "version": "7.0.0-beta.53",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -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",
@@ -50,9 +49,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/types": "^7.20.7",
     "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-beta.51",
-    "@storybook/node-logger": "7.0.0-beta.51",
-    "@storybook/types": "7.0.0-beta.51",
+    "@storybook/csf-tools": "7.0.0-beta.53",
+    "@storybook/node-logger": "7.0.0-beta.53",
+    "@storybook/types": "7.0.0-beta.53",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
     "jscodeshift": "^0.14.0",
@@ -66,25 +65,37 @@
     "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": "92ae17be35e8e19be160d4d8acb9b56e40064be2"
+  "gitHead": "b1da06450dc3e4124a935785a2041b18204533ae"
 }

package/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';
@@ -55,16 +56,22 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
 
   const files = await globby([glob, '!**/node_modules', '!**/dist']);
   logger.log(`=> Applying ${codemod}: ${files.length} files`);
-  if (!dryRun) {
+  if (files.length === 0) {
+    logger.log(`=> No matching files for glob: ${glob}`);
+    return;
+  }
+
+  if (!dryRun && files.length > 0) {
     const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
-    spawnSync(
-      'npx',
+    const result = spawnSync(
+      'node',
       [
-        'jscodeshift',
+        require.resolve('jscodeshift/bin/jscodeshift'),
         // this makes sure codeshift doesn't transform our own source code with babel
         // 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,
@@ -75,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) {

package/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😅`);
+});