Update defaults to match create-react-app

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "es2016", "stage-0", "react"]
 }

dist/client/manager/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+require('es6-shim');
+
+var _storybookUi = require('@kadira/storybook-ui');
+
+var _storybookUi2 = _interopRequireDefault(_storybookUi);
+
+var _provider = require('./provider');
+
+var _provider2 = _interopRequireDefault(_provider);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var rootEl = document.getElementById('root');
+(0, _storybookUi2.default)(rootEl, new _provider2.default());

dist/client/manager/preview.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var iframeStyle = {
+  width: '100%',
+  height: '100%',
+  border: 0,
+  margin: 0,
+  padding: 0
+};
+
+var Preview = function Preview(_ref) {
+  var url = _ref.url;
+  return _react2.default.createElement('iframe', {
+    style: iframeStyle,
+    src: url
+  });
+};
+
+Preview.propTypes = {
+  url: _react2.default.PropTypes.string
+};
+
+exports.default = Preview;

dist/client/manager/provider.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _preview = require('./preview');
+
+var _preview2 = _interopRequireDefault(_preview);
+
+var _qs = require('qs');
+
+var _qs2 = _interopRequireDefault(_qs);
+
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _pageBus = require('page-bus');
+
+var _pageBus2 = _interopRequireDefault(_pageBus);
+
+var _storybookUi = require('@kadira/storybook-ui');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ReactProvider = function (_Provider) {
+  (0, _inherits3.default)(ReactProvider, _Provider);
+
+  function ReactProvider() {
+    (0, _classCallCheck3.default)(this, ReactProvider);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ReactProvider).call(this));
+
+    _this.dataId = _uuid2.default.v4();
+    return _this;
+  }
+
+  (0, _createClass3.default)(ReactProvider, [{
+    key: 'renderPreview',
+    value: function renderPreview(selectedKind, selectedStory) {
+      var queryParams = {
+        dataId: this.dataId,
+        selectedKind: selectedKind,
+        selectedStory: selectedStory
+      };
+
+      var queryString = _qs2.default.stringify(queryParams);
+      var url = 'iframe.html?' + queryString;
+      return _react2.default.createElement(_preview2.default, { url: url });
+    }
+  }, {
+    key: 'handleAPI',
+    value: function handleAPI(api) {
+      var dataId = this.dataId;
+      var bus = (0, _pageBus2.default)();
+
+      api.onStory(function (kind, story) {
+        var payload = {
+          kind: kind,
+          story: story
+        };
+
+        bus.emit(dataId + '.setCurrentStory', (0, _stringify2.default)(payload));
+      });
+
+      // watch pageBus and put both actions and stories.
+      bus.on(dataId + '.addAction', function (payload) {
+        var data = JSON.parse(payload);
+        api.addAction(data.action);
+      });
+
+      bus.on(dataId + '.setStories', function (payload) {
+        var data = JSON.parse(payload);
+        api.setStories(data.stories);
+      });
+
+      bus.on(dataId + '.selectStory', function (payload) {
+        var data = JSON.parse(payload);
+        api.selectStory(data.kind, data.story);
+      });
+
+      bus.on(dataId + '.applyShortcut', function (payload) {
+        var data = JSON.parse(payload);
+        api.handleShortcut(data.event);
+      });
+    }
+  }]);
+  return ReactProvider;
+}(_storybookUi.Provider);
+
+exports.default = ReactProvider;

dist/server/babel.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  babelrc: false,
+  cacheDirectory: true,
+  presets: ['babel-preset-es2015', 'babel-preset-es2016', 'babel-preset-stage-0', 'babel-preset-react'].map(require.resolve),
+  plugins: [].map(require.resolve).concat([[require.resolve('babel-plugin-transform-runtime'), {
+    helpers: false,
+    polyfill: false,
+    regenerator: true
+  }]])
+};

dist/server/babel.prod.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  babelrc: false,
+  presets: ['babel-preset-es2015', 'babel-preset-es2016', 'babel-preset-stage-0', 'babel-preset-react'].map(require.resolve),
+  plugins: ['babel-plugin-transform-react-constant-elements'].map(require.resolve).concat([[require.resolve('babel-plugin-transform-runtime'), {
+    helpers: false,
+    polyfill: false,
+    regenerator: true
+  }]])
+};

dist/server/build.js

@@ -63,8 +63,11 @@ if (publicPath[0] === '/') {
   publicPath = publicPath.slice(1);
 }
 
-// create output directory (and the static dir) if not exists
 var outputDir = _commander2.default.outputDir || './storybook-static';
+config.output.path = outputDir;
+
+// create output directory (and the static dir) if not exists
+_shelljs2.default.rm('-rf', outputDir);
 _shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir, publicPath));
 
 // copy all static files
@@ -86,30 +89,10 @@ _fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0,
 
 // compile all resources with webpack and write them to the disk.
 logger.log('Building storybook ...');
-(0, _webpack2.default)(config).compile(function (err, stats) {
-  for (var filename in stats.assets) {
-    if (!stats.assets.hasOwnProperty(filename)) {
-      continue;
-    }
-
-    var asset = stats.assets[filename];
-    if (asset.children && asset.children.length) {
-      var _source = asset.children[0]._value;
-      var _dstPath = _path2.default.resolve(outputDir, publicPath, filename);
-      _fs2.default.writeFileSync(_dstPath, _source);
-      continue;
-    }
-
-    var source = asset._value;
-    var dstPath = _path2.default.resolve(outputDir, publicPath, filename);
-
-    // Ensure the asset directory exists
-    _shelljs2.default.mkdir('-p', _path2.default.parse(dstPath).dir);
-    _fs2.default.writeFileSync(dstPath, source);
+(0, _webpack2.default)(config).run(function (err) {
+  if (err) {
+    logger.error('Failed to build the storybook');
+    logger.error(err.message);
+    process.exit(1);
   }
-
-  // We need to copy the manager bundle distributed via the React Storybook
-  // directly into the production build overring webpack.
-  _shelljs2.default.cp(_path2.default.resolve(__dirname, '../manager.js'), _path2.default.resolve(outputDir, publicPath, 'manager.bundle.js'));
-  _shelljs2.default.cp(_path2.default.resolve(__dirname, '../manager.js.map'), _path2.default.resolve(outputDir, publicPath, 'manager.js.map'));
 });

dist/server/config.js

@@ -34,20 +34,6 @@ exports.default = function (configType, baseConfig, configDir) {
     config.module.loaders[0].query = babelConfig;
   }
 
-  // Dev build needs some specific babel presets.
-  // So, we need to add them here, if not specified.
-  if (process.env.DEV_BUILD) {
-    (function () {
-      var requiredPresets = ['react', 'es2015', 'stage-0'];
-      var loadedPresets = config.module.loaders[0].query.presets;
-      requiredPresets.forEach(function (preset) {
-        if (loadedPresets.indexOf(preset) < 0) {
-          loadedPresets.push(preset);
-        }
-      });
-    })();
-  }
-
   // Check whether a config.js file exists inside the storybook
   // config directory and throw an error if it's not.
   var storybookConfigPath = _path2.default.resolve(configDir, 'config.js');

dist/server/iframe.html.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (headHtml, publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

dist/server/index.html.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'manager.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/manager.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

dist/server/paths.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.includePaths = undefined;
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')];

dist/server/webpack.config.js

@@ -12,30 +12,63 @@ var _webpack = require('webpack');
 
 var _webpack2 = _interopRequireDefault(_webpack);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _paths = require('./paths');
+
+var _autoprefixer = require('autoprefixer');
+
+var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
+
+var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
 
-var managerEntry = process.env.DEV_BUILD ? _path2.default.resolve(__dirname, '../../src/client/manager') : _path2.default.resolve(__dirname, '../manager');
+var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
-    manager: [managerEntry],
+    manager: [_path2.default.resolve(__dirname, '../client/manager')],
     preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client?noInfo=true']
   },
   output: {
     path: _path2.default.join(__dirname, 'dist'),
-    filename: '[name].bundle.js',
-    publicPath: '/static/'
+    filename: 'static/[name].bundle.js',
+    publicPath: '/'
   },
-  plugins: [new _webpack2.default.optimize.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin()],
+  plugins: [new _webpack2.default.optimize.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default()],
   module: {
     loaders: [{
       test: /\.jsx?$/,
       loader: 'babel',
-      query: { presets: ['react', 'es2015', 'stage-0'] },
-      exclude: [_path2.default.resolve('./node_modules'), _path2.default.resolve(__dirname, 'node_modules')],
-      include: [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')]
+      query: require('./babel.js'),
+      include: _paths.includePaths
+    }, {
+      test: /\.css?$/,
+      include: _paths.includePaths,
+      loader: 'style!css!postcss'
+    }, {
+      test: /\.json$/,
+      include: _paths.includePaths,
+      loader: 'json'
+    }, {
+      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+      include: _paths.includePaths,
+      loader: 'file',
+      query: {
+        name: 'static/media/[name].[ext]'
+      }
+    }, {
+      test: /\.(mp4|webm)(\?.*)?$/,
+      include: _paths.includePaths,
+      loader: 'url',
+      query: {
+        limit: 10000,
+        name: 'static/media/[name].[ext]'
+      }
     }]
+  },
+  postcss: function postcss() {
+    return [_autoprefixer2.default];
   }
 };