@storybook/cli 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/modern/automigrate/helpers/getStorybookInfo.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookInfo = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _getStorybookConfiguration = require("./getStorybookConfiguration");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const viewLayers = {
+  '@storybook/react': 'react',
+  '@storybook/vue': 'vue',
+  '@storybook/vue3': 'vue3',
+  '@storybook/angular': 'angular',
+  '@storybook/html': 'html',
+  '@storybook/web-components': 'web-components',
+  '@storybook/polymer': 'polymer',
+  '@storybook/ember': 'ember',
+  '@storybook/marko': 'marko',
+  '@storybook/mithril': 'mithril',
+  '@storybook/riot': 'riot',
+  '@storybook/svelte': 'svelte',
+  '@storybook/preact': 'preact',
+  '@storybook/rax': 'rax'
+};
+const logger = console;
+
+const findDependency = ({
+  dependencies,
+  devDependencies,
+  peerDependencies
+}, predicate) => [Object.entries(dependencies || {}).find(predicate), Object.entries(devDependencies || {}).find(predicate), Object.entries(peerDependencies || {}).find(predicate)];
+
+const getFrameworkInfo = packageJson => {
+  // Pull the viewlayer from dependencies in package.json
+  const [dep, devDep, peerDep] = findDependency(packageJson, ([key]) => viewLayers[key]);
+  const [pkg, version] = dep || devDep || peerDep || [];
+  const framework = viewLayers[pkg];
+
+  if (dep && devDep && dep[0] === devDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`);
+  }
+
+  if (dep && peerDep && dep[0] === peerDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`);
+  }
+
+  return {
+    framework,
+    version
+  };
+};
+
+const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
+
+const findConfigFile = (prefix, configDir) => {
+  const filePrefix = _path.default.join(configDir, prefix);
+
+  const extension = validConfigExtensions.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
+  return extension ? `${filePrefix}.${extension}` : null;
+};
+
+const getConfigInfo = packageJson => {
+  var _packageJson$scripts;
+
+  let configDir = '.storybook';
+  const storybookScript = (_packageJson$scripts = packageJson.scripts) === null || _packageJson$scripts === void 0 ? void 0 : _packageJson$scripts.storybook;
+
+  if (storybookScript) {
+    const configParam = (0, _getStorybookConfiguration.getStorybookConfiguration)(storybookScript, '-c', '--config-dir');
+    if (configParam) configDir = configParam;
+  }
+
+  return {
+    configDir,
+    mainConfig: findConfigFile('main', configDir),
+    previewConfig: findConfigFile('preview', configDir),
+    managerConfig: findConfigFile('manager', configDir)
+  };
+};
+
+const getStorybookInfo = packageJson => {
+  const frameworkInfo = getFrameworkInfo(packageJson);
+  const configInfo = getConfigInfo(packageJson);
+  return Object.assign({}, frameworkInfo, configInfo);
+};
+
+exports.getStorybookInfo = getStorybookInfo;

package/dist/modern/automigrate/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.automigrate = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _boxen = _interopRequireDefault(require("boxen"));
+
+var _jsPackageManager = require("../js-package-manager");
+
+var _fixes = require("./fixes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-await-in-loop */
+const logger = console;
+
+const automigrate = async ({
+  fixId,
+  dryRun,
+  yes
+}) => {
+  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager();
+
+  const filtered = fixId ? _fixes.fixes.filter(f => f.id === fixId) : _fixes.fixes;
+
+  for (let i = 0; i < filtered.length; i += 1) {
+    const f = _fixes.fixes[i];
+    logger.info(`🔎 checking '${_chalk.default.cyan(f.id)}'`);
+    const result = await f.check({
+      packageManager
+    });
+
+    if (result) {
+      const message = f.prompt(result);
+      logger.info((0, _boxen.default)(message, {
+        borderStyle: 'round',
+        padding: 1,
+        borderColor: '#F1618C'
+      }));
+      const runAnswer = yes || dryRun ? {
+        fix: false
+      } : await (0, _prompts.default)([{
+        type: 'confirm',
+        name: 'fix',
+        message: `Do you want to run the '${_chalk.default.cyan(f.id)}' fix on your project?`
+      }]);
+
+      if (runAnswer.fix) {
+        await f.run({
+          result,
+          packageManager,
+          dryRun
+        });
+        logger.info(`✅ fixed ${_chalk.default.cyan(f.id)}`);
+      } else {
+        logger.info(`Skipping the ${_chalk.default.cyan(f.id)} fix.`);
+        logger.info();
+        logger.info(`If you change your mind, run '${_chalk.default.cyan('npx sb@next fix')}'`);
+      }
+    }
+  }
+};
+
+exports.automigrate = automigrate;

package/dist/modern/automigrate/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/modern/babel-config.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateStorybookBabelConfig = exports.generateStorybookBabelConfigInCWD = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _fsExtra = require("fs-extra");
+
+var _nodeLogger = require("@storybook/node-logger");
+
+var _coreCommon = require("@storybook/core-common");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const generateStorybookBabelConfigInCWD = async () => {
+  const target = process.cwd();
+  return generateStorybookBabelConfig({
+    target
+  });
+};
+
+exports.generateStorybookBabelConfigInCWD = generateStorybookBabelConfigInCWD;
+
+const generateStorybookBabelConfig = async ({
+  target
+}) => {
+  _nodeLogger.logger.info(`Generating the storybook default babel config at ${target}`);
+
+  const config = (0, _coreCommon.getStorybookBabelConfig)({
+    local: true
+  });
+  const contents = JSON.stringify(config, null, 2);
+  const fileName = '.babelrc.json';
+
+  const location = _path.default.join(target, fileName);
+
+  const exists = await (0, _fsExtra.access)(location).then(() => true, () => false);
+
+  if (exists) {
+    const {
+      overwrite
+    } = await (0, _prompts.default)({
+      type: 'confirm',
+      initial: true,
+      name: 'overwrite',
+      message: `${fileName} already exists. Would you like overwrite it?`
+    });
+
+    if (overwrite === false) {
+      _nodeLogger.logger.warn(`Cancelled, babel config file was NOT written to file-system.`);
+
+      return;
+    }
+  }
+
+  _nodeLogger.logger.info(`Writing file to ${location}`);
+
+  await (0, _fsExtra.writeFile)(location, contents);
+};
+
+exports.generateStorybookBabelConfig = generateStorybookBabelConfig;

package/dist/modern/detect.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectFrameworkPreset = detectFrameworkPreset;
+exports.isStorybookInstalled = isStorybookInstalled;
+exports.detectLanguage = detectLanguage;
+exports.detect = detect;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _project_types = require("./project_types");
+
+var _helpers = require("./helpers");
+
+var _jsPackageManager = require("./js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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;
+}
+
+function isStorybookInstalled(dependencies, force) {
+  if (!dependencies) {
+    return false;
+  }
+
+  if (!force && dependencies.devDependencies) {
+    if (_project_types.SUPPORTED_FRAMEWORKS.reduce((storybookPresent, framework) => storybookPresent || !!dependencies.devDependencies[`@storybook/${framework}`], false)) {
+      return _project_types.ProjectType.ALREADY_HAS_STORYBOOK;
+    }
+
+    if (dependencies.devDependencies['@kadira/storybook'] || dependencies.devDependencies['@kadira/react-native-storybook']) {
+      return _project_types.ProjectType.UPDATE_PACKAGE_ORGANIZATIONS;
+    }
+  }
+
+  return false;
+}
+
+function detectLanguage() {
+  let language = _project_types.SupportedLanguage.JAVASCRIPT;
+  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  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 = {}) {
+  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  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/modern/extract.js

@@ -0,0 +1,91 @@
+"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);
+  await page.waitForFunction('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);
+  }));
+  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/modern/frameworks/common/Introduction.stories.mdx

@@ -0,0 +1,211 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/dist/modern/frameworks/common/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>