diff --git a/hyperglass/ui/components/BGPTable.js b/hyperglass/ui/components/BGPTable.js deleted file mode 100644 index 7cb0e61..0000000 --- a/hyperglass/ui/components/BGPTable.js +++ /dev/null @@ -1,199 +0,0 @@ -import * as React from 'react'; -import { - Flex, - Icon, - Popover, - PopoverArrow, - PopoverContent, - PopoverTrigger, - Text, - Tooltip, - useColorMode, -} from '@chakra-ui/core'; -import { MdLastPage } from '@meronex/icons/md'; -import dayjs from 'dayjs'; -import relativeTimePlugin from 'dayjs/plugin/relativeTime'; -import utcPlugin from 'dayjs/plugin/utc'; -import { useConfig } from 'app/context'; -import { Table } from 'app/components'; - -dayjs.extend(relativeTimePlugin); -dayjs.extend(utcPlugin); - -const isActiveColor = { - true: { dark: 'green.300', light: 'green.500' }, - false: { dark: 'gray.300', light: 'gray.500' }, -}; - -const arrowColor = { - true: { dark: 'blackAlpha.500', light: 'blackAlpha.500' }, - false: { dark: 'whiteAlpha.300', light: 'blackAlpha.500' }, -}; - -const rpkiIcon = ['not-allowed', 'check-circle', 'warning', 'question']; - -const rpkiColor = { - true: { - dark: ['red.500', 'green.600', 'yellow.500', 'gray.800'], - light: ['red.500', 'green.500', 'yellow.500', 'gray.600'], - }, - false: { - dark: ['red.300', 'green.300', 'yellow.300', 'gray.300'], - light: ['red.400', 'green.500', 'yellow.400', 'gray.500'], - }, -}; - -const makeColumns = fields => { - return fields.map(pair => { - const [header, accessor, align] = pair; - let columnConfig = { - Header: header, - accessor: accessor, - align: align, - hidden: false, - }; - if (align === null) { - columnConfig.hidden = true; - } - return columnConfig; - }); -}; - -const MonoField = ({ v, ...props }) => ( - - {v} - -); - -const Active = ({ isActive }) => { - const { colorMode } = useColorMode(); - return ( - - ); -}; - -const Age = ({ inSeconds }) => { - const now = dayjs.utc(); - const then = now.subtract(inSeconds, 'seconds'); - return ( - - {now.to(then, true)} - - ); -}; - -const Weight = ({ weight, winningWeight }) => { - const fixMeText = - winningWeight === 'low' ? 'Lower Weight is Preferred' : 'Higher Weight is Preferred'; - return ( - - - {weight} - - - ); -}; - -const ASPath = ({ path, active }) => { - const { colorMode } = useColorMode(); - if (path.length === 0) { - return ; - } - let paths = []; - path.map((asn, i) => { - const asnStr = String(asn); - i !== 0 && - paths.push( - , - ); - paths.push( - - {asnStr} - , - ); - }); - return paths; -}; - -const Communities = ({ communities }) => { - const { colorMode } = useColorMode(); - let component; - communities.length === 0 - ? (component = ( - - - - )) - : (component = ( - - - - - - - {communities.join('\n')} - - - )); - return component; -}; - -const RPKIState = ({ state, active }) => { - const { web } = useConfig(); - const { colorMode } = useColorMode(); - const stateText = [ - web.text.rpki_invalid, - web.text.rpki_valid, - web.text.rpki_unknown, - web.text.rpki_unverified, - ]; - return ( - - - - ); -}; - -const Cell = ({ data, rawData, longestASN }) => { - const component = { - prefix: , - active: , - age: , - weight: , - med: , - local_preference: , - as_path: , - communities: , - next_hop: , - source_as: , - source_rid: , - peer_rid: , - rpki_state: , - }; - return component[data.column.id] ?? <> ; -}; - -export const BGPTable = ({ children: data, ...props }) => { - const config = useConfig(); - const columns = makeColumns(config.parsed_data_fields); - - return ( - - } - bordersHorizontal - rowHighlightBg="green" - /> - - ); -}; diff --git a/hyperglass/ui/components/CacheTimeout/CacheTimeout.d.ts b/hyperglass/ui/components/CacheTimeout/CacheTimeout.d.ts deleted file mode 100644 index 95834e9..0000000 --- a/hyperglass/ui/components/CacheTimeout/CacheTimeout.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -namespace ReactCountdown { - type CountdownRender = import('react-countdown').CountdownRenderProps; -} - -interface IRenderer extends ReactCountdown.CountdownRender { - text: string; -} - -interface ICountdown { - timeout: number; - text: string; -} diff --git a/hyperglass/ui/components/CacheTimeout/index.ts b/hyperglass/ui/components/CacheTimeout/index.ts deleted file mode 100644 index 958a57d..0000000 --- a/hyperglass/ui/components/CacheTimeout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Countdown'; diff --git a/hyperglass/ui/components/Card/Card.d.ts b/hyperglass/ui/components/Card/Card.d.ts deleted file mode 100644 index 4ce3809..0000000 --- a/hyperglass/ui/components/Card/Card.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -namespace Chakra { - type FlexProps = import('@chakra-ui/core').FlexProps; -} - -interface ICardBody extends Omit { - onClick?: () => boolean; -} - -interface ICardFooter extends Chakra.FlexProps {} - -interface ICardHeader extends Chakra.FlexProps {} diff --git a/hyperglass/ui/components/Card/CardBody.tsx b/hyperglass/ui/components/Card/body.tsx similarity index 85% rename from hyperglass/ui/components/Card/CardBody.tsx rename to hyperglass/ui/components/Card/body.tsx index 4370ca8..6ecc5bc 100644 --- a/hyperglass/ui/components/Card/CardBody.tsx +++ b/hyperglass/ui/components/Card/body.tsx @@ -1,6 +1,8 @@ -import { Flex } from '@chakra-ui/core'; +import { Flex } from '@chakra-ui/react'; import { useColorValue } from '~/context'; +import type { ICardBody } from './types'; + export const CardBody = (props: ICardBody) => { const { onClick, ...rest } = props; const bg = useColorValue('white', 'original.dark'); diff --git a/hyperglass/ui/components/Card/CardFooter.tsx b/hyperglass/ui/components/Card/footer.tsx similarity index 77% rename from hyperglass/ui/components/Card/CardFooter.tsx rename to hyperglass/ui/components/Card/footer.tsx index ab96208..2c90d2e 100644 --- a/hyperglass/ui/components/Card/CardFooter.tsx +++ b/hyperglass/ui/components/Card/footer.tsx @@ -1,4 +1,6 @@ -import { Flex } from '@chakra-ui/core'; +import { Flex } from '@chakra-ui/react'; + +import type { ICardFooter } from './types'; export const CardFooter = (props: ICardFooter) => ( { const { children, ...rest } = props; const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100'); diff --git a/hyperglass/ui/components/Card/index.ts b/hyperglass/ui/components/Card/index.ts index 39dfd07..9f66b54 100644 --- a/hyperglass/ui/components/Card/index.ts +++ b/hyperglass/ui/components/Card/index.ts @@ -1,3 +1,3 @@ -export * from './CardBody'; -export * from './CardFooter'; -export * from './CardHeader'; +export * from './body'; +export * from './footer'; +export * from './header'; diff --git a/hyperglass/ui/components/Card/types.ts b/hyperglass/ui/components/Card/types.ts new file mode 100644 index 0000000..9c962fb --- /dev/null +++ b/hyperglass/ui/components/Card/types.ts @@ -0,0 +1,9 @@ +import type { FlexProps } from '@chakra-ui/react'; + +export interface ICardBody extends Omit { + onClick?: () => boolean; +} + +export interface ICardFooter extends FlexProps {} + +export interface ICardHeader extends FlexProps {} diff --git a/hyperglass/ui/components/CodeBlock.js b/hyperglass/ui/components/CodeBlock.js deleted file mode 100644 index e12e242..0000000 --- a/hyperglass/ui/components/CodeBlock.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { Box, useColorMode } from '@chakra-ui/core'; - -export const CodeBlock = ({ children }) => { - const { colorMode } = useColorMode(); - const bg = { dark: 'gray.800', light: 'blackAlpha.100' }; - const color = { dark: 'white', light: 'black' }; - return ( - - {children} - - ); -}; diff --git a/hyperglass/ui/components/CopyButton.js b/hyperglass/ui/components/CopyButton.js deleted file mode 100644 index acc7466..0000000 --- a/hyperglass/ui/components/CopyButton.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { Button, Icon, Tooltip, useClipboard } from '@chakra-ui/core'; - -export const CopyButton = ({ bg = 'secondary', copyValue, ...props }) => { - const { onCopy, hasCopied } = useClipboard(copyValue); - return ( - - - - ); -}; diff --git a/hyperglass/ui/components/Footer/Footer.d.ts b/hyperglass/ui/components/Footer/Footer.d.ts deleted file mode 100644 index fc27bbd..0000000 --- a/hyperglass/ui/components/Footer/Footer.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -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 { - isOpen: boolean; - content: string; - side: TFooterSide; - children?: undefined; -} - -type TFooterItems = 'help' | 'credit' | 'terms'; diff --git a/hyperglass/ui/components/Footer/FooterContent.tsx b/hyperglass/ui/components/Footer/FooterContent.tsx deleted file mode 100644 index 1fab377..0000000 --- a/hyperglass/ui/components/Footer/FooterContent.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Box, Collapse } from '@chakra-ui/core'; -import { Markdown } from '~/components'; - -export const FooterContent = (props: IFooterContent) => { - const { isOpen = false, content, side = 'left', children: _, ...rest } = props; - return ( - - - - - - ); -}; diff --git a/hyperglass/ui/components/Footer/FooterMain.tsx b/hyperglass/ui/components/Footer/FooterMain.tsx deleted file mode 100644 index f76a68e..0000000 --- a/hyperglass/ui/components/Footer/FooterMain.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { useState } from 'react'; -import { Box, Flex } from '@chakra-ui/core'; -import { FiCode } from '@meronex/icons/fi'; -import { GoLinkExternal } from '@meronex/icons/go'; -import stringFormat from 'string-format'; -import { useConfig, useColorValue } from '~/context'; -import { FooterButton } from './FooterButton'; -import { FooterContent } from './FooterContent'; - -export const Footer = () => { - const config = useConfig(); - const [helpVisible, showHelp] = useState(false); - const [termsVisible, showTerms] = useState(false); - const [creditVisible, showCredit] = useState(false); - - const footerBg = useColorValue('blackAlpha.50', 'whiteAlpha.100'); - const footerColor = useColorValue('black', 'white'); - const contentBorder = useColorValue('blackAlpha.100', 'whiteAlpha.200'); - - const handleCollapse = (i: TFooterItems) => { - if (i === 'help') { - showTerms(false); - showCredit(false); - showHelp(!helpVisible); - } else if (i === 'credit') { - showTerms(false); - showHelp(false); - showCredit(!creditVisible); - } else if (i === 'terms') { - showHelp(false); - showCredit(false); - showTerms(!termsVisible); - } - }; - - const extUrl = config.web.external_link.url.includes('{primary_asn}') - ? stringFormat(config.web.external_link.url, { primary_asn: config.primary_asn }) - : config.web.external_link.url || '/'; - - return ( - <> - {config.web.help_menu.enable && ( - - )} - {config.web.terms.enable && ( - - )} - {config.web.credit.enable && ( - - )} - - {config.web.terms.enable && ( - handleCollapse('terms')} - aria-label={config.web.terms.title}> - {config.web.terms.title} - - )} - {config.web.help_menu.enable && ( - handleCollapse('help')} - aria-label={config.web.help_menu.title}> - {config.web.help_menu.title} - - )} - - {config.web.credit.enable && ( - handleCollapse('credit')} - aria-label="Powered by hyperglass"> - - - )} - {config.web.external_link.enable && ( - } - size="xs"> - {config.web.external_link.title} - - )} - - - ); -}; diff --git a/hyperglass/ui/components/Footer/FooterButton.tsx b/hyperglass/ui/components/Footer/button.tsx similarity index 67% rename from hyperglass/ui/components/Footer/FooterButton.tsx rename to hyperglass/ui/components/Footer/button.tsx index 8d5f687..2dd8d40 100644 --- a/hyperglass/ui/components/Footer/FooterButton.tsx +++ b/hyperglass/ui/components/Footer/button.tsx @@ -1,9 +1,9 @@ -import { Button, Flex, FlexProps } from '@chakra-ui/core'; -import { withAnimation } from '~/components'; +import { Button } from '@chakra-ui/react'; +import { AnimatedDiv } from '~/components'; -const AnimatedFlex = withAnimation(Flex); +import type { TFooterButton } from './types'; -export const FooterButton = (props: IFooterButton) => { +export const FooterButton = (props: TFooterButton) => { const { side, href, ...rest } = props; let buttonProps = Object(); @@ -12,9 +12,10 @@ export const FooterButton = (props: IFooterButton) => { } return ( - { animate={{ opacity: 1 }} transition={{ duration: 0.6 }}> -)); diff --git a/hyperglass/ui/components/Result.js b/hyperglass/ui/components/Result.js deleted file mode 100644 index 3637c89..0000000 --- a/hyperglass/ui/components/Result.js +++ /dev/null @@ -1,262 +0,0 @@ -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import { forwardRef, useEffect, useState } from 'react'; -import { - AccordionItem, - AccordionHeader, - AccordionPanel, - Alert, - Box, - ButtonGroup, - css, - Flex, - Tooltip, - Text, - useColorMode, - useTheme, -} from '@chakra-ui/core'; -import { BsLightningFill } from '@meronex/icons/bs'; -import styled from '@emotion/styled'; -import useAxios from 'axios-hooks'; -import strReplace from 'react-string-replace'; -import format from 'string-format'; -import { startCase } from 'lodash'; -import { useConfig, useMedia } from 'app/context'; -import { - BGPTable, - CacheTimeout, - CopyButton, - RequeryButton, - ResultHeader, - TextOutput, -} from 'app/components'; -import { tableToString } from 'app/util'; - -format.extend(String.prototype, {}); - -const FormattedError = ({ keywords, message }) => { - const patternStr = keywords.map(kw => `(${kw})`).join('|'); - const pattern = new RegExp(patternStr, 'gi'); - let errorFmt; - try { - errorFmt = strReplace(message, pattern, match => ( - - {match} - - )); - } catch (err) { - errorFmt = {message}; - } - return {keywords.length !== 0 ? errorFmt : message}; -}; - -const AccordionHeaderWrapper = styled(Flex)` - justify-content: space-between; - &:hover { - background-color: ${props => props.hoverBg}; - } - &:focus { - box-shadow: 'outline'; - } -`; - -const statusMap = { - success: 'success', - warning: 'warning', - error: 'warning', - danger: 'error', -}; - -const color = { dark: 'white', light: 'black' }; -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 Result = forwardRef( - ( - { - device, - timeout, - queryLocation, - queryType, - queryVrf, - queryTarget, - index, - resultsComplete, - setComplete, - }, - ref, - ) => { - const config = useConfig(); - const theme = useTheme(); - const { isSm } = useMedia(); - const { colorMode } = useColorMode(); - let [{ data, loading, error }, refetch] = useAxios({ - url: '/api/query/', - method: 'post', - data: { - query_location: queryLocation, - query_type: queryType, - query_vrf: queryVrf, - query_target: queryTarget, - }, - timeout: timeout, - useCache: false, - }); - - const [isOpen, setOpen] = useState(false); - const [hasOverride, setOverride] = useState(false); - - const handleToggle = () => { - setOpen(!isOpen); - setOverride(true); - }; - - const errorKw = (error && error.response?.data?.keywords) || []; - - let errorMsg; - if (error && error.response?.data?.output) { - errorMsg = error.response.data.output; - } else if (error && error.message.startsWith('timeout')) { - errorMsg = config.messages.request_timeout; - } else if (error?.response?.statusText) { - errorMsg = startCase(error.response.statusText); - } else if (error && error.message) { - errorMsg = startCase(error.message); - } else { - errorMsg = config.messages.general; - } - - error && console.error(error); - - const errorLevel = - (error?.response?.data?.level && 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); - } - - if (error) { - copyValue = errorMsg; - } - - useEffect(() => { - !loading && resultsComplete === null && setComplete(index); - }, [loading, resultsComplete]); - - useEffect(() => { - resultsComplete === index && !hasOverride && setOpen(true); - }, [resultsComplete, index]); - - return ( - - - - - - - - - - - - - - {!error && data && {data?.output}} - {error && ( - - - - )} - - - - - - {config.cache.show_text && data && !error && ( - <> - {!isSm && ( - - )} - - - - - - {isSm && ( - - )} - - )} - - - - - ); - }, -); diff --git a/hyperglass/ui/components/ResultHeader.js b/hyperglass/ui/components/ResultHeader.js deleted file mode 100644 index 8f9d6a3..0000000 --- a/hyperglass/ui/components/ResultHeader.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import { forwardRef } from 'react'; -import { AccordionIcon, Icon, Spinner, Stack, Text, Tooltip, useColorMode } from '@chakra-ui/core'; -import format from 'string-format'; -import { useConfig } from 'app/context'; - -format.extend(String.prototype, {}); - -const runtimeText = (runtime, text) => { - let unit; - if (runtime === 1) { - unit = 'second'; - } else { - unit = 'seconds'; - } - const fmt = text.format({ seconds: runtime }); - return `${fmt} ${unit}`; -}; - -const statusColor = { dark: 'primary.300', light: 'primary.500' }; -const warningColor = { dark: 300, light: 500 }; -const defaultStatusColor = { - dark: 'success.300', - light: 'success.500', -}; - -export const ResultHeader = forwardRef( - ({ title, loading, error, errorMsg, errorLevel, runtime }, ref) => { - const { colorMode } = useColorMode(); - const config = useConfig(); - return ( - - {loading ? ( - - ) : error ? ( - - - - ) : ( - - - - )} - {title} - - - ); - }, -); diff --git a/hyperglass/ui/components/Results.js b/hyperglass/ui/components/Results.js deleted file mode 100644 index 8586f7b..0000000 --- a/hyperglass/ui/components/Results.js +++ /dev/null @@ -1,157 +0,0 @@ -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, Result } from 'app/components'; -import { useConfig, useMedia } from 'app/context'; - -const AnimatedResult = motion.custom(Result); -const AnimatedLabel = motion.custom(Label); - -const labelInitial = { - left: { - sm: { opacity: 0, x: -100 }, - md: { opacity: 0, x: -100 }, - lg: { opacity: 0, x: -100 }, - xl: { opacity: 0, x: -100 }, - }, - center: { - sm: { opacity: 0 }, - md: { opacity: 0 }, - lg: { opacity: 0 }, - xl: { opacity: 0 }, - }, - right: { - sm: { opacity: 0, x: 100 }, - md: { opacity: 0, x: 100 }, - lg: { opacity: 0, x: 100 }, - xl: { opacity: 0, x: 100 }, - }, -}; -const labelAnimate = { - left: { - sm: { opacity: 1, x: 0 }, - md: { opacity: 1, x: 0 }, - lg: { opacity: 1, x: 0 }, - xl: { opacity: 1, x: 0 }, - }, - center: { - sm: { opacity: 1 }, - md: { opacity: 1 }, - lg: { opacity: 1 }, - xl: { opacity: 1 }, - }, - right: { - sm: { opacity: 1, x: 0 }, - md: { opacity: 1, x: 0 }, - lg: { opacity: 1, x: 0 }, - xl: { opacity: 1, x: 0 }, - }, -}; - -export const Results = ({ - queryLocation, - queryType, - queryVrf, - queryTarget, - setSubmitting, - ...props -}) => { - const config = useConfig(); - const theme = useTheme(); - const { mediaSize } = useMedia(); - const matchedVrf = - config.vrfs.filter(v => v.id === queryVrf)[0] ?? config.vrfs.filter(v => v.id === 'default')[0]; - const [resultsComplete, setComplete] = useState(null); - return ( - <> - - - - {queryLocation && ( - <> - - - - - )} - - - - - - - {queryLocation && - queryLocation.map((loc, i) => ( - - ))} - - - - - ); -}; diff --git a/hyperglass/ui/components/SubmitButton.js b/hyperglass/ui/components/SubmitButton.js deleted file mode 100644 index ccef50a..0000000 --- a/hyperglass/ui/components/SubmitButton.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import { forwardRef } from 'react'; -import { Box, PseudoBox, Spinner, useColorMode, useTheme } from '@chakra-ui/core'; -import { FiSearch } from '@meronex/icons/fi'; -import { opposingColor } from 'app/util'; - -const btnProps = { - display: 'inline-flex', - appearance: 'none', - alignItems: 'center', - justifyContent: 'center', - transition: 'all 250ms', - userSelect: 'none', - position: 'relative', - whiteSpace: 'nowrap', - verticalAlign: 'middle', - lineHeight: '1.2', - outline: 'none', - as: 'button', - type: 'submit', - borderRadius: 'md', - fontWeight: 'semibold', -}; - -const btnSizeMap = { - lg: { - height: 12, - minWidth: 12, - fontSize: 'lg', - px: 6, - }, - md: { - height: 10, - minWidth: 10, - fontSize: 'md', - px: 4, - }, - sm: { - height: 8, - minWidth: 8, - fontSize: 'sm', - px: 3, - }, - xs: { - height: 6, - minWidth: 6, - fontSize: 'xs', - px: 2, - }, -}; - -const btnBg = { dark: 'primary.300', light: 'primary.500' }; -const btnBgActive = { dark: 'primary.400', light: 'primary.600' }; -const btnBgHover = { dark: 'primary.200', light: 'primary.400' }; - -export const SubmitButton = forwardRef( - ( - { - isLoading = false, - isDisabled = false, - isActive = false, - isFullWidth = false, - size = 'lg', - loadingText, - children, - ...props - }, - ref, - ) => { - const _isDisabled = isDisabled || isLoading; - const { colorMode } = useColorMode(); - const theme = useTheme(); - const btnColor = opposingColor(theme, btnBg[colorMode]); - const btnColorActive = opposingColor(theme, btnBgActive[colorMode]); - const btnColorHover = opposingColor(theme, btnBgHover[colorMode]); - const btnSize = btnSizeMap[size]; - return ( - - {isLoading ? ( - - ) : ( - - )} - {isLoading - ? loadingText || ( - - {children} - - ) - : children} - - ); - }, -); diff --git a/hyperglass/ui/components/Table/Table.tsx b/hyperglass/ui/components/Table/Table.tsx index 1f85543..27ca08e 100644 --- a/hyperglass/ui/components/Table/Table.tsx +++ b/hyperglass/ui/components/Table/Table.tsx @@ -1,182 +1,34 @@ -import { Flex, Icon, Text } from '@chakra-ui/core'; -import { usePagination, useSortBy, useTable } from 'react-table'; -import { useMedia } from '~/context'; -import { CardBody, CardFooter, CardHeader, If } from '~/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'; +import { Box } from '@chakra-ui/react'; +import { useColorValue } from '~/context'; -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 = { - minWidth: 100, - width: 150, - maxWidth: 300, - }; - - let hiddenColumns = [] as string[]; - - for (const col of columns) { - if (col.hidden) { - hiddenColumns.push(col.accessor); - } - } - - const table = useTable( - { - columns, - defaultColumn, - data, - initialState: { hiddenColumns }, - }, - useSortBy, - usePagination, - ); - - const { - getTableProps, - headerGroups, - prepareRow, - page, - canPreviousPage, - canNextPage, - pageOptions, - pageCount, - gotoPage, - nextPage, - previousPage, - setPageSize, - state: { pageIndex, pageSize }, - } = table; +import type { BoxProps } from '@chakra-ui/react'; +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 ( - - {heading && {heading}} - - - {headerGroups.map((headerGroup, i) => ( - - {headerGroup.headers.map(column => ( - - - {column.render('Header')} - - - - - - - - - - {''} - - ))} - - ))} - - - {page.map( - (row, key) => - prepareRow(row) || ( - onRowClick && onRowClick(row)} - key={key} - highlight={row.values[rowHighlightProp ?? ''] ?? false} - highlightBg={rowHighlightBg} - highlightColor={rowHighlightColor} - {...row.getRowProps()}> - {row.cells.map((cell, i) => { - return ( - - {cell.render(cellRender ?? 'Cell')} - - ); - })} - - ), - )} - - - - - gotoPage(0)} - isDisabled={!canPreviousPage} - icon={() => } - /> - previousPage()} - isDisabled={!canPreviousPage} - icon={() => } - /> - - - - Page{' '} - - {pageIndex + 1} of {pageOptions.length} - {' '} - - {!(isSm || isMd) && ( - { - setPageSize(Number(e.target.value)); - }} - /> - )} - - - nextPage()} - icon={() => } - /> - gotoPage(pageCount ? pageCount - 1 : 1)} - isDisabled={!canNextPage} - icon={() => } - /> - - - + ); }; diff --git a/hyperglass/ui/components/Table/TableIconButton.tsx b/hyperglass/ui/components/Table/TableIconButton.tsx deleted file mode 100644 index d3a4653..0000000 --- a/hyperglass/ui/components/Table/TableIconButton.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { IconButton } from '@chakra-ui/core'; - -import type { IconButtonProps } from '@chakra-ui/core'; - -export const TableIconButton = (props: IconButtonProps) => ( - -); diff --git a/hyperglass/ui/components/Table/TableMain.tsx b/hyperglass/ui/components/Table/TableMain.tsx deleted file mode 100644 index e5f3482..0000000 --- a/hyperglass/ui/components/Table/TableMain.tsx +++ /dev/null @@ -1,34 +0,0 @@ -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 ( - - ); -}; diff --git a/hyperglass/ui/components/Table/TableBody.tsx b/hyperglass/ui/components/Table/body.tsx similarity index 73% rename from hyperglass/ui/components/Table/TableBody.tsx rename to hyperglass/ui/components/Table/body.tsx index 34c2965..f90e06d 100644 --- a/hyperglass/ui/components/Table/TableBody.tsx +++ b/hyperglass/ui/components/Table/body.tsx @@ -1,5 +1,6 @@ -import { Box } from '@chakra-ui/core'; -import type { BoxProps } from '@chakra-ui/core'; +import { Box } from '@chakra-ui/react'; + +import type { BoxProps } from '@chakra-ui/react'; export const TableBody = (props: BoxProps) => ( ( + +); diff --git a/hyperglass/ui/components/Table/TableCell.tsx b/hyperglass/ui/components/Table/cell.tsx similarity index 70% rename from hyperglass/ui/components/Table/TableCell.tsx rename to hyperglass/ui/components/Table/cell.tsx index 996c27b..27e68e9 100644 --- a/hyperglass/ui/components/Table/TableCell.tsx +++ b/hyperglass/ui/components/Table/cell.tsx @@ -1,10 +1,10 @@ -import { Box } from '@chakra-ui/core'; +import { Box } from '@chakra-ui/react'; import { useColorValue } from '~/context'; -import type { ITableCell } from './types'; +import type { TTableCell } from './types'; -export const TableCell = (props: ITableCell) => { - const { bordersVertical = [false, 0, 0], align, ...rest } = props; +export const TableCell = (props: TTableCell) => { + const { bordersVertical = [false, 0], align, ...rest } = props; const [doVerticalBorders, index] = bordersVertical; const borderLeftColor = useColorValue('blackAlpha.100', 'whiteAlpha.100'); diff --git a/hyperglass/ui/components/Table/TableHead.tsx b/hyperglass/ui/components/Table/head.tsx similarity index 73% rename from hyperglass/ui/components/Table/TableHead.tsx rename to hyperglass/ui/components/Table/head.tsx index 56a36a8..adee3a8 100644 --- a/hyperglass/ui/components/Table/TableHead.tsx +++ b/hyperglass/ui/components/Table/head.tsx @@ -1,7 +1,7 @@ -import { Box } from '@chakra-ui/core'; +import { Box } from '@chakra-ui/react'; import { useColorValue } from '~/context'; -import type { BoxProps } from '@chakra-ui/core'; +import type { BoxProps } from '@chakra-ui/react'; export const TableHead = (props: BoxProps) => { const bg = useColorValue('blackAlpha.100', 'whiteAlpha.100'); diff --git a/hyperglass/ui/components/Table/index.ts b/hyperglass/ui/components/Table/index.ts index 1383bd0..7285324 100644 --- a/hyperglass/ui/components/Table/index.ts +++ b/hyperglass/ui/components/Table/index.ts @@ -1,8 +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'; +export * from './body'; +export * from './button'; +export * from './cell'; +export * from './head'; +export * from './main'; +export * from './main'; +export * from './pageSelect'; +export * from './row'; diff --git a/hyperglass/ui/components/Table/main.tsx b/hyperglass/ui/components/Table/main.tsx new file mode 100644 index 0000000..6613f7e --- /dev/null +++ b/hyperglass/ui/components/Table/main.tsx @@ -0,0 +1,191 @@ +import dynamic from 'next/dynamic'; +import { Flex, Icon, Text } from '@chakra-ui/react'; +import { usePagination, useSortBy, useTable } from 'react-table'; +import { useMobile } from '~/context'; +import { CardBody, CardFooter, CardHeader, If } from '~/components'; +import { TableMain } from './table'; +import { TableCell } from './cell'; +import { TableHead } from './head'; +import { TableRow } from './row'; +import { TableBody } from './body'; +import { TableIconButton } from './button'; +import { TableSelectShow } from './pageSelect'; + +import type { TableOptions, PluginHook, Row } from 'react-table'; +import type { TTable } from './types'; + +const ChevronUp = dynamic(() => import('@meronex/icons/fa').then(i => i.FaChevronUp)); + +const ChevronDown = dynamic(() => + import('@meronex/icons/fa').then(i => i.FaChevronDown), +); + +const DoubleChevronRight = dynamic(() => + import('@meronex/icons/fi').then(i => i.FiChevronsRight), +); +const DoubleChevronLeft = dynamic(() => + import('@meronex/icons/fi').then(i => i.FiChevronsLeft), +); + +export function Table(props: TTable) { + const { + data, + columns, + heading, + cellRender, + rowHighlightBg, + striped = false, + rowHighlightProp, + bordersVertical = false, + bordersHorizontal = false, + } = props; + + const isMobile = useMobile(); + + const defaultColumn = { + minWidth: 100, + width: 150, + maxWidth: 300, + }; + + let hiddenColumns = [] as string[]; + + for (const col of columns) { + if (col.hidden) { + hiddenColumns.push(col.accessor); + } + } + + const options = { + columns, + defaultColumn, + data, + initialState: { hiddenColumns }, + } as TableOptions; + + const plugins = [useSortBy, usePagination] as PluginHook[]; + + const instance = useTable(options, ...plugins); + + const { + getTableProps, + headerGroups, + prepareRow, + page, + canPreviousPage, + canNextPage, + pageOptions, + pageCount, + gotoPage, + nextPage, + previousPage, + setPageSize, + state: { pageIndex, pageSize }, + } = instance; + + return ( + + {heading && {heading}} + + + {headerGroups.map((headerGroup, i) => ( + + {headerGroup.headers.map(column => ( + + + {column.render('Header')} + + + + + + + + + + {''} + + ))} + + ))} + + + {page.map((row, key) => { + prepareRow(row); + + return ( + + {row.cells.map((cell, i) => { + return ( + + {cellRender ?? cell.render('Cell')} + + ); + })} + + ); + })} + + + + + gotoPage(0)} + isDisabled={!canPreviousPage} + icon={} + /> + previousPage()} + isDisabled={!canPreviousPage} + icon={} + /> + + + + Page{' '} + + {pageIndex + 1} of {pageOptions.length} + {' '} + + {!isMobile && ( + { + setPageSize(Number(e.target.value)); + }} + /> + )} + + + } + /> + } + onClick={() => gotoPage(pageCount ? pageCount - 1 : 1)} + /> + + + + ); +} diff --git a/hyperglass/ui/components/Table/TableSelectShow.tsx b/hyperglass/ui/components/Table/pageSelect.tsx similarity index 76% rename from hyperglass/ui/components/Table/TableSelectShow.tsx rename to hyperglass/ui/components/Table/pageSelect.tsx index 22d5706..f58f157 100644 --- a/hyperglass/ui/components/Table/TableSelectShow.tsx +++ b/hyperglass/ui/components/Table/pageSelect.tsx @@ -1,5 +1,5 @@ -import { Select } from '@chakra-ui/core'; -import { SelectProps } from '@chakra-ui/core'; +import { Select } from '@chakra-ui/react'; +import { SelectProps } from '@chakra-ui/react'; export const TableSelectShow = (props: SelectProps) => { const { value, ...rest } = props; diff --git a/hyperglass/ui/components/Table/TableRow.tsx b/hyperglass/ui/components/Table/row.tsx similarity index 87% rename from hyperglass/ui/components/Table/TableRow.tsx rename to hyperglass/ui/components/Table/row.tsx index 20721be..9ce7fa7 100644 --- a/hyperglass/ui/components/Table/TableRow.tsx +++ b/hyperglass/ui/components/Table/row.tsx @@ -1,19 +1,18 @@ -import { Box, useColorMode } from '@chakra-ui/core'; +import { Box } from '@chakra-ui/react'; import { useColorValue } from '~/context'; import { useOpposingColor } from '~/hooks'; -import type { ITableRow } from './types'; +import type { TTableRow } from './types'; -export const TableRow = (props: ITableRow) => { +export const TableRow = (props: TTableRow) => { const { + index = 0, + doStripe = false, 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'); diff --git a/hyperglass/ui/components/Table/types.ts b/hyperglass/ui/components/Table/types.ts index 38b047e..e98d60d 100644 --- a/hyperglass/ui/components/Table/types.ts +++ b/hyperglass/ui/components/Table/types.ts @@ -1,36 +1,30 @@ -import type { BoxProps } from '@chakra-ui/core'; -import type { Colors } from '~/types'; +import type { BoxProps, IconButtonProps } from '@chakra-ui/react'; -export interface IColumn { - Header: string; - accessor: string; - align: 'left' | 'right' | null; - hidden: boolean; -} +import type { Colors, TColumn } from '~/types'; -export interface ITable { - columns: IColumn[]; - data: IRoute[]; - heading?: ReactNode; - onRowClick?: (row: IRoute) => void; +export interface TTable { + columns: TColumn[]; + data: TRoute[]; + heading?: React.ReactNode; striped?: boolean; bordersVertical?: boolean; bordersHorizontal?: boolean; - cellRender?: ReactFC; + cellRender?: React.ReactNode; rowHighlightProp?: keyof IRoute; rowHighlightBg?: keyof Colors; - rowHighlightColor?: string; } -export interface ITableCell extends BoxProps { - bordersVertical: [boolean, number, number]; - align: BoxProps['textAlign']; +export interface TTableCell extends Omit { + bordersVertical?: [boolean, number]; + align?: 'left' | 'right' | 'center'; } -export interface ITableRow extends BoxProps { +export interface TTableRow extends BoxProps { highlight?: boolean; highlightBg?: keyof Colors; doStripe?: boolean; doHorizontalBorders?: boolean; index: number; } + +export type TTableIconButton = Omit; diff --git a/hyperglass/ui/components/TextOutput.js b/hyperglass/ui/components/TextOutput.js deleted file mode 100644 index 43a1ba4..0000000 --- a/hyperglass/ui/components/TextOutput.js +++ /dev/null @@ -1,40 +0,0 @@ -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import { Box, css, useColorMode } from '@chakra-ui/core'; - -const bg = { dark: 'gray.800', light: 'blackAlpha.100' }; -const color = { dark: 'white', light: 'black' }; -const selectionBg = { dark: 'white', light: 'black' }; -const selectionColor = { dark: 'black', light: 'white' }; - -export const TextOutput = ({ children, ...props }) => { - const { colorMode } = useColorMode(); - - return ( - - {children - .split('\\n') - .join('\n') - .replace(/\n\n/g, '\n')} - - ); -}; diff --git a/hyperglass/ui/components/Util/If.tsx b/hyperglass/ui/components/Util/If.tsx index 612445f..9825a83 100644 --- a/hyperglass/ui/components/Util/If.tsx +++ b/hyperglass/ui/components/Util/If.tsx @@ -1,4 +1,6 @@ -export const If = (props: IIf) => { - const { condition, render, children, ...rest } = props; - return condition ? (render ? render(rest) : children) : null; +import type { TIf } from './types'; + +export const If = (props: TIf) => { + const { c, render, children, ...rest } = props; + return c ? (render ? render(rest) : children) : null; }; diff --git a/hyperglass/ui/components/Util/index.ts b/hyperglass/ui/components/Util/index.ts index ded0985..4c0abb0 100644 --- a/hyperglass/ui/components/Util/index.ts +++ b/hyperglass/ui/components/Util/index.ts @@ -1 +1 @@ -export * from './If'; +export * from './if'; diff --git a/hyperglass/ui/components/Util/Util.d.ts b/hyperglass/ui/components/Util/types.ts similarity index 61% rename from hyperglass/ui/components/Util/Util.d.ts rename to hyperglass/ui/components/Util/types.ts index 8ec3414..dfa0b58 100644 --- a/hyperglass/ui/components/Util/Util.d.ts +++ b/hyperglass/ui/components/Util/types.ts @@ -1,5 +1,5 @@ -interface IIf { - condition: boolean; +export interface TIf { + c: boolean; render?: (rest: any) => JSX.Element; [k: string]: any; } diff --git a/hyperglass/ui/components/animated.ts b/hyperglass/ui/components/animated.ts new file mode 100644 index 0000000..8c4b41a --- /dev/null +++ b/hyperglass/ui/components/animated.ts @@ -0,0 +1,4 @@ +import { chakra } from '@chakra-ui/react'; +import { motion } from 'framer-motion'; + +export const AnimatedDiv = chakra(motion.div); diff --git a/hyperglass/ui/components/bgpTable/cell.tsx b/hyperglass/ui/components/bgpTable/cell.tsx new file mode 100644 index 0000000..db14c96 --- /dev/null +++ b/hyperglass/ui/components/bgpTable/cell.tsx @@ -0,0 +1,24 @@ +import { MonoField, Active, Weight, Age, Communities, RPKIState, ASPath } from './fields'; + +import type { TCell } from './types'; + +export const Cell = (props: TCell) => { + const { data, rawData } = props; + const cellId = data.column.id as keyof TRoute; + const component = { + med: , + age: , + prefix: , + next_hop: , + peer_rid: , + source_as: , + active: , + source_rid: , + local_preference: , + communities: , + as_path: , + rpki_state: , + weight: , + }; + return component[cellId] ?? <> ; +}; diff --git a/hyperglass/ui/components/bgpTable/fields.tsx b/hyperglass/ui/components/bgpTable/fields.tsx new file mode 100644 index 0000000..8667056 --- /dev/null +++ b/hyperglass/ui/components/bgpTable/fields.tsx @@ -0,0 +1,179 @@ +import dynamic from 'next/dynamic'; +import { + Icon, + Text, + Popover, + Tooltip, + PopoverArrow, + PopoverContent, + PopoverTrigger, +} from '@chakra-ui/react'; +import { MdLastPage } from '@meronex/icons/md'; +import dayjs from 'dayjs'; +import relativeTimePlugin from 'dayjs/plugin/relativeTime'; +import utcPlugin from 'dayjs/plugin/utc'; +import { useConfig, useColorValue } from '~/context'; +import { If } from '~/components'; + +import type { + TAge, + TActive, + TWeight, + TASPath, + TMonoField, + TRPKIState, + TCommunities, +} from './types'; + +dayjs.extend(relativeTimePlugin); +dayjs.extend(utcPlugin); + +const Check = dynamic(() => import('@meronex/icons/fa').then(i => i.FaCheckCircle)); +const More = dynamic(() => import('@meronex/icons/cg').then(i => i.CgMoreO)); +const NotAllowed = dynamic(() => + import('@meronex/icons/md').then(i => i.MdNotInterested), +); +const Question = dynamic(() => + import('@meronex/icons/bs').then(i => i.BsQuestionCircleFill), +); +const Warning = dynamic(() => import('@meronex/icons/bi').then(i => i.BisError)); +const ChevronRight = dynamic(() => + import('@meronex/icons/fa').then(i => i.FaChevronRight), +); + +export const MonoField = (props: TMonoField) => { + const { v, ...rest } = props; + return ( + + {v} + + ); +}; + +export const Active = (props: TActive) => { + const { isActive } = props; + const color = useColorValue(['gray.500', 'green.500'], ['whiteAlpha.300', 'blackAlpha.500']); + return ( + <> + + + + + + + + ); +}; + +export const Age = (props: TAge) => { + const { inSeconds, ...rest } = props; + const now = dayjs.utc(); + const then = now.subtract(inSeconds, 'second'); + return ( + + + {now.to(then, true)} + + + ); +}; + +export const Weight = (props: TWeight) => { + const { weight, winningWeight, ...rest } = props; + const fixMeText = + winningWeight === 'low' ? 'Lower Weight is Preferred' : 'Higher Weight is Preferred'; + return ( + + + {weight} + + + ); +}; + +export const ASPath = (props: TASPath) => { + const { path, active } = props; + const color = useColorValue( + ['blackAlpha.500', 'blackAlpha.500'], + ['blackAlpha.500', 'whiteAlpha.300'], + ); + + if (path.length === 0) { + return ; + } + + let paths = [] as JSX.Element[]; + + path.map((asn, i) => { + const asnStr = String(asn); + i !== 0 && paths.push(); + paths.push( + + {asnStr} + , + ); + }); + + return <>{paths}; +}; + +export const Communities = (props: TCommunities) => { + const { communities } = props; + const color = useColorValue('black', 'white'); + return ( + <> + + + + + + + + + + + + + {communities.join('\n')} + + + + + ); +}; + +export const RPKIState = (props: TRPKIState) => { + const { state, active } = props; + const { web } = useConfig(); + const color = useColorValue( + [ + ['red.400', 'green.500', 'yellow.400', 'gray.500'], + ['red.500', 'green.500', 'yellow.500', 'gray.600'], + ], + [ + ['red.300', 'green.300', 'yellow.300', 'gray.300'], + ['red.500', 'green.600', 'yellow.500', 'gray.800'], + ], + ); + const icon = [NotAllowed, Check, Warning, Question]; + + const text = [ + web.text.rpki_invalid, + web.text.rpki_valid, + web.text.rpki_unknown, + web.text.rpki_unverified, + ]; + + return ( + + + + ); +}; diff --git a/hyperglass/ui/components/bgpTable/index.ts b/hyperglass/ui/components/bgpTable/index.ts new file mode 100644 index 0000000..01643f0 --- /dev/null +++ b/hyperglass/ui/components/bgpTable/index.ts @@ -0,0 +1 @@ +export * from './table'; diff --git a/hyperglass/ui/components/bgpTable/table.tsx b/hyperglass/ui/components/bgpTable/table.tsx new file mode 100644 index 0000000..f062a05 --- /dev/null +++ b/hyperglass/ui/components/bgpTable/table.tsx @@ -0,0 +1,46 @@ +import { Flex } from '@chakra-ui/react'; +import { useConfig } from '~/context'; +import { Table } from '~/components'; +import { Cell } from './cell'; + +import type { CellProps } from 'react-table'; +import type { TColumn, TParsedDataField } from '~/types'; +import type { TBGPTable } from './types'; + +function makeColumns(fields: TParsedDataField[]): TColumn[] { + return fields.map(pair => { + const [header, accessor, align] = pair; + + let columnConfig = { + align, + accessor, + hidden: false, + Header: header, + } as TColumn; + + if (align === null) { + columnConfig.hidden = true; + } + + return columnConfig; + }); +} + +export const BGPTable = (props: TBGPTable) => { + const { children: data, ...rest } = props; + const { parsed_data_fields } = useConfig(); + const columns = makeColumns(parsed_data_fields); + + return ( + +
) => } + bordersHorizontal + rowHighlightBg="green" + /> + + ); +}; diff --git a/hyperglass/ui/components/bgpTable/types.ts b/hyperglass/ui/components/bgpTable/types.ts new file mode 100644 index 0000000..be1f3bd --- /dev/null +++ b/hyperglass/ui/components/bgpTable/types.ts @@ -0,0 +1,42 @@ +import type { FlexProps, TextProps } from '@chakra-ui/react'; +import type { CellProps } from 'react-table'; + +export interface TActive { + isActive: boolean; +} + +export interface TMonoField extends TextProps { + v: React.ReactNode; +} + +export interface TAge extends TextProps { + inSeconds: number; +} + +export interface TWeight extends TextProps { + weight: number; + winningWeight: 'low' | 'high'; +} + +export interface TASPath { + path: number[]; + active: boolean; +} + +export interface TCommunities { + communities: string[]; +} + +export interface TRPKIState { + state: 0 | 1 | 2 | 3; + active: boolean; +} + +export interface TCell { + data: CellProps; + rawData: TStructuredResponse; +} + +export interface TBGPTable extends Omit { + children: TStructuredResponse; +} diff --git a/hyperglass/ui/components/codeBlock.tsx b/hyperglass/ui/components/codeBlock.tsx new file mode 100644 index 0000000..c95448a --- /dev/null +++ b/hyperglass/ui/components/codeBlock.tsx @@ -0,0 +1,25 @@ +import { Box } from '@chakra-ui/react'; +import { useColorValue } from '~/context'; + +import type { BoxProps } from '@chakra-ui/react'; + +export const CodeBlock = (props: BoxProps) => { + const bg = useColorValue('blackAlpha.100', 'gray.800'); + const color = useColorValue('black', 'white'); + return ( + + ); +}; diff --git a/hyperglass/ui/components/copyButton/copyButton.tsx b/hyperglass/ui/components/copyButton/copyButton.tsx new file mode 100644 index 0000000..aab49ff --- /dev/null +++ b/hyperglass/ui/components/copyButton/copyButton.tsx @@ -0,0 +1,33 @@ +import dynamic from 'next/dynamic'; +import { Button, Icon, Tooltip, useClipboard } from '@chakra-ui/react'; +import { If } from '~/components'; + +const Copy = dynamic(() => import('@meronex/icons/fi').then(i => i.FiCopy)); +const Check = dynamic(() => import('@meronex/icons/fi').then(i => i.FiCheck)); + +import type { TCopyButton } from './types'; + +export const CopyButton = (props: TCopyButton) => { + const { copyValue, ...rest } = props; + const { onCopy, hasCopied } = useClipboard(copyValue); + return ( + + + + ); +}; diff --git a/hyperglass/ui/components/copyButton/index.ts b/hyperglass/ui/components/copyButton/index.ts new file mode 100644 index 0000000..8fbb18e --- /dev/null +++ b/hyperglass/ui/components/copyButton/index.ts @@ -0,0 +1 @@ +export * from './copyButton'; diff --git a/hyperglass/ui/components/copyButton/types.ts b/hyperglass/ui/components/copyButton/types.ts new file mode 100644 index 0000000..48d4b2f --- /dev/null +++ b/hyperglass/ui/components/copyButton/types.ts @@ -0,0 +1,5 @@ +import type { ButtonProps } from '@chakra-ui/react'; + +export interface TCopyButton extends ButtonProps { + copyValue: string; +} diff --git a/hyperglass/ui/components/CacheTimeout/Countdown.tsx b/hyperglass/ui/components/countdown/countdown.tsx similarity index 95% rename from hyperglass/ui/components/CacheTimeout/Countdown.tsx rename to hyperglass/ui/components/countdown/countdown.tsx index c4efb31..a12e77f 100644 --- a/hyperglass/ui/components/CacheTimeout/Countdown.tsx +++ b/hyperglass/ui/components/countdown/countdown.tsx @@ -3,6 +3,8 @@ import ReactCountdown, { zeroPad } from 'react-countdown'; import { If } from '~/components'; import { useColorValue } from '~/context'; +import type { ICountdown, IRenderer } from './types'; + const Renderer = (props: IRenderer) => { const { hours, minutes, seconds, completed, text } = props; let time = [zeroPad(seconds)]; diff --git a/hyperglass/ui/components/countdown/index.ts b/hyperglass/ui/components/countdown/index.ts new file mode 100644 index 0000000..c1ddcb5 --- /dev/null +++ b/hyperglass/ui/components/countdown/index.ts @@ -0,0 +1 @@ +export * from './countdown'; diff --git a/hyperglass/ui/components/countdown/types.ts b/hyperglass/ui/components/countdown/types.ts new file mode 100644 index 0000000..7828699 --- /dev/null +++ b/hyperglass/ui/components/countdown/types.ts @@ -0,0 +1,10 @@ +import type { CountdownRenderProps } from 'react-countdown'; + +export interface IRenderer extends CountdownRenderProps { + text: string; +} + +export interface ICountdown { + timeout: number; + text: string; +} diff --git a/hyperglass/ui/components/header/header.tsx b/hyperglass/ui/components/header/header.tsx new file mode 100644 index 0000000..9c5aa0f --- /dev/null +++ b/hyperglass/ui/components/header/header.tsx @@ -0,0 +1,165 @@ +import { Flex } from '@chakra-ui/react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { useColorValue, useConfig, useGlobalState, useBreakpointValue } from '~/context'; +import { AnimatedDiv, Title, ResetButton, ColorModeToggle } from '~/components'; +import { useBooleanValue } from '~/hooks'; + +import type { ResponsiveValue } from '@chakra-ui/react'; +import type { THeader, TTitleMode } from './types'; + +const headerTransition = { + type: 'spring', + ease: 'anticipate', + damping: 15, + stiffness: 100, +}; + +function getWidth(mode: TTitleMode): ResponsiveValue { + let width = '100%' as ResponsiveValue; + + switch (mode) { + case 'text_only': + width = '100%'; + break; + case 'logo_only': + width = { base: '90%', lg: '50%' }; + break; + case 'logo_subtitle': + width = { base: '90%', lg: '50%' }; + break; + case 'all': + width = { base: '90%', lg: '50%' }; + break; + } + return width; +} + +export const Header = (props: THeader) => { + const { resetForm, ...rest } = props; + const bg = useColorValue('white', 'black'); + + const { web } = useConfig(); + const { isSubmitting } = useGlobalState(); + + const mlResetButton = useBooleanValue(isSubmitting.value, { base: 0, md: 2 }, undefined); + const titleHeight = useBooleanValue(isSubmitting.value, undefined, { md: '20vh' }); + + const titleVariant = useBreakpointValue({ + base: { + fullSize: { scale: 1, marginLeft: 0 }, + smallLogo: { marginLeft: 'auto' }, + smallText: { marginLeft: 'auto' }, + }, + md: { + fullSize: { scale: 1 }, + smallLogo: { scale: 0.5 }, + smallText: { scale: 0.8 }, + }, + lg: { + fullSize: { scale: 1 }, + smallLogo: { scale: 0.5 }, + smallText: { scale: 0.8 }, + }, + xl: { + fullSize: { scale: 1 }, + smallLogo: { scale: 0.5 }, + smallText: { scale: 0.8 }, + }, + }); + + const titleJustify = useBooleanValue( + isSubmitting.value, + { base: 'flex-end', md: 'center' }, + { base: 'flex-start', md: 'center' }, + ); + const resetButton = ( + + + + + + + + ); + const title = ( + + + </AnimatedDiv> + ); + const colorModeToggle = ( + <AnimatedDiv + layoutTransition={headerTransition} + key="colorModeToggle" + alignItems="center" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + mb={[null, 'auto']} + mr={isSubmitting ? undefined : 2}> + <ColorModeToggle /> + </AnimatedDiv> + ); + + const layout = useBooleanValue( + isSubmitting.value, + { + sm: [resetButton, colorModeToggle, title], + md: [resetButton, title, colorModeToggle], + lg: [resetButton, title, colorModeToggle], + xl: [resetButton, title, colorModeToggle], + }, + { + sm: [title, resetButton, colorModeToggle], + md: [resetButton, title, colorModeToggle], + lg: [resetButton, title, colorModeToggle], + xl: [resetButton, title, colorModeToggle], + }, + ); + + return ( + <Flex + px={2} + zIndex="4" + as="header" + width="full" + flex="0 1 auto" + bg={bg} + color="gray.500" + {...rest}> + <Flex + w="100%" + mx="auto" + pt={6} + justify="space-between" + flex="1 0 auto" + alignItems={isSubmitting ? 'center' : 'flex-start'}> + {layout} + </Flex> + </Flex> + ); +}; diff --git a/hyperglass/ui/components/header/index.ts b/hyperglass/ui/components/header/index.ts new file mode 100644 index 0000000..677ca79 --- /dev/null +++ b/hyperglass/ui/components/header/index.ts @@ -0,0 +1 @@ +export * from './header'; diff --git a/hyperglass/ui/components/header/types.ts b/hyperglass/ui/components/header/types.ts new file mode 100644 index 0000000..b43a93f --- /dev/null +++ b/hyperglass/ui/components/header/types.ts @@ -0,0 +1,9 @@ +import { FlexProps } from '@chakra-ui/react'; + +import { IConfig } from '~/types'; + +export interface THeader extends FlexProps { + resetForm(): void; +} + +export type TTitleMode = IConfig['web']['text']['title_mode']; diff --git a/hyperglass/ui/components/index.ts b/hyperglass/ui/components/index.ts index cbba7ff..f11c7d3 100644 --- a/hyperglass/ui/components/index.ts +++ b/hyperglass/ui/components/index.ts @@ -1,37 +1,35 @@ -export * from './BGPTable'; -export * from './CacheTimeout'; -export * from './Card'; +export * from './animated'; +export * from './bgpTable'; +export * from './card'; export * from './ChakraSelect'; -export * from './CodeBlock'; +export * from './codeBlock'; export * from './ColorModeToggle'; export * from './CommunitySelect'; -export * from './CopyButton'; +export * from './copyButton'; +export * from './countdown'; export * from './Debugger'; -export * from './Footer'; +export * from './footer'; export * from './FormField'; export * from './Greeting'; -export * from './Header'; +export * from './header'; export * from './HelpModal'; export * from './HyperglassForm'; -export * from './Label'; +export * from './label'; export * from './Layout'; -export * from './Loading'; +export * from './loading'; export * from './LookingGlass'; -export * from './Markdown'; -export * from './Meta'; +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 './resetButton'; export * from './ResolvedTarget'; -export * from './Result'; -export * from './ResultHeader'; -export * from './Results'; -export * from './SubmitButton'; -export * from './Table'; -export * from './TextOutput'; +export * from './results'; +export * from './submitButton'; +export * from './table'; +export * from './textOutput'; export * from './Title'; -export * from './Util'; -export * from './withAnimation'; +export * from './util'; diff --git a/hyperglass/ui/components/label/index.ts b/hyperglass/ui/components/label/index.ts new file mode 100644 index 0000000..301fbde --- /dev/null +++ b/hyperglass/ui/components/label/index.ts @@ -0,0 +1 @@ +export * from './label'; diff --git a/hyperglass/ui/components/label/label.tsx b/hyperglass/ui/components/label/label.tsx new file mode 100644 index 0000000..a562b6a --- /dev/null +++ b/hyperglass/ui/components/label/label.tsx @@ -0,0 +1,61 @@ +import { forwardRef } from 'react'; +import { Flex } from '@chakra-ui/react'; +import { useColorValue } from '~/context'; +import { useOpposingColor } from '~/hooks'; + +import type { TLabel } from './types'; + +export const Label = forwardRef<HTMLDivElement, TLabel>((props, ref) => { + const { value, label, labelColor, bg = 'primary.600', valueColor, ...rest } = props; + + const valueColorAuto = useOpposingColor(bg); + const defaultLabelColor = useColorValue('blackAlpha.700', 'whiteAlpha.700'); + + return ( + <Flex + my={2} + ref={ref} + flexWrap="nowrap" + alignItems="center" + mx={{ base: 1, md: 2 }} + justifyContent="flex-start" + {...rest}> + <Flex + mb={2} + mr={0} + bg={bg} + lineHeight="1.5" + fontWeight="bold" + whiteSpace="nowrap" + display="inline-flex" + px={{ base: 1, md: 3 }} + justifyContent="center" + borderTopLeftRadius={4} + borderTopRightRadius={0} + borderBottomLeftRadius={4} + borderBottomRightRadius={0} + fontSize={{ base: 'xs', md: 'sm' }} + color={valueColor ?? valueColorAuto}> + {value} + </Flex> + <Flex + px={3} + mb={2} + ml={0} + mr={0} + lineHeight="1.5" + whiteSpace="nowrap" + display="inline-flex" + justifyContent="center" + borderTopLeftRadius={0} + borderTopRightRadius={4} + borderBottomLeftRadius={0} + borderBottomRightRadius={4} + fontSize={{ base: 'xs', md: 'sm' }} + color={labelColor ?? defaultLabelColor} + boxShadow={`inset 0px 0px 0px 1px ${bg}`}> + {label} + </Flex> + </Flex> + ); +}); diff --git a/hyperglass/ui/components/label/types.ts b/hyperglass/ui/components/label/types.ts new file mode 100644 index 0000000..2069c4c --- /dev/null +++ b/hyperglass/ui/components/label/types.ts @@ -0,0 +1,9 @@ +import { FlexProps } from '@chakra-ui/react'; + +export interface TLabel extends FlexProps { + value: string; + label: string; + bg: string; + valueColor?: string; + labelColor?: string; +} diff --git a/hyperglass/ui/components/loading.tsx b/hyperglass/ui/components/loading.tsx new file mode 100644 index 0000000..096fe96 --- /dev/null +++ b/hyperglass/ui/components/loading.tsx @@ -0,0 +1,26 @@ +import { Flex, Spinner } from '@chakra-ui/react'; +import { useColorValue } from '~/context'; + +export const Loading: React.FC = () => { + const bg = useColorValue('white', 'black'); + const color = useColorValue('black', 'white'); + return ( + <Flex flexDirection="column" minHeight="100vh" w="100%" bg={bg} color={color}> + <Flex + px={2} + py={0} + w="100%" + as="main" + flexGrow={1} + flexShrink={1} + flexBasis="auto" + textAlign="center" + alignItems="center" + justifyContent="start" + flexDirection="column" + mt={{ base: '50%', xl: '25%' }}> + <Spinner color="primary.500" w="6rem" h="6rem" /> + </Flex> + </Flex> + ); +}; diff --git a/hyperglass/ui/components/meta.tsx b/hyperglass/ui/components/meta.tsx new file mode 100644 index 0000000..e5b574c --- /dev/null +++ b/hyperglass/ui/components/meta.tsx @@ -0,0 +1,59 @@ +import { useEffect, useMemo, useState } from 'react'; +import Head from 'next/head'; +import { useTheme } from '@chakra-ui/react'; +import { useConfig } from '~/context'; +import { googleFontUrl } from '~/util'; + +export const Meta = () => { + const config = useConfig(); + const { fonts } = useTheme(); + const [location, setLocation] = useState('/'); + + const { + site_title: title = 'hyperglass', + site_description: description = 'Network Looking Glass', + site_keywords: keywords = [ + 'hyperglass', + 'looking glass', + 'lg', + 'peer', + 'peering', + 'ipv4', + 'ipv6', + 'transit', + 'community', + 'communities', + 'bgp', + 'routing', + 'network', + 'isp', + ], + } = useConfig(); + + const siteName = `${title} - ${description}`; + const primaryFont = useMemo(() => googleFontUrl(fonts.body), []); + const monoFont = useMemo(() => googleFontUrl(fonts.mono), []); + + useEffect(() => { + if (typeof window !== 'undefined' && location === '/') { + setLocation(window.location.href); + } + }, []); + + return ( + <Head> + <title>{title} + + + + + + + + + + + + + ); +}; diff --git a/hyperglass/ui/components/resetButton.tsx b/hyperglass/ui/components/resetButton.tsx new file mode 100644 index 0000000..306ec6d --- /dev/null +++ b/hyperglass/ui/components/resetButton.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; +import dynamic from 'next/dynamic'; +import { Button, Icon } from '@chakra-ui/react'; +import { useGlobalState } from '~/context'; + +import type { ButtonProps } from '@chakra-ui/react'; + +const ChevronLeft = dynamic(() => + import('@meronex/icons/fi').then(i => i.FiChevronLeft), +); + +export const ResetButton = forwardRef((props, ref) => { + const { isSubmitting } = useGlobalState(); + return ( + + ); +}); diff --git a/hyperglass/ui/components/results/error.tsx b/hyperglass/ui/components/results/error.tsx new file mode 100644 index 0000000..d623069 --- /dev/null +++ b/hyperglass/ui/components/results/error.tsx @@ -0,0 +1,21 @@ +import { Text } from '@chakra-ui/react'; +import strReplace from 'react-string-replace'; + +import type { TFormattedError } from './types'; + +export const FormattedError = (props: TFormattedError) => { + const { keywords, message } = props; + const patternStr = keywords.map(kw => `(${kw})`).join('|'); + const pattern = new RegExp(patternStr, 'gi'); + let errorFmt; + try { + errorFmt = strReplace(message, pattern, match => ( + + {match} + + )); + } catch (err) { + errorFmt = {message}; + } + return {keywords.length !== 0 ? errorFmt : message}; +}; diff --git a/hyperglass/ui/components/results/group.tsx b/hyperglass/ui/components/results/group.tsx new file mode 100644 index 0000000..bbaa748 --- /dev/null +++ b/hyperglass/ui/components/results/group.tsx @@ -0,0 +1,164 @@ +import { useState } from 'react'; +import { Accordion, Box, Stack, useToken } from '@chakra-ui/react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { AnimatedDiv, Label } from '~/components'; +import { useConfig, useBreakpointValue } from '~/context'; +import { Result } from './individual'; + +import type { TResults } from './types'; + +export const Results = (props: TResults) => { + const { queryLocation, queryType, queryVrf, queryTarget, setSubmitting, ...rest } = props; + const { request_timeout, devices, queries, vrfs, web } = useConfig(); + const targetBg = useToken('colors', 'teal.600'); + const queryBg = useToken('colors', 'cyan.500'); + const vrfBg = useToken('colors', 'blue.500'); + + const animateLeft = useBreakpointValue({ + base: { opacity: 1, x: 0 }, + md: { opacity: 1, x: 0 }, + lg: { opacity: 1, x: 0 }, + xl: { opacity: 1, x: 0 }, + }); + + const animateCenter = useBreakpointValue({ + base: { opacity: 1 }, + md: { opacity: 1 }, + lg: { opacity: 1 }, + xl: { opacity: 1 }, + }); + + const animateRight = useBreakpointValue({ + base: { opacity: 1, x: 0 }, + md: { opacity: 1, x: 0 }, + lg: { opacity: 1, x: 0 }, + xl: { opacity: 1, x: 0 }, + }); + + const initialLeft = useBreakpointValue({ + base: { opacity: 0, x: -100 }, + md: { opacity: 0, x: -100 }, + lg: { opacity: 0, x: -100 }, + xl: { opacity: 0, x: -100 }, + }); + + const initialCenter = useBreakpointValue({ + base: { opacity: 0 }, + md: { opacity: 0 }, + lg: { opacity: 0 }, + xl: { opacity: 0 }, + }); + + const initialRight = useBreakpointValue({ + base: { opacity: 0, x: 100 }, + md: { opacity: 0, x: 100 }, + lg: { opacity: 0, x: 100 }, + xl: { opacity: 0, x: 100 }, + }); + + const [resultsComplete, setComplete] = useState(null); + + const matchedVrf = + vrfs.filter(v => v.id === queryVrf)[0] ?? vrfs.filter(v => v.id === 'default')[0]; + + return ( + <> + + + + {queryLocation && ( + <> + + + + + + + + )} + + + + + + + {queryLocation && + queryLocation.map((loc, i) => { + const device = devices.filter(d => d.name === loc)[0]; + return ( + + + + ); + })} + + + + + ); +}; diff --git a/hyperglass/ui/components/results/header.tsx b/hyperglass/ui/components/results/header.tsx new file mode 100644 index 0000000..53029f8 --- /dev/null +++ b/hyperglass/ui/components/results/header.tsx @@ -0,0 +1,48 @@ +import dynamic from 'next/dynamic'; +import { forwardRef, useMemo } from 'react'; +import { AccordionIcon, Icon, Spinner, Stack, Text, Tooltip, useColorMode } from '@chakra-ui/react'; +import { useConfig, useColorValue } from '~/context'; +import { useStrf } from '~/hooks'; + +import type { TResultHeader } from './types'; + +const Check = dynamic(() => import('@meronex/icons/fa').then(i => i.FaCheckCircle)); +const Warning = dynamic(() => import('@meronex/icons/bi').then(i => i.BisError)); + +const runtimeText = (runtime: number, text: string): string => { + let unit = 'seconds'; + if (runtime === 1) { + unit = 'second'; + } + return `${text} ${unit}`; +}; + +export const ResultHeader = forwardRef((props, ref) => { + const { title, loading, error, errorMsg, errorLevel, runtime } = props; + + const status = useColorValue('primary.500', 'primary.300'); + const warning = useColorValue(`${errorLevel}.500`, `${errorLevel}.300`); + const defaultStatus = useColorValue('success.500', 'success.300'); + + const { web } = useConfig(); + const text = useStrf(web.text.complete_time, { seconds: runtime }, [runtime]); + const label = useMemo(() => runtimeText(runtime, text), [runtime]); + + return ( + + {loading ? ( + + ) : error ? ( + + + + ) : ( + + + + )} + {title} + + + ); +}); diff --git a/hyperglass/ui/components/results/index.ts b/hyperglass/ui/components/results/index.ts new file mode 100644 index 0000000..8a78f59 --- /dev/null +++ b/hyperglass/ui/components/results/index.ts @@ -0,0 +1 @@ +export * from './group'; diff --git a/hyperglass/ui/components/results/individual.tsx b/hyperglass/ui/components/results/individual.tsx new file mode 100644 index 0000000..ea44d0e --- /dev/null +++ b/hyperglass/ui/components/results/individual.tsx @@ -0,0 +1,236 @@ +import { forwardRef, useEffect, useMemo, useState } from 'react'; +import { + Box, + Flex, + Alert, + Tooltip, + ButtonGroup, + AccordionItem, + AccordionPanel, + AccordionButton, +} from '@chakra-ui/react'; +import { BsLightningFill } from '@meronex/icons/bs'; +import useAxios from 'axios-hooks'; +import { startCase } from 'lodash'; +import { BGPTable, Countdown, CopyButton, RequeryButton, TextOutput, If } from '~/components'; +import { useColorValue, useConfig, useMobile } from '~/context'; +import { useStrf, useTableToString } from '~/hooks'; +import { FormattedError } from './error'; +import { ResultHeader } from './header'; + +import type { TAccordionHeaderWrapper, TResult } from './types'; + +type TErrorLevels = 'success' | 'warning' | 'error'; + +const AccordionHeaderWrapper = (props: TAccordionHeaderWrapper) => { + const { hoverBg, ...rest } = props; + return ( + + ); +}; + +export const Result = forwardRef((props, ref) => { + const { + index, + device, + timeout, + queryVrf, + queryType, + queryTarget, + setComplete, + queryLocation, + resultsComplete, + } = props; + + const { web, cache, messages } = useConfig(); + const isMobile = useMobile(); + const color = useColorValue('black', 'white'); + const scrollbar = useColorValue('blackAlpha.300', 'whiteAlpha.300'); + const scrollbarHover = useColorValue('blackAlpha.400', 'whiteAlpha.400'); + const scrollbarBg = useColorValue('blackAlpha.50', 'whiteAlpha.50'); + + let [{ data, loading, error }, refetch] = useAxios( + { + url: '/api/query/', + method: 'post', + data: { + query_vrf: queryVrf, + query_type: queryType, + query_target: queryTarget, + query_location: queryLocation, + }, + timeout, + }, + { useCache: false }, + ); + + const cacheLabel = useStrf(web.text.cache_icon, { time: data?.timestamp }, [data?.timestamp]); + + const [isOpen, setOpen] = useState(false); + const [hasOverride, setOverride] = useState(false); + + const handleToggle = () => { + setOpen(!isOpen); + setOverride(true); + }; + + const errorKw = (error && error.response?.data?.keywords) || []; + + let errorMsg; + if (error && error.response?.data?.output) { + errorMsg = error.response.data.output; + } else if (error && error.message.startsWith('timeout')) { + errorMsg = messages.request_timeout; + } else if (error?.response?.statusText) { + errorMsg = startCase(error.response.statusText); + } else if (error && error.message) { + errorMsg = startCase(error.message); + } else { + errorMsg = messages.general; + } + + error && console.error(error); + + const getErrorLevel = (): TErrorLevels => { + const statusMap = { + success: 'success', + warning: 'warning', + error: 'warning', + danger: 'error', + } as { [k in TResponseLevel]: 'success' | 'warning' | 'error' }; + + let e: TErrorLevels = 'error'; + + if (error?.response?.data?.level) { + const idx = error.response.data.level as TResponseLevel; + e = statusMap[idx]; + } + return e; + }; + + const errorLevel = useMemo(() => getErrorLevel(), [error]); + + const tableComponent = useMemo(() => typeof queryType.match(/^bgp_\w+$/) !== null, [queryType]); + + let copyValue = data?.output; + + const formatData = useTableToString(queryTarget, data, [data.format]); + + if (data?.format === 'application/json') { + copyValue = formatData(); + } + + if (error) { + copyValue = errorMsg; + } + + useEffect(() => { + !loading && resultsComplete === null && setComplete(index); + }, [loading, resultsComplete]); + + useEffect(() => { + resultsComplete === index && !hasOverride && setOpen(true); + }, [resultsComplete, index]); + + return ( + + + + + + + + + + + + + + + + {data?.output} + + + {data?.output} + + + + {error && ( + + + + )} + + + + + + + + + + + + + + + + + + + + + + + ); +}); diff --git a/hyperglass/ui/components/results/types.ts b/hyperglass/ui/components/results/types.ts new file mode 100644 index 0000000..e45dbd5 --- /dev/null +++ b/hyperglass/ui/components/results/types.ts @@ -0,0 +1,40 @@ +import type { BoxProps, FlexProps } from '@chakra-ui/react'; +import type { TDevice, TQueryTypes } from '~/types'; + +export interface TResultHeader { + title: string; + loading: boolean; + error?: Error; + errorMsg: string; + errorLevel: 'success' | 'warning' | 'error'; + runtime: number; +} + +export interface TFormattedError { + keywords: string[]; + message: string; +} + +export interface TAccordionHeaderWrapper extends FlexProps { + hoverBg: FlexProps['bg']; +} + +export interface TResult { + index: number; + device: TDevice; + timeout: number; + queryVrf: string; + queryType: TQueryTypes; + queryTarget: string; + setComplete(v: number | null): void; + queryLocation: string; + resultsComplete: number | null; +} + +export interface TResults extends BoxProps { + setSubmitting(v: boolean): boolean; + queryType: TQueryTypes; + queryLocation: string[]; + queryTarget: string; + queryVrf: string; +} diff --git a/hyperglass/ui/components/submitButton/index.ts b/hyperglass/ui/components/submitButton/index.ts new file mode 100644 index 0000000..10bf562 --- /dev/null +++ b/hyperglass/ui/components/submitButton/index.ts @@ -0,0 +1 @@ +export * from './submitButton'; diff --git a/hyperglass/ui/components/submitButton/submitButton.tsx b/hyperglass/ui/components/submitButton/submitButton.tsx new file mode 100644 index 0000000..16cb819 --- /dev/null +++ b/hyperglass/ui/components/submitButton/submitButton.tsx @@ -0,0 +1,107 @@ +import { forwardRef } from 'react'; +import { Box, Spinner } from '@chakra-ui/react'; +import { FiSearch } from '@meronex/icons/fi'; +import { useColorValue } from '~/context'; +import { useOpposingColor } from '~/hooks'; + +import type { TSubmitButton, TButtonSizeMap } from './types'; + +const btnSizeMap = { + lg: { + height: 12, + minWidth: 12, + fontSize: 'lg', + px: 6, + }, + md: { + height: 10, + minWidth: 10, + fontSize: 'md', + px: 4, + }, + sm: { + height: 8, + minWidth: 8, + fontSize: 'sm', + px: 3, + }, + xs: { + height: 6, + minWidth: 6, + fontSize: 'xs', + px: 2, + }, +} as TButtonSizeMap; + +export const SubmitButton = forwardRef((props, ref) => { + const { + isLoading = false, + isDisabled = false, + isActive = false, + isFullWidth = false, + size = 'lg', + loadingText, + children, + ...rest + } = props; + const _isDisabled = isDisabled || isLoading; + + const bg = useColorValue('primary.500', 'primary.300'); + const bgActive = useColorValue('primary.600', 'primary.400'); + const bgHover = useColorValue('primary.400', 'primary.200'); + const color = useOpposingColor(bg); + const colorActive = useOpposingColor(bgActive); + const colorHover = useOpposingColor(bgHover); + + const btnSize = btnSizeMap[size]; + + return ( + + {isLoading ? ( + + ) : ( + + )} + {isLoading + ? loadingText || ( + + {children} + + ) + : children} + + ); +}); diff --git a/hyperglass/ui/components/submitButton/types.ts b/hyperglass/ui/components/submitButton/types.ts new file mode 100644 index 0000000..2226690 --- /dev/null +++ b/hyperglass/ui/components/submitButton/types.ts @@ -0,0 +1,17 @@ +import { BoxProps } from '@chakra-ui/react'; + +export type TButtonSizeMap = { + xs: BoxProps; + sm: BoxProps; + md: BoxProps; + lg: BoxProps; +}; + +export interface TSubmitButton extends BoxProps { + isLoading: boolean; + isDisabled: boolean; + isActive: boolean; + isFullWidth: boolean; + size: keyof TButtonSizeMap; + loadingText: string; +} diff --git a/hyperglass/ui/components/textOutput/index.ts b/hyperglass/ui/components/textOutput/index.ts new file mode 100644 index 0000000..5351348 --- /dev/null +++ b/hyperglass/ui/components/textOutput/index.ts @@ -0,0 +1 @@ +export * from './textOutput'; diff --git a/hyperglass/ui/components/textOutput/textOutput.tsx b/hyperglass/ui/components/textOutput/textOutput.tsx new file mode 100644 index 0000000..93a1cc4 --- /dev/null +++ b/hyperglass/ui/components/textOutput/textOutput.tsx @@ -0,0 +1,38 @@ +import { Box } from '@chakra-ui/react'; +import { useColorValue } from '~/context'; + +import type { TTextOutput } from './types'; + +export const TextOutput = (props: TTextOutput) => { + const { children, ...rest } = props; + + const bg = useColorValue('blackAlpha.100', 'gray.800'); + const color = useColorValue('black', 'white'); + const selectionBg = useColorValue('black', 'white'); + const selectionColor = useColorValue('white', 'black'); + + return ( + + {children.split('\\n').join('\n').replace(/\n\n/g, '\n')} + + ); +}; diff --git a/hyperglass/ui/components/textOutput/types.ts b/hyperglass/ui/components/textOutput/types.ts new file mode 100644 index 0000000..701a3c2 --- /dev/null +++ b/hyperglass/ui/components/textOutput/types.ts @@ -0,0 +1,5 @@ +import type { BoxProps } from '@chakra-ui/react'; + +export interface TTextOutput extends Omit { + children: string; +} diff --git a/hyperglass/ui/components/withAnimation.ts b/hyperglass/ui/components/withAnimation.ts deleted file mode 100644 index 49af599..0000000 --- a/hyperglass/ui/components/withAnimation.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { motion } from 'framer-motion'; - -export function withAnimation

(Component: React.FunctionComponent) { - return motion.custom>(Component); -} diff --git a/hyperglass/ui/context/GlobalState.ts b/hyperglass/ui/context/GlobalState.ts index 17949f1..e92b247 100644 --- a/hyperglass/ui/context/GlobalState.ts +++ b/hyperglass/ui/context/GlobalState.ts @@ -1,5 +1,5 @@ import { createState, useState } from '@hookstate/core'; -import type { IGlobalState } from './types'; +import type { TGlobalState } from './types'; // const StateContext = createContext(null); @@ -26,7 +26,7 @@ import type { IGlobalState } from './types'; // export const useHyperglassState = () => useContext(StateContext); -export const globalState = createState({ +export const globalState = createState({ isSubmitting: false, formData: { query_location: [], query_target: '', query_type: '', query_vrf: '' }, }); diff --git a/hyperglass/ui/context/HyperglassProvider.tsx b/hyperglass/ui/context/HyperglassProvider.tsx index 1b1636b..6ef1113 100644 --- a/hyperglass/ui/context/HyperglassProvider.tsx +++ b/hyperglass/ui/context/HyperglassProvider.tsx @@ -1,13 +1,19 @@ import { createContext, useContext, useMemo } from 'react'; -import { ChakraProvider, useTheme as useChakraTheme } from '@chakra-ui/core'; +import { + useToken, + ChakraProvider, + useColorModeValue, + useBreakpointValue, + useTheme as useChakraTheme, +} from '@chakra-ui/react'; import { makeTheme, defaultTheme } from '~/util'; import type { IConfig, ITheme } from '~/types'; -import type { IHyperglassProvider } from './types'; +import type { THyperglassProvider } from './types'; const HyperglassContext = createContext(Object()); -export const HyperglassProvider = (props: IHyperglassProvider) => { +export const HyperglassProvider = (props: THyperglassProvider) => { const { config, children } = props; const value = useMemo(() => config, []); const userTheme = value && makeTheme(value.web.theme); @@ -19,6 +25,13 @@ export const HyperglassProvider = (props: IHyperglassProvider) => { ); }; -export const useConfig = () => useContext(HyperglassContext); +export const useConfig = (): IConfig => useContext(HyperglassContext); export const useTheme = (): ITheme => useChakraTheme(); -export { useColorModeValue as useColorValue } from '@chakra-ui/core'; + +export const useMobile = (): boolean => + useBreakpointValue({ base: true, md: true, lg: false, xl: false }) ?? true; + +export const useColorToken = (light: string, dark: string): ValueOf => + useColorModeValue(useToken('colors', light), useToken('colors', dark)); + +export { useColorModeValue as useColorValue, useBreakpointValue } from '@chakra-ui/react'; diff --git a/hyperglass/ui/context/types.ts b/hyperglass/ui/context/types.ts index 3c7e372..b581a7a 100644 --- a/hyperglass/ui/context/types.ts +++ b/hyperglass/ui/context/types.ts @@ -1,12 +1,11 @@ -import type { ReactNode } from 'react'; import type { IConfig, IFormData } from '~/types'; -export interface IHyperglassProvider { +export interface THyperglassProvider { config: IConfig; - children: ReactNode; + children: React.ReactNode; } -export interface IGlobalState { +export interface TGlobalState { isSubmitting: boolean; formData: IFormData; } diff --git a/hyperglass/ui/globals.d.ts b/hyperglass/ui/globals.d.ts deleted file mode 100644 index 86dc37d..0000000 --- a/hyperglass/ui/globals.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { MotionProps } from 'framer-motion'; - -declare global { - import * as React from 'react'; - - 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 = MutableRefObject; - - type Dict = Record; - - type Animated = Omit & - Omit & { transition?: MotionProps['transition'] }; - type ReactNode = React.ReactNode; - type ReactFC = React.FunctionComponent; -} diff --git a/hyperglass/ui/hooks/hooks.d.ts b/hyperglass/ui/hooks/hooks.d.ts deleted file mode 100644 index bbfe655..0000000 --- a/hyperglass/ui/hooks/hooks.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -interface IOpposingOptions { - light?: string; - dark?: string; -} diff --git a/hyperglass/ui/hooks/index.ts b/hyperglass/ui/hooks/index.ts index 68f77e8..351bc72 100644 --- a/hyperglass/ui/hooks/index.ts +++ b/hyperglass/ui/hooks/index.ts @@ -1,2 +1,5 @@ -export * from './useSessionStorage'; +export * from './useStrf'; +export * from './useBooleanValue'; export * from './useOpposingColor'; +export * from './useTableToString'; +export * from './useSessionStorage'; diff --git a/hyperglass/ui/hooks/types.ts b/hyperglass/ui/hooks/types.ts new file mode 100644 index 0000000..56160bf --- /dev/null +++ b/hyperglass/ui/hooks/types.ts @@ -0,0 +1,8 @@ +export interface TOpposingOptions { + light?: string; + dark?: string; +} + +export interface TStringTableData extends Omit { + output: TStructuredResponse; +} diff --git a/hyperglass/ui/hooks/useBooleanValue.ts b/hyperglass/ui/hooks/useBooleanValue.ts new file mode 100644 index 0000000..181543a --- /dev/null +++ b/hyperglass/ui/hooks/useBooleanValue.ts @@ -0,0 +1,15 @@ +import { useMemo } from 'react'; + +export function useBooleanValue( + status: boolean, + ifTrue: T, + ifFalse: F, +): T | F { + return useMemo(() => { + if (status) { + return ifTrue; + } else { + return ifFalse; + } + }, [status]); +} diff --git a/hyperglass/ui/hooks/useOpposingColor.ts b/hyperglass/ui/hooks/useOpposingColor.ts index b1607b7..7c1f285 100644 --- a/hyperglass/ui/hooks/useOpposingColor.ts +++ b/hyperglass/ui/hooks/useOpposingColor.ts @@ -1,8 +1,10 @@ import { useState } from 'react'; -import { useToken } from '@chakra-ui/core'; +import { useToken } from '@chakra-ui/react'; import { getColor, isLight } from '@chakra-ui/theme-tools'; import { useTheme } from '~/context'; +import type { TOpposingOptions } from './types'; + export function useIsDark(color: string) { const theme = useTheme(); if (typeof color === 'string' && color.match(/[a-zA-Z]+\.[a-zA-Z0-9]+/g)) { @@ -17,7 +19,7 @@ export function useIsDark(color: string) { return opposingShouldBeDark; } -export function useOpposingColor(color: string, options?: IOpposingOptions): string { +export function useOpposingColor(color: string, options?: TOpposingOptions): string { const [opposingColor, setOpposingColor] = useState('inherit'); const isBlack = useIsDark(color); @@ -30,7 +32,7 @@ export function useOpposingColor(color: string, options?: IOpposingOptions): str return opposingColor; } -export function useOpposingToken(color: string, options?: IOpposingOptions): string { +export function useOpposingToken(color: string, options?: TOpposingOptions): string { const [opposingColor, setOpposingColor] = useState('inherit'); const isBlack = useIsDark(color); const dark = options?.dark ?? 'dark'; diff --git a/hyperglass/ui/hooks/useStrf.ts b/hyperglass/ui/hooks/useStrf.ts new file mode 100644 index 0000000..2edf435 --- /dev/null +++ b/hyperglass/ui/hooks/useStrf.ts @@ -0,0 +1,8 @@ +import { useMemo } from 'react'; +import format from 'string-format'; + +type FmtArgs = { [k: string]: any } | string; + +export function useStrf(str: string, fmt: FmtArgs, ...deps: any[]): string { + return useMemo(() => format(str, fmt), deps); +} diff --git a/hyperglass/ui/hooks/useTableToString.ts b/hyperglass/ui/hooks/useTableToString.ts new file mode 100644 index 0000000..6621b75 --- /dev/null +++ b/hyperglass/ui/hooks/useTableToString.ts @@ -0,0 +1,112 @@ +import { useCallback } from 'react'; +import dayjs from 'dayjs'; +import relativeTimePlugin from 'dayjs/plugin/relativeTime'; +import utcPlugin from 'dayjs/plugin/utc'; +import { useConfig } from '~/context'; + +import { TStringTableData } from './types'; + +dayjs.extend(relativeTimePlugin); +dayjs.extend(utcPlugin); + +type TFormatter = (v: any) => string; + +type TFormatted = { + age: (v: number) => string; + active: (v: boolean) => string; + as_path: (v: number[]) => string; + communities: (v: string[]) => string; + rpki_state: (v: number, n: TRPKIStates) => string; +}; + +function formatAsPath(path: number[]): string { + return path.join(' → '); +} + +function formatCommunities(comms: string[]): string { + const commsStr = comms.map(c => ` - ${c}`); + return '\n' + commsStr.join('\n'); +} + +function formatBool(val: boolean): string { + let fmt = ''; + if (val === true) { + fmt = 'yes'; + } else if (val === false) { + fmt = 'no'; + } + return fmt; +} + +function formatTime(val: number): string { + const now = dayjs.utc(); + const then = now.subtract(val, 'second'); + const timestamp = then.toString().replace('GMT', 'UTC'); + const relative = now.to(then, true); + return `${relative} (${timestamp})`; +} + +export function useTableToString( + target: string, + data: TStringTableData, + ...deps: any +): () => string { + const { web, parsed_data_fields } = useConfig(); + + function formatRpkiState(val: number): string { + const rpkiStates = [ + web.text.rpki_invalid, + web.text.rpki_valid, + web.text.rpki_unknown, + web.text.rpki_unverified, + ]; + return rpkiStates[val]; + } + + const tableFormatMap = { + age: formatTime, + active: formatBool, + as_path: formatAsPath, + communities: formatCommunities, + rpki_state: formatRpkiState, + }; + + function isFormatted(key: string): key is keyof TFormatted { + return key in tableFormatMap; + } + + function getFmtFunc(accessor: keyof TRoute): TFormatter { + if (isFormatted(accessor)) { + return tableFormatMap[accessor]; + } else { + return String; + } + } + + function doFormat(target: string, data: TStringTableData): string { + try { + let tableStringParts = [`Routes For: ${target}`, `Timestamp: ${data.timestamp} UTC`]; + + data.output.routes.map(route => { + parsed_data_fields.map(field => { + const [header, accessor, align] = field; + if (align !== null) { + let value = route[accessor]; + const fmtFunc = getFmtFunc(accessor); + value = fmtFunc(value); + if (accessor === 'prefix') { + tableStringParts.push(` - ${header}: ${value}`); + } else { + tableStringParts.push(` - ${header}: ${value}`); + } + } + }); + }); + return tableStringParts.join('\n'); + } catch (err) { + console.error(err); + return `An error occurred while parsing the output: '${err.message}'`; + } + } + return useCallback(() => doFormat(target, data), deps); +} diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json index 5be2327..62003d1 100644 --- a/hyperglass/ui/package.json +++ b/hyperglass/ui/package.json @@ -15,15 +15,17 @@ }, "browserslist": "> 0.25%, not dead", "dependencies": { - "@chakra-ui/core": "1.0.0-rc.8", - "@chakra-ui/theme": "1.0.0-rc.8", + "@chakra-ui/react": "^1.0.1", + "@emotion/react": "^11.1.1", + "@emotion/styled": "^11.0.0", "@hookstate/core": "^3.0.1", "@meronex/icons": "^4.0.0", + "add": "^2.0.6", "axios": "^0.19.2", "axios-hooks": "^1.9.0", "chroma-js": "^2.1.0", "dayjs": "^1.8.25", - "framer-motion": "^1.10.0", + "framer-motion": "^2.9.4", "lodash": "^4.17.15", "next": "^9.5.4", "react": "16.14.0", @@ -33,16 +35,16 @@ "react-markdown": "^4.3.1", "react-select": "^3.0.8", "react-string-replace": "^0.4.4", - "react-table": "^7.0.4", + "react-table": "^7.6.2", "string-format": "^2.0.0", "tempy": "^0.5.0", - "use-media": "^1.4.0", + "yarn": "^1.22.10", "yup": "^0.28.3" }, "devDependencies": { "@types/node": "^14.11.10", "@types/react-select": "^3.0.22", - "@types/react-table": "7.0.4", + "@types/react-table": "^7.0.25", "@types/string-format": "^2.0.0", "@typescript-eslint/eslint-plugin": "^2.24.0", "@typescript-eslint/parser": "^2.24.0", diff --git a/hyperglass/ui/tsconfig.json b/hyperglass/ui/tsconfig.json index 74df1ee..d094dd5 100644 --- a/hyperglass/ui/tsconfig.json +++ b/hyperglass/ui/tsconfig.json @@ -1,41 +1,11 @@ { "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ - /* Basic Options */ - // "incremental": true, /* Enable incremental compilation */ - "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. */ - // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ - // "outFile": "./", /* Concatenate and emit output to single file. */ - // "outDir": "./", /* Redirect output structure to the directory. */ - // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ - // "composite": true, /* Enable project compilation */ - // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ - // "removeComments": true, /* Do not emit comments to output. */ - // "importHelpers": true, /* Import emit helpers from 'tslib'. */ - "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */, - // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - /* Strict Type-Checking Options */ - "strict": true /* Enable all strict type-checking options. */, // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - /* Additional Checks */ - // "noUnusedLocals": true, /* Report errors on unused locals. */ - // "noUnusedParameters": true, /* Report errors on unused parameters. */ - // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ - // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + "target": "ES5", + "module": "esnext", + "downlevelIteration": true, + "strict": true, "baseUrl": "." /* Base directory to resolve non-absolute module names. */, "paths": { - /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ "~/components": ["components/index"], "~/components/*": ["components/*"], "~/context": ["context/index"], @@ -49,23 +19,9 @@ "~/util": ["util/index"], "~/util/*": ["util/*"] }, - // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ - // "typeRoots": [] /* List of folders to include type definitions from. */, - // "types": [] /* Type declaration files to be included in compilation. */, - // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - /* Source Map Options */ - // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ - // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - /* Experimental Options */ - // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ - // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ - /* Advanced Options */ - "skipLibCheck": true /* Skip type checking of declaration files. */, - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "noEmit": true, @@ -75,5 +31,5 @@ "jsx": "preserve" }, "exclude": ["node_modules"], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "globals.d.ts"] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/globals.d.ts"] } diff --git a/hyperglass/ui/types/config.ts b/hyperglass/ui/types/config.ts index 98cbf7a..78fb15b 100644 --- a/hyperglass/ui/types/config.ts +++ b/hyperglass/ui/types/config.ts @@ -94,16 +94,17 @@ export interface IDeviceVrf extends IDeviceVrfBase { ipv6: boolean; } -interface IDeviceBase { +interface TDeviceBase { + name: string; network: string; display_name: string; } -export interface IDevice extends IDeviceBase { +export interface TDevice extends TDeviceBase { vrfs: IDeviceVrf[]; } -export interface INetworkLocation extends IDeviceBase { +export interface INetworkLocation extends TDeviceBase { vrfs: IDeviceVrfBase[]; } @@ -112,7 +113,7 @@ export interface INetwork { locations: INetworkLocation[]; } -export type TParsedDataField = [string, string, 'left' | 'right' | 'center' | null]; +export type TParsedDataField = [string, keyof TRoute, 'left' | 'right' | 'center' | null]; export interface IQueryContent { content: string; @@ -152,11 +153,12 @@ export interface IConfig { google_analytics?: string; site_title: string; site_keywords: string[]; + site_description: string; web: IConfigWeb; messages: IConfigMessages; hyperglass_version: string; queries: IConfigQueries; - devices: IDevice[]; + devices: TDevice[]; vrfs: IDeviceVrfBase[]; parsed_data_fields: TParsedDataField[]; content: IConfigContent; diff --git a/hyperglass/ui/types/globals.d.ts b/hyperglass/ui/types/globals.d.ts new file mode 100644 index 0000000..40f588a --- /dev/null +++ b/hyperglass/ui/types/globals.d.ts @@ -0,0 +1,66 @@ +import type { MotionProps } from 'framer-motion'; + +declare global { + type Dict = Record; + type ValueOf = T[keyof T]; + + type TRPKIStates = 0 | 1 | 2 | 3; + + type TResponseLevel = 'success' | 'warning' | 'error' | 'danger'; + + 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: TRPKIStates; + } + + type TRoute = { + 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: TRPKIStates; + }; + type TRouteField = { [k in keyof TRoute]: ValueOf }; + + type TStructuredResponse = { + vrf: string; + count: number; + routes: TRoute[]; + winning_weight: 'high' | 'low'; + }; + type TQueryResponse = { + random: string; + cached: boolean; + runtime: number; + level: TResponseLevel; + timestamp: string; + keywords: string[]; + output: string | TStructuredResponse; + format: 'text/plain' | 'application/json'; + }; + type ReactRef = MutableRefObject; + + type Animated = Omit & + Omit & { transition?: MotionProps['transition'] }; + + type MeronexIcon = import('@meronex/icons').IconType; +} diff --git a/hyperglass/ui/types/index.ts b/hyperglass/ui/types/index.ts index 4b0c6e3..8f1db4c 100644 --- a/hyperglass/ui/types/index.ts +++ b/hyperglass/ui/types/index.ts @@ -1,3 +1,4 @@ export * from './config'; -export * from './theme'; export * from './data'; +export * from './table'; +export * from './theme'; diff --git a/hyperglass/ui/types/react-table-config.d.ts b/hyperglass/ui/types/react-table-config.d.ts new file mode 100644 index 0000000..fef6d01 --- /dev/null +++ b/hyperglass/ui/types/react-table-config.d.ts @@ -0,0 +1,120 @@ +import type { + TableInstance, + UseSortByHooks, + UseSortByState, + UseFiltersState, + UseGroupByHooks, + UseGroupByState, + UseExpandedHooks, + UseExpandedState, + UseSortByOptions, + UseFiltersOptions, + UseGroupByOptions, + UseRowSelectHooks, + UseRowSelectState, + UseExpandedOptions, + UseGroupByRowProps, + UsePaginationState, + UseColumnOrderState, + UseExpandedRowProps, + UseGroupByCellProps, + UseRowSelectOptions, + UsePaginationOptions, + UseRowSelectRowProps, + UseSortByColumnProps, + UseFiltersColumnProps, + UseGlobalFiltersState, + UseGroupByColumnProps, + UseResizeColumnsState, + UseSortByColumnOptions, + UseSortByInstanceProps, + UseFiltersColumnOptions, + UseFiltersInstanceProps, + UseGlobalFiltersOptions, + UseGroupByColumnOptions, + UseGroupByInstanceProps, + UseResizeColumnsOptions, + UseExpandedInstanceProps, + UseRowSelectInstanceProps, + UsePaginationInstanceProps, + UseColumnOrderInstanceProps, + UseResizeColumnsColumnProps, + UseGlobalFiltersInstanceProps, + UseResizeColumnsColumnOptions, +} from 'react-table'; + +declare module 'react-table' { + export interface UseFlexLayoutInstanceProps { + totalColumnsMinWidth: number; + } + + export interface UseFlexLayoutColumnProps { + totalMinWidth: number; + } + + export interface TableOptions + extends UseExpandedOptions, + UseFiltersOptions, + UseFiltersOptions, + UseGlobalFiltersOptions, + UseGroupByOptions, + UsePaginationOptions, + UseResizeColumnsOptions, + UseRowSelectOptions, + UseSortByOptions {} + + export interface Hooks + extends UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface TableInstance + extends UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseFlexLayoutInstanceProps, + UsePaginationInstanceProps, + UseSortByInstanceProps {} + + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseResizeColumnsState, + UseRowSelectState, + UseSortByState { + rowCount: number; + } + + export interface ColumnInterface + extends UseFiltersColumnOptions, + UseGroupByColumnOptions, + UseResizeColumnsColumnOptions, + UseSortByColumnOptions { + align?: 'left' | 'right' | 'center'; + } + + export interface ColumnInstance + extends UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseFlexLayoutColumnProps, + UseSortByColumnProps {} + + export interface Cell extends UseGroupByCellProps {} + + export interface Row + extends UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps {} +} + +export type TableMouseEventHandler = (instance: TableInstance) => React.MouseEventHandler; diff --git a/hyperglass/ui/types/table.ts b/hyperglass/ui/types/table.ts new file mode 100644 index 0000000..0c9aa72 --- /dev/null +++ b/hyperglass/ui/types/table.ts @@ -0,0 +1,6 @@ +export interface TColumn { + Header: string; + accessor: keyof TRoute; + align: string; + hidden: boolean; +} diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock index 8b849d9..3bc2633 100644 --- a/hyperglass/ui/yarn.lock +++ b/hyperglass/ui/yarn.lock @@ -209,6 +209,13 @@ dependencies: "@babel/types" "^7.12.1" +"@babel/helper-module-imports@^7.7.0": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb" + integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA== + dependencies: + "@babel/types" "^7.12.5" + "@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c" @@ -1033,7 +1040,14 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6": +"@babel/runtime@^7.0.0": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" + integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg== + dependencies: + regenerator-runtime "^0.13.4" + +"@babel/runtime@^7.10.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740" integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA== @@ -1091,479 +1105,487 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@chakra-ui/accordion@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.0.0-rc.8.tgz#474d4448fef0f315575bd924cc86d3fa52b37021" - integrity sha512-4carsEN6gJFPc9Acl1zckLxQZgxETKSE2ILOL4M+HCx83BMOER59KdEpOH5qNhB6bWlYUdXaj3metvfQz83pCA== +"@babel/types@^7.12.5": + version "7.12.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13" + integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ== dependencies: - "@chakra-ui/descendant" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" -"@chakra-ui/alert@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.0.0-rc.8.tgz#5a689f3dc01e417cbe7b6f8995d16b2881139ee2" - integrity sha512-/K6Y3dT14zs7T12/3zYHiECOF/j0OoyLQsqPpOxsDmsaXrmaxhXzsYRFqn5Skurja240Z9O2SXS+ABRVGeo95w== +"@chakra-ui/accordion@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.0.1.tgz#0e170b5702945a3e48b895ec71a8c3b0723db185" + integrity sha512-p+AqKcRhRdFljFdMmc7qKsMBAFM+DaZvCm3pawSN/xX0/KZYTrac2h5vRSlvJ6GKc1FO4r91RukxD+nXRBOB2A== dependencies: - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/descendant" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/avatar@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.0.0-rc.8.tgz#326fd1fa86744882cbb0befe173180f8ee6ce094" - integrity sha512-gDj/dtFIpNyILJ7EMHENnadrTcRd97mvvhe2uty/9FkPOhPALqofIKkUKvIKbsm9IVg2TDnttS5tylzLRyceQg== +"@chakra-ui/alert@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.0.1.tgz#596877b3e42cab666bd6ce600786df38dc8b1162" + integrity sha512-2MBOxLdHm/b9xESE/pcxGhp08pt8ZPqN6bqAB1r7WovIi3RdLbDC6mYxViSgXNRzwYaTkYXSIRpEQ7PN77BIYw== dependencies: - "@chakra-ui/image" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/breadcrumb@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.0.0-rc.8.tgz#cc1da4ea1fbcc1ea206c254c83f0f0363bf41294" - integrity sha512-6vUDDAaEQvQPBOqkvhtfQPFOh0CsCLYnrjqDPofQpd+UqVMDINembuHCVpAunswo73GCym5vagVe56QvXt7jow== +"@chakra-ui/avatar@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.0.1.tgz#27450e78d593ff86f92d242ddeb66a25a92a6ea3" + integrity sha512-4Nj/kDlsaXHtmNYTNnn6QkWi96UZSwM09lSTKe/MX/YGyedCc5F1fhQclu9CO1VzLKUOwvHsRruMMu4zUoHiFA== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/image" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/button@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.0.0-rc.8.tgz#61a185907c7be30332917a963ccfdecc888836e7" - integrity sha512-qX9Duvio01XEWWFAn3f+SQ/qr5TRX4HxTuBEuF1kIw8RqKCnP5a5pS7g+7KS3Uxx+bIbZ/q/ADuChn0AgXpCsA== +"@chakra-ui/breadcrumb@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.0.1.tgz#6cab6b32115ea6af35c7bce189fbf2cf78036d6f" + integrity sha512-2bcPQaDw3yhVdWTipqjkvgg0OpTs75j3sCRejZgJPk6mnA7FE4RgQ7ToUp+dsd60A+j8nghcXNgnxGF90ltauQ== dependencies: - "@chakra-ui/spinner" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/checkbox@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.0.0-rc.8.tgz#1dc81c79e7a4269989a55b7bb1a1a7ce5cd25778" - integrity sha512-BW8g3pO2bp5YPl1udGnAZeQ3YEuHCplX7iDWFsSREJLstJOrC1mb9VyGyWHuEsq/KXjjfaWAfPDqy9CNlf6aTg== +"@chakra-ui/button@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.0.1.tgz#370d4080e9b62072b1f30fb765a8eb29a3c114e3" + integrity sha512-O5yhhiSy5UHYJvzhFVUWGxpTSR/mdRQrSWSj7rSal6AE5LagW+vgHR2m5qt1/2asDOAvzN+VvmJRLPosFY6wuA== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/spinner" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/clickable@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.0.0-rc.8.tgz#3e9d2708d28d55496b1de5b34b532f7d99266672" - integrity sha512-45mMSfpKami4/NQk+QKXgfnkPyQ57yXQc2LFHx35m6ErXAe2m450Qv40Hj5lxJgrzmETms/SgskJ6GAhdajjtg== +"@chakra-ui/checkbox@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.0.1.tgz#d6005a9552dcb1b3180a2c76a78b3c518ca6f22f" + integrity sha512-kngKZ0a0/tZ85SdUQDZ30lFwYyYlDRuXUP54oJgEKkyvjJy9DKAxms4HjnkdNMNXX/KCyBMpQ6Z7ZtKcWz083g== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" -"@chakra-ui/close-button@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.0.0-rc.8.tgz#0b4c7926c6de3a6d8f889b0a0afb8e91b557bac2" - integrity sha512-jELCVjMaDbrP6YnAj/fTG7hhItc1HK23LxaLZ2Fug82Tb04+8Y5097Sszvn9U0JI46oxhqoUSPPo6UxKHCZrZQ== +"@chakra-ui/clickable@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.0.1.tgz#c2dd0828239e26b5bbb577d5e64ef577e8f60c14" + integrity sha512-qu2/+zMbV5BIqAOW5I60uyRTNiczYJde/usrzmkoRP7cve1MvEPvNPRt0m7fgMPVvOYnMovi3vWAR5yjDSgMjQ== dependencies: - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/color-mode@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.0.0-rc.8.tgz#c0c59851d6ea7965b68dba74bd4ba9fb6a345cc4" - integrity sha512-NLanjgYN/rzHzWZ9KLGWsaTDmrlGR4PlS9ngXPQW9K0dy8d362wDVuag8IDx435aovXt6tOkbwmNZ1HGNPzAfw== +"@chakra-ui/close-button@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.0.1.tgz#3d3ec16d5bf46641be8a673c7426d64d69960c95" + integrity sha512-A1c6wJRg/QGLs9BA4uNp20Rr2fG02lnauV6A48C6iI9AKa90JYqIe8x/BBVSnD85e6+kVDExkAdCHgXUJgfUWA== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/control-box@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.0-rc.8.tgz#365ba31f44fe91a6fc14fee87c02fc469d48026b" - integrity sha512-fg/9tfUqaFHjn6JGnHytoGX6W3DUjBxkzcNJtrYX+LNb7CFuC94EOV8d1XkXAMxUVxA901SIOionAU/cTRDkEQ== +"@chakra-ui/color-mode@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.0.1.tgz#c6ef751be5cf057fe534850cbacac02760250821" + integrity sha512-iGZMxo3f+XMM5oQC7sHomNFicq22IRUmr2H/ErnU7nSQ5jwGpp9u//Q5V2CmFvg0ffmm8h6wbkD8ntkvNb5ONw== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/core@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/core/-/core-1.0.0-rc.8.tgz#2a2e7105b18488762edf479cc7cd77185503c760" - integrity sha512-ZPGjTwy5QrYG/sYuGhrYeBNfWNIfQMSI4spHkNusd+qmNwPJMXR/WO0M8FwTdSnLc0ZVubUpvqdY4e9fp+xT+g== +"@chakra-ui/control-box@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.1.tgz#3b40463069b2818d5571ca3821735d21e852eb70" + integrity sha512-RlMDTp0qTeEnuQQeOk2zgi7/CKQpKfpgASzQtg2gH5Es7YBTA/Zc13PfkN+VHliY7vuJlXIufnmelwwcC82wUw== dependencies: - "@chakra-ui/accordion" "1.0.0-rc.8" - "@chakra-ui/alert" "1.0.0-rc.8" - "@chakra-ui/avatar" "1.0.0-rc.8" - "@chakra-ui/breadcrumb" "1.0.0-rc.8" - "@chakra-ui/button" "1.0.0-rc.8" - "@chakra-ui/checkbox" "1.0.0-rc.8" - "@chakra-ui/close-button" "1.0.0-rc.8" - "@chakra-ui/control-box" "1.0.0-rc.8" - "@chakra-ui/counter" "1.0.0-rc.8" - "@chakra-ui/css-reset" "1.0.0-rc.8" - "@chakra-ui/editable" "1.0.0-rc.8" - "@chakra-ui/form-control" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/image" "1.0.0-rc.8" - "@chakra-ui/input" "1.0.0-rc.8" - "@chakra-ui/layout" "1.0.0-rc.8" - "@chakra-ui/live-region" "1.0.0-rc.8" - "@chakra-ui/media-query" "1.0.0-rc.8" - "@chakra-ui/menu" "1.0.0-rc.8" - "@chakra-ui/modal" "1.0.0-rc.8" - "@chakra-ui/number-input" "1.0.0-rc.8" - "@chakra-ui/pin-input" "1.0.0-rc.8" - "@chakra-ui/popover" "1.0.0-rc.8" - "@chakra-ui/popper" "1.0.0-rc.8" - "@chakra-ui/portal" "1.0.0-rc.8" - "@chakra-ui/progress" "1.0.0-rc.8" - "@chakra-ui/radio" "1.0.0-rc.8" - "@chakra-ui/select" "1.0.0-rc.8" - "@chakra-ui/skeleton" "1.0.0-rc.8" - "@chakra-ui/slider" "1.0.0-rc.8" - "@chakra-ui/spinner" "1.0.0-rc.8" - "@chakra-ui/stat" "1.0.0-rc.8" - "@chakra-ui/switch" "1.0.0-rc.8" - "@chakra-ui/system" "1.0.0-rc.8" - "@chakra-ui/tabs" "1.0.0-rc.8" - "@chakra-ui/tag" "1.0.0-rc.8" - "@chakra-ui/textarea" "1.0.0-rc.8" - "@chakra-ui/theme" "1.0.0-rc.8" - "@chakra-ui/toast" "1.0.0-rc.8" - "@chakra-ui/tooltip" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/counter@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.0.0-rc.8.tgz#507875b14c7de6f048e50edd7b0145670e39ef98" - integrity sha512-Ry+U48Z8wATdclxQ3eLmRcSCKScUT7hO71QPd8k8HOexftXowMHi2Iv5XjBBJReb9wCagSc4P5einAUWUAUbnQ== +"@chakra-ui/counter@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.0.1.tgz#219520e30780e365bb7b50155bb5fdbfc21fec9d" + integrity sha512-HFWRsIWxSZXJFg9865bAWKyQGzY8SjiZbPRW6/IzPS4aoEY7CdWN3X5uAuQZDJnIUOXuLcH13S0rt9k8aXqMSA== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/css-reset@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.0.0-rc.8.tgz#98eeec5e813244917ecbe1545a75d5632cb3480b" - integrity sha512-s/V28H0W324OYRL8yxpBT1u0rTe+D0R9AmmUjMDmUV+ETxZ77zQMa3DykutbD+Kem3fJv8bpgVuM/uB2utfXSw== +"@chakra-ui/css-reset@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.0.0.tgz#8395921b35ef27bee0579a4d730c5ab7f7b39734" + integrity sha512-UaPsImGHvCgFO3ayp6Ugafu2/3/EG8wlW/8Y9Ihfk1UFv8cpV+3BfWKmuZ7IcmxcBL9dkP6E8p3/M1T0FB92hg== -"@chakra-ui/descendant@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-1.0.0-rc.8.tgz#463f5e1379cd6a93b8a8de22775e4c44c9c4fc2e" - integrity sha512-JK40BihvaNZBlEss8Ez58Ccub0XlOyJVJkGm9xPva7p5MygeTlqwXu8dE8IhJfDI99AFheMNPY1r24n1yoYOMQ== +"@chakra-ui/descendant@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-1.0.1.tgz#c4620308853f8eae3c48574fbcdb9efbcc182f17" + integrity sha512-1Pkud18gYGtRGobdMNRhWEg4GTQiZUs38dMEktLynTR0F8Cjwqw12ncWCKfhxaXp0XTkWM21cwcB6QDQtFaH9Q== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" -"@chakra-ui/editable@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.0.0-rc.8.tgz#8938c8cb9d7f0af71aa2afb76dc7671ba301a74a" - integrity sha512-9kiJk4QVzgv9yVKiTCsYcSbdVcWPq3btj5gHfKDvKgwevD5Wv2sWW8gHklpT5oGNpIxEZB8lcJLpywG+p2Ct/g== +"@chakra-ui/editable@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.0.1.tgz#d1370e67a3eadcba21b19e0a12ceab4ff3df0b32" + integrity sha512-JuK3Al2jMZOxlw3CwJfMeIxIUYPzz8Scs+P5hm99+/NWsQwO2qitHezvPLaPpf1/kK+8bPqAxRPI9iNZOnCgYA== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/focus-lock@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.0.0-rc.8.tgz#4de1647d7825a6e40a26261e25ae55a639d9eec2" - integrity sha512-a53KsV/i5bII2jaHDU8LbvkNkJKIiqETiWMxhetUSQ5kevY2XLLGyCQibj814f9awsnUXD7ydo0nW3B8DaRYPw== +"@chakra-ui/focus-lock@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.0.1.tgz#e1da80038237fbdcfae54831966f7eaac79ce44d" + integrity sha512-VAhwBWusC6IxU8SkVfM6vE1gDbRV4nNhdPO5VWn+tH+xOhWy3Nydcaz/vq5MS9ir9qtlE/Pxv29q9QgKO+ZOaw== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" react-focus-lock "2.4.1" -"@chakra-ui/form-control@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.0.0-rc.8.tgz#ea23b1867a80282b110fab8c5c8523d00422e91f" - integrity sha512-aoQWl7QMg+RJ51s/NkuxldCPGVtN5gaQLASAXXaUbrwyLCPFyEpgk541096laRB+h5uKytIzRcEvVv7Ox5Gtdw== +"@chakra-ui/form-control@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.0.1.tgz#3248a44325b0f01b8835a807596d1d6496be3dfb" + integrity sha512-IbJLnmzKVchUu9kQ2Er7X2IFWfqZlEPimbs/qyofar7jjuQysQBXvU8Gd9MUYhXb6XcOOWt2CdPPQZG1/Kohvw== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/hooks@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.0.0-rc.8.tgz#745942a1736d31cac487e7cd38069d3e74b89085" - integrity sha512-4B1WBsAU47ZKUyvgTvu5vo1d2aczGHDv7YAcuNQdLF7Bwpk5geWvYf8iO5rz15Bfu9NuBOwU76VoG95b+TBzUA== +"@chakra-ui/hooks@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.0.1.tgz#4754c82b4b51d66abc52146e96c4d3390de7ecd3" + integrity sha512-s4BUPss+dLbLo9NoDkvknPaBCymNdGlOsn31Jj1P/b0Yahm//zAvcnkhND9EuVdytK+E00ThZ10IhTOknqPMCQ== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" "@reach/auto-id" "0.11.0" compute-scroll-into-view "1.0.14" copy-to-clipboard "3.3.1" -"@chakra-ui/icon@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.0.0-rc.8.tgz#9c5763ee96c7c9e7458b53ddcd099b605847ba95" - integrity sha512-kWcetk7d7iKd8Ht5+c+065UWKYHbCSJl3EYnNXLpGr/UJh/Saq/qHhftJASm1lcxjy6lVVTlnP6qm8kVvcvpAw== +"@chakra-ui/icon@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.0.1.tgz#c0b5e174f3fe5d9c638d9e854139d4482bd79a6f" + integrity sha512-yBPk3TPoCwxoFetNUJTz8PoL+EAEPQYE5lS3yU8Tz7y8/ZEOY5OwkmMV5arfiIRmfuNvIGnNpmDH9srsPtpFyg== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/image@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.0-rc.8.tgz#fb9f25f93617b82d1e91ed48e5f24e2e1e342085" - integrity sha512-u+el3/RS7JOlPbu1xUNzfhNsMYFWVdcaSGEDPCrRI2m4/8Egik2uWEplNxakZYCfvhu2Orx3GO6JyEnaWJvvkw== +"@chakra-ui/image@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.1.tgz#6766a468a0d0ee8cf72b940d1c0b8f939e8fe9ad" + integrity sha512-wW6go//sWtmtjgnH+WLlYZ2pI5boAjqbzpnB5peD8+3+pg7r+KOA6vosdfPew6LqYC6NjJ0LiQc3hgd2v+XJEw== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/input@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.0.0-rc.8.tgz#b3f93ac64fdb56ce6fa9925dee446656c77b4e43" - integrity sha512-FJtB9zwOf38GuhS5VGyLlCUFXHSl0OrCQbrwdKakIZz986o+6DGEShIczoifs0QniGKSsNXcLu3m2FX0QxWQmw== +"@chakra-ui/input@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.0.1.tgz#0e0b2d6cb590f3bdf2b8335a2e92a6d87a46cea2" + integrity sha512-G1hgTHKMSAiixiAZWI6yisj2PGxUe8NDsdnjEZvnEtcHX2vfGDCvQzKpI1eMfXrAkIgn71c7JNiCMVDbuofiQQ== dependencies: - "@chakra-ui/form-control" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/form-control" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/layout@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.0.0-rc.8.tgz#62b3eb050d476d8cd4c87efbda48221d4c1b7c61" - integrity sha512-nDocS9eW0f/dnSFtkMYa9aOSUkawbUSOJHmEMRmd696NW/cf8jYWifZPcSWJHqw1V8NR6MYgGLYJ/fgdlT/OGA== +"@chakra-ui/layout@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.0.1.tgz#b09a235c4e2323fa21ebc1334bd3abb6f7b68808" + integrity sha512-OqUrmnWkPSaJYRgbUU/foXedqan0TyIwX/BmwJr7k+oVIItzPgYKzLBf0TbUwpsqz18iL4wjHbUSFl7EVJcDfw== dependencies: - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/live-region@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.0-rc.8.tgz#deb74adb91514cf384e7790aeca371363a74e988" - integrity sha512-QFOokqJJ5BrvaMG9EsyzKG/O4xIcGDk+P5+Otuuu8dtBV01e+lb/mXts4lTi+eXVgSOONMZNuLuhkZ0tYVNvmA== +"@chakra-ui/live-region@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.1.tgz#1f597c9fab7e2e427f4f48d042fcde57841a43f6" + integrity sha512-MH0BmpPzLMtmEAXH3xtWyHqsetDmChnMKVxfya8kFkwDJ5c5pl3XaWWiH1BmhTvYBjJdqDzEmKN4f35uUiX3RA== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/media-query@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.0-rc.8.tgz#0c816a57cacd3d9813be1813bd7aacf4aa0f8866" - integrity sha512-q8pmT4kgxc9pHZ7qtKRxfdQbMLbZ14Z8AEEbTGy4oD7eZutmWn77zkx5cC4MN02pRFghndEqFKIh5Wr+X1KjCg== +"@chakra-ui/media-query@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.1.tgz#374b1a7ee1a89358ff2881257669da91e16098e2" + integrity sha512-uiCcQ2B+IseykUGgiYNxsS3xMBCLoquVCgIV2Vrw0n8USx34vO282uXapeTGDNqLpGHGEihm5+Z/YqE0BiD74w== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/menu@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.0.0-rc.8.tgz#56720913eda2a6585b96fa6c358a17668533a02b" - integrity sha512-uIxetUTY9SoTihQqNJUpX4WnrRKBAAFbx7FqUjuASsTa8NRWEtp9DCFrrL3hQt2XJxkmxN29Y02cGdrJoymYJg== +"@chakra-ui/menu@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.0.1.tgz#f32ed31dd55fa2ec2d1be9c28c33872c68b30ab5" + integrity sha512-UrgiYVQ2xfUhsnp2nS46w5aKliGMFICin/bYmA80tcQ+VVM7ooH0zQnGI49szCx6nSKqnmIbWd/K5QL/xmEkkw== dependencies: - "@chakra-ui/clickable" "1.0.0-rc.8" - "@chakra-ui/descendant" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/popper" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/clickable" "1.0.1" + "@chakra-ui/descendant" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/popper" "1.0.1" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/modal@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.0.0-rc.8.tgz#73cc5f4f5dd54dab6fe41de98d795ea0b119eef8" - integrity sha512-qiRjRkYYl/ycfBKMCrXtbi0lZcjIzVdIVO2/HQluMg+N1XrfiRKLU5CQPUot6RO4DWUlUEA+i+7YtH8VrItoMg== +"@chakra-ui/modal@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.1.0.tgz#06f1ca7e9b2d3e0c6883f57ee83dcdff5f62c405" + integrity sha512-Y7k1MI5haawVgjg6OmE0kmaNCO/tfURQVON+Qnpebkj7sznR+Pr8kOSVQ+cAOnRhw1WlV0pnoT9CnQDegqZ1sw== dependencies: - "@chakra-ui/close-button" "1.0.0-rc.8" - "@chakra-ui/focus-lock" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/portal" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/close-button" "1.0.1" + "@chakra-ui/focus-lock" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/portal" "1.0.1" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" aria-hidden "^1.1.1" react-remove-scroll "2.4.0" -"@chakra-ui/number-input@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.0.0-rc.8.tgz#f664b912c66f3e7819cdbeacca4e98591a9f1318" - integrity sha512-kWo43cD2aj2svUXObbdzcfeR1d+7S9hbm6WOnrWVkxWaOgl+zQ+Lb++ZAaFiE9eul8nJqHxz+b1chfy8Ix+EjQ== +"@chakra-ui/number-input@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.0.1.tgz#65782c5f8d700d0ffc6ba959eeea305aa4c5961e" + integrity sha512-yo+/cH31Qrvb6l1555x+Bqn5U/YY/jsdwBvAMVfrfoMdnQSj2h96EVQseFz7rLvbCKL7ARytiD93GlvRpTHUfw== dependencies: - "@chakra-ui/counter" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/counter" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/pin-input@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.0.0-rc.8.tgz#1097c73b6ee58adc0fe18624ffd17ec119e0912a" - integrity sha512-nJivIHAyptM4A+pgjq6ros/gern4VlbGTr+9x2D2aA6ullS3/W25TW0VR2+eI46ODfCtqitqwtiZuSUGYLJHWg== +"@chakra-ui/pin-input@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.0.1.tgz#ad53d52aebed57b9b00f93d1142820330863dafe" + integrity sha512-z7zaZPyc+CvAOC7urVk9vg18ay5Wm4yzKcMKXcuSxuzzlEexdysmBwLAO+okbWubO/LP2ec9i7i2QfCq9Ty4xQ== dependencies: - "@chakra-ui/descendant" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/descendant" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/popover@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.0.0-rc.8.tgz#496b84e496f0bcde57cae3a7e7b1505c588f22df" - integrity sha512-wl7AOisR3JyHWo4kkAJvT9no4rEYFrSHsOrrf/0YM3P6vks5ajEDu5XVc4UAf+JAUatp1pqovuis/Fae20ds4Q== +"@chakra-ui/popover@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.0.1.tgz#753fc5ec2309b2a941669d30add0b91688d27db4" + integrity sha512-pBdAGtnAY2maitZyIxET+2YZDsJCiKFclgq2Y2jMpBp8Z3vh9frn8uIpa3SCtel5dKlMK3eLTa4aFQYvCy3l3g== dependencies: - "@chakra-ui/close-button" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/popper" "1.0.0-rc.8" - "@chakra-ui/portal" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/close-button" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/popper" "1.0.1" + "@chakra-ui/portal" "1.0.1" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/popper@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-1.0.0-rc.8.tgz#b388b5a07b02f62c2ac27e1c75acf663c5de4ab4" - integrity sha512-MAqCdf6/vLaJZr+YnRr9b1iceOdViM6TUnNKejLVQBEVunWxFQAqAlTWnatmqcjNaYO/pcd95lQ71TVqQdKmIw== +"@chakra-ui/popper@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-1.0.1.tgz#4d45ed1186c3db427d0c4dd4c43b303996e717c2" + integrity sha512-2PJeVl9KgIQpmu2r6XKDumCELBeYdgugX1GSAXPK6lvd7tO+LiFhUl46W3k4qmzi79MmXQ3e/VLw158iTUDTeg== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" "@popperjs/core" "2.4.4" dequal "2.0.2" -"@chakra-ui/portal@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.0.0-rc.8.tgz#5745038c411e5aa2a9e1588e6283f7716a4c0912" - integrity sha512-jkDY7BawoupgIgEcYNS2X/wO7gSRappzqOfvAj0VxPMREvrQOclIBWoTLad5UAQJp+OP1BzAwPzpo79OC8IaYQ== +"@chakra-ui/portal@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.0.1.tgz#6c1aa0015ce6387a01a5a40f2d7e2fa744b8f534" + integrity sha512-yHB3OX6T9GK0XoCZaZkRqIct/WrH64PrAMNnFDw9VNG9ZnEIr8RGenD0kt1G9grjB1SI58emQr5BreKUAAH2Pg== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/progress@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.0.0-rc.8.tgz#a88c7385318bb16982371a38816782e0ea217366" - integrity sha512-rgo1A34tEAErzRTnmv8E+4bf2PVfka+Rm7nInBL/hptIa2JeC7YtwuiV20yBITJhwBYP2NTgF1S0KmINzpi61g== +"@chakra-ui/progress@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.0.1.tgz#3066d3fcdade8a34dc50712c9480ab75a8e789c5" + integrity sha512-G9LeT8Pj/UqaZ2KwtaLH8M8pAvR1bXREEetuQl5qaICxL0Ndyr2xeYd/Cpk6bKUXw5t73kLVZnecXuJJ0qDhKA== dependencies: - "@chakra-ui/theme-tools" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/theme-tools" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/radio@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.0.0-rc.8.tgz#f177a12a7534abc22d013b5df8d5b1d8c9f170c7" - integrity sha512-ecsUP7rcUgVIlUHhkWmHYYe0DKymuOpEPKuzJkagDl425vKyg4Z9hPtHC0aFLesWD+wLcHwbpDUQTyrtuK7qow== +"@chakra-ui/radio@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.0.1.tgz#7522210fbb83049215b41b618610ca8221a99b8a" + integrity sha512-gfZJX1WfIcIciYGk+xVfczjHtmA8oX9oBSXsxsJfNaVo1Jocv0pGexOEVZfqCFT7UG9L8oP4x/N9DNTbu7OE0A== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" -"@chakra-ui/select@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.0.0-rc.8.tgz#148cb907513019cd9e150403ad58b3936fc5362d" - integrity sha512-Tig2DGhkkwxUuJRnDNW5DwBRkt1kJN3uVL3NKV87MSMXSzhtWz2/CceaLmfaFa+gY5ehr5HG36cYWXStrph8Zw== +"@chakra-ui/react@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.0.1.tgz#1003658936d160a0db328300e0a785e8bd867154" + integrity sha512-o2+8r27QApMG5d2mSOnhd/5UBApQbSvdXJsdaElDc/kShDn/MytZ88fctoZKSrAxPf+uvEhgeXwQkf4w0cth7Q== dependencies: - "@chakra-ui/form-control" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/accordion" "1.0.1" + "@chakra-ui/alert" "1.0.1" + "@chakra-ui/avatar" "1.0.1" + "@chakra-ui/breadcrumb" "1.0.1" + "@chakra-ui/button" "1.0.1" + "@chakra-ui/checkbox" "1.0.1" + "@chakra-ui/close-button" "1.0.1" + "@chakra-ui/control-box" "1.0.1" + "@chakra-ui/counter" "1.0.1" + "@chakra-ui/css-reset" "1.0.0" + "@chakra-ui/editable" "1.0.1" + "@chakra-ui/form-control" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/image" "1.0.1" + "@chakra-ui/input" "1.0.1" + "@chakra-ui/layout" "1.0.1" + "@chakra-ui/live-region" "1.0.1" + "@chakra-ui/media-query" "1.0.1" + "@chakra-ui/menu" "1.0.1" + "@chakra-ui/modal" "1.1.0" + "@chakra-ui/number-input" "1.0.1" + "@chakra-ui/pin-input" "1.0.1" + "@chakra-ui/popover" "1.0.1" + "@chakra-ui/popper" "1.0.1" + "@chakra-ui/portal" "1.0.1" + "@chakra-ui/progress" "1.0.1" + "@chakra-ui/radio" "1.0.1" + "@chakra-ui/select" "1.0.1" + "@chakra-ui/skeleton" "1.0.1" + "@chakra-ui/slider" "1.0.1" + "@chakra-ui/spinner" "1.0.1" + "@chakra-ui/stat" "1.0.1" + "@chakra-ui/switch" "1.0.1" + "@chakra-ui/system" "1.0.1" + "@chakra-ui/tabs" "1.0.1" + "@chakra-ui/tag" "1.0.1" + "@chakra-ui/textarea" "1.0.1" + "@chakra-ui/theme" "1.1.0" + "@chakra-ui/toast" "1.0.1" + "@chakra-ui/tooltip" "1.0.1" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" -"@chakra-ui/skeleton@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.0.0-rc.8.tgz#0441919e823748b75594eab05d80bc9e97b3d525" - integrity sha512-AmSEyzC5eROn6WHE6xTTSy4i2HJKRI4ET0T7k20fZOsaraul/KnmKFE11K/Mf4q3vsqSNLjLu8Z+NRRwvpLSOg== +"@chakra-ui/select@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.0.1.tgz#85510da90e08f9b3893c249a2982f895384c2b44" + integrity sha512-T2JKypCwovWY6uKfaCaiReCp45xvic4lWRe/VLaZM5Ydv4WiKMs+rVmw+89n1WbB237X19yKHmtsMlqsBEK+Hw== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/media-query" "1.0.0-rc.8" - "@chakra-ui/system" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/form-control" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/slider@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.0.0-rc.8.tgz#6d47d23a03b429bb1468a3a9de6a3bdb66aea01a" - integrity sha512-56N7dTHyh4PeUbeZFUuqS+pva7p7uAvuK2/EnVkpDzpHgCf6wFltuzM5m67XG2jAd2WFxAt7j6m76PIGxy1OWQ== +"@chakra-ui/skeleton@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.0.1.tgz#44ce397a767ccb9400adedb5ca0b172afd766949" + integrity sha512-R/kFxDwYwLLatd+w9l0iKPCc3eLcYCcno64+zxhY+5q4Ug/xOeYcYL0RLySbIn/n/9/iOL0clTo0E+v2qKvo4w== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/media-query" "1.0.1" + "@chakra-ui/system" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/spinner@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.0.0-rc.8.tgz#04c3149af4f13bc87c1099c06bcfa98635a9e752" - integrity sha512-6XXdFwZM4BQo1JJbvcarRaDIp1LCuYBhh6QdtLaIjLcKMFOM8fttmLgxSRpQOSKBw21YIGLpqWknEaOjBDaI2A== +"@chakra-ui/slider@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.0.1.tgz#38a95081a0c2d1bdbc7166ed8ac2035a38207ad2" + integrity sha512-9q4V4p/P/5azVNOxQ+ZbHCLbHHcxS82TWGd5wzcodvkx+v4n+5chboRjZrwJ157Rr0ikLZsmoKvW0mnLH8Qn0g== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/stat@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.0.0-rc.8.tgz#d7385326ae1dc4d6a0c2b5d927bdcb9ae1f08530" - integrity sha512-4a4SBB3rvhh+0NKr+4LcFHS1bMOXrIRKLvjo9xvhZrlow1XMnajryIUt/m5WhuaqxiVYsNzIQwyWNNWuxgXjHw== +"@chakra-ui/spinner@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.0.1.tgz#d7927e7e1fcdf71a46e94cf08ba7ae1609639c8e" + integrity sha512-Mdf7LG9lzsm5E/e6aG1f0YrXZTeNqlColiE+5iC/AExLBnfzzbga+fgu5az4E6p6lFqbDFO3Riz7CjuJL5RO5w== dependencies: - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" -"@chakra-ui/styled-system@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.0.0-rc.8.tgz#0b55145493c9833bd2fb31d65acb8e992093e238" - integrity sha512-SaxZrljWayOUQPxje6IkfDyIujoptRSjp4rBZpzju7KgPz4Ledv5ygg9GaxwowlGKFlVpdvo79QAhff0WKNcrg== +"@chakra-ui/stat@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.0.1.tgz#b829d3f06f891c6aefc79202d624688451a22e75" + integrity sha512-Jya/dodkPj7EbSGlVtc+ssUiIU1duoVimJ9PJ697VjEOq1nOieWoienajgzboz9BZWJPOZ5w8zEp6jEwCYWzAg== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" + +"@chakra-ui/styled-system@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.1.0.tgz#c0f5c104404ec500b42eed7aea9d45d93ca9540f" + integrity sha512-7TxpFV3GWF0Y3dDzGkBjPs5LNOzm2Xz1P5lEz9Ytm9OMbnOZLa9O+B2WszhBuTrLpARsCf7ymdSDmqG/+R6mFA== + dependencies: + "@chakra-ui/utils" "1.0.1" "@styled-system/core" "5.1.2" css-get-unit "1.0.1" csstype "3.0.3" -"@chakra-ui/switch@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.0.0-rc.8.tgz#1797f998bba1e74c9241a95f8fbe1f1625a596f4" - integrity sha512-LnWYSs+eOeWui3GnC2qtKMfHwLi4WVrOmTrwlEgQ+kXjUPNlenIryTUFyTguQhd4yqZ3ph93khW2kl+9DNJcnw== +"@chakra-ui/switch@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.0.1.tgz#64cb446e2e16985f53ca8fb7c0ac35c93e4f1f8f" + integrity sha512-bJZiqqxzBVaSy6FKCxYXBj7AKmjRDRNd0cZ4sQmmL5Y2aJ7M/RQ8c3FsVrC4hiVqElqFws1MaOktqI28jw4J1g== dependencies: - "@chakra-ui/checkbox" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/checkbox" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/system@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.0.0-rc.8.tgz#0bca9a5d649ec3c44004a872f3e171567ccd6c7c" - integrity sha512-+jBXq15wwzvUht8weW/Svbuw704ArWdnto/mrfMJdB+ZVpyekhiD2lRoMJu5bxX7iD8sKhkKr5UjSRh97Gcdiw== +"@chakra-ui/system@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.0.1.tgz#f5d7dcd8911ebbfeefc3522d22905f19e7137b86" + integrity sha512-xN5f4Bv8x9Gbb0AxWQcSAcr3YF5JWH7DynVUpBl47USdaLZGLEEJ3oNTBeatVnGAEuYz8iO6cRz87gYDwXN9Ag== dependencies: - "@chakra-ui/color-mode" "1.0.0-rc.8" - "@chakra-ui/styled-system" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@emotion/core" "10.0.35" - "@emotion/styled" "10.0.27" + "@chakra-ui/color-mode" "1.0.1" + "@chakra-ui/styled-system" "1.1.0" + "@chakra-ui/utils" "1.0.1" react-fast-compare "3.2.0" -"@chakra-ui/tabs@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.0.0-rc.8.tgz#407ac59a73ee838ccd9ccd290d820a4a3e6e7d86" - integrity sha512-7bGm/5RsjbFavlt4Qog6+hayTdsXi3J/UTpbHX3QgXuFvPuCvv2pqThRaljvzA16DqOAdo+vuWDREcVmpS0tCw== +"@chakra-ui/tabs@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.0.1.tgz#0a50225786975fdd22d21de40598e40bb77f9619" + integrity sha512-iUVEHRw2wb+aav7DB2gdTPa3TbQYLemFK9krH31C0trLMK90QDMtgG1JfVUdQMg33d93dCG6+po2z77mVBanOw== dependencies: - "@chakra-ui/clickable" "1.0.0-rc.8" - "@chakra-ui/descendant" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/clickable" "1.0.1" + "@chakra-ui/descendant" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/tag@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.0.0-rc.8.tgz#5d7cd51eb77288f8ceb48fa6de34935e48b55653" - integrity sha512-fIxnhJ5sNGBYxe35+Mq0ZUtQiu3sshtIgGRm5l3hlzpTPBNVwkG5zJbra11NAj0WzOWPg7Khl9H1jvrDD5C9Tw== +"@chakra-ui/tag@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.0.1.tgz#d3b663ec7bc0e3cdac37dc0d1da0b041704bd5ce" + integrity sha512-oIvzvna9pbQ4rKkzSNqlzE71m5JjSPzo4NHeVKCMP9FwYVEWPNNEp6PqLLxmBl8K9OZe4sMaYcHwDjW2VFlo8Q== dependencies: - "@chakra-ui/icon" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/icon" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/textarea@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.0.0-rc.8.tgz#4b831d9ba24b79744cb031c4b732b384d06e51c3" - integrity sha512-ZI4PWEOPXzpqdG7A48AXRFsBIOFVGCm13X1e1aGot18QlPJe7jCKTLRDrpVairMbFdLysjgzFr9DfO3G3V8BnA== +"@chakra-ui/textarea@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.0.1.tgz#9a95b1f175b70777457088fd7916245cda937f94" + integrity sha512-/GRlpY+OKoLhvSlCFUW576F9PaARUfhyHesUHgB7FlzOgd6VMRXCnns1zKMoLooS/q+onJP37HKuAJxdkXAUAw== dependencies: - "@chakra-ui/form-control" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/form-control" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/theme-tools@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.0-rc.8.tgz#6be5c3ccdc34904893dbe73ad7db371c6c674988" - integrity sha512-z9suTMHa+La8mpYKS3c601PMa9YMtZqJCucflPXqTvHog8YMJFgsw2nAV5hdtmE81L6z/qzhNxrS8W+uzXrmCQ== +"@chakra-ui/theme-tools@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.0.1.tgz#f13e009c2b9d2e1b990854d910867cded04ed072" + integrity sha512-bBcaf0Zi2NNRFCs4QLL4XWIUSI1n5wMuBL6q9dAOkdrU/J9OCX0Xub86VVeQgrYYmUOMpNbaaIb1QNMCXNiJHw== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" "@types/tinycolor2" "1.4.2" - tinycolor2 "1.4.1" + tinycolor2 "1.4.2" -"@chakra-ui/theme@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.0.0-rc.8.tgz#7033c61f2bbc5984960b38f34d621dea62a7f11d" - integrity sha512-P7X6j2WqTR2YpqXjX5dAWQ6N9QwB11QOwuPL1V+wQoQVIIcElUm9koibhWPN8oUqDteTPa9lQ+cK79RIJ2bw4w== +"@chakra-ui/theme@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.1.0.tgz#c279cd3c252b448a0e6a191975c8200921a56cd0" + integrity sha512-Za/2uNM+3SugRlEhyYK01d6sy96TrkeyDXNnNZ9ENo6BiVlijQKuve2BIgS7f0ktcaA8qPci6v4uBDKR9WMPOQ== dependencies: - "@chakra-ui/theme-tools" "1.0.0-rc.8" + "@chakra-ui/theme-tools" "1.0.1" -"@chakra-ui/toast@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.0.0-rc.8.tgz#277f95f4447d6a5a198f769a36d40011039209a7" - integrity sha512-Ivc8iTxKOq5bN2cC1v91nj60GesZnEqQ0W0CXXjWSGHzYBge3JkZpZH6mu5R5PHB+Tke3+orGQ5q8aGSTMUlrQ== +"@chakra-ui/toast@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.0.1.tgz#a31026624b14c82ec523a673d82dd3b7a43bcf4b" + integrity sha512-c8NLX7e8b88H0p+zR7BfI1iN/8ECJ2NL6Cu+7tbMmtBPx1OAU+W+B/eCxa/XgQ6yhAKnxA6WzDMO0ULK2OK0gQ== dependencies: - "@chakra-ui/alert" "1.0.0-rc.8" - "@chakra-ui/close-button" "1.0.0-rc.8" - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/theme" "1.0.0-rc.8" - "@chakra-ui/transition" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/alert" "1.0.1" + "@chakra-ui/close-button" "1.0.1" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/theme" "1.1.0" + "@chakra-ui/transition" "1.0.1" + "@chakra-ui/utils" "1.0.1" "@reach/alert" "0.11.0" -"@chakra-ui/tooltip@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.0.0-rc.8.tgz#2a401f7e486272cc04f4239a7b687416496ad9de" - integrity sha512-kXXBM9MMIDZ6Sf5PgPeAvhgbIq/TTorCYk0mp4kZ68V5LUijNpwmi5g0Szqw5DNo1dGW+MSj221qoiFCr9abuQ== +"@chakra-ui/tooltip@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.0.1.tgz#257685c541748e6723cbe26c265f818ca97808d3" + integrity sha512-xaa9/wX41nKD6IHYzNFtLUuj4UeoIE6LwOqvE+sx/eNTFDOu2owBymJxx1DmD14phQrew2yZjAiHJ7UuAcOj/A== dependencies: - "@chakra-ui/hooks" "1.0.0-rc.8" - "@chakra-ui/popper" "1.0.0-rc.8" - "@chakra-ui/portal" "1.0.0-rc.8" - "@chakra-ui/utils" "1.0.0-rc.8" - "@chakra-ui/visually-hidden" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/popper" "1.0.1" + "@chakra-ui/portal" "1.0.1" + "@chakra-ui/utils" "1.0.1" + "@chakra-ui/visually-hidden" "1.0.1" -"@chakra-ui/transition@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.0.0-rc.8.tgz#e797e54e070641e4c4c75f9e49c2b3b511f7bf99" - integrity sha512-JT40Uh+FVtl3iks8eL1zA4JIXFKoJNsJzCuejxX6HOStYdWM/+ygf0NsLIAIJyvA3v4INXR1h/yNnNWEN3Nolg== +"@chakra-ui/transition@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.0.1.tgz#ff7107e38d16f939686a8f24e5e61a1a85dc1acc" + integrity sha512-BkDoViy17aEkMXOYN5CEl7RMhTH4NEhaKOyUX1PVghJBTyov8hpBuIbc/c80b+I/iK/ftHrP+RcLSEeu84W/bg== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/hooks" "1.0.1" + "@chakra-ui/utils" "1.0.1" -"@chakra-ui/utils@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.0.0-rc.8.tgz#b485f27b0c8a569ce127fea1414e1223ea4e363d" - integrity sha512-FgmKvJ18cM1f2/49EyzJu18KAcgu0En0DjcmsflMFqjW9AQqi0Z2llhcXA/naX4VpqQ2fLf+tU8vbGYK2sY3fw== +"@chakra-ui/utils@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.0.1.tgz#b050af53ecd346163479b386d189f40c995509cf" + integrity sha512-ASxUtuBcZwwFTk51Lz+yt6fTbZVOWJy2kbwS+7AMXWVrZrXxMIe90zO9AMgL2oXQzHUTzBL0O+T2qK5ezAZDSw== dependencies: "@types/lodash.mergewith" "4.6.6" "@types/object-assign" "4.0.30" @@ -1571,12 +1593,30 @@ lodash.mergewith "4.6.2" object-assign "4.1.1" -"@chakra-ui/visually-hidden@1.0.0-rc.8": - version "1.0.0-rc.8" - resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.0-rc.8.tgz#141a071d9d38e4a8ec8b8b7defcc9e3b37977c8f" - integrity sha512-qxGhD8ODDA7LAMBNVIxbBRJOlMpkPIfoTP69TeC+QHqBKz87y6EeKZoT0zXbye9kFj1EZhUGdzq4vxMBiMzOTw== +"@chakra-ui/visually-hidden@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.1.tgz#3341f66d2aec70513d2b3391b88e2b0d247c7fd5" + integrity sha512-s6mJRj7o/flxu1s5F+t0gGSMDbHEwZdurv+IBs2kaLthJJMil70lZQewduk33qiYRu3g2XjPPhzbHHzjR2aJAA== dependencies: - "@chakra-ui/utils" "1.0.0-rc.8" + "@chakra-ui/utils" "1.0.1" + +"@emotion/babel-plugin@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.0.0.tgz#e6f40fa81ef52775773a53d50220c597ebc5c2ef" + integrity sha512-w3YP0jlqrNwBBaSI6W+r80fOKF6l9QmsPfLNx5YWSHwrxjVZhM+L50gY7YCVAvlfr1/qdD1vsFN+PDZmLvt42Q== + dependencies: + "@babel/helper-module-imports" "^7.7.0" + "@babel/plugin-syntax-jsx" "^7.12.1" + "@babel/runtime" "^7.7.2" + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/serialize" "^1.0.0" + babel-plugin-macros "^2.6.1" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "^4.0.3" "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9": version "10.0.29" @@ -1588,7 +1628,18 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@10.0.35", "@emotion/core@^10.0.9": +"@emotion/cache@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.0.0.tgz#473adcaf9e04c6a0e30fb1421e79a209a96818f8" + integrity sha512-NStfcnLkL5vj3mBILvkR2m/5vFxo3G0QEreYKDGHNHm9IMYoT/t3j6xwjx6lMI/S1LUJfVHQqn0m9wSINttTTQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "^4.0.3" + +"@emotion/core@^10.0.9": version "10.0.35" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== @@ -1609,23 +1660,43 @@ "@emotion/utils" "0.11.3" babel-plugin-emotion "^10.0.27" -"@emotion/hash@0.8.0": +"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2": +"@emotion/is-prop-valid@^0.8.2": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== dependencies: "@emotion/memoize" "0.7.4" -"@emotion/memoize@0.7.4": +"@emotion/is-prop-valid@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be" + integrity sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ== + dependencies: + "@emotion/memoize" "^0.7.4" + +"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/react@^11.1.1": + version "11.1.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.1.tgz#4b304d494af321b0179e6763830e07cf674f0423" + integrity sha512-otA0Np8OnOeU9ChkOS9iuLB6vIxiM+bJiU0id33CsQn3R2Pk9ijVHnxevENIKV/P2S7AhrD8cFbUGysEciWlEA== + dependencies: + "@babel/runtime" "^7.7.2" + "@emotion/cache" "^11.0.0" + "@emotion/serialize" "^1.0.0" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": version "0.11.16" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" @@ -1637,35 +1708,44 @@ "@emotion/utils" "0.11.3" csstype "^2.5.7" +"@emotion/serialize@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.0.tgz#1a61f4f037cf39995c97fc80ebe99abc7b191ca9" + integrity sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + "@emotion/sheet@0.9.4": version "0.9.4" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== -"@emotion/styled-base@^10.0.27": - version "10.0.31" - resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a" - integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ== - dependencies: - "@babel/runtime" "^7.5.5" - "@emotion/is-prop-valid" "0.8.8" - "@emotion/serialize" "^0.11.15" - "@emotion/utils" "0.11.3" +"@emotion/sheet@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.0.tgz#a0ef06080f339477ad4ba7f56e1c931f7ba50822" + integrity sha512-cdCHfZtf/0rahPDCZ9zyq+36EqfD/6c0WUqTFZ/hv9xadTUv2lGE5QK7/Z6Dnx2oRxC0usfVM2/BYn9q9B9wZA== -"@emotion/styled@10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" - integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== +"@emotion/styled@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.0.0.tgz#698196c2822746360a8644a73a5d842b2d1a78a5" + integrity sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ== dependencies: - "@emotion/styled-base" "^10.0.27" - babel-plugin-emotion "^10.0.27" + "@babel/runtime" "^7.7.2" + "@emotion/babel-plugin" "^11.0.0" + "@emotion/is-prop-valid" "^1.0.0" + "@emotion/serialize" "^1.0.0" + "@emotion/utils" "^1.0.0" "@emotion/stylis@0.8.5": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -1675,7 +1755,12 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== -"@emotion/weak-memoize@0.2.5": +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== @@ -1751,22 +1836,6 @@ dependencies: mkdirp "^1.0.4" -"@popmotion/easing@^1.0.1", "@popmotion/easing@^1.0.2": - version "1.0.2" - resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4" - integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw== - -"@popmotion/popcorn@^0.4.2", "@popmotion/popcorn@^0.4.4": - version "0.4.4" - resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.4.4.tgz#a5f906fccdff84526e3fcb892712d7d8a98d6adc" - integrity sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg== - dependencies: - "@popmotion/easing" "^1.0.1" - framesync "^4.0.1" - hey-listen "^1.0.8" - style-value-types "^3.1.7" - tslib "^1.10.0" - "@popperjs/core@2.4.4": version "2.4.4" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398" @@ -1836,9 +1905,9 @@ "@types/lodash" "*" "@types/lodash@*": - version "4.14.162" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.162.tgz#65d78c397e0d883f44afbf1f7ba9867022411470" - integrity sha512-alvcho1kRUnnD1Gcl4J+hK0eencvzq9rmzvFPRmP5rPHx9VVsJj6bKLTATPVf9ktgv4ujzh7T+XWKp+jhuODig== + version "4.14.165" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f" + integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg== "@types/node@^14.11.10": version "14.11.10" @@ -1876,10 +1945,10 @@ "@types/react-dom" "*" "@types/react-transition-group" "*" -"@types/react-table@7.0.4": - version "7.0.4" - resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.4.tgz#246d39bea82d6286f1bffabede0b5a3e352e94db" - integrity sha512-GSZCnNpFoPS4G13lOTCfeCq8STvkBuU/i+M0smdC/yvs10R8fsJKvV7YuomO3nDdvb504Xc+bIBsotOsqk+baA== +"@types/react-table@^7.0.25": + version "7.0.25" + resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.25.tgz#79efba1c58149d75b3c030634ed36215b7ba8390" + integrity sha512-MLWxIiFKIW2CjcB8yQ5LfLNyVfwXfIYm2yrQfTkroK5tJ3Ai+Xzq73EQcdKWQvi/nLk431v2WV0cf30VQV+5Ow== dependencies: "@types/react" "*" @@ -2153,6 +2222,11 @@ acorn@^7.1.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== +add@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235" + integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU= + adjust-sourcemap-loader@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4" @@ -2449,7 +2523,7 @@ babel-plugin-emotion@^10.0.27: find-root "^1.1.0" source-map "^0.5.7" -babel-plugin-macros@^2.0.0: +babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -3704,6 +3778,11 @@ escape-string-regexp@^1.0.5: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + eslint-config-react-app@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df" @@ -4177,23 +4256,20 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" -framer-motion@^1.10.0: - version "1.11.1" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-1.11.1.tgz#b031d1556a78854e0989b8c7e96418c6e15aa474" - integrity sha512-CP6aYLPSivAWkq9UoSurefHBggxG85IT8ObYyWYkcZppgtjHzpwRzhaA8P0ljMGRqtcpeQAIybiGgPioBPlOSw== +framer-motion@^2.9.4: + version "2.9.4" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.4.tgz#366656ae240776c923cbd4359815e5c1ed56084d" + integrity sha512-Bvgdwpu5UO6VnEEwenJEmnGeo9ILRRWh9f3iIX+71NiM5X60Qi6KlkBFGZc9DGbdIUAn0AYgaxVhTKL39OOYng== dependencies: - "@popmotion/easing" "^1.0.2" - "@popmotion/popcorn" "^0.4.2" - framesync "^4.0.4" + framesync "^4.1.0" hey-listen "^1.0.8" - popmotion "9.0.0-beta-8" - style-value-types "^3.1.6" - stylefire "^7.0.2" + popmotion "9.0.0-rc.20" + style-value-types "^3.1.9" tslib "^1.10.0" optionalDependencies: "@emotion/is-prop-valid" "^0.8.2" -framesync@^4.0.0, framesync@^4.0.1, framesync@^4.0.4: +framesync@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a" integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ== @@ -4406,6 +4482,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + html-to-react@^1.3.4: version "1.4.4" resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.4.tgz#dd5edb76ff28ab7fc34faabd91446bece292dc38" @@ -5890,16 +5973,14 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" -popmotion@9.0.0-beta-8: - version "9.0.0-beta-8" - resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-beta-8.tgz#f5a709f11737734e84f2a6b73f9bcf25ee30c388" - integrity sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA== +popmotion@9.0.0-rc.20: + version "9.0.0-rc.20" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d" + integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg== dependencies: - "@popmotion/easing" "^1.0.1" - "@popmotion/popcorn" "^0.4.2" - framesync "^4.0.4" + framesync "^4.1.0" hey-listen "^1.0.8" - style-value-types "^3.1.6" + style-value-types "^3.1.9" tslib "^1.10.0" posix-character-classes@^0.1.0: @@ -6206,7 +6287,7 @@ react-input-autosize@^2.2.2: dependencies: prop-types "^15.5.8" -react-is@16.13.1, react-is@^16.8.1, react-is@^16.8.6: +react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -6231,9 +6312,9 @@ react-refresh@0.8.3: integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== react-remove-scroll-bar@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9" - integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g== + version "2.1.1" + resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.1.tgz#5876428dfd546f2f63a4d277aea2197925505c1e" + integrity sha512-IZbfQPSozIr8ylHE9MFcQeb2TTzj4abfE7OBXjmtUeXQ5h6ColGKDNo5h7OmzrJRilAx3YIKBf3jb0yrb31BJQ== dependencies: react-style-singleton "^2.1.0" tslib "^1.0.0" @@ -6271,18 +6352,18 @@ react-string-replace@^0.4.4: lodash "^4.17.4" react-style-singleton@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4" - integrity sha512-DH4ED+YABC1dhvSDYGGreAHmfuTXj6+ezT3CmHoqIEfxNgEYfIMoOtmbRp42JsUst3IPqBTDL+8r4TF7EWhIHw== + version "2.1.1" + resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66" + integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA== dependencies: get-nonce "^1.0.0" invariant "^2.2.4" tslib "^1.0.0" -react-table@^7.0.4: - version "7.6.0" - resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.6.0.tgz#83d765b96505b5332d108a2e0c27ab653f5a78c3" - integrity sha512-16kRTypBWz9ZwLnPWA8hc3eIC64POzO9GaMBiKaCcVM+0QOQzt0G7ebzGUM8SW0CYUpVM+glv1kMXrWj9tr3Sw== +react-table@^7.6.2: + version "7.6.2" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.6.2.tgz#b60932fa6d457c2bca0da49815cd6a8fe9451f77" + integrity sha512-urwNZTieb+xg/+BITUIrqdH5jZfJlw7rKVAAq25iXpBPwbQojLCEKJuGycLbVwn8fzU+Ovly3y8HHNaLNrPCvQ== react-transition-group@^4.3.0: version "4.4.1" @@ -7041,7 +7122,7 @@ style-loader@1.2.1: loader-utils "^2.0.0" schema-utils "^2.6.6" -style-value-types@^3.1.6, style-value-types@^3.1.7: +style-value-types@^3.1.9: version "3.1.9" resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc" integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw== @@ -7063,17 +7144,6 @@ styled-jsx@3.3.0: stylis "3.5.4" stylis-rule-sheet "0.0.10" -stylefire@^7.0.2: - version "7.0.3" - resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-7.0.3.tgz#9120ecbb084111788e0ddaa04074799750f20d1d" - integrity sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ== - dependencies: - "@popmotion/popcorn" "^0.4.4" - framesync "^4.0.0" - hey-listen "^1.0.8" - style-value-types "^3.1.7" - tslib "^1.10.0" - stylis-rule-sheet@0.0.10: version "0.0.10" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" @@ -7084,6 +7154,11 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +stylis@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.3.tgz#0d714765f3f694a685550f0c45411ebf90a9bded" + integrity sha512-iAxdFyR9cHKp4H5M2dJlDnvcb/3TvPprzlKjvYVbH7Sh+y8hjY/mUu/ssdcvVz6Z4lKI3vsoS0jAkMYmX7ozfA== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -7206,10 +7281,10 @@ tiny-invariant@^1.0.6: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== -tinycolor2@1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" - integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g= +tinycolor2@1.4.2: + version "1.4.2" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803" + integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA== tmp@^0.0.33: version "0.0.33" @@ -7552,11 +7627,6 @@ use-callback-ref@^1.2.1, use-callback-ref@^1.2.3: resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c" integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ== -use-media@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98" - integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA== - use-sidecar@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.3.tgz#17a4e567d4830c0c0ee100040e85a7fe68611e0f" @@ -7795,6 +7865,11 @@ yaml@^1.7.2: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e" integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg== +yarn@^1.22.10: + version "1.22.10" + resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.10.tgz#c99daa06257c80f8fa2c3f1490724e394c26b18c" + integrity sha512-IanQGI9RRPAN87VGTF7zs2uxkSyQSrSPsju0COgbsKQOOXr5LtcVPeyXWgwVa0ywG3d8dg6kSYKGBuYK021qeA== + yup@^0.28.3: version "0.28.5" resolved "https://registry.yarnpkg.com/yup/-/yup-0.28.5.tgz#85cabb4000d3623ef69be81551190692e631a8a5"