Render admin page

dist/client/index.js

@@ -14,10 +14,6 @@ exports.getStories = getStories;
 exports.configure = configure;
 exports.renderMain = renderMain;
 
-var _ui = require('./ui');
-
-var _ui2 = _interopRequireDefault(_ui);
-
 var _data = require('./data');
 
 var _storybook = require('./storybook');

dist/client/init_admin.js

@@ -1,11 +1,12 @@
 'use strict';
 
-var _ui = require('./ui');
+var _admin = require('./ui/admin');
 
-var _ui2 = _interopRequireDefault(_ui);
+var _admin2 = _interopRequireDefault(_admin);
 
 var _data = require('./data');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _data.watchData)(_ui2.default);
+(0, _admin2.default)({});
+// watchData(renderUI);

dist/client/papers.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var papers = {};
-exports.default = papers;

dist/client/stories.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var stories = {};
-exports.default = stories;

dist/client/ui/admin.js

@@ -8,7 +8,7 @@ var _keys = require('babel-runtime/core-js/object/keys');
 
 var _keys2 = _interopRequireDefault(_keys);
 
-exports.default = renderUI;
+exports.default = renderAdmin;
 exports.getControls = getControls;
 exports.getIframe = getIframe;
 exports.renderError = renderError;
@@ -36,48 +36,25 @@ var _layout2 = _interopRequireDefault(_layout);
 
 var _data = require('../data');
 
-var _storybook = require('../storybook');
-
-var _storybook2 = _interopRequireDefault(_storybook);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var rootEl = document.getElementById('root');
 
-function renderUI(data) {
+function renderAdmin(data) {
   if (data.error) {
     return renderError(data, data.error);
   }
 
-  // default main
-  var main = _react2.default.createElement(
-    'p',
-    null,
-    'There is no blocks yet!'
-  );
-
-  var stories = _storybook2.default[data.selectedKind];
-  if (stories) {
-    var story = _storybook2.default[data.selectedKind][data.selectedStory];
-    if (story) {
-      try {
-        main = story();
-      } catch (error) {
-        return (0, _data.setData)({ error: error });
-      }
-    }
-  }
-
-  return renderMain(data, main);
+  return renderMain(data);
 }
 
 function getControls(data) {
   return _react2.default.createElement(_controls2.default, {
-    storybook: _storybook2.default,
+    storybook: data.storybook,
     selectedKind: data.selectedKind,
     selectedStory: data.selectedStory,
-    onKind: setSelectedKind,
-    onStory: setSelectedStory });
+    onKind: setSelectedKind.bind(null, data),
+    onStory: setSelectedStory.bind(null, data) });
 }
 
 function getIframe(data) {
@@ -87,13 +64,12 @@ function getIframe(data) {
     border: '0'
   };
 
-  // We need to send iframe=true and dataId via queryString
+  // We need to send dataId via queryString
   // That's how our data layer can start communicate via the iframe.
-  var queryString = 'iframe=true&dataId=' + data.dataId;
+  var queryString = 'dataId=' + data.dataId;
 
   return _react2.default.createElement('iframe', {
-    style: iframeStyle,
-    src: '/?' + queryString });
+    style: iframeStyle });
 }
 
 function renderError(data, error) {
@@ -105,12 +81,7 @@ function renderError(data, error) {
   _reactDom2.default.render(root, rootEl);
 }
 
-function renderMain(data, main) {
-  // Inside iframe, we simply render the main component.
-  if (data.iframeMode) {
-    return _reactDom2.default.render(main, rootEl);
-  }
-
+function renderMain(data) {
   // Inside the main page, we simply render iframe.
   var controls = getControls(data);
   var root = _react2.default.createElement(_layout2.default, { controls: controls, content: getIframe(data) });
@@ -118,15 +89,13 @@ function renderMain(data, main) {
 }
 
 // Event handlers
-function setSelectedKind(kind) {
-  var data = (0, _data.getData)();
+function setSelectedKind(data, kind) {
   data.selectedKind = kind;
-  data.selectedStory = (0, _keys2.default)(_storybook2.default[kind])[0];
+  data.selectedStory = (0, _keys2.default)(data.storybook[kind])[0];
   (0, _data.setData)(data);
 }
 
-function setSelectedStory(block) {
-  var data = (0, _data.getData)();
+function setSelectedStory(data, block) {
   data.selectedStory = block;
   (0, _data.setData)(data);
 }

dist/client/ui/controls.js

@@ -169,8 +169,7 @@ var StorybookControls = function (_React$Component) {
     value: function getStories(kind) {
       var storybook = this.props.storybook;
 
-      var stories = storybook[kind];
-      return (0, _keys2.default)(stories);
+      return storybook[kind];
     }
   }, {
     key: 'fireOnKind',

dist/server/config.js

@@ -1,23 +0,0 @@
-'use strict';
-
-var config = require('./webpack.config');
-var path = require('path');
-var fs = require('fs');
-
-var configDir = path.resolve('./.storybook');
-var customConfigPath = path.resolve(configDir, 'webpack.config.js');
-
-if (fs.existsSync(customConfigPath)) {
-  var customConfig = require(customConfigPath);
-  if (customConfig.module.loaders) {
-    console.log("=> Loading custom webpack loaders");
-    config.module.loaders = config.module.loaders.concat(customConfig.module.loaders);
-  }
-
-  if (customConfig.plugins) {
-    console.log(" => Loading custom webpack plugins");
-    config.plugins = config.plugins.concat(customConfig.plugins);
-  }
-}
-
-module.exports = config;

dist/server/index.html.js

@@ -1,5 +1,11 @@
-"use strict";
+'use strict';
+
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = function () {
-  return "\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <title>React Storybook</title>\n    </head>\n    <body style=\"margin: 0;\">\n      <div id=\"root\" />\n      <script src=\"/static/bundle.js\"></script>\n    </body>\n    </html>\n  ";
+  return '\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <title>React Storybook</title>\n    <script type="text/javascript">\n      window.dataId = \'' + _uuid2.default.v4() + '\';\n    </script>\n    </head>\n    <body style="margin: 0;">\n      <div id="root" />\n      <script src="/static/admin.bundle.js"></script>\n    </body>\n    </html>\n  ';
 };

dist/server/webpack.config.js

@@ -6,10 +6,15 @@ var fs = require('fs');
 
 var config = {
   devtool: 'cheap-module-eval-source-map',
-  entry: ['stack-source-map/register', 'webpack-hot-middleware/client', path.resolve(__dirname, '../client/init_ui')],
+  entry: {
+    admin: ['stack-source-map/register', path.resolve(__dirname, '../client/init_admin')],
+    live: ['stack-source-map/register', 'webpack-hot-middleware/client']
+  },
+
+  // path.resolve(__dirname, '../client/init_preview')
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    filename: '[name].bundle.js',
     publicPath: '/static/'
   },
   plugins: [new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin()],
@@ -31,7 +36,7 @@ if (!fs.existsSync(storybookConfigPath)) {
   console.error('=> Create a storybook config file in ".storybook/config.js".\n');
   process.exit(0);
 }
-config.entry.push(storybookConfigPath);
+config.entry.live.push(storybookConfigPath);
 
 // load custom webpack configurations
 var customConfigPath = path.resolve(configDir, 'webpack.config.js');

src/client/index.js

@@ -1,4 +1,3 @@
-import renderUI from './ui';
 import {
   setData,
   getData,

src/client/init_admin.js

@@ -0,0 +1,5 @@
+import renderUI from './ui/admin';
+import {watchData} from './data';
+
+renderUI({});
+// watchData(renderUI);

src/client/init_ui.js

@@ -1,4 +0,0 @@
-import renderUI from './ui';
-import {watchData} from './data';
-
-watchData(renderUI);

src/client/ui/admin.js

@@ -3,42 +3,26 @@ import ReactDOM from 'react-dom';
 import ReadBox from 'redbox-react';
 import StorybookControls from './controls';
 import Layout from './layout';
-import {setData, getData} from '../data';
-import storybook from '../storybook';
+import {setData} from '../data';
 
 const rootEl = document.getElementById('root');
 
-export default function renderUI(data) {
+export default function renderAdmin(data) {
   if (data.error) {
     return renderError(data, data.error);
   }
 
-  // default main
-  let main = (<p>There is no blocks yet!</p>);
-
-  const stories = storybook[data.selectedKind];
-  if (stories) {
-    const story = storybook[data.selectedKind][data.selectedStory];
-    if (story) {
-      try {
-        main = story();
-      } catch(error) {
-        return setData({error});
-      }
-    }
-  }
-
-  return renderMain(data, main);
+  return renderMain(data);
 }
 
 export function getControls(data) {
   return (
     <StorybookControls
-      storybook={storybook}
+      storybook={data.storybook}
       selectedKind={data.selectedKind}
       selectedStory={data.selectedStory}
-      onKind={setSelectedKind}
-      onStory={setSelectedStory}/>
+      onKind={setSelectedKind.bind(null, data)}
+      onStory={setSelectedStory.bind(null, data)}/>
   );
 }
 
@@ -49,14 +33,13 @@ export function getIframe(data) {
     border: '0'
   };
 
-  // We need to send iframe=true and dataId via queryString
+  // We need to send dataId via queryString
   // That's how our data layer can start communicate via the iframe.
-  const queryString = `iframe=true&dataId=${data.dataId}`;
+  const queryString = `dataId=${data.dataId}`;
 
   return (
     <iframe
-      style={iframeStyle}
-      src={`/?${queryString}`}/>
+      style={iframeStyle}/>
   );
 }
 
@@ -69,12 +52,7 @@ export function renderError(data, error) {
   ReactDOM.render(root, rootEl);
 }
 
-export function renderMain(data, main) {
-  // Inside iframe, we simply render the main component.
-  if (data.iframeMode) {
-    return ReactDOM.render(main, rootEl);
-  }
-
+export function renderMain(data) {
   // Inside the main page, we simply render iframe.
   const controls = getControls(data);
   const root = (<Layout controls={controls} content={getIframe(data)}/>);
@@ -82,15 +60,13 @@ export function renderMain(data, main) {
 }
 
 // Event handlers
-function setSelectedKind(kind) {
-  const data = getData();
+function setSelectedKind(data, kind) {
   data.selectedKind = kind;
-  data.selectedStory = Object.keys(storybook[kind])[0];
+  data.selectedStory = Object.keys(data.storybook[kind])[0];
   setData(data);
 }
 
-function setSelectedStory(block) {
-  const data = getData();
+function setSelectedStory(data, block) {
   data.selectedStory = block;
   setData(data);
 }

src/client/ui/controls.js

@@ -96,8 +96,7 @@ export default class StorybookControls extends React.Component {
 
   getStories(kind) {
     const {storybook} = this.props;
-    const stories = storybook[kind];
-    return Object.keys(stories);
+    return storybook[kind];
   }
 
   fireOnKind(kind) {

src/server/index.html.js

@@ -1,13 +1,18 @@
+import UUID from 'uuid';
+
 module.exports = function() {
   return `
     <!DOCTYPE html>
     <html>
     <head>
     <title>React Storybook</title>
+    <script type="text/javascript">
+      window.dataId = '${UUID.v4()}';
+    </script>
     </head>
     <body style="margin: 0;">
       <div id="root" />
-      <script src="/static/bundle.js"></script>
+      <script src="/static/admin.bundle.js"></script>
     </body>
     </html>
   `;

src/server/webpack.config.js

@@ -4,14 +4,20 @@ var fs = require('fs');
 
 var config = {
   devtool: 'cheap-module-eval-source-map',
-  entry: [
-    'stack-source-map/register',
-    'webpack-hot-middleware/client',
-    path.resolve(__dirname, '../client/init_ui')
-  ],
+  entry: {
+    admin: [
+      'stack-source-map/register',
+      path.resolve(__dirname, '../client/init_admin')
+    ],
+    live: [
+      'stack-source-map/register',
+      'webpack-hot-middleware/client',
+      // path.resolve(__dirname, '../client/init_preview')
+    ],
+  },
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    filename: '[name].bundle.js',
     publicPath: '/static/'
   },
   plugins: [
@@ -38,7 +44,7 @@ if (!fs.existsSync(storybookConfigPath)) {
   console.error('=> Create a storybook config file in ".storybook/config.js".\n');
   process.exit(0);
 }
-config.entry.push(storybookConfigPath);
+config.entry.live.push(storybookConfigPath);
 
 // load custom webpack configurations
 var customConfigPath = path.resolve(configDir, 'webpack.config.js');