@storybook/cli 6.5.0-alpha.36 → 6.5.0-alpha.40

package/dist/cjs/extract.js

@@ -24,8 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const read = async url => {
   const browser = await usePuppeteerBrowser();
   const page = await browser.newPage();
-  await page.goto(url);
-  await page.waitForFunction('window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()');
+  await page.goto(url); // we don't know whether we are running against a new or old storybook
+  // FIXME: add tests for both
+
+  await page.waitForFunction(`
+    (window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract && window.__STORYBOOK_PREVIEW__.extract()) ||
+    (window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract())
+  `);
   const data = JSON.parse(await page.evaluate(async () => {
     // eslint-disable-next-line no-undef
     return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);

package/dist/cjs/frameworks/angular/Header.stories.ts

@@ -1,7 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Story, Meta } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -15,6 +14,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
 } as Meta;
 
 const Template: Story<Header> = (args: Header) => ({
@@ -23,7 +26,9 @@ const Template: Story<Header> = (args: Header) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/cjs/frameworks/angular/Page.stories.ts

@@ -1,15 +1,18 @@
 import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
 import Button from './button.component';
 import Header from './header.component';
 import Page from './page.component';
 
-import * as HeaderStories from './Header.stories';
-
 export default {
   title: 'Example/Page',
   component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
   decorators: [
     moduleMetadata({
       declarations: [Button, Header],
@@ -22,13 +25,12 @@ const Template: Story<Page> = (args: Page) => ({
   props: args,
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/angular/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/cjs/frameworks/angular/header.component.ts

@@ -25,25 +25,36 @@ import { User } from './User';
         <h1>Acme</h1>
       </div>
       <div>
-        <storybook-button
-          *ngIf="user"
-          size="small"
-          (onClick)="onLogout.emit($event)"
-          label="Log out"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          size="small"
-          (onClick)="onLogin.emit($event)"
-          label="Log in"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          primary
-          size="small"
-          (onClick)="onCreateAccount.emit($event)"
-          label="Sign up"
-        ></storybook-button>
+        <div *ngIf="user">
+          <span class="welcome">
+            Welcome, <b>{{ user.name }}</b
+            >!
+          </span>
+          <storybook-button
+            *ngIf="user"
+            size="small"
+            (onClick)="onLogout.emit($event)"
+            label="Log out"
+          ></storybook-button>
+        </div>
+        <div *ngIf="!user">
+          <storybook-button
+            *ngIf="!user"
+            size="small"
+            class="margin-left"
+            (onClick)="onLogin.emit($event)"
+            label="Log in"
+          ></storybook-button>
+          <storybook-button
+            *ngIf="!user"
+            primary
+            size="small"
+            primary="true"
+            class="margin-left"
+            (onClick)="onCreateAccount.emit($event)"
+            label="Sign up"
+          ></storybook-button>
+        </div>
       </div>
     </div>
   </header>`,

package/dist/cjs/frameworks/angular/page.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { User } from './User';
 
 @Component({
@@ -6,9 +6,9 @@ import { User } from './User';
   template: `<article>
     <storybook-header
       [user]="user"
-      (onLogout)="onLogout.emit($event)"
-      (onLogin)="onLogin.emit($event)"
-      (onCreateAccount)="onCreateAccount.emit($event)"
+      (onLogout)="doLogout()"
+      (onLogin)="doLogin()"
+      (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
     <section>
       <h2>Pages in Storybook</h2>
@@ -61,31 +61,17 @@ import { User } from './User';
   styleUrls: ['./page.css'],
 })
 export default class PageComponent {
-  @Input()
   user: User | null = null;
 
-  @Output()
-  onLogin = new EventEmitter<Event>();
+  doLogout() {
+    this.user = null;
+  }
 
-  @Output()
-  onLogout = new EventEmitter<Event>();
+  doLogin() {
+    this.user = { name: 'Jane Doe' };
+  }
 
-  @Output()
-  onCreateAccount = new EventEmitter<Event>();
+  doCreateAccount() {
+    this.user = { name: 'Jane Doe' };
+  }
 }
-
-// export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
-//   <article>
-//     <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
-
-// );
-// Page.propTypes = {
-//   user: PropTypes.shape({}),
-//   onLogin: PropTypes.func.isRequired,
-//   onLogout: PropTypes.func.isRequired,
-//   onCreateAccount: PropTypes.func.isRequired,
-// };
-
-// Page.defaultProps = {
-//   user: null,
-// };

package/dist/cjs/generators/REACT_SCRIPTS/index.js

@@ -44,7 +44,15 @@ const generator = async (packageManager, npmOptions, options) => {
   }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
 
   const extraPackages = ['@storybook/node-logger'];
-  if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
+
+  if (isCra5) {
+    extraPackages.push('webpack'); // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
+
+    extraPackages.push('babel-plugin-named-exports-order'); // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
+
+    extraPackages.push('prop-types');
+  } // preset v3 is compat with older versions of CRA, otherwise let version float
+
 
   const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {

package/dist/cjs/generators/baseGenerator.js

@@ -51,7 +51,7 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react'].includes(framework);
+const hasInteractiveStories = framework => ['react', 'angular'].includes(framework);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,

package/dist/cjs/initiate.js

@@ -282,11 +282,12 @@ async function initiate(options, pkg) {
   } catch (ex) {
     done(ex.message);
     process.exit(1);
+    return;
   }
 
   done();
   await installStorybook(projectType, Object.assign({}, options, isEsm ? {
     commonJs: true
   } : undefined));
-  return (0, _automigrate.automigrate)();
+  await (0, _automigrate.automigrate)();
 }

package/dist/cjs/repro-generators/configs.js

@@ -14,16 +14,16 @@ const cra = {
   framework: 'react',
   name: 'cra',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --use-npm', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}}', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
 };
 exports.cra = cra;
 const cra_typescript = {
   framework: 'react',
   name: 'cra_typescript',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript'].join(' && ')
 };
 exports.cra_typescript = cra_typescript;
 const react = {
@@ -62,7 +62,7 @@ const baseAngular = {
   framework: 'angular',
   name: 'angular',
   version: 'latest',
-  generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
+  generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
 };
 const angular10 = Object.assign({}, baseAngular, {
   name: 'angular10',
@@ -117,7 +117,8 @@ exports.web_components_lit2 = web_components_lit2;
 const vue = {
   framework: 'vue',
   name: 'vue',
-  version: 'latest',
+  // Be careful here, the latest versions of vue cli are bootstrapping a vue 3  project
+  version: '4',
   generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
   `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`].join(' && ')
 };
@@ -151,7 +152,8 @@ const sfcVue = {
   framework: 'vue',
   name: 'sfcVue',
   version: 'latest',
-  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4')
+  //
+  generator: fromDeps('vue@2.6', 'vue-loader@15.9', 'vue-template-compiler@2.6', 'webpack@webpack-4')
 };
 exports.sfcVue = sfcVue;
 const svelte = {

package/dist/cjs/repro-generators/scripts.js

@@ -15,6 +15,8 @@ var _shelljs = _interopRequireDefault(require("shelljs"));
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
+var _configs = require("./configs");
+
 const _excluded = ["name", "version"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,17 +40,18 @@ const exec = async (command, options = {}, {
       silent: true
     };
 
-    _shelljs.default.exec(command, Object.assign({}, defaultOptions, options), (code, stdout, stderr) => {
+    const child = _shelljs.default.exec(command, Object.assign({}, defaultOptions, options, {
+      async: true
+    }));
+
+    child.stderr.pipe(process.stderr);
+    child.stdout.pipe(process.stdout);
+    child.on('exit', code => {
       if (code === 0) {
         resolve(undefined);
       } else {
         logger.error(_chalk.default.red(`An error occurred while executing: \`${command}\``));
-        logger.error(`Command output was:${_chalk.default.yellow(`\n${stdout}\n${stderr}`)}`);
-
-        if (errorMessage) {
-          logger.error(errorMessage);
-        }
-
+        logger.log(errorMessage);
         reject(new Error(`command exited with code: ${code}: `));
       }
     });
@@ -59,10 +62,18 @@ exports.exec = exec;
 
 const installYarn2 = async ({
   cwd,
-  pnp
+  pnp,
+  name
 }) => {
-  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`].join(' && ');
-  await exec(command, {
+  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`]; // FIXME: Some dependencies used by CRA aren't listed in its package.json
+  // Next line is a hack to remove as soon as CRA will have added these missing deps
+  // for details see https://github.com/facebook/create-react-app/pull/11751
+
+  if ([_configs.cra.name, _configs.cra_typescript.name].includes(name)) {
+    command.push(`yarn config set packageExtensions --json '{ "babel-preset-react-app@10.0.x": { "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.16.0" } } }'`);
+  }
+
+  await exec(command.join(' && '), {
     cwd
   }, {
     startMessage: `🧶 Installing Yarn 2`,
@@ -198,8 +209,6 @@ const createAndInit = async (cwd, _ref, {
   logger.log();
   logger.info(`🏃 Starting for ${name} ${version}`);
   logger.log();
-  logger.debug(options);
-  logger.log();
   await doTask(generate, Object.assign({}, options, {
     cwd: options.creationPath
   }));

package/dist/cjs/repro.js

@@ -169,6 +169,7 @@ const repro = async ({
     }));
   } catch (error) {
     logger.error('🚨 Failed to create repro');
+    throw new Error(error);
   }
 };
 

package/dist/cjs/versions.js

@@ -6,60 +6,60 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  "@storybook/addon-a11y": "6.5.0-alpha.36",
-  "@storybook/addon-actions": "6.5.0-alpha.36",
-  "@storybook/addon-backgrounds": "6.5.0-alpha.36",
-  "@storybook/addon-controls": "6.5.0-alpha.36",
-  "@storybook/addon-docs": "6.5.0-alpha.36",
-  "@storybook/addon-essentials": "6.5.0-alpha.36",
-  "@storybook/addon-interactions": "6.5.0-alpha.36",
-  "@storybook/addon-jest": "6.5.0-alpha.36",
-  "@storybook/addon-links": "6.5.0-alpha.36",
-  "@storybook/addon-measure": "6.5.0-alpha.36",
-  "@storybook/addon-outline": "6.5.0-alpha.36",
-  "@storybook/addon-storyshots": "6.5.0-alpha.36",
-  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.36",
-  "@storybook/addon-storysource": "6.5.0-alpha.36",
-  "@storybook/addon-toolbars": "6.5.0-alpha.36",
-  "@storybook/addon-viewport": "6.5.0-alpha.36",
-  "@storybook/addons": "6.5.0-alpha.36",
-  "@storybook/angular": "6.5.0-alpha.36",
-  "@storybook/api": "6.5.0-alpha.36",
-  "@storybook/builder-webpack4": "6.5.0-alpha.36",
-  "@storybook/builder-webpack5": "6.5.0-alpha.36",
-  "@storybook/channel-postmessage": "6.5.0-alpha.36",
-  "@storybook/channel-websocket": "6.5.0-alpha.36",
-  "@storybook/channels": "6.5.0-alpha.36",
-  "@storybook/cli": "6.5.0-alpha.36",
-  "@storybook/client-api": "6.5.0-alpha.36",
-  "@storybook/client-logger": "6.5.0-alpha.36",
-  "@storybook/codemod": "6.5.0-alpha.36",
-  "@storybook/components": "6.5.0-alpha.36",
-  "@storybook/core": "6.5.0-alpha.36",
-  "@storybook/core-client": "6.5.0-alpha.36",
-  "@storybook/core-common": "6.5.0-alpha.36",
-  "@storybook/core-events": "6.5.0-alpha.36",
-  "@storybook/core-server": "6.5.0-alpha.36",
-  "@storybook/csf-tools": "6.5.0-alpha.36",
-  "@storybook/ember": "6.5.0-alpha.36",
-  "@storybook/html": "6.5.0-alpha.36",
-  "@storybook/instrumenter": "6.5.0-alpha.36",
-  "@storybook/manager-webpack4": "6.5.0-alpha.36",
-  "@storybook/manager-webpack5": "6.5.0-alpha.36",
-  "@storybook/node-logger": "6.5.0-alpha.36",
-  "@storybook/postinstall": "6.5.0-alpha.36",
-  "@storybook/preact": "6.5.0-alpha.36",
-  "@storybook/preview-web": "6.5.0-alpha.36",
-  "@storybook/react": "6.5.0-alpha.36",
-  "@storybook/router": "6.5.0-alpha.36",
-  "@storybook/server": "6.5.0-alpha.36",
-  "@storybook/source-loader": "6.5.0-alpha.36",
-  "@storybook/store": "6.5.0-alpha.36",
-  "@storybook/svelte": "6.5.0-alpha.36",
-  "@storybook/theming": "6.5.0-alpha.36",
-  "@storybook/ui": "6.5.0-alpha.36",
-  "@storybook/vue": "6.5.0-alpha.36",
-  "@storybook/vue3": "6.5.0-alpha.36",
-  "@storybook/web-components": "6.5.0-alpha.36"
+  "@storybook/addon-a11y": "6.5.0-alpha.40",
+  "@storybook/addon-actions": "6.5.0-alpha.40",
+  "@storybook/addon-backgrounds": "6.5.0-alpha.40",
+  "@storybook/addon-controls": "6.5.0-alpha.40",
+  "@storybook/addon-docs": "6.5.0-alpha.40",
+  "@storybook/addon-essentials": "6.5.0-alpha.40",
+  "@storybook/addon-interactions": "6.5.0-alpha.40",
+  "@storybook/addon-jest": "6.5.0-alpha.40",
+  "@storybook/addon-links": "6.5.0-alpha.40",
+  "@storybook/addon-measure": "6.5.0-alpha.40",
+  "@storybook/addon-outline": "6.5.0-alpha.40",
+  "@storybook/addon-storyshots": "6.5.0-alpha.40",
+  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.40",
+  "@storybook/addon-storysource": "6.5.0-alpha.40",
+  "@storybook/addon-toolbars": "6.5.0-alpha.40",
+  "@storybook/addon-viewport": "6.5.0-alpha.40",
+  "@storybook/addons": "6.5.0-alpha.40",
+  "@storybook/angular": "6.5.0-alpha.40",
+  "@storybook/api": "6.5.0-alpha.40",
+  "@storybook/builder-webpack4": "6.5.0-alpha.40",
+  "@storybook/builder-webpack5": "6.5.0-alpha.40",
+  "@storybook/channel-postmessage": "6.5.0-alpha.40",
+  "@storybook/channel-websocket": "6.5.0-alpha.40",
+  "@storybook/channels": "6.5.0-alpha.40",
+  "@storybook/cli": "6.5.0-alpha.40",
+  "@storybook/client-api": "6.5.0-alpha.40",
+  "@storybook/client-logger": "6.5.0-alpha.40",
+  "@storybook/codemod": "6.5.0-alpha.40",
+  "@storybook/components": "6.5.0-alpha.40",
+  "@storybook/core": "6.5.0-alpha.40",
+  "@storybook/core-client": "6.5.0-alpha.40",
+  "@storybook/core-common": "6.5.0-alpha.40",
+  "@storybook/core-events": "6.5.0-alpha.40",
+  "@storybook/core-server": "6.5.0-alpha.40",
+  "@storybook/csf-tools": "6.5.0-alpha.40",
+  "@storybook/ember": "6.5.0-alpha.40",
+  "@storybook/html": "6.5.0-alpha.40",
+  "@storybook/instrumenter": "6.5.0-alpha.40",
+  "@storybook/manager-webpack4": "6.5.0-alpha.40",
+  "@storybook/manager-webpack5": "6.5.0-alpha.40",
+  "@storybook/node-logger": "6.5.0-alpha.40",
+  "@storybook/postinstall": "6.5.0-alpha.40",
+  "@storybook/preact": "6.5.0-alpha.40",
+  "@storybook/preview-web": "6.5.0-alpha.40",
+  "@storybook/react": "6.5.0-alpha.40",
+  "@storybook/router": "6.5.0-alpha.40",
+  "@storybook/server": "6.5.0-alpha.40",
+  "@storybook/source-loader": "6.5.0-alpha.40",
+  "@storybook/store": "6.5.0-alpha.40",
+  "@storybook/svelte": "6.5.0-alpha.40",
+  "@storybook/theming": "6.5.0-alpha.40",
+  "@storybook/ui": "6.5.0-alpha.40",
+  "@storybook/vue": "6.5.0-alpha.40",
+  "@storybook/vue3": "6.5.0-alpha.40",
+  "@storybook/web-components": "6.5.0-alpha.40"
 };
 exports.default = _default;

package/dist/esm/extract.js

@@ -24,8 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const read = async url => {
   const browser = await usePuppeteerBrowser();
   const page = await browser.newPage();
-  await page.goto(url);
-  await page.waitForFunction('window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()');
+  await page.goto(url); // we don't know whether we are running against a new or old storybook
+  // FIXME: add tests for both
+
+  await page.waitForFunction(`
+    (window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract && window.__STORYBOOK_PREVIEW__.extract()) ||
+    (window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract())
+  `);
   const data = JSON.parse(await page.evaluate(async () => {
     // eslint-disable-next-line no-undef
     return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);

package/dist/esm/frameworks/angular/Header.stories.ts

@@ -1,7 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Story, Meta } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -15,6 +14,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
 } as Meta;
 
 const Template: Story<Header> = (args: Header) => ({
@@ -23,7 +26,9 @@ const Template: Story<Header> = (args: Header) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/angular/Page.stories.ts

@@ -1,15 +1,18 @@
 import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
 import Button from './button.component';
 import Header from './header.component';
 import Page from './page.component';
 
-import * as HeaderStories from './Header.stories';
-
 export default {
   title: 'Example/Page',
   component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
   decorators: [
     moduleMetadata({
       declarations: [Button, Header],
@@ -22,13 +25,12 @@ const Template: Story<Page> = (args: Page) => ({
   props: args,
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/angular/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/esm/frameworks/angular/header.component.ts

@@ -25,25 +25,36 @@ import { User } from './User';
         <h1>Acme</h1>
       </div>
       <div>
-        <storybook-button
-          *ngIf="user"
-          size="small"
-          (onClick)="onLogout.emit($event)"
-          label="Log out"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          size="small"
-          (onClick)="onLogin.emit($event)"
-          label="Log in"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          primary
-          size="small"
-          (onClick)="onCreateAccount.emit($event)"
-          label="Sign up"
-        ></storybook-button>
+        <div *ngIf="user">
+          <span class="welcome">
+            Welcome, <b>{{ user.name }}</b
+            >!
+          </span>
+          <storybook-button
+            *ngIf="user"
+            size="small"
+            (onClick)="onLogout.emit($event)"
+            label="Log out"
+          ></storybook-button>
+        </div>
+        <div *ngIf="!user">
+          <storybook-button
+            *ngIf="!user"
+            size="small"
+            class="margin-left"
+            (onClick)="onLogin.emit($event)"
+            label="Log in"
+          ></storybook-button>
+          <storybook-button
+            *ngIf="!user"
+            primary
+            size="small"
+            primary="true"
+            class="margin-left"
+            (onClick)="onCreateAccount.emit($event)"
+            label="Sign up"
+          ></storybook-button>
+        </div>
       </div>
     </div>
   </header>`,