chore(dependencies): upgrade react, react-router, and jest

The goal of this patch is to resolve warnings present when using Belle in a React 15.x codebase.
This patch should not change the behaviour of Belle.

Details:

 - tests, docs, and examples: upgraded to React 15.x
 - docs: upgraded to React Router 2.5.2 for compatibility with React 15.x
   (see remix-run/react-router#3695)
 - src, tests, docs, and examples: fixed various warnings introduced throughout React 15.x
 - tests: upgraded Jest for compatibility with Node 6 (jestjs/jest#1088)

Testing:

 - verified that there were no React-related warnings in tests, docs, and examples
 - browsed docs and examples in Chrome and FF

docs/components/Configuration.js

@@ -309,13 +309,15 @@ export default class Configuration extends Component {
 
       <p>
         Localization support exist for date picker component. For date picker following parameters are required to be provided for a locale:
-        <ul>
-          <li><span style={{ fontWeight: 'bold' }}>monthNames</span>: Array for month names from January to December</li>
-          <li><span style={{ fontWeight: 'bold' }}>dayNamesMin</span>: Array for day short names</li>
-          <li><span style={{ fontWeight: 'bold' }}>firstDay</span>: First day of week (0 for Sunday, 1 for Monday, ...)</li>
-          <li><span style={{ fontWeight: 'bold' }}>weekEnd</span>: Weekend in that locale (0 for Sunday, 1 for Monday, ...)</li>
-          <li><span style={{ fontWeight: 'bold' }}>isRTL</span>: The text in that locale is written from right to left</li>
-        </ul>
+      </p>
+      <ul>
+        <li><span style={{ fontWeight: 'bold' }}>monthNames</span>: Array for month names from January to December</li>
+        <li><span style={{ fontWeight: 'bold' }}>dayNamesMin</span>: Array for day short names</li>
+        <li><span style={{ fontWeight: 'bold' }}>firstDay</span>: First day of week (0 for Sunday, 1 for Monday, ...)</li>
+        <li><span style={{ fontWeight: 'bold' }}>weekEnd</span>: Weekend in that locale (0 for Sunday, 1 for Monday, ...)</li>
+        <li><span style={{ fontWeight: 'bold' }}>isRTL</span>: The text in that locale is written from right to left</li>
+      </ul>
+      <p>
         In case any of these fields is not provided the defaults for English calendar will be used.
       </p>
 

docs/components/Home.js

@@ -54,7 +54,7 @@ export default class Home extends Component {
                           marginLeft: 60, }}
             >React Core Team</div>
           </div>
-          <div stlye={{ clear: 'both' }}></div>
+          <div style={{ clear: 'both' }}></div>
         </div>
 
         <h3>Browser Support</h3>

docs/components/guides/IntroducingBelle.js

@@ -92,7 +92,7 @@ export default class Why extends Component {
             React Core Team
           </div>
         </div>
-        <div stlye={{ clear: 'both' }}></div>
+        <div style={{ clear: 'both' }}></div>
       </div>
 
       <p>Let’s have a look at two of the components and walk you through some of the details we took care of.</p>

docs/package.json

@@ -15,10 +15,10 @@
   "dependencies": {
     "highlight.js": "=9.2.0",
     "history": "^2.0.1",
-    "react": "=15.0.0-rc.2",
-    "react-addons-linked-state-mixin": "^=15.0.0-rc.2",
-    "react-dom": "^=15.0.0-rc.2",
-    "react-router": "=v2.0.1",
+    "react": "^=15.3.2",
+    "react-addons-linked-state-mixin": "^=15.3.2",
+    "react-dom": "^=15.3.2",
+    "react-router": "=v2.5.2",
     "uglify-js": "=2.6.2",
     "underscore": "=1.8.3"
   },

examples/components/DatePickerPlayground.js

@@ -6,7 +6,7 @@ export default React.createClass({
   _renderDay(day) {
     const date = day.getDate();
     return (
-      <div onMouseDown={::this._onMouseDown}>
+      <div onMouseDown={this._onMouseDown}>
         🎁{ date }
       </div>
     );

examples/components/SelectPlayground.js

@@ -28,8 +28,8 @@ export default React.createClass({
       <div>
         <h2>Select</h2>
 
-        <h3>Native Select with value</h3>
-        <select value="B">
+        <h3>Native Select with value (read-only)</h3>
+        <select value="B" readOnly>
           <option value="A">Apple</option>
           <option value="B">Banana</option>
           <option value="C">Cranberry</option>

examples/package.json

@@ -13,9 +13,9 @@
     "url": "http://github.com/nikgraf/belle.git"
   },
   "dependencies": {
-    "react": "=15.0.0-rc.2",
-    "react-addons-linked-state-mixin": "^15.0.0-rc.2",
-    "react-dom": "^15.0.0-rc.2",
+    "react": "=15.3.2",
+    "react-addons-linked-state-mixin": "^15.3.2",
+    "react-dom": "^15.3.2",
     "underscore": "=1.8.3"
   },
   "devDependencies": {

package.json

@@ -22,8 +22,8 @@
     "react-component"
   ],
   "peerDependencies": {
-    "react": ">=0.14.0 || ^15.0.0-rc",
-    "react-dom": ">=0.14.0 || ^15.0.0-rc"
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0"
   },
   "scripts": {
     "build": "BABEL_ENV=production node_modules/.bin/babel --out-dir='lib' --ignore='__tests__/*' src",
@@ -57,11 +57,11 @@
     "eslint-config-airbnb": "6.2.0",
     "eslint-plugin-mocha": "^2.0.0",
     "eslint-plugin-react": "^4.2.3",
-    "jest-cli": "^0.9.2",
+    "jest-cli": "^15.1.1",
     "jscs": "^2.11.0",
-    "react": "^15.0.0-rc.2",
-    "react-addons-test-utils": "^15.0.0-rc.2",
-    "react-dom": "^15.0.0-rc.2",
+    "react": "^15.3.2",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.2",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.2",
@@ -70,7 +70,8 @@
     "webpack-hot-middleware": "^2.10.0"
   },
   "jest": {
-    "testRunner": "<rootDir>/node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js",
+    "testRunner": "jasmine2",
+    "automock": true,
     "unmockedModulePathPatterns": [
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/fbjs",
@@ -80,8 +81,7 @@
       "../utils/union-class-names",
       "../utils/is-component-of-type"
     ],
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
-    "preprocessCachingDisabled": true
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest"
   },
   "license": "MIT",
   "dependencies": {

src/__tests__/ComboBox-test.js

@@ -33,7 +33,7 @@ describe('ComboBox', () => {
       </ComboBox>
     );
 
-    expect(combobox.state.inputValue).toBe(undefined);
+    expect(combobox.state.inputValue).toBe('');
     expect(React.Children.count(combobox.filteredOptions)).toBe(2);
   });
 

src/__tests__/DatePicker-test.js

@@ -46,7 +46,7 @@ describe('DatePicker', () => {
     const dayPickerWrapper = TestUtils.scryRenderedDOMComponentsWithClass(datePicker, 'date_picker_wrapper')[0];
     TestUtils.Simulate.focus(dayPickerWrapper);
     TestUtils.Simulate.keyDown(dayPickerWrapper, { key: 'Enter' });
-    expect(datePicker.state.selectedDate).toBeGreaterThan(0);
+    expect(+datePicker.state.selectedDate).toBeGreaterThan(0);
   });
 
   describe('injecting styles', () => {
@@ -84,8 +84,8 @@ describe('DatePicker', () => {
     const dayPickerWrapper = TestUtils.scryRenderedDOMComponentsWithClass(datePicker, 'date_picker_wrapper')[0];
     TestUtils.Simulate.focus(dayPickerWrapper);
     TestUtils.Simulate.keyDown(dayPickerWrapper, { key: ' ' });
-    expect(datePicker.state.selectedDate).toBeGreaterThan(0);
-    expect(dateSelected).toBeGreaterThan(0);
+    expect(+datePicker.state.selectedDate).toBeGreaterThan(0);
+    expect(+dateSelected).toBeGreaterThan(0);
 
     // expect(dateSelected.getDay()).toBeGreaterThan(0);
     TestUtils.Simulate.keyDown(dayPickerWrapper, { key: ' ' });
@@ -236,7 +236,7 @@ describe('DatePicker', () => {
     const datePickerDays = TestUtils.scryRenderedDOMComponentsWithClass(datePicker, 'date_picker_day');
     const firstDay = ReactDOM.findDOMNode(datePickerDays[0]).textContent;
     const secondDay = ReactDOM.findDOMNode(datePickerDays[1]).textContent;
-    expect(firstDay).toBeGreaterThan(secondDay);
+    expect(+firstDay).toBeGreaterThan(+secondDay);
   });
 
   it('should change selectedDate when a day receives mouseDown with button 0', () => {
@@ -251,12 +251,12 @@ describe('DatePicker', () => {
     TestUtils.Simulate.mouseDown(day, { button: 0 });
     TestUtils.Simulate.mouseUp(day, { button: 0 });
     const newDate = datePicker.state.selectedDate;
-    expect(datePicker.state.selectedDate).toBeGreaterThan(0);
+    expect(+datePicker.state.selectedDate).toBeGreaterThan(0);
     expect(dateSelected.getDay()).toBeGreaterThan(0);
     day = TestUtils.scryRenderedDOMComponentsWithClass(datePicker, 'day_test')[10];
     TestUtils.Simulate.mouseDown(day, { button: 1 });
     TestUtils.Simulate.mouseUp(day, { button: 1 });
-    expect(datePicker.state.selectedDate).toBe(newDate);
+    expect(+datePicker.state.selectedDate).toBe(+newDate);
   });
 
   it('should not change selectedDate in state if component uses value property', () => {

src/components/ActionArea.js

@@ -1,5 +1,30 @@
 import React, { Component, PropTypes } from 'react';
 import actionAreaStyle from '../style/actionArea';
+import { omit } from '../utils/helpers';
+
+const actionAreaPropTypes = {
+  activeStyle: PropTypes.object,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  hoverStyle: PropTypes.object,
+  onTouchStart: PropTypes.func,
+  onTouchEnd: PropTypes.func,
+  onTouchCancel: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+
+  // TODO investigate how we solve mouseUp in other compents (like the right click edgecase)
+  onMouseUp: PropTypes.func,
+  onUpdate: PropTypes.func,
+  style: PropTypes.object,
+};
+
+function sanitizeChildProps(properties) {
+  return omit(properties, Object.keys(actionAreaPropTypes));
+}
 
 /**
  * ActionArea
@@ -16,31 +41,11 @@ export default class ActionArea extends Component {
 
   constructor(properties) {
     super(properties);
-    const { style, ...childProps } = properties; // eslint-disable-line no-unused-vars
-    this.childProps = childProps;
+    this.childProps = sanitizeChildProps(properties);
   }
 
   static displayName = 'ActionArea';
-
-  static propTypes = {
-    activeStyle: PropTypes.object,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-    hoverStyle: PropTypes.object,
-    onTouchStart: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-    onTouchCancel: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-
-    // TODO investigate how we solve mouseUp in other compents (like the right click edgecase)
-    onMouseUp: PropTypes.func,
-    onUpdate: PropTypes.func,
-    style: PropTypes.object,
-  };
+  static propTypes = actionAreaPropTypes;
 
   state = {
     // Note: On touch devices mouseEnter is fired while mouseLeave is not.
@@ -58,8 +63,7 @@ export default class ActionArea extends Component {
    * Update the childProps based on the updated properties passed to the card.
    */
   componentWillReceiveProps(properties) {
-    const { style, ...childProps } = properties; // eslint-disable-line no-unused-vars
-    this.childProps = childProps;
+    this.childProps = sanitizeChildProps(properties);
   }
 
   /**

src/components/Button.js

@@ -1,39 +1,46 @@
 import React, { Component, PropTypes } from 'react'; // eslint-disable-line no-unused-vars
-import { has, uniqueId } from '../utils/helpers';
+import { has, omit, uniqueId } from '../utils/helpers';
 import buttonStyle from '../style/button';
 import unionClassNames from '../utils/union-class-names';
 import { injectStyles, removeStyle } from '../utils/inject-style';
 import config from '../config/button';
 
 const buttonTypes = ['button', 'submit', 'reset']; // eslint-disable-line no-unused-vars
 
+const buttonPropTypes = {
+  activeStyle: PropTypes.object,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  type: PropTypes.oneOf(buttonTypes),
+  style: PropTypes.object,
+  focusStyle: PropTypes.object,
+  hoverStyle: PropTypes.object,
+  disabledStyle: PropTypes.object,
+  disabledHoverStyle: PropTypes.object,
+  onTouchStart: PropTypes.func,
+  onTouchEnd: PropTypes.func,
+  onTouchCancel: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  preventFocusStyleForTouchAndClick: PropTypes.bool,
+  primary: PropTypes.bool,
+};
+
 /**
  * Returns an object with properties that are relevant for the button element.
  *
  * In case a wrong or no type is defined the type of the child button will be
  * set to `button`.
  */
 function sanitizeChildProps(properties) {
-  const {
-    className, // eslint-disable-line no-unused-vars
-    style, // eslint-disable-line no-unused-vars
-    hoverStyle, // eslint-disable-line no-unused-vars
-    focusStyle, // eslint-disable-line no-unused-vars
-    activeStyle, // eslint-disable-line no-unused-vars
-    disabledStyle, // eslint-disable-line no-unused-vars
-    disabledHoverStyle, // eslint-disable-line no-unused-vars
-    primary, // eslint-disable-line no-unused-vars
-    onTouchStart, // eslint-disable-line no-unused-vars
-    onTouchEnd, // eslint-disable-line no-unused-vars
-    onTouchCancel, // eslint-disable-line no-unused-vars
-    onMouseDown, // eslint-disable-line no-unused-vars
-    onMouseEnter, // eslint-disable-line no-unused-vars
-    onMouseLeave, // eslint-disable-line no-unused-vars
-    onFocus, // eslint-disable-line no-unused-vars
-    onBlur, // eslint-disable-line no-unused-vars
-    ...childProps,
-  } = properties;
-  return childProps;
+  return omit(properties, Object.keys(buttonPropTypes));
 }
 
 /**
@@ -132,31 +139,7 @@ export default class Button extends Component {
 
   static displayName = 'Button';
 
-  static propTypes = {
-    activeStyle: PropTypes.object,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    type: PropTypes.oneOf(buttonTypes),
-    style: PropTypes.object,
-    focusStyle: PropTypes.object,
-    hoverStyle: PropTypes.object,
-    disabledStyle: PropTypes.object,
-    disabledHoverStyle: PropTypes.object,
-    onTouchStart: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-    onTouchCancel: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    preventFocusStyleForTouchAndClick: PropTypes.bool,
-    primary: PropTypes.bool,
-  };
+  static propTypes = buttonPropTypes;
 
   static defaultProps = {
     primary: false,
@@ -375,6 +358,8 @@ export default class Button extends Component {
         onMouseDown={ this._onMouseDown }
         onMouseEnter={ this._onMouseEnter }
         onMouseLeave={ this._onMouseLeave }
+        disabled={ this.props.disabled }
+        type={ this.props.type }
         {...this.state.childProps}
       >
         { this.props.children }