@storybook/cli 7.0.0-alpha.4 → 7.0.0-alpha.41

package/dist/esm/frameworks/web-components/js/Header.js

@@ -1,45 +0,0 @@
-import { html } from 'lit-html';
-
-import { Button } from './Button';
-import './header.css';
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
-  <header>
-    <div class="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        ${user
-          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
-          : html`${Button({
-              size: 'small',
-              onClick: onLogin,
-              label: 'Log in',
-            })}
-            ${Button({
-              primary: true,
-              size: 'small',
-              onClick: onCreateAccount,
-              label: 'Sign up',
-            })}`}
-      </div>
-    </div>
-  </header>
-`;

package/dist/esm/frameworks/web-components/js/Header.stories.js

@@ -1,15 +0,0 @@
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-};
-
-const Template = (args) => Header(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};

package/dist/esm/frameworks/web-components/js/Page.js

@@ -1,61 +0,0 @@
-import { html } from 'lit-html';
-import { Header } from './Header';
-import './page.css';
-
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
-  <article>
-    ${Header({
-      user,
-      onLogin,
-      onLogout,
-      onCreateAccount,
-    })}
-
-    <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 class="tip-wrapper">
-        <span class="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/web-components/js/Page.stories.js

@@ -1,19 +0,0 @@
-import { Page } from './Page';
-import * as HeaderStories from './Header.stories';
-
-export default {
-  title: 'Example/Page',
-};
-
-const Template = (args) => Page(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
-};

package/dist/esm/frameworks/web-components/ts/Button.stories.ts

@@ -1,43 +0,0 @@
-import { Story, Meta } from '@storybook/web-components';
-import { Button, ButtonProps } from './Button';
-
-// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-} as Meta;
-
-// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template: Story<Partial<ButtonProps>> = (args) => Button(args);
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};

package/dist/esm/frameworks/web-components/ts/Button.ts

@@ -1,43 +0,0 @@
-import { html } from 'lit-html';
-import { styleMap } from 'lit-html/directives/style-map.js';
-import './button.css';
-
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary, backgroundColor = null, size, label, onClick }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-
-  return html`
-    <button
-      type="button"
-      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
-      style=${styleMap({ backgroundColor })}
-      @click=${onClick}
-    >
-      ${label}
-    </button>
-  `;
-};

package/dist/esm/frameworks/web-components/ts/Header.ts

@@ -1,52 +0,0 @@
-import { html } from 'lit-html';
-
-import { Button } from './Button';
-import './header.css';
-
-export interface HeaderProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
-  <header>
-    <div class="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        ${user
-          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
-          : html`${Button({
-              size: 'small',
-              onClick: onLogin,
-              label: 'Log in',
-            })}
-            ${Button({
-              primary: true,
-              size: 'small',
-              onClick: onCreateAccount,
-              label: 'Sign up',
-            })}`}
-      </div>
-    </div>
-  </header>
-`;

package/dist/esm/frameworks/web-components/ts/Page.stories.ts

@@ -1,20 +0,0 @@
-import { Story, Meta } from '@storybook/web-components';
-import { Page, PageProps } from './Page';
-import * as HeaderStories from './Header.stories';
-
-export default {
-  title: 'Example/Page',
-} as Meta;
-
-const Template: Story<Partial<PageProps>> = (args) => Page(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
-};

package/dist/esm/frameworks/web-components/ts/Page.ts

@@ -1,68 +0,0 @@
-import { html } from 'lit-html';
-import { Header } from './Header';
-import './page.css';
-
-export interface PageProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
-
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html`
-  <article>
-    ${Header({
-      user,
-      onLogin,
-      onLogout,
-      onCreateAccount,
-    })}
-
-    <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 class="tip-wrapper">
-        <span class="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/generate.js

@@ -1,201 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.symbol.description.js");
-
-var _commander = _interopRequireDefault(require("commander"));
-
-var _path = _interopRequireDefault(require("path"));
-
-var _chalk = _interopRequireDefault(require("chalk"));
-
-var _envinfo = _interopRequireDefault(require("envinfo"));
-
-var _leven = _interopRequireDefault(require("leven"));
-
-var _readPkgUp = require("read-pkg-up");
-
-var _nodeLogger = require("@storybook/node-logger");
-
-var _initiate = require("./initiate");
-
-var _add = require("./add");
-
-var _migrate = require("./migrate");
-
-var _extract = require("./extract");
-
-var _upgrade = require("./upgrade");
-
-var _repro = require("./repro");
-
-var _link = require("./link");
-
-var _automigrate = require("./automigrate");
-
-var _babelConfig = require("./babel-config");
-
-var _dev = require("./dev");
-
-var _build = require("./build");
-
-var _utils = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const pkg = (0, _readPkgUp.sync)({
-  cwd: __dirname
-}).packageJson;
-const consoleLogger = console;
-
-_commander.default.option('--disable-telemetry', 'disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
-process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false');
-
-_commander.default.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
-
-_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
-
-_commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
-
-_commander.default.command('babelrc').description('generate the default storybook babel config into your current working directory').action(() => (0, _babelConfig.generateStorybookBabelConfigInCWD)());
-
-_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => (0, _upgrade.upgrade)(options));
-
-_commander.default.command('info').description('Prints debugging information about the local environment').action(() => {
-  consoleLogger.log(_chalk.default.bold('\nEnvironment Info:'));
-
-  _envinfo.default.run({
-    System: ['OS', 'CPU'],
-    Binaries: ['Node', 'Yarn', 'npm'],
-    Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-    npmPackages: '@storybook/*',
-    npmGlobalPackages: '@storybook/*'
-  }).then(consoleLogger.log);
-});
-
-_commander.default.command('migrate [migration]').description('Run a Storybook codemod migration on your source files').option('-l --list', 'List available migrations').option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-n --dry-run', 'Dry run: verify the migration exists and show the files to which it will be applied').option('-r --rename <from-to>', 'Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"').action((migration, {
-  configDir,
-  glob,
-  dryRun,
-  list,
-  rename,
-  parser
-}) => {
-  (0, _migrate.migrate)(migration, {
-    configDir,
-    glob,
-    dryRun,
-    list,
-    rename,
-    parser,
-    logger: consoleLogger
-  }).catch(err => {
-    _nodeLogger.logger.error(err);
-
-    process.exit(1);
-  });
-});
-
-_commander.default.command('extract [location] [output]').description('extract stories.json from a built version').action((location = 'storybook-static', output = _path.default.join(location, 'stories.json')) => (0, _extract.extract)(location, output).catch(e => {
-  _nodeLogger.logger.error(e);
-
-  process.exit(1);
-}));
-
-_commander.default.command('repro [outputDirectory]').description('Create a reproduction from a set of possible templates').option('-f --renderer <renderer>', 'Filter on given renderer').option('-t --template <template>', 'Use the given template').option('-l --list', 'List available templates').option('-g --generator <generator>', 'Use custom generator command').option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one").option('--local', "use storybook's local packages instead of yarn's registry").option('--e2e', 'Used in e2e context').action((outputDirectory, {
-  renderer,
-  template,
-  list,
-  e2e,
-  generator,
-  pnp,
-  local
-}) => (0, _repro.repro)({
-  outputDirectory,
-  renderer,
-  template,
-  list,
-  e2e,
-  local,
-  generator,
-  pnp
-}).catch(e => {
-  _nodeLogger.logger.error(e);
-
-  process.exit(1);
-}));
-
-_commander.default.command('link <repo-url-or-directory>').description('Pull down a repro from a URL (or a local directory), link it, and run storybook').option('--local', 'Link a local directory already in your file system').action((target, {
-  local
-}) => (0, _link.link)({
-  target,
-  local
-}).catch(e => {
-  _nodeLogger.logger.error(e);
-
-  process.exit(1);
-}));
-
-_commander.default.command('automigrate [fixId]').description('Check storybook for known problems or migrations and apply fixes').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for fixes, do not actually run them').action((fixId, options) => (0, _automigrate.automigrate)(Object.assign({
-  fixId
-}, options)).catch(e => {
-  _nodeLogger.logger.error(e);
-
-  process.exit(1);
-}));
-
-_commander.default.command('dev').option('-p, --port <number>', 'Port to run Storybook', str => parseInt(str, 10)).option('-h, --host <string>', 'Host to run Storybook').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--https', 'Serve Storybook over HTTPS. Note: You must provide your own certificate information.').option('--ssl-ca <ca>', 'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)', _utils.parseList).option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)').option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)').option('--smoke-test', 'Exit after successful start').option('--ci', "CI mode (skip interactive prompts, don't open browser)").option('--no-open', 'Do not open Storybook automatically in the browser').option('--loglevel <level>', 'Control level of logging during build').option('--quiet', 'Suppress verbose build output').option('--no-version-updates', 'Suppress update check', true).option('--no-release-notes', 'Suppress automatic redirects to the release notes after upgrading', true).option('--no-manager-cache', 'Do not cache the manager UI').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').action(options => {
-  _nodeLogger.logger.setLevel(_commander.default.loglevel);
-
-  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}`) + _chalk.default.reset('\n')); // The key is the field created in `program` variable for
-  // each command line argument. Value is the env variable.
-
-  (0, _utils.getEnvConfig)(_commander.default, {
-    port: 'SBCONFIG_PORT',
-    host: 'SBCONFIG_HOSTNAME',
-    staticDir: 'SBCONFIG_STATIC_DIR',
-    configDir: 'SBCONFIG_CONFIG_DIR',
-    ci: 'CI'
-  });
-
-  if (typeof _commander.default.port === 'string' && _commander.default.port.length > 0) {
-    _commander.default.port = parseInt(_commander.default.port, 10);
-  }
-
-  (0, _dev.dev)(Object.assign({}, options, {
-    packageJson: pkg
-  }));
-});
-
-_commander.default.command('build').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-o, --output-dir <dir-name>', 'Directory where to store built files').option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--quiet', 'Suppress verbose build output').option('--loglevel <level>', 'Control level of logging during build').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').option('--no-manager-cache', 'Do not cache the manager UI').action(options => {
-  process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-
-  _nodeLogger.logger.setLevel(_commander.default.loglevel);
-
-  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}\n`)); // The key is the field created in `program` variable for
-  // each command line argument. Value is the env variable.
-
-  (0, _utils.getEnvConfig)(_commander.default, {
-    staticDir: 'SBCONFIG_STATIC_DIR',
-    outputDir: 'SBCONFIG_OUTPUT_DIR',
-    configDir: 'SBCONFIG_CONFIG_DIR'
-  });
-  (0, _build.build)(Object.assign({}, options, {
-    packageJson: pkg
-  }));
-});
-
-_commander.default.on('command:*', ([invalidCmd]) => {
-  consoleLogger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
-
-  const availableCommands = _commander.default.commands.map(cmd => cmd._name);
-
-  const suggestion = availableCommands.find(cmd => (0, _leven.default)(cmd, invalidCmd) < 3);
-
-  if (suggestion) {
-    consoleLogger.info(`\n Did you mean ${suggestion}?`);
-  }
-
-  process.exit(1);
-});
-
-_commander.default.usage('<command> [options]').version(pkg.version).parse(process.argv);