storybookjs · vanessayuenn · Sep 21, 2023 · Apr 20, 2023 · Apr 23, 2023 · Apr 26, 2023
diff --git a/.gitattributes b/.gitattributes
@@ -1 +1,2 @@
 /**/.yarn/** linguist-generated
+* -text
diff --git a/.github/workflows/generate-sandboxes-main.yml b/.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

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.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

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,27 @@
+## 7.4.3
+
+- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!
+- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!
+
+## 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)!
+- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!
+- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)!
+- Telemetry: Filter addon options to protect sensitive info - [#24000](https://github.com/storybookjs/storybook/pull/24000), thanks [@shilman](https://github.com/shilman)!
+- Types: Remove `@types/react` dep from `@storybook/types` - [#24042](https://github.com/storybookjs/storybook/pull/24042), thanks [@JReinhold](https://github.com/JReinhold)!
+- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!
+
 ## 7.4.0
 
 - Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,31 @@
+## 7.5.0-alpha.3
+
+- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!
+- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)!
+- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)!
+- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)!
+- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)!
+- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)!
+- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!
+- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)!
+- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!
+- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)!
+- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!
+- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)!
+- 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: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)!
+- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)!
+- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)!
+- 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.5.0-alpha.2
 
 - Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)!

diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.tsx b/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]);

diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/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]

diff --git a/code/addons/backgrounds/src/helpers/index.ts b/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);
     }

diff --git a/code/addons/backgrounds/src/types/index.ts b/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[];
 }

diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }
diff --git a/code/addons/docs/src/preset.ts b/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')

diff --git a/code/builders/builder-manager/src/utils/files.test.ts b/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);
 

diff --git a/code/builders/builder-webpack5/package.json b/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",

diff --git a/code/chromatic.config.json b/code/chromatic.config.json
@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:635781f3500dd2c49e189caf",
+  "projectToken": "80b312430ec4",
+  "buildScriptName": "storybook:ui:build",
+  "onlyChanged": true,
+  "storybookConfigDir": "./ui/.storybook",
+  "storybookBaseDir": "./code"
+}
diff --git a/code/frameworks/nextjs/README.md b/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).

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
@@ -95,6 +95,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:*",

diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
@@ -5,6 +5,14 @@ import type { NextConfig } from 'next';
 import { DefinePlugin } from 'webpack';
 import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
 
+const tryResolve = (path: string) => {
+  try {
+    return require.resolve(path);
+  } catch (err) {
+    return false;
+  }
+};
+
 export const configureConfig = async ({
   baseConfig,
   nextConfigPath,
@@ -17,6 +25,12 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
+  if (tryResolve('next/dist/compiled/react')) {
+    addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  }
+  if (tryResolve('next/dist/compiled/react-dom')) {
+    addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+  }
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;

diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts
@@ -0,0 +1,36 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import semver from 'semver';
+import { getNextjsVersion, addScopedAlias } from './utils';
+
+const mapping: Record<string, Record<string, string>> = {
+  '<11.1.0': {
+    'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
+  },
+  '>=11.1.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
+  },
+  '>=13.5.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
+    'next/dist/shared/lib/head-manager-context':
+      'next/dist/shared/lib/head-manager-context.shared-runtime',
+    'next/dist/shared/lib/app-router-context':
+      'next/dist/shared/lib/app-router-context.shared-runtime',
+    'next/dist/shared/lib/hooks-client-context':
+      'next/dist/shared/lib/hooks-client-context.shared-runtime',
+  },
+};
+
+export const configureAliasing = (baseConfig: WebpackConfig): void => {
+  const version = getNextjsVersion();
+  const result: Record<string, string> = {};
+
+  Object.keys(mapping).forEach((key) => {
+    if (semver.intersects(version, key)) {
+      Object.assign(result, mapping[key]);
+    }
+  });
+
+  Object.entries(result).forEach(([name, alias]) => {
+    addScopedAlias(baseConfig, name, alias);
+  });
+};
diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/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 });
   }
 }