Automigration: Enhance viewport story transformation to support member expression references for defaultViewport

Author: valentinpalkovic

code/lib/cli-storybook/src/automigrate/fixes/addon-globals-api.test.ts

@@ -854,5 +854,38 @@ describe('addon-globals-api', () => {
       expect(transformFn).toBeDefined();
       expect(transformFn!('story.js', storyContent)).toBe(expectedContent);
     });
+
+    it('should transform member expression references in viewport stories', async () => {
+      const { transformFn } = await runMigrationAndGetTransformFn(defaultPreview);
+      const storyContent = dedent`
+          import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+          import Button from './Button';
+          export default { component: Button };
+          export const Mobile = {
+            parameters: {
+              viewport: {
+                defaultViewport: MINIMAL_VIEWPORTS.mobile2
+              },
+            },
+          };
+        `;
+      const expectedContent = dedent`
+          import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+          import Button from './Button';
+          export default {
+            component: Button
+          };
+          export const Mobile = {
+            globals: {
+              viewport: {
+                value: MINIMAL_VIEWPORTS.mobile2,
+                isRotated: false
+              }
+            }
+          };
+        `;
+      expect(transformFn).toBeDefined();
+      expect(transformFn!('story.js', storyContent)).toBe(expectedContent);
+    });
   });
 });

code/lib/cli-storybook/src/automigrate/fixes/addon-globals-api.ts

@@ -312,7 +312,19 @@ function transformStoryFile(
         const defaultViewport = getObjectProperty(viewportParams, 'defaultViewport');
         const defaultOrientation = getObjectProperty(viewportParams, 'defaultOrientation');
         const disableViewport = getObjectProperty(viewportParams, 'disable');
-        if (defaultViewport && t.isStringLiteral(defaultViewport)) {
+
+        // Handle both string literals and member expressions for defaultViewport
+        let viewportValue: t.StringLiteral | t.MemberExpression | null = null;
+        if (defaultViewport) {
+          if (t.isStringLiteral(defaultViewport)) {
+            viewportValue = defaultViewport;
+          } else if (t.isMemberExpression(defaultViewport)) {
+            // Preserve the member expression as-is
+            viewportValue = defaultViewport;
+          }
+        }
+
+        if (viewportValue) {
           // Create globals.viewport
           if (!newGlobals) {
             newGlobals = t.objectExpression([]);
@@ -328,7 +340,7 @@ function transformStoryFile(
             t.objectProperty(
               t.identifier('viewport'),
               t.objectExpression([
-                t.objectProperty(t.identifier('value'), t.stringLiteral(defaultViewport.value)),
+                t.objectProperty(t.identifier('value'), viewportValue),
                 t.objectProperty(t.identifier('isRotated'), t.booleanLiteral(isRotated)),
               ])
             )