Merge branch 'kschaper-react-storybook'

.dockerignore

@@ -3,3 +3,4 @@
 public/system
 public/assets
 node_modules
+storybook

package.json

@@ -1,9 +1,11 @@
 {
   "name": "mastodon",
   "scripts": {
-    "test": "mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.jsx"
+    "test": "mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.jsx",
+    "storybook": "start-storybook -p 9001 -c storybook"
   },
   "devDependencies": {
+    "@kadira/storybook": "^2.24.0",
     "axios": "^0.14.0",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",

storybook/config.js

@@ -0,0 +1,16 @@
+import { configure } from '@kadira/storybook';
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import './storybook.css'
+
+window.storiesOf = storiesOf;
+window.action    = action;
+window.React     = React;
+
+function loadStories () {
+  require('./stories/loading_indicator.story.jsx');
+  require('./stories/button.story.jsx');
+}
+
+configure(loadStories, module);

storybook/stories/button.story.jsx

@@ -0,0 +1,15 @@
+import Button from '../../app/assets/javascripts/components/components/button.jsx'
+
+storiesOf('Button', module)
+  .add('default state', () => (
+    <Button text="submit" onClick={action('clicked')} />
+  ))
+  .add('secondary', () => (
+    <Button secondary text="submit" onClick={action('clicked')} />
+  ))
+  .add('disabled', () => (
+    <Button disabled text="submit" onClick={action('clicked')} />
+  ))
+  .add('block', () => (
+    <Button block text="submit" onClick={action('clicked')} />
+  ));

storybook/stories/loading_indicator.story.jsx

@@ -0,0 +1,6 @@
+import LoadingIndicator from '../../app/assets/javascripts/components/components/loading_indicator.jsx'
+
+storiesOf('LoadingIndicator', module)
+  .add('default state', () => (
+    <LoadingIndicator />
+  ));

storybook/storybook.css

@@ -0,0 +1,3 @@
+#root {
+  padding: 4rem;
+}