Migrate to NextJS (#367)

.travis.yml

@@ -1,29 +1,37 @@
-sudo: 'required'
+sudo: "required"
 services:
-  - 'docker'
+  - "docker"
 node_js:
-  - '10.16.1'
+  - "10.16.1"
+env:
+  - TEST_DIR=app
+  - TEST_DIR=graphql
 cache: yarn
 before_install:
   - nvm install 10
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.0
   - export PATH="$HOME/.yarn/bin:$PATH"
 script:
   - set -e
+  - cd $TEST_DIR
   - yarn install --frozen-lockfile
   - yarn test
-  - yarn build
-  - cp RoadMap.html target/storybook/.
   - set +e
 branches:
   only:
     - master
     - docker
+before_deploy:
+  - cp RoadMap.html target/github-pages/.
+  - cd app
+  - yarn install --frozen-lockfile
+  - yarn build:storybook
+  - mv target/storybook ../target/github-pages/.
 deploy:
   - provider: pages
     skip-cleanup: true
     github-token: $GITHUB_TOKEN
-    local-dir: target/storybook/
+    local-dir: target/github-pages/
     target-branch: gh-pages
     on:
       branch: master

app/.babelrc

@@ -0,0 +1,9 @@
+
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "graphql-tag"
+    ]
+  ]
+}

app/.dockerignore

@@ -0,0 +1,12 @@
+.git
+.project
+.vscode
+.settings
+.vs_code
+.settings
+.storybook/
+target/
+node_modules/
+test/
+schema.json
+yarn-error.log

.eslintrc.js → app/.eslintrc.js

@@ -36,7 +36,7 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
   },
-  parser: "babel-eslint",
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
@@ -49,11 +49,6 @@ module.exports = {
     react: {
       version: 'detect',
     },
-    'import/ignore': [
-      '@connexta',
-      // TODO: Remove this
-      'intrigue-api',
-    ],
   },
   rules: {
     'no-empty': [
@@ -68,4 +63,5 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn',
     ...graphqlRules(),
   },
+  ignorePatterns: ['node_modules/', 'target/'],
 }

app/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/target
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

app/.mocharc.json

@@ -0,0 +1,6 @@
+{
+  "file": "./test/mocha.setup.js",
+  "require": ["./test/babel-register.js", "esm"],
+  "extension": ["tsx", "js"],
+  "spec": ["./src/**/*.spec.js"]
+}

app/.prettierignore

@@ -0,0 +1,3 @@
+.next/
+target/
+node_modules/

app/.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+  semi: false,
+  arrowParens: 'avoid',
+}

app/.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from '@storybook/react'
+
+configure(require.context('../src', true, /\.stories\.(t|j)sx?$/), module)

app/.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [require.resolve('babel-preset-react-app')],
+    },
+  })
+
+  config.resolve.extensions.push('.ts', '.tsx')
+  return config
+}

app/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:alpine
+
+RUN adduser -S revelio
+RUN mkdir -p /revelio
+RUN chown revelio /revelio
+
+USER revelio
+
+# Root path for file contents within the container
+WORKDIR /revelio
+
+COPY --chown=revelio:root package.json .
+COPY --chown=revelio:root yarn.lock .
+RUN yarn install
+
+COPY --chown=revelio:root . .
+
+RUN yarn build
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

app/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

app/next.config.js

@@ -0,0 +1,7 @@
+const withTM = require('next-transpile-modules')(['geospatialdraw', 'ol']) // pass the modules you would like to see transpiled
+
+module.exports = withTM({
+  publicRuntimeConfig: {
+    GRAPHQL_BASE_URL: process.env['GRAPHQL_BASE_URL'],
+  },
+})

app/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@connexta/revelio",
+  "version": "2.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "build:storybook": "build-storybook -c .storybook -o target/storybook",
+    "start": "next start",
+    "fmt": "prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
+    "storybook": "start-storybook -p 8081 -c .storybook",
+    "lint": "eslint .",
+    "test:prettier": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
+    "test:mocha": "cross-env NODE_ENV=test mocha",
+    "test": "yarn test:prettier && yarn lint && yarn test:mocha && yarn build"
+  },
+  "dependencies": {
+    "@apollo/react-hooks": "3.1.3",
+    "@apollo/react-ssr": "3.1.3",
+    "@date-io/moment": "^2.6.0",
+    "@material-ui/core": "^4.9.11",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.50",
+    "@material-ui/pickers": "^3.2.10",
+    "@storybook/addon-knobs": "^5.3.18",
+    "apollo-cache-inmemory": "1.6.5",
+    "apollo-client": "2.6.8",
+    "apollo-link": "^1.2.14",
+    "apollo-link-batch-http": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "1.5.16",
+    "apollo-utilities": "^1.3.3",
+    "geospatialdraw": "0.5.7",
+    "golden-layout": "^1.5.9",
+    "graphql": "^14.0.2",
+    "graphql-tag": "2.10.3",
+    "immutable": "^4.0.0-rc.12",
+    "isomorphic-unfetch": "^3.0.0",
+    "lodash.throttle": "^4.1.1",
+    "material-table": "^1.57.2",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.28",
+    "next": "latest",
+    "next-transpile-modules": "^3.3.0",
+    "ol": "^6.3.1",
+    "polished": "^3.5.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^16.7.0",
+    "universal-cookie": "^4.0.3",
+    "uuid": "^7.0.3"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/register": "^7.9.0",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/react": "^5.3.18",
+    "@types/react": "^16.9.34",
+    "@typescript-eslint/parser": "^2.31.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-graphql-tag": "^2.5.0",
+    "babel-preset-react-app": "^9.1.2",
+    "chai": "^4.2.0",
+    "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-graphql": "^3.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "esm": "^3.2.25",
+    "jsdom": "^16.2.2",
+    "mocha": "^7.1.2",
+    "prettier": "^2.0.5",
+    "typescript": "^3.8.3"
+  }
+}

src/main/webapp/@storybook/react.js → app/src/@storybook/react.js

@@ -1,11 +1,11 @@
-import { storiesOf as of } from '@connexta/ace/@storybook/react'
-
+import { withInfo } from '@storybook/addon-info'
 import withTheme from './with-theme'
 import withDrawProvider from './with-draw-provider'
 import withMuiPickersProvider from './with-mui-pickers-provider'
-
+import { storiesOf as of } from '@storybook/react'
 export const storiesOf = (name, m) => {
   const stories = of(name, m)
+  stories.addDecorator(withInfo)
   stories.addDecorator(withTheme)
   stories.addDecorator(withDrawProvider)
   stories.addDecorator(withMuiPickersProvider)

src/main/webapp/@storybook/use-state.js → app/src/@storybook/use-state.js

@@ -1,4 +1,4 @@
-import { action } from '@connexta/ace/@storybook/addon-actions'
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 
 export default initialState => {

src/main/webapp/@storybook/with-draw-provider.tsx → app/src/@storybook/with-draw-provider.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-const { DrawProvider } = require('../react-hooks/use-draw-interface')
+import React from 'react'
+import { DrawProvider } from '../react-hooks/use-draw-interface'
 
 const withDrawProvider = (Story: any) => {
   return (

src/main/webapp/@storybook/with-theme.js → app/src/@storybook/with-theme.js

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { dark, light } from '../theme/theme'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 
-const { boolean } = require('@connexta/ace/@storybook/addon-knobs')
+import { boolean } from '@storybook/addon-knobs'
 
 const withTheme = Story => {
   const darkMode = boolean('Dark Mode', false)