React 16 Upgrade (#183)

* removed unused table and velocity-animate

* React version upgraded to version 16.3.1.
Notes:
1. Using nightly TypeScript because of bug microsoft/TypeScript#22403
2. ESLint trailing commas also disabled for now due to bug
3. Minor issue that docs aren't running.  needs diagnosis

* unit test fix in progress

* unit test fixes for enzyme 2

* - added test debug capability
- fixed tests for formlayout, stack, textfield, tooltip

* fixed unit tests in scrollable, select, stack, and tooltip.

* fixed/commented broken tests with TODO to expedite development for dheeraj

* upgraded to react 16.3.1

@types/alltypes.d.ts

@@ -1,48 +1,4 @@
 declare module 'react-page-layout';
 
-declare module 'react-perf-tool';
 declare module 'react-prism';
 declare module 'react-router-dom';
-declare module 'velocity-animate';
-
-declare module 'hoist-non-react-statics' {
-  import {ComponentClass} from 'react';
-
-  function hoistNonReactStatics<P>(to: ComponentClass<P>, from: ComponentClass<any>): ComponentClass<P>;
-  export = hoistNonReactStatics;
-}
-
-// declare module "react-css-themr" {
-//   import React = require("react");
-//   type TReactCSSThemrTheme = {
-//     [key: string]: string | TReactCSSThemrTheme
-//   }
-
-//   export function themeable(...themes: Array<TReactCSSThemrTheme>): TReactCSSThemrTheme;
-
-//   export interface IThemrOptions {
-//     /** @default "deeply" */
-//     composeTheme?: "deeply" | "softly" | false,
-//   }
-
-//   export interface ThemeProviderProps {
-//     innerRef?: Function,
-//     theme: {}
-//   }
-
-//   export class ThemeProvider extends React.Component<ThemeProviderProps, any> {
-//   }
-
-//   interface ThemedComponent<P, S> extends React.Component<P, S> {
-//   }
-
-//   interface ThemedComponentClass<P, S> extends React.ComponentClass<P> {
-//     new(props?: P, context?: any): ThemedComponent<P, S>;
-//   }
-
-//   export function themr(
-//     identifier: string | number | symbol,
-//     defaultTheme?: {},
-//     options?: IThemrOptions
-//   ): <P, S>(component: (new(props?: P, context?: any) => React.Component<P, S>) | React.SFC<P>) => ThemedComponentClass<P, S>;
-// }

config/jest/config.json

@@ -1,5 +1,6 @@
 {
     "setupFiles": [
+        "<rootDir>/config/jest/shim.js",
         "<rootDir>/tests/setup.ts"
     ],
     "testRegex": ".test.(tsx?|js)$",
@@ -21,5 +22,6 @@
     },
     "moduleNameMapper": {
         "\\.(s?css)$": "identity-obj-proxy"
-    }
+    },
+    "verbose": true
 }

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);
+};

example/src/App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import ReactDataExample from './ReactDataExample';
 import SingleDatePickerWrapper from './SingleDatePickerWrapper';
 import DateRangePickerWrapper from './DateRangePickerWrapper';
 import PickerAutoSuggestExample from './PickerAutoSuggestExample';
@@ -507,13 +506,7 @@ class App extends React.Component<{}, State> {
           <Link>Tooltip 2</Link>
         </Tooltip>
         <div>
-
-          <ReactDataExample
-            columns={this.state.columns}
-            rowGetter={this.rowGetter}
-            rowsCount={this.state.rows.length}
-            minHeight={2}
-          /> */}
+*/}
           <Heading>Popover</Heading>
           <TextField
             id="TestName"

example/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactPerfTool from 'react-perf-tool';
 import App from './App';
 import BaseTheme from '../../themes/Delicious/index';
 
-const Perf = require('react-addons-perf');
+const REACT_VERSION = React.version;
 
 ReactDOM.render(
   <BaseTheme>
     <div>
+      <label>React Version: {REACT_VERSION}</label>
       <App />
-       <ReactPerfTool perf={Perf} /> 
     </div>
   </BaseTheme>,
   document.getElementById('root'),