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

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.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,17 +4,17 @@ 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, {});
 
 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.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;