Implement storybook

.storybook/config.js

@@ -0,0 +1,12 @@
+import { configure, setAddon } from '@kadira/storybook'
+import infoAddon from '@kadira/react-storybook-addon-info'
+
+setAddon(infoAddon)
+
+const req = require.context('../src/common/components', true, /.stories.js$/)
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /.scss$/,
+        loaders: ['style', 'css', 'sass'],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+}

README.md

@@ -35,6 +35,16 @@ $ on postinstall you should choose between SASS or CSSNEXT
 
 ## Some NPM Script Commands
 
+
+### Storybook
+
+```shell
+$ npm run storybook
+```
+
+Starts Storybook on `http://localhost:6006/``
+
+
 ### Development
 
 ```shell
@@ -176,7 +186,8 @@ Personally I use [Redux DevTools for Chrome](https://chrome.google.com/webstore/
 * [why-did-you-update](https://github.com/garbles/why-did-you-update)
 * [babel-preset-latest](https://babeljs.io/docs/plugins/preset-latest/)
 * Backend bundle with webpack
-* Code Splitting ( ** for now doesn't work with React Router 4. You can use an old version of this starter [`2.0.5`](https://github.com/kiki-le-singe/react-redux-universal-boilerplate/releases/tag/2.0.5) **)
+* Code Splitting ( ** for now doesn't work with React Router 4. You can use an old version of this starter [`2.0.5`](https://github.com/kiki-le-singe/react-redux-universal-boilerplate/releases/tag/2.0.5) ** )
+* [Storybook](https://github.com/storybooks/storybook)
 
 
 ## Styles

package.json

@@ -48,6 +48,8 @@
   },
   "main": "src/server/index.js",
   "dependencies": {
+    "@kadira/react-storybook-addon-info": "^3.4.0",
+    "@kadira/storybook": "^2.21.0",
     "autoprefixer": "^6.7.7",
     "babel-core": "^6.24.1",
     "babel-runtime": "^6.23.0",
@@ -150,7 +152,9 @@
     "test:dev": "npm run test -- --watch",
     "lint": "eslint src tests --ext .jsx,.js",
     "setup": "better-npm-run setup",
-    "postinstall": "npm run setup"
+    "postinstall": "npm run setup",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "betterScripts": {
     "dev": {

src/common/components/Hello/Hello.stories.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { storiesOf } from '@kadira/storybook'
+import Hello from './Hello'
+
+import '../../styles/global/views/hello.scss'
+
+storiesOf('Hello', module)
+  .addWithInfo(
+    'without props',
+    `
+      This is the basic usage with the Hello component.
+    `,
+    () => (
+      <Hello />
+    )
+  )
+  .addWithInfo(
+    'with name props as string',
+    `
+      This is the basic usage with the name props as string.
+    `,
+    () => (
+      <Hello name="World" />
+    )
+  )
+  .addWithInfo(
+    'with name props as element',
+    `
+      This is the basic usage with the name props as element.
+    `,
+    () => (
+      <Hello name={<span className="text">World!</span>} />
+    )
+  )
+  .addWithInfo(
+    'with some styles',
+    `
+      This is the basic usage with some styles.
+    `,
+    () => (
+      <div className="view__hello">
+        <Hello name={<span className="text">World!</span>} />
+      </div>
+    )
+  )