@storybook/cli 6.5.0-alpha.6 → 6.5.0-alpha.60

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

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/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/esm/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/esm/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/esm/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);
 };