updated react to 16.1.1, removed linkedInputs (#1082)

* updated react to 16.1.1, removed linkedInputs

* updated enzyme

* updated yarn.lock

* migrated enzyme to use adapter for react 16

* fixed few components

packages/@coorpacademy-app-player/package.json

@@ -43,8 +43,8 @@
     "@coorpacademy/translate": "5.3.11",
     "@coorpacademy/webpack-config": "6.2.2",
     "lodash": "^4.17.4",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0"
   },

packages/@coorpacademy-components/package.json

@@ -56,20 +56,18 @@
     "postcss-color-function": "^4.0.0",
     "postcss-easy-import": "^2.1.0",
     "postcss-modules-values-replace": "^1.2.1",
-    "prop-types": "^15.5.10",
     "qs": "6.5.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-jw-player": "1.10.0",
-    "react-linked-input": "^15.5.1"
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-jw-player": "1.10.0"
   },
   "devDependencies": {
     "@coorpacademy/css-modules-require-hook": "0.0.2",
     "@coorpacademy/translate": "5.3.11",
     "@coorpacademy/webpack-config": "6.2.2",
-    "@storybook/addon-knobs": "^3.1.8",
-    "@storybook/addons": "^3.1.6",
-    "@storybook/react": "^3.1.8",
+    "@storybook/addon-knobs": "^3.2.15",
+    "@storybook/addons": "^3.2.15",
+    "@storybook/react": "^3.2.15",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
@@ -83,7 +81,8 @@
     "compression-webpack-plugin": "^1.0.0",
     "concurrently": "^3.5.0",
     "cross-env": "^5.0.0",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
     "express": "^4.15.3",
     "extract-text-webpack-plugin": "^3.0.0",
     "fs-extra": "3.0.1",
@@ -96,8 +95,8 @@
     "mkdirp-promise": "5.0.1",
     "path-match": "^1.2.4",
     "postcss-loader": "^2.0.5",
-    "prop-types": "^15.5.10",
-    "react-test-renderer": "^15.5.4",
+    "prop-types": "^15.6.0",
+    "react-test-renderer": "^16.1.1",
     "rimraf": "^2.6.1",
     "slash": "^1.0.0",
     "style-loader": "^0.18.1",
@@ -112,7 +111,8 @@
     ],
     "require": [
       "babel-register",
-      "babel-polyfill"
+      "babel-polyfill",
+      "../../test/helpers/throw-warning"
     ],
     "babel": "inherit"
   },

packages/@coorpacademy-components/src/atom/button/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import LinkedInput from 'react-linked-input';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {ColorPropType} from '../../util/proptypes';
@@ -55,7 +54,7 @@ const ButtonContent = props => {
 
     default:
       return (
-        <LinkedInput
+        <input
           data-name={dataName}
           type={type}
           value={submitValue}

packages/@coorpacademy-components/src/atom/checkbox/test/on-change.js

@@ -1,9 +1,12 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Checkbox from '..';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function and toggle the value on change', t => {
   t.plan(5);
   const expectedOnChangeValues = [false, true];

packages/@coorpacademy-components/src/atom/clue/test/see-clue.js

@@ -1,12 +1,15 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import replace from 'lodash/fp/replace';
 import Clue from '..';
 import style from '../style.css'; // eslint-disable-line css-modules/no-unused-class
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should See the clue', t => {
   const context = {
     skin: {},

packages/@coorpacademy-components/src/atom/cta/test/hover.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Cta from '..';
 import ctaFixture from './fixtures/primary';
 
+configure({adapter: new Adapter()});
+
 const context = {
   skin: {
     common: {

packages/@coorpacademy-components/src/atom/image-upload/test/dragging.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import ImageUpload from '..';
 import desktopFixture from './fixtures/desktop';
 
+configure({adapter: new Adapter()});
+
 test('should set state to dragging when user starts dragging', t => {
   const wrapper = shallow(<ImageUpload {...desktopFixture.props} />);
   const instance = wrapper.instance();

packages/@coorpacademy-components/src/atom/input-checkbox/test/on-change.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import InputCheckbox from '..';
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function with the checked value of the target', t => {
   t.plan(2);
   const expectedOnChangeValues = [false, true];

packages/@coorpacademy-components/src/atom/input-color/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LinkedInput from 'react-linked-input';
 import noop from 'lodash/fp/noop';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
@@ -27,7 +26,7 @@ const InputColor = props => {
     <div className={className}>
       <label>
         <span className={style.title}>{`${title} `}</span>
-        <LinkedInput
+        <input
           type="text"
           name={title}
           className={style.input}

packages/@coorpacademy-components/src/atom/input-doublestep/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import LinkedInput from 'react-linked-input';
 import PropTypes from 'prop-types';
 import omit from 'lodash/fp/omit';
 import noop from 'lodash/fp/noop';
@@ -13,7 +12,7 @@ const ConfirmationInput = ({onChange, placeholder = ''}) => {
 
   return (
     <div>
-      <LinkedInput
+      <input
         onInput={handleOnChange}
         placeholder={placeholder}
         className={style.input}

packages/@coorpacademy-components/src/atom/input-doublestep/test/on-change.js

@@ -2,11 +2,14 @@ import 'jsdom-global/register';
 import test from 'ava';
 import {replace} from 'lodash/fp';
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import InputDoublestep from '..';
 import style from '../style.css'; // eslint-disable-line css-modules/no-unused-class
 import inputConfirmFixture from './fixtures/input-confirm';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function on change with inputConfirm fixture', t => {
   const deleteStyle = `.${replace(' ', '.', style.delete)}`;
   const inputStyle = `.${replace(' ', '.', style.input)}`;

packages/@coorpacademy-components/src/atom/input-html/test/on-change.js

@@ -1,13 +1,16 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow, mount} from 'enzyme';
+import {shallow, mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import omit from 'lodash/fp/omit';
 import replace from 'lodash/fp/replace';
 import InputHtml from '..';
 import style from '../style.css'; // eslint-disable-line css-modules/no-unused-class
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function with the value of the target', t => {
   t.plan(15);
   const inputStyle = `.${replace(' ', '.', style.input)}`;

packages/@coorpacademy-components/src/atom/input-switch/test/on-change.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import InputSwitch from '..';
 import defaultFixture from './fixtures/checked';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function with the checked value of the target', t => {
   t.plan(2);
   const expectedOnChangeValues = [false, true];

packages/@coorpacademy-components/src/atom/input-text/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import LinkedInput from 'react-linked-input';
 import PropTypes from 'prop-types';
 import noop from 'lodash/fp/noop';
 import getClassState from '../../util/get-class-state';
@@ -26,7 +25,7 @@ const InputText = props => {
     <div className={className}>
       <label>
         <span className={style.title}>{title}</span>
-        <LinkedInput
+        <input
           type="text"
           name={title}
           className={style.input}

packages/@coorpacademy-components/src/atom/input-textarea/test/on-change.js

@@ -1,11 +1,14 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import InputTextarea from '..';
 import omit from 'lodash/fp/omit';
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should call the onChange function with the value of the target', t => {
   t.plan(1);
   const onChange = value => {

packages/@coorpacademy-components/src/atom/link/test/index.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import once from 'lodash/fp/once';
 import Link from '..';
 
+configure({adapter: new Adapter()});
+
 test('should call listeners within props', t => {
   t.plan(3);
 

packages/@coorpacademy-components/src/atom/provider/test/index.js

@@ -1,11 +1,14 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Provider from '..';
 import noop from 'lodash/fp/noop';
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should re-render element when updating props', t => {
   const history = {
     createHref: noop,

packages/@coorpacademy-components/src/atom/range/test/handle.js

@@ -1,9 +1,12 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Handle from '../handle';
 
+configure({adapter: new Adapter()});
+
 test('should instanciate Handle', t => {
   const handler = mount(<Handle />);
   handler.unmount();

packages/@coorpacademy-components/src/atom/range/test/index.js

@@ -1,11 +1,14 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import noop from 'lodash/fp/noop';
 import Range from '..'; // eslint-disable-line no-shadow
 import style from '../style.css'; // eslint-disable-line css-modules/no-unused-class
 
+configure({adapter: new Adapter()});
+
 const defaultEvent = {
   stopPropagation: noop,
   preventDefault: noop

packages/@coorpacademy-components/src/atom/select/test/on-change.js

@@ -1,10 +1,13 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Select from '..';
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should call onChange with the target value if multiple=false', t => {
   t.plan(1);
   const onChange = value => {

packages/@coorpacademy-components/src/atom/tab/test/on-click.js

@@ -1,11 +1,14 @@
 import 'jsdom-global/register';
 import test from 'ava';
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import Tab from '..';
 import style from '../style.css'; // eslint-disable-line css-modules/no-unused-class
 import defaultFixture from './fixtures/default';
 
+configure({adapter: new Adapter()});
+
 test('should call onClick with the targetContent value', t => {
   t.plan(1);
   const onClick = value => {

packages/@coorpacademy-components/src/molecule/brand-create-form/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import LinkedInput from 'react-linked-input';
 import PropTypes from 'prop-types';
 import Button from '../../atom/button';
 import style from './style.css';
@@ -12,7 +11,6 @@ const BrandCreateForm = props => {
   const fieldClass = field.error ? style.error : style.default;
   const disabled = isPending || !isModified;
   const handleChange = e => field.onChange(e.target.value);
-
   return (
     <div className={wrapperClass}>
       <div className={style.header}>
@@ -23,10 +21,10 @@ const BrandCreateForm = props => {
         <div className={style.description}>{description}</div>
         <div className={fieldClass}>
           <label>
-            <LinkedInput
+            <input
               type="text"
               placeholder={field.placeholder}
-              value={field.value}
+              defaultValue={field.value}
               onInput={handleChange}
             />
             {field.label}