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

package/dist/esm/link.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.link = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _crossSpawn = require("cross-spawn");
+
+var _nodeLogger = require("@storybook/node-logger");
+
+var _scripts = require("./repro-generators/scripts");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const link = async ({
+  target,
+  local
+}) => {
+  const storybookDir = process.cwd();
+
+  try {
+    const packageJson = JSON.parse(_fsExtra.default.readFileSync('package.json', 'utf8'));
+    if (packageJson.name !== '@storybook/root') throw new Error();
+  } catch {
+    throw new Error('Expected to run link from the root of the storybook monorepo');
+  }
+
+  let reproDir = target;
+
+  let reproName = _path.default.basename(target);
+
+  if (!local) {
+    const reprosDir = _path.default.join(storybookDir, '../storybook-repros');
+
+    _nodeLogger.logger.info(`Ensuring directory ${reprosDir}`);
+
+    _fsExtra.default.ensureDirSync(reprosDir);
+
+    _nodeLogger.logger.info(`Cloning ${target}`);
+
+    await (0, _scripts.exec)(`git clone ${target}`, {
+      cwd: reprosDir
+    }); // Extract a repro name from url given as input (take the last part of the path and remove the extension)
+
+    reproName = _path.default.basename(target, _path.default.extname(target));
+    reproDir = _path.default.join(reprosDir, reproName);
+  }
+
+  const version = (0, _crossSpawn.sync)('yarn', ['--version'], {
+    cwd: reproDir,
+    stdio: 'pipe'
+  }).stdout.toString();
+
+  if (!/^[23]\./.test(version)) {
+    _nodeLogger.logger.warn(`🚨 Expected yarn 2 or 3 in ${reproDir}!`);
+
+    _nodeLogger.logger.warn('');
+
+    _nodeLogger.logger.warn('Please set it up with `yarn set version berry`,');
+
+    _nodeLogger.logger.warn(`then link '${reproDir}' with the '--local' flag.`);
+
+    return;
+  }
+
+  _nodeLogger.logger.info(`Linking ${reproDir}`);
+
+  await (0, _scripts.exec)(`yarn link --all ${storybookDir}`, {
+    cwd: reproDir
+  });
+
+  _nodeLogger.logger.info(`Installing ${reproName}`);
+
+  await (0, _scripts.exec)(`yarn install`, {
+    cwd: reproDir
+  }); // ⚠️ TODO: Fix peer deps in `@storybook/preset-create-react-app`
+
+  _nodeLogger.logger.info(`Magic stuff related to @storybook/preset-create-react-app, we need to fix peerDependencies`);
+
+  await (0, _scripts.exec)(`yarn add -D webpack-hot-middleware`, {
+    cwd: reproDir
+  });
+
+  _nodeLogger.logger.info(`Running ${reproName} storybook`);
+
+  await (0, _scripts.exec)(`yarn run storybook`, {
+    cwd: reproDir
+  });
+};
+
+exports.link = link;

package/dist/esm/migrate.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.migrate = migrate;
+
+require("core-js/modules/es.promise.js");
+
+var _codemod = require("@storybook/codemod");
+
+async function migrate(migration, {
+  configDir,
+  glob,
+  dryRun,
+  list,
+  rename,
+  logger,
+  parser
+}) {
+  if (list) {
+    (0, _codemod.listCodemods)().forEach(key => logger.log(key));
+  } else if (migration) {
+    await (0, _codemod.runCodemod)(migration, {
+      configDir,
+      glob,
+      dryRun,
+      logger,
+      rename,
+      parser
+    });
+  } else {
+    throw new Error('Migrate: please specify a migration name or --list');
+  }
+}

package/dist/esm/project_types.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
+
+var _semver = require("@storybook/semver");
+
+function ltMajor(versionRange, major) {
+  // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
+  return (0, _semver.validRange)(versionRange) && (0, _semver.minVersion)(versionRange).major < major;
+}
+
+function eqMajor(versionRange, major) {
+  // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
+  return (0, _semver.validRange)(versionRange) && (0, _semver.minVersion)(versionRange).major === major;
+} // Should match @storybook/<framework>
+
+
+let ProjectType;
+exports.ProjectType = ProjectType;
+
+(function (ProjectType) {
+  ProjectType["UNDETECTED"] = "UNDETECTED";
+  ProjectType["UNSUPPORTED"] = "UNSUPPORTED";
+  ProjectType["REACT_SCRIPTS"] = "REACT_SCRIPTS";
+  ProjectType["METEOR"] = "METEOR";
+  ProjectType["REACT"] = "REACT";
+  ProjectType["REACT_NATIVE"] = "REACT_NATIVE";
+  ProjectType["REACT_PROJECT"] = "REACT_PROJECT";
+  ProjectType["WEBPACK_REACT"] = "WEBPACK_REACT";
+  ProjectType["VUE"] = "VUE";
+  ProjectType["VUE3"] = "VUE3";
+  ProjectType["SFC_VUE"] = "SFC_VUE";
+  ProjectType["ANGULAR"] = "ANGULAR";
+  ProjectType["EMBER"] = "EMBER";
+  ProjectType["ALREADY_HAS_STORYBOOK"] = "ALREADY_HAS_STORYBOOK";
+  ProjectType["UPDATE_PACKAGE_ORGANIZATIONS"] = "UPDATE_PACKAGE_ORGANIZATIONS";
+  ProjectType["WEB_COMPONENTS"] = "WEB_COMPONENTS";
+  ProjectType["MITHRIL"] = "MITHRIL";
+  ProjectType["MARIONETTE"] = "MARIONETTE";
+  ProjectType["MARKO"] = "MARKO";
+  ProjectType["HTML"] = "HTML";
+  ProjectType["RIOT"] = "RIOT";
+  ProjectType["PREACT"] = "PREACT";
+  ProjectType["SVELTE"] = "SVELTE";
+  ProjectType["RAX"] = "RAX";
+  ProjectType["AURELIA"] = "AURELIA";
+  ProjectType["SERVER"] = "SERVER";
+})(ProjectType || (exports.ProjectType = ProjectType = {}));
+
+const SUPPORTED_FRAMEWORKS = ['react', 'react-native', 'vue', 'vue3', 'angular', 'mithril', 'riot', 'ember', 'marionette', 'marko', 'meteor', 'preact', 'svelte', 'rax', 'aurelia'];
+exports.SUPPORTED_FRAMEWORKS = SUPPORTED_FRAMEWORKS;
+let CoreBuilder; // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729
+
+exports.CoreBuilder = CoreBuilder;
+
+(function (CoreBuilder) {
+  CoreBuilder["Webpack4"] = "webpack4";
+  CoreBuilder["Webpack5"] = "webpack5";
+})(CoreBuilder || (exports.CoreBuilder = CoreBuilder = {}));
+
+let SupportedLanguage;
+exports.SupportedLanguage = SupportedLanguage;
+
+(function (SupportedLanguage) {
+  SupportedLanguage["JAVASCRIPT"] = "javascript";
+  SupportedLanguage["TYPESCRIPT"] = "typescript";
+})(SupportedLanguage || (exports.SupportedLanguage = SupportedLanguage = {}));
+
+/**
+ * Configuration to match a storybook preset template.
+ *
+ * This has to be an array sorted in order of specificity/priority.
+ * Reason: both REACT and WEBPACK_REACT have react as dependency,
+ * therefore WEBPACK_REACT has to come first, as it's more specific.
+ */
+const supportedTemplates = [{
+  preset: ProjectType.METEOR,
+  files: ['.meteor'],
+  matcherFunction: ({
+    files
+  }) => {
+    return files.every(Boolean);
+  }
+}, {
+  preset: ProjectType.SFC_VUE,
+  dependencies: {
+    'vue-loader': versionRange => ltMajor(versionRange, 16),
+    vuetify: versionRange => ltMajor(versionRange, 3)
+  },
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+}, {
+  preset: ProjectType.VUE,
+  // This Vue template only works with Vue or Nuxt under v3
+  dependencies: {
+    vue: versionRange => ltMajor(versionRange, 3),
+    nuxt: versionRange => ltMajor(versionRange, 3)
+  },
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+}, {
+  preset: ProjectType.VUE3,
+  dependencies: {
+    // This Vue template works with Vue 3
+    vue: versionRange => versionRange === 'next' || eqMajor(versionRange, 3)
+  },
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+}, {
+  preset: ProjectType.EMBER,
+  dependencies: ['ember-cli'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.REACT_PROJECT,
+  peerDependencies: ['react'],
+  matcherFunction: ({
+    peerDependencies
+  }) => {
+    return peerDependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.REACT_NATIVE,
+  dependencies: ['react-native', 'react-native-scripts'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+}, {
+  preset: ProjectType.REACT_SCRIPTS,
+  // For projects using a custom/forked `react-scripts` package.
+  files: ['/node_modules/.bin/react-scripts'],
+  // For standard CRA projects
+  dependencies: ['react-scripts'],
+  matcherFunction: ({
+    dependencies,
+    files
+  }) => {
+    return dependencies.every(Boolean) || files.every(Boolean);
+  }
+}, {
+  preset: ProjectType.WEBPACK_REACT,
+  dependencies: ['react', 'webpack'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.REACT,
+  dependencies: ['react'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.ANGULAR,
+  dependencies: ['@angular/core'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.WEB_COMPONENTS,
+  dependencies: ['lit-element', 'lit-html', 'lit'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+}, {
+  preset: ProjectType.MITHRIL,
+  dependencies: ['mithril'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.MARIONETTE,
+  dependencies: ['backbone.marionette'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.MARKO,
+  dependencies: ['marko'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.RIOT,
+  dependencies: ['riot'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.PREACT,
+  dependencies: ['preact'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.SVELTE,
+  dependencies: ['svelte'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.RAX,
+  dependencies: ['rax'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}, {
+  preset: ProjectType.AURELIA,
+  dependencies: ['aurelia-bootstrapper'],
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.every(Boolean);
+  }
+}]; // A TemplateConfiguration that matches unsupported frameworks
+// AnyFramework matchers can be added to this object to give
+// users an "Unsupported framework" message
+
+exports.supportedTemplates = supportedTemplates;
+const unsupportedTemplate = {
+  preset: ProjectType.UNSUPPORTED,
+  dependencies: {
+    // TODO(blaine): Remove when we support Nuxt 3
+    nuxt: versionRange => eqMajor(versionRange, 3)
+  },
+  matcherFunction: ({
+    dependencies
+  }) => {
+    return dependencies.some(Boolean);
+  }
+};
+exports.unsupportedTemplate = unsupportedTemplate;
+const notInstallableProjectTypes = [ProjectType.UNDETECTED, ProjectType.UNSUPPORTED, ProjectType.ALREADY_HAS_STORYBOOK, ProjectType.UPDATE_PACKAGE_ORGANIZATIONS];
+const installableProjectTypes = Object.values(ProjectType).filter(type => !notInstallableProjectTypes.includes(type)).map(type => type.toLowerCase());
+exports.installableProjectTypes = installableProjectTypes;

package/dist/esm/repro-generators/configs.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
+
+const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
+// and not look for a yarn workspace in parent directory
+'touch yarn.lock', 'yarn init --yes', args.length && `yarn add ${args.join(' ')}`].filter(Boolean).join(' && '); // #region  React
+
+
+const cra = {
+  framework: 'react',
+  name: 'cra',
+  version: 'latest',
+  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
+  'npx create-react-app@{{version}} {{appName}} --use-npm', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
+};
+exports.cra = cra;
+const cra_typescript = {
+  framework: 'react',
+  name: 'cra_typescript',
+  version: 'latest',
+  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
+  'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm'].join(' && ')
+};
+exports.cra_typescript = cra_typescript;
+const react = {
+  framework: 'react',
+  name: 'react',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom'),
+  additionalDeps: ['prop-types']
+};
+exports.react = react;
+const react_typescript = {
+  framework: 'react',
+  name: 'react_typescript',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom'),
+  typescript: true
+};
+exports.react_typescript = react_typescript;
+const webpack_react = {
+  framework: 'react',
+  name: 'webpack_react',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom', 'webpack@webpack-4')
+};
+exports.webpack_react = webpack_react;
+const react_in_yarn_workspace = {
+  framework: 'react',
+  name: 'react_in_yarn_workspace',
+  version: 'latest',
+  generator: ['mkdir {{appName}}', 'cd {{appName}}', 'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json', 'touch yarn.lock', `yarn add react react-dom`].join(' && ')
+}; // #endregion
+// #region Angular
+
+exports.react_in_yarn_workspace = react_in_yarn_workspace;
+const baseAngular = {
+  framework: 'angular',
+  name: 'angular',
+  version: 'latest',
+  generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
+};
+const angular10 = Object.assign({}, baseAngular, {
+  name: 'angular10',
+  version: 'v10-lts'
+});
+exports.angular10 = angular10;
+const angular11 = Object.assign({}, baseAngular, {
+  name: 'angular11',
+  version: 'v11-lts'
+});
+exports.angular11 = angular11;
+const angular = baseAngular; // #endregion
+// #region  web components
+
+exports.angular = angular;
+const web_components = {
+  framework: 'web-components',
+  name: 'web_components',
+  version: '2',
+  generator: fromDeps('lit-element')
+};
+exports.web_components = web_components;
+const web_components_typescript = Object.assign({}, web_components, {
+  name: 'web_components_typescript',
+  typescript: true
+});
+exports.web_components_typescript = web_components_typescript;
+const web_components_lit2 = Object.assign({}, web_components, {
+  version: 'next',
+  name: 'web_components_lit2',
+  generator: fromDeps('lit'),
+  typescript: true
+}); // #endregion
+// #region  vue
+
+exports.web_components_lit2 = web_components_lit2;
+const vue = {
+  framework: 'vue',
+  name: 'vue',
+  version: 'latest',
+  generator: [`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`, // Force npm otherwise we have a mess between Yarn 1 and Yarn 2
+  `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`].join(' && ')
+};
+exports.vue = vue;
+const vue3 = {
+  framework: 'vue3',
+  name: 'vue3',
+  version: 'next',
+  // Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here
+  generator: [`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`, // Force npm otherwise we have a mess between Yarn 1 and Yarn 2
+  `npx -p @vue/cli@^4 vue create {{appName}} --preset=__default_vue_3__ --packageManager=npm --no-git --force`].join(' && ')
+}; // #endregion
+
+exports.vue3 = vue3;
+const html = {
+  framework: 'html',
+  name: 'html',
+  version: 'latest',
+  generator: fromDeps(),
+  autoDetect: false
+};
+exports.html = html;
+const preact = {
+  framework: 'preact',
+  name: 'preact',
+  version: 'latest',
+  generator: 'npx preact-cli@{{version}} create preactjs-templates/default {{appName}} --install=false --git=false'
+};
+exports.preact = preact;
+const sfcVue = {
+  framework: 'vue',
+  name: 'sfcVue',
+  version: 'latest',
+  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4')
+};
+exports.sfcVue = sfcVue;
+const svelte = {
+  framework: 'svelte',
+  name: 'svelte',
+  version: 'latest',
+  generator: 'npx degit sveltejs/template {{appName}}'
+};
+exports.svelte = svelte;