Upgrade major dependencies

hyperglass/ui/.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+*.tsbuildinfo
 # dev/test files
 TODO.txt
 *.tmp*

hyperglass/ui/components/lookingGlass.tsx

@@ -160,7 +160,6 @@ export const LookingGlass = (): JSX.Element => {
     } else if (e.field === 'queryTarget' && isString(e.value)) {
       setFormValue('queryTarget', e.value);
     }
-    console.table(form);
   }
 
   useEffect(() => {

hyperglass/ui/components/noconfig.tsx

@@ -2,11 +2,12 @@ import { Center, Flex, ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { mode } from '@chakra-ui/theme-tools';
 
 import type { CenterProps } from '@chakra-ui/react';
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 
 const theme = extendTheme({
   useSystemColorMode: true,
   styles: {
-    global: props => ({
+    global: (props: StyleFunctionProps) => ({
       html: { scrollBehavior: 'smooth', height: '-webkit-fill-available' },
       body: {
         background: mode('white', 'black')(props),

hyperglass/ui/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

hyperglass/ui/next.config.js

@@ -10,6 +10,11 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    // See: https://github.com/react-hook-form/resolvers/issues/271#issuecomment-986618265
+    // See: https://github.com/vercel/next.js/issues/30750#issuecomment-962198711
+    esmExternals: false,
+  },
 };
 
 module.exports = nextConfig;

hyperglass/ui/package.json

@@ -16,19 +16,18 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@chakra-ui/react": "^1.6.3",
-    "@choc-ui/chakra-autocomplete": "^4.5.10",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@hookform/devtools": "^3.1.0",
-    "@hookform/resolvers": "^2.5.1",
+    "@chakra-ui/react": "^1.7.2",
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@hookform/devtools": "^4.0.1",
+    "@hookform/resolvers": "^2.8.4",
     "@meronex/icons": "^4.0.0",
     "dagre": "^0.8.5",
     "dayjs": "^1.10.4",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^5.4.1",
     "lodash": "^4.17.21",
     "merge-anything": "^4.0.1",
-    "next": "^11.1.2",
+    "next": "12",
     "palette-by-numbers": "^0.1.5",
     "plur": "^4.0.0",
     "react": "^17.0.2",
@@ -38,14 +37,14 @@
     "react-fast-compare": "^3.2.0",
     "react-flow-renderer": "^9.6.0",
     "react-ga": "^3.3.0",
-    "react-hook-form": "^7.7.0",
+    "react-hook-form": "^7.21.0",
     "react-markdown": "^5.0.3",
     "react-query": "^3.16.0",
     "react-select": "^5.2.1",
     "react-table": "^7.7.0",
     "remark-gfm": "^1.0.0",
     "string-format": "^2.0.0",
-    "vest": "^3.2.3",
+    "vest": "^3.2.8",
     "zustand": "^3.5.10"
   },
   "devDependencies": {

hyperglass/ui/tsconfig.json

@@ -6,31 +6,63 @@
     "strict": true,
     "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
     "paths": {
-      "~/components": ["components/index"],
-      "~/components/*": ["components/*"],
-      "~/context": ["context/index"],
-      "~/context/*": ["context/*"],
-      "~/hooks": ["hooks/index"],
-      "~/hooks/*": ["hooks/*"],
-      "~/state": ["state/index"],
-      "~/state/*": ["state/*"],
-      "~/types": ["types/index"],
-      "~/types/*": ["types/*"],
-      "~/util": ["util/index"],
-      "~/util/*": ["util/*"]
+      "~/components": [
+        "components/index"
+      ],
+      "~/components/*": [
+        "components/*"
+      ],
+      "~/context": [
+        "context/index"
+      ],
+      "~/context/*": [
+        "context/*"
+      ],
+      "~/hooks": [
+        "hooks/index"
+      ],
+      "~/hooks/*": [
+        "hooks/*"
+      ],
+      "~/state": [
+        "state/index"
+      ],
+      "~/state/*": [
+        "state/*"
+      ],
+      "~/types": [
+        "types/index"
+      ],
+      "~/types/*": [
+        "types/*"
+      ],
+      "~/util": [
+        "util/index"
+      ],
+      "~/util/*": [
+        "util/*"
+      ]
     },
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "noEmit": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "exclude": ["node_modules", ".next"],
+  "exclude": [
+    "node_modules",
+    ".next"
+  ],
   "include": [
     "next-env.d.ts",
     "**/*.ts",

hyperglass/ui/util/theme.ts

@@ -3,6 +3,7 @@ import { mode } from '@chakra-ui/theme-tools';
 import { generateFontFamily, generatePalette } from 'palette-by-numbers';
 
 import type { ChakraTheme } from '@chakra-ui/react';
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import type { ThemeConfig, Theme } from '~/types';
 
 function importFonts(userFonts: Theme.Fonts): ChakraTheme['fonts'] {
@@ -91,7 +92,7 @@ export function makeTheme(
     config,
     fontWeights,
     styles: {
-      global: props => ({
+      global: (props: StyleFunctionProps) => ({
         html: { scrollBehavior: 'smooth', height: '-webkit-fill-available' },
         body: {
           background: mode('light.500', 'dark.500')(props),
@@ -100,7 +101,7 @@ export function makeTheme(
         },
       }),
     },
-  });
+  }) as Theme.Full;
 
   return defaultTheme;
 }