fix(examples): refactor & add code examples (#12)

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories/api.js');
+  require('../stories/weather.js');
+  // require as many stories as you need.
+}
+
+configure(loadStories, module);

README.md

@@ -1,9 +1,10 @@
-# react-indie
+![](./logo.png)
 
 [![npm](https://img.shields.io/npm/v/react-indie.svg)](https://www.npmjs.com/package/react-indie)
 [![Build Status](https://travis-ci.org/gavriguy/react-indie.svg?branch=master)](https://travis-ci.org/gavriguy/react-indie)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
+# react-indie
 
 A React high level component that holds all its logic inside.
 
@@ -46,22 +47,24 @@ The function itself should return a function with 2 params:
     * component - the component itself - good for setting its state. see Widget4
   in the project example for more implementation details.
 
-check out [the example code](https://github.com/gavriguy/react-indie/tree/master/example)
-or [the test code](https://github.com/gavriguy/react-indie/blob/master/test/index.js) for more info.
+Check out [the test code](https://github.com/gavriguy/react-indie/blob/master/test/index.js)
+or indies Storybook [stories](https://github.com/gavriguy/react-indie/tree/master/stories/api.js) for more info.
 
 ## Install
 
 `npm install react-indie --save`
 
 ## Live Playground
+React-Indie uses [the awesome Storybook Project](https://github.com/kadirahq/react-storybook) to showcase the component's options.
 
 * clone this repo on your machine
 * `npm install`
-* `npm run example`
-* visit `http://localhost:8080/`
+* `npm run storybook`
+* visit `http://localhost:9001/`
 
-> You can also run test by calling `npm test`
+> You can also run tests by calling `npm test`
 
 ## Acknowledgements
 
 The package code setup inspired from https://github.com/airbnb/rheostat
+The example are presented as Storybook stories https://github.com/kadirahq/react-storybook

package.json

@@ -6,9 +6,9 @@
     "test": "ava -v",
     "build": "npm run clean && babel src -d lib",
     "clean": "rimraf lib",
-    "example": "webpack-dev-server --content-base example/",
     "prepublish": "npm run build",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "storybook": "start-storybook -p 9001"
   },
   "author": "gavriguy",
   "repository": {
@@ -25,7 +25,9 @@
     "lodash": "^4.0.0"
   },
   "devDependencies": {
+    "@kadira/storybook": "1.13.0",
     "ava": "0.14.0",
+    "axios": "0.9.1",
     "babel": "6.5.2",
     "babel-cli": "6.7.5",
     "babel-loader": "6.2.4",
@@ -41,6 +43,7 @@
     "eslint-plugin-jsx-a11y": "0.6.2",
     "eslint-plugin-react": "4.3.0",
     "jsdom": "8.3.1",
+    "material-ui": "0.14.4",
     "react": "15.0.1",
     "react-addons-test-utils": "15.0.1",
     "react-dom": "15.0.1",

src/index.js

@@ -5,6 +5,8 @@ import { forEach, isFunction, reduce } from 'lodash';
 export default (ReactComponent, propsConfig, onResolve) => class extends Component {
   constructor(props) {
     super(props);
+  }
+  componentWillMount() {
     [this.defaultProps, this.loadedProps, this.errorProps] = [{}, {}, {}];
     forEach(propsConfig, ([defaultProp, loadedProp, errorProp], key) => {
       this.defaultProps[key] = defaultProp;

stories/api.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { SimpleComponent } from './components/SimpleComponent';
+import indie from '../src/index.js';
+
+
+// helpers
+
+function mockAjaxRequest() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('Loaded title');
+    }, 1000);
+  });
+}
+
+function mockErrorAjaxRequest() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(new Error('Some server error'));
+    }, 1000);
+  });
+}
+
+storiesOf('API', module)
+  .add('Basic Example', () => {
+    const propsConfig = {
+      title: ['Loading...', mockAjaxRequest()],
+      subtitle: ['Please wait', 'Loaded subtitle'],
+      bgColor: ['#ccc', '#1bc98e'],
+    };
+    const Widget = indie(SimpleComponent, propsConfig);
+    return (<Widget />);
+  })
+  .add('Handle Server error', () => {
+    const propsConfig = {
+      title: ['Loading...', mockErrorAjaxRequest(), 'Something went wrong...'],
+      subtitle: ['Please wait', 'Loaded subtitle', 'Unknown error'],
+      bgColor: ['#ccc', '#1bc98e', 'red'],
+    };
+    const Widget = indie(SimpleComponent, propsConfig);
+    return (<Widget />);
+  })
+  .add('Handle Server error + show server error message', () => {
+    const propsConfig = {
+      title: ['Loading...', mockErrorAjaxRequest(), 'Something went wrong...'],
+      subtitle: ['Please wait', 'Loaded subtitle', (err) => (err.message)],
+      bgColor: ['#ccc', '#1bc98e', 'red'],
+    };
+    const Widget = indie(SimpleComponent, propsConfig);
+    return (<Widget />);
+  })
+  .add('Handle onResolve', () => {
+    function mockOnResolve() {
+      return (props, component) => {
+        let num = props.subtitle;
+        setInterval(() => {
+          component.setState({ subtitle: num++ });
+        }, 1000);
+      };
+    }
+    const propsConfig = {
+      title: ['Loading...', mockAjaxRequest()],
+      subtitle: ['Please wait', 1],
+      bgColor: ['#ccc', '#1bc98e'],
+    };
+    const Widget = indie(SimpleComponent, propsConfig, mockOnResolve);
+    return (<Widget />);
+  });

stories/components/Weather.js

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import Paper from 'material-ui/lib/paper';
+
+export const Weather = (props) => {
+  console.log(props);
+  const style = {
+    container: {
+      width: 400,
+      padding: 15,
+      background: '#4A90E2',
+      color: '#fff',
+      fontWeight: 100,
+    },
+    inner: {
+      marginTop: '0.5em',
+    },
+    heading: {
+      fontSize: 40,
+    },
+  };
+  return (
+    <Paper style={ style.container } zDepth={1}>
+      <div style={ style.heading }>New York</div>
+      <p style={ style.inner }>{ props.weatherDescription }</p>
+      <div style={style.heading}>
+        { props.temp }<small>°C</small>
+      </div>
+    </Paper>
+  );
+};

stories/weather.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import axios from 'axios';
+import { Weather } from './components/Weather';
+import indie from '../src/index.js';
+
+storiesOf('Weather', module)
+  .add('Basic Example', () => {
+    const APPID = 'f08136975f949dad9ee0192e087d5397';
+    const WEATHER_END_POINT =
+      `http://api.openweathermap.org/data/2.5/weather?q=New%20York,us&units=metric&appid=${APPID}`;
+    let weatherData = {};
+    function getNewYorkWeather() {
+      if (weatherData.main) return weatherData;
+      return axios.get(WEATHER_END_POINT)
+      .then(({ data }) => {
+        weatherData = data;
+        return {
+          weatherDescription: data.weather[0].main,
+          temp: data.main.temp,
+        };
+      });
+    }
+    function getNewYorkWeatherDesc() {
+      return getNewYorkWeather()
+        .then(({ weatherDescription }) => (weatherDescription));
+    }
+    function getNewYorkWeatherTemp() {
+      return getNewYorkWeather()
+        .then(({ temp }) => (Math.round(temp)));
+    }
+
+    const propsConfig = {
+      City: ['New York'],
+      weatherDescription: ['Loading...', getNewYorkWeatherDesc()],
+      temp: ['--', getNewYorkWeatherTemp()],
+    };
+    const Widget = indie(Weather, propsConfig);
+    return (<Widget />);
+  });