typescript migration

hyperglass/ui/components/CacheTimeout.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import Countdown, { zeroPad } from 'react-countdown';
-import { Text, useColorMode } from '@chakra-ui/core';
-
-const bg = { dark: 'white', light: 'black' };
-
-const Renderer = ({ hours, minutes, seconds, completed, props }) => {
-  if (completed) {
-    return <Text fontSize="xs" />;
-  } else {
-    let time = [zeroPad(seconds)];
-    minutes !== 0 && time.unshift(zeroPad(minutes));
-    hours !== 0 && time.unshift(zeroPad(hours));
-    return (
-      <Text fontSize="xs" color="gray.500">
-        {props.text}
-        <Text as="span" fontSize="xs" color={bg[props.colorMode]}>
-          {time.join(':')}
-        </Text>
-      </Text>
-    );
-  }
-};
-
-export const CacheTimeout = ({ timeout, text }) => {
-  const then = timeout * 1000;
-  const { colorMode } = useColorMode();
-  return (
-    <Countdown
-      date={Date.now() + then}
-      renderer={Renderer}
-      daysInHours
-      text={text}
-      colorMode={colorMode}
-    />
-  );
-};

hyperglass/ui/components/CacheTimeout/CacheTimeout.d.ts

@@ -0,0 +1,12 @@
+namespace ReactCountdown {
+  type CountdownRender = import('react-countdown').CountdownRenderProps;
+}
+
+interface IRenderer extends ReactCountdown.CountdownRender {
+  text: string;
+}
+
+interface ICountdown {
+  timeout: number;
+  text: string;
+}

hyperglass/ui/components/CacheTimeout/Countdown.tsx

@@ -0,0 +1,39 @@
+import { Text } from '@chakra-ui/core';
+import ReactCountdown, { zeroPad } from 'react-countdown';
+import { If } from '~/components';
+import { useColorValue } from '~/context';
+
+const Renderer = (props: IRenderer) => {
+  const { hours, minutes, seconds, completed, text } = props;
+  let time = [zeroPad(seconds)];
+  minutes !== 0 && time.unshift(zeroPad(minutes));
+  hours !== 0 && time.unshift(zeroPad(hours));
+  const bg = useColorValue('black', 'white');
+  return (
+    <>
+      <If condition={completed}>
+        <Text fontSize="xs" />
+      </If>
+      <If condition={!completed}>
+        <Text fontSize="xs" color="gray.500">
+          {text}
+          <Text as="span" fontSize="xs" color={bg}>
+            {time.join(':')}
+          </Text>
+        </Text>
+      </If>
+    </>
+  );
+};
+
+export const Countdown = (props: ICountdown) => {
+  const { timeout, text } = props;
+  const then = timeout * 1000;
+  return (
+    <ReactCountdown
+      date={Date.now() + then}
+      daysInHours
+      renderer={renderProps => <Renderer {...renderProps} text={text} />}
+    />
+  );
+};

hyperglass/ui/components/CacheTimeout/index.ts

@@ -0,0 +1 @@
+export * from './Countdown';

hyperglass/ui/components/Card/Card.d.ts

@@ -0,0 +1,11 @@
+namespace Chakra {
+  type FlexProps = import('@chakra-ui/core').FlexProps;
+}
+
+interface ICardBody extends Omit<Chakra.FlexProps, 'onClick'> {
+  onClick?: () => boolean;
+}
+
+interface ICardFooter extends Chakra.FlexProps {}
+
+interface ICardHeader extends Chakra.FlexProps {}

hyperglass/ui/components/Card/CardBody.tsx

@@ -1,9 +1,6 @@
-import * as React from 'react';
 import { Flex } from '@chakra-ui/core';
 import { useColorValue } from '~/context';
 
-import type { ICardBody } from './types';
-
 export const CardBody = (props: ICardBody) => {
   const { onClick, ...rest } = props;
   const bg = useColorValue('white', 'original.dark');

hyperglass/ui/components/Card/CardFooter.tsx

@@ -1,9 +1,6 @@
-import * as React from 'react';
 import { Flex } from '@chakra-ui/core';
 
-import type { FlexProps } from '@chakra-ui/core';
-
-export const CardFooter = (props: FlexProps) => (
+export const CardFooter = (props: ICardFooter) => (
   <Flex
     p={4}
     direction="column"

hyperglass/ui/components/Card/CardHeader.tsx

@@ -1,10 +1,7 @@
-import * as React from 'react';
 import { Flex, Text } from '@chakra-ui/core';
 import { useColorValue } from '~/context';
 
-import type { FlexProps } from '@chakra-ui/core';
-
-export const CardHeader = (props: FlexProps) => {
+export const CardHeader = (props: ICardHeader) => {
   const { children, ...rest } = props;
   const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100');
   return (

hyperglass/ui/components/Card/types.ts

@@ -1,5 +0,0 @@
-import type { FlexProps } from '@chakra-ui/core';
-
-export interface ICardBody extends Omit<FlexProps, 'onClick'> {
-  onClick?: () => boolean;
-}

hyperglass/ui/components/Footer/Footer.d.ts

@@ -0,0 +1,20 @@
+namespace Chakra {
+  type ButtonProps = import('@chakra-ui/core').ButtonProps;
+  type CollapseProps = import('@chakra-ui/core').CollapseProps;
+}
+
+type TFooterSide = 'left' | 'right';
+
+interface IFooterButton extends Chakra.ButtonProps {
+  side: TFooterSide;
+  href?: string;
+}
+
+interface IFooterContent extends Omit<Chakra.CollapseProps, 'children'> {
+  isOpen: boolean;
+  content: string;
+  side: TFooterSide;
+  children?: undefined;
+}
+
+type TFooterItems = 'help' | 'credit' | 'terms';

hyperglass/ui/components/Footer/FooterButton.tsx

@@ -1,9 +1,6 @@
-import * as React from 'react';
 import { Button, Flex, FlexProps } from '@chakra-ui/core';
 import { withAnimation } from '~/components';
 
-import type { IFooterButton } from './types';
-
 const AnimatedFlex = withAnimation<FlexProps>(Flex);
 
 export const FooterButton = (props: IFooterButton) => {

hyperglass/ui/components/Footer/FooterContent.tsx

@@ -1,10 +1,6 @@
-import * as React from 'react';
-import { forwardRef } from 'react';
 import { Box, Collapse } from '@chakra-ui/core';
 import { Markdown } from '~/components';
 
-import type { IFooterContent } from './types';
-
 export const FooterContent = (props: IFooterContent) => {
   const { isOpen = false, content, side = 'left', children: _, ...rest } = props;
   return (

hyperglass/ui/components/Footer/FooterMain.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useState } from 'react';
 import { Box, Flex } from '@chakra-ui/core';
 import { FiCode } from '@meronex/icons/fi';
@@ -8,8 +7,6 @@ import { useConfig, useColorValue } from '~/context';
 import { FooterButton } from './FooterButton';
 import { FooterContent } from './FooterContent';
 
-import type { TFooterItems } from './types';
-
 export const Footer = () => {
   const config = useConfig();
   const [helpVisible, showHelp] = useState(false);

hyperglass/ui/components/Footer/index.ts

@@ -1 +1 @@
-export * from './Footer';
+export * from './FooterMain';

hyperglass/ui/components/Footer/types.ts

@@ -1,17 +0,0 @@
-import type { FlexProps, ButtonProps, CollapseProps } from '@chakra-ui/core';
-
-type TFooterSide = 'left' | 'right';
-
-export interface IFooterButton extends ButtonProps {
-  side: TFooterSide;
-  href?: string;
-}
-
-export interface IFooterContent extends Omit<CollapseProps, 'children'> {
-  isOpen: boolean;
-  content: string;
-  side: TFooterSide;
-  children?: undefined;
-}
-
-export type TFooterItems = 'help' | 'credit' | 'terms';

hyperglass/ui/components/Markdown/MDComponents.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Checkbox as ChakraCheckbox,
   Divider as ChakraDivider,

hyperglass/ui/components/Markdown/MDTable.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Box } from '@chakra-ui/core';
 import { useColorValue } from '~/context';
 import type { BoxProps } from '@chakra-ui/core';

hyperglass/ui/components/Markdown/Markdown.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import {
   List,

hyperglass/ui/components/Table/Table.tsx

@@ -1,9 +1,7 @@
-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 'app/context';
-import { CardBody, CardFooter, CardHeader } from 'app/components';
+import { useMedia } from '~/context';
+import { CardBody, CardFooter, CardHeader, If } from '~/components';
 import { TableMain } from './TableMain';
 import { TableCell } from './TableCell';
 import { TableHead } from './TableHead';
@@ -12,40 +10,49 @@ import { TableBody } from './TableBody';
 import { TableIconButton } from './TableIconButton';
 import { TableSelectShow } from './TableSelectShow';
 
-export const Table = ({
-  columns,
-  data,
-  tableHeading,
-  initialPageSize = 10,
-  onRowClick,
-  striped = false,
-  bordersVertical = false,
-  bordersHorizontal = false,
-  cellRender = null,
-  rowHighlightProp,
-  rowHighlightBg,
-  rowHighlightColor,
-}) => {
-  const tableColumns = useMemo(() => columns, [columns]);
+import type { ITable } from './types';
+
+export const Table = (props: ITable) => {
+  const {
+    columns,
+    data,
+    heading,
+    onRowClick,
+    striped = false,
+    bordersVertical = false,
+    bordersHorizontal = false,
+    cellRender,
+    rowHighlightProp,
+    rowHighlightBg,
+    rowHighlightColor,
+  } = props;
 
   const { isSm, isMd } = useMedia();
 
-  const defaultColumn = useMemo(
-    () => ({
-      minWidth: 100,
-      width: 150,
-      maxWidth: 300,
-    }),
-    [],
-  );
+  const defaultColumn = {
+    minWidth: 100,
+    width: 150,
+    maxWidth: 300,
+  };
 
-  let hiddenColumns = [];
+  let hiddenColumns = [] as string[];
 
-  tableColumns.map(col => {
-    if (col.hidden === true) {
+  for (const col of columns) {
+    if (col.hidden) {
       hiddenColumns.push(col.accessor);
     }
-  });
+  }
+
+  const table = useTable(
+    {
+      columns,
+      defaultColumn,
+      data,
+      initialState: { hiddenColumns },
+    },
+    useSortBy,
+    usePagination,
+  );
 
   const {
     getTableProps,
@@ -61,47 +68,33 @@ export const Table = ({
     previousPage,
     setPageSize,
     state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns: tableColumns,
-      defaultColumn,
-      data,
-      initialState: {
-        pageIndex: 0,
-        pageSize: initialPageSize,
-        hiddenColumns: hiddenColumns,
-      },
-    },
-    useSortBy,
-    usePagination,
-  );
+  } = table;
 
   return (
     <CardBody>
-      {!!tableHeading && <CardHeader>{tableHeading}</CardHeader>}
+      {heading && <CardHeader>{heading}</CardHeader>}
       <TableMain {...getTableProps()}>
         <TableHead>
-          {headerGroups.map(headerGroup => (
-            <TableRow key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
+          {headerGroups.map((headerGroup, i) => (
+            <TableRow index={i} {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
                 <TableCell
                   as="th"
                   align={column.align}
-                  key={column.id}
                   {...column.getHeaderProps()}
                   {...column.getSortByToggleProps()}>
                   <Text fontSize="sm" fontWeight="bold" display="inline-block">
                     {column.render('Header')}
                   </Text>
-                  {column.isSorted ? (
-                    column.isSortedDesc ? (
+                  <If condition={column.isSorted}>
+                    <If condition={column.isSortedDesc}>
                       <Icon name="chevron-down" size={4} ml={1} />
-                    ) : (
+                    </If>
+                    <If condition={!column.isSortedDesc}>
                       <Icon name="chevron-up" size={4} ml={1} />
-                    )
-                  ) : (
-                    ''
-                  )}
+                    </If>
+                  </If>
+                  <If condition={!column.isSorted}>{''}</If>
                 </TableCell>
               ))}
             </TableRow>
@@ -117,7 +110,7 @@ export const Table = ({
                   doHorizontalBorders={bordersHorizontal}
                   onClick={() => onRowClick && onRowClick(row)}
                   key={key}
-                  highlight={row.values[rowHighlightProp] ?? false}
+                  highlight={row.values[rowHighlightProp ?? ''] ?? false}
                   highlightBg={rowHighlightBg}
                   highlightColor={rowHighlightColor}
                   {...row.getRowProps()}>

hyperglass/ui/components/Table/TableBody.js

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Box, css } from '@chakra-ui/core';
-
-export const TableBody = ({ children, ...props }) => (
-  <Box
-    as="tbody"
-    overflowY="scroll"
-    css={css({
-      '&::-webkit-scrollbar': { display: 'none' },
-      '&': { msOverflowStyle: 'none' },
-    })}
-    overflowX="hidden"
-    {...props}>
-    {children}
-  </Box>
-);

hyperglass/ui/components/Table/TableBody.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@chakra-ui/core';
+import type { BoxProps } from '@chakra-ui/core';
+
+export const TableBody = (props: BoxProps) => (
+  <Box
+    as="tbody"
+    overflowY="scroll"
+    css={{
+      '&::-webkit-scrollbar': { display: 'none' },
+      '&': { msOverflowStyle: 'none' },
+    }}
+    overflowX="hidden"
+    {...props}
+  />
+);

hyperglass/ui/components/Table/TableCell.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Box, useColorMode } from '@chakra-ui/core';
-
-const cellBorder = {
-  dark: { borderLeft: '1px', borderLeftColor: 'whiteAlpha.100' },
-  light: { borderLeft: '1px', borderLeftColor: 'blackAlpha.100' },
-};
-
-export const TableCell = ({ bordersVertical = [false, 0, 0], align, cell, children, ...props }) => {
-  const { colorMode } = useColorMode();
-  const [doVerticalBorders, index] = bordersVertical;
-  let borderProps = {};
-  if (doVerticalBorders && index !== 0) {
-    borderProps = cellBorder[colorMode];
-  }
-  return (
-    <Box
-      as="td"
-      p={4}
-      m={0}
-      w="1%"
-      whiteSpace="nowrap"
-      textAlign={align}
-      {...borderProps}
-      {...props}>
-      {children}
-    </Box>
-  );
-};

hyperglass/ui/components/Table/TableCell.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+
+import type { ITableCell } from './types';
+
+export const TableCell = (props: ITableCell) => {
+  const { bordersVertical = [false, 0, 0], align, ...rest } = props;
+  const [doVerticalBorders, index] = bordersVertical;
+  const borderLeftColor = useColorValue('blackAlpha.100', 'whiteAlpha.100');
+
+  let borderProps = {};
+  if (doVerticalBorders && index !== 0) {
+    borderProps = { borderLeft: '1px solid', borderLeftColor };
+  }
+
+  return (
+    <Box
+      p={4}
+      m={0}
+      w="1%"
+      as="td"
+      textAlign={align}
+      whiteSpace="nowrap"
+      {...borderProps}
+      {...rest}
+    />
+  );
+};

hyperglass/ui/components/Table/TableHead.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Box, useColorMode } from '@chakra-ui/core';
-
-const bg = { dark: 'whiteAlpha.100', light: 'blackAlpha.100' };
-
-export const TableHead = ({ children, ...props }) => {
-  const { colorMode } = useColorMode();
-  return (
-    <Box as="thead" overflowX="hidden" overflowY="auto" bg={bg[colorMode]} {...props}>
-      {children}
-    </Box>
-  );
-};

hyperglass/ui/components/Table/TableHead.tsx

@@ -0,0 +1,9 @@
+import { Box } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+
+import type { BoxProps } from '@chakra-ui/core';
+
+export const TableHead = (props: BoxProps) => {
+  const bg = useColorValue('blackAlpha.100', 'whiteAlpha.100');
+  return <Box as="thead" overflowX="hidden" overflowY="auto" bg={bg} {...props} />;
+};

hyperglass/ui/components/Table/TableIconButton.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { IconButton } from '@chakra-ui/core';
-
-export const TableIconButton = ({ icon, onClick, isDisabled, color, children, ...props }) => (
-  <IconButton
-    size="sm"
-    icon={icon}
-    borderWidth={1}
-    onClick={onClick}
-    variantColor={color}
-    isDisabled={isDisabled}
-    aria-label="Table Icon Button"
-    {...props}>
-    {children}
-  </IconButton>
-);

hyperglass/ui/components/Table/TableIconButton.tsx

@@ -0,0 +1,7 @@
+import { IconButton } from '@chakra-ui/core';
+
+import type { IconButtonProps } from '@chakra-ui/core';
+
+export const TableIconButton = (props: IconButtonProps) => (
+  <IconButton size="sm" borderWidth={1} {...props} aria-label="Table Icon Button" />
+);

hyperglass/ui/components/Table/TableMain.js

@@ -1,37 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Box, css, useTheme, useColorMode } from '@chakra-ui/core';
-
-const scrollbar = { dark: 'whiteAlpha.300', light: 'blackAlpha.300' };
-const scrollbarHover = { dark: 'whiteAlpha.400', light: 'blackAlpha.400' };
-const scrollbarBg = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' };
-
-export const TableMain = ({ children, ...props }) => {
-  const theme = useTheme();
-  const { colorMode } = useColorMode();
-  return (
-    <Box
-      as="table"
-      display="block"
-      css={css({
-        '&::-webkit-scrollbar': { height: '5px' },
-        '&::-webkit-scrollbar-track': {
-          backgroundColor: scrollbarBg[colorMode],
-        },
-        '&::-webkit-scrollbar-thumb': {
-          backgroundColor: scrollbar[colorMode],
-        },
-        '&::-webkit-scrollbar-thumb:hover': {
-          backgroundColor: scrollbarHover[colorMode],
-        },
-
-        '-ms-overflow-style': { display: 'none' },
-      })(theme)}
-      overflowX="auto"
-      borderRadius="md"
-      boxSizing="border-box"
-      {...props}>
-      {children}
-    </Box>
-  );
-};

hyperglass/ui/components/Table/TableMain.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+
+import type { BoxProps } from '@chakra-ui/core';
+
+export const TableMain = (props: BoxProps) => {
+  const scrollbar = useColorValue('blackAlpha.300', 'whiteAlpha.300');
+  const scrollbarHover = useColorValue('blackAlpha.400', 'whiteAlpha.400');
+  const scrollbarBg = useColorValue('blackAlpha.50', 'whiteAlpha.50');
+  return (
+    <Box
+      as="table"
+      display="block"
+      overflowX="auto"
+      borderRadius="md"
+      boxSizing="border-box"
+      css={{
+        '&::-webkit-scrollbar': { height: '5px' },
+        '&::-webkit-scrollbar-track': {
+          backgroundColor: scrollbarBg,
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: scrollbar,
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: scrollbarHover,
+        },
+
+        '-ms-overflow-style': { display: 'none' },
+      }}
+      {...props}
+    />
+  );
+};

hyperglass/ui/components/Table/TableRow.js

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { PseudoBox, useColorMode, useTheme } from '@chakra-ui/core';
-import { opposingColor } from 'app/util';
-
-const hoverBg = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' };
-const bgStripe = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' };
-const rowBorder = {
-  dark: { borderTop: '1px', borderTopColor: 'whiteAlpha.100' },
-  light: { borderTop: '1px', borderTopColor: 'blackAlpha.100' },
-};
-const alphaMap = { dark: '200', light: '100' };
-const alphaMapHover = { dark: '100', light: '200' };
-
-export const TableRow = ({
-  highlight = false,
-  highlightBg = 'primary',
-  doStripe = false,
-  doHorizontalBorders = false,
-  index = 0,
-  children = false,
-  ...props
-}) => {
-  const { colorMode } = useColorMode();
-  const theme = useTheme();
-
-  let bg = null;
-  if (highlight) {
-    bg = `${highlightBg}.${alphaMap[colorMode]}`;
-  } else if (doStripe && index % 2 !== 0) {
-    bg = bgStripe[colorMode];
-  }
-  const color = highlight ? opposingColor(theme, bg) : null;
-
-  const borderProps = doHorizontalBorders && index !== 0 ? rowBorder[colorMode] : {};
-  return (
-    <PseudoBox
-      as="tr"
-      _hover={{
-        cursor: 'pointer',
-        backgroundColor: highlight
-          ? `${highlightBg}.${alphaMapHover[colorMode]}`
-          : hoverBg[colorMode],
-      }}
-      bg={bg}
-      color={color}
-      fontWeight={highlight ? 'bold' : null}
-      {...borderProps}
-      {...props}>
-      {children}
-    </PseudoBox>
-  );
-};

hyperglass/ui/components/Table/TableRow.tsx

@@ -0,0 +1,52 @@
+import { Box, useColorMode } from '@chakra-ui/core';
+import { useColorValue } from '~/context';
+import { useOpposingColor } from '~/hooks';
+
+import type { ITableRow } from './types';
+
+export const TableRow = (props: ITableRow) => {
+  const {
+    highlight = false,
+    highlightBg = 'primary',
+    doStripe = false,
+    doHorizontalBorders = false,
+    index = 0,
+    ...rest
+  } = props;
+  const { colorMode } = useColorMode();
+
+  const alpha = useColorValue('100', '200');
+  const alphaHover = useColorValue('200', '100');
+  const bgStripe = useColorValue('blackAlpha.50', 'whiteAlpha.50');
+  let hoverBg = useColorValue('blackAlpha.50', 'whiteAlpha.50');
+  const rowBorder = useColorValue(
+    { borderTop: '1px', borderTopColor: 'blackAlpha.100' },
+    { borderTop: '1px', borderTopColor: 'whiteAlpha.100' },
+  );
+  let bg;
+  const color = useOpposingColor(bgStripe);
+
+  if (highlight) {
+    bg = `${highlightBg}.${alpha}`;
+    hoverBg = `${highlightBg}.${alphaHover}`;
+  } else if (doStripe && index % 2 !== 0) {
+    bg = bgStripe;
+  }
+
+  const borderProps = doHorizontalBorders && index !== 0 ? rowBorder : {};
+
+  return (
+    <Box
+      as="tr"
+      bg={bg}
+      color={highlight ? color : undefined}
+      fontWeight={highlight ? 'bold' : undefined}
+      _hover={{
+        cursor: 'pointer',
+        backgroundColor: highlight ? `${highlightBg}.${alphaHover}` : hoverBg,
+      }}
+      {...borderProps}
+      {...rest}
+    />
+  );
+};

hyperglass/ui/components/Table/TableSelectShow.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Select } from '@chakra-ui/core';
-
-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}>
-        Show {value}
-      </option>
-    ))}
-    {children}
-  </Select>
-);

hyperglass/ui/components/Table/TableSelectShow.tsx

@@ -0,0 +1,15 @@
+import { Select } from '@chakra-ui/core';
+import { SelectProps } from '@chakra-ui/core';
+
+export const TableSelectShow = (props: SelectProps) => {
+  const { value, ...rest } = props;
+  return (
+    <Select size="sm" {...rest}>
+      {[5, 10, 20, 30, 40, 50].map(value => (
+        <option key={value} value={value}>
+          Show {value}
+        </option>
+      ))}
+    </Select>
+  );
+};

hyperglass/ui/components/Table/types.ts

@@ -0,0 +1,36 @@
+import type { BoxProps } from '@chakra-ui/core';
+import type { Colors } from '~/types';
+
+export interface IColumn {
+  Header: string;
+  accessor: string;
+  align: 'left' | 'right' | null;
+  hidden: boolean;
+}
+
+export interface ITable {
+  columns: IColumn[];
+  data: IRoute[];
+  heading?: ReactNode;
+  onRowClick?: (row: IRoute) => void;
+  striped?: boolean;
+  bordersVertical?: boolean;
+  bordersHorizontal?: boolean;
+  cellRender?: ReactFC;
+  rowHighlightProp?: keyof IRoute;
+  rowHighlightBg?: keyof Colors;
+  rowHighlightColor?: string;
+}
+
+export interface ITableCell extends BoxProps {
+  bordersVertical: [boolean, number, number];
+  align: BoxProps['textAlign'];
+}
+
+export interface ITableRow extends BoxProps {
+  highlight?: boolean;
+  highlightBg?: keyof Colors;
+  doStripe?: boolean;
+  doHorizontalBorders?: boolean;
+  index: number;
+}

hyperglass/ui/components/Util/If.tsx

@@ -0,0 +1,4 @@
+export const If = (props: IIf) => {
+  const { condition, render, children, ...rest } = props;
+  return condition ? (render ? render(rest) : children) : null;
+};

hyperglass/ui/components/Util/Util.d.ts

@@ -0,0 +1,5 @@
+interface IIf {
+  condition: boolean;
+  render?: (rest: any) => JSX.Element;
+  [k: string]: any;
+}

hyperglass/ui/components/Util/index.ts

@@ -0,0 +1 @@
+export * from './If';

hyperglass/ui/components/index.ts

@@ -33,4 +33,5 @@ export * from './SubmitButton';
 export * from './Table';
 export * from './TextOutput';
 export * from './Title';
+export * from './Util';
 export * from './withAnimation';

hyperglass/ui/context/HyperglassProvider.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { createContext, useContext, useMemo } from 'react';
-import { ChakraProvider, useColorModeValue } from '@chakra-ui/core';
+import { ChakraProvider, useTheme as useChakraTheme } from '@chakra-ui/core';
 import { makeTheme, defaultTheme } from '~/util';
 
-import type { IConfig } from '~/types';
+import type { IConfig, ITheme } from '~/types';
 import type { IHyperglassProvider } from './types';
 
 const HyperglassContext = createContext<IConfig>(Object());
@@ -21,4 +20,5 @@ export const HyperglassProvider = (props: IHyperglassProvider) => {
 };
 
 export const useConfig = () => useContext(HyperglassContext);
-export const useColorValue = useColorModeValue;
+export const useTheme = (): ITheme => useChakraTheme();
+export { useColorModeValue as useColorValue } from '@chakra-ui/core';

hyperglass/ui/context/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ReactNode } from 'react';
 import type { IConfig, IFormData } from '~/types';
 
 export interface IHyperglassProvider {

hyperglass/ui/globals.d.ts

@@ -1,8 +1,29 @@
 import type { MotionProps } from 'framer-motion';
 
-type Dict<T = string> = Record<string, T>;
+declare global {
+  import * as React from 'react';
 
-type ReactRef<T = HTMLElement> = MutableRefObject<T>;
+  interface IRoute {
+    prefix: string;
+    active: boolean;
+    age: number;
+    weight: number;
+    med: number;
+    local_preference: number;
+    as_path: number[];
+    communities: string[];
+    next_hop: string;
+    source_as: number;
+    source_rid: string;
+    peer_rid: string;
+    rpki_state: 0 | 1 | 2 | 3;
+  }
+  type ReactRef<T = HTMLElement> = MutableRefObject<T>;
 
-type Animated<T> = Omit<T, keyof MotionProps> &
-  Omit<MotionProps, keyof T> & { transition?: MotionProps['transition'] };
+  type Dict<T = string> = Record<string, T>;
+
+  type Animated<T> = Omit<T, keyof MotionProps> &
+    Omit<MotionProps, keyof T> & { transition?: MotionProps['transition'] };
+  type ReactNode = React.ReactNode;
+  type ReactFC = React.FunctionComponent;
+}

hyperglass/ui/hooks/hooks.d.ts

@@ -0,0 +1,4 @@
+interface IOpposingOptions {
+  light?: string;
+  dark?: string;
+}

hyperglass/ui/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useSessionStorage';
+export * from './useOpposingColor';

hyperglass/ui/hooks/useOpposingColor.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useToken } from '@chakra-ui/core';
+import { getColor, isLight } from '@chakra-ui/theme-tools';
+import { useTheme } from '~/context';
+
+export function useIsDark(color: string) {
+  const theme = useTheme();
+  if (typeof color === 'string' && color.match(/[a-zA-Z]+\.[a-zA-Z0-9]+/g)) {
+    color = getColor(theme, color, color);
+  }
+  let opposingShouldBeDark = true;
+  try {
+    opposingShouldBeDark = isLight(color)(theme);
+  } catch (err) {
+    console.error(err);
+  }
+  return opposingShouldBeDark;
+}
+
+export function useOpposingColor(color: string, options?: IOpposingOptions): string {
+  const [opposingColor, setOpposingColor] = useState<string>('inherit');
+  const isBlack = useIsDark(color);
+
+  const dark = useToken('colors', options?.dark ?? 'original.dark');
+  const light = useToken('colors', options?.light ?? 'original.light');
+
+  isBlack && opposingColor !== dark && setOpposingColor(dark);
+  !isBlack && opposingColor !== light && setOpposingColor(light);
+
+  return opposingColor;
+}
+
+export function useOpposingToken(color: string, options?: IOpposingOptions): string {
+  const [opposingColor, setOpposingColor] = useState<string>('inherit');
+  const isBlack = useIsDark(color);
+  const dark = options?.dark ?? 'dark';
+  const light = options?.light ?? 'light';
+
+  isBlack && opposingColor !== dark && setOpposingColor(dark);
+  !isBlack && opposingColor !== light && setOpposingColor(light);
+  return opposingColor;
+}

hyperglass/ui/package.json

@@ -15,8 +15,8 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@chakra-ui/core": "1.0.0-rc.5",
-    "@chakra-ui/theme": "1.0.0-rc.5",
+    "@chakra-ui/core": "1.0.0-rc.8",
+    "@chakra-ui/theme": "1.0.0-rc.8",
     "@hookstate/core": "^3.0.1",
     "@meronex/icons": "^4.0.0",
     "axios": "^0.19.2",
@@ -26,9 +26,9 @@
     "framer-motion": "^1.10.0",
     "lodash": "^4.17.15",
     "next": "^9.5.4",
-    "react": "^16.13.1",
+    "react": "16.14.0",
     "react-countdown": "^2.2.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "16.14.0",
     "react-hook-form": "^5.7",
     "react-markdown": "^4.3.1",
     "react-select": "^3.0.8",
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@types/node": "^14.11.10",
     "@types/react-select": "^3.0.22",
+    "@types/react-table": "7.0.4",
     "@types/string-format": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",

hyperglass/ui/tsconfig.json

@@ -3,7 +3,7 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */

hyperglass/ui/types/theme.ts

@@ -1,3 +1,4 @@
+import type { Theme as DefaultTheme } from '@chakra-ui/theme';
 import type { ColorHues } from '@chakra-ui/theme/dist/types/foundations/colors';
 
 interface ChakraColors {
@@ -44,3 +45,7 @@ export interface Fonts {
   body: string;
   mono: string;
 }
+
+export interface ITheme extends Omit<DefaultTheme, 'colors'> {
+  colors: CustomColors;
+}