Merge branch 'next' into bugfix/nextjs-image-context-2

.gitattributes

@@ -1 +1,2 @@
 /**/.yarn/** linguist-generated
+* -text

.github/workflows/generate-sandboxes-main.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main

.github/workflows/generate-sandboxes-next.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.4.2
+
+- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!
+- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.1
 
 - CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -24,7 +24,7 @@ function areAllRequiredElementsHighlighted(
   highlighted: string[]
 ): CheckBoxStates {
   const highlightedCount = elementsToHighlight.filter((item) =>
-    highlighted.includes(item.target[0])
+    highlighted.includes(item.target[0] as any)
   ).length;
 
   // eslint-disable-next-line no-nested-ternary
@@ -52,7 +52,7 @@ const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight
 
   const handleToggle = React.useCallback((): void => {
     toggleHighlight(
-      elementsToHighlight.map((e) => e.target[0]),
+      elementsToHighlight.map((e) => e.target[0] as any),
       checkBoxState !== CheckBoxStates.CHECKED
     );
   }, [elementsToHighlight, checkBoxState, toggleHighlight]);

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers';
 
 const createBackgroundSelectorItem = memoize(1000)(
   (
-    id: string,
+    id: string | null,
     name: string,
     value: string,
-    hasSwatch: boolean,
+    hasSwatch: boolean | null,
     change: (arg: { selected: string; name: string }) => void,
     active: boolean
   ): BackgroundSelectorItem => ({
@@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
   }
 
   const onBackgroundChange = useCallback(
-    (value: string) => {
+    (value: string | undefined) => {
       updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
     },
     [backgroundsConfig, globals, updateGlobals]

code/addons/backgrounds/src/helpers/index.ts

@@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => {
 export const getBackgroundColorByName = (
   currentSelectedValue: string,
   backgrounds: Background[] = [],
-  defaultName: string
+  defaultName: string | null | undefined
 ): string => {
   if (currentSelectedValue === 'transparent') {
     return 'transparent';
@@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => {
 const clearStyle = (selector: string) => {
   const element = document.getElementById(selector) as HTMLElement;
   if (element) {
-    element.parentElement.removeChild(element);
+    element.parentElement?.removeChild(element);
   }
 };
 
@@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => {
   }
 };
 
-export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
+export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => {
   const existingStyle = document.getElementById(selector) as HTMLElement;
   if (existingStyle) {
     if (existingStyle.innerHTML !== css) {
@@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin
     // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
     const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
     if (existingGridStyle) {
-      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
+      existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
     } else {
       document.head.appendChild(style);
     }

code/addons/backgrounds/src/types/index.ts

@@ -20,7 +20,7 @@ export interface Background {
 }
 
 export interface BackgroundsParameter {
-  default?: string;
+  default?: string | null;
   disable?: boolean;
   values: Background[];
 }

code/addons/backgrounds/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }

code/addons/docs/src/preset.ts

@@ -135,7 +135,7 @@ async function webpack(
 
 export const createStoriesMdxIndexer = (legacyMdx1?: boolean): Indexer => ({
   test: /(stories|story)\.mdx$/,
-  index: async (fileName, opts) => {
+  createIndex: async (fileName, opts) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
     const { compile } = legacyMdx1
       ? await import('@storybook/mdx1-csf')

code/builders/builder-manager/src/utils/files.test.ts

@@ -1,3 +1,4 @@
+import type { OutputFile } from 'esbuild';
 import { platform } from 'os';
 import { sanitizePath } from './files';
 
@@ -9,12 +10,13 @@ test('sanitizePath', () => {
     ? 'C:\\Users\\username\\Projects\\projectname\\storybook'
     : '/Users/username/Projects/projectname/storybook';
   const text = 'demo text';
-  const file = {
+  const file: OutputFile = {
     path: isWindows
       ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.js'
       : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.js',
     contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))),
     text,
+    hash: '',
   };
   const { location, url } = sanitizePath(file, addonsDir);
 

code/builders/builder-webpack5/package.json

@@ -65,7 +65,7 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@swc/core": "^1.3.49",
+    "@swc/core": "^1.3.82",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.0.0",

code/chromatic.config.json

@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:635781f3500dd2c49e189caf",
+  "projectToken": "80b312430ec4",
+  "buildScriptName": "storybook:ui:build",
+  "onlyChanged": true,
+  "storybookConfigDir": "./ui/.storybook",
+  "storybookBaseDir": "./code"
+}

code/frameworks/nextjs/README.md

@@ -19,6 +19,7 @@
     - [next/font/google](#nextfontgoogle)
     - [next/font/local](#nextfontlocal)
     - [Not supported features of next/font](#not-supported-features-of-nextfont)
+    - [Mocking fonts during testing](#mocking-fonts-during-testing)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
@@ -271,6 +272,51 @@ The following features are not supported (yet). Support for these features might
 - [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
 - [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
 
+#### Mocking fonts during testing
+
+Occasionally fetching fonts from Google may fail as part of your Storybook build step. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports mocking fonts](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36) via a JavaScript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references.
+
+For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions):
+
+```shell
+      - uses: chromaui/action@v1
+        env:
+          #👇 the location of mocked fonts to use
+          NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+Your mocked fonts will look something like this:
+
+```js
+// mocked-google-fonts.js
+//👇 Mocked responses of google fonts with the URL as the key
+module.exports = {
+  'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
+    /* cyrillic-ext */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
+      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    }
+    /* more font declarations go here */
+    /* latin */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
+      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }`,
+};
+```
+
 ### Next.js Routing
 
 [Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).

code/frameworks/nextjs/package.json

@@ -90,6 +90,7 @@
     "@storybook/addon-actions": "workspace:*",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/core-events": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/preview-api": "workspace:*",

code/frameworks/nextjs/src/config/webpack.ts

@@ -17,6 +17,8 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
+  addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;

code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts

@@ -1,6 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import loaderUtils from 'next/dist/compiled/loader-utils3';
+import {
+  GoogleFontsDownloadError,
+  GoogleFontsLoadingError,
+} from '@storybook/core-events/server-errors';
 import type { LoaderOptions } from '../types';
 
 const cssCache = new Map<string, Promise<string>>();
@@ -33,7 +37,10 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
       cssCache.delete(url);
     }
     if (fontFaceCSS === null) {
-      throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);
+      throw new GoogleFontsDownloadError({
+        fontFamily,
+        url,
+      });
     }
 
     return {
@@ -45,6 +52,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
       variable,
     };
   } catch (error) {
-    throw new Error("Google Fonts couldn't be loaded.");
+    throw new GoogleFontsLoadingError({ error, url });
   }
 }

code/frameworks/nextjs/src/preset.ts

@@ -68,7 +68,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [
   ...entry,
   require.resolve('@storybook/nextjs/preview.js'),
 ];

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

@@ -74,6 +74,7 @@ const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action,
               apply: false,
               hashFragment: null,
               segmentPaths: [tree],
+              onlyHashChange: false,
             },
             nextUrl: pathname,
           }}

code/frameworks/sveltekit/README.md

@@ -29,7 +29,7 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
 | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
 | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
 | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ✅ Supported           | Requires SvelteKit 1.4.0 or newer                                                                                                   |
-| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | Mocks planned, so you can set different store values per story.                                                             |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | Mocks planned, so you can set different store values per story.                                                                     |
 | [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |
 | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
 | [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |

code/lib/cli/src/generators/configure.test.ts

@@ -131,7 +131,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },
@@ -162,7 +162,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },
@@ -213,7 +213,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },

code/lib/cli/src/generators/configure.ts

@@ -152,7 +152,7 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
         controls: {
           matchers: {
            color: /(background|color)$/i,
-           date: /Date$/,
+           date: /Date$/i,
           },
         },
       },

code/lib/cli/src/js-package-manager/PNPMProxy.test.ts

@@ -213,9 +213,14 @@ describe('PNPM Proxy', () => {
         .spyOn(pnpmProxy, 'writePackageJson')
         .mockImplementation(jest.fn());
 
+      const basePackageAttributes = {
+        dependencies: {},
+        devDependencies: {},
+      };
+
       jest.spyOn(pnpmProxy, 'retrievePackageJson').mockImplementation(
-        // @ts-expect-error (not strict)
-        jest.fn(() => ({
+        jest.fn(async () => ({
+          ...basePackageAttributes,
           overrides: {
             bar: 'x.x.x',
           },
@@ -228,6 +233,7 @@ describe('PNPM Proxy', () => {
       await pnpmProxy.addPackageResolutions(versions);
 
       expect(writePackageSpy).toHaveBeenCalledWith({
+        ...basePackageAttributes,
         overrides: {
           ...versions,
           bar: 'x.x.x',

code/lib/cli/src/sandbox-templates.ts

@@ -296,7 +296,7 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
-    // TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
+    // TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
     inDevelopment: true,
   },
   'angular-cli/default-ts': {
@@ -586,7 +586,8 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
-  'angular-cli/prerelease',
+  // TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
+  // 'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',