Automigration: Implement transformations for backgrounds parameters and enhance viewport handling in story files

Author: valentinpalkovic

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

@@ -635,7 +635,7 @@ describe('addon-globals-api', () => {
           export const MobileOnly = {
             globals: {
               viewport: {
-                value: "mobile",
+                value: 'mobile',
                 isRotated: false
               }
             }
@@ -665,7 +665,7 @@ describe('addon-globals-api', () => {
           export const DarkMobile = {
             globals: {
               viewport: {
-                value: "mobile",
+                value: 'mobile',
                 isRotated: false
               },
               backgrounds: {
@@ -804,7 +804,7 @@ describe('addon-globals-api', () => {
             },
             globals: {
               viewport: {
-                value: "tablet",
+                value: 'tablet',
                 isRotated: false
               },
               backgrounds: {
@@ -845,7 +845,7 @@ describe('addon-globals-api', () => {
             },
             globals: {
               viewport: {
-                value: "iphonex",
+                value: 'iphonex',
                 isRotated: true
               }
             }
@@ -887,5 +887,48 @@ describe('addon-globals-api', () => {
       expect(transformFn).toBeDefined();
       expect(transformFn!('story.js', storyContent)).toBe(expectedContent);
     });
+
+    it('should transform backgrounds values to options and migrate default in story files', async () => {
+      const { transformFn } = await runMigrationAndGetTransformFn(defaultPreview);
+      const storyContent = dedent`
+          import Button from './Button';
+          export default { component: Button };
+          export const Mobile = {
+            parameters: {
+              backgrounds: {
+                default: 'Light',
+                values: [
+                  { name: 'Gray', value: '#CCC' },
+                ],
+              },
+            },
+          };
+        `;
+      const expectedContent = dedent`
+          import Button from './Button';
+          export default {
+            component: Button
+          };
+          export const Mobile = {
+            parameters: {
+              backgrounds: {
+                options: {
+                  gray: {
+                    name: 'Gray',
+                    value: '#CCC'
+                  }
+                }
+              }
+            },
+            globals: {
+              backgrounds: {
+                value: "light"
+              }
+            }
+          };
+        `;
+      expect(transformFn).toBeDefined();
+      expect(transformFn!('story.js', storyContent)).toBe(expectedContent);
+    });
   });
 });

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

@@ -373,6 +373,18 @@ function transformStoryFile(
       if (backgroundsParams) {
         const defaultBackground = getObjectProperty(backgroundsParams, 'default');
         const disableBackground = getObjectProperty(backgroundsParams, 'disable');
+        const valuesBackground = getObjectProperty(backgroundsParams, 'values');
+
+        // Handle values -> options transformation
+        if (valuesBackground && t.isArrayExpression(valuesBackground)) {
+          // Transform values array to options object
+          const optionsObject = transformValuesToOptions(valuesBackground);
+
+          // Remove the old values property
+          removeProperty(backgroundsParams, 'values');
+          addProperty(backgroundsParams, 'options', optionsObject);
+          storyHasChanges = true;
+        }
 
         if (defaultBackground && t.isStringLiteral(defaultBackground)) {
           // Create globals.backgrounds