Upgrade to React 16

Fix usage of node on elements

Upgrade dependencies

Loosen peer dependency

Fix linting errors

Fix object formatting

Fix version ranges

Fix messenger payload reducer

Updating yarn lock

Adding types for react-transition-group

Adding changelog entry

Author: dfmcphee

.yarnclean

@@ -0,0 +1 @@
+**/*/node_modules/@types/react/

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Consistently use contractions in public README (thanks [stefanmiodrag](https://github.com/stefanmiodrag) for the [original pull request](https://github.com/Shopify/polaris/pull/191)) ([#682](https://github.com/Shopify/polaris-react/pull/682))
 
 ### Enhancements
+* Added support for React 16 ([#699](https://github.com/Shopify/polaris-react/pull/699))
 * Added an option to show or hide unpublished products from the resource picker ([#628](https://github.com/Shopify/polaris-react/pull/628))
 * Minor updates to the Spinner documentation ([#696](https://github.com/Shopify/polaris-react/pull/696))
 * Changed Popover component to use `react-transition-group` instead of our deprecated custom version in `@shopify/react-utilities` ([#718](https://github.com/Shopify/polaris-react/pull/718))

config/jest/config.json

@@ -1,5 +1,6 @@
 {
   "setupFiles": [
+    "<rootDir>/config/jest/shim.js",
     "<rootDir>/tests/setup.ts"
   ],
   "testRegex": "[\\w+]\\.test\\.(tsx?|js)$",

config/jest/shim.js

@@ -0,0 +1,9 @@
+// Fixes an error where requestAnimationFrame wouldn't be available and throw:
+//
+// console.error node_modules/fbjs/lib/warning.js:33
+// Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills
+//
+// See https://github.com/facebook/jest/issues/4545
+global.requestAnimationFrame = (callback) => {
+  setTimeout(callback, 0);
+};

config/rollup/minified-classname.js

@@ -5,7 +5,8 @@ const cssNames = (function* () {
   const max = parseInt('zz', base);
   const maxLength = max - min;
   const taken = new Set([
-    parseInt('ad', base), // Avoid terms that may be flagged by content blockers.
+    // Avoid terms that may be flagged by content blockers.
+    parseInt('ad', base),
   ]);
 
   while (taken.size < maxLength) {

config/typescript/modules.d.ts

@@ -1,6 +0,0 @@
-declare module 'hoist-non-react-statics' {
-  import {ComponentClass} from 'react';
-
-  function hoistNonReactStatics<P>(to: ComponentClass<P>, from: ComponentClass<any>): ComponentClass<P>;
-  export = hoistNonReactStatics;
-}

package.json

@@ -55,35 +55,36 @@
   },
   "devDependencies": {
     "@shopify/js-uploader": "github:Shopify/js-uploader",
-    "@types/enzyme": "^2.8.0",
-    "@types/jest": "^19.2.3",
+    "@types/enzyme": "^2.8.12",
+    "@types/jest": "^21.1.2",
     "@types/lodash": "^4.14.66",
     "@types/node": "^8.0.0",
     "@types/react-hot-loader": "^3.0.1",
-    "archiver": "^1.3.0",
+    "archiver": "^2.1.0",
     "awesome-typescript-loader": "^3.1.3",
     "aws-sdk": "^2.58.0",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-jest": "^20.0.3",
+    "babel-jest": "^21.2.0",
     "babel-loader": "^7.0.0",
     "babel-preset-shopify": "^16.0.2",
     "change-case": "^3.0.1",
     "copyfiles": "^1.2.0",
-    "crypto": "^0.0.3",
+    "crypto": "^1.0.1",
     "css-loader": "^0.28.3",
     "cssnano": "^3.10.0",
-    "enzyme": "^2.8.2",
-    "eslint": "^3.15.0",
-    "eslint-plugin-shopify": "^16.0.0",
-    "file-loader": "^0.11.1",
-    "fs-extra": "^3.0.1",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
+    "eslint": "^4.8.0",
+    "eslint-plugin-shopify": "^17.1.0",
+    "file-loader": "^1.1.5",
+    "fs-extra": "^4.0.2",
     "generic-names": "^1.0.2",
     "glob": "^7.1.2",
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^3.3.1",
     "in-publish": "^2.0.0",
-    "jest": "^20.0.4",
+    "jest": "^21.2.1",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
     "postcss": "^6.0.1",
@@ -94,13 +95,14 @@
     "postcss-modules-scope": "^1.1.0",
     "postcss-modules-values": "^1.3.0",
     "postcss-shopify": "^1.0.0",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4",
+    "react": "^16.0.0",
+    "react-addons-test-utils": "^15.5.4",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
     "react-transition-group": "^2.2.1",
     "rimraf": "^2.6.1",
-    "rollup": "^0.41.6",
-    "rollup-plugin-babel": "^2.7.1",
+    "rollup": "^0.50.0",
+    "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-json": "^2.1.1",
     "rollup-plugin-node-resolve": "^3.0.0",
@@ -109,18 +111,18 @@
     "sass-resources-loader": "^1.2.1",
     "shelljs": "^0.7.7",
     "shx": "^0.2.2",
-    "style-loader": "^0.18.1",
+    "style-loader": "^0.19.0",
     "svgo": "^0.7.2",
     "tslint": "^5.3.2",
-    "tslint-config-shopify": "^2.0.0",
+    "tslint-config-shopify": "^3.0.1",
     "typescript": "^2.3.3",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.6.1",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.7.1",
     "webpack-dev-server": "^2.4.5"
   },
   "peerDependencies": {
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0"
+    "react": "^15.3.0 || ^16.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0"
   },
   "files": [
     "esnext",
@@ -138,13 +140,13 @@
     "@shopify/images": "^1.1.0",
     "@shopify/javascript-utilities": "^2.0.0",
     "@shopify/react-utilities": "^1.2.0",
-    "@types/prop-types": "*",
-    "@types/react": "*",
-    "@types/react-dom": "*",
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.0.10",
+    "@types/react-dom": "^16.0.1",
     "@types/react-transition-group": "^2.0.6",
     "babel-runtime": "^6.23.0",
     "core-js": "^2.4.1",
-    "hoist-non-react-statics": "^1.2.0",
+    "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"

src/components/Checkbox/tests/Checkbox.test.tsx

@@ -22,7 +22,7 @@ describe('<Checkbox />', () => {
     it('is called with the new checked value of the input on change', () => {
       const spy = jest.fn();
       const element = mount(<Checkbox id="MyCheckbox" label="Checkbox" onChange={spy} />);
-      (element.find('input') as any).node.checked = true;
+      (element.find('input') as any).instance().checked = true;
       element.find('input').simulate('change');
       expect(spy).toHaveBeenCalledWith(true, 'MyCheckbox');
     });

src/components/ChoiceList/tests/ChoiceList.test.tsx

@@ -82,7 +82,7 @@ describe('<ChoiceList />', () => {
 
     function changeCheckedForChoice(choice: ReactWrapper<any, any>, checked: boolean, triggerChange = true) {
       const input = choice.find('input');
-      (input as any).node.checked = checked;
+      (input as any).instance().checked = checked;
 
       if (triggerChange) {
         input.simulate('change');

src/components/FormLayout/FormLayout.tsx

@@ -25,5 +25,6 @@ export default class FormLayout extends React.PureComponent<Props, never> {
 
 function wrapChildren(child: React.ReactElement<{}>, index: number) {
   if (isElementOfType(child, Group)) { return child; }
-  return wrapWithComponent(child, Item, {key: index} as ItemProps);
+  const props = {key: index};
+  return wrapWithComponent(child, Item, props as ItemProps);
 }

src/components/RadioButton/tests/RadioButton.test.tsx

@@ -22,7 +22,7 @@ describe('<RadioButton />', () => {
     it('is called with the new checked value of the input on change', () => {
       const spy = jest.fn();
       const element = mount(<RadioButton id="MyRadioButton" label="RadioButton" onChange={spy} />);
-      (element.find('input') as any).node.checked = true;
+      (element.find('input') as any).instance().checked = true;
       element.find('input').simulate('change');
       expect(spy).toHaveBeenCalledWith(true, 'MyRadioButton');
     });

src/components/Select/tests/Select.test.tsx

@@ -7,7 +7,7 @@ describe('<Select />', () => {
     it('is called with the value of the newly-selected option', () => {
       const spy = jest.fn();
       const element = mount(<Select id="MySelect" label="Select" options={['one', 'two']} onChange={spy} />);
-      (element.find('select') as any).node.value = 'two';
+      (element.find('select') as any).instance().value = 'two';
       element.find('select').simulate('change');
       expect(spy).toHaveBeenCalledWith('two', 'MySelect');
     });
@@ -25,7 +25,8 @@ describe('<Select />', () => {
     it('is called when the select is blurred', () => {
       const spy = jest.fn();
       const element = shallow(<Select label="Select" options={[]} onBlur={spy} />);
-      element.find('select').simulate('focus').simulate('blur');
+      element.find('select').simulate('focus');
+      element.find('select').simulate('blur');
       expect(spy).toHaveBeenCalled();
     });
   });

src/components/Stack/Stack.tsx

@@ -41,7 +41,10 @@ export default class Stack extends React.PureComponent<Props, never> {
     );
 
     const itemMarkup = elementChildren(children)
-      .map((child, index) => wrapWithComponent(child, Item, {key: index} as ItemProps));
+      .map((child, index) => {
+        const props = { key: index };
+        wrapWithComponent(child, Item, props as ItemProps);
+      });
 
     return <div className={className}>{itemMarkup}</div>;
   }

src/components/TextField/tests/TextField.test.tsx

@@ -41,7 +41,7 @@ describe('<TextField />', () => {
     it('is called with the new value', () => {
       const spy = jest.fn();
       const element = mount(<TextField id="MyTextField" label="TextField" onChange={spy} />);
-      (element.find('input') as any).node.value = 'two';
+      (element.find('input') as any).instance().value = 'two';
       element.find('input').simulate('change');
       expect(spy).toHaveBeenCalledWith('two', 'MyTextField');
     });
@@ -59,7 +59,8 @@ describe('<TextField />', () => {
     it('is called when the input is blurred', () => {
       const spy = jest.fn();
       const element = shallow(<TextField label="TextField" onBlur={spy} />);
-      element.find('input').simulate('focus').simulate('blur');
+      element.find('input').simulate('focus');
+      element.find('input').simulate('blur');
       expect(spy).toHaveBeenCalled();
     });
   });

src/embedded/easdk/Messenger.ts

@@ -127,10 +127,10 @@ export default class Messenger {
         return this.normalizePayload(newPayload);
       });
     } else if (typeof payload === 'object') {
-      return Object.keys(payload).reduce((newPayload, key) => {
+      return Object.keys(payload).reduce<Message['data']>((newPayload, key) => {
         newPayload[key] = this.normalizePayload(payload[key]);
         return newPayload;
-      }, {} as Message['data']);
+      }, {});
     } else {
       return payload;
     }

src/utilities/tests/focus.test.ts

@@ -6,7 +6,8 @@ describe('focus', () => {
     it('calls blur on the currentTarget', () => {
       const currentTarget = document.createElement('button');
       currentTarget.blur = jest.fn();
-      handleMouseUpByBlurring({currentTarget} as MouseEvent<HTMLButtonElement>);
+      const mouseEvent = {currentTarget};
+      handleMouseUpByBlurring(mouseEvent as MouseEvent<HTMLButtonElement>);
       expect(currentTarget.blur).toHaveBeenCalled();
     });
   });

tests/setup.ts

@@ -1,3 +1,8 @@
+import {configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({adapter: new Adapter()});
+
 const IGNORE_ERROR_REGEXES = [
   /Accessing PropTypes via the main React package is deprecated/,
   /ReactTestUtils has been moved to react-dom\/test-utils/,