Add React ^16.0 as a peerDependency, add EuiErrorBoundary (#198)

* Add React 16 as a peer dependency.
* Export test module.
* Add EuiErrorBoundary.
* Fix test template requiredProps import.
* Update CHANGELOG.
* Move react and react-router to devDependencies.

CHANGELOG.md

@@ -17,6 +17,8 @@
 - Add `<Tooltip>` component ([#174](https://github.com/elastic/eui/pull/174), [#193](https://github.com/elastic/eui/pull/193))
 - Add a bold weight of 700 and apply it to `<strong>` elements by default ([#193](https://github.com/elastic/eui/pull/193))
 - Icon size prop now accepts `s`. Adjusted coloring of sidenav arrows ([#178](https://github.com/elastic/eui/pull/197))
+- Add `<EuiErrorBoundary>` ([#198](https://github.com/elastic/eui/pull/198))
+- Export `test` module, which includes `findTestSubject`, `startThrowingReactWarnings`, `stopThrowingReactWarnings`, `requiredProps`, and `takeMountedSnapshot` helpers ([#198](https://github.com/elastic/eui/pull/198))
 
 **Bug fixes**
 
@@ -27,6 +29,7 @@
 **Breaking**
 
 - Fixed a bug where table cell classes were being applied twice [(#167)](https://github.com/elastic/eui/pull/167)
+- React ^16.0 is now a peer dependency ([#198](https://github.com/elastic/eui/pull/198))
 
 # [`0.0.3`](https://github.com/elastic/eui/tree/v0.0.3)
 

generator-eui/component/templates/test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import { <%= componentName %> } from './<%= fileName %>';
 

package.json

@@ -29,9 +29,7 @@
     "keymirror": "0.1.1",
     "lodash": "4.17.4",
     "prop-types": "15.6.0",
-    "react": "16.0.0",
     "react-ace": "5.5.0",
-    "react-router": "3.2.0",
     "serve": "6.3.1",
     "tabbable": "1.1.0",
     "uuid": "3.1.0"
@@ -76,8 +74,10 @@
     "postcss-loader": "2.0.8",
     "pre-commit": "1.2.2",
     "raw-loader": "0.5.1",
+    "react": "16.0.0",
     "react-dom": "16.0.0",
     "react-redux": "5.0.6",
+    "react-router": "3.2.0",
     "react-router-redux": "4.0.8",
     "react-test-renderer": "16.0.0",
     "redux": "3.7.2",
@@ -89,5 +89,8 @@
     "webpack-dev-server": "2.9.2",
     "yeoman-generator": "2.0.1",
     "yo": "2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0-rc || ^16.0"
   }
 }

scripts/compile-eui.sh

@@ -6,7 +6,7 @@ compile_lib() {
   local color_green="\033[0;32m"
   local color_reset="\033[0m"
 
-  mkdir -p lib/components lib/services
+  mkdir -p lib/components lib/services lib/test
 
   # We use tput below to save the cursor position, then restore it later in
   # order to overwrite "processing" messages.
@@ -16,7 +16,7 @@ compile_lib() {
   babel \
     --quiet \
     --out-dir=lib \
-    --ignore "**/webpack.config.js,**/test/*.js,**/*.test.js" \
+    --ignore "**/webpack.config.js,**/*.test.js" \
     src
   tput rc
   echo -e "${color_green}✔ Finished compiling src/ to lib/${color_reset}" >&2

src-docs/src/components/guide_section/guide_section.js

@@ -6,12 +6,13 @@ import {
 } from '..';
 
 import {
-  EuiText,
-  EuiTitle,
+  EuiCodeBlock,
+  EuiErrorBoundary,
   EuiSpacer,
-  EuiTabs,
   EuiTab,
-  EuiCodeBlock,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
 } from '../../../../src/components';
 
 import {
@@ -132,10 +133,12 @@ export class GuideSection extends Component {
     }
 
     return (
-      <div>
-        <div className="guideSection__space" />
-        {this.props.demo}
-      </div>
+      <EuiErrorBoundary>
+        <div>
+          <div className="guideSection__space" />
+          {this.props.demo}
+        </div>
+      </EuiErrorBoundary>
     );
   }
 

src-docs/src/services/routes/routes.js

@@ -10,6 +10,10 @@ import {
   GuideSection,
 } from '../../components';
 
+import {
+  EuiErrorBoundary,
+} from '../../../../src/components';
+
 import Slugify from '../string/slugify';
 
 // Guidelines
@@ -52,6 +56,9 @@ import { ContextMenuExample }
 import { DescriptionListExample }
   from '../../views/description_list/description_list_example';
 
+import { ErrorBoundaryExample }
+  from '../../views/error_boundary/error_boundary_example';
+
 import { ExpressionExample }
   from '../../views/expression/expression_example';
 
@@ -155,10 +162,12 @@ const createExample = ({ title, intro, sections }) => {
   }));
 
   const component = () => (
-    <GuidePage title={title}>
-      {intro}
-      {renderedSections}
-    </GuidePage>
+    <EuiErrorBoundary>
+      <GuidePage title={title}>
+        {intro}
+        {renderedSections}
+      </GuidePage>
+    </EuiErrorBoundary>
   );
 
   return {
@@ -181,6 +190,7 @@ const components = [
   CodeExample,
   ContextMenuExample,
   DescriptionListExample,
+  ErrorBoundaryExample,
   ExpressionExample,
   FlexExample,
   FormExample,

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

@@ -12,11 +12,17 @@ import html from 'html';
 configure({ adapter: new EnzymeAdapter() });
 
 export function renderToHtml(componentReference, props = {}) {
-  // Create the React element, render it and get its HTML, then format it prettily.
-  const element = React.createElement(componentReference, props);
-  const htmlString = render(element).html();
-  return html.prettyPrint(htmlString, {
-    indent_size: 2,
-    unformatted: [], // Expand all tags, including spans
-  });
+  // If there's a failure, just return an empty string. The actual component itself should
+  // trip an error boundary in the UI when it fails.
+  try {
+    // Create the React element, render it and get its HTML, then format it prettily.
+    const element = React.createElement(componentReference, props);
+    const htmlString = render(element).html();
+    return html.prettyPrint(htmlString, {
+      indent_size: 2,
+      unformatted: [], // Expand all tags, including spans
+    });
+  } catch(e) {
+    return '';
+  }
 }

src-docs/src/views/app_view.js

@@ -11,6 +11,7 @@ import {
 } from '../components';
 
 import {
+  EuiErrorBoundary,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
@@ -67,16 +68,18 @@ export class AppView extends Component {
       return (
         <EuiPage>
           <EuiPageBody>
-            <EuiPageSideBar>
-              <GuidePageChrome
-                currentRouteName={this.props.currentRoute.name}
-                onToggleTheme={this.props.toggleTheme}
-                routes={this.props.routes}
-                guidelines={Routes.guidelines}
-                components={Routes.components}
-                sandboxes={Routes.sandboxes}
-              />
-            </EuiPageSideBar>
+            <EuiErrorBoundary>
+              <EuiPageSideBar>
+                <GuidePageChrome
+                  currentRouteName={this.props.currentRoute.name}
+                  onToggleTheme={this.props.toggleTheme}
+                  routes={this.props.routes}
+                  guidelines={Routes.guidelines}
+                  components={Routes.components}
+                  sandboxes={Routes.sandboxes}
+                />
+              </EuiPageSideBar>
+            </EuiErrorBoundary>
 
             <EuiPageContent>
               <EuiPageContentBody>

src-docs/src/views/error_boundary/error_boundary.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  EuiErrorBoundary,
+} from '../../../../src/components';
+
+const BadComponent = () => {
+  throw new Error('There was a terrible error!');
+};
+
+export default () => (
+  <EuiErrorBoundary>
+    <BadComponent />
+  </EuiErrorBoundary>
+);

src-docs/src/views/error_boundary/error_boundary_example.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import ErrorBoundary from './error_boundary';
+const errorBoundarySource = require('!!raw-loader!./error_boundary');
+const errorBoundaryHtml = renderToHtml(ErrorBoundary);
+
+export const ErrorBoundaryExample = {
+  title: 'ErrorBoundary',
+  sections: [{
+    title: 'ErrorBoundary',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: errorBoundarySource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: errorBoundaryHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>EuiErrorBoundary</EuiCode> to prevent errors from taking down the entire app.
+      </p>
+    ),
+    demo: <ErrorBoundary />,
+  }],
+};

src/components/error_boundary/__snapshots__/error_boundary.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiErrorBoundary is rendered with an error 1`] = `
+<div
+  aria-label="aria-label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiErrorBoundary__text"
+  >
+    <div
+      class="euiText euiText--extraSmall"
+    >
+      <h1>
+        Error
+      </h1>
+      <p>
+        Error: Terrible error!
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiErrorBoundary is rendered without an error 1`] = `
+<div>
+  No error
+</div>
+`;

src/components/error_boundary/_error_boundary.scss

@@ -0,0 +1,19 @@
+.euiErrorBoundary {
+  $color1: transparentize($euiColorDanger, .75);
+  $color2: transparentize($euiColorDanger, .95);
+
+  background: repeating-linear-gradient(
+    45deg,
+    $color1,
+    $color1 1px,
+    $color2 1px,
+    $color2 20px
+  );
+  overflow: auto;
+  padding: $euiSize;
+}
+
+  .euiErrorBoundary__text {
+    background-color: $euiColorEmptyShade;
+    padding: $euiSizeS;
+  }

src/components/error_boundary/_index.scss

@@ -0,0 +1 @@
+@import 'error_boundary';

src/components/error_boundary/error_boundary.js

@@ -0,0 +1,56 @@
+import React, {
+  Component,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiText,
+} from '../text';
+
+export class EuiErrorBoundary extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+      error: undefined,
+    };
+  }
+
+  componentDidCatch(error) {
+    // Display fallback UI
+    this.setState({
+      hasError: true,
+      error
+    });
+  }
+
+  render() {
+    const {
+      children,
+      ...rest
+    } = this.props;
+
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className="euiErrorBoundary" {...rest}>
+          <div className="euiErrorBoundary__text">
+            <EuiText size="xs">
+              <h1>Error</h1>
+              <p>
+                {this.state.error && this.state.error.toString()}
+              </p>
+            </EuiText>
+          </div>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}