Adding default Storybook config to the project

.gitignore

@@ -25,6 +25,7 @@ node_modules
 
 # build directory
 build
+.out
 
 # Optional npm cache directory
 .npm

.storybook/config.js

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

.storybook/webpack.config.js

@@ -0,0 +1,19 @@
+/**
+ * This webpack config is only used by storybook
+ * We modified it a little bit to mimick the way we load
+ * CSS/Scss files in the main project
+ */
+
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /.scss$/,
+        loaders: ['style', 'css?modules=1', 'sass'],
+        include: path.resolve(__dirname, '../'),
+      },
+    ],
+  },
+};

README.md

@@ -29,6 +29,7 @@ The following are some of the tools included in this starter-kyt:
 The libraries listed here are not present by default in the NYT React Universal Starter Kyt. We added them because we believe they are useful to the majority of the applications we develop.
 
 - [Redux and Redux DevTools](https://github.com/reactjs/redux) - State management. Press CTRL-H to see the DevTools Monitor.
+- [Storybook](https://getstorybook.io/) - Isolated component development and component library
 - [Redux-Thunks](https://github.com/gaearon/redux-thunk) - Thunk middleware for React Redux
 - [Helmet](https://github.com/nfl/react-helmet) - This reusable React component will manage all of your changes to the document head with support for document title, meta, link, style, script, noscript, and base tags.
 - [React SVG loader](https://github.com/boopathi/react-svg-loader) - Used to load SVG files with Webpack and use them as React Components. This inlines the SVG and allows us to style it with CSS and keep our code clean and 'dry'.

package.json

@@ -1,10 +1,12 @@
 {
   "name": "cf-kyt-starter-universal-redux",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A starter kyt with React, Redux, SSR and data fetching.",
   "main": "index.js",
   "scripts": {
     "build": "kyt build --config kyt.config.production.js && sw-precache --config=sw-precache-config.js",
+    "storybook": "start-storybook -p 6006 --dont-track",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -18,8 +20,8 @@
   "homepage": "https://github.com/cleverfranke/cf-kyt-starter-universal-redux#readme",
   "kyt": {
     "version": "^0.4.0",
-    "files": [".eslintrc.json", "sw-precache-config.js"],
-    "scripts": ["build"]
+    "files": [".eslintrc.json", "sw-precache-config.js", ".storybook", "stories"],
+    "scripts": ["build", "storybook", "build-storybook"]
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -48,6 +50,7 @@
     "redux-devtools-log-monitor": "^1.1.1",
     "redux-devtools": "^3.3.1",
     "sw-precache": "^4.3.0",
-    "webpack-merge": "^2.6.1"
+    "webpack-merge": "^2.6.1",
+    "@kadira/storybook": "^2.21.0"
   }
 }

stories/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { Count } from '../src/components/Count';
+import '../src/containers/App/styles.scss';
+
+storiesOf('Count', module)
+  .add('Empty', () => (
+    <Count
+      shouldIncrement={action('increment it')}
+      promiseIncrement={action('promise increment it')}
+      count={0}
+      promiseCount={0}
+      rejectionCount={0}
+      promisePending={false}
+    />
+  ))
+  .add('Promise pending', () => (
+    <Count
+      shouldIncrement={action('increment it')}
+      promiseIncrement={action('promise increment it')}
+      count={0}
+      promiseCount={0}
+      rejectionCount={0}
+      promisePending
+    />
+  ))
+  .add('Count 1', () => (
+    <Count
+      shouldIncrement={action('increment it')}
+      promiseIncrement={action('promise increment it')}
+      count={1}
+      promiseCount={0}
+      rejectionCount={0}
+      promisePending={false}
+    />
+  ))
+  .add('Promise count 1', () => (
+    <Count
+      shouldIncrement={action('increment it')}
+      promiseIncrement={action('promise increment it')}
+      count={0}
+      promiseCount={1}
+      rejectionCount={0}
+      promisePending={false}
+    />
+  ));