Add the basic version of storybook

.storybook/config.js

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

.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.css?$/,
+        loaders: [ 'style', 'raw' ],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+};

client/modules/comments/containers/comment_list.js

@@ -1,7 +1,7 @@
 import {
   useDeps, composeWithTracker, composeAll
 } from 'mantra-core';
-import Component from '../components/comment_list.jsx';
+import Component from '../components/comment_list.js';
 
 export const composer = ({context, clearErrors, postId}, onData) => {
   const {Meteor, Collections} = context();

client/modules/comments/containers/create_comment.js

@@ -1,7 +1,7 @@
 import {
   useDeps, composeWithTracker, composeAll
 } from 'mantra-core';
-import Component from '../components/create_comment.jsx';
+import Component from '../components/create_comment.js';
 
 export const composer = ({context, clearErrors}, onData) => {
   const {LocalState} = context();

client/modules/core/components/.stories/index.js

@@ -0,0 +1,2 @@
+import '../style.css';
+import './post';

client/modules/core/components/.stories/post.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Post from '../post';
+
+storiesOf('Post', module)
+  .add('default view', () => {
+    const post = {
+      title: 'React storybook is great',
+      content: `
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu
+        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.
+      `,
+    };
+
+    return (
+      <Post post={post} />
+    );
+  })
+  .add('saving', () => {
+    const post = {
+      title: 'React storybook is great',
+      content: `
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu
+        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.
+      `,
+      saving: true,
+    };
+
+    return (
+      <Post post={post} />
+    );
+  });

client/modules/core/components/post.jsx → client/modules/core/components/post.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CommentList from '../../comments/containers/comment_list.js';
+// import CommentList from '../../comments/containers/comment_list.js';
 
 const Post = ({post}) => (
   <div>
@@ -10,7 +10,6 @@ const Post = ({post}) => (
     </p>
     <div>
       <h4>Comments</h4>
-      <CommentList postId={post._id}/>
     </div>
   </div>
 );

package.json

@@ -6,9 +6,11 @@
     "lintfix": "npm run lint -- --fix",
     "testonly": "mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register",
     "test": "npm run lint && npm run testonly",
-    "test-watch": "npm run testonly -- --watch --watch-extensions js,jsx"
+    "test-watch": "npm run testonly -- --watch --watch-extensions js,jsx",
+    "storybook": "storybook-server -p 9001"
   },
   "devDependencies": {
+    "@kadira/storybook": "^0.12.0",
     "babel-core": "6.x.x",
     "babel-plugin-react-require": "2.x.x",
     "babel-polyfill": "6.x.x",
@@ -20,10 +22,12 @@
     "enzyme": "^2.0.0",
     "eslint": "1.10.x",
     "eslint-plugin-react": "3.15.x",
+    "jsdom": "^8.0.4",
     "mocha": "2.x.x",
+    "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^0.14.6",
     "sinon": "1.17.x",
-    "jsdom": "^8.0.4"
+    "style-loader": "^0.13.1"
   },
   "dependencies": {
     "domready": "^1.0.8",