storybook 0.0.0 → 1.0.0

package/.npmignore

@@ -0,0 +1,8 @@
+/src/
+/example/
+/demo/
+/node_modules/
+/.storybook/
+
+
+.babelrc

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+### v3.2.9
+
+13-Sep-2017
+
+Forked from https://github.com/storybooks/storybook/tree/master/lib/cli

package/README.md

@@ -0,0 +1,90 @@
+# Storybook (CLI)
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
+
+This package provides a CLI for adding [Storybook](https://github.com/storybooks/storybook) to your project.
+
+
+![Screenshot](docs/getstorybook.png)
+
+The quickest way to add Storybook to your project is to run this package via [npx](https://www.npmjs.com/package/npx):
+
+```sh
+cd your-project-folder
+npx storybook
+```
+
+That's all you've to do.
+
+If you don't use npx install this CLI globally.
+
+```sh
+npm i -g storybook
+```
+
+Then go to your project's folder and run:
+
+```sh
+storybook
+```
+
+* * *
+
+After that run Storybook by
+
+```sh
+npm run storybook
+```
+
+or
+
+```sh
+yarn storybook
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+## [Yarn](https://github.com/yarnpkg/yarn) support
+
+It also supports yarn.
+If you have installed yarn in your system, it'll detect it and use `yarn` instead of `npm`.
+
+If you don't want to use `yarn` always you can use the `--use-npm` option like this:
+
+```sh
+storybook --use-npm
+```
+
+* * *
+
+## [Flow](https://flow.org/) support
+
+It also supports flow files. By default, [jscodeshift](https://github.com/facebook/jscodeshift), the tool used to transform the source files, uses babel to read the files. To be able to transform any flow annotated file, you need to use the flow parser.
+
+```sh
+storybook --parser flow
+```
+
+## Credits
+
+npm package: https://www.npmjs.com/package/storybook
+
+github repo: https://github.com/storybooks/storybook-package
+
+Storybook monorepo: https://github.com/storybooks/storybook
+
+in order to have the latest Storybook [CLI](https://github.com/storybooks/storybook/tree/master/lib/cli) install:
+
+```sh
+npm i -g @storybook/cli
+```

package/bin/generate.js

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+
+const updateNotifier = require('update-notifier');
+const program = require('commander');
+const chalk = require('chalk');
+const detect = require('../lib/detect');
+const hasYarn = require('../lib/has_yarn');
+const types = require('../lib/project_types');
+const commandLog = require('../lib/helpers').commandLog;
+const codeLog = require('../lib/helpers').codeLog;
+const paddedLog = require('../lib/helpers').paddedLog;
+const installDeps = require('../lib/helpers').installDeps;
+
+const logger = console;
+
+const pkg = require('../package.json');
+
+program
+  .version(pkg.version)
+  .option('-f --force', 'Forcely add storybook')
+  .option('-N --use-npm', 'Use npm to install deps')
+  .option('-p --parser <babel | babylon | flow>', 'jscodeshift parser')
+  .parse(process.argv);
+
+const welcomeMessage = 'Storybook\'s CLI - The simplest way to add a storybook to your project.';
+logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
+
+const useYarn = Boolean(program.useNpm !== true) && hasYarn();
+
+const npmOptions = {
+  useYarn,
+};
+
+const runStorybookCommand = useYarn ? 'yarn run storybook' : 'npm run storybook';
+
+// Update notify code.
+updateNotifier({
+  pkg,
+  updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
+}).notify();
+
+let projectType;
+
+const done = commandLog('Detecting project type');
+try {
+  projectType = detect({
+    force: program.force,
+  });
+} catch (ex) {
+  done(ex.message);
+  process.exit(1);
+}
+done();
+
+const end = () => {
+  installDeps(npmOptions);
+
+  logger.log('\nTo run your storybook, type:\n');
+  codeLog([runStorybookCommand]);
+  logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
+
+  // Add a new line for the clear visibility.
+  logger.log();
+};
+
+const CRNA_DISCUSSION =
+  'https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md';
+
+switch (projectType) {
+  case types.ALREADY_HAS_STORYBOOK:
+    logger.log();
+    paddedLog('There seems to be a storybook already available in this project.');
+    paddedLog('Apply following command to force:\n');
+    codeLog(['storybook -f']);
+
+    // Add a new line for the clear visibility.
+    logger.log();
+    break;
+
+  case types.UPDATE_PACKAGE_ORGANIZATIONS:
+    // eslint-disable-next-line
+    require('../generators/UPDATE_PACKAGE_ORGANIZATIONS')(program.parser)
+      .then(() => null) // commmandLog doesn't like to see output
+      .then(commandLog('Upgrading your project to the new storybook packages.'))
+      .then(end);
+    break;
+
+  case types.REACT_SCRIPTS:
+    // eslint-disable-next-line
+    require('../generators/REACT_SCRIPTS')
+      .then(commandLog('Adding storybook support to your "Create React App" based project'))
+      .then(end);
+    break;
+
+  case types.REACT:
+    // eslint-disable-next-line
+    require('../generators/REACT')
+      .then(commandLog('Adding storybook support to your "React" app'))
+      .then(end);
+    break;
+
+  case types.REACT_NATIVE_SCRIPTS: {
+    const app = chalk.bold('"./App.js"');
+    // eslint-disable-next-line
+    require('../generators/REACT_NATIVE_SCRIPTS')
+      .then(commandLog('Adding storybook support to your "Create React Native App" app'))
+      .then(end)
+      .then(() => {
+        logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.'));
+        logger.log(`To quickly run storybook, replace contents of ${app} with:\n`);
+        codeLog(["export default from './storybook';"]); // eslint-disable-line
+        logger.log('\nFor a more complete discussion of options, see:\n');
+        logger.log(chalk.cyan(CRNA_DISCUSSION));
+        logger.log();
+      });
+    break;
+  }
+
+  case types.REACT_NATIVE:
+    // eslint-disable-next-line
+    require('../generators/REACT_NATIVE')
+      .then(commandLog('Adding storybook support to your "React Native" app'))
+      .then(end);
+    break;
+
+  case types.METEOR:
+    // eslint-disable-next-line
+    require('../generators/METEOR')
+      .then(commandLog('Adding storybook support to your "Meteor" app'))
+      .then(end);
+    break;
+
+  case types.WEBPACK_REACT:
+    // eslint-disable-next-line
+    require('../generators/WEBPACK_REACT')
+      .then(commandLog('Adding storybook support to your "Webpack React" app'))
+      .then(end);
+    break;
+
+  case types.REACT_PROJECT:
+    // eslint-disable-next-line
+    require('../generators/REACT')
+      .then(commandLog('Adding storybook support to your "React" library'))
+      .then(end);
+    break;
+
+  case types.SFC_VUE:
+    // eslint-disable-next-line
+    require('../generators/SFC_VUE')
+      .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
+      .then(end);
+    break;
+
+  case types.VUE:
+    // eslint-disable-next-line
+    require('../generators/VUE')
+      .then(commandLog('Adding storybook support to your "Vue" app'))
+      .then(end);
+    break;
+
+  default:
+    paddedLog(`Unsupported Project type. (code: ${projectType})`);
+    paddedLog('Visit https://storybook.js.org for more information.');
+
+    // Add a new line for the clear visibility.
+    logger.log();
+}

package/generators/.eslintrc.js

@@ -0,0 +1,12 @@
+const ignore = 0;
+
+module.exports = {
+  overrides: {
+    files: '*/template/**',
+    rules: {
+      'import/no-unresolved': ignore,
+      'import/no-extraneous-dependencies': ignore,
+      'global-require': ignore,
+    },
+  },
+};

package/generators/METEOR/index.js

@@ -0,0 +1,81 @@
+const mergeDirs = require('merge-dirs').default;
+const helpers = require('../../lib/helpers');
+const path = require('path');
+const fs = require('fs');
+const JSON5 = require('json5');
+const latestVersion = require('latest-version');
+
+module.exports = Promise.all([
+  latestVersion('@storybook/react'),
+  latestVersion('@storybook/addon-actions'),
+  latestVersion('@storybook/addon-links'),
+  latestVersion('react'),
+  latestVersion('react-dom'),
+  latestVersion('babel-preset-env'),
+  latestVersion('babel-preset-react'),
+  latestVersion('babel-preset-stage-1'),
+  latestVersion('babel-root-slash-import'),
+]).then(
+  (
+    [
+      storybookVersion,
+      actionsVersion,
+      linksVersion,
+      reactVersion,
+      reactDomVersion,
+      presetEnvVersion,
+      presetReactVersion,
+      presetStage1Version,
+      rootSlashImportVersion,
+    ]
+  ) => {
+    mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+
+    const packageJson = helpers.getPackageJson();
+    packageJson.devDependencies = packageJson.devDependencies || {};
+    packageJson.scripts = packageJson.scripts || {};
+    packageJson.dependencies = packageJson.dependencies || {};
+
+    // create or update .babelrc
+    let babelrc = null;
+    if (fs.existsSync('.babelrc')) {
+      const babelrcContent = fs.readFileSync('.babelrc', 'utf8');
+      babelrc = JSON5.parse(babelrcContent);
+      babelrc.plugins = babelrc.plugins || [];
+
+      if (babelrc.plugins.indexOf('babel-root-slash-import') < 0) {
+        babelrc.plugins.push('babel-root-slash-import');
+        packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`;
+      }
+    } else {
+      babelrc = {
+        presets: ['env', 'react', 'stage-1'],
+        plugins: ['babel-root-slash-import'],
+      };
+
+      packageJson.devDependencies['babel-preset-env'] = `^${presetEnvVersion}`;
+      packageJson.devDependencies['babel-preset-react'] = `^${presetReactVersion}`;
+      packageJson.devDependencies['babel-preset-stage-1'] = `^${presetStage1Version}`;
+      packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`;
+    }
+
+    fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
+
+    // write the new package.json.
+    packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
+    packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
+    packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
+    packageJson.scripts.storybook = 'start-storybook -p 6006';
+    packageJson.scripts['build-storybook'] = 'build-storybook';
+
+    // add react packages.
+    if (!packageJson.dependencies.react) {
+      packageJson.dependencies.react = `^${reactVersion}`;
+    }
+    if (!packageJson.dependencies['react-dom']) {
+      packageJson.dependencies['react-dom'] = `^${reactDomVersion}`;
+    }
+
+    helpers.writePackageJson(packageJson);
+  }
+);

package/generators/METEOR/template/.stories/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module)
+  .add('to Storybook', () => (
+    <Welcome showApp={linkTo('Button')}/>
+  ));
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));

package/generators/METEOR/template/.storybook/addons.js

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

package/generators/METEOR/template/.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../.stories');
+}
+
+configure(loadStories, module);

package/generators/REACT/index.js

@@ -0,0 +1,25 @@
+const mergeDirs = require('merge-dirs').default;
+const helpers = require('../../lib/helpers');
+const path = require('path');
+const latestVersion = require('latest-version');
+
+module.exports = Promise.all([
+  latestVersion('@storybook/react'),
+  latestVersion('@storybook/addon-actions'),
+  latestVersion('@storybook/addon-links'),
+]).then(([storybookVersion, actionsVersion, linksVersion]) => {
+  mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+
+  const packageJson = helpers.getPackageJson();
+
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
+  packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
+  packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  helpers.writePackageJson(packageJson);
+});

package/generators/REACT/template/.storybook/addons.js

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

package/generators/REACT/template/.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

package/generators/REACT/template/stories/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

package/generators/REACT_NATIVE/index.js

@@ -0,0 +1,53 @@
+const mergeDirs = require('merge-dirs').default;
+const path = require('path');
+const shell = require('shelljs');
+const latestVersion = require('latest-version');
+const chalk = require('chalk');
+const helpers = require('../../lib/helpers');
+
+module.exports = Promise.all([
+  latestVersion('@storybook/react-native'),
+  latestVersion('@storybook/addon-actions'),
+  latestVersion('@storybook/addon-links'),
+  latestVersion('prop-types'),
+]).then(([storybookVersion, actionsVersion, linksVersion, propTypesVersion]) => {
+  // copy all files from the template directory to project directory
+  mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+
+  // set correct project name on entry files if possible
+  const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;
+  const projectName =
+    dirname && dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
+  if (projectName) {
+    shell.sed('-i', '%APP_NAME%', projectName, 'storybook/storybook.js');
+  } else {
+    helpers.paddedLog(
+      chalk.red(
+        'ERR: Could not determine project name, to fix: https://github.com/storybooks/storybook/issues/1277'
+      )
+    );
+  }
+
+  const packageJson = helpers.getPackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.devDependencies['@storybook/react-native'] = `^${storybookVersion}`;
+  packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
+  packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
+
+  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
+    const reactVersion = packageJson.dependencies.react;
+    packageJson.devDependencies['react-dom'] = reactVersion;
+  }
+
+  if (!packageJson.dependencies['prop-types'] && !packageJson.devDependencies['prop-types']) {
+    packageJson.devDependencies['prop-types'] = `^${propTypesVersion}`;
+  }
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'storybook start -p 7007';
+
+  helpers.writePackageJson(packageJson);
+});

package/generators/REACT_NATIVE/template/storybook/addons.js

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

package/generators/REACT_NATIVE/template/storybook/index.android.js

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

package/generators/REACT_NATIVE/template/storybook/index.ios.js

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

package/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js

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

package/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js

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

package/generators/REACT_NATIVE/template/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(props) {
+  return <View style={style.main}>{props.children}</View>;
+}
+
+CenterView.defaultProps = {
+  children: null,
+};
+
+CenterView.propTypes = {
+  children: PropTypes.node,
+};

package/generators/REACT_NATIVE/template/storybook/stories/CenterView/style.js

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

package/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js

@@ -0,0 +1,53 @@
+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) {
+    event.preventDefault();
+    if (this.props.showApp) this.props.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/generators/REACT_NATIVE/template/storybook/stories/index.js

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