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

package/dist/modern/generators/PREACT/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
+    extraPackages: ['core-js']
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/RAX/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+const generator = async (packageManager, npmOptions, options) => {
+  const [latestRaxVersion] = await packageManager.getVersions('rax');
+  const packageJson = packageManager.retrievePackageJson();
+  const raxVersion = packageJson.dependencies.rax || latestRaxVersion; // in case Rax project is not detected, `rax` package is not available either
+
+  packageJson.dependencies.rax = packageJson.dependencies.rax || raxVersion; // these packages are required for Welcome story
+
+  packageJson.dependencies['rax-image'] = packageJson.dependencies['rax-image'] || raxVersion;
+  packageJson.dependencies['rax-link'] = packageJson.dependencies['rax-link'] || raxVersion;
+  packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
+  packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
+  (0, _jsPackageManager.writePackageJson)(packageJson);
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
+    extraPackages: ['rax']
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/REACT/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/REACT_NATIVE/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _shelljs = _interopRequireDefault(require("shelljs"));
+
+var _helpers = require("../../helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const generator = async (packageManager, npmOptions, installServer) => {
+  // set correct project name on entry files if possible
+  const dirname = _shelljs.default.ls('-d', 'ios/*.xcodeproj').stdout; // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
+
+
+  if (dirname) {
+    const projectName = dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
+
+    if (projectName) {
+      _shelljs.default.sed('-i', '%APP_NAME%', projectName, 'storybook/index.js');
+    } else {
+      (0, _helpers.paddedLog)(_chalk.default.red('ERR: Could not determine project name, to fix: https://github.com/storybookjs/storybook/issues/1277'));
+    }
+  }
+
+  const packageJson = packageManager.retrievePackageJson();
+  const missingReactDom = !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom'];
+  const reactVersion = packageJson.dependencies.react; // should resolve to latest 5.3 version, this is required until react-native storybook supports v6
+
+  const webAddonsV5 = ['@storybook/addon-links@^5.3', '@storybook/addon-knobs@^5.3', '@storybook/addon-actions@^5.3'];
+  const nativeAddons = ['@storybook/addon-ondevice-knobs', '@storybook/addon-ondevice-actions'];
+  const packagesToResolve = [...nativeAddons, '@storybook/react-native', installServer && '@storybook/react-native-server'].filter(Boolean);
+  const resolvedPackages = await packageManager.getVersionedPackages(...packagesToResolve);
+  const babelDependencies = await (0, _helpers.getBabelDependencies)(packageManager, packageJson);
+  const packages = [...babelDependencies, ...resolvedPackages, ...webAddonsV5, missingReactDom && reactVersion && `react-dom@${reactVersion}`].filter(Boolean);
+  packageManager.addDependencies(Object.assign({}, npmOptions, {
+    packageJson
+  }), packages);
+
+  if (installServer) {
+    packageManager.addStorybookCommandInScripts({
+      port: 7007
+    });
+  }
+
+  (0, _helpers.copyTemplate)(__dirname);
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/index.js

@@ -0,0 +1,25 @@
+// if you use expo remove this line
+import { AppRegistry } from 'react-native';
+
+import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import './rn-addons';
+
+// enables knobs for all stories
+addDecorator(withKnobs);
+
+// import stories
+configure(() => {
+  require('./stories');
+}, module);
+
+// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
+// To find allowed options for getStorybookUI
+const StorybookUIRoot = getStorybookUI({});
+
+// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
+// If you use Expo you should remove this line.
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
+
+export default StorybookUIRoot;

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-knobs/register';

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import Button from '.';
+import CenterView from '../CenterView';
+
+storiesOf('Button', module)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+  .add('with text', () => (
+    <Button onPress={action('clicked-text')}>
+      <Text>{text('Button text', 'Hello Button')}</Text>
+    </Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  ));

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableHighlight } from 'react-native';
+
+export default function Button({ onPress, children }) {
+  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+}
+
+Button.defaultProps = {
+  children: null,
+  onPress: () => {},
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+};

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import style from './style';
+
+export default function CenterView({ children }) {
+  return <View style={style.main}>{children}</View>;
+}
+
+CenterView.defaultProps = {
+  children: null,
+};
+
+CenterView.propTypes = {
+  children: PropTypes.node,
+};

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js

@@ -0,0 +1,8 @@
+export default {
+  main: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+};

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/react-native';
+import Welcome from '.';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text } from 'react-native';
+
+export default class Welcome extends React.Component {
+  styles = {
+    wrapper: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 18,
+      marginBottom: 18,
+    },
+    content: {
+      fontSize: 12,
+      marginBottom: 10,
+      lineHeight: 18,
+    },
+  };
+
+  showApp = (event) => {
+    const { showApp } = this.props;
+    event.preventDefault();
+
+    if (showApp) {
+      showApp();
+    }
+  };
+
+  render() {
+    return (
+      <View style={this.styles.wrapper}>
+        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.content}>
+          This is a UI Component development environment for your React Native app. Here you can
+          display and interact with your UI components as stories. A story is a single state of one
+          or more UI components. You can have as many stories as you want. In other words a story is
+          like a visual test case.
+        </Text>
+        <Text style={this.styles.content}>
+          We have added some stories inside the "storybook/stories" directory for examples. Try
+          editing the "storybook/stories/Welcome.js" file to edit this message.
+        </Text>
+      </View>
+    );
+  }
+}
+
+Welcome.defaultProps = {
+  showApp: null,
+};
+
+Welcome.propTypes = {
+  showApp: PropTypes.func,
+};

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/stories/index.js

@@ -0,0 +1,2 @@
+import './Button/Button.stories';
+import './Welcome/Welcome.stories';

package/dist/modern/generators/REACT_SCRIPTS/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _baseGenerator = require("../baseGenerator");
+
+var _project_types = require("../../project_types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const generator = async (packageManager, npmOptions, options) => {
+  var _semver$coerce;
+
+  const extraMain = options.linkable ? {
+    webpackFinal: `%%(config) => {
+      const path = require('path');
+      // add monorepo root as a valid directory to import modules from
+      config.resolve.plugins.forEach((p) => {
+        if (Array.isArray(p.appSrcs)) {
+          p.appSrcs.push(path.join(__dirname, '..', '..', '..', 'storybook'));
+        }
+      });
+      return config;
+    }
+    %%`
+  } : {};
+  const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
+
+  const isCra5 = craVersion && _semver.default.gte(craVersion, '5.0.0');
+
+  const updatedOptions = isCra5 ? Object.assign({}, options, {
+    builder: _project_types.CoreBuilder.Webpack5
+  }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
+
+  const extraPackages = ['@storybook/node-logger'];
+  if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
+
+  const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {
+    extraAddons,
+    extraPackages,
+    staticDir: _fs.default.existsSync(_path.default.resolve('./public')) ? 'public' : undefined,
+    addBabel: false,
+    addESLint: true,
+    extraMain
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/RIOT/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
+    extraPackages: ['riot-tag-loader']
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/SERVER/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+var _helpers = require("../../helpers");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
+    extensions: ['json']
+  });
+  (0, _helpers.copyTemplate)(__dirname);
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/SERVER/template-csf/.storybook/preview.js

@@ -0,0 +1,5 @@
+export const parameters = {
+  server: {
+    url: 'http://storybook-server-demo.netlify.app/api',
+  },
+};

package/dist/modern/generators/SFC_VUE/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/SVELTE/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _nodeLogger = require("@storybook/node-logger");
+
+var _baseGenerator = require("../baseGenerator");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const generator = async (packageManager, npmOptions, options) => {
+  let extraMain;
+  let commonJs = false; // svelte.config.js ?
+
+  if (_fsExtra.default.existsSync('./svelte.config.js')) {
+    _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.js'");
+
+    extraMain = {
+      svelteOptions: {
+        preprocess: '%%require("../svelte.config.js").preprocess%%'
+      }
+    };
+  } else if (_fsExtra.default.existsSync('./svelte.config.cjs')) {
+    _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.cjs'");
+
+    commonJs = true;
+    extraMain = {
+      svelteOptions: {
+        preprocess: '%%require("../svelte.config.cjs").preprocess%%'
+      }
+    };
+  } else {
+    // svelte-preprocess dependencies ?
+    const packageJson = packageManager.retrievePackageJson();
+
+    if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
+      _nodeLogger.logger.info("Configuring preprocessor with 'svelte-preprocess'");
+
+      extraMain = {
+        svelteOptions: {
+          preprocess: '%%require("svelte-preprocess")()%%'
+        }
+      };
+    }
+  }
+
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
+    extraPackages: ['svelte', 'svelte-loader'],
+    extraAddons: ['@storybook/addon-svelte-csf'],
+    extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
+    extraMain,
+    commonJs
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _crossSpawn = require("cross-spawn");
+
+var _codemod = require("@storybook/codemod");
+
+var _helpers = require("../../helpers");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-param-reassign */
+async function updatePackage(packageManager, devDependencies, oldName, newName) {
+  if (devDependencies[oldName]) {
+    delete devDependencies[oldName];
+    devDependencies[newName] = await packageManager.getVersion(newName);
+  }
+}
+
+async function updatePackageJson(packageManager, npmOptions) {
+  const packageJson = packageManager.retrievePackageJson();
+  const {
+    devDependencies
+  } = packageJson;
+  const [actionsVersion, linksVersion] = await packageManager.getVersions('@storybook/addon-actions', '@storybook/addon-links');
+  devDependencies['@storybook/addon-actions'] = actionsVersion;
+  devDependencies['@storybook/addon-links'] = linksVersion;
+  await Promise.all(Object.keys(_codemod.packageNames).map(oldName => {
+    const newName = _codemod.packageNames[oldName];
+    return updatePackage(packageManager, devDependencies, oldName, newName);
+  }));
+
+  if (!devDependencies['@storybook/react'] && !devDependencies['@storybook/react-native']) {
+    throw new Error('Expected to find `@kadira/[react-native]-storybook` in devDependencies');
+  }
+
+  (0, _jsPackageManager.writePackageJson)(packageJson);
+  const babelDependencies = await (0, _helpers.getBabelDependencies)(packageManager, packageJson);
+
+  if (babelDependencies.length > 0) {
+    packageManager.addDependencies(Object.assign({}, npmOptions, {
+      packageJson
+    }), babelDependencies);
+  }
+}
+
+function updateSourceCode(parser) {
+  const jscodeshiftPath = _path.default.dirname(require.resolve('jscodeshift'));
+
+  const jscodeshiftCommand = _path.default.join(jscodeshiftPath, 'bin', 'jscodeshift.sh');
+
+  ['update-organisation-name.js', 'move-builtin-addons.js'].forEach(codemod => {
+    const codemodPath = _path.default.join(_path.default.dirname(require.resolve('@storybook/codemod')), 'transforms', codemod);
+
+    const args = ['-t', codemodPath, '--silent', '--ignore-pattern', '"node_modules|dist"', '.'];
+    if (parser) args.push('--parser', parser);
+    (0, _crossSpawn.sync)(jscodeshiftCommand, args, {
+      stdio: 'inherit'
+    });
+  });
+}
+
+var _default = async (packageManager, parser, npmOptions) => {
+  await updatePackageJson(packageManager, npmOptions);
+  updateSourceCode(parser);
+};
+
+exports.default = _default;

package/dist/modern/generators/VUE/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
+    extraPackages: ['vue-loader@^15.7.0']
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/VUE3/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
+    extraPackages: ['vue-loader@^16.0.0']
+  });
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/WEB-COMPONENTS/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  return (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'web-components');
+};
+
+var _default = generator;
+exports.default = _default;

package/dist/modern/generators/WEBPACK_REACT/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _baseGenerator = require("../baseGenerator");
+
+const generator = async (packageManager, npmOptions, options) => {
+  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
+};
+
+var _default = generator;
+exports.default = _default;