@storybook/angular 7.0.0-beta.8 → 7.0.0-rc.0

package/README.md

@@ -1,5 +1,18 @@
 # Storybook for Angular
 
+- [Storybook for Angular](#storybook-for-angular)
+  - [Getting Started](#getting-started)
+  - [Setup Storybook for your Angular projects](#setup-storybook-for-your-angular-projects)
+  - [Run Storybook](#run-storybook)
+  - [Setup Compodoc](#setup-compodoc)
+    - [Automatic setup](#automatic-setup)
+    - [Manual setup](#manual-setup)
+  - [FAQ](#faq)
+    - [How do I migrate to a Angular Storybook builder?](#how-do-i-migrate-to-a-angular-storybook-builder)
+      - [Do you have only one Angular project in your workspace?](#do-you-have-only-one-angular-project-in-your-workspace)
+        - [Adjust your `package.json`](#adjust-your-packagejson)
+      - [I have multiple projects in my Angular workspace](#i-have-multiple-projects-in-my-angular-workspace)
+
 Storybook for Angular is a UI development environment for your Angular components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
@@ -15,8 +28,209 @@ cd my-angular-app
 npx storybook init
 ```
 
+## Setup Storybook for your Angular projects
+
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+
+```json
+// angular.json
+{
+  ...
+  "projects": {
+    ...
+    "your-project": {
+      ...
+      "architect": {
+        ...
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            // the path to the storybook config directory
+            "configDir": ".storybook",
+            // the build target of your project
+            "browserTarget": "your-project:build",
+            // the port you want to start Storybook on
+            "port": 6006
+            // further options are available and can be found in
+            // https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/schema.json
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "outputDir": "dist/storybook/your-project"
+            // further options are available and can be found in
+            // https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/build-storybook/schema.json
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Run Storybook
+
+To run Storybook for a particular project, please run:
+
+```sh
+ng run <your-project>:storybook
+```
+
+To build Storybook, run:
+
+```sh
+ng run <your-project>:build-storybook
+```
+
+You will find the output in `dist/storybook/your-project`.
+
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
+## Setup Compodoc
+
+You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to generate documentation for your application. In Storybook, it is useful to add explanatory comments above @Inputs and @Outputs, since these are the main elements that Storybook displays in its user interface. The @Inputs and @Outputs are the elements that you can interact with in Storybook, such as controls.
+
+### Automatic setup
+
+When installing Storybook via `sb init`, you will be given the option to set up Compodoc automatically.
+
+### Manual setup
+
+If you have already installed Storybook, you can set up Compodoc manually.
+
+Install the following dependencies:
+
+```sh
+npm i -D @compodoc/compodoc
+```
+
+Add the following option to your to the Storybook Builder:
+
+```json
+{
+  ...
+  "projects": {
+    ...
+    "your-project": {
+      ...
+      "architect": {
+        ...
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            ...
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              // Where to store the generated documentation. It's usually the root of your Angular project. It's not necessarily the root of your Angular Workspace!
+              "."
+            ],
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            ...
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Go to your `.storybook/preview.js` and add the following:
+
+```js
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  ...
+};
+
+export default preview;
+```
+
+## FAQ
+
+### How do I migrate to a Angular Storybook builder?
+
+The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a new way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
+
+#### Do you have only one Angular project in your workspace?
+
+In this case go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above.
+
+##### Adjust your `package.json`
+
+Go to your `package.json` and adjust your script section. Usually, it will look like this:
+
+```json
+{
+  "scripts": {
+    "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
+    "build-storybook": "build-storybook" // or `storybook build`
+  }
+}
+```
+
+Now, you can run Storybook with `ng run <your-project>:storybook` and build it with `ng run <your-project>:build-storybook`. Adjust the scripts in your `package.json` accordingly.
+
+```json
+{
+  "scripts": {
+    "storybook": "ng run <project-name>:storybook", // or `storybook dev -p 6006`
+    "build-storybook": "ng run <project-name>:build-storybook" // or `storybook build`
+  }
+}
+```
+
+Also remove the compodoc part in your script section if you have set it up previously.
+It is now built-in in `@storybook/angular` and you don't have to call it explicitly:
+
+```json
+{
+  "scripts": {
+    "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
+    "storybook": "npm run docs:json && start-storybook -p 6006",
+    "build-storybook": "npm run docs:json && build-storybook"
+  }
+}
+```
+
+Change it to:
+
+```json
+{
+  "scripts": {
+    "storybook": "ng run <project-name>:storybook",
+    "build-storybook": "ng run <project-name>:build-storybook"
+  }
+}
+```
+
+#### I have multiple projects in my Angular workspace
+
+In this case you have to adjust your `angular.json` and `package.json` as described above for each project in which you want to use Storybook. Please note, that each project should have a dedicated `.storybook` folder, which should be placed in the root of the project.
+
+You can run `npx sb init` sequentially for each project to setup Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
+
+You can then use [Storybook composition](https://storybook.js.org/docs/angular/sharing/storybook-composition) to composite multiple Storybooks into one.
+
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.

package/dist/builders/build-storybook/index.d.ts

@@ -1,15 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { CLIOptions } from '@storybook/types';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs' | 'webpackStatsJson'>;
+} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

package/dist/builders/build-storybook/index.js

@@ -7,7 +7,7 @@ const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
-const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
+const error_handler_1 = require("../utils/error-handler");
 exports.default = (0, architect_1.createBuilder)(commandBuilder);
 function commandBuilder(options, context) {
     return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
@@ -16,14 +16,15 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
-            docs,
+            ...(docs ? { docs } : {}),
             loglevel,
             outputDir,
             quiet,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -52,5 +53,9 @@ async function setup(options, context) {
     };
 }
 function runInstance(options) {
-    return (0, rxjs_1.from)((0, core_server_1.buildStaticStandalone)(options)).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
+    return (0, rxjs_1.from)((0, core_server_1.withTelemetry)('build', {
+        cliOptions: options,
+        presetOptions: { ...options, corePresets: [], overridePresets: [] },
+        printError: error_handler_1.printErrorDetails,
+    }, () => (0, core_server_1.buildStaticStandalone)(options))).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, error_handler_1.errorSummary)(error))));
 }

package/dist/builders/build-storybook/schema.json

@@ -34,7 +34,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -47,13 +47,19 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
         },
         "webpackStatsJson": {
-            "type": "boolean",
+            "type": [
+                "boolean",
+                "string"
+            ],
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },
@@ -61,7 +67,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -83,7 +89,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",
@@ -104,7 +110,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/builders/start-storybook/index.d.ts

@@ -1,15 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { CLIOptions } from '@storybook/types';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'docs'>;
+} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

package/dist/builders/start-storybook/index.js

@@ -7,7 +7,7 @@ const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
-const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
+const error_handler_1 = require("../utils/error-handler");
 exports.default = (0, architect_1.createBuilder)(commandBuilder);
 function commandBuilder(options, context) {
     return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
@@ -16,12 +16,12 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
             configDir,
-            docs,
+            ...(docs ? { docs } : {}),
             host,
             https,
             port,
@@ -30,6 +30,7 @@ function commandBuilder(options, context) {
             sslCa,
             sslCert,
             sslKey,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -39,8 +40,8 @@ function commandBuilder(options, context) {
             tsConfig,
         };
         return standaloneOptions;
-    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)(() => {
-        return { success: true };
+    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)((port) => {
+        return { success: true, info: { port } };
     }));
 }
 async function setup(options, context) {
@@ -59,6 +60,14 @@ async function setup(options, context) {
 function runInstance(options) {
     return new rxjs_1.Observable((observer) => {
         // This Observable intentionally never complete, leaving the process running ;)
-        (0, core_server_1.buildDevStandalone)(options).then(() => observer.next(), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
+        (0, core_server_1.withTelemetry)('dev', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+            printError: error_handler_1.printErrorDetails,
+        }, () => (0, core_server_1.buildDevStandalone)(options))
+            .then(({ port }) => observer.next(port))
+            .catch((error) => {
+            observer.error((0, error_handler_1.errorSummary)(error));
+        });
     });
 }

package/dist/builders/start-storybook/schema.json

@@ -61,7 +61,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -74,7 +74,10 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
@@ -83,7 +86,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -105,7 +108,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",
@@ -126,7 +129,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/builders/utils/error-handler.d.ts

@@ -0,0 +1,2 @@
+export declare const printErrorDetails: (error: any) => void;
+export declare const errorSummary: (error: any) => string;

package/dist/builders/utils/{build-standalone-errors-handler.js → error-handler.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildStandaloneErrorHandler = void 0;
+exports.errorSummary = exports.printErrorDetails = void 0;
 const node_logger_1 = require("@storybook/node-logger");
 const ts_dedent_1 = require("ts-dedent");
-const buildStandaloneErrorHandler = (error) => {
+const printErrorDetails = (error) => {
     // Duplicate code for Standalone error handling
     // Source: https://github.com/storybookjs/storybook/blob/39c7ba09ad84fbd466f9c25d5b92791a5450b9f6/lib/core-server/src/build-dev.ts#L136
     node_logger_1.instance.heading = '';
@@ -22,6 +22,9 @@ const buildStandaloneErrorHandler = (error) => {
         error.compilation.errors.forEach((e) => node_logger_1.logger.plain(e));
     }
     node_logger_1.logger.line();
+};
+exports.printErrorDetails = printErrorDetails;
+const errorSummary = (error) => {
     return error.close
         ? (0, ts_dedent_1.dedent) `
       FATAL broken build!, will close the process,
@@ -32,4 +35,4 @@ const buildStandaloneErrorHandler = (error) => {
       You may need to refresh the browser.
     `;
 };
-exports.buildStandaloneErrorHandler = buildStandaloneErrorHandler;
+exports.errorSummary = errorSummary;

package/dist/builders/utils/run-compodoc.js

@@ -24,10 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
-const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
+const cli_1 = require("@storybook/cli");
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
+const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
 // path.relative is necessary to workaround a compodoc issue with
 // absolute paths on windows machines
 const toRelativePath = (pathToTsConfig) => {
@@ -37,37 +38,20 @@ const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
     return new rxjs_1.Observable((observer) => {
         const tsConfigPath = toRelativePath(tsconfig);
         const finalCompodocArgs = [
-            'compodoc',
-            // Default options
             ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-            '-d',
-            `${context.workspaceRoot}`,
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
             ...compodocArgs,
         ];
+        const packageManager = cli_1.JsPackageManagerFactory.getPackageManager();
         try {
-            context.logger.info(finalCompodocArgs.join(' '));
-            const child = (0, child_process_1.spawn)('npx', finalCompodocArgs, {
-                cwd: context.workspaceRoot,
-                shell: true,
-            });
-            child.stdout.on('data', (data) => {
-                context.logger.info(data.toString());
-            });
-            child.stderr.on('data', (data) => {
-                context.logger.error(data.toString());
-            });
-            child.on('close', (code) => {
-                if (code === 0) {
-                    observer.next();
-                    observer.complete();
-                }
-                else {
-                    observer.error();
-                }
-            });
+            const stdout = packageManager.runPackageCommand('compodoc', finalCompodocArgs, context.workspaceRoot);
+            context.logger.info(stdout);
+            observer.next();
+            observer.complete();
         }
-        catch (error) {
-            observer.error(error);
+        catch (e) {
+            context.logger.error(e);
+            observer.error();
         }
     });
 };

package/dist/builders/utils/run-compodoc.spec.js

@@ -56,4 +56,46 @@ describe('runCompodoc', () => {
             shell: true,
         });
     });
+    it('should run compodoc with default output folder.', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with --output compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['--output', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with -d compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-d', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
 });

package/dist/builders/utils/standalone-options.d.ts

@@ -1,6 +1,6 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
-export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOptions & {
+export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     angularBrowserTarget?: string | null;
     angularBuilderOptions?: Record<string, any> & {
@@ -9,4 +9,4 @@ export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOption
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
-}>;
+};

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
+import { ICollection, Parameters, StoryFnAngularReturnType } from '../types';
 type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;
@@ -9,7 +9,7 @@ export declare abstract class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic(): Promise<void>;
+    static resetApplications(): void;
     /**
      * Reset compiled components because we often want to compile the same component with
      * more than one NgModule.
@@ -49,7 +49,7 @@ export declare abstract class AbstractRenderer {
      * @protected
      * @memberof AbstractRenderer
      */
-    protected generateTargetSelectorFromStoryId(): string;
+    protected generateTargetSelectorFromStoryId(id: string): string;
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;
 }