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

package/dist/esm/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/esm/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/esm/automigrate/types.js

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

package/dist/esm/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/esm/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/esm/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/esm/frameworks/angular/Button.stories.ts

@@ -0,0 +1,42 @@
+// 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 Button from './button.component';
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story<Button> = (args: Button) => ({
+  props: args,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/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/angular/Header.stories.ts

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

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

@@ -0,0 +1,34 @@
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
+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,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button, Header],
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+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,
+};

package/dist/esm/frameworks/angular/User.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface User {}

package/dist/esm/frameworks/angular/button.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-button',
+  template: ` <button
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+    [ngStyle]="{ 'background-color': backgroundColor }"
+  >
+    {{ label }}
+  </button>`,
+  styleUrls: ['./button.css'],
+})
+export default class ButtonComponent {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  @Input()
+  primary = false;
+
+  /**
+   * What background color to use
+   */
+  @Input()
+  backgroundColor?: string;
+
+  /**
+   * How large should the button be?
+   */
+  @Input()
+  size: 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Button contents
+   *
+   * @required
+   */
+  @Input()
+  label = 'Button';
+
+  /**
+   * Optional click handler
+   */
+  @Output()
+  onClick = new EventEmitter<Event>();
+
+  public get classes(): string[] {
+    const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+    return ['storybook-button', `storybook-button--${this.size}`, mode];
+  }
+}