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

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";