@storybook/cli 6.5.0-alpha.34 → 6.5.0-alpha.39

package/dist/esm/frameworks/react/ts/Page.tsx

@@ -3,65 +3,71 @@ import React from 'react';
 import { Header } from './Header';
 import './page.css';
 
-interface PageProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
+type User = {
+  name: string;
+};
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
-  <article>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+export const Page: React.VFC = () => {
+  const [user, setUser] = React.useState<User>();
 
-    <section>
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a{' '}
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong>
-        </a>{' '}
-        process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at{' '}
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the{' '}
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-          docs
-        </a>
-        .
-      </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-);
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/dist/esm/generators/baseGenerator.js

@@ -51,6 +51,8 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
+const hasInteractiveStories = framework => ['react', 'angular'].includes(framework);
+
 async function baseGenerator(packageManager, npmOptions, {
   language,
   builder
@@ -71,6 +73,12 @@ async function baseGenerator(packageManager, npmOptions, {
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
 
   const addonPackages = [...addons, '@storybook/addon-actions'];
+
+  if (hasInteractiveStories(framework)) {
+    addons.push('@storybook/addon-interactions');
+    addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
+  }
+
   const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');

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

package/dist/modern/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/modern/frameworks/common/header.css

@@ -24,3 +24,9 @@ h1 {
 button + button {
   margin-left: 10px;
 }
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

package/dist/modern/frameworks/react/js/Header.jsx

@@ -28,7 +28,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
       </div>
       <div>
         {user ? (
-          <Button size="small" onClick={onLogout} label="Log out" />
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />

package/dist/modern/frameworks/react/js/Header.stories.jsx

@@ -5,13 +5,19 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/modern/frameworks/react/js/Page.jsx

@@ -1,71 +1,69 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Header } from './Header';
 import './page.css';
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
-  <article>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+export const Page = () => {
+  const [user, setUser] = React.useState();
 
-    <section>
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a{' '}
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong>
-        </a>{' '}
-        process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at{' '}
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the{' '}
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-          docs
-        </a>
-        .
-      </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-);
-Page.propTypes = {
-  user: PropTypes.shape({}),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
 
-Page.defaultProps = {
-  user: null,
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
 };

package/dist/modern/frameworks/react/js/Page.stories.jsx

@@ -1,22 +1,25 @@
 import React from 'react';
+import { within, userEvent } from '@storybook/testing-library';
 
 import { Page } from './Page';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
   component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => <Page {...args} />;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/react/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+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/modern/generators/baseGenerator.js

@@ -51,6 +51,8 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
+const hasInteractiveStories = framework => ['react', 'angular'].includes(framework);
+
 async function baseGenerator(packageManager, npmOptions, {
   language,
   builder
@@ -71,6 +73,12 @@ async function baseGenerator(packageManager, npmOptions, {
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
 
   const addonPackages = [...addons, '@storybook/addon-actions'];
+
+  if (hasInteractiveStories(framework)) {
+    addons.push('@storybook/addon-interactions');
+    addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
+  }
+
   const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');