New <Counter /> example (lyef#10)

* Add bable-cli as dev dependency to use local babel command on build

* Remove unnecessary parentheses

* Replace Foo example with new Counter component

* Import PropTypes separately

* Fix specs and add sinon-chai as dev dependency

* Replace alert by storybook action log

* Update dist

* Update main from package.json with new component

* Change import order

* Revert "Remove unnecessary parentheses"

This reverts commit b7815f210e61c964879ea5b3585e0bed9542bf79.

dist/Counter.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var propTypes = {
+    start: _react.PropTypes.number.isRequired,
+    end: _react.PropTypes.number.isRequired,
+    done: _react.PropTypes.func
+};
+
+var Counter = function (_React$Component) {
+    _inherits(Counter, _React$Component);
+
+    function Counter(props) {
+        _classCallCheck(this, Counter);
+
+        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Counter).call(this, props));
+
+        _this.state = { count: props.start };
+
+        _this.increment = _this.increment.bind(_this);
+        _this.decrement = _this.decrement.bind(_this);
+        return _this;
+    }
+
+    _createClass(Counter, [{
+        key: 'componentWillMount',
+        value: function () {
+            function componentWillMount() {
+                this.setState({ count: this.props.start });
+
+                if (this.props.start < this.props.end) {
+                    this.intervalId = setInterval(this.increment, 1000);
+                } else {
+                    this.intervalId = setInterval(this.decrement, 1000);
+                }
+            }
+
+            return componentWillMount;
+        }()
+    }, {
+        key: 'isDone',
+        value: function () {
+            function isDone() {
+                if (this.state.count === this.props.end) {
+                    clearInterval(this.intervalId);
+                    if (this.props.done) {
+                        this.props.done();
+                    }
+                }
+            }
+
+            return isDone;
+        }()
+    }, {
+        key: 'increment',
+        value: function () {
+            function increment() {
+                this.setState({ count: this.state.count + 1 });
+                this.isDone();
+            }
+
+            return increment;
+        }()
+    }, {
+        key: 'decrement',
+        value: function () {
+            function decrement() {
+                this.setState({ count: this.state.count - 1 });
+                this.isDone();
+            }
+
+            return decrement;
+        }()
+    }, {
+        key: 'render',
+        value: function () {
+            function render() {
+                return _react2['default'].createElement(
+                    'span',
+                    null,
+                    this.state.count
+                );
+            }
+
+            return render;
+        }()
+    }]);
+
+    return Counter;
+}(_react2['default'].Component);
+
+Counter.propTypes = propTypes;
+
+exports['default'] = Counter;

package.json

@@ -2,9 +2,9 @@
   "name": "react-component-base",
   "version": "0.1.0",
   "description": "An opinionated structure for reusable and declouped react components.",
-  "main": "dist/Foo.js",
+  "main": "dist/Counter.js",
   "scripts": {
-    "build": "npm run clean && babel src -d dist",
+    "build": "npm run clean && ./node_modules/.bin/babel src -d dist",
     "clean": "rimraf dist",
     "storybook": "./node_modules/.bin/start-storybook -p 9001 -c ./storybook",
     "test": "./node_modules/.bin/mocha --require tests/helpers/setup.js tests/specs/**/*.spec.js",
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@kadira/storybook": "^1.38.0",
     "assert-equal-jsx": "^1.0.3",
+    "babel-cli": "^6.11.4",
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
     "babel-preset-airbnb": "^2.0.0",
@@ -53,6 +54,7 @@
     "react-addons-test-utils": "^15.2.1",
     "rimraf": "^2.5.3",
     "sinon": "^1.17.4",
+    "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1"
   },
   "dependencies": {

src/Counter.js

@@ -0,0 +1,55 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+    start: PropTypes.number.isRequired,
+    end: PropTypes.number.isRequired,
+    done: PropTypes.func,
+};
+
+class Counter extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { count: props.start };
+
+        this.increment = this.increment.bind(this);
+        this.decrement = this.decrement.bind(this);
+    }
+
+    componentWillMount() {
+        this.setState({ count: this.props.start });
+
+        if (this.props.start < this.props.end) {
+            this.intervalId = setInterval(this.increment, 1000);
+        } else {
+            this.intervalId = setInterval(this.decrement, 1000);
+        }
+    }
+
+    isDone() {
+        if (this.state.count === this.props.end) {
+            clearInterval(this.intervalId);
+            if (this.props.done) {
+                this.props.done();
+            }
+        }
+    }
+
+    increment() {
+        this.setState({ count: this.state.count + 1 });
+        this.isDone();
+    }
+
+    decrement() {
+        this.setState({ count: this.state.count - 1 });
+        this.isDone();
+    }
+
+    render() {
+        return <span>{this.state.count}</span>;
+    }
+}
+
+Counter.propTypes = propTypes;
+
+export default Counter;

stories/Counter.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Counter from '../src/Counter'; // This is our component
+import { storiesOf, action } from '@kadira/storybook';
+
+storiesOf('Counter', module)
+    .add('with count down', () => (
+        <Counter start={10} end={0} />
+    ))
+    .add('with normal counting', () => (
+        <Counter start={0} end={10} />
+    ))
+    .add('with callback when done', () => (
+        <Counter start={10} end={0} done={action('done')} />
+    ))

storybook/config.js

@@ -3,7 +3,7 @@ import { configure } from '@kadira/storybook';
 import '../css/main.css';
 
 function loadStories() {
-  require('../stories/Foo.js');
+  require('../stories/Counter.js');
 }
 
 configure(loadStories, module);