@storybook/cli 6.5.0-alpha.9 → 6.5.0-beta.2

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) {
@@ -117,7 +168,13 @@ function isStorybookInstalled(dependencies, force) {
 
 function detectLanguage() {
   let language = _project_types.SupportedLanguage.JAVASCRIPT;
-  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  let packageJson;
+
+  try {
+    packageJson = (0, _jsPackageManager.readPackageJson)();
+  } catch (err) {//
+  }
+
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {
@@ -132,7 +189,13 @@ function detectLanguage() {
 }
 
 function detect(options = {}) {
-  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  let packageJson;
+
+  try {
+    packageJson = (0, _jsPackageManager.readPackageJson)();
+  } catch (err) {//
+  }
+
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {

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

package/dist/esm/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/esm/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/esm/frameworks/html/js/Header.js

@@ -26,6 +26,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
 
   const account = document.createElement('div');
   if (user) {
+    const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+    account.innerHTML = welcomeMessage;
     account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
   } else {
     account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));

package/dist/esm/frameworks/html/js/Header.stories.js

@@ -2,6 +2,11 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -13,7 +18,9 @@ const Template = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/html/js/Page.js

@@ -1,11 +1,38 @@
 import './page.css';
 import { createHeader } from './Header';
 
-export const createPage = ({ user, onLogout, onLogin, onCreateAccount }) => {
+export const createPage = () => {
   const article = document.createElement('article');
+  let user = null;
+  let header = null;
 
-  const header = createHeader({ onLogin, onLogout, onCreateAccount, user });
+  const rerenderHeader = () => {
+    const wrapper = document.getElementsByTagName('article')[0];
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+  };
+
+  const onLogin = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const onLogout = () => {
+    user = null;
+    rerenderHeader();
+  };
+
+  const onCreateAccount = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const createHeaderElement = () => {
+    return createHeader({ onLogin, onLogout, onCreateAccount, user });
+  };
+
+  header = createHeaderElement();
   article.appendChild(header);
+
   const section = `
   <section>
     <h2>Pages in Storybook</h2>

package/dist/esm/frameworks/html/js/Page.stories.js

@@ -1,24 +1,23 @@
+import { within, userEvent } from '@storybook/testing-library';
 import { createPage } from './Page';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
-const Template = (args) => createPage(args);
+const Template = () => createPage();
+
+export const LoggedOut = Template.bind({});
 
 export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/html/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/html/writing-tests/interaction-testing
+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/html/ts/Header.stories.ts

@@ -3,6 +3,11 @@ import { createHeader, HeaderProps } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },

package/dist/esm/frameworks/html/ts/Header.ts

@@ -2,7 +2,7 @@ import './header.css';
 import { createButton } from './Button';
 
 export interface HeaderProps {
-  user?: {};
+  user?: { name: string };
   onLogin: () => void;
   onLogout: () => void;
   onCreateAccount: () => void;
@@ -33,6 +33,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
 
   const account = document.createElement('div');
   if (user) {
+    const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+    account.innerHTML = welcomeMessage;
     account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
   } else {
     account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));

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

@@ -1,26 +1,24 @@
+import { within, userEvent } from '@storybook/testing-library';
 import { Story, Meta } from '@storybook/html';
 import { createPage } from './Page';
-import * as HeaderStories from './Header.stories';
-import { HeaderProps } from './Header';
 
 export default {
   title: 'Example/Page',
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
   },
 } as Meta;
 
-const Template: Story<HeaderProps> = (args) => createPage(args);
+const Template: Story = () => createPage();
+
+export const LoggedOut = Template.bind({});
 
 export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/html/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/html/writing-tests/interaction-testing
+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/html/ts/Page.ts

@@ -1,18 +1,42 @@
 import './page.css';
 import { createHeader } from './Header';
 
-export interface PageProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
+type User = {
+  name: string;
+};
 
-export const createPage = ({ user, onLogout, onLogin, onCreateAccount }: PageProps) => {
+export const createPage = () => {
   const article = document.createElement('article');
+  let user: User = null;
+  let header = null;
+
+  const rerenderHeader = () => {
+    const wrapper = document.getElementsByTagName('article')[0];
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+  };
+
+  const onLogin = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const onLogout = () => {
+    user = null;
+    rerenderHeader();
+  };
 
-  const header = createHeader({ onLogin, onLogout, onCreateAccount, user });
+  const onCreateAccount = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const createHeaderElement = () => {
+    return createHeader({ onLogin, onLogout, onCreateAccount, user });
+  };
+
+  header = createHeaderElement();
   article.appendChild(header);
+
   const section = `
   <section>
     <h2>Pages in Storybook</h2>

package/dist/esm/frameworks/preact/Header.jsx

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

package/dist/esm/frameworks/preact/Header.stories.jsx

@@ -5,6 +5,10 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
+    layout: 'fullscreen',
+  },
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -16,7 +20,9 @@ const Template = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});