added react-storybook support

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories');
+  // require as many stories as you need.
+}
+
+configure(loadStories, module);

package.json

@@ -31,6 +31,7 @@
     "aphrodite": "^0.3.0"
   },
   "devDependencies": {
+    "@kadira/storybook": "^1.28.1",
     "backbone": "~1.1.2",
     "browserify": "^10.0.0",
     "jquery": "~2.1.1",
@@ -51,6 +52,7 @@
   },
   "scripts": {
     "test": "make test",
-    "prepublish": "node prepublish.js"
+    "prepublish": "node prepublish.js",
+    "storybook": "start-storybook -p 9001"
   }
 }

stories/blur-input.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import BlurInput from '../js/blur-input.jsx';
+
+storiesOf('BlurInput', module)
+  .add('default', () => (
+    <BlurInput
+      value='sample value'
+      onChange={action('on-change')}
+    />
+  ));
+

stories/button-group.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import ButtonGroup from '../js/button-group.jsx';
+
+storiesOf('ButtonGroup', module)
+  .add('default', () => (
+    <ButtonGroup value="red"
+      buttons={[
+          {value: 'red', content: 'red'},
+          {value: 'green', content: 'green'},
+          {value: 'blue', content: 'blue'}
+      ]}
+      onChange={action('onchange')}
+    />
+  ));
+

stories/drag-target.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import DragTarget from '../js/drag-target.jsx';
+
+storiesOf('DragTarget', module)
+  .add('default', () => (
+    <DragTarget onDrop={action('on-drop')}>
+      sample message
+    </DragTarget>
+  ));
+

stories/index.js

@@ -0,0 +1,10 @@
+import './button-group';
+import './blur-input';
+import './drag-target';
+import './modal';
+import './info-tip';
+import './layered-component-mixin';
+import './multi-button-group';
+import './sortable';
+import './timeago';
+import './tooltip';

stories/info-tip.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import InfoTip from '../js/info-tip.jsx';
+
+storiesOf('InfoTip', module)
+  .add('default', () => (
+    <InfoTip>
+      <p>
+        <a href="http://sims.wikia.com/wiki/Reticulating_splines">meaningless phrase</a>
+      </p>
+    </InfoTip>
+  ));
+

stories/layered-component-mixin.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import DragTarget from '../js/drag-target.jsx';
+
+storiesOf('LayeredComponentMixin', module)
+  .add('default', () => (
+    <DragTarget onDrop={action('on-drop')}>
+      sample message
+    </DragTarget>
+  ));
+

stories/modal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Modal from '../js/modal.jsx';
+
+storiesOf('Modal', module)
+  .add('default', () => (
+    <Modal onClose={action('close')}>
+      <div className="modal-header">
+          Header
+          <a href="javascript: void 0;"
+             style={{float: "right", textDecoration: "none"}}
+             onClick={action('close')}>
+              &#215;
+          </a>
+      </div>
+      <div className="modal-body">Body!</div>
+    </Modal>
+  ));
+

stories/multi-button-group.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import MultiButtonGroup from '../js/multi-button-group.jsx';
+
+storiesOf('MultiButtonGroup', module)
+  .add('default', () => (
+    <MultiButtonGroup
+      values='red'
+      buttons={[
+        {value: 'red', content: 'red'},
+        {value: 'green', content: 'green'},
+        {value: 'blue', content: 'blue'}
+      ]}
+      onChange={action('on-change')}
+    />
+  ));
+

stories/sortable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Sortable from '../js/sortable.jsx';
+
+const components = [
+  <div draggable={true} key="1">1</div>,
+  <div draggable={true} key="2">2</div>,
+  <div draggable={true} key="3">3</div>,
+  <div draggable={true} key="4">4</div>
+];
+
+storiesOf('sortable', module)
+  .add('default', () => (
+    <Sortable
+      components={components}
+     onReorder={action('onReorder')}
+     className="sidebar-list"
+     verify={() => true}
+    />
+  ));
+

stories/timeago.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import TimeAgo from '../js/timeago.jsx';
+
+storiesOf('TimeAgo', module)
+  .add('default', () => (
+    <TimeAgo time={new Date()} />
+  ));
+

stories/tooltip.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Tooltip from '../js/tooltip.jsx';
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip
+      horizontalPosition="left"
+      horizontalAlign="left"
+      verticalPosition="bottom"
+      arrowSize={10}
+      borderColor="#ccc"
+      show
+    >
+      <div>reticulating splines!</div>
+      <p>
+        <a href="http://sims.wikia.com/wiki/Reticulating_splines">meaningless phrase</a>
+      </p>
+    </Tooltip>
+  ));
+