fix import/export, remove need for .alias.js, closes #74

hyperglass/ui/.alias.js

@@ -1,5 +0,0 @@
-const path = require("path");
-
-module.exports = {
-    "~": path.join(__dirname)
-};

hyperglass/ui/components/BGPTable.js

@@ -14,8 +14,8 @@ import { MdLastPage } from "react-icons/md";
 import dayjs from "dayjs";
 import relativeTimePlugin from "dayjs/plugin/relativeTime";
 import utcPlugin from "dayjs/plugin/utc";
-import useConfig from "~/components/HyperglassProvider";
-import Table from "~/components/Table/index";
+import { useConfig } from "app/context";
+import { Table } from "app/components";
 
 dayjs.extend(relativeTimePlugin);
 dayjs.extend(utcPlugin);
@@ -215,7 +215,7 @@ const Cell = ({ data, rawData, longestASN }) => {
   return component[data.column.id] ?? <> </>;
 };
 
-const BGPTable = ({ children: data, ...props }) => {
+export const BGPTable = ({ children: data, ...props }) => {
   const config = useConfig();
   const columns = makeColumns(config.parsed_data_fields);
 
@@ -232,5 +232,3 @@ const BGPTable = ({ children: data, ...props }) => {
     </Flex>
   );
 };
-
-export default BGPTable;

hyperglass/ui/components/CacheTimeout.js

@@ -22,7 +22,7 @@ const Renderer = ({ hours, minutes, seconds, completed, props }) => {
   }
 };
 
-const CacheTimeout = ({ timeout, text }) => {
+export const CacheTimeout = ({ timeout, text }) => {
   const then = timeout * 1000;
   const { colorMode } = useColorMode();
   return (
@@ -35,5 +35,3 @@ const CacheTimeout = ({ timeout, text }) => {
     />
   );
 };
-
-export default CacheTimeout;

hyperglass/ui/components/Card/index.js

@@ -1,3 +0,0 @@
-export { CardBody } from "./CardBody";
-export { CardFooter } from "./CardFooter";
-export { CardHeader } from "./CardHeader";

hyperglass/ui/components/Card/index.mjs

@@ -0,0 +1,3 @@
+export * from "./CardBody";
+export * from "./CardFooter";
+export * from "./CardHeader";

hyperglass/ui/components/ChakraSelect.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Text, useColorMode, useTheme } from "@chakra-ui/core";
 import Select from "react-select";
-import { opposingColor } from "~/util";
+import { opposingColor } from "app/util";
 
-const ChakraSelect = React.forwardRef(
+export const ChakraSelect = React.forwardRef(
   (
     { placeholder = "Select...", isFullWidth, size, children, ...props },
     ref
@@ -202,5 +202,3 @@ const ChakraSelect = React.forwardRef(
     );
   }
 );
-
-export default ChakraSelect;

hyperglass/ui/components/CodeBlock.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Box, useColorMode } from "@chakra-ui/core";
 
-export default ({ children }) => {
+export const CodeBlock = ({ children }) => {
   const { colorMode } = useColorMode();
   const bg = { dark: "gray.800", light: "blackAlpha.100" };
   const color = { dark: "white", light: "black" };

hyperglass/ui/components/CommunitySelect.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { useEffect } from "react";
 import { Text } from "@chakra-ui/core";
 import { components } from "react-select";
-import ChakraSelect from "~/components/ChakraSelect";
+import { ChakraSelect } from "app/components";
 
-const CommunitySelect = ({
+export const CommunitySelect = ({
   name,
   communities,
   onChange,
@@ -45,5 +45,3 @@ const CommunitySelect = ({
     />
   );
 };
-
-export default CommunitySelect;

hyperglass/ui/components/CopyButton.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button, Icon, Tooltip, useClipboard } from "@chakra-ui/core";
 
-const CopyButton = ({ bg = "secondary", copyValue, ...props }) => {
+export const CopyButton = ({ bg = "secondary", copyValue, ...props }) => {
   const { onCopy, hasCopied } = useClipboard(copyValue);
   return (
     <Tooltip hasArrow label="Copy Output" placement="top">
@@ -23,5 +23,3 @@ const CopyButton = ({ bg = "secondary", copyValue, ...props }) => {
     </Tooltip>
   );
 };
-
-export default CopyButton;

hyperglass/ui/components/Debugger.js

@@ -13,9 +13,8 @@ import {
   useColorMode,
   useTheme
 } from "@chakra-ui/core";
-import useConfig from "~/components/HyperglassProvider";
-import useMedia from "~/components/MediaProvider";
-import CodeBlock from "~/components/CodeBlock";
+import { useConfig, useMedia } from "app/context";
+import { CodeBlock } from "app/components";
 
 const prettyMediaSize = {
   sm: "SMALL",
@@ -24,7 +23,7 @@ const prettyMediaSize = {
   xl: "X-LARGE"
 };
 
-const Debugger = () => {
+export const Debugger = () => {
   const {
     isOpen: configOpen,
     onOpen: onConfigOpen,
@@ -102,5 +101,3 @@ const Debugger = () => {
     </>
   );
 };
-
-export default Debugger;

hyperglass/ui/components/Footer/Footer.js

@@ -4,9 +4,9 @@ import { Flex, useColorMode } from "@chakra-ui/core";
 import { FiCode } from "react-icons/fi";
 import { GoLinkExternal } from "react-icons/go";
 import format from "string-format";
-import useConfig from "~/components/HyperglassProvider";
-import FooterButton from "./FooterButton";
-import FooterContent from "./FooterContent";
+import { useConfig } from "app/context";
+import { FooterButton } from "./FooterButton";
+import { FooterContent } from "./FooterContent";
 
 format.extend(String.prototype, {});
 
@@ -14,7 +14,7 @@ const footerBg = { light: "blackAlpha.50", dark: "whiteAlpha.100" };
 const footerColor = { light: "black", dark: "white" };
 const contentBorder = { light: "blackAlpha.100", dark: "whiteAlpha.200" };
 
-const Footer = () => {
+export const Footer = () => {
   const config = useConfig();
   const { colorMode } = useColorMode();
   const [helpVisible, showHelp] = useState(false);
@@ -135,5 +135,3 @@ const Footer = () => {
     </>
   );
 };
-
-export default Footer;

hyperglass/ui/components/Footer/FooterButton.js

@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 
 const AnimatedFlex = motion.custom(Flex);
 
-const FooterButton = React.forwardRef(
+export const FooterButton = React.forwardRef(
   ({ onClick, side, children, ...props }, ref) => {
     return (
       <AnimatedFlex
@@ -27,5 +27,3 @@ const FooterButton = React.forwardRef(
     );
   }
 );
-
-export default FooterButton;

hyperglass/ui/components/Footer/FooterContent.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { forwardRef } from "react";
 import { Box, Collapse } from "@chakra-ui/core";
-import Markdown from "~/components/Markdown";
+import { Markdown } from "app/components/Markdown";
 
-const FooterContent = forwardRef(
+export const FooterContent = forwardRef(
   ({ isOpen = false, content, side = "left", title, ...props }, ref) => {
     return (
       <Collapse
@@ -26,5 +26,3 @@ const FooterContent = forwardRef(
     );
   }
 );
-
-export default FooterContent;

hyperglass/ui/components/Footer/index.js

@@ -1,2 +0,0 @@
-import Footer from "./Footer";
-export default Footer;

hyperglass/ui/components/Footer/index.mjs

@@ -0,0 +1 @@
+export * from "./Footer";

hyperglass/ui/components/FormField.js

@@ -9,7 +9,7 @@ import {
 
 const labelColor = { dark: "whiteAlpha.700", light: "blackAlpha.700" };
 
-const FormField = ({
+export const FormField = ({
   label,
   name,
   error,
@@ -61,5 +61,3 @@ const FormField = ({
     </FormControl>
   );
 };
-
-export default FormField;

hyperglass/ui/components/Greeting.js

@@ -11,7 +11,7 @@ import {
   useColorMode,
   useDisclosure
 } from "@chakra-ui/core";
-import Markdown from "~/components/Markdown";
+import { Markdown } from "app/components";
 import { motion } from "framer-motion";
 
 const bg = { light: "white", dark: "black" };
@@ -20,7 +20,7 @@ const color = { light: "black", dark: "white" };
 const AnimatedModalContent = motion.custom(ModalContent);
 const AnimatedModalOverlay = motion.custom(ModalOverlay);
 
-const Greeting = ({ greetingConfig, content, onClickThrough }) => {
+export const Greeting = ({ greetingConfig, content, onClickThrough }) => {
   const { isOpen, onOpen, onClose } = useDisclosure(true);
   const { colorMode } = useColorMode();
 
@@ -67,5 +67,3 @@ const Greeting = ({ greetingConfig, content, onClickThrough }) => {
     </Modal>
   );
 };
-
-export default Greeting;

hyperglass/ui/components/Header.js

@@ -1,14 +1,8 @@
 import * as React from "react";
 import { Flex, useColorMode } from "@chakra-ui/core";
 import { motion, AnimatePresence } from "framer-motion";
-import ResetButton from "~/components/ResetButton";
-import useMedia from "~/components/MediaProvider";
-import useConfig, { useHyperglassState } from "~/components/HyperglassProvider";
-import Title from "~/components/Title";
-import { ColorModeToggle } from "~/components/ColorModeToggle";
-
-const AnimatedFlex = motion.custom(Flex);
-const AnimatedResetButton = motion.custom(ResetButton);
+import { useConfig, useHyperglassState, useMedia } from "app/context";
+import { Title, ResetButton, ColorModeToggle } from "app/components";
 
 const titleVariants = {
   sm: {
@@ -57,7 +51,9 @@ const widthMap = {
   all: ["90%", "90%", "50%", "50%"]
 };
 
-const Header = ({ layoutRef, ...props }) => {
+export const Header = ({ layoutRef, ...props }) => {
+  const AnimatedFlex = motion.custom(Flex);
+  const AnimatedResetButton = motion.custom(ResetButton);
   const { colorMode } = useColorMode();
   const { web } = useConfig();
   const { mediaSize } = useMedia();
@@ -161,5 +157,3 @@ const Header = ({ layoutRef, ...props }) => {
     </Flex>
   );
 };
-
-export default Header;

hyperglass/ui/components/HelpModal.js

@@ -12,11 +12,11 @@ import {
   useTheme
 } from "@chakra-ui/core";
 import { motion, AnimatePresence } from "framer-motion";
-import Markdown from "~/components/Markdown";
+import { Markdown } from "app/components";
 
 const AnimatedIcon = motion.custom(IconButton);
 
-const HelpModal = ({ item, name }) => {
+export const HelpModal = ({ item, name }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { colors } = useTheme();
   const { colorMode } = useColorMode();
@@ -69,5 +69,3 @@ const HelpModal = ({ item, name }) => {
     </>
   );
 };
-
-export default HelpModal;

hyperglass/ui/components/HyperglassForm.js

@@ -2,19 +2,21 @@ import * as React from "react";
 import { forwardRef, useState, useEffect } from "react";
 import { Box, Flex } from "@chakra-ui/core";
 import { useForm } from "react-hook-form";
-import lodash from "lodash";
+import { intersectionWith, isEqual } from "lodash";
 import * as yup from "yup";
 import format from "string-format";
-import FormField from "~/components/FormField";
-import HelpModal from "~/components/HelpModal";
-import QueryLocation from "~/components/QueryLocation";
-import QueryType from "~/components/QueryType";
-import QueryTarget from "~/components/QueryTarget";
-import CommunitySelect from "~/components/CommunitySelect";
-import QueryVrf from "~/components/QueryVrf";
-import ResolvedTarget from "~/components/ResolvedTarget";
-import SubmitButton from "~/components/SubmitButton";
-import useConfig from "~/components/HyperglassProvider";
+import {
+  FormField,
+  HelpModal,
+  QueryLocation,
+  QueryType,
+  QueryTarget,
+  CommunitySelect,
+  QueryVrf,
+  ResolvedTarget,
+  SubmitButton
+} from "app/components";
+import { useConfig } from "app/context";
 
 format.extend(String.prototype, {});
 
@@ -53,7 +55,7 @@ const FormRow = ({ children, ...props }) => (
   </Flex>
 );
 
-const HyperglassForm = forwardRef(
+export const HyperglassForm = forwardRef(
   (
     {
       isSubmitting,
@@ -105,7 +107,7 @@ const HyperglassForm = forwardRef(
         allVrfs.push(locVrfs);
       });
 
-      const intersecting = lodash.intersectionWith(...allVrfs, lodash.isEqual);
+      const intersecting = intersectionWith(...allVrfs, isEqual);
       setAvailVrfs(intersecting);
       !intersecting.includes(queryVrf) &&
         queryVrf !== "default" &&
@@ -278,5 +280,3 @@ const HyperglassForm = forwardRef(
     );
   }
 );
-
-export default HyperglassForm;

hyperglass/ui/components/Label.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { forwardRef } from "react";
 import { Flex, useColorMode } from "@chakra-ui/core";
 
-const Label = forwardRef(
+export const Label = forwardRef(
   ({ value, label, labelColor, valueBg, valueColor, ...props }, ref) => {
     const { colorMode } = useColorMode();
     const _labelColor = { dark: "whiteAlpha.700", light: "blackAlpha.700" };
@@ -58,5 +58,3 @@ const Label = forwardRef(
     );
   }
 );
-
-export default Label;

hyperglass/ui/components/Layout.js

@@ -1,16 +1,13 @@
 import * as React from "react";
 import { useRef } from "react";
 import { Flex, useColorMode } from "@chakra-ui/core";
-import Header from "~/components/Header";
-import Footer from "~/components/Footer";
-import Greeting from "~/components/Greeting";
-import useConfig, { useHyperglassState } from "~/components/HyperglassProvider";
-import Debugger from "~/components/Debugger";
+import { useConfig, useHyperglassState } from "app/context";
+import { Debugger, Greeting, Footer, Header } from "app/components";
 
 const bg = { light: "white", dark: "black" };
 const color = { light: "black", dark: "white" };
 
-const Layout = ({ children }) => {
+export const Layout = ({ children }) => {
   const config = useConfig();
   const { colorMode } = useColorMode();
   const { greetingAck, setGreetingAck } = useHyperglassState();
@@ -55,5 +52,3 @@ const Layout = ({ children }) => {
     </>
   );
 };
-
-export default Layout;

hyperglass/ui/components/LightningBolt.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useTheme } from "@chakra-ui/core";
 
-const LightningBolt = ({ size = 4, color = "currentColor" }) => {
+export const LightningBolt = ({ size = 4, color = "currentColor" }) => {
   const theme = useTheme();
   return (
     <svg
@@ -19,5 +19,3 @@ const LightningBolt = ({ size = 4, color = "currentColor" }) => {
     </svg>
   );
 };
-
-export default LightningBolt;

hyperglass/ui/components/Loading.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Flex, Spinner, useColorMode } from "@chakra-ui/core";
 
-const Loading = () => {
+export const Loading = () => {
   const { colorMode } = useColorMode();
   const bg = { light: "white", dark: "black" };
   const color = { light: "black", dark: "white" };
@@ -32,5 +32,3 @@ const Loading = () => {
     </Flex>
   );
 };
-
-export default Loading;

hyperglass/ui/components/LookingGlass.js

@@ -1,13 +1,11 @@
 import * as React from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import Layout from "~/components/Layout";
-import HyperglassForm from "~/components/HyperglassForm";
-import Results from "~/components/Results";
-import { useHyperglassState } from "~/components/HyperglassProvider";
+import { Layout, HyperglassForm, Results } from "app/components";
+import { useHyperglassState } from "app/context";
 
 const AnimatedForm = motion.custom(HyperglassForm);
 
-const LookingGlass = () => {
+export const LookingGlass = () => {
   const {
     isSubmitting,
     setSubmitting,
@@ -46,5 +44,3 @@ const LookingGlass = () => {
     </Layout>
   );
 };
-
-export default LookingGlass;

hyperglass/ui/components/Markdown/MDComponents.js

@@ -10,13 +10,9 @@ import {
   Text as ChakraText
 } from "@chakra-ui/core";
 
-import {
-  TableCell,
-  TableHeader,
-  Table as ChakraTable
-} from "~/components/Table";
+import { TableCell, TableHeader, Table as ChakraTable } from "./MDTable";
 
-import CustomCodeBlock from "~/components/CodeBlock";
+import { CodeBlock as CustomCodeBlock } from "app/components";
 
 export const Checkbox = ({ checked, children }) => (
   <ChakraCheckbox isChecked={checked}>{children}</ChakraCheckbox>

hyperglass/ui/components/Markdown/MDTable.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { Box, useColorMode } from "@chakra-ui/core";
 
-const Table = props => (
+export const Table = props => (
   <Box as="table" textAlign="left" mt={4} width="full" {...props} />
 );
 
 const bg = { light: "blackAlpha.50", dark: "whiteAlpha.50" };
 
-const TableHeader = props => {
+export const TableHeader = props => {
   const { colorMode } = useColorMode();
 
   return (
@@ -22,7 +22,7 @@ const TableHeader = props => {
   );
 };
 
-const TableCell = ({ isHeader = false, ...props }) => (
+export const TableCell = ({ isHeader = false, ...props }) => (
   <Box
     as={isHeader ? "th" : "td"}
     p={2}
@@ -33,5 +33,3 @@ const TableCell = ({ isHeader = false, ...props }) => (
     {...props}
   />
 );
-
-export { TableCell, TableHeader, Table };

hyperglass/ui/components/Markdown/Markdown.js

@@ -27,8 +27,6 @@ const mdComponents = {
   tableCell: TableData
 };
 
-const Markdown = forwardRef(({ content }, ref) => (
+export const Markdown = forwardRef(({ content }, ref) => (
   <ReactMarkdown ref={ref} renderers={mdComponents} source={content} />
 ));
-
-export default Markdown;

hyperglass/ui/components/Markdown/index.mjs

@@ -0,0 +1 @@
+export * from "./Markdown";

hyperglass/ui/components/Meta.js

@@ -2,10 +2,10 @@ import * as React from "react";
 import { useEffect, useState } from "react";
 import Head from "next/head";
 import { useTheme } from "@chakra-ui/core";
-import useConfig from "~/components/HyperglassProvider";
-import { googleFontUrl } from "~/util";
+import { useConfig } from "app/context";
+import { googleFontUrl } from "app/util";
 
-const Meta = () => {
+export const Meta = () => {
   const config = useConfig();
   const theme = useTheme();
   const [location, setLocation] = useState({});
@@ -53,5 +53,3 @@ const Meta = () => {
     </Head>
   );
 };
-
-export default Meta;

hyperglass/ui/components/QueryLocation.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ChakraSelect from "~/components/ChakraSelect";
+import { ChakraSelect } from "app/components";
 
 const buildLocations = networks => {
   const locations = [];
@@ -17,7 +17,7 @@ const buildLocations = networks => {
   return locations;
 };
 
-const QueryLocation = ({ locations, onChange, label }) => {
+export const QueryLocation = ({ locations, onChange, label }) => {
   const options = buildLocations(locations);
   const handleChange = e => {
     const selected = [];
@@ -39,5 +39,3 @@ const QueryLocation = ({ locations, onChange, label }) => {
     />
   );
 };
-
-export default QueryLocation;

hyperglass/ui/components/QueryTarget.js

@@ -9,7 +9,7 @@ const color = { dark: "whiteAlpha.800", light: "gray.400" };
 const border = { dark: "whiteAlpha.50", light: "gray.100" };
 const placeholderColor = { dark: "whiteAlpha.700", light: "gray.600" };
 
-const QueryTarget = ({
+export const QueryTarget = ({
   placeholder,
   register,
   unregister,
@@ -67,5 +67,3 @@ const QueryTarget = ({
     </>
   );
 };
-
-export default QueryTarget;

hyperglass/ui/components/QueryType.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import ChakraSelect from "~/components/ChakraSelect";
+import { ChakraSelect } from "app/components";
 
-const QueryType = ({ queryTypes, onChange, label }) => {
+export const QueryType = ({ queryTypes, onChange, label }) => {
   const queries = queryTypes
     .filter(q => q.enable === true)
     .map(q => {
@@ -17,5 +17,3 @@ const QueryType = ({ queryTypes, onChange, label }) => {
     />
   );
 };
-
-export default QueryType;

hyperglass/ui/components/QueryVrf.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import ChakraSelect from "~/components/ChakraSelect";
+import { ChakraSelect } from "app/components";
 
-const QueryVrf = ({ vrfs, onChange, label }) => (
+export const QueryVrf = ({ vrfs, onChange, label }) => (
   <ChakraSelect
     size="lg"
     options={vrfs}
@@ -10,5 +10,3 @@ const QueryVrf = ({ vrfs, onChange, label }) => (
     onChange={e => onChange({ field: "query_vrf", value: e.value })}
   />
 );
-
-export default QueryVrf;

hyperglass/ui/components/RequeryButton.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button, Icon, Tooltip } from "@chakra-ui/core";
 
-const RequeryButton = ({ requery, bg = "secondary", ...props }) => (
+export const RequeryButton = ({ requery, bg = "secondary", ...props }) => (
   <Tooltip hasArrow label="Reload Query" placement="top">
     <Button
       mx={1}
@@ -16,5 +16,3 @@ const RequeryButton = ({ requery, bg = "secondary", ...props }) => (
     </Button>
   </Tooltip>
 );
-
-export default RequeryButton;

hyperglass/ui/components/ResetButton.js

@@ -2,17 +2,17 @@ import * as React from "react";
 import { Button } from "@chakra-ui/core";
 import { FiChevronLeft } from "react-icons/fi";
 
-const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => (
-  <Button
-    ref={ref}
-    color="current"
-    variant="ghost"
-    onClick={onClick}
-    aria-label="Reset Form"
-    opacity={isSubmitting ? 1 : 0}
-  >
-    <FiChevronLeft size={24} />
-  </Button>
-));
-
-export default ResetButton;
+export const ResetButton = React.forwardRef(
+  ({ isSubmitting, onClick }, ref) => (
+    <Button
+      ref={ref}
+      color="current"
+      variant="ghost"
+      onClick={onClick}
+      aria-label="Reset Form"
+      opacity={isSubmitting ? 1 : 0}
+    >
+      <FiChevronLeft size={24} />
+    </Button>
+  )
+);

hyperglass/ui/components/ResolvedTarget.js

@@ -12,14 +12,14 @@ import {
 } from "@chakra-ui/core";
 import useAxios from "axios-hooks";
 import format from "string-format";
-import useConfig from "~/components/HyperglassProvider";
+import { useConfig } from "app/context";
 
 format.extend(String.prototype, {});
 
 const labelBg = { dark: "secondary", light: "secondary" };
 const labelBgSuccess = { dark: "success", light: "success" };
 
-const ResolvedTarget = forwardRef(
+export const ResolvedTarget = forwardRef(
   ({ fqdnTarget, setTarget, queryTarget, families, availVrfs }, ref) => {
     const { colorMode } = useColorMode();
     const config = useConfig();
@@ -178,5 +178,3 @@ const ResolvedTarget = forwardRef(
     );
   }
 );
-
-export default ResolvedTarget;

hyperglass/ui/components/Result.js

@@ -16,20 +16,21 @@ import {
   useTheme
 } from "@chakra-ui/core";
 import styled from "@emotion/styled";
-import LightningBolt from "~/components/icons/LightningBolt";
 import useAxios from "axios-hooks";
 import strReplace from "react-string-replace";
 import format from "string-format";
 import { startCase } from "lodash";
-import useConfig from "~/components/HyperglassProvider";
-import useMedia from "~/components/MediaProvider";
-import CopyButton from "~/components/CopyButton";
-import RequeryButton from "~/components/RequeryButton";
-import ResultHeader from "~/components/ResultHeader";
-import CacheTimeout from "~/components/CacheTimeout";
-import BGPTable from "~/components/BGPTable";
-import TextOutput from "~/components/TextOutput";
-import { tableToString } from "~/util";
+import { useConfig, useMedia } from "app/context";
+import {
+  BGPTable,
+  CacheTimeout,
+  CopyButton,
+  LightningBolt,
+  RequeryButton,
+  ResultHeader,
+  TextOutput
+} from "app/components";
+import { tableToString } from "app/util";
 
 format.extend(String.prototype, {});
 
@@ -59,14 +60,6 @@ const AccordionHeaderWrapper = styled(Flex)`
   }
 `;
 
-const structuredDataComponent = {
-  bgp_route: BGPTable,
-  bgp_aspath: BGPTable,
-  bgp_community: BGPTable,
-  ping: TextOutput,
-  traceroute: TextOutput
-};
-
 const statusMap = {
   success: "success",
   warning: "warning",
@@ -79,7 +72,7 @@ const scrollbar = { dark: "whiteAlpha.300", light: "blackAlpha.300" };
 const scrollbarHover = { dark: "whiteAlpha.400", light: "blackAlpha.400" };
 const scrollbarBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
 
-const Result = forwardRef(
+export const Result = forwardRef(
   (
     {
       device,
@@ -141,8 +134,17 @@ const Result = forwardRef(
         statusMap[error.response?.data?.level]) ??
       "error";
 
+    const structuredDataComponent = {
+      bgp_route: BGPTable,
+      bgp_aspath: BGPTable,
+      bgp_community: BGPTable,
+      ping: TextOutput,
+      traceroute: TextOutput
+    };
+
     let Output = TextOutput;
     let copyValue = data?.output;
+
     if (data?.format === "application/json") {
       Output = structuredDataComponent[queryType];
       copyValue = tableToString(queryTarget, data, config);
@@ -282,5 +284,3 @@ const Result = forwardRef(
     );
   }
 );
-
-export default Result;

hyperglass/ui/components/ResultHeader.js

@@ -10,7 +10,7 @@ import {
   useColorMode
 } from "@chakra-ui/core";
 import format from "string-format";
-import useConfig from "~/components/HyperglassProvider";
+import { useConfig } from "app/context";
 
 format.extend(String.prototype, {});
 
@@ -32,7 +32,7 @@ const defaultStatusColor = {
   light: "success.500"
 };
 
-const ResultHeader = forwardRef(
+export const ResultHeader = forwardRef(
   ({ title, loading, error, errorMsg, errorLevel, runtime }, ref) => {
     const { colorMode } = useColorMode();
     const config = useConfig();
@@ -69,5 +69,3 @@ const ResultHeader = forwardRef(
     );
   }
 );
-
-export default ResultHeader;

hyperglass/ui/components/Results.js

@@ -2,10 +2,8 @@ import * as React from "react";
 import { useState } from "react";
 import { Accordion, Box, Stack, useTheme } from "@chakra-ui/core";
 import { motion, AnimatePresence } from "framer-motion";
-import Label from "~/components/Label";
-import Result from "~/components/Result";
-import useConfig from "~/components/HyperglassProvider";
-import useMedia from "~/components/MediaProvider";
+import { Label, Result } from "app/components";
+import { useConfig, useMedia } from "app/context";
 
 const AnimatedResult = motion.custom(Result);
 const AnimatedLabel = motion.custom(Label);
@@ -51,7 +49,7 @@ const labelAnimate = {
   }
 };
 
-const Results = ({
+export const Results = ({
   queryLocation,
   queryType,
   queryVrf,
@@ -161,6 +159,3 @@ const Results = ({
     </>
   );
 };
-
-Results.displayName = "HyperglassResults";
-export default Results;

hyperglass/ui/components/SubmitButton.js

@@ -8,7 +8,7 @@ import {
   useTheme
 } from "@chakra-ui/core";
 import { FiSearch } from "react-icons/fi";
-import { opposingColor } from "~/util";
+import { opposingColor } from "app/util";
 
 const btnProps = {
   display: "inline-flex",
@@ -59,7 +59,7 @@ const btnBg = { dark: "primary.300", light: "primary.500" };
 const btnBgActive = { dark: "primary.400", light: "primary.600" };
 const btnBgHover = { dark: "primary.200", light: "primary.400" };
 
-const SubmitButton = forwardRef(
+export const SubmitButton = forwardRef(
   (
     {
       isLoading = false,
@@ -118,5 +118,3 @@ const SubmitButton = forwardRef(
     );
   }
 );
-
-export default SubmitButton;

hyperglass/ui/components/Table/Table.js

@@ -2,17 +2,17 @@ import * as React from "react";
 import { useMemo } from "react";
 import { Flex, Icon, Text } from "@chakra-ui/core";
 import { usePagination, useSortBy, useTable } from "react-table";
-import useMedia from "~/components/MediaProvider";
-import { CardBody, CardFooter, CardHeader } from "~/components/Card";
-import TableMain from "./TableMain";
-import TableCell from "./TableCell";
-import TableHead from "./TableHead";
-import TableRow from "./TableRow";
-import TableBody from "./TableBody";
-import TableIconButton from "./TableIconButton";
-import TableSelectShow from "./TableSelectShow";
+import { useMedia } from "app/context";
+import { CardBody, CardFooter, CardHeader } from "app/components";
+import { TableMain } from "./TableMain";
+import { TableCell } from "./TableCell";
+import { TableHead } from "./TableHead";
+import { TableRow } from "./TableRow";
+import { TableBody } from "./TableBody";
+import { TableIconButton } from "./TableIconButton";
+import { TableSelectShow } from "./TableSelectShow";
 
-const Table = ({
+export const Table = ({
   columns,
   data,
   tableHeading,
@@ -193,5 +193,3 @@ const Table = ({
     </CardBody>
   );
 };
-
-export default Table;

hyperglass/ui/components/Table/TableBody.js

@@ -2,7 +2,7 @@
 import { jsx } from "@emotion/core";
 import { Box, css } from "@chakra-ui/core";
 
-const TableBody = ({ children, ...props }) => (
+export const TableBody = ({ children, ...props }) => (
   <Box
     as="tbody"
     overflowY="scroll"
@@ -16,5 +16,3 @@ const TableBody = ({ children, ...props }) => (
     {children}
   </Box>
 );
-
-export default TableBody;

hyperglass/ui/components/Table/TableCell.js

@@ -6,7 +6,7 @@ const cellBorder = {
   light: { borderLeft: "1px", borderLeftColor: "blackAlpha.100" }
 };
 
-const TableCell = ({
+export const TableCell = ({
   bordersVertical = [false, 0, 0],
   align,
   cell,
@@ -34,5 +34,3 @@ const TableCell = ({
     </Box>
   );
 };
-
-export default TableCell;

hyperglass/ui/components/Table/TableHead.js

@@ -3,7 +3,7 @@ import { Box, useColorMode } from "@chakra-ui/core";
 
 const bg = { dark: "whiteAlpha.100", light: "blackAlpha.100" };
 
-const TableHead = ({ children, ...props }) => {
+export const TableHead = ({ children, ...props }) => {
   const { colorMode } = useColorMode();
   return (
     <Box
@@ -17,5 +17,3 @@ const TableHead = ({ children, ...props }) => {
     </Box>
   );
 };
-
-export default TableHead;

hyperglass/ui/components/Table/TableIconButton.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { IconButton } from "@chakra-ui/core";
 
-const TableIconButton = ({
+export const TableIconButton = ({
   icon,
   onClick,
   isDisabled,
@@ -22,5 +22,3 @@ const TableIconButton = ({
     {children}
   </IconButton>
 );
-
-export default TableIconButton;

hyperglass/ui/components/Table/TableMain.js

@@ -6,7 +6,7 @@ const scrollbar = { dark: "whiteAlpha.300", light: "blackAlpha.300" };
 const scrollbarHover = { dark: "whiteAlpha.400", light: "blackAlpha.400" };
 const scrollbarBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
 
-const MainTable = ({ children, ...props }) => {
+export const TableMain = ({ children, ...props }) => {
   const theme = useTheme();
   const { colorMode } = useColorMode();
   return (
@@ -36,5 +36,3 @@ const MainTable = ({ children, ...props }) => {
     </Box>
   );
 };
-
-export default MainTable;

hyperglass/ui/components/Table/TableRow.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { PseudoBox, useColorMode, useTheme } from "@chakra-ui/core";
-import { opposingColor } from "~/util";
+import { opposingColor } from "app/util";
 
 const hoverBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
 const bgStripe = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
@@ -11,7 +11,7 @@ const rowBorder = {
 const alphaMap = { dark: "200", light: "100" };
 const alphaMapHover = { dark: "100", light: "200" };
 
-const TableRow = ({
+export const TableRow = ({
   highlight = false,
   highlightBg = "primary",
   doStripe = false,
@@ -52,5 +52,3 @@ const TableRow = ({
     </PseudoBox>
   );
 };
-
-export default TableRow;

hyperglass/ui/components/Table/TableSelectShow.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Select } from "@chakra-ui/core";
 
-const TableSelectShow = ({ value, onChange, children, ...props }) => (
+export const TableSelectShow = ({ value, onChange, children, ...props }) => (
   <Select size="sm" onChange={onChange} {...props}>
     {[5, 10, 20, 30, 40, 50].map(value => (
       <option key={value} value={value}>
@@ -11,5 +11,3 @@ const TableSelectShow = ({ value, onChange, children, ...props }) => (
     {children}
   </Select>
 );
-
-export default TableSelectShow;

hyperglass/ui/components/Table/index.mjs

@@ -0,0 +1,8 @@
+export * from "./Table";
+export * from "./TableBody";
+export * from "./TableCell";
+export * from "./TableHead";
+export * from "./TableIconButton";
+export * from "./TableMain";
+export * from "./TableRow";
+export * from "./TableSelectShow";

hyperglass/ui/components/TextOutput.js

@@ -7,7 +7,7 @@ const color = { dark: "white", light: "black" };
 const selectionBg = { dark: "white", light: "black" };
 const selectionColor = { dark: "black", light: "white" };
 
-const TextOutput = ({ children, ...props }) => {
+export const TextOutput = ({ children, ...props }) => {
   const { colorMode } = useColorMode();
 
   return (
@@ -39,5 +39,3 @@ const TextOutput = ({ children, ...props }) => {
     </Box>
   );
 };
-
-export default TextOutput;

hyperglass/ui/components/Title.js

@@ -2,8 +2,7 @@
 import { jsx } from "@emotion/core";
 import { forwardRef } from "react";
 import { Button, Heading, Image, Stack, useColorMode } from "@chakra-ui/core";
-import useConfig from "~/components/HyperglassProvider";
-import useMedia from "~/components/MediaProvider";
+import { useConfig, useMedia } from "app/context";
 
 const titleSize = { true: ["2xl", "2xl", "5xl", "5xl"], false: "2xl" };
 const titleMargin = { true: 2, false: 0 };
@@ -105,7 +104,7 @@ const modeMap = {
   all: All
 };
 
-const Title = forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
+export const Title = forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
   const { web } = useConfig();
   const { mediaSize } = useMedia();
   const titleMode = web.text.title_mode;
@@ -134,5 +133,3 @@ const Title = forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
     </Button>
   );
 });
-
-export default Title;

hyperglass/ui/components/index.mjs

@@ -0,0 +1,36 @@
+export * from "./BGPTable";
+export * from "./CacheTimeout";
+export * from "./Card";
+export * from "./ChakraSelect";
+export * from "./CodeBlock";
+export * from "./ColorModeToggle";
+export * from "./CommunitySelect";
+export * from "./CopyButton";
+export * from "./Debugger";
+export * from "./Footer";
+export * from "./FormField";
+export * from "./Greeting";
+export * from "./Header";
+export * from "./HelpModal";
+export * from "./HyperglassForm";
+export * from "./Label";
+export * from "./Layout";
+export * from "./LightningBolt";
+export * from "./Loading";
+export * from "./LookingGlass";
+export * from "./Markdown";
+export * from "./Meta";
+export * from "./QueryLocation";
+export * from "./QueryTarget";
+export * from "./QueryType";
+export * from "./QueryVrf";
+export * from "./RequeryButton";
+export * from "./ResetButton";
+export * from "./ResolvedTarget";
+export * from "./Result";
+export * from "./ResultHeader";
+export * from "./Results";
+export * from "./SubmitButton";
+export * from "./Table";
+export * from "./TextOutput";
+export * from "./Title";

hyperglass/ui/context/HyperglassProvider.js

@@ -1,13 +1,10 @@
 import * as React from "react";
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useMemo } from "react";
 import dynamic from "next/dynamic";
 import { CSSReset, ThemeProvider } from "@chakra-ui/core";
-import _useMedia, { MediaProvider } from "~/components/MediaProvider";
-import {
-  StateProvider,
-  useHyperglassState as _useHyperglassState
-} from "~/components/StateProvider";
-import { makeTheme, defaultTheme } from "~/theme";
+import { MediaProvider } from "./MediaProvider";
+import { StateProvider } from "./StateProvider";
+import { makeTheme, defaultTheme } from "app/util";
 
 // Disable SSR for ColorModeProvider
 const ColorModeProvider = dynamic(
@@ -35,8 +32,4 @@ export const HyperglassProvider = ({ config, children }) => {
   );
 };
 
-export default () => useContext(HyperglassContext);
-
-export const useHyperglassState = _useHyperglassState;
-
-export const useMedia = _useMedia;
+export const useConfig = () => useContext(HyperglassContext);

hyperglass/ui/context/MediaProvider.js

@@ -40,4 +40,4 @@ export const MediaProvider = ({ theme, children }) => {
   );
 };
 
-export default () => useContext(MediaContext);
+export const useMedia = () => useContext(MediaContext);

hyperglass/ui/context/StateProvider.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createContext, useContext, useMemo, useState } from "react";
-import useSessionStorage from "~/hooks/useSessionStorage";
+import { useSessionStorage } from "app/hooks";
 
 const StateContext = createContext(null);
 

hyperglass/ui/context/index.mjs

@@ -0,0 +1,3 @@
+export * from "./HyperglassProvider";
+export * from "./MediaProvider";
+export * from "./StateProvider";

hyperglass/ui/hooks/index.mjs

@@ -0,0 +1 @@
+export * from "./useSessionStorage";

hyperglass/ui/hooks/useSessionStorage.js

@@ -5,43 +5,43 @@ https://github.com/streamich/react-use/blob/master/src/useSessionStorage.ts
 
 import { useEffect, useState } from "react";
 
-const useSessionStorage = (key, initialValue, raw) => {
-    const isClient = typeof window === "object";
-    if (!isClient) {
-        return [initialValue, () => {}];
+export const useSessionStorage = (key, initialValue, raw) => {
+  const isClient = typeof window === "object";
+  if (!isClient) {
+    return [initialValue, () => {}];
+  }
+
+  const [state, setState] = useState(() => {
+    try {
+      const sessionStorageValue = sessionStorage.getItem(key);
+      if (typeof sessionStorageValue !== "string") {
+        sessionStorage.setItem(
+          key,
+          raw ? String(initialValue) : JSON.stringify(initialValue)
+        );
+        return initialValue;
+      } else {
+        return raw
+          ? sessionStorageValue
+          : JSON.parse(sessionStorageValue || "null");
+      }
+    } catch {
+      // If user is in private mode or has storage restriction
+      // sessionStorage can throw. JSON.parse and JSON.stringify
+      // cat throw, too.
+      return initialValue;
     }
+  });
 
-    const [state, setState] = useState(() => {
-        try {
-            const sessionStorageValue = sessionStorage.getItem(key);
-            if (typeof sessionStorageValue !== "string") {
-                sessionStorage.setItem(
-                    key,
-                    raw ? String(initialValue) : JSON.stringify(initialValue)
-                );
-                return initialValue;
-            } else {
-                return raw ? sessionStorageValue : JSON.parse(sessionStorageValue || "null");
-            }
-        } catch {
-            // If user is in private mode or has storage restriction
-            // sessionStorage can throw. JSON.parse and JSON.stringify
-            // cat throw, too.
-            return initialValue;
-        }
-    });
+  useEffect(() => {
+    try {
+      const serializedState = raw ? String(state) : JSON.stringify(state);
+      sessionStorage.setItem(key, serializedState);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // sessionStorage can throw. Also JSON.stringify can throw.
+    }
+  });
 
-    useEffect(() => {
-        try {
-            const serializedState = raw ? String(state) : JSON.stringify(state);
-            sessionStorage.setItem(key, serializedState);
-        } catch {
-            // If user is in private mode or has storage restriction
-            // sessionStorage can throw. Also JSON.stringify can throw.
-        }
-    });
-
-    return [state, setState];
+  return [state, setState];
 };
-
-export default useSessionStorage;

hyperglass/ui/jsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "app/components": ["components/index"],
+      "app/components/*": ["components/*"],
+      "app/context": ["context/index"],
+      "app/context/*": ["context/*"],
+      "app/hooks": ["hooks/index"],
+      "app/hooks/*": ["hooks/*"],
+      "app/util": ["util/index"]
+    }
+  }
+}

hyperglass/ui/next.config.js

@@ -1,17 +1,18 @@
-const aliases = require("./.alias");
+// const aliases = require("./.alias");
 const envVars = require("/tmp/hyperglass.env.json");
 const { configFile } = envVars;
 const config = require(String(configFile));
 
 module.exports = {
-  webpack(config) {
-    const { alias } = config.resolve;
-    config.resolve.alias = {
-      ...alias,
-      ...aliases
-    };
-    return config;
-  },
+  // webpack(config) {
+  // const { alias } = config.resolve;
+  // config.resolve.alias = {
+  //   ...alias,
+  //   ...aliases
+  // };
+  //   return config;
+  // },
+  reactStrictMode: true,
   poweredByHeader: false,
   env: {
     _NODE_ENV_: config.NODE_ENV,

hyperglass/ui/package.json

@@ -4,7 +4,7 @@
   "description": "UI for hyperglass, the modern network looking glass",
   "author": "Matt Love",
   "license": "BSD-3-Clause-Clear",
-  "private": false,
+  "private": true,
   "scripts": {
     "dev": "node nextdev",
     "build": "next build && next export -o ../hyperglass/static/ui",
@@ -26,7 +26,7 @@
     "emotion-theming": "^10.0.27",
     "framer-motion": "^1.10.0",
     "lodash": "^4.17.15",
-    "next": "^9.4",
+    "next": "^9.5",
     "react": "^16.13.1",
     "react-countdown": "^2.2.1",
     "react-dom": "^16.13.1",
@@ -51,7 +51,7 @@
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-config-react-app": "^5.2.0",
-    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-flowtype": "^4.6.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -88,16 +88,6 @@
     ],
     "env": {
       "browser": true
-    },
-    "settings": {
-      "import/core-modules": [
-        "styled-jsx/css"
-      ],
-      "import/resolver": {
-        "webpack": {
-          "config": "webpack.config.js"
-        }
-      }
     }
   }
 }

hyperglass/ui/pages/_app.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Head from "next/head";
 // import { useRouter } from "next/router";
-import { HyperglassProvider } from "~/components/HyperglassProvider";
+import { HyperglassProvider } from "app/context";
 // import Error from "./_error";
 
 const config = process.env._HYPERGLASS_CONFIG_;

hyperglass/ui/pages/_error.js

@@ -8,10 +8,10 @@ import {
   Heading,
   Text,
   ThemeProvider,
-  useColorMode
+  useColorMode,
+  theme as defaultTheme
 } from "@chakra-ui/core";
 import { inRange } from "lodash";
-import { defaultTheme } from "~/theme";
 
 const ColorModeProvider = dynamic(
   () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),

hyperglass/ui/pages/index.js

@@ -1,11 +1,13 @@
 import * as React from "react";
 import Head from "next/head";
 import dynamic from "next/dynamic";
-import Meta from "~/components/Meta";
-import Loading from "~/components/Loading";
-const LookingGlass = dynamic(() => import("~/components/LookingGlass"), {
-  loading: Loading
-});
+import { Meta, Loading } from "app/components";
+const LookingGlass = dynamic(
+  () => import("app/components/LookingGlass").then(i => i.LookingGlass),
+  {
+    loading: Loading
+  }
+);
 
 const Index = ({ faviconComponents }) => {
   return (

hyperglass/ui/pages/structured.javascript

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Flex } from "@chakra-ui/core";
-import Layout from "~/components/Layout";
-import BGPTable from "~/components/BGPTable";
+import {BGPTable,Layout} from "app/components";
 
 const response = {
   cached: false,

hyperglass/ui/util/formatters.js

@@ -1,4 +1,3 @@
-import chroma from "chroma-js";
 import dayjs from "dayjs";
 import relativeTimePlugin from "dayjs/plugin/relativeTime";
 import utcPlugin from "dayjs/plugin/utc";
@@ -6,39 +5,6 @@ import utcPlugin from "dayjs/plugin/utc";
 dayjs.extend(relativeTimePlugin);
 dayjs.extend(utcPlugin);
 
-const isDark = color => {
-  // YIQ equation from http://24ways.org/2010/calculating-color-contrast
-  const rgb = chroma(color).rgb();
-  const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-  return yiq < 128;
-};
-
-const isLight = color => isDark(color);
-
-const opposingColor = (theme, color) => {
-  if (color.match(/^\w+\.\d+$/m)) {
-    const colorParts = color.split(".");
-    if (colorParts.length !== 2) {
-      throw Error(`Color is improperly formatted. Got '${color}'`);
-    }
-    const [colorName, colorOpacity] = colorParts;
-    color = theme.colors[colorName][colorOpacity];
-  }
-  const opposing = isDark(color) ? theme.colors.white : theme.colors.black;
-  return opposing;
-};
-
-const googleFontUrl = (fontFamily, weights = [300, 400, 700]) => {
-  const urlWeights = weights.join(",");
-  const fontName = fontFamily
-    .split(/, /)[0]
-    .trim()
-    .replace(/'|"/g, "");
-  const urlFont = fontName.split(/ /).join("+");
-  const urlBase = `https://fonts.googleapis.com/css?family=${urlFont}:${urlWeights}&display=swap`;
-  return urlBase;
-};
-
 const formatAsPath = path => {
   return path.join(" → ");
 };
@@ -66,7 +32,7 @@ const formatTime = val => {
   return `${relative} (${timestamp})`;
 };
 
-const tableToString = (target, data, config) => {
+export const tableToString = (target, data, config) => {
   try {
     const formatRpkiState = val => {
       const rpkiStateNames = [
@@ -112,5 +78,3 @@ const tableToString = (target, data, config) => {
     return `An error occurred while parsing the output: '${err.message}'`;
   }
 };
-
-export { isDark, isLight, opposingColor, googleFontUrl, tableToString };

hyperglass/ui/util/index.mjs

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./formatters";

hyperglass/ui/util/theme.js

@@ -152,10 +152,43 @@ const importColors = (userColors = {}) => {
   };
 };
 
-const makeTheme = userTheme => ({
+export const makeTheme = userTheme => ({
   ...chakraTheme,
   colors: importColors(userTheme.colors),
   fonts: importFonts(userTheme.fonts)
 });
 
-export { makeTheme, chakraTheme as defaultTheme };
+export const isDark = color => {
+  // YIQ equation from http://24ways.org/2010/calculating-color-contrast
+  const rgb = chroma(color).rgb();
+  const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+  return yiq < 128;
+};
+
+export const isLight = color => isDark(color);
+
+export const opposingColor = (theme, color) => {
+  if (color.match(/^\w+\.\d+$/m)) {
+    const colorParts = color.split(".");
+    if (colorParts.length !== 2) {
+      throw Error(`Color is improperly formatted. Got '${color}'`);
+    }
+    const [colorName, colorOpacity] = colorParts;
+    color = theme.colors[colorName][colorOpacity];
+  }
+  const opposing = isDark(color) ? theme.colors.white : theme.colors.black;
+  return opposing;
+};
+
+export const googleFontUrl = (fontFamily, weights = [300, 400, 700]) => {
+  const urlWeights = weights.join(",");
+  const fontName = fontFamily
+    .split(/, /)[0]
+    .trim()
+    .replace(/'|"/g, "");
+  const urlFont = fontName.split(/ /).join("+");
+  const urlBase = `https://fonts.googleapis.com/css?family=${urlFont}:${urlWeights}&display=swap`;
+  return urlBase;
+};
+
+export { theme as defaultTheme } from "@chakra-ui/core";

hyperglass/ui/webpack.config.js

@@ -1,7 +0,0 @@
-const alias = require("./.alias");
-
-module.exports = {
-    resolve: {
-        alias
-    }
-};