@storybook/cli 6.5.0-alpha.5 → 6.5.0-alpha.52

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular12 = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
+exports.webpack_react = exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.svelte = exports.sfcVue = exports.react_typescript = exports.react_in_yarn_workspace = exports.react = exports.preact = exports.html = exports.cra_typescript = exports.cra = exports.angular_modern_inline_rendering = exports.angular130 = exports.angular13 = exports.angular12 = exports.angular11 = exports.angular10 = exports.angular = void 0;
 
 const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
 // and not look for a yarn workspace in parent directory
@@ -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',
@@ -79,6 +79,27 @@ const angular12 = Object.assign({}, baseAngular, {
   version: 'v12-lts'
 });
 exports.angular12 = angular12;
+const angular130 = Object.assign({}, baseAngular, {
+  name: 'angular130',
+  version: '13.0.x'
+});
+exports.angular130 = angular130;
+const angular13 = Object.assign({}, baseAngular, {
+  name: 'angular13',
+  version: '13.1.x'
+});
+exports.angular13 = angular13;
+const angular_modern_inline_rendering = Object.assign({}, baseAngular, {
+  name: 'angular_modern_inline_rendering',
+  additionalDeps: ['jest', '@storybook/test-runner'],
+  mainOverrides: {
+    features: {
+      storyStoreV7: true,
+      modernInlineRender: true
+    }
+  }
+});
+exports.angular_modern_inline_rendering = angular_modern_inline_rendering;
 const angular = baseAngular; // #endregion
 // #region  web components
 
@@ -107,7 +128,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(' && ')
 };
@@ -141,7 +163,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

@@ -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");
 

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-alpha.52",
+  "@storybook/addon-actions": "6.5.0-alpha.52",
+  "@storybook/addon-backgrounds": "6.5.0-alpha.52",
+  "@storybook/addon-controls": "6.5.0-alpha.52",
+  "@storybook/addon-docs": "6.5.0-alpha.52",
+  "@storybook/addon-essentials": "6.5.0-alpha.52",
+  "@storybook/addon-interactions": "6.5.0-alpha.52",
+  "@storybook/addon-jest": "6.5.0-alpha.52",
+  "@storybook/addon-links": "6.5.0-alpha.52",
+  "@storybook/addon-measure": "6.5.0-alpha.52",
+  "@storybook/addon-outline": "6.5.0-alpha.52",
+  "@storybook/addon-storyshots": "6.5.0-alpha.52",
+  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.52",
+  "@storybook/addon-storysource": "6.5.0-alpha.52",
+  "@storybook/addon-toolbars": "6.5.0-alpha.52",
+  "@storybook/addon-viewport": "6.5.0-alpha.52",
+  "@storybook/addons": "6.5.0-alpha.52",
+  "@storybook/angular": "6.5.0-alpha.52",
+  "@storybook/api": "6.5.0-alpha.52",
+  "@storybook/builder-webpack4": "6.5.0-alpha.52",
+  "@storybook/builder-webpack5": "6.5.0-alpha.52",
+  "@storybook/channel-postmessage": "6.5.0-alpha.52",
+  "@storybook/channel-websocket": "6.5.0-alpha.52",
+  "@storybook/channels": "6.5.0-alpha.52",
+  "@storybook/cli": "6.5.0-alpha.52",
+  "@storybook/client-api": "6.5.0-alpha.52",
+  "@storybook/client-logger": "6.5.0-alpha.52",
+  "@storybook/codemod": "6.5.0-alpha.52",
+  "@storybook/components": "6.5.0-alpha.52",
+  "@storybook/core": "6.5.0-alpha.52",
+  "@storybook/core-client": "6.5.0-alpha.52",
+  "@storybook/core-common": "6.5.0-alpha.52",
+  "@storybook/core-events": "6.5.0-alpha.52",
+  "@storybook/core-server": "6.5.0-alpha.52",
+  "@storybook/csf-tools": "6.5.0-alpha.52",
+  "@storybook/docs-tools": "6.5.0-alpha.52",
+  "@storybook/ember": "6.5.0-alpha.52",
+  "@storybook/html": "6.5.0-alpha.52",
+  "@storybook/instrumenter": "6.5.0-alpha.52",
+  "@storybook/manager-webpack4": "6.5.0-alpha.52",
+  "@storybook/manager-webpack5": "6.5.0-alpha.52",
+  "@storybook/node-logger": "6.5.0-alpha.52",
+  "@storybook/postinstall": "6.5.0-alpha.52",
+  "@storybook/preact": "6.5.0-alpha.52",
+  "@storybook/preview-web": "6.5.0-alpha.52",
+  "@storybook/react": "6.5.0-alpha.52",
+  "@storybook/router": "6.5.0-alpha.52",
+  "@storybook/server": "6.5.0-alpha.52",
+  "@storybook/source-loader": "6.5.0-alpha.52",
+  "@storybook/store": "6.5.0-alpha.52",
+  "@storybook/svelte": "6.5.0-alpha.52",
+  "@storybook/theming": "6.5.0-alpha.52",
+  "@storybook/ui": "6.5.0-alpha.52",
+  "@storybook/vue": "6.5.0-alpha.52",
+  "@storybook/vue3": "6.5.0-alpha.52",
+  "@storybook/web-components": "6.5.0-alpha.52"
+};
+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");
 

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

@@ -0,0 +1,123 @@
+"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') {
+      logger.info(`Not using community vite builder, skipping`);
+      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,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.detect = detect;
 exports.detectFrameworkPreset = detectFrameworkPreset;
-exports.isStorybookInstalled = isStorybookInstalled;
 exports.detectLanguage = detectLanguage;
-exports.detect = detect;
+exports.isStorybookInstalled = isStorybookInstalled;
 
 var _path = _interopRequireDefault(require("path"));
 

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