Start Composing Revelio (#268)

.gitignore

@@ -8,3 +8,4 @@ yarn-error.log
 *.classpath
 *.vscode
 .DS_Store
+dist

README.md

@@ -68,4 +68,16 @@ To get a deeper look into the system, take a look at the
 
 ## GraphQL Tools
 
-For information on GraphQL development tools, take a look at the [GraphQL Tools](./src/main/graphql-server) docs.
+For information on GraphQL development tools, take a look at the [GraphQL Tools](./src/main/graphql-server) docs.
+
+## How to Publish
+
+First bump the version in the package.json
+
+Then build the library: 
+
+    yarn build:library
+
+Finally publish the library:
+
+    npm publish dist

library.tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "skipLibCheck": true,
+    "outDir": "./dist"
+  },
+  "include": [
+    "src/main/webapp/components/**/index.ts",
+    "src/main/webapp/components/**/index.tsx",
+    "src/main/webapp/components/**/index.js",
+    "src/main/webapp/components/**/index.jsx",
+    "src/main/webapp/react-hooks/**/index.ts",
+    "src/main/webapp/react-hooks/**/index.tsx",
+    "src/main/webapp/react-hooks/**/index.js",
+    "src/main/webapp/react-hooks/**/index.jsx"
+  ],
+  "extends": "./tsconfig"
+}

package.json

@@ -1,29 +1,74 @@
 {
-  "name": "revelio",
-  "version": "1.0.0",
+  "name": "@connexta/revelio",
+  "version": "0.0.1",
   "main": "src/main/webapp/main.js",
   "license": "MIT",
   "devDependencies": {
-    "@connexta/ace": "https://github.com/connexta/ace.git#81e7b8b22b3f7e43b356ba5dfbc065ffdb694892",
+    "@apollo/react-hooks": "^3.1.3",
+    "@apollo/react-ssr": "^3.1.3",
+    "@connexta/ace": "https://github.com/connexta/ace.git#60c7481d6372dfd1a2ec661e7de0a0bbde90ff50",
+    "@date-io/moment": "1.3.13",
+    "@material-ui/core": "^4.6.1",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.32",
+    "@material-ui/pickers": "^3.2.5",
     "@types/ol": "^5.3.6",
     "@types/react": "^16.9.5",
     "@types/react-loadable": "^5.5.3",
-    "@typescript-eslint/parser": "^2.3.3",
+    "@typescript-eslint/parser": "^2.22.0",
+    "abort-controller": "^3.0.0",
+    "apollo-cache-inmemory": "^1.6.3",
+    "apollo-client": "^2.6.4",
+    "apollo-link": "^1.2.13",
+    "apollo-link-batch-http": "^1.2.13",
+    "apollo-link-error": "^1.1.12",
+    "apollo-link-http": "^1.5.16",
+    "apollo-link-schema": "^1.2.4",
+    "apollo-server-express": "^2.9.7",
     "chai": "4.2.0",
+    "compression": "^1.7.4",
+    "cpx": "^1.5.0",
     "cross-env": "^6.0.3",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
     "eslint-plugin-graphql": "^3.1.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-react-hooks": "^2.1.2",
+    "express": "4.17.1",
+    "geospatialdraw": "0.5.5",
+    "golden-layout": "^1.5.9",
+    "graphql": "^14.5.8",
+    "graphql-tag": "^2.10.1",
+    "graphql-tools": "^4.0.5",
+    "immutable": "^4.0.0-rc.12",
     "json-diff": "^0.5.4",
+    "lodash.throttle": "^4.1.1",
     "mocha": "^5.2.0",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.16",
     "ndjson": "^1.5.0",
     "node-fetch": "^2.6.0",
+    "ol": "^6.0.1",
+    "on-finished": "^2.3.0",
+    "polished": "^3.4.1",
+    "qs": "^6.9.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-loadable": "^5.5.0",
+    "react-redux": "^7.1.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "rimraf": "^3.0.2",
+    "styled-components": "^4.3.2",
     "tempfile": "^3.0.0",
-    "typescript": "^3.6.4"
+    "typescript": "^3.8.3",
+    "universal-cookie": "^4.0.2",
+    "uuid": "^3.3.3",
+    "winston": "^3.2.1"
   },
-  "dependencies": {
+  "peerDependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@apollo/react-ssr": "^3.1.3",
     "@date-io/moment": "1.3.13",
@@ -75,11 +120,14 @@
     "start:test": "ace start --env=test",
     "test:api": "mocha src/main/webapp/intrigue-api/test",
     "pretest": "ace format && eslint src",
-    "test": "ace bundle --env=test && ace test",
+    "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=8192\" ace bundle --env=test && ace test",
     "storybook": "ace storybook",
     "build": "yarn build:prod && yarn storybook --static",
     "build:prod": "cross-env NODE_ENV=production NODE_OPTIONS='--max_old_space_size=8192' ace bundle --middleware src/main/graphql-server/server.js",
-    "prestart": "ace disable-idp"
+    "prestart": "ace disable-idp",
+    "prebuild:library": "rimraf dist && yarn copy:package",
+    "copy:package": "cpx package.json dist",
+    "build:library": "tsc -p library.tsconfig.json"
   },
   "context-path": "/search/catalog/",
   "resolutions": {

src/main/webapp/components/maps/draw-menu.tsx

@@ -20,8 +20,9 @@ import {
 import { GeometryJSON } from 'geospatialdraw/bin/geometry/geometry'
 import DrawingToolbox from 'geospatialdraw/bin/drawing/drawing-toolbox'
 import useDrawingMenu from 'geospatialdraw/bin/menu/react-hooks'
+import { BoxProps } from '@material-ui/core/Box'
 
-type Props = React.HTMLProps<HTMLDivElement> & {
+type Props = BoxProps & {
   toolbox: DrawingToolbox
   shape: Shape | null
   isActive: boolean

src/main/webapp/components/query-editor/query-editor.tsx

@@ -144,7 +144,7 @@ export default (props: EditorProps) => {
   const onSearch = () => {
     props.onSearch(queryToSearch(query))
   }
-  const [addOptionsRef, setAddOptionsRef] = React.useState()
+  const [addOptionsRef, setAddOptionsRef] = React.useState<HTMLDivElement>()
 
   return (
     <Box width="100%" display="flex" flexDirection="column" height="100%">

src/main/webapp/components/query-schedule/query-schedule.tsx

@@ -40,7 +40,7 @@ type QueryScheduleProps = {
 }
 
 const DatePicker = (props: KeyboardDatePickerProps) => {
-  const [inputValue, setInputValue] = useState()
+  const [inputValue, setInputValue] = useState<string | undefined>()
 
   return (
     <KeyboardDatePicker
@@ -51,15 +51,15 @@ const DatePicker = (props: KeyboardDatePickerProps) => {
         } else if (date.isValid()) {
           props.onChange(date)
         }
-        setInputValue(value)
+        setInputValue(value || undefined)
       }}
       inputValue={inputValue}
     />
   )
 }
 
 const TimePicker = (props: KeyboardTimePickerProps) => {
-  const [inputValue, setInputValue] = useState()
+  const [inputValue, setInputValue] = useState<string | undefined>()
 
   return (
     <KeyboardTimePicker
@@ -70,7 +70,7 @@ const TimePicker = (props: KeyboardTimePickerProps) => {
         } else if (date.isValid()) {
           props.onChange(date)
         }
-        setInputValue(value)
+        setInputValue(value || undefined)
       }}
       inputValue={inputValue}
     />

src/main/webapp/components/search-forms/editor.tsx

@@ -129,7 +129,7 @@ export const QueryEditor = (props: EditorProps) => {
     props.onSearch(queryToSearch(query))
   }
 
-  const [addOptionsRef, setAddOptionsRef] = React.useState()
+  const [addOptionsRef, setAddOptionsRef] = React.useState<HTMLDivElement>()
 
   return (
     <Box width="100%" display="flex" flexDirection="column" height="100%">

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "allowJs": false,
+    "allowJs": true,
     "sourceMap": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
@@ -14,6 +14,6 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
   "exclude": ["node_modules"]
 }