run web console

packages/web-console/.babelrc.json

@@ -0,0 +1,26 @@
+{
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "displayName": true,
+        "minify": false,
+        "pure": true,
+        "ssr": false
+      }
+    ]
+  ],
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "corejs": "3.22",
+        "modules": false,
+        "shippedProposals": true,
+        "useBuiltIns": "entry"
+      }
+    ],
+    "@babel/react",
+    "@babel/typescript"
+  ]
+}

packages/web-console/package.json

@@ -18,7 +18,6 @@
     "start:prod": "cross-env NODE_ENV=production webpack-dev-server --progress"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "7.10.2",
     "@fortawesome/fontawesome-free": "5.13.0",
     "@monaco-editor/react": "^4.3.1",
     "@popperjs/core": "2.4.2",
@@ -34,18 +33,20 @@
     "animate.css": "3.7.2",
     "bootstrap-sass": "3.4.1",
     "clipboard": "2.0.6",
-    "core-js": "3.6.5",
+    "core-js": "^3.22.8",
     "date-fns": "2.14.0",
     "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
     "glyphicons-halflings": "1.9.1",
     "jquery": "3.5.1",
     "monaco-editor": "^0.30.1",
+    "prop-types": "^15.8.1",
     "ramda": "0.27.1",
     "react": "16.13.1",
     "react-contextmenu": "2.14.0",
     "react-dom": "16.13.1",
+    "react-is": "^18.1.0",
     "react-popper": "2.2.3",
     "react-redux": "7.2.0",
     "react-transition-group": "4.4.1",
@@ -61,17 +62,16 @@
     "throttle-debounce": "2.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "7.10.2",
-    "@babel/plugin-transform-react-jsx-source": "7.10.1",
-    "@babel/plugin-transform-runtime": "7.10.1",
-    "@babel/preset-env": "7.10.2",
-    "@babel/preset-react": "7.10.1",
-    "@babel/preset-typescript": "7.10.1",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@types/node": "^17.0.41",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "babel-loader": "8.1.0",
-    "babel-plugin-styled-components": "1.10.7",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-styled-components": "^2.0.7",
     "clean-webpack-plugin": "3.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "7.0.2",
@@ -91,7 +91,7 @@
     "fork-ts-checker-webpack-plugin": "6.1.0",
     "handlebars": "4.7.7",
     "handlebars-loader": "1.7.1",
-    "html-webpack-plugin": "4.3.0",
+    "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
     "prettier": "^2.5.1",
     "rimraf": "3.0.2",

packages/web-console/src/components/Button/index.tsx

@@ -25,8 +25,8 @@
 import React, { forwardRef, MouseEvent, ReactNode, Ref } from "react"
 import styled, { css } from "styled-components"
 
-import type { Color, FontSize } from "types"
-import { color } from "utils"
+import type { Color, FontSize } from "../../types"
+import { color } from "../../utils"
 
 import { bezierTransition } from "../Transition"
 

packages/web-console/src/components/ContextMenu/ContextMenu.tsx

@@ -28,7 +28,7 @@ import {
   ContextMenu as ReactContextMenu,
   ContextMenuProps,
 } from "react-contextmenu"
-import { color } from "utils"
+import { color } from "../../utils"
 
 const StyledContextMenu = styled(ReactContextMenu)`
   z-index: 100;

packages/web-console/src/components/ContextMenu/MenuItem.tsx

@@ -25,7 +25,7 @@
 import React, { PropsWithChildren } from "react"
 import styled from "styled-components"
 import { MenuItem as ReactMenuItem, MenuItemProps } from "react-contextmenu"
-import { color } from "utils"
+import { color } from "../../utils"
 
 const StyledMenuItem = styled(ReactMenuItem)`
   color: ${color("draculaForeground")};

packages/web-console/src/components/IconWithTooltip/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { PopperHover, Tooltip, Placement } from "components"
+import { PopperHover, Tooltip, Placement } from "../"
 
 type Props = {
   icon: ReactNode

packages/web-console/src/components/Input/index.tsx

@@ -25,8 +25,8 @@
 import React, { ComponentProps, forwardRef, Ref } from "react"
 import styled from "styled-components"
 
-import { ButtonProps, getButtonSize } from "components"
-import { color } from "utils"
+import { ButtonProps, getButtonSize } from "../"
+import { color } from "../../utils"
 
 type Type = "text" | "number"
 

packages/web-console/src/components/Link/index.tsx

@@ -25,8 +25,8 @@
 import React from "react"
 import styled from "styled-components"
 
-import type { Color } from "types"
-import { color } from "utils"
+import type { Color } from "../../types"
+import { color } from "../../utils"
 
 import { Text, textStyles, TextProps } from "../Text"
 

packages/web-console/src/components/PaneContent/index.tsx

@@ -25,7 +25,7 @@
 import { ReactNode } from "react"
 import styled from "styled-components"
 
-import { color } from "utils"
+import { color } from "../../utils"
 
 type Props = Readonly<{
   children: ReactNode

packages/web-console/src/components/PaneMenu/index.tsx

@@ -24,7 +24,7 @@
 
 import styled from "styled-components"
 
-import { color } from "utils"
+import { color } from "../../utils"
 
 export const PaneMenu = styled.div`
   position: relative;

packages/web-console/src/components/Splitter/index.tsx

@@ -33,9 +33,9 @@ import React, {
   useState,
 } from "react"
 import styled, { createGlobalStyle, css } from "styled-components"
-import { DragIndicator } from "@styled-icons/material/DragIndicator"
+import { DragIndicator } from "styled-icons/material"
 
-import { color } from "utils"
+import { color } from "../../utils"
 
 const PreventUserSelectionHorizontal = createGlobalStyle`
   html {
@@ -192,9 +192,8 @@ export const Splitter = ({
         const clientPosition =
           direction === "horizontal" ? "clientX" : "clientY"
         const coordinate = direction === "horizontal" ? "x" : "y"
-        const offset = splitter.current.parentElement.getBoundingClientRect()[
-          coordinate
-        ]
+        const offset =
+          splitter.current.parentElement.getBoundingClientRect()[coordinate]
         let position = 0
 
         if (window.TouchEvent && event.nativeEvent instanceof TouchEvent) {

packages/web-console/src/components/SwitchButton/index.tsx

@@ -24,7 +24,7 @@
 
 import React, { useCallback } from "react"
 import styled from "styled-components"
-import { PrimaryButton, SecondaryButton } from "components"
+import { PrimaryButton, SecondaryButton } from "../"
 
 type ItemValue = string
 

packages/web-console/src/components/Text/index.tsx

@@ -26,7 +26,7 @@ import React, { ReactNode } from "react"
 import styled, { css } from "styled-components"
 
 import type { Color, FontSize } from "types"
-import { color } from "utils"
+import { color } from "../../utils"
 
 type FontStyle = "normal" | "italic"
 type Transform = "capitalize" | "lowercase" | "uppercase"

packages/web-console/src/components/Toast/index.tsx

@@ -24,8 +24,8 @@
 
 import styled from "styled-components"
 
-import { Color } from "types"
-import { color } from "utils"
+import { Color } from "../../types"
+import { color } from "../../utils"
 
 export const Toast = styled.div<{ borderColor: Color }>`
   position: relative;

packages/web-console/src/components/ToggleButton/index.tsx

@@ -25,8 +25,8 @@
 import React, { forwardRef, Ref } from "react"
 import styled, { css } from "styled-components"
 
-import type { Color, FontSize } from "types"
-import { color } from "utils"
+import type { Color, FontSize } from "../../types"
+import { color } from "../../utils"
 
 import { ButtonProps, getButtonSize } from "../Button"
 import { bezierTransition } from "../Transition"

packages/web-console/src/components/Tooltip/index.tsx

@@ -25,8 +25,8 @@
 import React, { ReactNode, Ref } from "react"
 import styled, { css } from "styled-components"
 
-import { Text } from "components"
-import { color } from "utils"
+import { Text } from "../"
+import { color } from "../../utils"
 
 type Props = Readonly<{
   arrow?: {

packages/web-console/src/components/Tree/index.tsx

@@ -25,7 +25,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import Row from "../../scenes/Schema/Row"
 import styled from "styled-components"
-import { WrapWithIf } from "components"
+import { WrapWithIf } from "../"
 
 export type TreeNodeKind = "column" | "table" | "folder"
 

packages/web-console/src/components/VirtualList/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Virtuoso, VirtuosoProps } from "react-virtuoso"
 
-export const VirtualList = ({ height, ...rest }: VirtuosoProps<any>) => {
+export const VirtualList = ({ height, ...rest }: VirtuosoProps<any, any>) => {
   return <Virtuoso style={height ? { height } : {}} {...rest} />
 }

packages/web-console/src/index.tsx

@@ -36,9 +36,9 @@ import {
   createGlobalFadeTransition,
   ScreenSizeProvider,
   TransitionDuration,
-} from "components"
-import { actions, rootEpic, rootReducer } from "store"
-import { StoreAction, StoreShape } from "types"
+} from "./components"
+import { actions, rootEpic, rootReducer } from "./store"
+import { StoreAction, StoreShape } from "./types"
 
 import Layout from "./scenes/Layout"
 import { theme } from "./theme"

packages/web-console/src/providers/LocalStorageProvider/index.tsx

@@ -28,8 +28,8 @@ import React, {
   useState,
   useContext,
 } from "react"
-import { getValue, setValue } from "utils/localStorage"
-import { StoreKey } from "utils/localStorage/types"
+import { getValue, setValue } from "../../utils/localStorage"
+import { StoreKey } from "../../utils/localStorage/types"
 import { parseBoolean, parseInteger } from "./utils"
 import { LocalConfig, SettingsType } from "./types"
 

packages/web-console/src/providers/QuestProvider.tsx

@@ -23,7 +23,7 @@
  ******************************************************************************/
 
 import React, { createContext, PropsWithChildren } from "react"
-import * as QuestDB from "utils/questdb"
+import * as QuestDB from "../utils/questdb"
 
 const questClient = new QuestDB.Client()
 

packages/web-console/src/scenes/Editor/Loader/index.tsx

@@ -26,8 +26,8 @@ import React, { useEffect, useRef, useState } from "react"
 import { CSSTransition } from "react-transition-group"
 import styled, { keyframes } from "styled-components"
 
-import { TransitionDuration } from "components"
-import { color } from "utils"
+import { TransitionDuration } from "../../../components"
+import { color } from "../../../utils"
 
 type Props = Readonly<{
   show: boolean