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

package/dist/modern/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;

package/dist/modern/repro-generators/scripts.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAndInit = exports.exec = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fsExtra = require("fs-extra");
+
+var _shelljs = _interopRequireDefault(require("shelljs"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const logger = console;
+const useLocalSbCli = true;
+
+const exec = async (command, options = {}, {
+  startMessage,
+  errorMessage
+} = {}) => {
+  if (startMessage) {
+    logger.info(startMessage);
+  }
+
+  logger.debug(command);
+  return new Promise((resolve, reject) => {
+    const defaultOptions = {
+      silent: true
+    };
+
+    _shelljs.default.exec(command, Object.assign({}, defaultOptions, options), (code, stdout, stderr) => {
+      if (code === 0) {
+        resolve(undefined);
+      } else {
+        logger.error(_chalk.default.red(`An error occurred while executing: \`${command}\``));
+        logger.error(`Command output was:${_chalk.default.yellow(`\n${stdout}\n${stderr}`)}`);
+
+        if (errorMessage) {
+          logger.error(errorMessage);
+        }
+
+        reject(new Error(`command exited with code: ${code}: `));
+      }
+    });
+  });
+};
+
+exports.exec = exec;
+
+const installYarn2 = async ({
+  cwd,
+  pnp
+}) => {
+  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`].join(' && ');
+  await exec(command, {
+    cwd
+  }, {
+    startMessage: `🧶 Installing Yarn 2`,
+    errorMessage: `🚨 Installing Yarn 2 failed`
+  });
+};
+
+const configureYarn2ForE2E = async ({
+  cwd
+}) => {
+  const command = [// ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
+  `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }'`, // Some required magic to be able to fetch deps from local registry
+  `yarn config set unsafeHttpWhitelist --json '["localhost"]'`, // Disable fallback mode to make sure everything is required correctly
+  `yarn config set pnpFallbackMode none`, // We need to be able to update lockfile when bootstrapping the examples
+  `yarn config set enableImmutableInstalls false`, // Discard all YN0013 - FETCH_NOT_CACHED messages
+  `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`].join(' && ');
+  await exec(command, {
+    cwd
+  }, {
+    startMessage: `🎛 Configuring Yarn 2`,
+    errorMessage: `🚨 Configuring Yarn 2 failed`
+  });
+};
+
+const generate = async ({
+  cwd,
+  name,
+  appName,
+  version,
+  generator
+}) => {
+  const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version);
+  await exec(command, {
+    cwd
+  }, {
+    startMessage: `🏗 Bootstrapping ${name} project (this might take a few minutes)`,
+    errorMessage: `🚨 Bootstrapping ${name} failed`
+  });
+};
+
+const initStorybook = async ({
+  cwd,
+  autoDetect = true,
+  name,
+  e2e
+}) => {
+  const type = autoDetect ? '' : `--type ${name}`;
+  const linkable = e2e ? '' : '--linkable';
+  const sbCLICommand = useLocalSbCli ? `node ${_path.default.join(__dirname, '../../esm/generate')}` : `yarn dlx -p @storybook/cli sb`;
+  const command = `${sbCLICommand} init --yes ${type} ${linkable}`;
+  await exec(command, {
+    cwd
+  }, {
+    startMessage: `🎨 Initializing Storybook with @storybook/cli`,
+    errorMessage: `🚨 Storybook initialization failed`
+  });
+};
+
+const addRequiredDeps = async ({
+  cwd,
+  additionalDeps
+}) => {
+  // Remove any lockfile generated without Yarn 2
+  _shelljs.default.rm('-f', _path.default.join(cwd, 'package-lock.json'), _path.default.join(cwd, 'yarn.lock'));
+
+  const command = additionalDeps && additionalDeps.length > 0 ? `yarn add -D ${additionalDeps.join(' ')}` : `yarn install`;
+  await exec(command, {
+    cwd
+  }, {
+    startMessage: `🌍 Adding needed deps & installing all deps`,
+    errorMessage: `🚨 Dependencies installation failed`
+  });
+};
+
+const addTypescript = async ({
+  cwd
+}) => {
+  logger.info(`👮 Adding typescript and tsconfig.json`);
+
+  try {
+    await exec(`yarn add -D typescript@latest`, {
+      cwd
+    });
+    const tsConfig = {
+      compilerOptions: {
+        baseUrl: '.',
+        esModuleInterop: true,
+        jsx: 'preserve',
+        skipLibCheck: true,
+        strict: true
+      },
+      include: ['src/*']
+    };
+
+    const tsConfigJsonPath = _path.default.resolve(cwd, 'tsconfig.json');
+
+    await (0, _fsExtra.writeJSON)(tsConfigJsonPath, tsConfig, {
+      encoding: 'utf8',
+      spaces: 2
+    });
+  } catch (e) {
+    logger.error(`🚨 Creating tsconfig.json failed`);
+    throw e;
+  }
+};
+
+const doTask = async (task, options, condition = true) => {
+  if (condition) {
+    await task(options);
+    logger.log();
+  }
+};
+
+const createAndInit = async (cwd, _ref, {
+  e2e,
+  pnp
+}) => {
+  let {
+    name,
+    version
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["name", "version"]);
+
+  const options = Object.assign({
+    name,
+    version,
+    appName: _path.default.basename(cwd),
+    creationPath: _path.default.join(cwd, '..'),
+    cwd,
+    e2e,
+    pnp
+  }, rest);
+  logger.log();
+  logger.info(`🏃 Starting for ${name} ${version}`);
+  logger.log();
+  logger.debug(options);
+  logger.log();
+  await doTask(generate, Object.assign({}, options, {
+    cwd: options.creationPath
+  }));
+  await doTask(installYarn2, options);
+  await doTask(configureYarn2ForE2E, options, e2e);
+  await doTask(addTypescript, options, !!options.typescript);
+  await doTask(addRequiredDeps, options);
+  await doTask(initStorybook, options);
+};
+
+exports.createAndInit = createAndInit;

package/dist/modern/repro.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.repro = void 0;
+
+require("core-js/modules/es.object.from-entries.js");
+
+require("core-js/modules/es.promise.js");
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _boxen = _interopRequireDefault(require("boxen"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _scripts = require("./repro-generators/scripts");
+
+var configs = _interopRequireWildcard(require("./repro-generators/configs"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+const TEMPLATES = configs; // Create a curate list of template because some of them only make sense in E2E
+// context, fon instance react_in_yarn_workspace
+
+const CURATED_TEMPLATES = Object.fromEntries(Object.entries(configs).filter(entry => entry[0] !== 'react_in_yarn_workspace'));
+const FRAMEWORKS = Object.values(CURATED_TEMPLATES).reduce((acc, cur) => {
+  acc[cur.framework] = [...(acc[cur.framework] || []), cur];
+  return acc;
+}, {});
+
+const repro = async ({
+  outputDirectory,
+  list,
+  template,
+  framework,
+  generator,
+  e2e,
+  pnp
+}) => {
+  logger.info((0, _boxen.default)((0, _tsDedent.default)`
+        🤗 Welcome to ${_chalk.default.yellow('sb repro')}! 🤗 
+
+        Create a ${_chalk.default.green('new project')} to minimally reproduce Storybook issues.
+        
+        1. select an environment that most closely matches your project setup.
+        2. select a location for the reproduction, outside of your project.
+        
+        After the reproduction is ready, we'll guide you through the next steps.
+        `.trim(), {
+    borderStyle: 'round',
+    padding: 1,
+    borderColor: '#F1618C'
+  }));
+
+  if (list) {
+    logger.info('🌈 Available templates');
+    Object.entries(FRAMEWORKS).forEach(([fmwrk, templates]) => {
+      logger.info(fmwrk);
+      templates.forEach(t => logger.info(`- ${t.name}`));
+
+      if (fmwrk === 'other') {
+        logger.info('- blank');
+      }
+    });
+    return;
+  }
+
+  let selectedTemplate = template;
+  let selectedFramework = framework;
+
+  if (!selectedTemplate && !generator) {
+    if (!selectedFramework) {
+      const {
+        framework: frameworkOpt
+      } = await (0, _prompts.default)({
+        type: 'select',
+        message: '🌈 Select the repro framework',
+        name: 'framework',
+        choices: Object.keys(FRAMEWORKS).map(f => ({
+          title: f,
+          value: f
+        }))
+      });
+      selectedFramework = frameworkOpt;
+    }
+
+    if (!selectedFramework) {
+      throw new Error('🚨 Repro: please select a framework!');
+    }
+
+    selectedTemplate = (await (0, _prompts.default)({
+      type: 'select',
+      message: '📝 Select the repro base template',
+      name: 'template',
+      choices: FRAMEWORKS[selectedFramework].map(f => ({
+        title: f.name,
+        value: f.name
+      }))
+    })).template;
+  }
+
+  const selectedConfig = !generator ? TEMPLATES[selectedTemplate] : {
+    name: 'custom',
+    version: 'custom',
+    generator
+  };
+
+  if (!selectedConfig) {
+    throw new Error('🚨 Repro: please specify a valid template type');
+  }
+
+  let selectedDirectory = outputDirectory;
+
+  if (!selectedDirectory) {
+    const {
+      directory
+    } = await (0, _prompts.default)({
+      type: 'text',
+      message: 'Enter the output directory',
+      name: 'directory'
+    });
+    selectedDirectory = directory;
+
+    if (_fs.default.existsSync(selectedDirectory)) {
+      throw new Error(`🚨 Repro: ${selectedDirectory} already exists`);
+    }
+  }
+
+  try {
+    const cwd = _path.default.isAbsolute(selectedDirectory) ? selectedDirectory : _path.default.join(process.cwd(), selectedDirectory);
+    logger.info(`🏃 Running ${selectedTemplate} into ${cwd}`);
+    await (0, _scripts.createAndInit)(cwd, selectedConfig, {
+      e2e: !!e2e,
+      pnp: !!pnp
+    });
+
+    if (!e2e) {
+      await initGitRepo(cwd);
+    }
+
+    logger.info((0, _boxen.default)((0, _tsDedent.default)`
+        🎉 Your Storybook reproduction project is ready to use! 🎉
+
+        ${_chalk.default.yellow(`cd ${selectedDirectory}`)}
+        ${_chalk.default.yellow(`yarn storybook`)}
+
+        Once you've recreated the problem you're experiencing, please:
+        
+        1. Document any additional steps in ${_chalk.default.cyan('README.md')}
+        2. Publish the repository to github
+        3. Link to the repro repository in your issue
+
+        Having a clean repro helps us solve your issue faster! 🙏
+      `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+  } catch (error) {
+    logger.error('🚨 Failed to create repro');
+  }
+};
+
+exports.repro = repro;
+
+const initGitRepo = async cwd => {
+  await (0, _scripts.exec)('git init', {
+    cwd
+  });
+  await (0, _scripts.exec)('echo "node_modules" >> .gitignore', {
+    cwd
+  });
+  await (0, _scripts.exec)('git add --all', {
+    cwd
+  });
+  await (0, _scripts.exec)('git commit -am "added storybook"', {
+    cwd
+  });
+  await (0, _scripts.exec)('git tag repro-base', {
+    cwd
+  });
+};

package/dist/modern/typings.d.js

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