Change internal code to use storybook instead of papers

dist/client/index.js

@@ -19,21 +19,21 @@ var _ui2 = _interopRequireDefault(_ui);
 
 var _data = require('./data');
 
-var _papers = require('./papers');
+var _storybook = require('./storybook');
 
-var _papers2 = _interopRequireDefault(_papers);
+var _storybook2 = _interopRequireDefault(_storybook);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function storiesOf(component, m) {
-  // XXX: Add a better way to create paper and mutate them.
+function storiesOf(kind, m) {
+  // XXX: Add a better way to create stories and mutate them.
   m.hot.dispose(function () {
-    delete _papers2.default[component];
+    delete _storybook2.default[kind];
   });
 
-  _papers2.default[component] = {};
+  _storybook2.default[kind] = {};
   function add(storyName, fn) {
-    _papers2.default[component][storyName] = fn;
+    _storybook2.default[kind][storyName] = fn;
     return { add: add };
   }
 
@@ -41,18 +41,18 @@ function storiesOf(component, m) {
 }
 
 function getStories() {
-  return _papers2.default;
+  return _storybook2.default;
 }
 
-function renderMain(papers) {
+function renderMain(stories) {
   var data = (0, _data.getData)();
   data.error = null;
 
-  data.selectedPaper = _papers2.default[data.selectedPaper] ? data.selectedPaper : (0, _keys2.default)(_papers2.default)[0];
+  data.selectedKind = _storybook2.default[data.selectedKind] ? data.selectedKind : (0, _keys2.default)(_storybook2.default)[0];
 
-  if (data.selectedPaper) {
-    var story = _papers2.default[data.selectedPaper];
-    data.selectedBlock = story[data.selectedBlock] ? data.selectedBlock : (0, _keys2.default)(story)[0];
+  if (data.selectedKind) {
+    var _stories = _storybook2.default[data.selectedKind];
+    data.selectedStory = _stories[data.selectedStory] ? data.selectedStory : (0, _keys2.default)(_stories)[0];
   }
 
   (0, _data.setData)(data);

dist/client/stories.js

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

dist/client/storybook.js

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

dist/client/ui/controls.js

@@ -34,18 +34,18 @@ var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var PaperControls = function (_React$Component) {
-  (0, _inherits3.default)(PaperControls, _React$Component);
+var StorybookControls = function (_React$Component) {
+  (0, _inherits3.default)(StorybookControls, _React$Component);
 
-  function PaperControls() {
-    (0, _classCallCheck3.default)(this, PaperControls);
-    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(PaperControls).apply(this, arguments));
+  function StorybookControls() {
+    (0, _classCallCheck3.default)(this, StorybookControls);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(StorybookControls).apply(this, arguments));
   }
 
-  (0, _createClass3.default)(PaperControls, [{
+  (0, _createClass3.default)(StorybookControls, [{
     key: 'render',
     value: function render() {
-      var paperNames = this.getPaperNames();
+      var kindNames = this.getKindNames();
       var mainStyle = {
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
         padding: '20px 10px 10px 10px',
@@ -78,40 +78,40 @@ var PaperControls = function (_React$Component) {
         _react2.default.createElement(
           'div',
           null,
-          paperNames.map(this.renderPaper.bind(this))
+          kindNames.map(this.renderKind.bind(this))
         )
       );
     }
   }, {
-    key: 'renderPaper',
-    value: function renderPaper(paper) {
-      var paperStyle = {
+    key: 'renderKind',
+    value: function renderKind(kind) {
+      var kindStyle = {
         fontSize: 16,
         padding: '10px 0px',
         cursor: 'pointer',
         borderBottom: '1px solid #EEE'
       };
 
-      var selectedPaper = this.props.selectedPaper;
+      var selectedKind = this.props.selectedKind;
 
-      if (paper === selectedPaper) {
-        var blockNames = this.getBlocks(selectedPaper);
-        paperStyle.fontWeight = 'bold';
+      if (kind === selectedKind) {
+        var stories = this.getStories(selectedKind);
+        kindStyle.fontWeight = 'bold';
         return _react2.default.createElement(
           'div',
-          { key: paper },
+          { key: kind },
           _react2.default.createElement(
             'div',
             {
-              style: paperStyle,
-              onClick: this.fireOnPaper.bind(this, paper)
+              style: kindStyle,
+              onClick: this.fireOnKind.bind(this, kind)
             },
-            paper
+            kind
           ),
           _react2.default.createElement(
             'div',
             null,
-            blockNames.map(this.renderBlock.bind(this))
+            stories.map(this.renderStory.bind(this))
           )
         );
       }
@@ -119,78 +119,78 @@ var PaperControls = function (_React$Component) {
       return _react2.default.createElement(
         'div',
         {
-          key: paper,
-          style: paperStyle,
-          onClick: this.fireOnPaper.bind(this, paper)
+          key: kind,
+          style: kindStyle,
+          onClick: this.fireOnKind.bind(this, kind)
         },
-        paper
+        kind
       );
     }
   }, {
-    key: 'renderBlock',
-    value: function renderBlock(block) {
-      var selectedBlock = this.props.selectedBlock;
+    key: 'renderStory',
+    value: function renderStory(story) {
+      var selectedStory = this.props.selectedStory;
 
-      var blockStyle = {
+      var storyStyle = {
         fontSize: 14,
         padding: '8px 0px 8px 3px',
         cursor: 'pointer'
       };
 
-      if (block === selectedBlock) {
-        blockStyle.fontWeight = 'bold';
+      if (story === selectedStory) {
+        storyStyle.fontWeight = 'bold';
       }
       return _react2.default.createElement(
         'div',
         {
-          key: block,
-          style: blockStyle,
-          onClick: this.fireOnBlock.bind(this, block)
+          key: story,
+          style: storyStyle,
+          onClick: this.fireOnStory.bind(this, story)
         },
-        block
+        story
       );
     }
   }, {
-    key: 'getPaperNames',
-    value: function getPaperNames() {
+    key: 'getKindNames',
+    value: function getKindNames() {
       var _props = this.props;
-      var papers = _props.papers;
-      var selectedPaper = _props.selectedPaper;
+      var storybook = _props.storybook;
+      var selectedKind = _props.selectedKind;
 
-      if (!papers) {
+      if (!storybook) {
         return [];
       }
 
-      return (0, _keys2.default)(papers).sort(function (name) {
-        return name === selectedPaper ? -1 : 1;
+      return (0, _keys2.default)(storybook).sort(function (name) {
+        return name === selectedKind ? -1 : 1;
       });
     }
   }, {
-    key: 'getBlocks',
-    value: function getBlocks(paperName) {
-      var papers = this.props.papers;
+    key: 'getStories',
+    value: function getStories(kind) {
+      var storybook = this.props.storybook;
 
-      var blocks = papers[paperName];
-      return (0, _keys2.default)(blocks);
+      var stories = storybook[kind];
+      return (0, _keys2.default)(stories);
     }
   }, {
-    key: 'fireOnPaper',
-    value: function fireOnPaper(paper) {
-      var _props$onPaper = this.props.onPaper;
-      var onPaper = _props$onPaper === undefined ? function () {} : _props$onPaper;
+    key: 'fireOnKind',
+    value: function fireOnKind(kind) {
+      var _props$onKind = this.props.onKind;
+      var onKind = _props$onKind === undefined ? function () {} : _props$onKind;
 
-      onPaper(paper);
+      onKind(kind);
     }
   }, {
-    key: 'fireOnBlock',
-    value: function fireOnBlock(block) {
-      var _props$onBlock = this.props.onBlock;
-      var onBlock = _props$onBlock === undefined ? function () {} : _props$onBlock;
+    key: 'fireOnStory',
+    value: function fireOnStory(story) {
+      var _props$onStory = this.props.onStory;
+      var onStory = _props$onStory === undefined ? function () {} : _props$onStory;
 
-      onBlock(block);
+      onStory(story);
     }
   }]);
-  return PaperControls;
+  return StorybookControls;
 }(_react2.default.Component);
 
-exports.default = PaperControls;
+exports.default = StorybookControls;

dist/client/ui/index.js

@@ -36,9 +36,9 @@ var _layout2 = _interopRequireDefault(_layout);
 
 var _data = require('../data');
 
-var _papers = require('../papers');
+var _storybook = require('../storybook');
 
-var _papers2 = _interopRequireDefault(_papers);
+var _storybook2 = _interopRequireDefault(_storybook);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,12 +56,12 @@ function renderUI(data) {
     'There is no blocks yet!'
   );
 
-  var paper = _papers2.default[data.selectedPaper];
-  if (paper) {
-    var block = _papers2.default[data.selectedPaper][data.selectedBlock];
-    if (block) {
+  var stories = _storybook2.default[data.selectedKind];
+  if (stories) {
+    var story = _storybook2.default[data.selectedKind][data.selectedStory];
+    if (story) {
       try {
-        main = block();
+        main = story();
       } catch (error) {
         return (0, _data.setData)({ error: error });
       }
@@ -73,11 +73,11 @@ function renderUI(data) {
 
 function getControls(data) {
   return _react2.default.createElement(_controls2.default, {
-    papers: _papers2.default,
-    selectedPaper: data.selectedPaper,
-    selectedBlock: data.selectedBlock,
-    onPaper: setSelectedPaper,
-    onBlock: setSelectedBlock });
+    storybook: _storybook2.default,
+    selectedKind: data.selectedKind,
+    selectedStory: data.selectedStory,
+    onKind: setSelectedKind,
+    onStory: setSelectedStory });
 }
 
 function getIframe(data) {
@@ -118,15 +118,15 @@ function renderMain(data, main) {
 }
 
 // Event handlers
-function setSelectedPaper(paper) {
+function setSelectedKind(kind) {
   var data = (0, _data.getData)();
-  data.selectedPaper = paper;
-  data.selectedBlock = (0, _keys2.default)(_papers2.default[paper])[0];
+  data.selectedKind = kind;
+  data.selectedStory = (0, _keys2.default)(_storybook2.default[kind])[0];
   (0, _data.setData)(data);
 }
 
-function setSelectedBlock(block) {
+function setSelectedStory(block) {
   var data = (0, _data.getData)();
-  data.selectedBlock = block;
+  data.selectedStory = block;
   (0, _data.setData)(data);
 }

src/client/index.js

@@ -5,17 +5,17 @@ import {
   watchData
 } from './data';
 
-import stories from './papers';
+import storybook from './storybook';
 
-export function storiesOf(component, m) {
-  // XXX: Add a better way to create paper and mutate them.
+export function storiesOf(kind, m) {
+  // XXX: Add a better way to create stories and mutate them.
   m.hot.dispose(() => {
-    delete stories[component];
+    delete storybook[kind];
   });
 
-  stories[component] = {};
+  storybook[kind] = {};
   function add(storyName, fn) {
-    stories[component][storyName] = fn;
+    storybook[kind][storyName] = fn;
     return {add};
   }
 
@@ -23,20 +23,20 @@ export function storiesOf(component, m) {
 }
 
 export function getStories() {
-  return stories;
+  return storybook;
 }
 
-export function renderMain(papers) {
+export function renderMain(stories) {
   const data = getData();
   data.error = null;
 
-  data.selectedPaper =
-    (stories[data.selectedPaper])? data.selectedPaper : Object.keys(stories)[0];
+  data.selectedKind =
+    (storybook[data.selectedKind])? data.selectedKind : Object.keys(storybook)[0];
 
-  if (data.selectedPaper) {
-    const story = stories[data.selectedPaper];
-    data.selectedBlock =
-      (story[data.selectedBlock])? data.selectedBlock : Object.keys(story)[0];
+  if (data.selectedKind) {
+    const stories = storybook[data.selectedKind];
+    data.selectedStory =
+      (stories[data.selectedStory])? data.selectedStory : Object.keys(stories)[0];
   }
 
   setData(data);

src/client/papers.js

@@ -1,2 +0,0 @@
-const papers = {};
-export default papers;

src/client/storybook.js

@@ -0,0 +1,2 @@
+const storybook = {};
+export default storybook;

src/client/ui/controls.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-export default class PaperControls extends React.Component {
+export default class StorybookControls extends React.Component {
   render() {
-    const paperNames = this.getPaperNames();
+    const kindNames = this.getKindNames();
     const mainStyle = {
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
       padding: '20px 10px 10px 10px',
@@ -28,86 +28,86 @@ export default class PaperControls extends React.Component {
       <div style={mainStyle}>
         <h3 style={h1Style}>React Storybook</h3>
         <div>
-          {paperNames.map(this.renderPaper.bind(this))}
+          {kindNames.map(this.renderKind.bind(this))}
         </div>
       </div>
     )
   }
 
-  renderPaper(paper) {
-    const paperStyle = {
+  renderKind(kind) {
+    const kindStyle = {
       fontSize: 16,
       padding: '10px 0px',
       cursor: 'pointer',
       borderBottom: '1px solid #EEE'
     };
 
-    const {selectedPaper} = this.props;
-    if (paper === selectedPaper) {
-      const blockNames = this.getBlocks(selectedPaper);
-      paperStyle.fontWeight = 'bold';
+    const {selectedKind} = this.props;
+    if (kind === selectedKind) {
+      const stories = this.getStories(selectedKind);
+      kindStyle.fontWeight = 'bold';
       return (
-        <div key={paper}>
+        <div key={kind}>
           <div
-            style={paperStyle}
-            onClick={this.fireOnPaper.bind(this, paper)}
-            >{paper}</div>
+            style={kindStyle}
+            onClick={this.fireOnKind.bind(this, kind)}
+            >{kind}</div>
           <div>
-            {blockNames.map(this.renderBlock.bind(this))}
+            {stories.map(this.renderStory.bind(this))}
           </div>
         </div>
       );
     }
 
     return (<div
-      key={paper}
-      style={paperStyle}
-      onClick={this.fireOnPaper.bind(this, paper)}
-      >{paper}</div>);
+      key={kind}
+      style={kindStyle}
+      onClick={this.fireOnKind.bind(this, kind)}
+      >{kind}</div>);
   }
 
-  renderBlock(block) {
-    const {selectedBlock} = this.props;
-    const blockStyle = {
+  renderStory(story) {
+    const {selectedStory} = this.props;
+    const storyStyle = {
       fontSize: 14,
       padding: '8px 0px 8px 3px',
       cursor: 'pointer',
     };
 
-    if (block === selectedBlock) {
-      blockStyle.fontWeight = 'bold';
+    if (story === selectedStory) {
+      storyStyle.fontWeight = 'bold';
     }
     return (<div
-      key={block}
-      style={blockStyle}
-      onClick={this.fireOnBlock.bind(this, block)}
-      >{block}</div>);
+      key={story}
+      style={storyStyle}
+      onClick={this.fireOnStory.bind(this, story)}
+      >{story}</div>);
   }
 
-  getPaperNames() {
-    const {papers, selectedPaper} = this.props;
-    if (!papers) {
+  getKindNames() {
+    const {storybook, selectedKind} = this.props;
+    if (!storybook) {
       return [];
     }
 
     return Object
-      .keys(papers)
-      .sort(name => name === selectedPaper? -1 : 1);
+      .keys(storybook)
+      .sort(name => name === selectedKind? -1 : 1);
   }
 
-  getBlocks(paperName) {
-    const {papers} = this.props;
-    const blocks = papers[paperName];
-    return Object.keys(blocks);
+  getStories(kind) {
+    const {storybook} = this.props;
+    const stories = storybook[kind];
+    return Object.keys(stories);
   }
 
-  fireOnPaper(paper) {
-    const {onPaper = function() {}} = this.props;
-    onPaper(paper);
+  fireOnKind(kind) {
+    const {onKind = function() {}} = this.props;
+    onKind(kind);
   }
 
-  fireOnBlock(block) {
-    const {onBlock = function() {}} = this.props;
-    onBlock(block);
+  fireOnStory(story) {
+    const {onStory = function() {}} = this.props;
+    onStory(story);
   }
 }

src/client/ui/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReadBox from 'redbox-react';
-import PaperControls from './controls';
+import StorybookControls from './controls';
 import Layout from './layout';
 import {setData, getData} from '../data';
-import papers from '../papers';
+import storybook from '../storybook';
 
 const rootEl = document.getElementById('root');
 
@@ -16,12 +16,12 @@ export default function renderUI(data) {
   // default main
   let main = (<p>There is no blocks yet!</p>);
 
-  const paper = papers[data.selectedPaper];
-  if (paper) {
-    const block = papers[data.selectedPaper][data.selectedBlock];
-    if (block) {
+  const stories = storybook[data.selectedKind];
+  if (stories) {
+    const story = storybook[data.selectedKind][data.selectedStory];
+    if (story) {
       try {
-        main = block();
+        main = story();
       } catch(error) {
         return setData({error});
       }
@@ -33,12 +33,12 @@ export default function renderUI(data) {
 
 export function getControls(data) {
   return (
-    <PaperControls
-      papers={papers}
-      selectedPaper={data.selectedPaper}
-      selectedBlock={data.selectedBlock}
-      onPaper={setSelectedPaper}
-      onBlock={setSelectedBlock}/>
+    <StorybookControls
+      storybook={storybook}
+      selectedKind={data.selectedKind}
+      selectedStory={data.selectedStory}
+      onKind={setSelectedKind}
+      onStory={setSelectedStory}/>
   );
 }
 
@@ -82,15 +82,15 @@ export function renderMain(data, main) {
 }
 
 // Event handlers
-function setSelectedPaper(paper) {
+function setSelectedKind(kind) {
   const data = getData();
-  data.selectedPaper = paper;
-  data.selectedBlock = Object.keys(papers[paper])[0];
+  data.selectedKind = kind;
+  data.selectedStory = Object.keys(storybook[kind])[0];
   setData(data);
 }
 
-function setSelectedBlock(block) {
+function setSelectedStory(block) {
   const data = getData();
-  data.selectedBlock = block;
+  data.selectedStory = block;
   setData(data);
 }