Merge pull request #105 from FormidableLabs/react-16-update

Updates for React 16

.eslintrc-base

@@ -3,4 +3,4 @@ plugins:
   - "filenames"
 
 rules:
-  "filenames/filenames": [2, "^[a-z0-9\\-\\.]+$"] # dash-cased filenames.
+  "filenames/match-regex": [2, "^[a-z0-9\\-\\.]+$"] # dash-cased filenames.

.eslintrc-node

@@ -1,4 +1,7 @@
 ---
 extends:
-  - "defaults/configurations/walmart/es5-node"
+  - "formidable/configurations/es5-node"
   - ".eslintrc-base"
+
+rules:
+  global-require: off

.eslintrc-react

@@ -1,7 +1,17 @@
 ---
 extends:
-  - "defaults/configurations/walmart/es6-react"
+  - "formidable/configurations/es6-react"
   - ".eslintrc-base"
 
+rules:
+  "no-invalid-this": off
+  "react/no-multi-comp": off
+  "react/sort-prop-types": off
+  "import/no-unresolved": off
+  "react/sort-comp": off
+  "no-magic-numbers": off
+  "react/jsx-handler-names": off
+
 globals:
   "CodeMirror": true
+

.eslintrc-react-test

@@ -1,8 +1,16 @@
 ---
 extends:
-  - "defaults/configurations/walmart/es6-react"
-  - "defaults/environments/test"
+  - "formidable/configurations/es6-react-test"
   - ".eslintrc-base"
 
+rules:
+  "no-invalid-this": off
+  "react/no-multi-comp": off
+  "react/sort-prop-types": off
+  "import/no-unresolved": off
+  "react/sort-comp": off
+  "no-magic-numbers": off
+  "react/jsx-handler-names": off
+
 globals:
   expect: false

demo/app.jsx

@@ -1,17 +1,18 @@
+
 /* eslint new-cap:0 no-unused-vars:0 */
 /* eslint-disable no-var, object-shorthand */
 import React from "react";
 import ReactDOM from "react-dom";
 import Playground from "../src/index";
+import Button from "./components/button";
+import DebugInfo from "./components/debug-info";
 
 require("./styles/syntax.css");
 require("./styles/codemirror.css");
 require("./styles/demo.css");
 
-import Button from "./components/button";
 const componentExample = require("raw!./examples/component.example");
 
-import DebugInfo from "./components/debug-info";
 const contextExample = require("raw!./examples/context.example");
 
 const es6Example = require("raw!./examples/es6.example");
@@ -22,54 +23,61 @@ const Index = () => (
 
     <Playground
       codeText={componentExample}
-      scope={{React: React, Button: Button}}/>
+      scope={{ React: React, Button: Button }}
+    />
 
     <h2>Collapsable Code</h2>
 
     <Playground
       codeText={componentExample}
-      scope={{React: React, Button: Button}}
-      collapsableCode={true}/>
+      scope={{ React: React, Button: Button }}
+      collapsableCode
+    />
 
     <h2>Collapsable Code (Expanded by Default)</h2>
 
     <Playground
       codeText={componentExample}
-      scope={{React: React, Button: Button}}
-      collapsableCode={true}
-      initiallyExpanded/>
+      scope={{ React: React, Button: Button }}
+      collapsableCode
+      initiallyExpanded
+    />
 
     <h2>Code Selection Highlighting</h2>
 
     <Playground
       codeText={componentExample}
-      scope={{React: React, Button: Button}}
-      selectedLines={[2, 3, 4, 9]}/>
+      scope={{ React: React, Button: Button }}
+      selectedLines={[2, 3, 4, 9]}
+    />
 
     <h2>Prop Descriptions</h2>
 
     <Playground
       codeText={componentExample}
-      scope={{React: React, Button: Button}}
+      scope={{ React: React, Button: Button }}
       propDescriptionMap={{
         buttonStyle: "style object for inline styles"
       }}
       docClass={Button}
-      collapsableCode={true}/>
+      collapsableCode
+    />
 
     <h2>With Context</h2>
 
     <Playground
-      context={{environment: "staging"}}
+      context={{ environment: "staging" }}
       codeText={contextExample}
-      scope={{React: React, DebugInfo: DebugInfo}}/>
+      scope={{ React: React, DebugInfo: DebugInfo }}
+    />
 
     <h2>ES6 Console</h2>
 
     <Playground
       codeText={es6Example}
-      es6Console={true}
-      scope={{React: React, Button: Button}}/>
+      es6Console
+      scope={{ React: React, Button: Button }}
+    />
   </div>
 );
 

package.json

@@ -57,32 +57,33 @@
     "check-dev": "npm run lint && npm run test-dev"
   },
   "dependencies": {
-    "babel-cli": "^6.5.1",
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.2.3",
-    "babel-polyfill": "^6.5.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-react": "^6.0.0",
-    "babel-preset-stage-0": "^6.0.0",
-    "babel-preset-stage-1": "^6.0.0",
-    "babel-standalone": "^6.4.4",
-    "codemirror": "^5.15.2",
-    "prop-types": "^15.5.10",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-codemirror": "^1.0.0",
-    "react-dom": "^15.4.2",
-    "rimraf": "^2.4.0",
-    "webpack": "^1.12.3"
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^6.4.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "babel-standalone": "^6.26.0",
+    "codemirror": "^5.30.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-codemirror2": "^2.0.2",
+    "react-dom": "^16.0.0",
+    "rimraf": "^2.6.2",
+    "webpack": "^1.15.0"
   },
   "devDependencies": {
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^8.0.1",
     "chai": "^3.2.0",
+    "core-js": "^2.5.1",
     "css-loader": "~0.9.0",
-    "eslint": "^0.24.1",
-    "eslint-config-defaults": "^3.0.3",
-    "eslint-plugin-filenames": "^0.1.1",
-    "eslint-plugin-react": "^2.6.4",
+    "eslint": "^4.8.0",
+    "eslint-config-formidable": "^3.0.0",
+    "eslint-plugin-filenames": "^1.2.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-react": "^7.4.0",
     "file-loader": "^0.11.2",
     "isparta-loader": "^2.0.0",
     "karma": "^0.13.9",
@@ -103,6 +104,7 @@
     "phantomjs-prebuilt": "^2.1.15",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^1.2.8",
+    "react-test-renderer": "^16.0.0",
     "sinon": "^1.16.1",
     "sinon-chai": "^2.8.0",
     "style-loader": "~0.8.0",

src/components/doc.jsx

@@ -35,11 +35,11 @@ const propTypesArray = [{
   isRequired: PropTypes.element.isRequired
 }];
 
-const getReactPropType = propTypeFunc => {
+const getReactPropType = (propTypeFunc) => {
   let name = "custom";
   let isRequired = false;
 
-  propTypesArray.some(propType => {
+  propTypesArray.some((propType) => {
     if (propTypeFunc === propType.test) {
       name = propType.key;
       return true;
@@ -64,8 +64,8 @@ class Doc extends Component {
 
   static propTypes = {
     componentClass: PropTypes.func,
-    propDescriptionMap: PropTypes.object,
-    ignore: PropTypes.array
+    ignore: PropTypes.array,
+    propDescriptionMap: PropTypes.object
   };
 
   render() {
@@ -90,11 +90,11 @@ class Doc extends Component {
       <div className="playgroundDocs">
         <ul>
           {
-            propTypes.map(propObj => (
+            propTypes.map((propObj) => (
               <li key={propObj.propName}>
                 <b>{propObj.propName}</b>
                 <i>{`: ${propObj.type.name}`}</i>
-                {propObj.description && " - " + propObj.description}
+                {propObj.description && ` - ${ propObj.description}`}
                 <b>{`${propObj.type.isRequired ? " required" : ""}`}</b>
               </li>
             ))

src/components/editor.jsx

@@ -1,7 +1,7 @@
 /* eslint new-cap:0 no-unused-vars:0 */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Codemirror from "react-codemirror";
+import Codemirror from "react-codemirror2";
 
 if (typeof window !== "undefined") {
   require("codemirror/mode/jsx/jsx");
@@ -10,29 +10,29 @@ if (typeof window !== "undefined") {
 class Editor extends Component {
 
   static propTypes = {
-    theme: PropTypes.string,
-    readOnly: PropTypes.bool,
-    external: PropTypes.bool,
+    className: PropTypes.string,
     codeText: PropTypes.string,
-    selectedLines: PropTypes.array,
+    external: PropTypes.bool,
     onChange: PropTypes.func,
+    readOnly: PropTypes.bool,
+    selectedLines: PropTypes.array,
     style: PropTypes.object,
-    className: PropTypes.string
+    theme: PropTypes.string
   };
 
   componentDidMount = () => {
-    const editor = this.refs.editor.getCodeMirror();
+    const editor = this.editor.editor;
     this.highlightSelectedLines(editor, this.props.selectedLines);
   };
 
   highlightSelectedLines = (editor, selectedLines) => {
     if (Array.isArray(selectedLines)) {
-      selectedLines.forEach(lineNumber =>
+      selectedLines.forEach((lineNumber) =>
         editor.addLineClass(lineNumber, "wrap", "CodeMirror-activeline-background"));
     }
   };
 
-  updateCode = (code) => {
+  updateCode = (editor, meta, code) => {
     if (!this.props.readOnly && this.props.onChange) {
       this.props.onChange(code);
     }
@@ -60,13 +60,14 @@ class Editor extends Component {
 
     return (
       <Codemirror
-        ref="editor"
+        ref={(c) => { this.editor = c; }}
         className={className}
         external={external}
         options={options}
         style={style}
         value={codeText}
-        onChange={this.updateCode} />
+        onChange={this.updateCode}
+      />
     );
   }