Merge branch 'next' into docs/remove-deprecated-file-url

.circleci/config.yml

@@ -555,27 +555,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - bench:
@@ -609,30 +609,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

RESOLUTIONS.md

@@ -0,0 +1,11 @@
+# Resolutions and Exact versions
+
+This file keeps track of any resolutions or exact versions specified in any `package.json` file. Resolutions are used to specify a specific version of a package to be used, even if a different version is specified as a dependency of another package.
+
+## code/renderers/svelte/package.json
+
+[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/addons/docs/src/DocsRenderer.tsx

@@ -28,7 +28,7 @@ class ErrorBoundary extends Component<{
     const { hasError } = this.state;
     const { children } = this.props;
 
-    return hasError ? null : children;
+    return hasError ? null : <>{children}</>;
   }
 }
 

code/builders/builder-webpack5/src/index.ts

@@ -274,6 +274,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
       }
 
       if (errors.length > 0) {
+        errors.forEach((e) => logger.error(e.message));
         compiler.close(() => fail(new WebpackCompilationError({ errors })));
         return;
       }

code/e2e-tests/navigation.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+import process from 'process';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+
+test.describe('navigating', () => {
+  test('a URL with a partial storyId will redirect to the first story', async ({ page }) => {
+    // this is purposefully not using the SbPage class, and the URL is a partial (it does not contain the full storyId)
+    await page.goto(`${storybookUrl}?path=/story/example-button`);
+
+    const sbPage = new SbPage(page);
+
+    await sbPage.waitUntilLoaded();
+
+    await expect(sbPage.page.url()).toContain('/docs/example-button--docs');
+  });
+});

code/frameworks/angular/package.json

@@ -106,7 +106,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
-    "zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0"
+    "zone.js": ">= 0.11.1 < 1.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/cli": {

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -42,7 +42,14 @@ export type StorybookBuilderOptions = JsonObject & {
 } & Pick<
     // makes sure the option exists
     CLIOptions,
-    'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'
+    | 'outputDir'
+    | 'configDir'
+    | 'loglevel'
+    | 'quiet'
+    | 'webpackStatsJson'
+    | 'disableTelemetry'
+    | 'debugWebpack'
+    | 'previewUrl'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
@@ -81,8 +88,10 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         quiet,
         enableProdMode = true,
         webpackStatsJson,
+        debugWebpack,
         disableTelemetry,
         assets,
+        previewUrl,
       } = options;
 
       const standaloneOptions: StandaloneBuildOptions = {
@@ -103,6 +112,8 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         },
         tsConfig,
         webpackStatsJson,
+        debugWebpack,
+        previewUrl,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -29,6 +29,11 @@
       "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
       "pattern": "(silly|verbose|info|warn|silent)"
     },
+    "debugWebpack": {
+      "type": "boolean",
+      "description": "Debug the Webpack configuration",
+      "default": false
+    },
     "enableProdMode": {
       "type": "boolean",
       "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.",
@@ -62,6 +67,10 @@
       "description": "Write Webpack Stats JSON to disk",
       "default": false
     },
+    "previewUrl": {
+      "type": "string",
+      "description": "Disables the default storybook preview and lets you use your own"
+    },
     "styles": {
       "type": "array",
       "description": "Global styles to be included in the build.",

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -53,6 +53,10 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'initialPath'
     | 'open'
     | 'docs'
+    | 'debugWebpack'
+    | 'webpackStatsJson'
+    | 'loglevel'
+    | 'previewUrl'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
@@ -103,6 +107,10 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         assets,
         initialPath,
         open,
+        debugWebpack,
+        loglevel,
+        webpackStatsJson,
+        previewUrl,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -130,6 +138,10 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         tsConfig,
         initialPath,
         open,
+        debugWebpack,
+        loglevel,
+        webpackStatsJson,
+        previewUrl,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -10,6 +10,11 @@
       "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
       "default": null
     },
+    "debugWebpack": {
+      "type": "boolean",
+      "description": "Debug the Webpack configuration",
+      "default": false
+    },
     "tsConfig": {
       "type": "string",
       "description": "The full path for the TypeScript configuration file, relative to the current workspace."
@@ -123,6 +128,20 @@
     "initialPath": {
       "type": "string",
       "description": "URL path to be appended when visiting Storybook for the first time"
+    },
+    "webpackStatsJson": {
+      "type": "string",
+      "description": "Write Webpack Stats JSON to disk",
+      "default": false
+    },
+    "previewUrl": {
+      "type": "string",
+      "description": "Disables the default storybook preview and lets you use your own"
+    },
+    "loglevel": {
+      "type": "string",
+      "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+      "pattern": "(silly|verbose|info|warn|silent)"
     }
   },
   "additionalProperties": false,

code/frameworks/angular/src/builders/utils/error-handler.ts

@@ -12,7 +12,7 @@ export const printErrorDetails = (error: any): void => {
     } else if ((error as any).stats && (error as any).stats.compilation.errors) {
       (error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e));
     } else {
-      logger.error(error);
+      logger.error(error as any);
     }
   } else if (error.compilation?.errors) {
     error.compilation.errors.forEach((e: any) => logger.plain(e));

code/frameworks/angular/src/client/globals.ts

@@ -25,7 +25,7 @@ import { global } from '@storybook/global';
 /** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /** *************************************************************************************************
  * APPLICATION IMPORTS

code/frameworks/nextjs/package.json

@@ -27,14 +27,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./image-context": {
-      "types": "./dist/image-context.d.ts",
-      "require": "./dist/image-context.js",
-      "import": "./dist/image-context.mjs"
-    },
     "./dist/image-context": {
       "types": "./dist/image-context.d.ts",
-      "require": "./dist/image-context.js",
+      "require": "./dist/image-context.mjs",
       "import": "./dist/image-context.mjs"
     },
     "./preset": {
@@ -124,7 +119,7 @@
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
-    "next": "^13.4.8",
+    "next": "13.4.19",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
   },

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

@@ -1,6 +1,6 @@
 import type * as _NextImage from 'next/image';
 
-export const defaultLoader = ({ src, width, quality }: _NextImage.ImageLoaderProps) => {
+export const defaultLoader = ({ src, width, quality = 75 }: _NextImage.ImageLoaderProps) => {
   const missingValues = [];
   if (!src) {
     missingValues.push('src');
@@ -24,5 +24,16 @@ export const defaultLoader = ({ src, width, quality }: _NextImage.ImageLoaderPro
     );
   }
 
-  return `${src}?w=${width}&q=${quality ?? 75}`;
+  const url = new URL(src, window.location.href);
+
+  if (!url.searchParams.has('w') && !url.searchParams.has('q')) {
+    url.searchParams.set('w', width.toString());
+    url.searchParams.set('q', quality.toString());
+  }
+
+  if (!src.startsWith('http://') && !src.startsWith('https://')) {
+    return url.toString().slice(url.origin.length);
+  }
+
+  return url.toString();
 };

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

@@ -61,10 +61,6 @@ export const Lazy = {
     width: 50,
     height: 50,
   },
-  parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
-    chromatic: { disableSnapshot: true },
-  },
   decorators: [
     (Story) => (
       <>
@@ -78,8 +74,6 @@ export const Lazy = {
 export const Eager = {
   ...Lazy,
   parameters: {
-    // ignoring in Chromatic to avoid inconsistent snapshots since the image is sometimes not loaded in time
-    chromatic: { disableSnapshot: true },
     nextjs: {
       image: {
         loading: 'eager',

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

@@ -576,7 +576,7 @@ export const merged: TemplateKey[] = [
   ...normal,
   'react-webpack/18-ts',
   'react-webpack/17-ts',
-  // 'angular-cli/15-ts', // TODO: re-enable when building the storybook works again
+  'angular-cli/15-ts',
   'preact-webpack5/default-ts',
   'preact-vite/default-ts',
   'html-webpack/default',

code/lib/core-common/package.json

@@ -54,7 +54,7 @@
     "chalk": "^4.1.0",
     "esbuild": "^0.18.0",
     "esbuild-register": "^3.5.0",
-    "file-system-cache": "^2.4.4",
+    "file-system-cache": "2.3.0",
     "find-cache-dir": "^3.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",

code/lib/core-events/src/errors/storybook-error.test.ts

@@ -13,7 +13,7 @@ describe('StorybookError', () => {
 
   it('should generate the correct error name', () => {
     const error = new TestError();
-    expect(error.name).toBe('SB_TEST_CATEGORY_0123');
+    expect(error.name).toBe('SB_TEST_CATEGORY_0123 (TestError)');
   });
 
   it('should generate the correct message without documentation link', () => {