Merge branch 'next' of github.com:storybookjs/storybook into allozaur/s…

…torybookjs#24886

.circleci/config.yml

@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 37
+          parallelism: 36
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 37
+          parallelism: 36
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

MIGRATION.md

@@ -10,6 +10,9 @@
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
     - [Icons is deprecated](#icons-is-deprecated)
     - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
+  - [Framework-specific changes](#framework-specific-changes)
+    - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
+    - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -460,6 +463,16 @@ export default {
 
 For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen
 
+### Framework-specific changes
+
+#### Angular: Drop support for Angular \< 15
+
+Starting in 8.0, we drop support for Angular < 15
+
+#### Next.js: Drop support for version \< 13.5
+
+Starting in 8.0, we drop support for Next.js < 13.5.
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

code/addons/storysource/package.json

@@ -47,6 +47,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/source-loader": "workspace:*",
     "estraverse": "^5.2.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -56,7 +57,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
-    "@storybook/source-loader": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/react": "^18.0.37",
     "@types/react-syntax-highlighter": "11.0.5",

code/frameworks/angular/package.json

@@ -65,18 +65,18 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1600.0-rc.4",
-    "@angular-devkit/build-angular": "^16.0.0-rc.4",
-    "@angular-devkit/core": "^16.0.0-rc.4",
-    "@angular/animations": "^16.0.0-rc.4",
-    "@angular/cli": "^16.0.0-rc.4",
-    "@angular/common": "^16.0.0-rc.4",
-    "@angular/compiler": "^16.0.0-rc.4",
-    "@angular/compiler-cli": "^16.0.0-rc.4",
-    "@angular/core": "^16.0.0-rc.4",
-    "@angular/forms": "^16.0.0-rc.4",
-    "@angular/platform-browser": "^16.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "^16.0.0-rc.4",
+    "@angular-devkit/architect": "^0.1700.5",
+    "@angular-devkit/build-angular": "^17.0.5",
+    "@angular-devkit/core": "^17.0.5",
+    "@angular/animations": "^17.0.5",
+    "@angular/cli": "^17.0.5",
+    "@angular/common": "^17.0.5",
+    "@angular/compiler": "^17.0.5",
+    "@angular/compiler-cli": "^17.0.5",
+    "@angular/core": "^17.0.5",
+    "@angular/forms": "^17.0.5",
+    "@angular/platform-browser": "^17.0.5",
+    "@angular/platform-browser-dynamic": "^17.0.5",
     "@types/cross-spawn": "^6.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -86,20 +86,20 @@
     "tmp": "^0.2.1",
     "typescript": "^5.3.2",
     "webpack": "5",
-    "zone.js": "^0.13.0"
+    "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1800.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 18.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 18.0.0",
-    "@angular/cli": ">=14.1.0 < 18.0.0",
-    "@angular/common": ">=14.1.0 < 18.0.0",
-    "@angular/compiler": ">=14.1.0 < 18.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 18.0.0",
-    "@angular/core": ">=14.1.0 < 18.0.0",
-    "@angular/forms": ">=14.1.0 < 18.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 18.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 18.0.0",
+    "@angular/cli": ">=15.0.0 < 18.0.0",
+    "@angular/common": ">=15.0.0 < 18.0.0",
+    "@angular/compiler": ">=15.0.0 < 18.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 18.0.0",
+    "@angular/core": ">=15.0.0 < 18.0.0",
+    "@angular/forms": ">=15.0.0 < 18.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
     "@babel/core": "*",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",

code/frameworks/nextjs/package.json

@@ -32,16 +32,6 @@
       "require": "./dist/image-context.js",
       "import": "./dist/image-context.mjs"
     },
-    "./dist/routing/app-router-provider": {
-      "types": "./dist/routing/app-router-provider.d.ts",
-      "require": "./dist/routing/app-router-provider.js",
-      "import": "./dist/routing/app-router-provider.mjs"
-    },
-    "./dist/routing/app-router-provider-mock": {
-      "types": "./dist/routing/app-router-provider-mock.d.ts",
-      "require": "./dist/routing/app-router-provider-mock.js",
-      "import": "./dist/routing/app-router-provider-mock.mjs"
-    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -137,16 +127,12 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "@next/font": "^13.0.0|| ^14.0.0",
-    "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "next": "^13.5.0 || ^14.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@next/font": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },
@@ -168,11 +154,8 @@
       "./src/preview.tsx",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
-      "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
-      "./src/routing/app-router-provider.tsx",
-      "./src/routing/app-router-provider-mock.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
       "./src/swc/next-swc-loader-patch.ts"
     ],

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

@@ -1,9 +1,8 @@
 import type { Configuration as WebpackConfig } from 'webpack';
-import semver from 'semver';
 
 import type { NextConfig } from 'next';
 import { DefinePlugin } from 'webpack';
-import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
+import { addScopedAlias, resolveNextConfig } from '../utils';
 
 const tryResolve = (path: string) => {
   try {
@@ -36,8 +35,6 @@ export const configureConfig = async ({
   return nextConfig;
 };
 
-const version = getNextjsVersion();
-
 const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
   const definePluginConfig: Record<string, any> = {
     // this mimics what nextjs does client side
@@ -50,21 +47,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
 
   const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;
 
-  /**
-   * In Next 13.0.0 - 13.0.5, the `newNextLinkBehavior` option now defaults to truthy (still
-   * `undefined` in the config), and `next/link` was engineered to opt *out*
-   * of it
-   *
-   */
-  if (
-    semver.gte(version, '13.0.0') &&
-    semver.lt(version, '13.0.6') &&
-    newNextLinkBehavior !== false
-  ) {
-    definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = true;
-  } else {
-    definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
-  }
+  definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
 
   baseConfig.plugins?.push(new DefinePlugin(definePluginConfig));
 };

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

@@ -5,34 +5,28 @@ import {
   GoogleFontsDownloadError,
   GoogleFontsLoadingError,
 } from '@storybook/core-events/server-errors';
+import { validateGoogleFontFunctionCall } from 'next/dist/compiled/@next/font/dist/google/validate-google-font-function-call';
+import { getGoogleFontsUrl } from 'next/dist/compiled/@next/font/dist/google/get-google-fonts-url';
+import { getFontAxes } from 'next/dist/compiled/@next/font/dist/google/get-font-axes';
+import { fetchCSSFromGoogleFonts } from 'next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts';
 import type { LoaderOptions } from '../types';
 
-const cssCache = new Map<string, Promise<string>>();
+const cssCache = new Map<string, string>();
 
 export async function getFontFaceDeclarations(options: LoaderOptions) {
-  const {
-    fetchCSSFromGoogleFonts,
-    getFontAxes,
-    getUrl,
-    validateData,
-  } = require('../utils/google-font-utils');
-
-  const { fontFamily, weights, styles, selectedVariableAxes, display, variable } = validateData(
-    options.fontFamily,
-    [options.props],
-    null
-  );
+  const { fontFamily, weights, styles, selectedVariableAxes, display, variable } =
+    validateGoogleFontFunctionCall(options.fontFamily, options.props);
 
   const fontAxes = getFontAxes(fontFamily, weights, styles, selectedVariableAxes);
-  const url = getUrl(fontFamily, fontAxes, display);
+  const url = getGoogleFontsUrl(fontFamily, fontAxes, display);
 
   try {
     const hasCachedCSS = cssCache.has(url);
     const fontFaceCSS = hasCachedCSS
       ? cssCache.get(url)
-      : await fetchCSSFromGoogleFonts(url, fontFamily).catch(() => null);
+      : await fetchCSSFromGoogleFonts(url, fontFamily, true).catch(() => null);
     if (!hasCachedCSS) {
-      cssCache.set(url, fontFaceCSS);
+      cssCache.set(url, fontFaceCSS as string);
     } else {
       cssCache.delete(url);
     }

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

@@ -2,6 +2,7 @@
 // @ts-expect-error
 import loaderUtils from 'next/dist/compiled/loader-utils3';
 import { getProjectRoot } from '@storybook/core-common';
+import { validateLocalFontFunctionCall } from 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call';
 import path from 'path';
 
 import type { LoaderOptions } from '../types';
@@ -20,8 +21,12 @@ export async function getFontFaceDeclarations(
     ? path.dirname(path.join(getProjectRoot(), options.filename)).replace(rootContext, '')
     : path.dirname(options.filename).replace(rootContext, '');
 
-  const { validateData } = require('../utils/local-font-utils');
-  const { weight, style, variable, declarations = [] } = validateData('', options.props);
+  const {
+    weight,
+    style,
+    variable,
+    declarations = [],
+  } = validateLocalFontFunctionCall('', options.props);
 
   const id = `font-${loaderUtils.getHashDigest(
     Buffer.from(JSON.stringify(localFontSrc)),