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

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,162 @@ 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.
+        > 1 | import * as SB from '@storybook/react';
+            | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+          2 | import { CatProps } from './Cat';
+          3 |
+          4 | const meta = { title: 'Cat', component: Cat } as Meta<CatProps>
+      `);
+    });
+    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',
+          },
+        };
       `);
     });
   });

package/src/transforms/__tests__/upgrade-deprecated-types.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it } from '@jest/globals';
+import { dedent } from 'ts-dedent';
+import type { API } from 'jscodeshift';
+import ansiRegex from 'ansi-regex';
+import _transform from '../upgrade-deprecated-types';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: () => true,
+});
+
+const tsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.ts' }, {} as API, { parser: 'tsx' }).trim();
+
+describe('upgrade-deprecated-types', () => {
+  describe('typescript', () => {
+    it('upgrade regular imports', () => {
+      expect(
+        tsTransform(dedent`
+          import { Story, ComponentMeta, Meta, ComponentStory, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
+          import { Cat, CatProps } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta<typeof Cat>
+          const meta2: Meta<CatProps> = { title: 'Cat', component: Cat };
+          export default meta;
+          
+          export const A: ComponentStory<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: ComponentStoryFn<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: ComponentStoryObj<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: Story<CatProps> = (args) => <Cat {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        import { StoryFn, Meta, StoryObj } from '@storybook/react';
+        import { Cat, CatProps } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>;
+        const meta2: Meta<CatProps> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: StoryObj<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: StoryFn<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+
+    it('upgrade imports with local names', () => {
+      expect(
+        tsTransform(dedent`
+          import { Story as Story_, ComponentMeta as ComponentMeta_, ComponentStory as Story__, ComponentStoryObj as ComponentStoryObj_, ComponentStoryFn as StoryFn_ } from '@storybook/react';
+          import { Cat } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta_<typeof Cat>
+          const meta2: ComponentMeta_<typeof Cat> = { title: 'Cat', component: Cat };
+          export default meta;
+          
+          export const A: Story__<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: StoryFn_<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: ComponentStoryObj_<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: Story_<CatProps> = (args) => <Cat {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        import {
+          StoryFn as Story_,
+          Meta as ComponentMeta_,
+          StoryObj as ComponentStoryObj_,
+        } from '@storybook/react';
+        import { Cat } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta_<typeof Cat>;
+        const meta2: ComponentMeta_<typeof Cat> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: Story__<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: StoryFn_<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: ComponentStoryObj_<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: Story_<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+
+    it('upgrade imports with conflicting local names', () => {
+      expect.addSnapshotSerializer({
+        serialize: (value) => value.replace(ansiRegex(), ''),
+        test: () => true,
+      });
+
+      expect(() =>
+        tsTransform(dedent`
+          import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
+          import { Cat } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>
+          export default meta;
+          
+          export const A: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+         
+        `)
+      ).toThrowErrorMatchingInlineSnapshot(`
+        This codemod does not support local imports that are called the same as a storybook import.
+        Rename this local import and try again.
+        > 1 |  import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
+            |           ^^^^^^^^^^^^^^^^^^^^^
+          2 |  import { Cat } from './Cat';
+          3 |    
+          4 |  const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>
+      `);
+    });
+
+    it('upgrade namespaces', () => {
+      expect(
+        tsTransform(dedent`
+          import * as SB from '@storybook/react';
+          import { Cat, CatProps } from './Cat';
+  
+          const meta = { title: 'Cat', component: Cat } satisfies SB.ComponentMeta<typeof Cat>;
+          const meta2: SB.ComponentMeta<typeof Cat> = { title: 'Cat', component: Cat };
+          export default meta;
+  
+          export const A: SB.ComponentStory<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: SB.ComponentStoryFn<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: SB.ComponentStoryObj<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: SB.Story<CatProps> = (args) => <Cat {...args} />;
+          
+        `)
+      ).toMatchInlineSnapshot(`
+        import * as SB from '@storybook/react';
+        import { Cat, CatProps } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies SB.Meta<typeof Cat>;
+        const meta2: SB.Meta<typeof Cat> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: SB.StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: SB.StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: SB.StoryObj<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: SB.StoryFn<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+  });
+});