CLI: Enhance csf factory codemod to migrate from csf2

code/lib/cli-storybook/src/codemod/csf-factories.ts

@@ -1,4 +1,4 @@
-import { syncStorybookAddons } from 'storybook/internal/common';
+import { type JsPackageManager, syncStorybookAddons } from 'storybook/internal/common';
 
 import prompts from 'prompts';
 
@@ -10,7 +10,11 @@ import { storyToCsfFactory } from './helpers/story-to-csf-factory';
 
 export const logger = console;
 
-async function runStoriesCodemod(dryRun: boolean | undefined) {
+async function runStoriesCodemod(options: {
+  dryRun: boolean | undefined;
+  packageManager: JsPackageManager;
+}) {
+  const { dryRun, packageManager } = options;
   try {
     let globString = 'src/stories/*.stories.*';
     if (!process.env.IN_STORYBOOK_SANDBOX) {
@@ -24,12 +28,23 @@ async function runStoriesCodemod(dryRun: boolean | undefined) {
         })
       ).glob;
     }
+
+    logger.log('Applying codemod on your stories, this might take some time...');
+
+    // TODO: Move the csf-2-to-3 codemod into automigrations
+    await packageManager.executeCommand({
+      command: `${packageManager.getRemoteRunCommand()} storybook migrate csf-2-to-3 --glob=${globString}`,
+      args: [],
+      stdio: 'ignore',
+      ignoreError: true,
+    });
+
     await runCodemod(globString, storyToCsfFactory, { dryRun });
   } catch (err: any) {
     console.log('err message', err.message);
     if (err.message === 'No files matched') {
       console.log('going to run again');
-      await runStoriesCodemod(dryRun);
+      await runStoriesCodemod(options);
     } else {
       throw err;
     }
@@ -55,8 +70,7 @@ export const csfFactories: CommandFix = {
     };
     await packageManager.writePackageJson(packageJson);
 
-    logger.log('Applying codemod on your stories...');
-    await runStoriesCodemod(dryRun);
+    await runStoriesCodemod({ dryRun, packageManager });
 
     logger.log('Applying codemod on your main config...');
     const frameworkPackage =

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

@@ -77,17 +77,17 @@ export async function storyToCsfFactory(info: FileInfo) {
     let init = t.isVariableDeclarator(declarator) ? declarator.init : undefined;
 
     if (t.isIdentifier(id) && init) {
+      // Remove type annotations e.g. A<B> in `const Story: A<B> = {};`
+      if (id.typeAnnotation) {
+        id.typeAnnotation = null;
+      }
+
+      // Remove type annotations e.g. A<B> in `const Story = {} satisfies A<B>;`
       if (t.isTSSatisfiesExpression(init) || t.isTSAsExpression(init)) {
         init = init.expression;
       }
 
       if (t.isObjectExpression(init)) {
-        const typeAnnotation = id.typeAnnotation;
-        // Remove type annotation as it's now inferred
-        if (typeAnnotation) {
-          id.typeAnnotation = null;
-        }
-
         // Wrap the object in `meta.story()`
         declarator.init = t.callExpression(
           t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
@@ -161,7 +161,7 @@ export async function storyToCsfFactory(info: FileInfo) {
           // This is a tough one to support, we just skip for now.
           // Relates to `Stories.Story.args` where Stories is coming from another file. We can't know whether it should be transformed or not.
           if (err.message.includes(`instead got "MemberExpression"`)) {
-            console.log({ path });
+            return;
           } else {
             throw err;
           }