@storybook/cli 7.0.0-alpha.31 → 7.0.0-alpha.34

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

@@ -1,307 +0,0 @@
-const _excluded = ["name", "version"];
-
-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; }
-
-/* eslint-disable camelcase */
-import path from 'path';
-import { readJSON, writeJSON, outputFile } from 'fs-extra';
-import shell from 'shelljs';
-import chalk from 'chalk';
-import { command } from 'execa';
-import { cra, cra_typescript } from './configs';
-import storybookVersions from '../versions';
-const logger = console;
-export const exec = async (command, options = {}, {
-  startMessage,
-  errorMessage,
-  dryRun
-} = {}) => {
-  if (startMessage) logger.info(startMessage);
-
-  if (dryRun) {
-    logger.info(`\n> ${command}\n`);
-    return undefined;
-  }
-
-  logger.debug(command);
-  return new Promise((resolve, reject) => {
-    const defaultOptions = {
-      silent: false
-    };
-    const child = shell.exec(command, Object.assign({}, defaultOptions, options, {
-      async: true,
-      silent: false
-    }));
-    child.stderr.pipe(process.stderr);
-    child.on('exit', code => {
-      if (code === 0) {
-        resolve(undefined);
-      } else {
-        logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
-        logger.log(errorMessage);
-        reject(new Error(`command exited with code: ${code}: `));
-      }
-    });
-  });
-};
-
-const addPackageResolutions = async ({
-  cwd
-}) => {
-  logger.info(`🔢 Adding package resolutions:`);
-  const packageJsonPath = path.join(cwd, 'package.json');
-  const packageJson = await readJSON(packageJsonPath);
-  packageJson.resolutions = storybookVersions;
-  await writeJSON(packageJsonPath, packageJson, {
-    spaces: 2
-  });
-};
-
-const addLocalPackageResolutions = async ({
-  cwd
-}) => {
-  logger.info(`🔢 Adding package resolutions:`);
-  const packageJsonPath = path.join(cwd, 'package.json');
-  const packageJson = await readJSON(packageJsonPath);
-  const workspaceDir = path.join(__dirname, '..', '..', '..', '..', '..');
-  const {
-    stdout
-  } = await command('yarn workspaces list --json', {
-    cwd: workspaceDir
-  });
-  console.log({
-    stdout,
-    workspaceDir
-  });
-  const workspaces = JSON.parse(`[${stdout.split('\n').join(',')}]`);
-  console.log({
-    workspaces
-  });
-  packageJson.resolutions = Object.keys(storybookVersions).reduce((acc, key) => {
-    return Object.assign({}, acc, {
-      [key]: path.join(workspaceDir, workspaces.find(item => item.name === key).location)
-    });
-  }, {});
-  await writeJSON(packageJsonPath, packageJson, {
-    spaces: 2
-  });
-};
-
-const installYarn2 = async ({
-  cwd,
-  pnp,
-  name
-}) => {
-  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`]; // FIXME: Some dependencies used by CRA aren't listed in its package.json
-  // Next line is a hack to remove as soon as CRA will have added these missing deps
-  // for details see https://github.com/facebook/create-react-app/pull/11751
-
-  if ([cra.name, cra_typescript.name].includes(name)) {
-    command.push(`yarn config set packageExtensions --json '{ "babel-preset-react-app@10.0.x": { "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.16.0" } } }'`);
-  }
-
-  await exec(command.join(' && '), {
-    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:6001/" } }'`, // 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 addAdditionalFiles = async ({
-  additionalFiles,
-  cwd
-}) => {
-  logger.info(`⤵️ Adding required files`);
-  await Promise.all(additionalFiles.map(async file => {
-    await outputFile(path.resolve(cwd, file.path), file.contents, {
-      encoding: 'UTF-8'
-    });
-  }));
-};
-
-const initStorybook = async ({
-  cwd,
-  autoDetect = true,
-  name,
-  e2e,
-  pnp
-}) => {
-  const flags = ['--yes'];
-
-  if (!autoDetect) {
-    flags.push(`--type ${name}`);
-  }
-
-  if (e2e) {
-    flags.push('--linkable');
-  }
-
-  if (pnp) {
-    flags.push('--use-pnp');
-  }
-
-  const sbCLICommand = `node ${path.join(__dirname, '../../cjs/generate')}`;
-  const command = `${sbCLICommand} init ${flags.join(' ')}`;
-  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
-  shell.rm('-f', path.join(cwd, 'package-lock.json'), path.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.resolve(cwd, 'tsconfig.json');
-    await 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 registryUrlNPM = url => {
-  const args = ['config', 'set', 'registry', url];
-  return exec(`npm ${args.join(' ')}`, {
-    cwd: path.join(process.cwd(), '..')
-  });
-};
-
-const registryUrlYarn = url => {
-  const args = ['config', 'set', 'npmRegistryServer', url];
-  return exec(`yarn ${args.join(' ')}`, {
-    cwd: path.join(__dirname, '..')
-  });
-};
-
-export const createAndInit = async (cwd, _ref, {
-  e2e,
-  pnp,
-  local,
-  registry
-}) => {
-  let {
-    name,
-    version
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const options = Object.assign({
-    name,
-    version,
-    appName: path.basename(cwd),
-    creationPath: path.join(cwd, '..'),
-    cwd,
-    e2e,
-    pnp
-  }, rest);
-  logger.log();
-  logger.info(`🏃 Starting for ${name} ${version}`);
-  logger.log();
-  await doTask(generate, Object.assign({}, options, {
-    cwd: options.creationPath
-  }));
-  await doTask(addAdditionalFiles, Object.assign({}, options, {
-    cwd
-  }), !!options.additionalFiles);
-
-  if (e2e) {
-    await doTask(addPackageResolutions, options);
-  }
-
-  if (local) {
-    await doTask(addLocalPackageResolutions, options);
-  }
-
-  await doTask(installYarn2, options);
-
-  if (e2e) {
-    await doTask(configureYarn2ForE2E, options, e2e);
-  }
-
-  await doTask(addTypescript, options, !!options.typescript);
-  await doTask(addRequiredDeps, options);
-
-  if (registry) {
-    await registryUrlNPM(registry);
-    await registryUrlYarn(registry);
-  }
-
-  await doTask(initStorybook, options);
-};

package/dist/esm/repro-next.js

@@ -1,163 +0,0 @@
-import prompts from 'prompts';
-import path from 'path';
-import chalk from 'chalk';
-import boxen from 'boxen';
-import { dedent } from 'ts-dedent';
-import degit from 'degit';
-import { existsSync } from 'fs-extra';
-import TEMPLATES from './repro-templates';
-const logger = console;
-
-const toChoices = c => ({
-  title: TEMPLATES[c].name,
-  value: c
-});
-
-export const reproNext = async ({
-  output: outputDirectory,
-  filterValue,
-  branch,
-  init
-}) => {
-  const keys = Object.keys(TEMPLATES); // get value from template and reduce through TEMPLATES to filter out the correct template
-
-  const choices = keys.reduce((acc, group) => {
-    const current = TEMPLATES[group];
-    const filterRegex = new RegExp(filterValue, 'i');
-
-    if (!filterValue) {
-      acc.push(group);
-      return acc;
-    }
-
-    if (current.name.match(filterRegex) || group.match(filterRegex) || current.expected.builder.match(filterRegex) || current.expected.framework.match(filterRegex) || current.expected.renderer.match(filterRegex)) {
-      acc.push(group);
-      return acc;
-    }
-
-    return acc;
-  }, []);
-
-  if (choices.length === 0) {
-    logger.info(boxen(dedent`
-          🔎 You filtered out all templates. 🔍
-          
-          After filtering all the templates with "${chalk.yellow(filterValue)}", we found no results. Please try again with a different filter.
-
-          Available templates:
-          ${keys.map(key => chalk.blue`- ${key}`).join('\n')}
-          `.trim(), {
-      borderStyle: 'round',
-      padding: 1,
-      borderColor: '#F1618C'
-    }));
-    process.exit(1);
-  }
-
-  let selectedTemplate = null;
-
-  if (choices.length === 1) {
-    [selectedTemplate] = choices;
-  } else {
-    logger.info(boxen(dedent`
-          🤗 Welcome to ${chalk.yellow('sb repro NEXT')}! 🤗 
-  
-          Create a ${chalk.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'
-    }));
-    selectedTemplate = await promptSelectedTemplate(choices);
-  }
-
-  const hasSelectedTemplate = !!(selectedTemplate ?? null);
-
-  if (!hasSelectedTemplate) {
-    logger.error('Somehow we got no templates. Please rerun this command!');
-    return;
-  }
-
-  const selectedConfig = TEMPLATES[selectedTemplate];
-
-  if (!selectedConfig) {
-    throw new Error('🚨 Repro: please specify a valid template type');
-  }
-
-  let selectedDirectory = outputDirectory;
-  const outputDirectoryName = outputDirectory || selectedTemplate;
-
-  if (selectedDirectory && existsSync(`${selectedDirectory}`)) {
-    logger.info(`⚠️  ${selectedDirectory} already exists! Overwriting...`);
-  }
-
-  if (!selectedDirectory) {
-    const {
-      directory
-    } = await prompts({
-      type: 'text',
-      message: 'Enter the output directory',
-      name: 'directory',
-      initial: outputDirectoryName,
-      validate: async directoryName => existsSync(directoryName) ? `${directoryName} already exists. Please choose another name.` : true
-    });
-    selectedDirectory = directory;
-  }
-
-  try {
-    const templateDestination = path.isAbsolute(selectedDirectory) ? selectedDirectory : path.join(process.cwd(), selectedDirectory);
-    logger.info(`🏃 Adding ${selectedConfig.name} into ${templateDestination}`);
-    logger.log('📦 Downloading repro template...');
-
-    try {
-      const templateType = init ? 'after-storybook' : 'before-storybook'; // Download the repro based on subfolder "after-storybook" and selected branch
-
-      await degit(`storybookjs/repro-templates-temp/${selectedTemplate}/${templateType}#${branch}`, {
-        force: true
-      }).clone(templateDestination);
-    } catch (err) {
-      logger.error(`🚨 Failed to download repro template: ${err.message}`);
-      throw err;
-    }
-
-    const initMessage = init ? chalk.yellow(`yarn storybook`) : `Recreate your setup, then ${chalk.yellow(`run npx storybook init`)}`;
-    logger.info(boxen(dedent`
-        🎉 Your Storybook reproduction project is ready to use! 🎉
-
-        ${chalk.yellow(`cd ${selectedDirectory}`)}
-        ${initMessage}
-
-        Once you've recreated the problem you're experiencing, please:
-        
-        1. Document any additional steps in ${chalk.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');
-    throw error;
-  }
-};
-
-async function promptSelectedTemplate(choices) {
-  const {
-    template
-  } = await prompts({
-    type: 'select',
-    message: '🌈 Select the template',
-    name: 'template',
-    choices: choices.map(toChoices)
-  });
-  return template || null;
-}

package/dist/esm/repro-templates.js

@@ -1,94 +0,0 @@
-const craTemplates = {
-  'cra/default-js': {
-    name: 'Create React App (Javascript)',
-    script: 'npx create-react-app .',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/cra',
-      renderer: '@storybook/react',
-      builder: '@storybook/builder-webpack5'
-    }
-  },
-  'cra/default-ts': {
-    name: 'Create React App (Typescript)',
-    script: 'npx create-react-app . --template typescript',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/cra',
-      renderer: '@storybook/react',
-      builder: '@storybook/builder-webpack5'
-    }
-  }
-};
-const reactViteTemplates = {
-  'react-vite/default-js': {
-    name: 'React Vite (JS)',
-    script: 'yarn create vite . --template react',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/react-vite',
-      renderer: '@storybook/react',
-      builder: '@storybook/builder-vite'
-    }
-  },
-  'react-vite/default-ts': {
-    name: 'React Vite (TS)',
-    script: 'yarn create vite . --template react-ts',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/react-vite',
-      renderer: '@storybook/react',
-      builder: '@storybook/builder-vite'
-    }
-  }
-};
-const vue3ViteTemplates = {
-  'vue3-vite/default-js': {
-    name: 'Vue3 Vite (JS)',
-    script: 'yarn create vite . --template vue',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/vue3-vite',
-      renderer: '@storybook/vue3',
-      builder: '@storybook/builder-vite'
-    }
-  },
-  'vue3-vite/default-ts': {
-    name: 'Vue3 Vite (TS)',
-    script: 'yarn create vite . --template vue-ts',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/vue3-vite',
-      renderer: '@storybook/vue3',
-      builder: '@storybook/builder-vite'
-    }
-  }
-};
-const svelteViteTemplates = {
-  'svelte-vite/default-js': {
-    name: 'Svelte Vite (JS)',
-    script: 'yarn create vite . --template svelte',
-    cadence: ['ci', 'daily', 'weekly'],
-    expected: {
-      framework: '@storybook/svelte-vite',
-      renderer: '@storybook/svelte',
-      builder: '@storybook/builder-vite'
-    }
-  }
-  /*
-   * I disabled this, because it was flaky
-   * TODO: we should fixd the instability and re-enable it
-   */
-  // 'svelte-vite/default-ts': {
-  //   name: 'Svelte Vite (TS)',
-  //   script: 'yarn create vite . --template svelte-ts',
-  //   cadence: ['ci', 'daily', 'weekly'],
-  //   expected: {
-  //     framework: '@storybook/svelte-vite',
-  //     renderer: '@storybook/svelte',
-  //     builder: '@storybook/builder-vite'
-  //   }
-  // }
-
-};
-export default Object.assign({}, craTemplates, reactViteTemplates, vue3ViteTemplates, svelteViteTemplates);