Angular: Fix Angular 15 support and add zone.js v0.14.x support

.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
+
+svelte-check@3.4.6 (bug: 3.5.x): Type issues
+
+## code/ui/components/package.json
+
+overlayscrollbars@2.2.1 (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/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,13 @@ export type StorybookBuilderOptions = JsonObject & {
 } & Pick<
     // makes sure the option exists
     CLIOptions,
-    'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'
+    | 'outputDir'
+    | 'configDir'
+    | 'loglevel'
+    | 'quiet'
+    | 'webpackStatsJson'
+    | 'disableTelemetry'
+    | 'debugWebpack'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
@@ -81,6 +87,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         quiet,
         enableProdMode = true,
         webpackStatsJson,
+        debugWebpack,
         disableTelemetry,
         assets,
       } = options;
@@ -103,6 +110,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         },
         tsConfig,
         webpackStatsJson,
+        debugWebpack,
       };
 
       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.",

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

@@ -53,6 +53,7 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'initialPath'
     | 'open'
     | 'docs'
+    | 'debugWebpack'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
@@ -103,6 +104,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         assets,
         initialPath,
         open,
+        debugWebpack,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -130,6 +132,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         tsConfig,
         initialPath,
         open,
+        debugWebpack,
       };
 
       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."

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

@@ -124,7 +124,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/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/types/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
-    "file-system-cache": "^2.4.4"
+    "file-system-cache": "2.3.0"
   },
   "devDependencies": {
     "@storybook/csf": "^0.1.0",

code/renderers/svelte/package.json

@@ -66,7 +66,7 @@
   "devDependencies": {
     "expect-type": "^0.15.0",
     "svelte": "^4.0.0",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "3.4.6",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {

code/ui/components/package.json

@@ -77,7 +77,7 @@
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",
-    "overlayscrollbars": "^2.2.0",
+    "overlayscrollbars": "2.2.1",
     "overlayscrollbars-react": "^0.5.0",
     "polished": "^4.2.2",
     "prettier": "^2.8.0",

code/ui/components/src/components/Zoom/ZoomIFrame.tsx

@@ -1,5 +1,5 @@
 import type { RefObject, ReactElement } from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 
 export type IZoomIFrameProps = {
   scale: number;
@@ -57,6 +57,6 @@ export class ZoomIFrame extends Component<IZoomIFrameProps> {
 
   render() {
     const { children } = this.props;
-    return children;
+    return <>{children}</>;
   }
 }