CSF: Improve error handling in csf factories codemod

code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

@@ -1,12 +1,19 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { formatFileContent } from 'storybook/internal/common';
+import { logger } from 'storybook/internal/node-logger';
 
 import path from 'path';
 import { dedent } from 'ts-dedent';
 
 import { storyToCsfFactory } from './story-to-csf-factory';
 
+vi.mock('storybook/internal/node-logger', () => ({
+  logger: {
+    warn: vi.fn(),
+  },
+}));
+
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
   test: () => true,
@@ -261,7 +268,7 @@
     });
 
     it('does not migrate reused properties from disallowed list', async () => {
       await expect(
         transform(dedent`
             export default { title: 'Component' };
             export const A = {};
@@ -310,7 +317,7 @@
         export { C, D as E };
         `);
 
       expect(transformed).toMatchInlineSnapshot(`
         import preview from '#.storybook/preview';
 
         import { A as Component } from './Button';
@@ -629,13 +636,15 @@
         const data = {};
         export const A: StoryObj = () => {};
         export function B() { };
+        export const C = () => <Component />;
+        export const D = C;
         // not supported yet (story redeclared)
-        const C = { ...A, args: data, } satisfies CSF3<ComponentProps>;
-        const D = { args: data };
-        export { C, D as E };
+        const E = { ...A, args: data, } satisfies CSF3<ComponentProps>;
+        const F = { args: data };
+        export { E, F as G };
         `);
 
       expect(transformed).toMatchInlineSnapshot(`
         import preview from '#.storybook/preview';
 
         import { A as Component } from './Button';
@@ -654,16 +663,39 @@
         const data = {};
         export const A = meta.story(() => {});
         export const B = meta.story(() => {});
+        export const C = meta.story(() => <Component />);
+        export const D = C.input;
         // not supported yet (story redeclared)
-        const C = { ...A.input, args: data } satisfies CSF3<ComponentProps>;
-        const D = { args: data };
-        export { C, D as E };
+        const E = { ...A.input, args: data } satisfies CSF3<ComponentProps>;
+        const F = { args: data };
+        export { E, F as G };
       `);
 
       expect(transformed).toContain('A = meta.story');
       expect(transformed).toContain('B = meta.story');
       // @TODO: when we support these, uncomment this line
       // expect(transformed).toContain('C = meta.story');
     });
+    it('should not complete transformation if no stories are not transformed', async () => {
+      const source = dedent`
+        export default {
+          title: 'Component',
+        };
+        export const A = {};
+        // not supported yet (story redeclared)
+        const B = { args: data };
+        const C = { args: data };
+        export { B, C as D };
+      `;
+      const transformed = await transform(source);
+      expect(transformed).toEqual(source);
+
+      expect(transformed).not.toContain('preview.meta');
+      expect(transformed).not.toContain('meta.story');
+
+      expect(logger.warn).toHaveBeenCalledWith(
+        'Skipping codemod for Component.stories.tsx:\nDetected stories ["A", "B", "D"] were not fully transformed because some use an unsupported format.'
+      );
+    });
   });
 });

code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts

@@ -35,6 +35,11 @@ export async function storyToCsfFactory(
     return info.source;
   }
 
+  // Track detected stories and which ones we actually transform
+  const detectedStories = csf.stories;
+  const detectedStoryNames = detectedStories.map((story) => story.name);
+  const transformedStoryExports = new Set<string>();
+
   const metaVariableName = csf._metaVariableName ?? 'meta';
 
   /**
@@ -95,7 +100,7 @@ export async function storyToCsfFactory(
   // @TODO: Support unconventional formats:
   // `export function Story() { };` and `export { Story };
   // These are not part of csf._storyExports but rather csf._storyStatements and are tricky to support.
-  Object.entries(csf._storyExports).forEach(([, decl]) => {
+  Object.entries(csf._storyExports).forEach(([exportName, decl]) => {
     const id = decl.id;
     const declarator = decl as t.VariableDeclarator;
     let init = t.isVariableDeclarator(declarator) ? declarator.init : undefined;
@@ -118,12 +123,18 @@ export async function storyToCsfFactory(
           t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
           init.properties.length === 0 ? [] : [init]
         );
+        if (t.isIdentifier(id)) {
+          transformedStoryExports.add(exportName);
+        }
       } else if (t.isArrowFunctionExpression(init)) {
         // Transform CSF1 to meta.story({ render: <originalFn> })
         declarator.init = t.callExpression(
           t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
           [init]
         );
+        if (t.isIdentifier(id)) {
+          transformedStoryExports.add(exportName);
+        }
       }
     }
   });
@@ -152,6 +163,7 @@ export async function storyToCsfFactory(
       )._storyPaths?.[exportName];
       if (pathForExport && pathForExport.replaceWith) {
         pathForExport.replaceWith(replacement);
+        transformedStoryExports.add(exportName);
       }
     }
   });
@@ -227,6 +239,16 @@ export async function storyToCsfFactory(
     },
   });
 
+  // If some stories were detected but not all could be transformed, we skip the codemod to avoid mixed csf syntax and therefore a broken indexer.
+  if (detectedStoryNames.length > 0 && transformedStoryExports.size !== detectedStoryNames.length) {
+    logger.warn(
+      `Skipping codemod for ${info.path}:\nDetected stories [${detectedStoryNames
+        .map((name) => `"${name}"`)
+        .join(', ')}] were not fully transformed because some use an unsupported format.`
+    );
+    return info.source;
+  }
+
   // modify meta
   if (csf._metaPath) {
     let declaration = csf._metaPath.node.declaration;