Upgrade typescript, react, jest, & enzyme

package.json

@@ -77,15 +77,15 @@
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
-    "@types/jest": "^23.3.9",
-    "@types/react": "^16.3.0",
+    "@types/jest": "^24.0.6",
+    "@types/react": "^16.8.4",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
     "autoprefixer": "^7.1.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^8.0.1",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-inline-react-svg": "^1.0.1",
@@ -101,8 +101,8 @@
     "css-loader": "^0.28.7",
     "cssnano": "^4.0.5",
     "dts-generator": "^2.1.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16.3": "^1.4.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.9.0",
     "eslint-config-prettier": "^2.9.0",
@@ -122,8 +122,8 @@
     "geckodriver": "^1.11.0",
     "glob": "^7.1.2",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.6.0",
-    "jest-cli": "^23.6.0",
+    "jest": "^24.1.0",
+    "jest-cli": "^24.1.0",
     "jquery": "^3.2.1",
     "markdown-it": "8.4.1",
     "mocha": "^5.0.4",
@@ -140,8 +140,8 @@
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
@@ -163,7 +163,7 @@
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^2.9.2",
+    "typescript": "^3.3.3",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",
     "wdio-chromedriver-service": "^0.1.2",
@@ -181,9 +181,11 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@types/react": "^16.8.0",
     "moment": "^2.13.0",
     "prop-types": "^15.5.0",
-    "react": "^16.3",
-    "react-dom": "^16.3"
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "typescript": "^3.0.0"
   }
 }

scripts/dtsgenerator.js

@@ -78,14 +78,41 @@ const generator = dtsGenerator({
   },
 });
 
+// NOTE: once EUI is all converted to typescript this madness can be deleted forever
 // 1. strip any `/// <reference` lines from the generated eui.d.ts
-// 2. replace any import("src/...") declarations to import("@elastic/src/...")
+// 2. replace any import("src/...") declarations to import("@elastic/eui/src/...")
+// 3. replace any import("./...") declarations to import("@elastic/eui/src/...)
 generator.then(() => {
   const defsFilePath = path.resolve(baseDir, 'eui.d.ts');
+
   fs.writeFileSync(
     defsFilePath,
     fs.readFileSync(defsFilePath).toString()
       .replace(/\/\/\/\W+<reference.*/g, '') // 1.
-      .replace(/import\(\"src\/(.*?)\"\)/g, 'import("@elastic/eui/src/$1")') // 2.
+      .replace(/import\("src\/(.*?)"\)/g, 'import("@elastic/eui/src/$1")') // 2.
+      .replace( // start 3.
+        // find any singular `declare module { ... }` block
+        // {.*?^} matches anything until a } starts a new line (via `m` regex option, and `s` is dotall)
+        //
+        // aren't regex really bad for this? Yes.
+        // However, @babel/preset-typescript doesn't understand some syntax generated in eui.d.ts
+        // and the tooling around typescript's parsing & code generation is lacking and undocumented
+        // so... because this works with the guarantee that the newline-brace combination matches a module...
+        /declare module '(.*?)' {.*?^}/smg,
+        (module, moduleName) => {
+          // `moduleName` is the namespace for this ambient module
+          return module.replace(
+            // replace relative imports by attaching them to the module's namespace
+            /import\("([.]{1,2}\/.*?)"\)/g,
+            (importStatement, importPath) => {
+              const target = path.join(
+                path.dirname(moduleName),
+                importPath
+              );
+              return `import ("${target}")`;
+            }
+          );
+        }
+      ) // end 3.
   );
 });

scripts/jest/setup/enzyme.js

@@ -1,4 +1,4 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16.3';
+import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });

src-docs/src/services/string/render_to_html.js

@@ -5,7 +5,7 @@ import {
   configure
 } from 'enzyme';
 
-import EnzymeAdapter from 'enzyme-adapter-react-16.3';
+import EnzymeAdapter from 'enzyme-adapter-react-16';
 
 import html from 'html';
 

src-docs/src/views/context/context.js

@@ -27,7 +27,6 @@ const mappings = {
 export default class extends Component {
   state = {
     language: 'en',
-    name: ''
   }
 
   setLanguage = (language) => this.setState({ language })
@@ -76,7 +75,6 @@ export default class extends Component {
                     {placeholder => (
                       <EuiFieldText
                         placeholder={placeholder}
-                        value={this.state.name}
                       />
                     )}
                   </EuiI18n>

src/components/accessibility/screen_reader.tsx

@@ -1,13 +1,13 @@
-import { cloneElement, ReactElement, SFC } from 'react';
+import { cloneElement, ReactElement, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 export interface EuiScreenReaderOnlyProps {
   children: ReactElement<any>;
 }
 
-export const EuiScreenReaderOnly: SFC<EuiScreenReaderOnlyProps> = ({
-  children,
-}) => {
+export const EuiScreenReaderOnly: FunctionComponent<
+  EuiScreenReaderOnlyProps
+> = ({ children }) => {
   const classes = classNames('euiScreenReaderOnly', children.props.className);
 
   const props = {

src/components/avatar/index.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '../common';
 
-import { HTMLAttributes, SFC } from 'react';
+import { HTMLAttributes, FunctionComponent } from 'react';
 
 declare module '@elastic/eui' {
 
@@ -19,7 +19,7 @@ declare module '@elastic/eui' {
     type?: AvatarType;
   }
 
-  export const EuiAvatar: SFC<
+  export const EuiAvatar: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLDivElement> & EuiAvatarProps
     >;
 }

src/components/badge/index.d.ts

@@ -1,7 +1,7 @@
 import { IconType } from '../icon'
 /// <reference path="../tool_tip/index.d.ts" />
 
-import { HTMLAttributes, MouseEventHandler, SFC, ReactNode } from 'react';
+import { HTMLAttributes, MouseEventHandler, FunctionComponent, ReactNode } from 'react';
 import { CommonProps } from '../common';
 
 declare module '@elastic/eui' {
@@ -19,7 +19,7 @@ declare module '@elastic/eui' {
     closeButtonProps?: object;
   }
 
-  export const EuiBadge: SFC<
+  export const EuiBadge: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLButtonElement> & EuiBadgeProps
   >;
 
@@ -31,7 +31,7 @@ declare module '@elastic/eui' {
     title?: string;
   }
 
-  export const EuiBetaBadge: SFC<
+  export const EuiBetaBadge: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLSpanElement> & EuiBetaBadgeProps
   >;
 }

src/components/badge/notification_badge/badge_notification.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode, SFC } from 'react';
+import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
@@ -8,11 +8,9 @@ export interface EuiNotificationBadgeProps
   children?: ReactNode;
 }
 
-export const EuiNotificationBadge: SFC<EuiNotificationBadgeProps> = ({
-  children,
-  className,
-  ...rest
-}) => {
+export const EuiNotificationBadge: FunctionComponent<
+  EuiNotificationBadgeProps
+> = ({ children, className, ...rest }) => {
   const classes = classNames('euiNotificationBadge', className);
 
   return (