fix: use Storybook viewport globals

packages/shared/src/write-archive/index.test.ts

@@ -62,6 +62,7 @@ describe('writeTestResult', () => {
         stories: [
           {
             name: 'home',
+            globals: { viewport: 'w800h800' },
             parameters: {
               chromatic: {
                 diffThreshold: 5,
@@ -71,8 +72,12 @@ describe('writeTestResult', () => {
               server: { id: 'file-test-story-home' },
               viewport: {
                 defaultViewport: 'w800h800',
-                viewports: {
-                  w800h800: { name: 'w800h800', styles: { height: '800px', width: '800px' } },
+                options: {
+                  w800h800: {
+                    name: 'w800h800',
+                    type: 'tablet',
+                    styles: { height: '800px', width: '800px' },
+                  },
                 },
               },
             },

packages/shared/src/write-archive/stories-files.test.ts

@@ -57,6 +57,7 @@ describe('createStories', () => {
       stories: [
         {
           name: 'snapshot 1',
+          globals: { viewport: 'w100h200' },
           parameters: {
             server: { id: 'some-test-title-snapshot-1' },
             chromatic: {
@@ -70,9 +71,10 @@ describe('createStories', () => {
             },
             viewport: {
               defaultViewport: 'w100h200',
-              viewports: {
+              options: {
                 w100h200: {
                   name: 'w100h200',
+                  type: 'mobile',
                   styles: {
                     height: '200px',
                     width: '100px',
@@ -84,6 +86,7 @@ describe('createStories', () => {
         },
         {
           name: 'another snapshot',
+          globals: { viewport: 'w300h400' },
           parameters: {
             server: { id: 'some-test-title-another-snapshot' },
             chromatic: {
@@ -97,9 +100,10 @@ describe('createStories', () => {
             },
             viewport: {
               defaultViewport: 'w300h400',
-              viewports: {
+              options: {
                 w300h400: {
                   name: 'w300h400',
+                  type: 'mobile',
                   styles: {
                     height: '400px',
                     width: '300px',
@@ -131,20 +135,23 @@ describe('buildStoryViewportsConfig', () => {
     expect(viewportsConfig).toEqual({
       w100h1000: {
         name: 'w100h1000',
+        type: 'mobile',
         styles: {
           width: '100px',
           height: '1000px',
         },
       },
       w1200h100: {
         name: 'w1200h100',
+        type: 'desktop',
         styles: {
           width: '1200px',
           height: '100px',
         },
       },
       w500h500: {
         name: 'w500h500',
+        type: 'mobile',
         styles: {
           width: '500px',
           height: '500px',

packages/shared/src/write-archive/stories-files.ts

@@ -24,14 +24,18 @@
     title,
     stories: Object.entries(domSnapshots).map(([name, { viewport }]) => ({
       name,
+      // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
+      // selects the active one. See https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story
+      // `defaultViewport` is not read by SB 10's types but our archive preview uses it as a fetch fallback.
+      globals: { viewport: viewportToString(viewport) },
       parameters: {
         server: { id: snapshotId(title, name) },
         chromatic: {
           ...chromaticStorybookParams,
           modes: buildStoryModesConfig([viewport]),
         },
         viewport: {
-          viewports: buildStoryViewportsConfig([viewport]),
+          options: buildStoryViewportsConfig([viewport]),
           defaultViewport: viewportToString(findDefaultViewport([viewport])),
         },
       },
@@ -42,7 +46,7 @@
 // Converts the given list of viewports into the modes
 // config object needed for the Storybook parameters.
 export function buildStoryModesConfig(viewports: Viewport[]) {
   return viewports.reduce((modes: any, viewport: Viewport) => {
     const viewportName = viewportToString(viewport);
 
     modes[viewportName] = { viewport: viewportName };
@@ -50,14 +54,14 @@
   }, {});
 }
 
-// Converts the given list of viewports into the viewports
-// config object needed for the Storybook parameters.
+// Converts the given list of viewports into Storybook 10 `parameters.viewport.options`.
 export function buildStoryViewportsConfig(viewports: Viewport[]) {
   return viewports.reduce((viewportsConfig: any, viewport: Viewport) => {
     const viewportName = viewportToString(viewport);
 
     viewportsConfig[viewportName] = {
       name: viewportName,
+      type: viewportAddonType(viewport),
       styles: {
         width: `${viewport.width}px`,
         height: `${viewport.height}px`,
@@ -67,6 +71,16 @@
   }, {});
 }
 
+function viewportAddonType(viewport: Viewport): 'mobile' | 'tablet' | 'desktop' | 'other' {
+  if (viewport.width < 600) {
+    return 'mobile';
+  }
+  if (viewport.width < 1024) {
+    return 'tablet';
+  }
+  return 'desktop';
+}
+
 // Finds a viewport to use as the default.
 export function findDefaultViewport(viewports: Viewport[]) {
   // It's hard to know which to use as the default,