chore(console): migrate Footer to React (#339)

ui/src/components/Button/index.tsx

@@ -99,9 +99,7 @@ const Primary = styled.button<ButtonProps>`
   )};
 `
 
-export const PrimaryButton = ({ children, ...rest }: ButtonProps) => (
-  <Primary {...rest}>{children}</Primary>
-)
+export const PrimaryButton = (props: ButtonProps) => <Primary {...props} />
 
 PrimaryButton.defaultProps = buttonDefaultProps
 
@@ -126,9 +124,7 @@ const Secondary = styled.button<ButtonProps>`
   )};
 `
 
-export const SecondaryButton = ({ children, ...rest }: ButtonProps) => (
-  <Secondary {...rest}>{children}</Secondary>
-)
+export const SecondaryButton = (props: ButtonProps) => <Secondary {...props} />
 
 SecondaryButton.defaultProps = buttonDefaultProps
 
@@ -153,9 +149,7 @@ const Success = styled.button<ButtonProps>`
   )};
 `
 
-export const SuccessButton = ({ children, ...rest }: ButtonProps) => (
-  <Success {...rest}>{children}</Success>
-)
+export const SuccessButton = (props: ButtonProps) => <Success {...props} />
 
 SuccessButton.defaultProps = buttonDefaultProps
 
@@ -180,8 +174,6 @@ const Error = styled.button<ButtonProps>`
   )};
 `
 
-export const ErrorButton = ({ children, ...rest }: ButtonProps) => (
-  <Error {...rest}>{children}</Error>
-)
+export const ErrorButton = (props: ButtonProps) => <Error {...props} />
 
 ErrorButton.defaultProps = buttonDefaultProps

ui/src/components/Link/index.tsx

+import React from "react"
+import styled from "styled-components"
+
+import { color } from "utils"
+
+import { Text, textCss, TextProps } from "../Text"
+
+const defaultProps = Text.defaultProps
+
+type Props = Readonly<{
+  href: string
+  rel?: string
+  target?: string
+}> &
+  TextProps
+
+const Wrapper = styled.a<Props>`
+  ${textCss};
+  text-decoration: none;
+
+  &:hover:not([disabled]),
+  &:focus:not([disabled]) {
+    color: ${color("draculaCyan")};
+  }
+`
+
+export const Link = (props: Props) => <Wrapper {...props} />
+
+Link.defaultProps = defaultProps

ui/src/components/Text/index.tsx

 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 
 import { fontSize } from "theme"
 import type { Color, FontSize } from "types"
@@ -7,7 +7,7 @@ import { color } from "utils"
 
 type FontStyle = "normal" | "italic"
 
-type Props = Readonly<{
+export type TextProps = Readonly<{
   _style?: FontStyle
   className?: string
   color?: Color
@@ -28,15 +28,17 @@ const defaultProps: Readonly<{
   weight: 400,
 }
 
-const Wrapper = styled.span<Props>`
+export const textCss = css<TextProps>`
   color: ${(props) => color(props.color ? props.color : defaultProps.color)};
   font-size: ${({ size }) => fontSize[size || defaultProps.size]};
   font-style: ${({ _style }) => _style};
   font-weight: ${({ weight }) => weight};
 `
 
-export const Text = ({ children, ...rest }: Props) => (
-  <Wrapper {...rest}>{children}</Wrapper>
-)
+const Wrapper = styled.span<TextProps>`
+  ${textCss};
+`
+
+export const Text = (props: TextProps) => <Wrapper {...props} />
 
 Text.defaultProps = defaultProps

ui/src/components/ToggleButton/index.tsx

@@ -75,8 +75,6 @@ const Primary = styled.button<Props>`
   )};
 `
 
-export const PrimaryToggleButton = ({ children, ...rest }: Props) => (
-  <Primary {...rest}>{children}</Primary>
-)
+export const PrimaryToggleButton = (props: Props) => <Primary {...props} />
 
 PrimaryToggleButton.defaultProps = defaultProps

ui/src/components/index.ts

 export * from "./Button"
 export * from "./Input"
+export * from "./Link"
 export * from "./Pane"
 export * from "./PaneTitle"
 export * from "./PopperHover"

ui/src/index.hbs

@@ -21,17 +21,8 @@
 
         {{> partials/console}}
         {{> partials/import}}
-
-        <div class="footer">
-            <div class="footer-title">
-                Copyright &copy; 2014-2020 QuestDB Ltd.
-            </div>
-            <div class="footer-icons">
-              <a href="https://github.com/questdb/questdb" target="_blank">
-                  <i class="fab fa-github"></i>
-              </a>
-            </div>
-        </div>
     </div>
+
+    <div id="footer"></div>
 </body>
 </html>

ui/src/js/console/import-controller.js

@@ -7,7 +7,7 @@ const importTopPanel = $("#import-top")
 const importDetail = $("#import-detail")
 const importMenu = $("#import-menu")[0]
 
-const footer = $(".footer")[0]
+const footer = $("#footer")[0]
 const canvasPanel = importTopPanel.find(".ud-canvas")
 const w = $(window)
 let visible = false

ui/src/js/console/import-detail.js

@@ -15,7 +15,7 @@ $.fn.importEditor = function (ebus) {
   const divRejectedCount = $(this).find(".js-rejected-row-count")
   const divImportedCount = $(this).find(".js-imported-row-count")
   const divCanvas = $(this).find(".ud-canvas")
-  const footerHeight = $(".footer")[0].offsetHeight
+  const footerHeight = $("#footer")[0].offsetHeight
   const lineHeight = 35
   let select
   let location

ui/src/scenes/Footer/index.tsx

+import React from "react"
+import styled from "styled-components"
+import { Github } from "@styled-icons/remix-fill"
+
+import { Link } from "components"
+
+const Copyright = styled.div`
+  display: flex;
+  padding-left: 1rem;
+  align-items: center;
+  flex: 1;
+`
+
+const Icons = styled.div`
+  display: flex;
+  padding-right: 1rem;
+  align-items: center;
+  font-size: 2rem;
+`
+
+const Footer = () => (
+  <>
+    <Copyright>
+      Copyright &copy; 2014-{new Date().getFullYear()} QuestDB Ltd.
+    </Copyright>
+    <Icons>
+      <Link
+        color="draculaForeground"
+        href="https://github.com/questdb/questdb"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <Github size="22px" />
+      </Link>
+    </Icons>
+  </>
+)
+
+export default Footer

ui/src/scenes/Layout/index.tsx

@@ -2,18 +2,21 @@ import React from "react"
 import { createPortal } from "react-dom"
 
 import Editor from "../Editor"
+import Footer from "../Footer"
 import Schema from "../Schema"
 import Sidebar from "../Sidebar"
 
 const Layout = () => {
   const schemaNode = document.getElementById("schema-content")
   const editorNode = document.getElementById("editor-pane-title")
+  const footerNode = document.getElementById("footer")
 
   return (
     <>
       <Sidebar />
       {schemaNode && createPortal(<Schema />, schemaNode)}
       {editorNode && createPortal(<Editor />, editorNode)}
+      {footerNode && createPortal(<Footer />, footerNode)}
     </>
   )
 }

ui/src/styles/_base.scss

@@ -269,39 +269,17 @@ ol.unstyled {
 
 /* FOOTER */
 
-.footer {
+#footer {
   display: flex;
   background: #21222c;
   bottom: 0;
-  left: 0;
+  left: 45px;
   height: 40px;
   position: absolute;
   right: 0;
   color: #f8f8f2;
 }
 
-.footer-title {
-  display: flex;
-  padding-left: 1rem;
-  align-items: center;
-  flex: 1;
-}
-
-.footer-icons {
-  display: flex;
-  padding-right: 1rem;
-  align-items: center;
-  font-size: 2rem;
-
-  a {
-    color: #f8f8f2;
-  }
-
-  a:hover {
-    color: #8be9fd;
-  }
-}
-
 .footer.fixed_full {
   position: fixed;
   bottom: 0;

ui/webpack.config.js

@@ -70,6 +70,7 @@ module.exports = {
       target: `http://localhost:${BACKEND_PORT}/`,
     },
   },
+  devtool: isProdBuild ? false : "eval-source-map",
   mode: isProdBuild ? "production" : "development",
   entry: "./src/index",
   output: {