[WIP] chore(app): update react package

.gitignore

@@ -0,0 +1 @@
+node_modules/

packages/react/.babelrc

@@ -1,11 +1,3 @@
 {
-  "presets": [
-    "react",
-    "env"
-  ],
-  "plugins": [
-    ["transform-object-rest-spread", { "useBuiltIns": true }],
-    "transform-function-bind",
-    "transform-class-properties"
-  ]
+  "presets": ["@babel/preset-react", "@babel/preset-env"]
 }

packages/react/.eslintrc

@@ -4,17 +4,11 @@
     "jest": true
   },
   "parser": "babel-eslint",
-  "plugins": [
-    "prettier"
-  ],
-  "extends": [
-    "airbnb",
-    "prettier",
-    "prettier/react"
-  ],
+  "plugins": ["prettier"],
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "rules": {
     "prettier/prettier": "error",
     "react/forbid-prop-types": [1, { "forbid": ["any"] }],
-    "max-len": ["error", {"code": 100, "ignoreUrls": true}]
+    "max-len": ["error", { "code": 125, "ignoreUrls": true }]
   }
 }

packages/react/.prettierrc

@@ -1,3 +1,3 @@
 {
-  "printWidth": 100
+  "printWidth": 125
 }

packages/react/package.json

@@ -15,65 +15,47 @@
     "url": "git+https://github.com/nos/create-nos-dapp.git"
   },
   "license": "MIT",
-  "keywords": [
-    "nOS",
-    "NEO",
-    "Blockhain",
-    "React",
-    "Parcel",
-    "JSS",
-    "JS",
-    "HTML",
-    "starter"
-  ],
+  "keywords": ["nOS", "NEO", "Blockhain", "React", "Parcel", "JSS", "JS", "HTML", "starter"],
   "author": "",
   "bugs": {
     "url": "https://github.com/nos/create-nos-dapp/issues"
   },
   "homepage": "https://github.com/nos/create-nos-dapp#readme",
   "dependencies": {
-    "@cityofzion/neon-js": "3.9.2",
-    "@nosplatform/api-functions": "0.3.0",
-    "babel-polyfill": "6.26.0",
-    "jss": "9.8.1",
-    "jss-camel-case": "6.1.0",
-    "jss-global": "3.0.0",
-    "jss-vendor-prefixer": "8.0.0",
-    "prop-types": "15.6.1",
-    "react": "16.3.1",
-    "react-dom": "16.3.1",
-    "react-jss": "8.4.0"
+    "@cityofzion/neon-js": "4.3.0",
+    "@nosplatform/api-functions": "0.4.2",
+    "prop-types": "15.6.2",
+    "react": "16.6.3",
+    "react-dom": "16.6.3"
   },
   "devDependencies": {
-    "babel-cli": "6.26.0",
-    "babel-eslint": "8.2.3",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-function-bind": "6.22.0",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "6.24.1",
+    "@babel/core": "7.2.0",
+    "@babel/preset-env": "7.2.0",
+    "@babel/preset-react": "7.0.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
     "coveralls": "3.0.0",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.1.1",
-    "enzyme-to-json": "3.3.3",
-    "eslint": "4.19.1",
-    "eslint-config-airbnb": "16.1.0",
-    "eslint-config-prettier": "2.9.0",
-    "eslint-plugin-import": "2.11.0",
-    "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-prettier": "2.6.0",
-    "eslint-plugin-react": "7.7.0",
-    "husky": "0.14.3",
-    "jest": "22.4.3",
-    "parcel-bundler": "1.7.1",
-    "prettier": "1.12.0",
-    "raf": "3.4.0",
-    "react-test-renderer": "16.3.1"
+    "enzyme": "3.8.0",
+    "enzyme-adapter-react-16": "1.7.1",
+    "enzyme-to-json": "3.3.5",
+    "eslint": "5.10.0",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-prettier": "3.3.0",
+    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prettier": "3.0.0",
+    "eslint-plugin-react": "7.11.1",
+    "jest": "23.6.0",
+    "parcel-bundler": "1.10.3",
+    "prettier": "1.15.3",
+    "raf": "3.4.1",
+    "react-test-renderer": "16.6.3"
+  },
+  "resolutions": {
+    "babel-core": "7.0.0-bridge.0"
   },
   "jest": {
-    "setupFiles": [
-      "./jest.setup.js"
-    ],
+    "setupFiles": ["./jest.setup.js"],
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}",
       "!src/index.jsx",
@@ -83,12 +65,10 @@
     "moduleNameMapper": {
       "^.+\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/src/__mocks__/file.mock.js"
     },
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "snapshotSerializers": ["enzyme-to-json/serializer"],
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    }
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+  "browserslist": ["> 1%", "last 2 versions"]
 }

packages/react/src/components/Header/index.jsx

@@ -1,20 +1,19 @@
 import React from "react";
-import injectSheet from "react-jss";
 import PropTypes from "prop-types";
 
-import SpinningLogo from "./../SpinningLogo";
+import SpinningLogo from "../SpinningLogo";
 
-const styles = {
-  header: {
-    backgroundColor: "#f0f0f0",
-    color: "#333333",
-    padding: "24px",
-    marginBottom: "32px"
-  },
-  title: {
-    fontSize: "1.5em"
-  }
-};
+// const styles = {
+//   header: {
+//     backgroundColor: "#f0f0f0",
+//     color: "#333333",
+//     padding: "24px",
+//     marginBottom: "32px"
+//   },
+//   title: {
+//     fontSize: "1.5em"
+//   }
+// };
 
 const Header = ({ classes, title }) => (
   <header className={classes.header}>
@@ -28,4 +27,4 @@ Header.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-export default injectSheet(styles)(Header);
+export default Header;

packages/react/src/components/NOSActions/index.jsx

@@ -1,25 +1,26 @@
 import React from "react";
-import injectSheet from "react-jss";
 import PropTypes from "prop-types";
 import { injectNOS, nosProps } from "@nosplatform/api-functions/lib/react";
 
-const styles = {
-  button: {
-    margin: "16px",
-    fontSize: "14px"
-  }
-};
+// const styles = {
+//   button: {
+//     margin: "16px",
+//     fontSize: "14px"
+//   }
+// };
 
 class NOSActions extends React.Component {
   handleAlert = async func => alert(await func);
 
   // handleGetAddress = async () => alert(await this.props.nos.getAddress());
 
-  handleClaimGas = () =>
-    this.props.nos
+  handleClaimGas = () => {
+    const { nos } = this.props;
+    nos
       .claimGas()
       .then(alert)
       .catch(alert);
+  };
 
   render() {
     const { classes, nos } = this.props;
@@ -51,36 +52,27 @@ class NOSActions extends React.Component {
 
     return (
       <React.Fragment>
-        <button className={classes.button} onClick={() => this.handleAlert(nos.getAddress())}>
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.getAddress())}>
           Get Address
         </button>
-        <button
-          className={classes.button}
-          onClick={() => this.handleAlert(nos.getBalance({ asset: neo }))}
-        >
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.getBalance({ asset: neo }))}>
           Get NEO Balance
         </button>
-        <button
-          className={classes.button}
-          onClick={() => this.handleAlert(nos.getBalance({ asset: gas }))}
-        >
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.getBalance({ asset: gas }))}>
           Get GAS Balance
         </button>
-        <button
-          className={classes.button}
-          onClick={() => this.handleAlert(nos.getBalance({ asset: rpx }))}
-        >
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.getBalance({ asset: rpx }))}>
           Get RPX Balance
         </button>
 
-        <button className={classes.button} onClick={this.handleClaimGas}>
+        <button type="button" className={classes.button} onClick={this.handleClaimGas}>
           Claim Gas
         </button>
-        <button className={classes.button} onClick={() => this.handleAlert(nos.send(send))}>
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.send(send))}>
           Send GAS to...
         </button>
 
-        <button className={classes.button} onClick={() => this.handleAlert(nos.testInvoke(invoke))}>
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.testInvoke(invoke))}>
           TestInvoke
         </button>
         {/*
@@ -91,10 +83,7 @@ class NOSActions extends React.Component {
             Invoke
           </button>
         */}
-        <button
-          className={classes.button}
-          onClick={() => this.handleAlert(nos.getStorage(getStorage))}
-        >
+        <button type="button" className={classes.button} onClick={() => this.handleAlert(nos.getStorage(getStorage))}>
           GetStorage
         </button>
       </React.Fragment>
@@ -107,4 +96,4 @@ NOSActions.propTypes = {
   nos: nosProps.isRequired
 };
 
-export default injectNOS(injectSheet(styles)(NOSActions));
+export default injectNOS(NOSActions);

packages/react/src/components/SpinningLogo/index.jsx

@@ -1,25 +1,24 @@
 import React from "react";
-import injectSheet from "react-jss";
 import PropTypes from "prop-types";
 
-import nosLogo from "./../../assets/logo.png";
+import nosLogo from "../../assets/logo.png";
 
-const styles = {
-  logoContainer: {
-    display: "block",
-    maxWidth: "200px",
-    margin: "32px auto",
-    position: "relative"
-  },
-  nosLogo: {
-    animation: "nOS-logo-spin infinite 3s linear",
-    width: "100%"
-  },
-  "@keyframes nOS-logo-spin": {
-    from: { transform: "rotate(0deg)" },
-    to: { transform: "rotate(360deg)" }
-  }
-};
+// const styles = {
+//   logoContainer: {
+//     display: "block",
+//     maxWidth: "200px",
+//     margin: "32px auto",
+//     position: "relative"
+//   },
+//   nosLogo: {
+//     animation: "nOS-logo-spin infinite 3s linear",
+//     width: "100%"
+//   },
+//   "@keyframes nOS-logo-spin": {
+//     from: { transform: "rotate(0deg)" },
+//     to: { transform: "rotate(360deg)" }
+//   }
+// };
 
 const SpinningLogo = ({ classes }) => (
   <div className={classes.logoContainer}>
@@ -31,4 +30,4 @@ SpinningLogo.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default injectSheet(styles)(SpinningLogo);
+export default SpinningLogo;

packages/react/src/index.jsx

@@ -1,21 +1,6 @@
-import "babel-polyfill";
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { create as createJss } from "jss";
-import camelCase from "jss-camel-case";
-import globalStyles from "jss-global";
-import vendorPrefixer from "jss-vendor-prefixer";
-import { JssProvider } from "react-jss";
-
 import App from "./views/App";
 
-const jss = createJss();
-jss.use(vendorPrefixer(), camelCase(), globalStyles());
-
-ReactDOM.render(
-  <JssProvider jss={jss}>
-    <App />
-  </JssProvider>,
-  document.getElementById("root")
-);
+ReactDOM.render(<App />, document.getElementById("root"));