Merge pull request #24612 from storybookjs/version-non-patch-from-7.6…

….0-alpha.3

Release: Prerelease alpha 7.6.0-alpha.4

.github/workflows/publish.yml

@@ -163,7 +163,7 @@ jobs:
           yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}"
 
           git add ..
-          git commit -m "Bump next to be one minor ahead of main [skip ci]"
+          git diff --staged --quiet || git commit -m "Bump next to be one minor ahead of main [skip ci]"
           git push origin next
 
       - name: Sync CHANGELOG.md from `main` to `next`

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 7.5.2
+
+- Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Allow Yarn v4 in `link` command - [#24551](https://github.com/storybookjs/storybook/pull/24551), thanks [@yannbf](https://github.com/yannbf)!
+- Next.js: Support v14.0.0 - [#24593](https://github.com/storybookjs/storybook/pull/24593), thanks [@nikospapcom](https://github.com/nikospapcom)!
+
+## 7.5.1
+
+- Angular: update wrong type for webpackStatsJson in start-storybook schema.json - [#24494](https://github.com/storybookjs/storybook/pull/24494), thanks [@LucaVazz](https://github.com/LucaVazz)!
+- Themes: Run postinstall in shell for windows - [#24389](https://github.com/storybookjs/storybook/pull/24389), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+
 ## 7.5.0
 
 Storybook 7.5 enhances your Storybook experience with several key updates:

CHANGELOG.prerelease.md

@@ -1,3 +1,21 @@
+## 7.6.0-alpha.4
+
+-  CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)!
+- Babel: Update all @babel/* dependencies - [#24610](https://github.com/storybookjs/storybook/pull/24610), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- CLI: Catch when prettier failed to prettify main and preview config files - [#24604](https://github.com/storybookjs/storybook/pull/24604), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Ignore `addon-onboarding` when checking versions - [#24634](https://github.com/storybookjs/storybook/pull/24634), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Use @storybook/test in template stories - [#24393](https://github.com/storybookjs/storybook/pull/24393), thanks [@yannbf](https://github.com/yannbf)!
+- Controls: Improve accessibility of BooleanControl for screen readers - [#24418](https://github.com/storybookjs/storybook/pull/24418), thanks [@danielmarcano](https://github.com/danielmarcano)!
+- Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - [#24670](https://github.com/storybookjs/storybook/pull/24670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Dependencies: Update browserify-sign transitive dependency - [#24674](https://github.com/storybookjs/storybook/pull/24674), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Dependencies: Update nx dependencies to v17 - [#24671](https://github.com/storybookjs/storybook/pull/24671), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Maintenance: Split renderers preview entrypoints - [#24623](https://github.com/storybookjs/storybook/pull/24623), thanks [@ndelangen](https://github.com/ndelangen)!
+- Next.js: Add avif support - [#24611](https://github.com/storybookjs/storybook/pull/24611), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix forwarding ref for Image component - [#24648](https://github.com/storybookjs/storybook/pull/24648), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Theming: Add theme variable to set the preview background color - [#24575](https://github.com/storybookjs/storybook/pull/24575), thanks [@JReinhold](https://github.com/JReinhold)!
+- UI: Fix button contrast-ratio - [#24525](https://github.com/storybookjs/storybook/pull/24525), thanks [@maheshchandra10](https://github.com/maheshchandra10)!
+- UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - [#24602](https://github.com/storybookjs/storybook/pull/24602), thanks [@yoshi2no](https://github.com/yoshi2no)!
+
 ## 7.6.0-alpha.3
 
 - Action: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

RESOLUTIONS.md

@@ -9,3 +9,7 @@ [email protected] (bug: 3.5.x): Type issues
 ## code/ui/components/package.json
 
 [email protected] (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
+
+## code/package.json
+
+@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462

code/.gitignore

@@ -0,0 +1 @@
+.nx/cache

code/.prettierignore

@@ -1 +1,3 @@
 *.mdx
+
+/.nx/cache

code/builders/builder-webpack5/package.json

@@ -56,7 +56,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
+    "@babel/core": "^7.23.2",
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-common": "workspace:*",

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

@@ -29,15 +29,15 @@ test.describe('addon-interactions', () => {
     await expect(welcome).toContainText('Welcome, Jane Doe!');
 
     const interactionsTab = await page.locator('#tabbutton-storybook-interactions-panel');
-    await expect(interactionsTab).toContainText(/(1)/);
+    await expect(interactionsTab).toContainText(/(\d)/);
     await expect(interactionsTab).toBeVisible();
 
     const panel = sbPage.panelContent();
     await expect(panel).toContainText(/Pass/);
     await expect(panel).toContainText(/userEvent.click/);
     await expect(panel).toBeVisible();
 
-    const done = await panel.locator('[data-testid=icon-done]');
+    const done = await panel.locator('[data-testid=icon-done]').nth(0);
     await expect(done).toBeVisible();
   });
 

code/frameworks/angular/package.json

@@ -81,7 +81,7 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
     "jest-preset-angular": "^13.0.1",
     "jest-specific-snapshot": "^8.0.0",
     "tmp": "^0.2.1",

code/frameworks/angular/template/cli/Page.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
-import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
+import { within, userEvent, expect } from '@storybook/test';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -38,9 +38,12 @@ export const LoggedIn: Story = {
   }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

code/frameworks/nextjs/README.md

@@ -14,7 +14,6 @@
   - [Next.js's Image Component](#nextjss-image-component)
     - [Local Images](#local-images)
     - [Remote Images](#remote-images)
-    - [AVIF](#avif)
   - [Next.js Font Optimization](#nextjs-font-optimization)
     - [next/font/google](#nextfontgoogle)
     - [next/font/local](#nextfontlocal)
@@ -220,10 +219,6 @@ export default function Home() {
 }
 ```
 
-#### AVIF
-
-This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
-
 ### Next.js Font Optimization
 
 [next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `next/font/google` and `next/font/local` are supported.

code/frameworks/nextjs/package.json

@@ -74,19 +74,19 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.23.2",
     "@babel/plugin-syntax-bigint": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/plugin-transform-export-namespace-from": "^7.22.11",
     "@babel/plugin-transform-numeric-separator": "^7.22.11",
     "@babel/plugin-transform-object-rest-spread": "^7.22.15",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.6",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@babel/runtime": "^7.23.2",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
@@ -100,25 +100,27 @@
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
     "image-size": "^1.0.0",
-    "loader-utils": "^3.2.0",
+    "loader-utils": "^3.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
     "semver": "^7.3.5",
+    "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
     "styled-jsx": "5.1.1",
     "ts-dedent": "^2.0.0",
     "tsconfig-paths": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/types": "^7.22.5",
+    "@babel/types": "^7.23.0",
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
+    "@types/loader-utils": "^2.0.5",
     "next": "^14.0.0",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"

code/frameworks/nextjs/src/images/next-image.tsx

@@ -13,10 +13,21 @@ import { defaultLoader } from './next-image-default-loader';
 
 const ImageContext = ImageContextValue as typeof ImageContextType;
 
-const MockedNextImage = ({ loader, ...props }: _NextImage.ImageProps) => {
-  const imageParameters = React.useContext(ImageContext);
+const MockedNextImage = React.forwardRef<HTMLImageElement, _NextImage.ImageProps>(
+  ({ loader, ...props }, ref) => {
+    const imageParameters = React.useContext(ImageContext);
 
-  return <OriginalNextImage {...imageParameters} {...props} loader={loader ?? defaultLoader} />;
-};
+    return (
+      <OriginalNextImage
+        ref={ref}
+        {...imageParameters}
+        {...props}
+        loader={loader ?? defaultLoader}
+      />
+    );
+  }
+);
+
+MockedNextImage.displayName = 'NextImage';
 
 export default MockedNextImage;

code/frameworks/nextjs/src/next-image-loader-stub.ts

@@ -1,29 +1,52 @@
-// @ts-expect-error (loader-utils has no webpack5 compatible types)
 import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
 import type { NextConfig } from 'next';
+import sharp from 'sharp';
+import { cpus } from 'os';
 
 interface LoaderOptions {
   filename: string;
   nextConfig: NextConfig;
 }
 
-const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (content) {
+if (sharp.concurrency() > 1) {
+  // Reducing concurrency reduces the memory usage too.
+  const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
+  sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+}
+
+const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function NextImageLoader(
+  content
+) {
   const { filename, nextConfig } = this.getOptions();
-  const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), {
+  const opts = {
     context: this.rootContext,
     content,
-  });
+  };
+  const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), opts);
+  const extension = interpolateName(this, '[ext]', opts);
 
   this.emitFile(outputPath, content);
 
-  const { width, height } = imageSizeOf(this.resourcePath);
-
   if (nextConfig.images?.disableStaticImages) {
     return `const src = '${outputPath}'; export default src;`;
   }
 
+  let width;
+  let height;
+
+  if (extension === 'avif') {
+    const transformer = sharp(content);
+    const result = await transformer.metadata();
+    width = result.width;
+    height = result.height;
+  } else {
+    const result = imageSizeOf(this.resourcePath);
+    width = result.width;
+    height = result.height;
+  }
+
   return `export default ${JSON.stringify({
     src: outputPath,
     height,

code/frameworks/nextjs/template/cli/js/Page.stories.js

@@ -1,4 +1,4 @@
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 import { Page } from './Page';
 
 export default {
@@ -16,9 +16,12 @@ export const LoggedOut = {};
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 
 import { Page } from './Page';
 
@@ -21,9 +21,12 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 
 import { Page } from './Page';
 
@@ -21,9 +21,12 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
   },
 };

code/frameworks/nextjs/template/stories/Image.stories.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import Image from 'next/image';
 import { waitFor } from '@storybook/testing-library';
 
 import Accessibility from '../../assets/accessibility.svg';
+import AvifImage from '../../assets/avif-test-image.avif';
 
 export default {
   component: Image,
@@ -14,6 +15,13 @@ export default {
 
 export const Default = {};
 
+export const Avif = {
+  args: {
+    src: AvifImage,
+    alt: 'Avif Test Image',
+  },
+};
+
 export const BlurredPlaceholder = {
   args: {
     placeholder: 'blur',
@@ -81,3 +89,16 @@ export const Eager = {
     },
   },
 };
+
+export const WithRef = {
+  render() {
+    const [ref, setRef] = useState(null);
+
+    return (
+      <div>
+        <Image src={Accessibility} alt="Accessibility" ref={setRef} />
+        <p>Alt attribute of image: {ref?.alt}</p>
+      </div>
+    );
+  },
+};