[RSP-20] React 16 Upgrade (#85)

* RSP-20:React 16 upgrade * RSP-20:React 16 upgrade *updating tests(failed) * RSP-20:React 16 upgrade *updating tests(failed) * did some updates to libraries * updated libraries, etc * package upgrades done for r16. starting test fixing * fixed autocomplete, start calendar" * fixed toasts tests..mainly had to call update()0 * fix tablist - mainly disabledlifecyclemethods so we don't call componentDidMount * testing fixes finished, 584 tests passing * removed logs * responded to code review by NR * added package-lock.json to gitignore * reverted changes to npmrc..wasn't supposed to be pushed * remove changes to package.json * Test cleanup * Fix storybook styling strangeness * Fix CalendarCell tests * Upgrade react-overlays version Fixes ModalContainer/Portal things for react 16 * Convert Underlay to a class component Functional components cannot have refs in React 16 * Test against multiple versions of react * Disable uglifyjs on storybook builds storybookjs/storybook#1570 * Add default enzyme adapter * Fix for ref race condition error (#86)
fezproof · Aug 19, 2020 · f6faf4d · f6faf4d
1 parent 9fcd3e9
commit f6faf4d
Show file tree

Hide file tree

Showing 101 changed files with 300 additions and 196 deletions.
diff --git a/packages/react-spectrum/.gitignore b/packages/react-spectrum/.gitignore
@@ -7,3 +7,5 @@ test-reports.xml
 .nyc_output
 yarn.lock
 dist
+.idea
+.package-lock.json
diff --git a/packages/react-spectrum/.storybook/addons.js b/packages/react-spectrum/.storybook/addons.js
@@ -1,4 +1,4 @@
 //  To get our default addons (actions and links)
-import '@kadira/storybook/addons';
+import '@storybook/react/addons';
 //  To add the knobs addon
-import '@kadira/storybook-addon-knobs/register';
+import '@storybook/addon-knobs/register';
diff --git a/packages/react-spectrum/.storybook/config.js b/packages/react-spectrum/.storybook/config.js
@@ -1,6 +1,6 @@
 import 'babel-polyfill';
-import {configure, setAddon} from '@kadira/storybook';
-import infoAddon from '@kadira/react-storybook-addon-info';
+import {configure, setAddon} from '@storybook/react';
+import infoAddon, {setDefaults} from '@storybook/addon-info';
 
 import configureTypekit from '../src/utils/configureTypekit';
 
@@ -9,6 +9,19 @@ import '../src/page';
 
 setAddon(infoAddon);
 
+// addon-info
+setDefaults({
+  inline: true,
+  styles: (s) => {
+    s.infoBody.backgroundColor = 'transparent';
+    s.infoBody.border = 'none';
+    s.infoBody.boxShadow = 'none';
+    s.infoBody.padding = 0;
+    s.infoBody.marginTop = 0;
+    return s;
+  }
+});
+
 function loadStories() {
   var storiesContext = require.context('../stories', true, /^(.*\.(js|jsx))$/);
   storiesContext.keys().forEach(storiesContext);

diff --git a/packages/react-spectrum/.storybook/webpack.config.js b/packages/react-spectrum/.storybook/webpack.config.js
@@ -1,40 +1,52 @@
 const path = require('path');
 
 module.exports = (config, env) => {
+  if (env === 'PRODUCTION') {
+    // see https://github.com/storybooks/storybook/issues/1570
+    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
+  }
+
   return Object.assign(config, {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           include: [__dirname, path.resolve(__dirname + '/../src'), path.resolve(__dirname + '/../stories'), /collection-view/],
           loader: require.resolve('babel-loader')
         },
         {
           test: /\.styl$/,
-          loaders: ['style', 'css', 'stylus'],
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'stylus-loader',
+              options: {
+                paths: [__dirname + '/../node_modules'],
+                define: {
+                  'embedurl': require('stylus').url()
+                },
+                'resolve url': true,
+                set: {
+                  'include css': true
+                },
+                use: [require('svg-stylus')(), require('nib')()]
+              }
+            }
+          ],
           include: path.resolve(__dirname, '../')
         },
         {
           test: /\.css$/,
-          loaders: ['style', 'css'],
+          loaders: ['style-loader', 'css-loader'],
           include: path.resolve(__dirname, '../')
         },
         {
           test: /\.(ttf|woff|woff2|svg|gif|cur|eot|png|jpg)(\?[a-f0-9]{32})?$/,
           loader: 'url-loader?limit=8192'// limit inlining base64 URLs to <=8k images, direct URLs for the rest
         }
       ]
-    },
-    stylus: {
-      paths: [__dirname + '/../node_modules'],
-      use: [require('svg-stylus')(), require('nib')()],
-      define: {
-        'embedurl': require('stylus').url()
-      },
-      'resolve url': true,
-      set: {
-        'include css': true
-      }
     }
   });
 };
+
diff --git a/packages/react-spectrum/Makefile b/packages/react-spectrum/Makefile
@@ -2,6 +2,7 @@
 
 SHELL := /bin/bash
 PATH := ./node_modules/.bin:$(PATH)
+REACT := 0.14 15.5 16
 
 all: node_modules
 
@@ -13,21 +14,28 @@ run:
 	start-storybook -p 9002
 
 clean:
-	rm -rf node_modules dist
+	rm -rf node_modules dist storybook-static
 	bash -c 'for f in src/*; do rm -rf $$(basename $$f); done'
 
 lint:
 	lfeslint
 
-test: lint
+test:
 	NODE_ENV=test mocha
 
 cover:
 	NODE_ENV=test BABEL_ENV=cover nyc mocha
 
 jenkins_test: lint
-	NODE_ENV=test BABEL_ENV=cover nyc --reporter cobertura --report-dir . mocha $(MOCHA_OPTS) --reporter mocha-junit-reporter
-	find ./node_modules/ -name coverage.json -exec rm {} \;
+	# Test each version of react
+	@for version in $(REACT); do \
+		enzyme-adapter-react-install $$version; \
+		NODE_ENV=test mocha; \
+	done
+
+	# Test latest and generate coverage report
+	NODE_ENV=test BABEL_ENV=cover nyc --reporter cobertura --report-dir . mocha $(MOCHA_OPTS) --reporter mocha-junit-reporter; \
+	find ./node_modules/ -name coverage.json -exec rm {} \; ;\
 
 build:
 	rm -rf dist

diff --git a/packages/react-spectrum/package.json b/packages/react-spectrum/package.json
@@ -4,38 +4,38 @@
   "description": "Spectrum UI components in React",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Livefyre/react-spectrum"
+    "url": "https://git.corp.adobe.com.com/React/react-spectrum"
   },
   "scripts": {
     "start": "make run",
     "test": "make test",
     "test:watch": "mocha --watch --reporter dot"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16"
   },
   "dependencies": {
+    "@react/collection-view": "^2.2.0",
     "autobind-decorator": "^1.4.0",
     "classnames": "^2.2.5",
-    "@react/collection-view": "^2.2.0",
     "moment": "^2.15.1",
     "moment-range": "^3.0.3",
-    "react-overlays": "0.8.1",
+    "react-overlays": "0.8.3",
     "react-transition-group": "^2.2.0",
     "stringify": "^5.1.0"
   },
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.2.4",
-    "@kadira/storybook": "^2.24.1",
-    "@kadira/storybook-addon-knobs": "^1.3.3",
     "@spectrum/spectrum-css": "2.0.0-beta.48",
     "@spectrum/spectrum-flexbox-grid": "1.1.1",
     "@spectrum/spectrum-variables": "1.0.1",
+    "@storybook/addon-info": "^3.2.13",
+    "@storybook/addon-knobs": "3.2.13",
+    "@storybook/react": "3.2.13",
     "babel": "^6.5.2",
     "babel-cli": "^6.16.0",
-    "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.5",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-syntax-class-properties": "^6.13.0",
     "babel-plugin-syntax-decorators": "^6.13.0",
@@ -54,8 +54,10 @@
     "babel-register": "^6.16.3",
     "babel-runtime": "^6.11.6",
     "babelify": "^7.3.0",
-    "css-loader": "^0.25.0",
-    "enzyme": "^2.5.1",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-adapter-react-helper": "^1.2.1",
     "file-loader": "^0.9.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^9.8.0",
@@ -66,13 +68,13 @@
     "nib": "^1.1.2",
     "normalize.css": "^7.0.0",
     "nyc": "^10.2.0",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "prop-types": "^15.6.0",
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16",
     "sinon": "^2.2.0",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.19.0",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.3.1",
+    "stylus-loader": "^3.0.1",
     "svg-stylus": "^0.0.5",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",

diff --git a/packages/react-spectrum/src/Accordion/js/Accordion.js b/packages/react-spectrum/src/Accordion/js/Accordion.js
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import '../style/index.styl';
 
@@ -141,7 +142,7 @@ Accordion.displayName = 'Accordion';
 
 Accordion.propTypes = {
   onChange() {},
-  multiselectable: React.PropTypes.bool
+  multiselectable: PropTypes.bool
 };
 
 Accordion.defaultProps = {

diff --git a/packages/react-spectrum/src/Accordion/js/AccordionItem.js b/packages/react-spectrum/src/Accordion/js/AccordionItem.js
@@ -1,16 +1,17 @@
 import classNames from 'classnames';
 import createId from '../../utils/createId';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 
 /**
  * header: A string or node which will be placed at the top of the accordion item.
  */
 export default class AccordionItem extends Component {
   static propTypes = {
-    header: React.PropTypes.string,
-    selected: React.PropTypes.bool,
-    disabled: React.PropTypes.bool,
-    onItemClick: React.PropTypes.func
+    header: PropTypes.string,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onItemClick: PropTypes.func
   };
 
   static defaultProps = {

diff --git a/packages/react-spectrum/src/Calendar/js/Calendar.js b/packages/react-spectrum/src/Calendar/js/Calendar.js
@@ -5,7 +5,8 @@ import createId from '../../utils/createId';
 import {DateRange} from 'moment-range';
 import {formatMoment, isDateInRange, toMoment} from '../../utils/moment';
 import moment from 'moment';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import '../style/index.styl';
 
 @autobind

diff --git a/packages/react-spectrum/src/Clock/js/Clock.js b/packages/react-spectrum/src/Clock/js/Clock.js
@@ -3,7 +3,8 @@ import {clamp} from '../../utils/number';
 import classNames from 'classnames';
 import {formatMoment, toMoment} from '../../utils/moment';
 import moment from 'moment';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import Textfield from '../../Textfield';
 import '../style/index.styl';
 

diff --git a/packages/react-spectrum/src/Datepicker/js/Datepicker.js b/packages/react-spectrum/src/Datepicker/js/Datepicker.js
@@ -8,7 +8,8 @@ import InputGroup from '../../InputGroup';
 import moment from 'moment';
 import OverlayTrigger from '../../OverlayTrigger';
 import Popover from '../../Popover';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import Textfield from '../../Textfield';
 import {toMoment} from '../../utils/moment';
 import '../style/index.styl';

diff --git a/packages/react-spectrum/src/Menu/js/Menu.js b/packages/react-spectrum/src/Menu/js/Menu.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import {List} from '../../List';
-import React, {PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
 import '../style/index.styl';
 

diff --git a/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js b/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js
@@ -60,6 +60,9 @@ class Modal extends React.Component {
   }
 }
 
-function Underlay({open, ...props}) {
-  return <div {...props} className={classNames('spectrum-Underlay', {'is-open': open})} />;
+class Underlay extends React.Component {
+  render() {
+    let {open, ...props} = this.props;
+    return <div {...props} className={classNames('spectrum-Underlay', {'is-open': open})} />;
+  }
 }
diff --git a/packages/react-spectrum/src/NumberInput/js/NumberInput.js b/packages/react-spectrum/src/NumberInput/js/NumberInput.js
@@ -3,7 +3,8 @@ import Button from '../../Button';
 import classNames from 'classnames';
 import createId from '../../utils/createId';
 import InputGroup from '../../InputGroup';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import Textfield from '../../Textfield';
 import '../style/index.styl';

diff --git a/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js b/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js
@@ -1,7 +1,8 @@
 
 import autobind from 'autobind-decorator';
 import Overlay from './Overlay';
-import React, {cloneElement, Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {cloneElement, Component} from 'react';
 import ReactDOM from 'react-dom';
 
 const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']);

diff --git a/packages/react-spectrum/src/Popover/js/Popover.js b/packages/react-spectrum/src/Popover/js/Popover.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import DialogHeader from '../../Dialog/js/DialogHeader';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import '../style/index.styl';
 import '../../Dialog/style/index.styl';
 
@@ -66,4 +67,3 @@ export default class Popover extends Component {
 }
 
 Popover.displayName = 'Popover';
-
diff --git a/packages/react-spectrum/src/Shell/js/ShellMenu.js b/packages/react-spectrum/src/Shell/js/ShellMenu.js
@@ -33,18 +33,26 @@ export default class ShellMenu extends Component {
     };
   }
 
-  componentDidMount() {
-    this.menuRef.addEventListener(getTransitionEvent(), this.handleTransitionEnd);
-  }
-
   componentWillReceiveProps(nextProps) {
     if ('open' in nextProps) {
       this.setState({open: nextProps.open});
     }
   }
 
   componentWillUnmount() {
-    this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    if (this.menuRef) {
+      this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
+  }
+
+  bindMenuRef(ref) {
+    if (this.menuRef) {
+      this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
+    this.menuRef = ref;
+    if (this.menuRef) {
+      this.menuRef.addEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
   }
 
   setOpen(open) {
@@ -132,7 +140,7 @@ export default class ShellMenu extends Component {
         <Portal>
           <RootCloseWrapper onRootClose={this.handleMenuClose} disabled={!open}>
             <div
-              ref={el => {this.menuRef = el; }}
+              ref={el => {this.bindMenuRef(el); }}
               style={{zIndex}}
               className={
                 classNames(