@storybook/cli 6.5.0-alpha.7 → 6.5.0-beta.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAndInit = exports.exec = void 0;
+exports.exec = exports.createAndInit = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -15,6 +15,12 @@ var _shelljs = _interopRequireDefault(require("shelljs"));
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
+var _configs = require("./configs");
+
+var _versions = _interopRequireDefault(require("../versions"));
+
+const _excluded = ["name", "version"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36,17 +42,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}: `));
       }
     });
@@ -55,12 +62,34 @@ const exec = async (command, options = {}, {
 
 exports.exec = exec;
 
+const addPackageResolutions = async ({
+  cwd
+}) => {
+  logger.info(`🔢 Adding package resolutions:`);
+
+  const packageJsonPath = _path.default.join(cwd, 'package.json');
+
+  const packageJson = await (0, _fsExtra.readJSON)(packageJsonPath);
+  packageJson.resolutions = _versions.default;
+  await (0, _fsExtra.writeJSON)(packageJsonPath, packageJson, {
+    spaces: 2
+  });
+};
+
 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`,
@@ -182,7 +211,7 @@ const createAndInit = async (cwd, _ref, {
     name,
     version
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["name", "version"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const options = Object.assign({
     name,
@@ -196,11 +225,14 @@ 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
   }));
+
+  if (e2e) {
+    await doTask(addPackageResolutions, options);
+  }
+
   await doTask(installYarn2, options);
   await doTask(configureYarn2ForE2E, options, e2e);
   await doTask(addTypescript, options, !!options.typescript);

package/dist/cjs/repro.js

@@ -25,9 +25,9 @@ var _scripts = require("./repro-generators/scripts");
 
 var configs = _interopRequireWildcard(require("./repro-generators/configs"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -169,6 +169,7 @@ const repro = async ({
     }));
   } catch (error) {
     logger.error('🚨 Failed to create repro');
+    throw new Error(error);
   }
 };
 

package/dist/cjs/typings.d.ts

@@ -0,0 +1,3 @@
+declare module '@storybook/codemod';
+declare module 'envinfo';
+declare module '@storybook/semver';

package/dist/cjs/upgrade.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.upgrade = exports.addExtraFlags = exports.checkVersionConsistency = exports.isCorePackage = exports.getStorybookVersion = void 0;
+exports.upgrade = exports.isCorePackage = exports.getStorybookVersion = exports.checkVersionConsistency = exports.addExtraFlags = void 0;
+
+require("core-js/modules/es.array.sort.js");
 
 require("core-js/modules/es.promise.js");
 
@@ -34,7 +36,7 @@ const getStorybookVersion = line => {
 };
 
 exports.getStorybookVersion = getStorybookVersion;
-const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer'];
+const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer', '@storybook/addon-postcss', '@storybook/react-docgen-typescript-plugin', '@storybook/babel-plugin-require-context-hook', '@storybook/builder-vite', '@storybook/mdx1-csf', '@storybook/mdx2-csf'];
 
 const isCorePackage = pkg => pkg.startsWith('@storybook/') && !pkg.startsWith('@storybook/preset-') && !excludeList.includes(pkg);
 

package/dist/cjs/versions.js

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

package/dist/cjs/window.d.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/add.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.add = add;
-exports.addStorybookAddonToFile = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.getPackageName = exports.storybookAddonScope = void 0;
+exports.storybookAddonScope = exports.getPackageName = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.addStorybookAddonToFile = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -77,14 +77,14 @@ const installAddon = (packageManager, addonName, isOfficialAddon) => {
 
 const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
   const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
+  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/manager`));
 
   if (alreadyRegistered) {
     return addonsFile;
   }
 
   const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, ...addonsFile.slice(latestImportIndex + 1)];
+  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1)];
 };
 
 exports.addStorybookAddonToFile = addStorybookAddonToFile;

package/dist/esm/automigrate/fixes/builder-vite.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.builderVite = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+
+/**
+ * Is the user using 'storybook-builder-vite' in their project?
+ *
+ * If so, prompt them to upgrade to '@storybook/builder-vite'.
+ *
+ * - Add '@storybook/builder-vite' as dev dependency
+ * - Remove 'storybook-builder-vite' dependency
+ * - Add core.builder = '@storybook/builder-vite' to main.js
+ */
+const builderVite = {
+  id: 'builder-vite',
+
+  async check({
+    packageManager
+  }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+    const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
+
+    if (builderName !== 'storybook-builder-vite') {
+      return null;
+    }
+
+    return {
+      builder,
+      main,
+      packageJson
+    };
+  },
+
+  prompt({
+    builder
+  }) {
+    const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
+
+    return (0, _tsDedent.default)`
+      We've detected you're using the community vite builder: ${builderFormatted}
+      
+      'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
+
+      We can upgrade your project to use the new builder automatically.
+      
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed')}
+    `;
+  },
+
+  async run({
+    result: {
+      builder,
+      main,
+      packageJson
+    },
+    packageManager,
+    dryRun
+  }) {
+    const {
+      dependencies = {},
+      devDependencies = {}
+    } = packageJson;
+    logger.info(`Removing existing 'storybook-builder-vite' dependency`);
+
+    if (!dryRun) {
+      delete dependencies['storybook-builder-vite'];
+      delete devDependencies['storybook-builder-vite'];
+      (0, _jsPackageManager.writePackageJson)(packageJson);
+    }
+
+    logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
+
+    if (!dryRun) {
+      packageManager.addDependencies({
+        installAsDevDependencies: true
+      }, ['@storybook/builder-vite']);
+    }
+
+    logger.info(`Updating main.js to use vite builder`);
+
+    if (!dryRun) {
+      const updatedBuilder = typeof builder === 'string' ? '@storybook/builder-vite' : {
+        name: '@storybook/builder-vite',
+        options: builder.options
+      };
+      main.setFieldValue(['core', 'builder'], updatedBuilder);
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.builderVite = builderVite;

package/dist/esm/automigrate/fixes/index.js

@@ -18,6 +18,8 @@ var _mainjsFramework = require("./mainjsFramework");
 
 var _eslintPlugin = require("./eslint-plugin");
 
+var _builderVite = require("./builder-vite");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -31,5 +33,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
 exports.fixes = fixes;

package/dist/esm/automigrate/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/babel-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateStorybookBabelConfig = exports.generateStorybookBabelConfigInCWD = void 0;
+exports.generateStorybookBabelConfigInCWD = exports.generateStorybookBabelConfig = void 0;
 
 require("core-js/modules/es.promise.js");
 

package/dist/esm/detect.js

@@ -3,15 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.detect = detect;
+exports.detectBuilder = detectBuilder;
 exports.detectFrameworkPreset = detectFrameworkPreset;
-exports.isStorybookInstalled = isStorybookInstalled;
 exports.detectLanguage = detectLanguage;
-exports.detect = detect;
+exports.isStorybookInstalled = isStorybookInstalled;
 
 var _path = _interopRequireDefault(require("path"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _findUp = _interopRequireDefault(require("find-up"));
+
 var _project_types = require("./project_types");
 
 var _helpers = require("./helpers");
@@ -20,6 +23,8 @@ var _jsPackageManager = require("./js-package-manager");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
+
 const hasDependency = (packageJson, name, matcher) => {
   var _packageJson$dependen, _packageJson$devDepen;
 
@@ -96,6 +101,52 @@ function detectFrameworkPreset(packageJson = {}) {
   });
   return result ? result.preset : _project_types.ProjectType.UNDETECTED;
 }
+/**
+ * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
+ * will be used, otherwise, webpack4 is the default.
+ *
+ * @returns CoreBuilder
+ */
+
+
+function detectBuilder(packageManager) {
+  const viteConfig = _findUp.default.sync(viteConfigFiles);
+
+  if (viteConfig) {
+    (0, _helpers.paddedLog)('Detected vite project, setting builder to @storybook/builder-vite');
+    return _project_types.CoreBuilder.Vite;
+  }
+
+  try {
+    let out = '';
+
+    if (packageManager.type === 'npm') {
+      try {
+        // npm <= v7
+        out = packageManager.executeCommand('npm', ['ls', 'webpack']);
+      } catch (e2) {
+        // npm >= v8
+        out = packageManager.executeCommand('npm', ['why', 'webpack']);
+      }
+    } else {
+      out = packageManager.executeCommand('yarn', ['why', 'webpack']);
+    } // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4)
+
+
+    if (out.includes('webpack@4') || out.includes('webpack@npm:4')) {
+      return _project_types.CoreBuilder.Webpack5;
+    } // the user has webpack 4 installed, but not 5
+
+
+    if (out.includes('webpack@5') || out.includes('webpack@npm:5')) {
+      return _project_types.CoreBuilder.Webpack5;
+    }
+  } catch (err) {//
+  } // Fallback to webpack4
+
+
+  return _project_types.CoreBuilder.Webpack4;
+}
 
 function isStorybookInstalled(dependencies, force) {
   if (!dependencies) {

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>`,