Merge pull request #51 from CodeForAfrica/feature/next

Next is Now

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    ["syntax-dynamic-import"],
+    [
+      "module-resolver",
+      {
+        "root": ["./src"],
+        "alias": {
+          "assets": "./src/assets",
+          "components": "./src/components",
+          "data": "./src/data",
+          "lib": "./src/lib"
+        }
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -1,18 +1,27 @@
 {
   "root": true,
+  "parser": "babel-eslint",
   "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"],
   "env": {
     "browser": true,
     "jest": true
   },
+  "plugins": ["module-resolver"],
+  "settings": {
+    "import/resolver": {
+      "babel-module": {}
+    }
+  },
   "rules": {
+    "module-resolver/use-alias": 2,
     "react/prop-types": 0,
     "react/jsx-filename-extension": [
       1,
       {
         "extensions": [".js", ".jsx"]
       }
     ],
+    "react/jsx-props-no-spreading": 0,
     "no-nested-ternary": "off"
   }
 }

README.md

@@ -9,6 +9,6 @@ Dominion gives journalist and civic activists useful facts and data about land o
 
 ## Chart Definitions
 
-The charts in the app are defined in the json file `charts.json` in the `src/data/`. When you define the charts, they will be assigned a unique id when your run `yarn start` or `yarn deploy` or `yarn build`. This id will be used to identify this chart especially important when used in an embed. Don't chnage the id once the code is deployed otherwise any shared embeds with this Id will fail.
+The charts in the app are defined in the json file `charts.json` in the `src/data/` folder. When you define the charts, they will be assigned a unique id when your run `yarn start` or `yarn deploy` or `yarn build`. This id will be used to identify this chart especially important when used in an embed. Don't chnage the id once the code is deployed otherwise any shared embeds with this Id will fail.
 
 Note: Using router in gh-pages see [spa-github-pages](https://github.com/rafrex/spa-github-pages). It requires the app to have a `404.html` file with a custom script and a custom script in the `index.html` that will allow the router to work in gh-pages.

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*"],
+      "assets/*": ["src/assets/*"],
+      "components/*": ["src/components/*"],
+      "data/*": ["src/data/*"],
+      "lib/*": ["src/lib/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,4 @@
+const withCSS = require('@zeit/next-css');
+const withImages = require('next-images');
+
+module.exports = withCSS(withImages());

package.json

@@ -4,58 +4,79 @@
   "private": true,
   "homepage": "https://dev.dominion.africa",
   "dependencies": {
-    "@codeforafrica/hurumap-ui": "^0.1.12",
+    "@apollo/react-hooks": "^3.1.3",
+    "@apollo/react-ssr": "^3.1.3",
+    "@codeforafrica/hurumap-ui": "^0.2.0-alpha.10",
     "@fortawesome/fontawesome-free": "^5.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-brands-svg-icons": "^5.6.3",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@material-ui/core": "^4.5.1",
+    "@material-ui/core": "^4.6.0",
     "@material-ui/icons": "^4.5.1",
+    "@material-ui/styles": "^4.6.0",
+    "@types/react": "^16.9.11",
+    "@zeit/next-css": "^1.0.1",
     "apollo-boost": "^0.4.3",
-    "apollo-client": "^2.6.3",
+    "apollo-cache": "^1.3.2",
+    "apollo-cache-inmemory": "^1.6.3",
+    "apollo-client": "^2.6.4",
+    "apollo-link": "^1.2.13",
+    "apollo-link-http": "^1.5.16",
+    "apollo-utilities": "^1.3.2",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "dequal": "^1.0.0",
     "graphql": "^14.4.2",
     "graphql-tag": "^2.10.1",
+    "isomorphic-unfetch": "^3.0.0",
+    "next": "^9.1.3",
+    "next-images": "^1.2.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-apollo": "^2.5.8",
+    "react-apollo": "^3.1.3",
     "react-apollo-hooks": "^0.5.0",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
     "shortid": "^2.2.15",
-    "typescript": "*"
+    "typescript": "*",
+    "webpack": "^4.41.2"
   },
   "devDependencies": {
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.6.0",
+    "@babel/core": "^7.7.2",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-import-resolver-babel-module": "^5.1.0",
     "eslint-plugin-import": "^2.15.0",
-    "eslint-plugin-json": "^1.4.0",
+    "eslint-plugin-json": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-module-resolver": "^0.15.0",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
-    "gh-pages": "2.0.1",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.0",
-    "prettier": "^1.16.1"
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "husky": "^3.0.9",
+    "lint-staged": "^9.4.2",
+    "now": "^16.4.4",
+    "prettier": "^1.19.1"
   },
   "scripts": {
     "commitChartDefinitions": "git add src/data/charts.json && (git diff-index --quiet HEAD || (git commit -m 'updated chart ids' && git push))",
     "applyIdsToChartDefinitions": "node scripts/chartsDefinitionsApplyUniqueId.js",
+    "dev": "next",
     "prestart": "yarn applyIdsToChartDefinitions",
-    "start": "react-scripts start",
+    "start": "next start",
     "prebuild": "yarn applyIdsToChartDefinitions",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "lint": "node_modules/eslint/bin/eslint.js --fix src scripts",
-    "eject": "react-scripts eject",
+    "build": "next build",
+    "test": "next test",
+    "lint": "yarn eslint --fix ./",
+    "lint-staged": "yarn eslint --fix",
     "predeploy": "yarn build && yarn commitChartDefinitions",
-    "deploy": "gh-pages -d build",
+    "deploy": "yarn now --prod",
     "postversion": "git push --follow-tags && yarn deploy && echo \"Successfully released version $npm_package_version!\""
   },
   "eslintConfig": {
@@ -80,7 +101,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,json,scss,md}": [
-      "yarn lint",
+      "yarn lint-staged",
       "git add"
     ]
   }

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Dominion",
+  "name": "Dominion.AFRICA",
   "icons": [
     {
       "src": "favicon.ico",
@@ -10,6 +10,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#2b3129",
   "background_color": "#ffffff"
 }

scripts/chartsDefinitionsApplyUniqueId.js

@@ -1,3 +1,7 @@
+/** This file runs under node and hence shouldn't contain
+ * any `processable` syntax
+ */
+/* eslint-disable module-resolver/use-alias */
 const fs = require('fs');
 const shortid = require('shortid');
 const sectionedCharts = require('../src/data/charts.json');