Fix app config

.eslintrc

@@ -13,11 +13,12 @@
         "node": true,
     },
     "plugins": [
+        "import",
+        "jsx-a11y",
         "react",
     ],
     "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
+        "airbnb",
     ],
     "settings": {
         "react": {
@@ -25,23 +26,16 @@
         },
     },
     "rules": {
-        "arrow-spacing": "error",
-        "comma-dangle": ["error", "always-multiline"],
-        "eol-last": "error",
+        "array-bracket-newline": ["error", { "multiline": true }],
+        "array-element-newline": ["error", "consistent"],
+        "import/no-unresolved": "off",
         "indent": ["error", 4],
-        "jsx-quotes": "error",
-        "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
-        "keyword-spacing": "error",
-        "no-console": "off",
-        "no-trailing-spaces": "error",
-        "quotes": ["error", "double", { "avoidEscape": true }],
-        "react/display-name": "off",
-        "react/jsx-no-target-blank": "off",
-        "react/no-unescaped-entities": "off",
-        "react/prop-types": "off",
+        "max-nested-callbacks": ["error", 1],
+        "no-underscore-dangle": ["error", { "allow": ["__INIT_MATERIAL_UI__"] }],
+        "quotes": ["error", "double", { "avoidEscape": false }],
+        "react/jsx-indent": ["error", 4, { checkAttributes: false, indentLogicalExpressions: true }],
+        "react/jsx-indent-props": ["error", 4],
         "react/react-in-jsx-scope": "off",
         "semi": ["error", "never"],
-        "space-before-blocks": "error",
-        "space-infix-ops": "error",
     },
 }

.gitignore

@@ -57,6 +57,9 @@ typings/
 # dotenv environment variables file
 .env
 
+# NextJS files
 app/build
+app/.next
+
+# OS X junk
 .DS_Store
-yarn.lock

app/.babelrc

-{
-  "plugins": [
-    [
-      "module-resolver", {
-        "root": ["."],
-        "alias": {
-          "styles": "./styles"
-        },
-        "cwd": "babelrc"
-    }],
-    [
-      "wrap-in-js",
-      {
-        "extensions": ["css$", "scss$"]
-      }
-    ]
-  ],
-  "presets": [
-    "next/babel"
-  ],
-  "ignore": []
-}

app/babel.config.js

+module.exports = (api) => {
+    api.cache(true)
+
+    const presets = [
+        "next/babel",
+        "@zeit/next-typescript/babel",
+    ]
+
+    const plugins = [
+        [
+            "@babel/plugin-proposal-pipeline-operator", {
+                proposal: "minimal",
+            },
+        ], [
+            "module-resolver", {
+                alias: {
+                    components: "./app/components",
+                    lib: "./app/lib",
+                    pages: "./app/pages",
+                    styles: "./app/styles",
+                },
+            },
+        ], [
+            "wrap-in-js", {
+                extensions: ["scss$"],
+            },
+        ],
+    ]
+
+    return {
+        presets,
+        plugins,
+    }
+}

app/components/Plot.jsx

@@ -6,6 +6,8 @@ import Plotly from "plotly.js/dist/plotly"
 import createPlotComponent from "react-plotly.js/factory"
 import { bar, layout } from "plotly-js-material-design-theme"
 
+const Graph = createPlotComponent(Plotly)
+
 const styles = theme => ({
     root: {
         ...theme.mixins.gutters(),
@@ -16,12 +18,7 @@ const styles = theme => ({
     },
 })
 
-class Plot extends React.Component {
-    render() {
-        const { classes } = this.props
-        const Graph = createPlotComponent(Plotly)
-
-        return (
+const Plot = ({ classes }) => (
     <Paper className={classes.root} elevation={1}>
         <Graph
             data={[
@@ -60,11 +57,13 @@ class Plot extends React.Component {
         />
     </Paper>
 )
-    }
-}
 
 Plot.propTypes = {
     classes: PropTypes.object.isRequired,
 }
 
-export default withStyles(styles)(Plot)
+export default (
+    styles
+    |> withStyles
+    |> (_ => _(Plot))
+)

app/lib/getPageContext.js

 import { SheetsRegistry } from "jss"
-import { createMuiTheme } from "@material-ui/core/styles"
-import { createGenerateClassName } from "@material-ui/core/styles"
+import { createMuiTheme, createGenerateClassName } from "@material-ui/core/styles"
 
 // A theme with custom primary and secondary color.
 // It's optional.

app/lib/withRoot.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { MuiThemeProvider } from "@material-ui/core/styles/"
 import CssBaseline from "@material-ui/core/CssBaseline"
-import getPageContext from "./getPageContext"
+import getPageContext from "lib/getPageContext"
 
 function withRoot(Component) {
     let pageContext = null
@@ -22,13 +22,15 @@ function withRoot(Component) {
         }
 
         render() {
-            // MuiThemeProvider makes the theme available down the React tree thanks to React context.
+            // MuiThemeProvider makes the theme available down the React tree thanks to React
+            // context.
             return (
                 <MuiThemeProvider
                     theme={pageContext.theme}
                     sheetsManager={pageContext.sheetsManager}
                 >
-                    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+                    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to */}
+                    {/* build upon. */}
                     <CssBaseline />
                     <Component {...this.props} />
                 </MuiThemeProvider>
@@ -40,7 +42,7 @@ function withRoot(Component) {
         pageContext: PropTypes.object,
     }
 
-    WithRoot.getInitialProps = ctx => {
+    WithRoot.getInitialProps = (ctx) => {
         if (Component.getInitialProps) {
             return Component.getInitialProps(ctx)
         }

app/next.config.js

+const withPlugins = require("next-compose-plugins")
+const withTranspileModules = require("next-transpile-modules")
+const withTypescript = require("@zeit/next-typescript")
 const withSass = require("@zeit/next-sass")
 
-module.exports = withSass({
+const pluginsConfig = [
+    [withTranspileModules, { transpileModules: ["@iconify/react"] }],
+    [withTypescript],
+    [withSass],
+]
+
+const nextConfig = {
     exportPathMap() {
         return {
             "/": { page: "/" },
         }
     },
     distDir: "build",
-})
+}
+
+module.exports = withPlugins(pluginsConfig, nextConfig)

app/pages/_document.jsx

 import React from "react"
 import Document, { Head, Main, NextScript } from "next/document"
 import JssProvider from "react-jss/lib/JssProvider"
-import getPageContext from "../lib/getPageContext"
+import getPageContext from "lib/getPageContext"
 
 class MyDocument extends Document {
     static getInitialProps(ctx) {
@@ -45,6 +45,7 @@ class MyDocument extends Document {
             ),
         }
     }
+
     render() {
         const { pageContext } = this.props
 
@@ -56,8 +57,8 @@ class MyDocument extends Document {
                     <meta
                         name="viewport"
                         content={
-                            "user-scalable=0, initial-scale=1, " +
-                            "minimum-scale=1, width=device-width, height=device-height"
+                            `user-scalable=0, initial-scale=1,
+                             minimum-scale=1, width=device-width, height=device-height`
                         }
                     />
                     {/* PWA primary color */}

app/pages/index.jsx

@@ -12,12 +12,10 @@ import {
 } from "@material-ui/core"
 import Typography from "@material-ui/core/Typography"
 import { withStyles } from "@material-ui/core/styles/"
-import withRoot from "../lib/withRoot"
-import "../styles/index.scss"
+import withRoot from "lib/withRoot"
+import "styles/index.scss"
 
-const Plot = dynamic(import("../components/Plot"), {
-    ssr: false,
-})
+const Plot = dynamic(import("components/Plot"), { ssr: false })
 
 const styles = theme => ({
     root: {
@@ -92,4 +90,9 @@ Index.propTypes = {
     classes: PropTypes.object.isRequired,
 }
 
-export default withRoot(withStyles(styles)(Index))
+export default (
+    styles
+    |> withStyles
+    |> (_ => _(Index))
+    |> withRoot
+)

next.js

@@ -5,7 +5,7 @@ const dev = process.env.NODE_ENV !== "production"
 const app = next({ dev, dir: "./app" })
 const handle = app.getRequestHandler()
 
-module.exports = (async server => {
+module.exports = async (server) => {
     await app.prepare()
     // Middleware to insert app and handle inside the req object.
     server.use("/", (req, res, n) => {
@@ -23,4 +23,4 @@ module.exports = (async server => {
         server.originalListen(port)
     }
     return server
-})
+}

package.json

@@ -14,22 +14,27 @@
         "build": "cd app && next build",
         "start": "npm run build && env NODE_ENV=production node app.js",
         "dev": "nodemon --ignore app/ app.js",
-        "style:check": "eslint -c .eslintrc --ext .js --ext .jsx --ignore-path .gitignore .",
-        "style:format": "npm run style:check -- --fix"
+        "style:check": "eslint -c .eslintrc --ext .js,.jsx --ignore-path .gitignore .",
+        "style:format": "npm run style:check -- --fix",
+        "style:rules": "eslint --print-config .eslintrc"
     },
     "dependencies": {
+        "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
         "@material-ui/core": "^3.9.3",
         "@zeit/next-sass": "^1.0.1",
+        "@zeit/next-typescript": "^1.1.1",
         "babel-plugin-module-resolver": "^3.2.0",
         "babel-plugin-wrap-in-js": "^1.1.1",
-        "body-parser": "^1.18.3",
+        "body-parser": "^1.19.0",
         "cookie-parser": "^1.4.4",
         "express": "^4.16.4",
         "jss": "^9.8.7",
         "next": "^7.0.2",
+        "next-compose-plugins": "^2.2.0",
+        "next-transpile-modules": "^1.3.0",
         "node-sass": "^4.12.0",
         "plotly-js-material-design-theme": "^1.1.3",
-        "plotly.js": "^1.47.3",
+        "plotly.js": "^1.47.4",
         "prop-types": "^15.7.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
@@ -39,7 +44,10 @@
     "devDependencies": {
         "babel-eslint": "^10.0.1",
         "eslint": "^5.16.0",
-        "eslint-plugin-react": "^7.12.4",
-        "nodemon": "^1.18.11"
+        "eslint-config-airbnb": "^17.1.0",
+        "eslint-plugin-import": "^2.17.2",
+        "eslint-plugin-jsx-a11y": "^6.2.1",
+        "eslint-plugin-react": "^7.13.0",
+        "nodemon": "^1.19.0"
     }
 }