Merge pull request #41 from netlify/storybook

Added storybook config & stories

.storybook/config.js

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

.storybook/webpack.config.js

@@ -0,0 +1,34 @@
+/* global module, __dirname, require */
+var webpack = require("webpack");
+const path = require("path");
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader?limit=100000'
+      },
+      { test: /\.json$/, loader: 'json-loader' },
+      {
+        test: /\.css$/,
+        loader: 'style!css?modules&importLoaders=1!postcss'
+      },
+      {
+        loader: 'babel',
+        test: /\.js?$/,
+        exclude: /(node_modules|bower_components)/,
+        query: {
+          cacheDirectory: true,
+          presets: ['react', 'es2015'],
+          plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread']
+        }
+      }
+    ]
+  },
+
+  postcss: [
+    require("postcss-import")({addDependencyTo: webpack}),
+    require("postcss-cssnext")()
+  ],
+};

package.json

@@ -7,7 +7,8 @@
     "start": "webpack-dev-server -d --inline --config webpack.config.js",
     "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
     "test:watch": "npm test -- --watch",
-    "build": "webpack --config webpack.config.js"
+    "build": "webpack --config webpack.config.js",
+    "storybook": "start-storybook -p 9001"
   },
   "keywords": [
     "netlify",
@@ -16,6 +17,7 @@
   "author": "Netlify",
   "license": "MIT",
   "devDependencies": {
+    "@kadira/storybook": "^1.36.0",
     "autoprefixer": "^6.3.3",
     "babel-core": "^6.5.1",
     "babel-eslint": "^4.1.8",
@@ -41,6 +43,7 @@
     "moment": "^2.11.2",
     "normalizr": "^2.0.0",
     "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",

src/components/stories/Card.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card } from '../UI';
+import { storiesOf } from '@kadira/storybook';
+
+const styles = {
+  fixedWidth: { width: 280 },
+  footer: {
+    color: '#aaa',
+    backgroundColor: '#555',
+    textAlign: 'center',
+    marginTop: 5,
+    padding: 10
+  }
+
+}
+
+storiesOf('Card', module)
+  .add('Default View', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <h1>A Card</h1>
+        <h2>Subtitle</h2>
+        <p>
+          Margins are applied to all elements inside a card. <br/>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis vel. Nulla porttitor enim at tellus eget
+          malesuada eleifend. Nunc tellus turpis, tincidunt sed felis facilisis, lacinia condimentum quam. Cras quis
+          tortor fermentum, aliquam tortor eu, consequat ligula. Nulla eget nulla act odio varius ullamcorper turpis.
+          In consequat egestas nulla condimentum faucibus. Donec scelerisque convallis est nec fringila. Suspendisse
+          non lorem non erat congue consequat.
+        </p>
+      </Card>
+    </div>
+  )).add('Full width content', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
+        <h1>Card & cat</h1>
+        <p>Media Elements such as video, img (and iFrame for embeds) don't have margin</p>
+      </Card>
+    </div>
+  )).add('Footer', () => (
+    <div style={styles.fixedWidth}>
+      <Card>
+        <img src="http://www.top13.net/wp-content/uploads/2015/10/perfectly-timed-funny-cat-pictures-5.jpg" />
+        <h1>Now with footer.</h1>
+        <p>header and footer elements are also not subject to margin</p>
+        <footer style={styles.footer}>&copy; Thousand Cats Corp</footer>
+      </Card>
+    </div>
+  ))

src/components/stories/index.js

@@ -0,0 +1,2 @@
+import '../../index.css';
+import './Card';

src/index.css

@@ -2,11 +2,16 @@ html {
   box-sizing: border-box;
 }
 
-html, body, #appRoot, #appRoot > * {
+body {
+  font-family: sans-serif;
   margin: 0;
   height: 100%;
 }
 
+:global #root, :global #root > * {
+  height: 100%;
+}
+
 h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, ol, ul {
   margin: 0;
   padding: 0;

src/index.js

@@ -11,7 +11,7 @@ const store = configureStore();
 window.store = store;
 
 const el = document.createElement('div');
-el.id = 'appRoot';
+el.id = 'root';
 document.body.appendChild(el);
 
 render((

webpack.config.js

@@ -7,12 +7,12 @@ module.exports = {
     loaders: [
       {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file?name=/[hash].[ext]'
+        loader: 'url-loader?limit=100000'
       },
       { test: /\.json$/, loader: 'json-loader' },
       {
         test: /\.css$/,
-        loader: 'style!css?modules!postcss'
+        loader: 'style!css?modules&importLoaders=1!postcss'
       },
       {
         loader: 'babel',
@@ -28,6 +28,7 @@ module.exports = {
   },
 
   postcss: [
+    require('postcss-import')({ addDependencyTo: webpack }),
     require('postcss-cssnext')
   ],