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

package/dist/cjs/detect.js

@@ -1,195 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.detect = detect;
-exports.detectBuilder = detectBuilder;
-exports.detectFrameworkPreset = detectFrameworkPreset;
-exports.detectLanguage = detectLanguage;
-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");
-
-var _jsPackageManager = require("./js-package-manager");
-
-var _detectNextjs = require("./detect-nextjs");
-
-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;
-
-  const version = ((_packageJson$dependen = packageJson.dependencies) === null || _packageJson$dependen === void 0 ? void 0 : _packageJson$dependen[name]) || ((_packageJson$devDepen = packageJson.devDependencies) === null || _packageJson$devDepen === void 0 ? void 0 : _packageJson$devDepen[name]);
-
-  if (version && typeof matcher === 'function') {
-    return matcher(version);
-  }
-
-  return !!version;
-};
-
-const hasPeerDependency = (packageJson, name, matcher) => {
-  var _packageJson$peerDepe;
-
-  const version = (_packageJson$peerDepe = packageJson.peerDependencies) === null || _packageJson$peerDepe === void 0 ? void 0 : _packageJson$peerDepe[name];
-
-  if (version && typeof matcher === 'function') {
-    return matcher(version);
-  }
-
-  return !!version;
-};
-
-const getFrameworkPreset = (packageJson, framework) => {
-  const matcher = {
-    dependencies: [false],
-    peerDependencies: [false],
-    files: [false]
-  };
-  const {
-    preset,
-    files,
-    dependencies,
-    peerDependencies,
-    matcherFunction
-  } = framework;
-  let dependencySearches = [];
-
-  if (Array.isArray(dependencies)) {
-    dependencySearches = dependencies.map(name => [name, undefined]);
-  } else if (typeof dependencies === 'object') {
-    dependencySearches = Object.entries(dependencies);
-  } // Must check the length so the `[false]` isn't overwritten if `{ dependencies: [] }`
-
-
-  if (dependencySearches.length > 0) {
-    matcher.dependencies = dependencySearches.map(([name, matchFn]) => hasDependency(packageJson, name, matchFn));
-  }
-
-  let peerDependencySearches = [];
-
-  if (Array.isArray(peerDependencies)) {
-    peerDependencySearches = peerDependencies.map(name => [name, undefined]);
-  } else if (typeof peerDependencies === 'object') {
-    peerDependencySearches = Object.entries(peerDependencies);
-  } // Must check the length so the `[false]` isn't overwritten if `{ peerDependencies: [] }`
-
-
-  if (peerDependencySearches.length > 0) {
-    matcher.peerDependencies = peerDependencySearches.map(([name, matchFn]) => hasPeerDependency(packageJson, name, matchFn));
-  }
-
-  if (Array.isArray(files) && files.length > 0) {
-    matcher.files = files.map(name => _fs.default.existsSync(_path.default.join(process.cwd(), name)));
-  }
-
-  return matcherFunction(matcher) ? preset : null;
-};
-
-function detectFrameworkPreset(packageJson = {}) {
-  const result = [..._project_types.supportedTemplates, _project_types.unsupportedTemplate].find(framework => {
-    return getFrameworkPreset(packageJson, framework) !== null;
-  });
-  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, webpack5 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;
-  }
-
-  const nextJSVersion = (0, _detectNextjs.detectNextJS)(packageManager);
-
-  if (nextJSVersion) {
-    if (nextJSVersion >= 11) {
-      return _project_types.CoreBuilder.Webpack5;
-    }
-  } // Fallback to webpack5
-
-
-  return _project_types.CoreBuilder.Webpack5;
-}
-
-function isStorybookInstalled(dependencies, force) {
-  if (!dependencies) {
-    return false;
-  }
-
-  if (!force && dependencies.devDependencies) {
-    if (_project_types.SUPPORTED_RENDERERS.reduce((storybookPresent, framework) => storybookPresent || !!dependencies.devDependencies[`@storybook/${framework}`], false)) {
-      return _project_types.ProjectType.ALREADY_HAS_STORYBOOK;
-    }
-  }
-
-  return false;
-}
-
-function detectLanguage() {
-  let language = _project_types.SupportedLanguage.JAVASCRIPT;
-  let packageJson;
-
-  try {
-    packageJson = (0, _jsPackageManager.readPackageJson)();
-  } catch (err) {//
-  }
-
-  const bowerJson = (0, _helpers.getBowerJson)();
-
-  if (!packageJson && !bowerJson) {
-    return language;
-  }
-
-  if (hasDependency(packageJson || bowerJson, 'typescript')) {
-    language = _project_types.SupportedLanguage.TYPESCRIPT;
-  }
-
-  return language;
-}
-
-function detect(options = {}) {
-  let packageJson;
-
-  try {
-    packageJson = (0, _jsPackageManager.readPackageJson)();
-  } catch (err) {//
-  }
-
-  const bowerJson = (0, _helpers.getBowerJson)();
-
-  if (!packageJson && !bowerJson) {
-    return _project_types.ProjectType.UNDETECTED;
-  }
-
-  const storyBookInstalled = isStorybookInstalled(packageJson, options.force);
-
-  if (storyBookInstalled) {
-    return storyBookInstalled;
-  }
-
-  if (options.html) {
-    return _project_types.ProjectType.HTML;
-  }
-
-  return detectFrameworkPreset(packageJson || bowerJson);
-}

package/dist/cjs/dev.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dev = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _readPkgUp = require("read-pkg-up");
-
-var _nodeLogger = require("@storybook/node-logger");
-
-var _coreServer = require("@storybook/core-server");
-
-var _coreCommon = require("@storybook/core-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const dev = async cliOptions => {
-  process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-
-  try {
-    await (0, _coreServer.buildDevStandalone)(Object.assign({}, cliOptions, {
-      configDir: cliOptions.configDir || './.storybook',
-      configType: 'DEVELOPMENT',
-      ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
-      docsMode: !!cliOptions.docs,
-      cache: _coreCommon.cache,
-      packageJson: (0, _readPkgUp.sync)({
-        cwd: __dirname
-      }).packageJson
-    }));
-  } catch (error) {
-    var _error$compilation;
-
-    // this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header
-    _nodeLogger.instance.heading = '';
-
-    if (error instanceof Error) {
-      if (error.error) {
-        _nodeLogger.logger.error(error.error);
-      } else if (error.stats && error.stats.compilation.errors) {
-        error.stats.compilation.errors.forEach(e => _nodeLogger.logger.plain(e));
-      } else {
-        _nodeLogger.logger.error(error);
-      }
-    } else if ((_error$compilation = error.compilation) !== null && _error$compilation !== void 0 && _error$compilation.errors) {
-      error.compilation.errors.forEach(e => _nodeLogger.logger.plain(e));
-    }
-
-    _nodeLogger.logger.line();
-
-    _nodeLogger.logger.warn(error.close ? (0, _tsDedent.default)`
-          FATAL broken build!, will close the process,
-          Fix the error below and restart storybook.
-        ` : (0, _tsDedent.default)`
-          Broken build, fix the error above.
-          You may need to refresh the browser.
-        `);
-
-    _nodeLogger.logger.line();
-
-    process.exit(1);
-  }
-};
-
-exports.dev = dev;

package/dist/cjs/extract.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extract = extract;
-
-require("core-js/modules/es.promise.js");
-
-var _path = _interopRequireDefault(require("path"));
-
-var _fsExtra = require("fs-extra");
-
-var _puppeteerCore = _interopRequireDefault(require("puppeteer-core"));
-
-var _express = _interopRequireDefault(require("express"));
-
-var _getPort = _interopRequireDefault(require("get-port"));
-
-var _nodeLogger = require("@storybook/node-logger");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const read = async url => {
-  const browser = await usePuppeteerBrowser();
-  const page = await browser.newPage();
-  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 () => {
-    return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);
-  }));
-  setImmediate(() => {
-    browser.close();
-  });
-  return data;
-};
-
-const useLocation = async input => {
-  // check for input's existence
-  await (0, _fsExtra.stat)(_path.default.resolve(input));
-
-  if (input.match(/^http/)) {
-    return [input, async () => {}];
-  }
-
-  const app = (0, _express.default)();
-  app.use(_express.default.static(input));
-  const port = await (0, _getPort.default)();
-  return new Promise(resolve => {
-    const server = app.listen(port, () => {
-      const result = `http://localhost:${port}/iframe.html`;
-
-      _nodeLogger.logger.info(`connecting to: ${result}`);
-
-      resolve([result, server.close.bind(server)]);
-    });
-  });
-};
-
-const usePuppeteerBrowser = async () => {
-  const args = ['--no-sandbox ', '--disable-setuid-sandbox'];
-
-  try {
-    return await _puppeteerCore.default.launch({
-      args,
-      executablePath: process.env.SB_CHROMIUM_PATH
-    });
-  } catch (e) {
-    // it's not installed
-    _nodeLogger.logger.info('installing puppeteer...');
-
-    return new Promise((resolve, reject) => {
-      // eslint-disable-next-line global-require
-      require('child_process').exec(`node ${require.resolve(_path.default.join('puppeteer-core', 'install.js'))}`, error => error ? reject(error) : resolve(_puppeteerCore.default.launch({
-        args
-      })));
-    });
-  }
-};
-
-async function extract(input, targetPath) {
-  if (input && targetPath) {
-    const [location, exit] = await useLocation(input);
-    const data = await read(location);
-    await (0, _fsExtra.writeFile)(targetPath, JSON.stringify(data, null, 2));
-    await exit();
-  } else {
-    throw new Error('Extract: please specify a path where your built-storybook is (can be a public url) and a target directory');
-  }
-}

package/dist/cjs/frameworks/angular/Header.stories.ts

@@ -1,35 +0,0 @@
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import type { Story, Meta } from '@storybook/angular';
-
-import Button from './button.component';
-import Header from './header.component';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-      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) => ({
-  props: args,
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};

package/dist/cjs/frameworks/angular/Page.stories.ts

@@ -1,36 +0,0 @@
-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';
-
-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],
-      imports: [CommonModule],
-    }),
-  ],
-} as Meta;
-
-const Template: Story<Page> = (args: Page) => ({
-  props: args,
-});
-
-export const LoggedOut = Template.bind({});
-
-// 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/cjs/frameworks/aurelia/button.ts

@@ -1,28 +0,0 @@
-import { customElement, bindable } from 'aurelia';
-
-@customElement({
-  name: 'storybook-button-component',
-  template: `
-  <template>
-    <button click.delegate="onClick($event)">\${text}</button>
-    <style>
-    button {
-      border: 1px solid #eee;
-      border-radius: 3px;
-      background-color: #ffffff;
-      cursor: pointer;
-      font-size: 15px;
-      padding: 3px 10px;
-      margin: 10px;
-    }
-    </style>
-    </template>
-  `,
-})
-export default class Button {
-  @bindable()
-  text = '';
-
-  @bindable()
-  onClick: MouseEvent;
-}

package/dist/cjs/frameworks/html/ts/Page.ts

@@ -1,98 +0,0 @@
-import './page.css';
-import { createHeader } from './Header';
-
-type User = {
-  name: string;
-};
-
-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 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>
-    <p>
-      We recommend building UIs with a
-      <a
-        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
-        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.insertAdjacentHTML('beforeend', section);
-
-  return article;
-};

package/dist/cjs/frameworks/marko/1-Button.stories.js

@@ -1,24 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Button from './Button.marko';
-
-// More on default export: https://storybook.js.org/docs/marko/writing-stories/introduction#default-export
-export default {
-  title: 'Button',
-  // More on argTypes: https://storybook.js.org/docs/marko/api/argtypes
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/marko/writing-stories/introduction#using-args
-const Template = (args) => ({
-  component: Button,
-  input: args,
-});
-
-export const Text = Template.bind({});
-// More on args: https://storybook.js.org/docs/marko/writing-stories/args
-Text.args = {
-  children: 'Button',
-  onClick: action('onClick'),
-};

package/dist/cjs/frameworks/mithril/Button.stories.js

@@ -1,43 +0,0 @@
-import m from 'mithril';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/mithril/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/mithril/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/mithril/writing-stories/introduction#using-args
-const Template = ({ children, ...args }) => ({
-  view: () => m(Button, args, children),
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/mithril/writing-stories/args
-Primary.args = {
-  primary: true,
-  children: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  children: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  children: 'Button',
-};

package/dist/cjs/frameworks/mithril/Header.stories.js

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

package/dist/cjs/frameworks/mithril/Page.stories.js

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