Upgrade to react 16 (#191)

* Upgrade react to version 16, update to enzyme 3

* Use enzyme adapter, start fixing tests

* Upgrade storybook, babel and webpack dependencies

* Upgrade babel-preset-flow, fix testrunner to work with webpack 3

* Accept react 0.13 to 16 as peer dependency

* Remove setProps calls, since they dont seem to be working right

* Refactor test component to use state and setState instead of setProps

* Fix linting

* Remove chai-enzyme

* Remove unused import

* Remove flow typechecking from storybook until its upgraded to flow 0.54+

* Require node_js version > 5

* Ignore flow typechecks for radium depdendency

* Fix webpack config to match new api

* Add test for react16 fragment support

* Extended fragment test to also render a string component

* Include react 0.13.x and 16.x.x in peer dependency version range

* Fix prop type and make sure we dont pass style props to flipMove

* Upgrade to storybook 3.2.12

* Individually check if items are falsy, return them if they are

* disable linting error for prop filtering

.flowconfig

@@ -3,6 +3,8 @@
 .*/node_modules/editions/.*
 .*/node_modules/flow-coverage-report/.*
 .*/node_modules/preact/.*
+.*/node_modules/@storybook/.*
+.*/node_modules/radium/.*
 
 [include]
 

.storybook/config.js

@@ -1,10 +1,11 @@
 /* eslint-disable */
-import { configure } from '@kadira/storybook';
+import React from 'react';
+import { configure } from '@storybook/react';
 
 const req = require.context('../stories', true, /\.stories\.js$/);
 
 function loadStories() {
   req.keys().forEach((filename) => req(filename));
 }
 
-configure(loadStories, module);
+configure(loadStories, module);

.travis.yml

@@ -3,7 +3,6 @@ cache:
   directories:
     - node_modules
 node_js:
-  - "4"
   - "6"
   - "8"
 before_script:

karma.conf.js

@@ -26,7 +26,7 @@ module.exports = function createConfig(config) {
         loaders: [
           {
             test: /\.jsx?$/,
-            loader: 'babel',
+            loader: 'babel-loader',
             exclude: /node_modules/,
           },
         ],

package.json

@@ -46,29 +46,29 @@
     "web-animations"
   ],
   "peerDependencies": {
-    "react": "0.13.x || 0.14.x || 15.x.x",
-    "react-dom": "0.13.x || 0.14.x || 15.x.x"
+    "react": ">=0.13.x <=16.x.x",
+    "react-dom": ">=0.13.x <=16.x.x"
   },
   "devDependencies": {
-    "@kadira/storybook": "2.30.1",
-    "@types/react": "15.0.24",
-    "babel": "6.1.18",
-    "babel-cli": "6.2.0",
-    "babel-core": "6.2.1",
+    "@storybook/react": "3.2.12",
+    "@types/react": "16.0.7",
+    "babel": "6.23.0",
+    "babel-cli": "6.26.0",
+    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
-    "babel-loader": "6.2.1",
+    "babel-loader": "7.1.2",
     "babel-plugin-add-module-exports": "0.1.1",
     "babel-plugin-istanbul": "4.1.4",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-object-assign": "6.3.13",
-    "babel-preset-es2015": "6.1.18",
-    "babel-preset-flow": "6.23.0",
-    "babel-preset-react": "6.3.13",
-    "babel-preset-stage-0": "6.1.18",
-    "chai": "3.5.0",
-    "chai-enzyme": "0.7.1",
-    "create-react-class": "15.5.2",
-    "enzyme": "2.8.2",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-flow": "7.0.0-beta.2",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-0": "6.24.1",
+    "chai": "4.1.2",
+    "create-react-class": "15.6.2",
+    "enzyme": "3.0.0",
+    "enzyme-adapter-react-16": "^1.0.0",
     "eslint": "3.10.0",
     "eslint-config-airbnb": "12.0.0",
     "eslint-config-prettier": "^2.3.0",
@@ -82,28 +82,28 @@
     "flow-bin": "0.54.0",
     "flow-coverage-report": "0.3.0",
     "husky": "0.14.1",
-    "karma": "0.13.19",
+    "karma": "1.7.1",
     "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "0.2.2",
+    "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "1.1.1",
-    "karma-mocha": "0.2.1",
-    "karma-sinon": "1.0.4",
-    "karma-sinon-chai": "1.1.0",
+    "karma-mocha": "1.3.0",
+    "karma-sinon": "1.0.5",
+    "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "1.7.0",
+    "karma-webpack": "2.0.4",
     "lodash": "4.3.0",
-    "mocha": "2.4.5",
+    "mocha": "3.5.3",
     "preact": "8.1.0",
     "preact-compat": "3.16.0",
     "prettier": "^1.6.1",
     "prop-types": "15.5.8",
-    "react": "15.6.1",
-    "react-dom": "15.6.1",
-    "react-test-renderer": "15.6.1",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "react-test-renderer": "16",
     "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
     "tslint": "5.2.0",
     "typescript": "2.3.2",
-    "webpack": "1.12.11"
+    "webpack": "3.6.0"
   }
 }

stories/appear-animations.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 import FlipMoveListItem from './helpers/FlipMoveListItem';

stories/enter-leave-animations.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 import FlipMoveListItem from './helpers/FlipMoveListItem';

stories/github-issues.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-plusplus */
 import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import range from 'lodash/range';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';

stories/helpers/FlipMoveWrapper.js

@@ -133,6 +133,11 @@ class FlipMoveWrapper extends Component {
     }
 
     return items.map(item => {
+      // Support falsy children by passing them straight to FlipMove
+      if (!item) {
+        return item;
+      }
+
       let text = item.text;
 
       if (item.count) {

stories/hooks.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 

stories/invalid.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 

stories/legacy.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import shuffle from 'lodash/shuffle';
 import range from 'lodash/range';
 import PropTypes from 'prop-types';
@@ -260,6 +260,16 @@ class Controls extends Component {
   }
 
   render() {
+    /* eslint-disable no-unused-vars */
+    const {
+      childInnerStyles,
+      childOuterStyles,
+      styleFirstChild,
+      firstChildInnerStyles,
+      firstChildOuterStyles,
+      ...filteredProps
+    } = this.props;
+    /* eslint-enable no-unused-vars */
     return (
       <div
         style={{
@@ -272,7 +282,7 @@ class Controls extends Component {
           <button onClick={this.buttonClickHandler}>Remove</button>
           <button onClick={this.restore}>Restore</button>
         </div>
-        <FlipMove {...this.props}>{this.renderItems()}</FlipMove>
+        <FlipMove {...filteredProps}>{this.renderItems()}</FlipMove>
       </div>
     );
   }
@@ -281,7 +291,7 @@ Controls.propTypes = {
   mode: PropTypes.string,
   childOuterStyles: PropTypes.object,
   childInnerStyles: PropTypes.object,
-  styleFirstChild: PropTypes.object,
+  styleFirstChild: PropTypes.bool,
   firstChildOuterStyles: PropTypes.object,
   firstChildInnerStyles: PropTypes.object,
 };

stories/misc.stories.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMove from '../src';
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';

stories/primary.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 import FlipMoveListItem from './helpers/FlipMoveListItem';

stories/sequencing.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';
 import FlipMoveListItem from './helpers/FlipMoveListItem';

stories/special-props.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import FlipMoveWrapper from './helpers/FlipMoveWrapper';