@storybook/angular 7.0.0-beta.9 → 7.0.0-rc.1

package/dist/renderer.mjs

@@ -0,0 +1,5 @@
+export { storyPropsProvider } from './client/angular-beta/StorybookProvider';
+export { computesTemplateSourceFromComponent } from './client/angular-beta/ComputesTemplateFromComponent';
+export { rendererFactory } from './client/render';
+export { AbstractRenderer } from './client/angular-beta/AbstractRenderer';
+export { getApplication } from './client/angular-beta/StorybookModule';

package/dist/server/framework-preset-angular-cli.d.ts

@@ -1,3 +1,4 @@
 import webpack from 'webpack';
 import { PresetOptions } from './preset-options';
-export declare function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions): Promise<webpack.Configuration>;
+export declare function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions): Promise<any>;
+export declare const migrationToBuilderReferrenceMessage: string;

package/dist/server/framework-preset-angular-cli.js

@@ -1,72 +1,28 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webpackFinal = void 0;
+exports.migrationToBuilderReferrenceMessage = exports.webpackFinal = void 0;
 const node_logger_1 = require("@storybook/node-logger");
 const architect_1 = require("@angular-devkit/architect");
 const find_up_1 = require("find-up");
-const semver_1 = __importDefault(require("semver"));
 const ts_dedent_1 = require("ts-dedent");
 const core_1 = require("@angular-devkit/core");
 const angular_cli_webpack_1 = require("./angular-cli-webpack");
 const module_is_available_1 = require("./utils/module-is-available");
-const angular_read_workspace_1 = require("./angular-read-workspace");
 async function webpackFinal(baseConfig, options) {
     if (!(0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular')) {
         node_logger_1.logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
         return baseConfig;
     }
-    const angularCliVersion = await Promise.resolve().then(() => __importStar(require('@angular/cli'))).then((m) => semver_1.default.coerce(m.VERSION.full));
-    /**
-     * Ordered array to use the specific  getWebpackConfig according to some condition like angular-cli version
-     */
-    const webpackGetterByVersions = [
-        {
-            info: '=> Loading angular-cli config for angular >= 13.0.0',
-            condition: semver_1.default.satisfies(angularCliVersion, '>=13.0.0'),
-            getWebpackConfig: async (_baseConfig, _options) => {
-                const builderContext = getBuilderContext(_options);
-                const builderOptions = await getBuilderOptions(_options, builderContext);
-                const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
-                return (0, angular_cli_webpack_1.getWebpackConfig)(_baseConfig, {
-                    builderOptions: {
-                        watch: options.configType === 'DEVELOPMENT',
-                        ...legacyDefaultOptions,
-                        ...builderOptions,
-                    },
-                    builderContext,
-                });
-            },
+    checkForLegacyBuildOptions(options);
+    const builderContext = getBuilderContext(options);
+    const builderOptions = await getBuilderOptions(options, builderContext);
+    return (0, angular_cli_webpack_1.getWebpackConfig)(baseConfig, {
+        builderOptions: {
+            watch: options.configType === 'DEVELOPMENT',
+            ...builderOptions,
         },
-    ];
-    const webpackGetter = webpackGetterByVersions.find((wg) => wg.condition);
-    node_logger_1.logger.info(webpackGetter.info);
-    return Promise.resolve(webpackGetter.getWebpackConfig(baseConfig, options));
+        builderContext,
+    });
 }
 exports.webpackFinal = webpackFinal;
 /**
@@ -110,47 +66,20 @@ async function getBuilderOptions(options, builderContext) {
     node_logger_1.logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
     return builderOptions;
 }
+exports.migrationToBuilderReferrenceMessage = (0, ts_dedent_1.dedent) `Your Storybook startup uses a solution that is not supported.
+    You must use angular builder to have an explicit configuration on the project used in angular.json
+    Read more at:
+    - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
+    - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
+  `;
 /**
- * Get options from legacy way
- * /!\ This is only for backward compatibility and would be removed on Storybook 7.0
- * only work for angular.json with [defaultProject].build or "storybook.build" config
+ * Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs.
  */
-async function getLegacyDefaultBuildOptions(options) {
+function checkForLegacyBuildOptions(options) {
     if (options.angularBrowserTarget !== undefined) {
         // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without)
-        return {};
-    }
-    node_logger_1.logger.warn((0, ts_dedent_1.dedent) `Your Storybook startup uses a solution that will not be supported in version 7.0. 
-            You must use angular builder to have an explicit configuration on the project used in angular.json
-            Read more at:
-            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
-            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
-          `);
-    const dirToSearch = process.cwd();
-    // Read angular workspace
-    let workspaceConfig;
-    try {
-        workspaceConfig = await (0, angular_read_workspace_1.readAngularWorkspaceConfig)(dirToSearch);
-    }
-    catch (error) {
-        node_logger_1.logger.error(`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`);
-        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
-        return {};
-    }
-    // Find angular project target
-    try {
-        const browserTarget = {
-            configuration: undefined,
-            project: (0, angular_read_workspace_1.getDefaultProjectName)(workspaceConfig),
-            target: 'build',
-        };
-        const { target } = (0, angular_read_workspace_1.findAngularProjectTarget)(workspaceConfig, browserTarget.project, browserTarget.target);
-        node_logger_1.logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`);
-        return { ...target.options };
-    }
-    catch (error) {
-        node_logger_1.logger.error(`=> Could not find angular project: ${error.message}`);
-        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
-        return {};
+        return;
     }
+    node_logger_1.logger.error(exports.migrationToBuilderReferrenceMessage);
+    throw Error('angularBrowserTarget is undefined.');
 }

package/dist/server/preset-options.d.ts

@@ -1,10 +1,11 @@
 import { Options as CoreOptions } from '@storybook/types';
 import { BuilderContext } from '@angular-devkit/architect';
-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 PresetOptions = CoreOptions & {
     angularBrowserTarget?: string | null;
     angularBuilderOptions?: {
-        styles?: ExtraEntryPoint[];
+        styles?: StyleElement[];
         stylePreprocessorOptions?: StylePreprocessorOptions;
     };
     angularBuilderContext?: BuilderContext | null;

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/jest.config.js

@@ -9,4 +9,23 @@ module.exports = {
     escapeString: true,
     printBasicPrototype: true,
   },
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: './coverage/testapp',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
+    '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)',
+  ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-beta.9",
+  "version": "7.0.0-rc.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -21,39 +21,41 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "template/**/*",
     "README.md",
     "*.js",
+    "*.mjs",
     "*.d.ts"
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc",
-    "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
+    "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-beta.9",
-    "@storybook/client-logger": "7.0.0-beta.9",
-    "@storybook/core-client": "7.0.0-beta.9",
-    "@storybook/core-common": "7.0.0-beta.9",
-    "@storybook/core-events": "7.0.0-beta.9",
-    "@storybook/core-server": "7.0.0-beta.9",
-    "@storybook/core-webpack": "7.0.0-beta.9",
-    "@storybook/docs-tools": "7.0.0-beta.9",
-    "@storybook/manager-api": "7.0.0-beta.9",
-    "@storybook/node-logger": "7.0.0-beta.9",
-    "@storybook/preview-api": "7.0.0-beta.9",
-    "@storybook/types": "7.0.0-beta.9",
+    "@storybook/builder-webpack5": "7.0.0-rc.1",
+    "@storybook/cli": "7.0.0-rc.1",
+    "@storybook/client-logger": "7.0.0-rc.1",
+    "@storybook/core-client": "7.0.0-rc.1",
+    "@storybook/core-common": "7.0.0-rc.1",
+    "@storybook/core-events": "7.0.0-rc.1",
+    "@storybook/core-server": "7.0.0-rc.1",
+    "@storybook/core-webpack": "7.0.0-rc.1",
+    "@storybook/docs-tools": "7.0.0-rc.1",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "7.0.0-rc.1",
+    "@storybook/node-logger": "7.0.0-rc.1",
+    "@storybook/preview-api": "7.0.0-rc.1",
+    "@storybook/types": "7.0.0-rc.1",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
     "@types/webpack-env": "^1.18.0",
-    "core-js": "^3.8.2",
     "find-up": "^5.0.0",
-    "global": "^4.4.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
     "telejson": "^7.0.3",
@@ -63,23 +65,23 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1303.5",
-    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-devkit/core": "^13.3.5",
-    "@angular/cli": "^13.3.5",
-    "@angular/common": "^13.3.6",
-    "@angular/compiler": "^13.3.6",
-    "@angular/compiler-cli": "^13.3.6",
-    "@angular/core": "^13.3.6",
-    "@angular/forms": "^13.3.6",
-    "@angular/platform-browser": "^13.3.6",
-    "@angular/platform-browser-dynamic": "^13.3.6",
-    "@nrwl/workspace": "14.6.1",
+    "@angular-devkit/architect": "^0.1500.4",
+    "@angular-devkit/build-angular": "^15.1.1",
+    "@angular-devkit/core": "^15.1.1",
+    "@angular/animations": "^15.1.1",
+    "@angular/cli": "^15.1.1",
+    "@angular/common": "^15.1.1",
+    "@angular/compiler": "^15.1.1",
+    "@angular/compiler-cli": "^15.1.1",
+    "@angular/core": "^15.1.1",
+    "@angular/forms": "^15.1.1",
+    "@angular/platform-browser": "^15.1.1",
+    "@angular/platform-browser-dynamic": "^15.1.1",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
     "jest": "^29.3.1",
-    "jest-preset-angular": "^12.0.0",
+    "jest-preset-angular": "^12.2.3",
     "jest-specific-snapshot": "^7.0.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",
@@ -88,19 +90,18 @@
     "zone.js": "^0.12.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1300.0",
-    "@angular-devkit/build-angular": ">=13.0.0",
-    "@angular-devkit/core": ">=13.0.0",
-    "@angular/cli": ">=13.0.0",
-    "@angular/common": ">=13.0.0",
-    "@angular/compiler": ">=13.0.0",
-    "@angular/compiler-cli": ">=13.0.0",
-    "@angular/core": ">=13.0.0",
-    "@angular/forms": ">=13.0.0",
-    "@angular/platform-browser": ">=13.0.0",
-    "@angular/platform-browser-dynamic": ">=13.0.0",
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 16.0.0",
+    "@angular/cli": ">=14.1.0 < 16.0.0",
+    "@angular/common": ">=14.1.0 < 16.0.0",
+    "@angular/compiler": ">=14.1.0 < 16.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 16.0.0",
+    "@angular/core": ">=14.1.0 < 16.0.0",
+    "@angular/forms": ">=14.1.0 < 16.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 16.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
     "@babel/core": "*",
-    "@nrwl/workspace": "14.6.1",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
@@ -110,9 +111,6 @@
   "peerDependenciesMeta": {
     "@angular/cli": {
       "optional": true
-    },
-    "@nrwl/workspace": {
-      "optional": true
     }
   },
   "engines": {
@@ -122,5 +120,8 @@
     "access": "public"
   },
   "builders": "dist/builders/builders.json",
-  "gitHead": "c466d4f77c3e8b99f28aaf508acdb9fd863550fd"
+  "bundler": {
+    "tsConfig": "tsconfig.build.json"
+  },
+  "gitHead": "115d69123dc7c4dfab9538d2b273cb0fcc372852"
 }

package/template/cli/Button.stories.ts

@@ -5,7 +5,7 @@ import Button from './button.component';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args: Button) => ({
     props: {
       backgroundColor: null,

package/template/cli/Header.stories.ts

@@ -8,8 +8,8 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({

package/template/cli/button.component.ts

@@ -1,7 +1,9 @@
+import { CommonModule } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button',
+  imports: [CommonModule],
   template: ` <button
     type="button"
     (click)="onClick.emit($event)"

package/template/components/index.js

@@ -1,8 +1,8 @@
-import globalThis from 'global';
+import { global } from '@storybook/global';
 
 import Button from './button.component';
 import Html from './html.component';
 import Pre from './pre.component';
 import Form from './form.component';
 
-globalThis.Components = { Button, Html, Pre, Form };
+global.Components = { Button, Html, Pre, Form };

package/template/stories/angular-mdx.stories.mdx

@@ -1,4 +1,4 @@
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { moduleMetadata } from '@storybook/angular';
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 

package/template/stories/argTypes/doc-button/doc-button.component.ts

@@ -72,8 +72,7 @@ export class DocButtonComponent<T> {
 
   /** Test null default value. */
   @Input()
-  // @ts-expect-error intentionally undefined
-  public anUndefinedValue;
+  public anUndefinedValue: undefined;
 
   /** Test numeric default value. */
   @Input()

package/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -59,7 +59,7 @@ WithCustomNgComponentOutletWrapper.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithCustomNgComponentOutletWrapper.args = { name: 'Dixie Normous', color: 'green' };
+WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' };
 WithCustomNgComponentOutletWrapper.decorators = [
   moduleMetadata({
     declarations: [NgComponentOutletWrapperComponent],

package/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

@@ -59,7 +59,7 @@ WithComponentFactoryResolver.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithComponentFactoryResolver.args = { name: 'Dixie Normous', color: 'chartreuse' };
+WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' };
 WithComponentFactoryResolver.decorators = [
   moduleMetadata({
     declarations: [ComponentFactoryWrapperComponent],

package/template/stories/basics/component-without-selector/without-selector.stories.ts

@@ -27,4 +27,4 @@ WithInjectionTokenAndArgs.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithInjectionTokenAndArgs.args = { name: 'Dixie Normous', color: 'red' };
+WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' };

package/template/stories/basics/ng-module/import-module-chip.stories.ts

@@ -0,0 +1,23 @@
+import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { ChipsModule } from './angular-src/chips.module';
+import { ChipComponent } from './angular-src/chip.component';
+
+export default {
+  component: ChipComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ChipsModule],
+    }),
+  ],
+} as Meta;
+
+export const Chip: StoryFn = (args) => ({
+  props: args,
+});
+
+Chip.args = {
+  displayText: 'Chip',
+};
+Chip.argTypes = {
+  removeClicked: { action: 'Remove icon clicked' },
+};

package/template/stories/basics/ng-module/import-module.stories.ts

@@ -1,7 +1,6 @@
 import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
-import { ChipComponent } from './angular-src/chip.component';
 
 export default {
   // title: 'Basics / NgModule / Module with multiple component',
@@ -14,9 +13,9 @@ export default {
 } as Meta;
 
 export const ChipsGroup: StoryFn = (args) => ({
-  component: ChipsGroupComponent,
   props: args,
 });
+
 ChipsGroup.args = {
   chips: [
     {
@@ -29,18 +28,8 @@ ChipsGroup.args = {
     },
   ],
 };
+
 ChipsGroup.argTypes = {
   removeChipClick: { action: 'Remove chip' },
   removeAllChipsClick: { action: 'Remove all chips clicked' },
 };
-
-export const Chip: StoryFn = (args) => ({
-  component: ChipComponent,
-  props: args,
-});
-Chip.args = {
-  displayText: 'Chip',
-};
-Chip.argTypes = {
-  removeClicked: { action: 'Remove icon clicked' },
-};

package/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts

@@ -97,21 +97,3 @@ WithCustomDecorator.decorators = [
     };
   },
 ] as Story['decorators'];
-
-export const AngularLegacyRendering = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-AngularLegacyRendering.parameters = { angularLegacyRendering: true };
-AngularLegacyRendering.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  margin-top: 1rem;
+}
+
+.open-close-container {
+  border: 1px solid #dddddd;
+  margin-top: 1em;
+  padding: 20px 20px 0px 20px;
+  color: #000000;
+  font-weight: bold;
+  font-size: 20px;
+}

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html

@@ -0,0 +1,7 @@
+<nav>
+  <button type="button" (click)="toggle()">Toggle Open/Close</button>
+</nav>
+
+<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
+  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
+</div>

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-open-close',
+  animations: [
+    trigger('openClose', [
+      // ...
+      state(
+        'open',
+        style({
+          height: '200px',
+          opacity: 1,
+          backgroundColor: 'yellow',
+        })
+      ),
+      state(
+        'closed',
+        style({
+          height: '100px',
+          opacity: 0.8,
+          backgroundColor: 'blue',
+        })
+      ),
+      transition('open => closed', [animate('0.1s')]),
+      transition('closed => open', [animate('0.1s')]),
+    ]),
+  ],
+  templateUrl: 'open-close.component.html',
+  styleUrls: ['open-close.component.css'],
+})
+export class OpenCloseComponent {
+  isOpen = true;
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+}

package/template/stories/core/moduleMetadata/with-browser-animations.stories.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+  parameters: {
+    chromatic: { delay: 100 },
+  },
+} as Meta;
+
+export const WithBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [BrowserAnimationsModule],
+  },
+});
+
+WithBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};

package/template/stories/core/moduleMetadata/with-noop-browser-animations.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+} as Meta;
+
+export const WithNoopBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [NoopAnimationsModule],
+  },
+});
+
+WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};