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

package/dist/modern/generators/baseGenerator.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baseGenerator = baseGenerator;
+
+require("core-js/modules/es.promise.js");
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _coreCommon = require("@storybook/core-common");
+
+var _project_types = require("../project_types");
+
+var _helpers = require("../helpers");
+
+var _configure = require("./configure");
+
+var _jsPackageManager = require("../js-package-manager");
+
+var _babelConfig = require("../babel-config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultOptions = {
+  extraPackages: [],
+  extraAddons: [],
+  staticDir: undefined,
+  addScripts: true,
+  addComponents: true,
+  addBabel: true,
+  addESLint: false,
+  extraMain: undefined,
+  extensions: undefined,
+  commonJs: false
+};
+
+const builderDependencies = builder => {
+  switch (builder) {
+    case _project_types.CoreBuilder.Webpack4:
+      return [];
+
+    case _project_types.CoreBuilder.Webpack5:
+      return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+
+    default:
+      return [builder];
+  }
+};
+
+const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
+
+async function baseGenerator(packageManager, npmOptions, {
+  language,
+  builder
+}, framework, options = defaultOptions) {
+  const {
+    extraAddons,
+    extraPackages,
+    staticDir,
+    addScripts,
+    addComponents,
+    addBabel,
+    addESLint,
+    extraMain,
+    extensions
+  } = Object.assign({}, defaultOptions, options); // added to main.js
+  // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
+
+  const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
+
+  const addonPackages = [...addons, '@storybook/addon-actions'];
+  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
+  const files = await _fsExtra.default.readdir(process.cwd());
+  const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
+  const packageJson = packageManager.retrievePackageJson();
+  const installedDependencies = new Set(Object.keys(packageJson.dependencies));
+  const frameworkPackage = `@storybook/${framework}`;
+  const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const versionedPackages = await packageManager.getVersionedPackages(...packages);
+  const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
+    core: {
+      builder
+    }
+  }, extraMain) : extraMain;
+  (0, _configure.configure)(framework, Object.assign({
+    framework: frameworkPackage,
+    addons: [...addons, ...stripVersions(extraAddons)],
+    extensions,
+    commonJs: options.commonJs
+  }, mainOptions));
+
+  if (addComponents) {
+    (0, _helpers.copyComponents)(framework, language);
+  }
+
+  const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
+
+  if (isNewFolder) {
+    babelDependencies.push(...(0, _coreCommon.getStorybookBabelDependencies)());
+    await (0, _babelConfig.generateStorybookBabelConfigInCWD)();
+  }
+
+  packageManager.addDependencies(Object.assign({}, npmOptions, {
+    packageJson
+  }), [...versionedPackages, ...babelDependencies]);
+
+  if (addScripts) {
+    packageManager.addStorybookCommandInScripts({
+      port: 6006,
+      staticFolder: staticDir
+    });
+  }
+
+  if (addESLint) {
+    packageManager.addESLintConfig();
+  }
+}

package/dist/modern/generators/configure.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configure = configure;
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+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; }
+
+function configureMain(_ref) {
+  let {
+    addons,
+    extensions = ['js', 'jsx', 'ts', 'tsx'],
+    commonJs = false
+  } = _ref,
+      custom = _objectWithoutPropertiesLoose(_ref, ["addons", "extensions", "commonJs"]);
+
+  const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
+  const config = Object.assign({
+    stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
+    addons
+  }, custom); // replace escaped values and delimiters
+
+  const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/, '').replace(/\\n/g, '\r\n')}`;
+
+  _fsExtra.default.ensureDirSync('./.storybook');
+
+  _fsExtra.default.writeFileSync(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, stringified, {
+    encoding: 'utf8'
+  });
+}
+
+const frameworkToPreviewParts = {
+  angular: {
+    prefix: (0, _tsDedent.default)`
+      import { setCompodocJson } from "@storybook/addon-docs/angular";
+      import docJson from "../documentation.json";
+      setCompodocJson(docJson);
+      
+      `.trimStart(),
+    extraParameters: 'docs: { inlineStories: true },'
+  }
+};
+
+function configurePreview(framework, commonJs) {
+  const {
+    prefix = '',
+    extraParameters = ''
+  } = frameworkToPreviewParts[framework] || {};
+  const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; // If the framework template included a preview then we have nothing to do
+
+  if (_fsExtra.default.existsSync(previewPath)) {
+    return;
+  }
+
+  const preview = (0, _tsDedent.default)`
+    ${prefix}
+    export const parameters = {
+      actions: { argTypesRegex: "^on[A-Z].*" },
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/,
+        },
+      },
+      ${extraParameters}
+    }`.replace('  \n', '').trim();
+
+  _fsExtra.default.writeFileSync(previewPath, preview, {
+    encoding: 'utf8'
+  });
+}
+
+function configure(framework, mainOptions) {
+  _fsExtra.default.ensureDirSync('./.storybook');
+
+  configureMain(mainOptions);
+  configurePreview(framework, mainOptions.commonJs);
+}

package/dist/modern/helpers.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBowerJson = getBowerJson;
+exports.readFileAsJson = readFileAsJson;
+exports.paddedLog = paddedLog;
+exports.getChars = getChars;
+exports.codeLog = codeLog;
+exports.getBabelDependencies = getBabelDependencies;
+exports.addToDevDependenciesIfNotPresent = addToDevDependenciesIfNotPresent;
+exports.copyTemplate = copyTemplate;
+exports.copyComponents = copyComponents;
+exports.commandLog = exports.writeFileAsJson = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _semver = require("@storybook/semver");
+
+var _stripJsonComments = _interopRequireDefault(require("strip-json-comments"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-param-reassign */
+const logger = console;
+
+function getBowerJson() {
+  const bowerJsonPath = _path.default.resolve('bower.json');
+
+  if (!_fs.default.existsSync(bowerJsonPath)) {
+    return false;
+  }
+
+  const jsonContent = _fs.default.readFileSync(bowerJsonPath, 'utf8');
+
+  return JSON.parse(jsonContent);
+}
+
+function readFileAsJson(jsonPath, allowComments) {
+  const filePath = _path.default.resolve(jsonPath);
+
+  if (!_fs.default.existsSync(filePath)) {
+    return false;
+  }
+
+  const fileContent = _fs.default.readFileSync(filePath, 'utf8');
+
+  const jsonContent = allowComments ? (0, _stripJsonComments.default)(fileContent) : fileContent;
+
+  try {
+    return JSON.parse(jsonContent);
+  } catch (e) {
+    logger.error(_chalk.default.red(`Invalid json in file: ${filePath}`));
+    throw e;
+  }
+}
+
+const writeFileAsJson = (jsonPath, content) => {
+  const filePath = _path.default.resolve(jsonPath);
+
+  if (!_fs.default.existsSync(filePath)) {
+    return false;
+  }
+
+  _fs.default.writeFileSync(filePath, `${JSON.stringify(content, null, 2)}\n`);
+
+  return true;
+};
+
+exports.writeFileAsJson = writeFileAsJson;
+
+const commandLog = message => {
+  process.stdout.write(_chalk.default.cyan(' • ') + message); // Need `void` to be able to use this function in a then of a Promise<void>
+
+  return (errorMessage, errorInfo) => {
+    if (errorMessage) {
+      process.stdout.write(`. ${_chalk.default.red('✖')}\n`);
+      logger.error(`\n     ${_chalk.default.red(errorMessage)}`);
+
+      if (!errorInfo) {
+        return;
+      }
+
+      const newErrorInfo = errorInfo.split('\n').map(line => `     ${_chalk.default.dim(line)}`).join('\n');
+      logger.error(`${newErrorInfo}\n`);
+      return;
+    }
+
+    process.stdout.write(`. ${_chalk.default.green('✓')}\n`);
+  };
+};
+
+exports.commandLog = commandLog;
+
+function paddedLog(message) {
+  const newMessage = message.split('\n').map(line => `    ${line}`).join('\n');
+  logger.log(newMessage);
+}
+
+function getChars(char, amount) {
+  let line = '';
+
+  for (let lc = 0; lc < amount; lc += 1) {
+    line += char;
+  }
+
+  return line;
+}
+
+function codeLog(codeLines, leftPadAmount) {
+  let maxLength = 0;
+  const newLines = codeLines.map(line => {
+    maxLength = line.length > maxLength ? line.length : maxLength;
+    return line;
+  });
+  const finalResult = newLines.map(line => {
+    const rightPadAmount = maxLength - line.length;
+    let newLine = line + getChars(' ', rightPadAmount);
+    newLine = getChars(' ', leftPadAmount || 2) + _chalk.default.inverse(` ${newLine} `);
+    return newLine;
+  }).join('\n');
+  logger.log(finalResult);
+}
+/**
+ * Detect if any babel dependencies need to be added to the project
+ * @param {Object} packageJson The current package.json so we can inspect its contents
+ * @returns {Array} Contains the packages and versions that need to be installed
+ * @example
+ * const babelDependencies = await getBabelDependencies(packageManager, npmOptions, packageJson);
+ * // you can then spread the result when using installDependencies
+ * installDependencies(npmOptions, [
+ *   `@storybook/react@${storybookVersion}`,
+ *   ...babelDependencies,
+ * ]);
+ */
+
+
+async function getBabelDependencies(packageManager, packageJson) {
+  const dependenciesToAdd = [];
+  let babelLoaderVersion = '^8.0.0-0';
+  const babelCoreVersion = packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
+
+  if (!babelCoreVersion) {
+    if (!packageJson.dependencies['@babel/core'] && !packageJson.devDependencies['@babel/core']) {
+      const babelCoreInstallVersion = await packageManager.getVersion('@babel/core');
+      dependenciesToAdd.push(`@babel/core@${babelCoreInstallVersion}`);
+    }
+  } else {
+    const latestCompatibleBabelVersion = await packageManager.latestVersion('babel-core', babelCoreVersion); // Babel 6
+
+    if ((0, _semver.satisfies)(latestCompatibleBabelVersion, '^6.0.0')) {
+      babelLoaderVersion = '^7.0.0';
+    }
+  }
+
+  if (!packageJson.dependencies['babel-loader'] && !packageJson.devDependencies['babel-loader']) {
+    const babelLoaderInstallVersion = await packageManager.getVersion('babel-loader', babelLoaderVersion);
+    dependenciesToAdd.push(`babel-loader@${babelLoaderInstallVersion}`);
+  }
+
+  return dependenciesToAdd;
+}
+
+function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
+  if (!packageJson.dependencies[name] && !packageJson.devDependencies[name]) {
+    packageJson.devDependencies[name] = packageVersion;
+  }
+}
+
+function copyTemplate(templateRoot) {
+  const templateDir = _path.default.resolve(templateRoot, `template-csf/`);
+
+  if (!_fs.default.existsSync(templateDir)) {
+    throw new Error(`Couldn't find template dir`);
+  }
+
+  _fsExtra.default.copySync(templateDir, '.', {
+    overwrite: true
+  });
+}
+
+function copyComponents(framework, language) {
+  const languageFolderMapping = {
+    javascript: 'js',
+    typescript: 'ts'
+  };
+
+  const componentsPath = () => {
+    const frameworkPath = `frameworks/${framework}`;
+
+    const languageSpecific = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping[language]}`);
+
+    if (_fsExtra.default.existsSync(languageSpecific)) {
+      return languageSpecific;
+    }
+
+    const jsFallback = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping.javascript}`);
+
+    if (_fsExtra.default.existsSync(jsFallback)) {
+      return jsFallback;
+    }
+
+    const frameworkRootPath = _path.default.resolve(__dirname, frameworkPath);
+
+    if (_fsExtra.default.existsSync(frameworkRootPath)) {
+      return frameworkRootPath;
+    }
+
+    throw new Error(`Unsupported framework: ${framework}`);
+  };
+
+  const targetPath = () => {
+    if (_fsExtra.default.existsSync('./src')) {
+      return './src/stories';
+    }
+
+    return './stories';
+  };
+
+  const destinationPath = targetPath();
+
+  _fsExtra.default.copySync(componentsPath(), destinationPath, {
+    overwrite: true
+  });
+
+  _fsExtra.default.copySync(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
+    overwrite: true
+  });
+}