Merge branch 'next' into ts-migrate/addon-measure

.circleci/config.yml

@@ -43,7 +43,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.32.3-focal
+      - image: mcr.microsoft.com/playwright:v1.34.3-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>

code/addons/viewport/src/Tool.tsx

@@ -106,9 +106,10 @@ const getStyles = (
   styles: Styles,
   isRotated: boolean
 ): ViewportStyles | undefined => {
-  if (!styles || !prevStyles) {
+  if (styles === null) {
     return undefined;
   }
+
   const result = typeof styles === 'function' ? styles(prevStyles) : styles;
   return isRotated ? flip(result) : result;
 };

code/addons/viewport/src/models/Viewport.ts

@@ -1,4 +1,4 @@
-export type Styles = ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
+export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
 
 export interface Viewport {
   name: string;

code/e2e-tests/addon-viewport.spec.ts

@@ -20,4 +20,24 @@ test.describe('addon-viewport', () => {
     // Check that Button story is still displayed
     await expect(sbPage.previewRoot()).toContainText('Button');
   });
+
+  test('iframe width should be changed when a mobile viewport is selected', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    // Click on viewport button and select small mobile
+    await sbPage.navigateToStory('example/button', 'primary');
+
+    // Measure the original dimensions of previewRoot
+    const originalDimensions = await sbPage.previewRoot().boundingBox();
+    await expect(originalDimensions?.width).toBeDefined();
+
+    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1');
+
+    // Measure the adjusted dimensions of previewRoot after clicking the mobile item.
+    const adjustedDimensions = await sbPage.previewRoot().boundingBox();
+    await expect(adjustedDimensions?.width).toBeDefined();
+
+    // Compare the two widths
+    await expect(adjustedDimensions?.width).not.toBe(originalDimensions?.width);
+  });
 });

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -7,8 +7,7 @@ import type {
   PathnameContext as TPathnameContext,
   SearchParamsContext as TSearchParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context';
-// @ts-expect-error (TODO: valentin needs to fix this)
-import type { FlightRouterState } from 'next/dist/server/app-render';
+import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import type { RouteParams } from './types';
 
 /**
@@ -83,7 +82,7 @@ const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action,
             childNodes: new Map(),
             tree: [pathname, { children: getParallelRoutes([...segments]) }],
             url: pathname,
-            // @ts-expect-error (TODO: valentin needs to fix this)
+            // @ts-expect-error Necessary for earlier versions of Next 13. Remove as soon as Next.js should not be supported anymore.
             headRenderedAboveThisLevel: true,
           }}
         >

code/lib/theming/scripts/fix-theme-type-export.ts

@@ -7,7 +7,7 @@ const run = async () => {
   const target = join(process.cwd(), 'dist', 'index.d.ts');
   const contents = await readFile(target, 'utf8');
 
-  const footer = contents.includes('// devmode')
+  const footer = contents.includes('// dev-mode')
     ? `export { StorybookTheme as Theme } from '../src/index';`
     : dedent`
         interface Theme extends StorybookTheme {}

code/lib/types/src/modules/addons.ts

@@ -162,7 +162,11 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
   (story: () => StoryFnReturnType, context: Addon_StoryContext) => StoryFnReturnType
 >;
 
-export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
+export interface Addon_BaseAnnotations<
+  TArgs,
+  StoryFnReturnType,
+  TRenderer extends Renderer = Renderer
+> {
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
    * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
@@ -192,12 +196,12 @@ export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
    */
-  render?: (args: TArgs, context: Addon_StoryContext) => StoryFnReturnType;
+  render?: (args: TArgs, context: Addon_StoryContext<TRenderer>) => StoryFnReturnType;
 
   /**
    * Function that is executed after the story is rendered.
    */
-  play?: (context: Addon_StoryContext) => Promise<void> | void;
+  play?: (context: Addon_StoryContext<TRenderer>) => Promise<void> | void;
 }
 
 export interface Addon_Annotations<TArgs, StoryFnReturnType>

code/package.json

@@ -80,13 +80,12 @@
     "defaults"
   ],
   "resolutions": {
-    "@playwright/test": "1.32.3",
+    "@playwright/test": "1.34.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "esbuild": "^0.17.0",
     "eslint": "^8.28.0",
-    "playwright": "1.32.3",
     "serialize-javascript": "^3.1.0"
   },
   "dependencies": {
@@ -99,7 +98,7 @@
     "@jest/globals": "^29.3.1",
     "@linear/sdk": "^1.21.0",
     "@nx/workspace": "16.2.1",
-    "@playwright/test": "1.32.3",
+    "@playwright/test": "^1.34.3",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
@@ -246,7 +245,6 @@
     "node-gyp": "^8.4.0",
     "nx": "16.2.1",
     "nx-cloud": "16.0.5",
-    "playwright": "1.32.3",
     "prettier": "2.8.0",
     "process": "^0.11.10",
     "raf": "^3.4.1",

code/yarn.lock

@@ -5013,19 +5013,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.32.3":
-  version: 1.32.3
-  resolution: "@playwright/test@npm:1.32.3"
+"@playwright/test@npm:1.34.3":
+  version: 1.34.3
+  resolution: "@playwright/test@npm:1.34.3"
   dependencies:
     "@types/node": "*"
     fsevents: 2.3.2
-    playwright-core: 1.32.3
+    playwright-core: 1.34.3
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: d09e4135c868b4067f45b8c297d02b0d8ddb8298657c942a06c72f3d9a3236af94586718dc7590693dbb31ea4b8fcceeb8a1e8811072f2add7d952c5c9129df3
+  checksum: b87b3666568378997e6e300c28a5062d099377f66894c2d30855ef0b574a0874f5e4e6e7d25d93f1db1e5e402ccc1a254a1c24ec829a64ec47b4c8071082c9a7
   languageName: node
   linkType: hard
 
@@ -7218,7 +7218,7 @@ __metadata:
     "@jest/globals": ^29.3.1
     "@linear/sdk": ^1.21.0
     "@nx/workspace": 16.2.1
-    "@playwright/test": 1.32.3
+    "@playwright/test": ^1.34.3
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -7365,7 +7365,6 @@ __metadata:
     node-gyp: ^8.4.0
     nx: 16.2.1
     nx-cloud: 16.0.5
-    playwright: 1.32.3
     prettier: 2.8.0
     process: ^0.11.10
     raf: ^3.4.1
@@ -25038,23 +25037,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.32.3":
-  version: 1.32.3
-  resolution: "playwright-core@npm:1.32.3"
+"playwright-core@npm:1.34.3":
+  version: 1.34.3
+  resolution: "playwright-core@npm:1.34.3"
   bin:
-    playwright: cli.js
-  checksum: 8b94feb15084813607abac69ef3d4f78b345bcc89e322706e62c203b79e74096caf499ce4cd4103b1bfc853f17a9ff0573f636dc0ee88f56a5cb6ed18ce55f06
+    playwright-core: cli.js
+  checksum: 2e3ec8394b69bcd55db3a01a0a2cf63ee4b924bd79852c237d3eb045273f056b5784ab2147f60a7bb2db7998b8f7c5ec34d8554dd7648cc77d5affc9d91a85c8
   languageName: node
   linkType: hard
 
-"playwright@npm:1.32.3":
-  version: 1.32.3
-  resolution: "playwright@npm:1.32.3"
+"playwright@npm:^1.24.2":
+  version: 1.34.3
+  resolution: "playwright@npm:1.34.3"
   dependencies:
-    playwright-core: 1.32.3
+    playwright-core: 1.34.3
   bin:
     playwright: cli.js
-  checksum: 26a3a8897d1a41cd5d001859521ee44b3ac21618e638d3b2a58615672b2f325a6cdeb614dabc6b120999d8874f260c9786683644b13fe07476d4a3a47fcfff1f
+  checksum: e17c0dbfc87f8764d1e34762b27d561d34a1e3dccc5d4e5d08edbf58e582d49e86ecf161f7f21af103a35045ae5a9cf0169204aa9c0a808046116cb2cc9f415c
   languageName: node
   linkType: hard
 

package.json

@@ -1,14 +1,14 @@
 {
   "scripts": {
-    "start": "yarn task --task dev --template react-vite/default-ts --start-from=install",
-    "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
-    "get-template": "cd scripts; yarn get-template",
+    "ci-tests": "cd code; yarn ci-tests",
     "get-report-message": "cd scripts; yarn get-report-message",
-    "test": "cd code; yarn test",
+    "get-template": "cd scripts; yarn get-template",
     "lint": "cd code; yarn lint",
     "nx": "cd code; yarn nx",
-    "ci-tests": "cd code; yarn ci-tests",
-    "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write"
+    "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write",
+    "start": "yarn task --task dev --template react-vite/default-ts --start-from=install",
+    "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
+    "test": "cd code; yarn test"
   },
   "packageManager": "[email protected]"
 }

scripts/package.json

@@ -12,10 +12,10 @@
     "lint:js:cmd": "cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:package": "sort-package-json",
     "migrate-docs": "node --require esbuild-register ./ts-to-ts49.ts",
+    "strict-ts": "node --require esbuild-register ./strict-ts.ts",
     "task": "ts-node --swc ./task.ts",
     "test": "jest --config ./jest.config.js",
-    "upgrade": "ts-node --swc ./task.ts",
-    "strict-ts": "node --require esbuild-register ./strict-ts.ts"
+    "upgrade": "ts-node --swc ./task.ts"
   },
   "husky": {
     "hooks": {

scripts/utils/yarn.ts

@@ -24,8 +24,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
     ...storybookVersions,
     'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
-    '@playwright/test': '1.32.3',
-    playwright: '1.32.3',
+    '@playwright/test': '^1.34.3',
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };