Fix compatibility issues for React v16.0.0

.eslintrc

@@ -43,6 +43,7 @@
     "react/no-multi-comp": "off",
     "react/prop-types": "warn",
     "react/sort-comp": "warn",
-    "react/sort-prop-types": "warn"
+    "react/sort-prop-types": "warn",
+    "react/jsx-handler-names": "off"
   }
 }

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 
 node_js:
-  - 4
   - 6
   - 8
 

jest-setup.js

@@ -0,0 +1,7 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+document.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0);
+};

package.json

@@ -22,24 +22,24 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "component-playground": "^2.0.0",
+    "component-playground": "^3.0.0",
     "history": "^4.6.1",
     "lodash": "^4.17.4",
     "marksy": "^0.4.2",
     "normalize.css": "^7.0.0",
     "radium": "^0.19.1",
     "react-redux": "^5.0.5",
     "react-transition-group": "^1.1.3",
-    "react-typography": "^0.15.10",
+    "react-typography": "^0.16.5",
     "redux": "^3.0.4",
     "redux-actions": "^2.0.3",
     "styled-components": "^1.4.6",
     "victory-core": "^15.2.0"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.8",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -60,7 +60,9 @@
     "babel-runtime": "^6.23.0",
     "cross-env": "^5.0.0",
     "css-loader": "^0.28.2",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme-to-json": "^3.1.2",
     "eslint": "^3.19.0",
     "eslint-config-formidable": "^3.0.0",
     "eslint-plugin-filenames": "^1.2.0",
@@ -73,9 +75,9 @@
     "node-libs-browser": "^2.0.0",
     "prop-types": "^15.5.10",
     "raw-loader": "^0.5.1",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.3.6",
@@ -91,8 +93,7 @@
     "moduleNameMapper": {
       "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
     },
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/jest-serializer-enzyme"
-    ]
+    "snapshotSerializers": ["enzyme-to-json/serializer"],
+    "setupFiles": ["raf/polyfill", "<rootDir>/jest-setup.js"]
   }
 }

src/components/__snapshots__/block-quote.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<BlockQuote /> should render correctly. 1`] = `
 <BlockQuote>
   <blockquote
+    className={undefined}
     data-radium={true}
     style={
       Object {

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

@@ -3,6 +3,7 @@
 exports[`<Cite /> should render correctly. 1`] = `
 <Cite>
   <cite
+    className={undefined}
     data-radium={true}
     style={
       Object {

src/components/__snapshots__/code-pane.test.js.snap

@@ -15,6 +15,7 @@ exports[`<CodePane /> should render correctly. 1`] = `
     "
 >
   <pre
+    className={undefined}
     data-radium={true}
     style={Object {}}
   >
@@ -34,6 +35,7 @@ exports[`<CodePane /> should render correctly. 1`] = `
             ",
         }
       }
+      style={undefined}
     />
   </pre>
 </CodePane>

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

@@ -3,6 +3,7 @@
 exports[`<Code /> should render correctly. 1`] = `
 <Code>
   <code
+    className={undefined}
     dangerouslySetInnerHTML={
       Object {
         "__html": "const [a, ...b] = [1, 2, 3, 4]",

src/components/__snapshots__/component-playground.test.js.snap

@@ -11,41 +11,9 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
       class="playgroundCode"
     >
       <div
-        class="ReactCodeMirror playgroundStage"
+        class="react-codemirror2 playgroundStage"
       >
-        <textarea
-          autocomplete="off"
-        >
-          /**
-           * Sample React Component 
-           * Output domContainerNode is 'mountNode'
-           */
-
-          const styles = {
-            heading: {
-              fontSize: "2.25rem",
-              fontWeight: "bold"
-            },
-            copy: {
-              fontSize: "1.5rem"
-            }
-          }
-
-          const HelloWorld = ({ name }) =&gt; (
-            &lt;div&gt;
-              &lt;h1 style={styles.heading}&gt;
-                Create Live Code Examples in {name}!
-              &lt;/h1&gt;
-              &lt;p style={styles.copy}&gt;
-                Supports Light and Dark Syntax Themes
-              &lt;/p&gt;
-            &lt;/div&gt;
-          )
-
-          render(
-            &lt;HelloWorld name="Spectacle" /&gt;, 
-            mountNode)
-        </textarea>
+
       </div>
     </div>
     <div
@@ -54,7 +22,9 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
       <div>
         <div
           class="previewArea"
-        />
+        >
+
+        </div>
       </div>
     </div>
   </div>
@@ -72,41 +42,9 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
       class="playgroundCode"
     >
       <div
-        class="ReactCodeMirror playgroundStage"
+        class="react-codemirror2 playgroundStage"
       >
-        <textarea
-          autocomplete="off"
-        >
-          /**
-           * Sample React Component 
-           * Output domContainerNode is 'mountNode'
-           */
-
-          const styles = {
-            heading: {
-              fontSize: "2.25rem",
-              fontWeight: "bold"
-            },
-            copy: {
-              fontSize: "1.5rem"
-            }
-          }
-
-          const HelloWorld = ({ name }) =&gt; (
-            &lt;div&gt;
-              &lt;h1 style={styles.heading}&gt;
-                Create Live Code Examples in {name}!
-              &lt;/h1&gt;
-              &lt;p style={styles.copy}&gt;
-                Supports Light and Dark Syntax Themes
-              &lt;/p&gt;
-            &lt;/div&gt;
-          )
-
-          render(
-            &lt;HelloWorld name="Spectacle" /&gt;, 
-            mountNode)
-        </textarea>
+
       </div>
     </div>
     <div
@@ -115,7 +53,9 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
       <div>
         <div
           class="previewArea"
-        />
+        >
+
+        </div>
       </div>
     </div>
   </div>
@@ -133,41 +73,9 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
       class="playgroundCode"
     >
       <div
-        class="ReactCodeMirror playgroundStage"
+        class="react-codemirror2 playgroundStage"
       >
-        <textarea
-          autocomplete="off"
-        >
-          /**
-           * Sample React Component 
-           * Output domContainerNode is 'mountNode'
-           */
-
-          const styles = {
-            heading: {
-              fontSize: "2.25rem",
-              fontWeight: "bold"
-            },
-            copy: {
-              fontSize: "1.5rem"
-            }
-          }
-
-          const HelloWorld = ({ name }) =&gt; (
-            &lt;div&gt;
-              &lt;h1 style={styles.heading}&gt;
-                Create Live Code Examples in {name}!
-              &lt;/h1&gt;
-              &lt;p style={styles.copy}&gt;
-                Supports Light and Dark Syntax Themes
-              &lt;/p&gt;
-            &lt;/div&gt;
-          )
-
-          render(
-            &lt;HelloWorld name="Spectacle" /&gt;, 
-            mountNode)
-        </textarea>
+
       </div>
     </div>
     <div
@@ -176,7 +84,9 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
       <div>
         <div
           class="previewArea"
-        />
+        >
+
+        </div>
       </div>
     </div>
   </div>
@@ -194,14 +104,9 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
       class="playgroundCode"
     >
       <div
-        class="ReactCodeMirror playgroundStage"
+        class="react-codemirror2 playgroundStage"
       >
-        <textarea
-          autocomplete="off"
-        >
-          const Button = ({ title }) =&gt; (&lt;button type="button"&gt;{ title }&lt;/button&gt;);
-                render(&lt;Button title="My Button" /&gt;, mountNode);
-        </textarea>
+
       </div>
     </div>
     <div
@@ -210,7 +115,9 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
       <div>
         <div
           class="previewArea"
-        />
+        >
+
+        </div>
       </div>
     </div>
   </div>

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

@@ -12,6 +12,7 @@ exports[`<Controls /> should render correctly. 1`] = `
   >
     <button
       data-radium={true}
+      key=".$prev"
       onClick={[Function]}
       style={
         Object {
@@ -22,6 +23,8 @@ exports[`<Controls /> should render correctly. 1`] = `
     >
       <svg
         height="32px"
+        key="prevIcon"
+        style={undefined}
         viewBox="0 0 512 828.586"
         width="32px"
       >
@@ -32,6 +35,7 @@ exports[`<Controls /> should render correctly. 1`] = `
     </button>
     <button
       data-radium={true}
+      key=".$next"
       onClick={[Function]}
       style={
         Object {
@@ -42,6 +46,8 @@ exports[`<Controls /> should render correctly. 1`] = `
     >
       <svg
         height="32px"
+        key="nextIcon"
+        style={undefined}
         viewBox="0 0 512 828.586"
         width="32px"
       >

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

@@ -6,6 +6,7 @@ exports[`<Heading /> should render correctly. 1`] = `
   size={2}
 >
   <H2
+    className={undefined}
     data-radium={true}
     style={
       Object {
@@ -26,6 +27,7 @@ exports[`<Heading /> should render the fit configuration correctly. 1`] = `
   size={1}
 >
   <div
+    className={undefined}
     data-radium={true}
     style={
       Object {

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

@@ -8,6 +8,7 @@ exports[`<Image /> should render correctly. 1`] = `
   width={2560}
 >
   <img
+    className={undefined}
     data-radium={true}
     src="foo.png"
     style={

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

@@ -6,6 +6,7 @@ exports[`<Link /> should render correctly 1`] = `
   target="_blank"
 >
   <a
+    className={undefined}
     data-radium={true}
     href="https://www.formidable.com"
     style={

src/components/__snapshots__/list-item.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<ListItem /> should render correctly 1`] = `
 <ListItem>
   <li
+    className={undefined}
     data-radium={true}
     style={
       Object {