@storybook/codemod 7.0.0-beta.8 → 7.0.0-rc.0

package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot

@@ -2,27 +2,23 @@
 
 exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
 "/* eslint-disable */
-import React from 'react'
-import Button from './Button'
+import React from 'react';
+import Button from './Button';
 
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 import { withInfo } from \\"@storybook/addon-info\\";
 
-storiesOf(
-  'Button'
-).add('simple usage', withInfo(
+storiesOf('Button').add('simple usage', withInfo(
   'This is the basic usage with the button with providing a label to show the text.'
 )(() => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
-    <p>
-      Click the \\"?\\" mark at top-right to view the info.
-    </p>
+    <p>Click the \\"?\\" mark at top-right to view the info.</p>
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (inline info)', withInfo({
   text: \`
@@ -30,7 +26,7 @@ storiesOf('Button').add('simple usage (inline info)', withInfo({
     \`,
 
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (disable source)', withInfo({
   text: \`
@@ -39,7 +35,7 @@ storiesOf('Button').add('simple usage (disable source)', withInfo({
 
   source: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (no header)', withInfo({
   text: \`
@@ -48,7 +44,7 @@ storiesOf('Button').add('simple usage (no header)', withInfo({
 
   header: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (no prop tables)', withInfo({
   text: \`
@@ -57,7 +53,7 @@ storiesOf('Button').add('simple usage (no prop tables)', withInfo({
 
   propTables: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (custom propTables)', withInfo({
   text: \`
@@ -82,20 +78,17 @@ storiesOf('Button').add('simple usage (custom propTables)', withInfo({
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
   <h2>This is a JSX info section</h2>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-    Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-    nulla.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+    commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+    libero nulla.
   </p>
   <p>
-    <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
-      This is a link
-    </a>
+    <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">This is a link</a>
   </p>
   <p>
     <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
@@ -104,25 +97,20 @@ storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
-    <p>
-      Click the \\"?\\" mark at top-right to view the info.
-    </p>
+    <p>Click the \\"?\\" mark at top-right to view the info.</p>
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
   text: <div>
     <h2>This is a JSX info section</h2>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-      nulla.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
     </p>
     <p>
-      <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
-        This is a link
-      </a>
+      <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">This is a link</a>
     </p>
     <p>
       <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
@@ -130,7 +118,7 @@ storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
   </div>,
 
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
   text: \`
@@ -139,7 +127,7 @@ storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
 
   inline: true,
   maxPropsIntoLine: 1
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
   text: \`
@@ -150,7 +138,7 @@ storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
   maxPropObjectKeys: 5
 })(
   () => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
-))
+));
 
 storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
   text: \`
@@ -161,7 +149,7 @@ storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
   maxPropArrayLength: 8
 })(
   () => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
-))
+));
 
 storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
   text: \`
@@ -170,7 +158,7 @@ storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
 
   inline: true,
   maxPropStringLength: 5
-})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />))
+})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />));
 
 storiesOf('Button').add('with custom styles', withInfo({
   text: \`
@@ -180,19 +168,17 @@ storiesOf('Button').add('with custom styles', withInfo({
 
   inline: true,
 
-  styles: stylesheet => {
+  styles: (stylesheet) => {
     stylesheet.infoPage = {
-      backgroundColor: '#ccc'
-    }
-    return stylesheet
+      backgroundColor: '#ccc',
+    };
+    return stylesheet;
   }
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('shared/ProgressBar', module)
   .addDecorator(withKnobs)
   .add('default style', withInfo('default style')(() => (
-    <ProgressBar progress={number('progress', 25)}
-      delay={number('delay', 500)}
-    />
+    <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
   )));"
 `;

package/src/transforms/__tests__/csf-2-to-3.test.ts

@@ -1,5 +1,7 @@
 import { describe, it, expect } from '@jest/globals';
 import { dedent } from 'ts-dedent';
+import type { API } from 'jscodeshift';
+import ansiRegex from 'ansi-regex';
 import _transform from '../csf-2-to-3';
 
 expect.addSnapshotSerializer({
@@ -7,8 +9,10 @@ expect.addSnapshotSerializer({
   test: () => true,
 });
 
-const jsTransform = (source: string) => _transform({ source }, null, {}).trim();
-const tsTransform = (source: string) => _transform({ source }, null, { parser: 'tsx' }).trim();
+const jsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.js' }, {} as API, {}).trim();
+const tsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.ts' }, {} as API, { parser: 'tsx' }).trim();
 
 describe('csf-2-to-3', () => {
   describe('javascript', () => {
@@ -20,9 +24,7 @@ describe('csf-2-to-3', () => {
           export const B = (args) => <Button {...args} />;
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-        };
+        export default { title: 'Cat' };
         export const A = () => <Cat />;
         export const B = {
           render: (args) => <Button {...args} />,
@@ -34,21 +36,19 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export default { title: 'Cat' };
+
           export const A = () => <Cat />;
           A.storyName = 'foo';
           A.parameters = { bar: 2 };
           A.play = () => {};
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-        };
+        export default { title: 'Cat' };
+
         export const A = {
           render: () => <Cat />,
           name: 'foo',
-          parameters: {
-            bar: 2,
-          },
+          parameters: { bar: 2 },
           play: () => {},
         };
       `);
@@ -58,19 +58,22 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export default { title: 'components/Fruit', includeStories: ['A'] };
+
           export const A = (args) => <Apple {...args} />;
+
           export const B = (args) => <Banana {...args} />;
+
           const C = (args) => <Cherry {...args} />;
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'components/Fruit',
-          includeStories: ['A'],
-        };
+        export default { title: 'components/Fruit', includeStories: ['A'] };
+
         export const A = {
           render: (args) => <Apple {...args} />,
         };
+
         export const B = (args) => <Banana {...args} />;
+
         const C = (args) => <Cherry {...args} />;
       `);
     });
@@ -79,10 +82,12 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export const A = () => <Apple />;
+
           export const B = (args) => <Banana {...args} />;
         `)
       ).toMatchInlineSnapshot(`
         export const A = () => <Apple />;
+
         export const B = (args) => <Banana {...args} />;
       `);
     });
@@ -95,10 +100,7 @@ describe('csf-2-to-3', () => {
           export const B = (args) => <Banana {...args} />;
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-          component: Cat,
-        };
+        export default { title: 'Cat', component: Cat };
         export const A = {};
         export const B = {
           render: (args) => <Banana {...args} />,
@@ -110,15 +112,14 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export default { title: 'Cat', component: Cat };
+
           export const A = {
             render: (args) => <Cat {...args} />
           };
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-          component: Cat,
-        };
+        export default { title: 'Cat', component: Cat };
+
         export const A = {
           render: (args) => <Cat {...args} />,
         };
@@ -134,14 +135,11 @@ describe('csf-2-to-3', () => {
           A.args = { isPrimary: false };
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-        };
+        export default { title: 'Cat' };
+
         export const A = {
           render: (args) => <Cat {...args} />,
-          args: {
-            isPrimary: false,
-          },
+          args: { isPrimary: false },
         };
       `);
     });
@@ -150,28 +148,27 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export default { title: 'Cat', component: Cat };
+
           const Template = (args) => <Cat {...args} />;
+
           export const A = Template.bind({});
           A.args = { isPrimary: false };
+
           const Template2 = (args) => <Banana {...args} />;
+
           export const B = Template2.bind({});
           B.args = { isPrimary: true };
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-          component: Cat,
-        };
+        export default { title: 'Cat', component: Cat };
+
         export const A = {
-          args: {
-            isPrimary: false,
-          },
+          args: { isPrimary: false },
         };
+
         export const B = {
           render: (args) => <Banana {...args} />,
-          args: {
-            isPrimary: true,
-          },
+          args: { isPrimary: true },
         };
       `);
     });
@@ -180,23 +177,21 @@ describe('csf-2-to-3', () => {
       expect(
         jsTransform(dedent`
           export default { title: 'Cat', component: Cat };
+
           export const A = (args) => <Cat {...args} />;
           export const B = () => <Cat name="frisky" />;
           export const C = () => <Cat name="fluffy" />;
           C.parameters = { foo: 2 };
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-          component: Cat,
-        };
+        export default { title: 'Cat', component: Cat };
+
         export const A = {};
         export const B = () => <Cat name="frisky" />;
+
         export const C = {
           render: () => <Cat name="fluffy" />,
-          parameters: {
-            foo: 2,
-          },
+          parameters: { foo: 2 },
         };
       `);
     });
@@ -211,39 +206,157 @@ describe('csf-2-to-3', () => {
           };
         `)
       ).toMatchInlineSnapshot(`
-        export default {
-          title: 'Cat',
-        };
+        export default { title: 'Cat' };
+
         export const A = {
           render: (args) => <Cat {...args} />,
-          parameters: {
-            foo: 2,
-          },
+          parameters: { foo: 2 },
         };
       `);
     });
   });
 
   describe('typescript', () => {
-    it('should replace function exports with objects', () => {
+    it('should error with namespace imports', () => {
+      expect.addSnapshotSerializer({
+        serialize: (value) => value.replace(ansiRegex(), ''),
+        test: () => true,
+      });
+      expect(() =>
+        tsTransform(dedent`
+          import * as SB from '@storybook/react';
+          import { CatProps } from './Cat';
+
+          const meta = { title: 'Cat', component: Cat } as Meta<CatProps>
+          export default meta;
+
+          export const A: SB.StoryFn<CatProps> = () => <Cat />;
+        `)
+      ).toThrowErrorMatchingInlineSnapshot(`
+        This codemod does not support namespace imports for a @storybook/react package.
+        Replace the namespace import with named imports and try again.
+      `);
+    });
+    it('should keep local names', () => {
+      expect(
+        tsTransform(dedent`
+          import { Meta, StoryObj as CSF3, StoryFn as CSF2 } from '@storybook/react';
+          import { CatProps } from './Cat';
+
+          const meta = { title: 'Cat', component: Cat } satisfies Meta<CatProps>
+          export default meta;
+
+          export const A: CSF2<CatProps> = () => <Cat />;
+          
+          export const B: CSF3<CatProps> = {
+            args: { name: "already csf3" }
+          };
+
+          export const C: CSF2<CatProps> = (args) => <Cat {...args} />;
+          C.args = { 
+            name: "Fluffy"
+          };
+        `)
+      ).toMatchInlineSnapshot(`
+        import { Meta, StoryObj as CSF3, StoryFn as CSF2 } from '@storybook/react';
+        import { CatProps } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies Meta<CatProps>;
+        export default meta;
+
+        export const A: CSF2<CatProps> = () => <Cat />;
+
+        export const B: CSF3<CatProps> = {
+          args: { name: 'already csf3' },
+        };
+
+        export const C: CSF3<CatProps> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+      `);
+    });
+
+    it('should replace function exports with objects and update type', () => {
       expect(
         tsTransform(dedent`
-          export default { title: 'Cat' } as Meta<CatProps>;
+          import { Story, StoryFn, ComponentStory, ComponentStoryObj } from '@storybook/react';
+
+          // some extra whitespace to test
+
+          export default { 
+            title: 'Cat', 
+            component: Cat,
+          } as Meta<CatProps>;
+
           export const A: Story<CatProps> = (args) => <Cat {...args} />;
+          A.args = { name: "Fluffy" };
+
           export const B: any = (args) => <Button {...args} />;
+
           export const C: Story<CatProps> = () => <Cat />;
+
+          export const D: StoryFn<CatProps> = (args) => <Cat {...args} />;
+          D.args = { 
+            name: "Fluffy"
+          };
+          
+          export const E: ComponentStory<Cat> = (args) => <Cat {...args} />;
+          E.args = { name: "Fluffy" };
+          
+          export const F: Story = (args) => <Cat {...args} />;
+          F.args = { 
+            name: "Fluffy"
+          };
+          
+          export const G: ComponentStoryObj<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
         `)
       ).toMatchInlineSnapshot(`
+        import { StoryObj, StoryFn } from '@storybook/react';
+
+        // some extra whitespace to test
+
         export default {
           title: 'Cat',
+          component: Cat,
         } as Meta<CatProps>;
-        export const A: Story<CatProps> = {
-          render: (args) => <Cat {...args} />,
+
+        export const A: StoryObj<CatProps> = {
+          args: { name: 'Fluffy' },
         };
+
         export const B: any = {
           render: (args) => <Button {...args} />,
         };
-        export const C: Story<CatProps> = () => <Cat />;
+
+        export const C: StoryFn<CatProps> = () => <Cat />;
+
+        export const D: StoryObj<CatProps> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+
+        export const E: StoryObj<Cat> = {
+          args: { name: 'Fluffy' },
+        };
+
+        export const F: StoryObj = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+
+        export const G: StoryObj<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
       `);
     });
   });