From 93adc09e6383c4aa0b93eeca13dc0ae360272755 Mon Sep 17 00:00:00 2001 From: thatmattlove Date: Sat, 18 Dec 2021 23:45:06 -0700 Subject: [PATCH] refactor, restructure typescript types --- hyperglass/ui/components/card/body.tsx | 8 +- hyperglass/ui/components/card/footer.tsx | 4 +- hyperglass/ui/components/card/header.tsx | 4 +- hyperglass/ui/components/card/types.ts | 9 - .../{codeBlock.tsx => code-block.tsx} | 0 .../components/{countdown => }/countdown.tsx | 15 +- hyperglass/ui/components/countdown/index.ts | 1 - hyperglass/ui/components/countdown/types.ts | 10 - hyperglass/ui/components/footer/button.tsx | 10 +- .../footer/{colorMode.tsx => color-mode.tsx} | 10 +- hyperglass/ui/components/footer/footer.tsx | 4 +- hyperglass/ui/components/footer/link.tsx | 6 +- hyperglass/ui/components/footer/types.ts | 26 --- .../{form/field.tsx => form-field.tsx} | 12 +- .../components/{form/row.tsx => form-row.tsx} | 0 hyperglass/ui/components/form/index.ts | 6 - hyperglass/ui/components/form/types.ts | 40 ---- .../ui/components/{greeting => }/greeting.tsx | 4 +- hyperglass/ui/components/greeting/index.ts | 1 - hyperglass/ui/components/greeting/types.ts | 3 - hyperglass/ui/components/header/logo.tsx | 4 +- .../{subtitleOnly.tsx => subtitle-only.tsx} | 0 .../header/{titleOnly.tsx => title-only.tsx} | 0 hyperglass/ui/components/header/title.tsx | 27 ++- hyperglass/ui/components/header/types.ts | 29 --- hyperglass/ui/components/index.ts | 17 +- .../ui/components/{label => }/label.tsx | 15 +- hyperglass/ui/components/label/index.ts | 1 - hyperglass/ui/components/label/types.ts | 9 - hyperglass/ui/components/layout/frame.tsx | 6 +- hyperglass/ui/components/layout/layout.tsx | 4 +- .../{resetButton.tsx => reset-button.tsx} | 9 +- hyperglass/ui/components/layout/types.ts | 8 - .../{loadError.tsx => load-error.tsx} | 2 +- hyperglass/ui/components/loading.tsx | 2 +- .../components/{form => }/location-card.tsx | 11 +- ...ookingGlass.tsx => looking-glass-form.tsx} | 2 +- .../ui/components/markdown/elements.tsx | 55 +++-- .../ui/components/markdown/markdown.tsx | 7 +- hyperglass/ui/components/markdown/types.ts | 31 --- .../{noconfig.tsx => no-config.tsx} | 0 .../output/{table.tsx => bgp-table.tsx} | 14 +- hyperglass/ui/components/output/cell.tsx | 9 +- hyperglass/ui/components/output/fields.tsx | 63 ++++-- hyperglass/ui/components/output/index.ts | 4 +- .../output/{text.tsx => text-output.tsx} | 6 +- hyperglass/ui/components/output/types.ts | 50 ----- hyperglass/ui/components/path/chart.tsx | 21 +- .../path/{button.tsx => path-button.tsx} | 6 +- hyperglass/ui/components/path/path.tsx | 8 +- hyperglass/ui/components/path/types.ts | 29 --- hyperglass/ui/components/path/useElements.ts | 6 +- .../queryLocation.tsx => query-location.tsx} | 13 +- .../queryTarget.tsx => query-target.tsx} | 15 +- .../{form/queryType.tsx => query-type.tsx} | 14 +- ...resolvedTarget.tsx => resolved-target.tsx} | 5 +- .../{copyButton.tsx => copy-button.tsx} | 8 +- .../{error.tsx => formatted-error.tsx} | 19 +- hyperglass/ui/components/results/header.tsx | 13 +- .../ui/components/results/individual.tsx | 205 +++++++++--------- .../{requeryButton.tsx => requery-button.tsx} | 15 +- hyperglass/ui/components/results/types.ts | 31 --- hyperglass/ui/components/select/select.tsx | 8 +- hyperglass/ui/components/select/types.ts | 6 +- .../{submit/submit.tsx => submit-button.tsx} | 9 +- hyperglass/ui/components/submit/index.ts | 1 - hyperglass/ui/components/submit/types.ts | 9 - hyperglass/ui/components/table/button.tsx | 4 +- hyperglass/ui/components/table/cell.tsx | 9 +- hyperglass/ui/components/table/index.ts | 6 - hyperglass/ui/components/table/main.tsx | 23 +- .../table/{pageSelect.tsx => page-select.tsx} | 2 +- hyperglass/ui/components/table/row.tsx | 14 +- hyperglass/ui/components/table/types.ts | 30 --- .../{form/userIP.tsx => user-ip.tsx} | 4 +- hyperglass/ui/hooks/types.ts | 44 ---- hyperglass/ui/hooks/useASNDetail.ts | 17 +- hyperglass/ui/hooks/useDNSQuery.ts | 3 +- hyperglass/ui/hooks/useDevice.ts | 17 +- hyperglass/ui/hooks/useDirective.ts | 2 +- hyperglass/ui/hooks/useFormState.ts | 6 +- hyperglass/ui/hooks/useLGQuery.ts | 24 +- hyperglass/ui/hooks/useOpposingColor.ts | 11 +- hyperglass/ui/hooks/useStrf.ts | 2 +- hyperglass/ui/hooks/useTableToString.ts | 19 +- hyperglass/ui/hooks/useWtf.ts | 25 ++- hyperglass/ui/tsconfig.json | 59 ++--- hyperglass/ui/types/caida.ts | 9 - hyperglass/ui/types/data.ts | 17 +- hyperglass/ui/types/globals.d.ts | 15 +- hyperglass/ui/types/guards.ts | 16 +- hyperglass/ui/types/index.ts | 3 - hyperglass/ui/types/table.ts | 4 +- hyperglass/ui/types/util.ts | 4 - hyperglass/ui/types/wtfismyip.ts | 13 -- 95 files changed, 634 insertions(+), 767 deletions(-) delete mode 100644 hyperglass/ui/components/card/types.ts rename hyperglass/ui/components/{codeBlock.tsx => code-block.tsx} (100%) rename hyperglass/ui/components/{countdown => }/countdown.tsx (75%) delete mode 100644 hyperglass/ui/components/countdown/index.ts delete mode 100644 hyperglass/ui/components/countdown/types.ts rename hyperglass/ui/components/footer/{colorMode.tsx => color-mode.tsx} (84%) delete mode 100644 hyperglass/ui/components/footer/types.ts rename hyperglass/ui/components/{form/field.tsx => form-field.tsx} (86%) rename hyperglass/ui/components/{form/row.tsx => form-row.tsx} (100%) delete mode 100644 hyperglass/ui/components/form/index.ts delete mode 100644 hyperglass/ui/components/form/types.ts rename hyperglass/ui/components/{greeting => }/greeting.tsx (92%) delete mode 100644 hyperglass/ui/components/greeting/index.ts delete mode 100644 hyperglass/ui/components/greeting/types.ts rename hyperglass/ui/components/header/{subtitleOnly.tsx => subtitle-only.tsx} (100%) rename hyperglass/ui/components/header/{titleOnly.tsx => title-only.tsx} (100%) delete mode 100644 hyperglass/ui/components/header/types.ts rename hyperglass/ui/components/{label => }/label.tsx (84%) delete mode 100644 hyperglass/ui/components/label/index.ts delete mode 100644 hyperglass/ui/components/label/types.ts rename hyperglass/ui/components/layout/{resetButton.tsx => reset-button.tsx} (86%) delete mode 100644 hyperglass/ui/components/layout/types.ts rename hyperglass/ui/components/{loadError.tsx => load-error.tsx} (98%) rename hyperglass/ui/components/{form => }/location-card.tsx (91%) rename hyperglass/ui/components/{lookingGlass.tsx => looking-glass-form.tsx} (99%) delete mode 100644 hyperglass/ui/components/markdown/types.ts rename hyperglass/ui/components/{noconfig.tsx => no-config.tsx} (100%) rename hyperglass/ui/components/output/{table.tsx => bgp-table.tsx} (66%) rename hyperglass/ui/components/output/{text.tsx => text-output.tsx} (84%) delete mode 100644 hyperglass/ui/components/output/types.ts rename hyperglass/ui/components/path/{button.tsx => path-button.tsx} (77%) delete mode 100644 hyperglass/ui/components/path/types.ts rename hyperglass/ui/components/{form/queryLocation.tsx => query-location.tsx} (94%) rename hyperglass/ui/components/{form/queryTarget.tsx => query-target.tsx} (90%) rename hyperglass/ui/components/{form/queryType.tsx => query-type.tsx} (95%) rename hyperglass/ui/components/{form/resolvedTarget.tsx => resolved-target.tsx} (98%) rename hyperglass/ui/components/results/{copyButton.tsx => copy-button.tsx} (74%) rename hyperglass/ui/components/results/{error.tsx => formatted-error.tsx} (60%) rename hyperglass/ui/components/results/{requeryButton.tsx => requery-button.tsx} (58%) delete mode 100644 hyperglass/ui/components/results/types.ts rename hyperglass/ui/components/{submit/submit.tsx => submit-button.tsx} (95%) delete mode 100644 hyperglass/ui/components/submit/index.ts delete mode 100644 hyperglass/ui/components/submit/types.ts rename hyperglass/ui/components/table/{pageSelect.tsx => page-select.tsx} (82%) delete mode 100644 hyperglass/ui/components/table/types.ts rename hyperglass/ui/components/{form/userIP.tsx => user-ip.tsx} (97%) delete mode 100644 hyperglass/ui/types/caida.ts delete mode 100644 hyperglass/ui/types/util.ts delete mode 100644 hyperglass/ui/types/wtfismyip.ts diff --git a/hyperglass/ui/components/card/body.tsx b/hyperglass/ui/components/card/body.tsx index b87d1bd..ed31a30 100644 --- a/hyperglass/ui/components/card/body.tsx +++ b/hyperglass/ui/components/card/body.tsx @@ -1,9 +1,13 @@ import { Flex } from '@chakra-ui/react'; import { useColorValue } from '~/context'; -import type { TCardBody } from './types'; +import type { FlexProps } from '@chakra-ui/react'; -export const CardBody = (props: TCardBody): JSX.Element => { +interface CardBodyProps extends Omit { + onClick?: () => boolean; +} + +export const CardBody = (props: CardBodyProps): JSX.Element => { const { onClick, ...rest } = props; const bg = useColorValue('white', 'dark.500'); const color = useColorValue('dark.500', 'white'); diff --git a/hyperglass/ui/components/card/footer.tsx b/hyperglass/ui/components/card/footer.tsx index 444a7dd..274828e 100644 --- a/hyperglass/ui/components/card/footer.tsx +++ b/hyperglass/ui/components/card/footer.tsx @@ -1,8 +1,8 @@ import { Flex } from '@chakra-ui/react'; -import type { TCardFooter } from './types'; +import type { FlexProps } from '@chakra-ui/react'; -export const CardFooter = (props: TCardFooter): JSX.Element => ( +export const CardFooter = (props: FlexProps): JSX.Element => ( { +export const CardHeader = (props: FlexProps): JSX.Element => { const { children, ...rest } = props; const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100'); return ( diff --git a/hyperglass/ui/components/card/types.ts b/hyperglass/ui/components/card/types.ts deleted file mode 100644 index 739e24e..0000000 --- a/hyperglass/ui/components/card/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { FlexProps } from '@chakra-ui/react'; - -export interface TCardBody extends Omit { - onClick?: () => boolean; -} - -export interface TCardFooter extends FlexProps {} - -export interface TCardHeader extends FlexProps {} diff --git a/hyperglass/ui/components/codeBlock.tsx b/hyperglass/ui/components/code-block.tsx similarity index 100% rename from hyperglass/ui/components/codeBlock.tsx rename to hyperglass/ui/components/code-block.tsx diff --git a/hyperglass/ui/components/countdown/countdown.tsx b/hyperglass/ui/components/countdown.tsx similarity index 75% rename from hyperglass/ui/components/countdown/countdown.tsx rename to hyperglass/ui/components/countdown.tsx index 95fa439..910dd48 100644 --- a/hyperglass/ui/components/countdown/countdown.tsx +++ b/hyperglass/ui/components/countdown.tsx @@ -3,9 +3,18 @@ import ReactCountdown, { zeroPad } from 'react-countdown'; import { If, Then, Else } from 'react-if'; import { useColorValue } from '~/context'; -import type { TCountdown, TRenderer } from './types'; +import type { CountdownRenderProps } from 'react-countdown'; -const Renderer = (props: TRenderer): JSX.Element => { +interface RendererProps extends CountdownRenderProps { + text: string; +} + +interface CountdownProps { + timeout: number; + text: string; +} + +const Renderer = (props: RendererProps): JSX.Element => { const { hours, minutes, seconds, completed, text } = props; const time = [zeroPad(seconds)]; minutes !== 0 && time.unshift(zeroPad(minutes)); @@ -28,7 +37,7 @@ const Renderer = (props: TRenderer): JSX.Element => { ); }; -export const Countdown = (props: TCountdown): JSX.Element => { +export const Countdown = (props: CountdownProps): JSX.Element => { const { timeout, text } = props; const then = timeout * 1000; return ( diff --git a/hyperglass/ui/components/countdown/index.ts b/hyperglass/ui/components/countdown/index.ts deleted file mode 100644 index c1ddcb5..0000000 --- a/hyperglass/ui/components/countdown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './countdown'; diff --git a/hyperglass/ui/components/countdown/types.ts b/hyperglass/ui/components/countdown/types.ts deleted file mode 100644 index c056e9d..0000000 --- a/hyperglass/ui/components/countdown/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { CountdownRenderProps } from 'react-countdown'; - -export interface TRenderer extends CountdownRenderProps { - text: string; -} - -export interface TCountdown { - timeout: number; - text: string; -} diff --git a/hyperglass/ui/components/footer/button.tsx b/hyperglass/ui/components/footer/button.tsx index 74c0cbb..fd747c1 100644 --- a/hyperglass/ui/components/footer/button.tsx +++ b/hyperglass/ui/components/footer/button.tsx @@ -4,8 +4,14 @@ import { Markdown } from '~/components'; import { useColorValue, useBreakpointValue, useConfig } from '~/context'; import { useOpposingColor, useStrf } from '~/hooks'; +import type { MenuListProps } from '@chakra-ui/react'; import type { Config } from '~/types'; -import type { TFooterButton } from './types'; + +interface FooterButtonProps extends Omit { + side: 'left' | 'right'; + title?: MenuListProps['children']; + content: string; +} /** * Filter the configuration object based on values that are strings for formatting. @@ -20,7 +26,7 @@ function getConfigFmt(config: Config): Record { return fmt; } -export const FooterButton = (props: TFooterButton): JSX.Element => { +export const FooterButton = (props: FooterButtonProps): JSX.Element => { const { content, title, side, ...rest } = props; const config = useConfig(); diff --git a/hyperglass/ui/components/footer/colorMode.tsx b/hyperglass/ui/components/footer/color-mode.tsx similarity index 84% rename from hyperglass/ui/components/footer/colorMode.tsx rename to hyperglass/ui/components/footer/color-mode.tsx index a1f1991..8644caf 100644 --- a/hyperglass/ui/components/footer/colorMode.tsx +++ b/hyperglass/ui/components/footer/color-mode.tsx @@ -5,10 +5,14 @@ import { DynamicIcon } from '~/components'; import { useColorMode, useColorValue, useBreakpointValue } from '~/context'; import { useOpposingColor } from '~/hooks'; -import type { TColorModeToggle } from './types'; +import type { ButtonProps } from '@chakra-ui/react'; -export const ColorModeToggle = forwardRef( - (props: TColorModeToggle, ref) => { +interface ColorModeToggleProps extends ButtonProps { + size?: string; +} + +export const ColorModeToggle = forwardRef( + (props: ColorModeToggleProps, ref) => { const { size = '1.5rem', ...rest } = props; const { colorMode, toggleColorMode } = useColorMode(); diff --git a/hyperglass/ui/components/footer/footer.tsx b/hyperglass/ui/components/footer/footer.tsx index 0041521..2b1e3dc 100644 --- a/hyperglass/ui/components/footer/footer.tsx +++ b/hyperglass/ui/components/footer/footer.tsx @@ -5,9 +5,9 @@ import { DynamicIcon } from '~/components'; import { useConfig, useMobile, useColorValue, useBreakpointValue } from '~/context'; import { useStrf } from '~/hooks'; import { FooterButton } from './button'; -import { ColorModeToggle } from './colorMode'; +import { ColorModeToggle } from './color-mode'; import { FooterLink } from './link'; -import { isLink, isMenu } from './types'; +import { isLink, isMenu } from '~/types'; import type { ButtonProps, LinkProps } from '@chakra-ui/react'; import type { Link, Menu } from '~/types'; diff --git a/hyperglass/ui/components/footer/link.tsx b/hyperglass/ui/components/footer/link.tsx index 5357d4e..a803f2f 100644 --- a/hyperglass/ui/components/footer/link.tsx +++ b/hyperglass/ui/components/footer/link.tsx @@ -1,8 +1,10 @@ import { Button, Link, useBreakpointValue } from '@chakra-ui/react'; -import type { TFooterLink } from './types'; +import type { ButtonProps, LinkProps } from '@chakra-ui/react'; -export const FooterLink = (props: TFooterLink): JSX.Element => { +type FooterLinkProps = ButtonProps & LinkProps & { title: string }; + +export const FooterLink = (props: FooterLinkProps): JSX.Element => { const { title } = props; const btnSize = useBreakpointValue({ base: 'xs', lg: 'sm' }); return ( diff --git a/hyperglass/ui/components/footer/types.ts b/hyperglass/ui/components/footer/types.ts deleted file mode 100644 index 9b0e172..0000000 --- a/hyperglass/ui/components/footer/types.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { ButtonProps, LinkProps, MenuListProps } from '@chakra-ui/react'; -import type { Link, Menu } from '~/types'; - -type TFooterSide = 'left' | 'right'; - -export interface TFooterButton extends Omit { - side: TFooterSide; - title?: MenuListProps['children']; - content: string; -} - -export type TFooterLink = ButtonProps & LinkProps & { title: string }; - -export type TFooterItems = 'help' | 'credit' | 'terms'; - -export interface TColorModeToggle extends ButtonProps { - size?: string; -} - -export function isLink(item: Link | Menu): item is Link { - return 'url' in item; -} - -export function isMenu(item: Link | Menu): item is Menu { - return 'content' in item; -} diff --git a/hyperglass/ui/components/form/field.tsx b/hyperglass/ui/components/form-field.tsx similarity index 86% rename from hyperglass/ui/components/form/field.tsx rename to hyperglass/ui/components/form-field.tsx index 20e2cf1..7b709aa 100644 --- a/hyperglass/ui/components/form/field.tsx +++ b/hyperglass/ui/components/form-field.tsx @@ -5,11 +5,19 @@ import { If, Then } from 'react-if'; import { useColorValue } from '~/context'; import { useBooleanValue } from '~/hooks'; +import type { FormControlProps } from '@chakra-ui/react'; import type { FieldError } from 'react-hook-form'; import type { FormData } from '~/types'; -import type { TField } from './types'; -export const FormField = (props: TField): JSX.Element => { +interface FormFieldProps extends FormControlProps { + name: string; + label: string; + hiddenLabels?: boolean; + labelAddOn?: React.ReactNode; + fieldAddOn?: React.ReactNode; +} + +export const FormField = (props: FormFieldProps): JSX.Element => { const { name, label, children, labelAddOn, fieldAddOn, hiddenLabels = false, ...rest } = props; const labelColor = useColorValue('blackAlpha.700', 'whiteAlpha.700'); const errorColor = useColorValue('red.500', 'red.300'); diff --git a/hyperglass/ui/components/form/row.tsx b/hyperglass/ui/components/form-row.tsx similarity index 100% rename from hyperglass/ui/components/form/row.tsx rename to hyperglass/ui/components/form-row.tsx diff --git a/hyperglass/ui/components/form/index.ts b/hyperglass/ui/components/form/index.ts deleted file mode 100644 index 90689e9..0000000 --- a/hyperglass/ui/components/form/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './row'; -export * from './field'; -export * from './queryType'; -export * from './queryTarget'; -export * from './queryLocation'; -export * from './resolvedTarget'; diff --git a/hyperglass/ui/components/form/types.ts b/hyperglass/ui/components/form/types.ts deleted file mode 100644 index e053258..0000000 --- a/hyperglass/ui/components/form/types.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { FormControlProps } from '@chakra-ui/react'; -import type { UseFormRegister } from 'react-hook-form'; -import type { OnChangeArgs, FormData, SingleOption } from '~/types'; - -export interface TField extends FormControlProps { - name: string; - label: string; - hiddenLabels?: boolean; - labelAddOn?: React.ReactNode; - fieldAddOn?: React.ReactNode; -} - -export type OnChange = (f: OnChangeArgs) => void; - -export interface TQuerySelectField { - onChange: OnChange; - label: string; -} - -export interface TQueryTarget { - name: string; - placeholder: string; - register: UseFormRegister; - onChange(e: OnChangeArgs): void; -} - -export interface ResolvedTargetProps { - errorClose(): void; -} - -export interface LocationCardProps { - option: SingleOption; - defaultChecked: boolean; - onChange(a: 'add' | 'remove', v: SingleOption): void; - hasError: boolean; -} - -export interface UserIPProps { - setTarget(target: string): void; -} diff --git a/hyperglass/ui/components/greeting/greeting.tsx b/hyperglass/ui/components/greeting.tsx similarity index 92% rename from hyperglass/ui/components/greeting/greeting.tsx rename to hyperglass/ui/components/greeting.tsx index a10c238..b34bf3e 100644 --- a/hyperglass/ui/components/greeting/greeting.tsx +++ b/hyperglass/ui/components/greeting.tsx @@ -14,9 +14,9 @@ import { Markdown } from '~/components'; import { useConfig, useColorValue } from '~/context'; import { useGreeting, useOpposingColor } from '~/hooks'; -import type { TGreeting } from './types'; +import type { ModalContentProps } from '@chakra-ui/react'; -export const Greeting = (props: TGreeting): JSX.Element => { +export const Greeting = (props: ModalContentProps): JSX.Element => { const { web, content } = useConfig(); const { isAck, isOpen, open, ack } = useGreeting(); diff --git a/hyperglass/ui/components/greeting/index.ts b/hyperglass/ui/components/greeting/index.ts deleted file mode 100644 index fe2d50b..0000000 --- a/hyperglass/ui/components/greeting/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './greeting'; diff --git a/hyperglass/ui/components/greeting/types.ts b/hyperglass/ui/components/greeting/types.ts deleted file mode 100644 index 1568d2a..0000000 --- a/hyperglass/ui/components/greeting/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { BoxProps } from '@chakra-ui/react'; - -export interface TGreeting extends BoxProps {} diff --git a/hyperglass/ui/components/header/logo.tsx b/hyperglass/ui/components/header/logo.tsx index 3bfa34b..f7328e9 100644 --- a/hyperglass/ui/components/header/logo.tsx +++ b/hyperglass/ui/components/header/logo.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'; import { Image, Skeleton } from '@chakra-ui/react'; import { useColorValue, useConfig } from '~/context'; -import type { TLogo } from './types'; +import type { ImageProps } from '@chakra-ui/react'; /** * Custom hook to handle loading the user's logo, errors loading the logo, and color mode changes. @@ -31,7 +31,7 @@ function useLogo(): [string, () => void] { return useMemo(() => [fallback ?? src, setFallback], [fallback, setFallback, src]); } -export const Logo = (props: TLogo): JSX.Element => { +export const Logo = (props: ImageProps): JSX.Element => { const { web } = useConfig(); const { width } = web.logo; diff --git a/hyperglass/ui/components/header/subtitleOnly.tsx b/hyperglass/ui/components/header/subtitle-only.tsx similarity index 100% rename from hyperglass/ui/components/header/subtitleOnly.tsx rename to hyperglass/ui/components/header/subtitle-only.tsx diff --git a/hyperglass/ui/components/header/titleOnly.tsx b/hyperglass/ui/components/header/title-only.tsx similarity index 100% rename from hyperglass/ui/components/header/titleOnly.tsx rename to hyperglass/ui/components/header/title-only.tsx diff --git a/hyperglass/ui/components/header/title.tsx b/hyperglass/ui/components/header/title.tsx index 150f0d0..ad41477 100644 --- a/hyperglass/ui/components/header/title.tsx +++ b/hyperglass/ui/components/header/title.tsx @@ -4,11 +4,16 @@ import { isSafari } from 'react-device-detect'; import { Switch, Case } from 'react-if'; import { useConfig, useMobile } from '~/context'; import { useFormState, useFormInteractive } from '~/hooks'; -import { SubtitleOnly } from './subtitleOnly'; -import { TitleOnly } from './titleOnly'; import { Logo } from './logo'; +import { SubtitleOnly } from './subtitle-only'; +import { TitleOnly } from './title-only'; -import type { TTitle, TTitleWrapper, TDWrapper, TMWrapper } from './types'; +import type { FlexProps, StackProps } from '@chakra-ui/react'; +import type { MotionProps } from 'framer-motion'; + +type DWrapperProps = Omit & MotionProps; +type MWrapperProps = Omit & MotionProps; +type TextOnlyProps = Partial>; const AnimatedVStack = motion(VStack); const AnimatedFlex = motion(Flex); @@ -16,7 +21,7 @@ const AnimatedFlex = motion(Flex); /** * Title wrapper for mobile devices, breakpoints sm & md. */ -const MWrapper = (props: TMWrapper): JSX.Element => { +const MWrapper = (props: MWrapperProps): JSX.Element => { const formInteractive = useFormInteractive(); return ( { /** * Title wrapper for desktop devices, breakpoints lg & xl. */ -const DWrapper = (props: TDWrapper): JSX.Element => { +const DWrapper = (props: DWrapperProps): JSX.Element => { const formInteractive = useFormInteractive(); return ( { * Universal wrapper for title sub-components, which will be different depending on the * `title_mode` configuration variable. */ -const TitleWrapper = (props: TDWrapper | TMWrapper): JSX.Element => { +const TitleWrapper = (props: DWrapperProps | MWrapperProps): JSX.Element => { const isMobile = useMobile(); return ( <> - {isMobile ? : } + {isMobile ? ( + + ) : ( + + )} ); }; @@ -62,7 +71,7 @@ const TitleWrapper = (props: TDWrapper | TMWrapper): JSX.Element => { /** * Title sub-component if `title_mode` is set to `text_only`. */ -const TextOnly = (props: TTitleWrapper): JSX.Element => { +const TextOnly = (props: TextOnlyProps): JSX.Element => { return ( @@ -104,7 +113,7 @@ const All = (): JSX.Element => ( /** * Title component which renders sub-components based on the `title_mode` configuration variable. */ -export const Title = (props: TTitle): JSX.Element => { +export const Title = (props: FlexProps): JSX.Element => { const { fontSize, ...rest } = props; const { web } = useConfig(); const { titleMode } = web.text; diff --git a/hyperglass/ui/components/header/types.ts b/hyperglass/ui/components/header/types.ts deleted file mode 100644 index afdcf4c..0000000 --- a/hyperglass/ui/components/header/types.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { FlexProps, HeadingProps, ImageProps, StackProps } from '@chakra-ui/react'; -import type { MotionProps } from 'framer-motion'; - -export interface THeader extends FlexProps { - resetForm(): void; -} - -export type THeaderLayout = { - sm: [JSX.Element, JSX.Element]; - md: [JSX.Element, JSX.Element]; - lg: [JSX.Element, JSX.Element]; - xl: [JSX.Element, JSX.Element]; -}; -export type TDWrapper = Omit & MotionProps; - -export type TMWrapper = Omit & MotionProps; - -export interface TTitle extends FlexProps {} - -export interface TTitleOnly extends HeadingProps {} - -export interface TLogo extends ImageProps {} - -export interface TTitleWrapper extends Partial> {} - -export interface THeaderCtx { - showSubtitle: boolean; - titleRef: React.MutableRefObject; -} diff --git a/hyperglass/ui/components/index.ts b/hyperglass/ui/components/index.ts index 9ad59a7..3358af0 100644 --- a/hyperglass/ui/components/index.ts +++ b/hyperglass/ui/components/index.ts @@ -1,6 +1,6 @@ export * from './animated'; export * from './card'; -export * from './codeBlock'; +export * from './code-block'; export * from './countdown'; export * from './custom'; export * from './debugger'; @@ -8,20 +8,27 @@ export * from './directive-info-modal'; export * from './dynamic-icon'; export * from './favicon'; export * from './footer'; -export * from './form'; +export * from './form-field'; +export * from './form-row'; export * from './greeting'; export * from './header'; export * from './label'; export * from './layout'; -export * from './loadError'; +export * from './load-error'; export * from './loading'; -export * from './lookingGlass'; +export * from './location-card'; +export * from './looking-glass-form'; export * from './markdown'; export * from './meta'; export * from './output'; export * from './path'; export * from './prompt'; +export * from './query-location'; +export * from './query-target'; +export * from './query-type'; +export * from './resolved-target'; export * from './results'; export * from './select'; -export * from './submit'; +export * from './submit-button'; export * from './table'; +export * from './user-ip'; diff --git a/hyperglass/ui/components/label/label.tsx b/hyperglass/ui/components/label.tsx similarity index 84% rename from hyperglass/ui/components/label/label.tsx rename to hyperglass/ui/components/label.tsx index 5d8a0a7..aa70ca5 100644 --- a/hyperglass/ui/components/label/label.tsx +++ b/hyperglass/ui/components/label.tsx @@ -3,9 +3,20 @@ import { Flex } from '@chakra-ui/react'; import { useColorValue } from '~/context'; import { useOpposingColor } from '~/hooks'; -import type { TLabel } from './types'; +import type { FlexProps } from '@chakra-ui/react'; -const _Label: React.ForwardRefRenderFunction = (props: TLabel, ref) => { +interface LabelProps extends FlexProps { + value: string; + label: string; + bg: string; + valueColor?: string; + labelColor?: string; +} + +const _Label: React.ForwardRefRenderFunction = ( + props: LabelProps, + ref, +) => { const { value, label, labelColor, bg = 'primary.600', valueColor, ...rest } = props; const valueColorAuto = useOpposingColor(bg); diff --git a/hyperglass/ui/components/label/index.ts b/hyperglass/ui/components/label/index.ts deleted file mode 100644 index 301fbde..0000000 --- a/hyperglass/ui/components/label/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './label'; diff --git a/hyperglass/ui/components/label/types.ts b/hyperglass/ui/components/label/types.ts deleted file mode 100644 index 2069c4c..0000000 --- a/hyperglass/ui/components/label/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -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/layout/frame.tsx b/hyperglass/ui/components/layout/frame.tsx index c403b94..1014cb0 100644 --- a/hyperglass/ui/components/layout/frame.tsx +++ b/hyperglass/ui/components/layout/frame.tsx @@ -6,13 +6,13 @@ import { If, Then } from 'react-if'; import { Debugger, Greeting, Footer, Header } from '~/components'; import { useConfig } from '~/context'; import { useFormState } from '~/hooks'; -import { ResetButton } from './resetButton'; +import { ResetButton } from './reset-button'; -import type { TFrame } from './types'; +import type { FlexProps } from '@chakra-ui/react'; const AnimatedFlex = motion(Flex); -export const Frame = (props: TFrame): JSX.Element => { +export const Frame = (props: FlexProps): JSX.Element => { const { developerMode } = useConfig(); const { setStatus, reset } = useFormState( useCallback(({ setStatus, reset }) => ({ setStatus, reset }), []), diff --git a/hyperglass/ui/components/layout/layout.tsx b/hyperglass/ui/components/layout/layout.tsx index d01b002..2607975 100644 --- a/hyperglass/ui/components/layout/layout.tsx +++ b/hyperglass/ui/components/layout/layout.tsx @@ -1,5 +1,5 @@ import { AnimatePresence } from 'framer-motion'; -import { LookingGlass, Results } from '~/components'; +import { LookingGlassForm, Results } from '~/components'; import { useView } from '~/hooks'; import { Frame } from './frame'; @@ -11,7 +11,7 @@ export const Layout = (): JSX.Element => { ) : ( - + )} diff --git a/hyperglass/ui/components/layout/resetButton.tsx b/hyperglass/ui/components/layout/reset-button.tsx similarity index 86% rename from hyperglass/ui/components/layout/resetButton.tsx rename to hyperglass/ui/components/layout/reset-button.tsx index 1b7f8ee..64a7d23 100644 --- a/hyperglass/ui/components/layout/resetButton.tsx +++ b/hyperglass/ui/components/layout/reset-button.tsx @@ -4,9 +4,14 @@ import { AnimatedDiv, DynamicIcon } from '~/components'; import { useColorValue } from '~/context'; import { useOpposingColor, useFormState } from '~/hooks'; -import type { TResetButton } from './types'; +import type { FlexProps } from '@chakra-ui/react'; -export const ResetButton = (props: TResetButton): JSX.Element => { +interface ResetButtonProps extends FlexProps { + developerMode: boolean; + resetForm(): void; +} + +export const ResetButton = (props: ResetButtonProps): JSX.Element => { const { developerMode, resetForm, ...rest } = props; const status = useFormState(s => s.status); const bg = useColorValue('primary.500', 'primary.300'); diff --git a/hyperglass/ui/components/layout/types.ts b/hyperglass/ui/components/layout/types.ts deleted file mode 100644 index bf3ee75..0000000 --- a/hyperglass/ui/components/layout/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { FlexProps } from '@chakra-ui/react'; - -export interface TFrame extends FlexProps {} - -export interface TResetButton extends FlexProps { - developerMode: boolean; - resetForm(): void; -} diff --git a/hyperglass/ui/components/loadError.tsx b/hyperglass/ui/components/load-error.tsx similarity index 98% rename from hyperglass/ui/components/loadError.tsx rename to hyperglass/ui/components/load-error.tsx index ffa45da..b86d2f6 100644 --- a/hyperglass/ui/components/loadError.tsx +++ b/hyperglass/ui/components/load-error.tsx @@ -7,7 +7,7 @@ import { AlertTitle, AlertDescription, } from '@chakra-ui/react'; -import { NoConfig } from './noconfig'; +import { NoConfig } from './no-config'; import type { CenterProps } from '@chakra-ui/react'; import type { ConfigLoadError } from '~/util'; diff --git a/hyperglass/ui/components/loading.tsx b/hyperglass/ui/components/loading.tsx index e3f117b..2120765 100644 --- a/hyperglass/ui/components/loading.tsx +++ b/hyperglass/ui/components/loading.tsx @@ -1,5 +1,5 @@ import { Spinner } from '@chakra-ui/react'; -import { NoConfig } from './noconfig'; +import { NoConfig } from './no-config'; export const Loading = (): JSX.Element => { return ( diff --git a/hyperglass/ui/components/form/location-card.tsx b/hyperglass/ui/components/location-card.tsx similarity index 91% rename from hyperglass/ui/components/form/location-card.tsx rename to hyperglass/ui/components/location-card.tsx index a43e420..29d4cd1 100644 --- a/hyperglass/ui/components/form/location-card.tsx +++ b/hyperglass/ui/components/location-card.tsx @@ -4,8 +4,15 @@ import { motion } from 'framer-motion'; import { useColorValue } from '~/context'; import { useOpposingColor } from '~/hooks'; -import type { LocationOption } from './queryLocation'; -import type { LocationCardProps } from './types'; +import type { SingleOption } from '~/types'; +import type { LocationOption } from './query-location'; + +interface LocationCardProps { + option: SingleOption; + defaultChecked: boolean; + onChange(a: 'add' | 'remove', v: SingleOption): void; + hasError: boolean; +} const MotionBox = motion(Box); diff --git a/hyperglass/ui/components/lookingGlass.tsx b/hyperglass/ui/components/looking-glass-form.tsx similarity index 99% rename from hyperglass/ui/components/lookingGlass.tsx rename to hyperglass/ui/components/looking-glass-form.tsx index 9003197..9804e70 100644 --- a/hyperglass/ui/components/lookingGlass.tsx +++ b/hyperglass/ui/components/looking-glass-form.tsx @@ -31,7 +31,7 @@ const fqdnPattern = new RegExp( /^(?!:\/\/)([a-zA-Z0-9-]+\.)?[a-zA-Z0-9-][a-zA-Z0-9-]+\.[a-zA-Z-]{2,6}?$/im, ); -export const LookingGlass = (): JSX.Element => { +export const LookingGlassForm = (): JSX.Element => { const { web, messages } = useConfig(); const greetingReady = useGreeting(s => s.greetingReady); diff --git a/hyperglass/ui/components/markdown/elements.tsx b/hyperglass/ui/components/markdown/elements.tsx index 377a91b..b996bc0 100644 --- a/hyperglass/ui/components/markdown/elements.tsx +++ b/hyperglass/ui/components/markdown/elements.tsx @@ -23,19 +23,46 @@ import { useColorValue } from '~/context'; import type { BoxProps, - TextProps, CodeProps, LinkProps, + TextProps, TableProps, ChakraProps, - HeadingProps, DividerProps, TableRowProps, TableBodyProps, - TableCellProps, TableHeadProps, + ListProps as ChakraListProps, + HeadingProps as ChakraHeadingProps, + CheckboxProps as ChakraCheckboxProps, + TableCellProps as ChakraTableCellProps, } from '@chakra-ui/react'; -import type { TCheckbox, TList, THeading, TCodeBlock, TTableData, TListItem } from './types'; + +interface CheckboxProps extends ChakraCheckboxProps { + checked: boolean; +} + +interface ListItemProps { + checked: boolean; + children?: React.ReactNode; +} + +interface ListProps extends ChakraListProps { + ordered: boolean; + children?: React.ReactNode; +} + +interface HeadingProps extends ChakraHeadingProps { + level: 1 | 2 | 3 | 4 | 5 | 6; +} + +interface CodeBlockProps { + value: React.ReactNode; +} + +interface TableCellProps extends BoxProps { + isHeader: boolean; +} type MDProps = { node: Dict; @@ -55,12 +82,12 @@ function clean

(props: P): P { return props; } -export const Checkbox = (props: TCheckbox & MDProps): JSX.Element => { +export const Checkbox = (props: CheckboxProps & MDProps): JSX.Element => { const { checked, node, ...rest } = props; return ; }; -export const List = (props: TList): JSX.Element => { +export const List = (props: ListProps): JSX.Element => { const { ordered, ...rest } = props; return ( @@ -74,7 +101,7 @@ export const List = (props: TList): JSX.Element => { ); }; -export const ListItem = (props: TListItem & MDProps): JSX.Element => { +export const ListItem = (props: ListItemProps & MDProps): JSX.Element => { const { checked, node, ...rest } = props; return checked ? ( @@ -83,7 +110,7 @@ export const ListItem = (props: TListItem & MDProps): JSX.Element => { ); }; -export const Heading = (props: THeading): JSX.Element => { +export const Heading = (props: HeadingProps): JSX.Element => { const { level, ...rest } = props; const levelMap = { @@ -93,9 +120,9 @@ export const Heading = (props: THeading): JSX.Element => { 4: { as: 'h4', size: 'md', fontWeight: 'normal' }, 5: { as: 'h5', size: 'md', fontWeight: 'bold' }, 6: { as: 'h6', size: 'sm', fontWeight: 'bold' }, - } as { [i: number]: HeadingProps }; + } as { [i: number]: ChakraHeadingProps }; - return >(rest)} />; + return >(rest)} />; }; export const Link = (props: LinkProps): JSX.Element => { @@ -103,7 +130,7 @@ export const Link = (props: LinkProps): JSX.Element => { return (props)} />; }; -export const CodeBlock = (props: TCodeBlock): JSX.Element => ( +export const CodeBlock = (props: CodeBlockProps): JSX.Element => ( {props.value} ); @@ -142,15 +169,15 @@ export const TableHead = (props: TableHeadProps): JSX.Element => ( (props)} /> ); -export const TableCell = (props: TTableData): JSX.Element => { +export const TableCell = (props: TableCellProps): JSX.Element => { const { isHeader, ...rest } = props; return ( - (rest)} /> + (rest)} /> - (rest)} /> + (rest)} /> ); diff --git a/hyperglass/ui/components/markdown/markdown.tsx b/hyperglass/ui/components/markdown/markdown.tsx index 0520944..73e563f 100644 --- a/hyperglass/ui/components/markdown/markdown.tsx +++ b/hyperglass/ui/components/markdown/markdown.tsx @@ -18,7 +18,10 @@ import { } from './elements'; import type { ReactMarkdownProps } from 'react-markdown'; -import type { TMarkdown } from './types'; + +interface MarkdownProps { + content: string; +} const renderers = { break: Br, @@ -37,6 +40,6 @@ const renderers = { thematicBreak: Divider, } as ReactMarkdownProps['renderers']; -export const Markdown = (props: TMarkdown): JSX.Element => ( +export const Markdown = (props: MarkdownProps): JSX.Element => ( ); diff --git a/hyperglass/ui/components/markdown/types.ts b/hyperglass/ui/components/markdown/types.ts deleted file mode 100644 index b5e15aa..0000000 --- a/hyperglass/ui/components/markdown/types.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { BoxProps, CheckboxProps, HeadingProps, ListProps } from '@chakra-ui/react'; - -export interface TMarkdown { - content: string; -} - -export interface TCheckbox extends CheckboxProps { - checked: boolean; -} - -export interface TListItem { - checked: boolean; - children?: React.ReactNode; -} - -export interface TList extends ListProps { - ordered: boolean; - children?: React.ReactNode; -} - -export interface THeading extends HeadingProps { - level: 1 | 2 | 3 | 4 | 5 | 6; -} - -export interface TCodeBlock { - value: React.ReactNode; -} - -export interface TTableData extends BoxProps { - isHeader: boolean; -} diff --git a/hyperglass/ui/components/noconfig.tsx b/hyperglass/ui/components/no-config.tsx similarity index 100% rename from hyperglass/ui/components/noconfig.tsx rename to hyperglass/ui/components/no-config.tsx diff --git a/hyperglass/ui/components/output/table.tsx b/hyperglass/ui/components/output/bgp-table.tsx similarity index 66% rename from hyperglass/ui/components/output/table.tsx rename to hyperglass/ui/components/output/bgp-table.tsx index aa22660..670194e 100644 --- a/hyperglass/ui/components/output/table.tsx +++ b/hyperglass/ui/components/output/bgp-table.tsx @@ -3,10 +3,12 @@ import { Table } from '~/components'; import { useConfig } from '~/context'; import { Cell } from './cell'; -import type { TColumn, ParsedDataField, TCellRender } from '~/types'; -import type { TBGPTable } from './types'; +import type { FlexProps } from '@chakra-ui/react'; +import type { TableColumn, ParsedDataField, CellRenderProps } from '~/types'; -function makeColumns(fields: ParsedDataField[]): TColumn[] { +type BGPTableProps = Swap; + +function makeColumns(fields: ParsedDataField[]): TableColumn[] { return fields.map(pair => { const [header, accessor, align] = pair; @@ -15,7 +17,7 @@ function makeColumns(fields: ParsedDataField[]): TColumn[] { accessor, hidden: false, Header: header, - } as TColumn; + } as TableColumn; if (align === null) { columnConfig.hidden = true; @@ -25,7 +27,7 @@ function makeColumns(fields: ParsedDataField[]): TColumn[] { }); } -export const BGPTable = (props: TBGPTable): JSX.Element => { +export const BGPTable = (props: BGPTableProps): JSX.Element => { const { children: data, ...rest } = props; const { parsedDataFields } = useConfig(); const columns = makeColumns(parsedDataFields); @@ -38,7 +40,7 @@ export const BGPTable = (props: TBGPTable): JSX.Element => { data={data.routes} rowHighlightBg="green" rowHighlightProp="active" - Cell={(d: TCellRender) => } + Cell={(d: CellRenderProps) => } /> ); diff --git a/hyperglass/ui/components/output/cell.tsx b/hyperglass/ui/components/output/cell.tsx index c6a3e71..6b8df5c 100644 --- a/hyperglass/ui/components/output/cell.tsx +++ b/hyperglass/ui/components/output/cell.tsx @@ -1,8 +1,13 @@ import { MonoField, Active, Weight, Age, Communities, RPKIState, ASPath } from './fields'; -import type { TCell } from './types'; +import type { CellRenderProps } from '~/types'; -export const Cell = (props: TCell): JSX.Element => { +interface CellProps { + data: CellRenderProps; + rawData: StructuredResponse; +} + +export const Cell = (props: CellProps): JSX.Element => { const { data, rawData } = props; const cellId = data.column.id as keyof Route; const component = { diff --git a/hyperglass/ui/components/output/fields.tsx b/hyperglass/ui/components/output/fields.tsx index cc2a43d..3205138 100644 --- a/hyperglass/ui/components/output/fields.tsx +++ b/hyperglass/ui/components/output/fields.tsx @@ -8,20 +8,47 @@ import { DynamicIcon } from '~/components'; import { useConfig, useColorValue } from '~/context'; import { useOpposingColor } from '~/hooks'; -import type { - TAge, - TActive, - TWeight, - TASPath, - TMonoField, - TRPKIState, - TCommunities, -} from './types'; +import type { TextProps } from '@chakra-ui/react'; + +interface ActiveProps { + isActive: boolean; +} + +interface MonoFieldProps extends TextProps { + v: React.ReactNode; +} + +interface AgeProps extends TextProps { + inSeconds: number; +} + +interface WeightProps extends TextProps { + weight: number; + winningWeight: 'low' | 'high'; +} + +interface ASPathProps { + path: number[]; + active: boolean; +} + +interface CommunitiesProps { + communities: string[]; +} + +interface RPKIStateProps { + state: + | 0 // Invalid + | 1 // Valid + | 2 // Unknown + | 3; // Unverified + active: boolean; +} dayjs.extend(relativeTimePlugin); dayjs.extend(utcPlugin); -export const MonoField = (props: TMonoField): JSX.Element => { +export const MonoField = (props: MonoFieldProps): JSX.Element => { const { v, ...rest } = props; return ( @@ -30,7 +57,7 @@ export const MonoField = (props: TMonoField): JSX.Element => { ); }; -export const Active = (props: TActive): JSX.Element => { +export const Active = (props: ActiveProps): JSX.Element => { const { isActive } = props; const color = useColorValue(['gray.500', 'green.500'], ['whiteAlpha.300', 'blackAlpha.500']); return ( @@ -45,7 +72,7 @@ export const Active = (props: TActive): JSX.Element => { ); }; -export const Age = (props: TAge): JSX.Element => { +export const Age = (props: AgeProps): JSX.Element => { const { inSeconds, ...rest } = props; const now = dayjs.utc(); const then = now.subtract(inSeconds, 'second'); @@ -58,7 +85,7 @@ export const Age = (props: TAge): JSX.Element => { ); }; -export const Weight = (props: TWeight): JSX.Element => { +export const Weight = (props: WeightProps): JSX.Element => { const { weight, winningWeight, ...rest } = props; const fixMeText = winningWeight === 'low' ? 'Lower Weight is Preferred' : 'Higher Weight is Preferred'; @@ -71,7 +98,7 @@ export const Weight = (props: TWeight): JSX.Element => { ); }; -export const ASPath = (props: TASPath): JSX.Element => { +export const ASPath = (props: ASPathProps): JSX.Element => { const { path, active } = props; const color = useColorValue( // light: inactive, active @@ -108,7 +135,7 @@ export const ASPath = (props: TASPath): JSX.Element => { return <>{paths}; }; -export const Communities = (props: TCommunities): JSX.Element => { +export const Communities = (props: CommunitiesProps): JSX.Element => { const { communities } = props; const { web } = useConfig(); const bg = useColorValue('white', 'gray.900'); @@ -147,8 +174,8 @@ export const Communities = (props: TCommunities): JSX.Element => { ); }; -const _RPKIState: React.ForwardRefRenderFunction = ( - props: TRPKIState, +const _RPKIState: React.ForwardRefRenderFunction = ( + props: RPKIStateProps, ref, ) => { const { state, active } = props; @@ -194,4 +221,4 @@ const _RPKIState: React.ForwardRefRenderFunction = ( ); }; -export const RPKIState = forwardRef(_RPKIState); +export const RPKIState = forwardRef(_RPKIState); diff --git a/hyperglass/ui/components/output/index.ts b/hyperglass/ui/components/output/index.ts index c22d499..6e28bab 100644 --- a/hyperglass/ui/components/output/index.ts +++ b/hyperglass/ui/components/output/index.ts @@ -1,2 +1,2 @@ -export * from './table'; -export * from './text'; +export * from './bgp-table'; +export * from './text-output'; diff --git a/hyperglass/ui/components/output/text.tsx b/hyperglass/ui/components/output/text-output.tsx similarity index 84% rename from hyperglass/ui/components/output/text.tsx rename to hyperglass/ui/components/output/text-output.tsx index 5043bd1..9001d1b 100644 --- a/hyperglass/ui/components/output/text.tsx +++ b/hyperglass/ui/components/output/text-output.tsx @@ -2,9 +2,11 @@ import { Box } from '@chakra-ui/react'; import { useColorValue, useConfig } from '~/context'; import { Highlighted } from './highlighted'; -import type { TTextOutput } from './types'; +import type { BoxProps } from '@chakra-ui/react'; -export const TextOutput = (props: TTextOutput): JSX.Element => { +type TextOutputProps = Swap; + +export const TextOutput = (props: TextOutputProps): JSX.Element => { const { children, ...rest } = props; const bg = useColorValue('blackAlpha.100', 'gray.800'); diff --git a/hyperglass/ui/components/output/types.ts b/hyperglass/ui/components/output/types.ts deleted file mode 100644 index 1e82c73..0000000 --- a/hyperglass/ui/components/output/types.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { BoxProps, FlexProps, TextProps } from '@chakra-ui/react'; -import type { TCellRender } from '~/types'; - -export interface TTextOutput extends Omit { - children: string; -} - -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 // Invalid - | 1 // Valid - | 2 // Unknown - | 3; // Unverified - active: boolean; -} - -export interface TCell { - data: TCellRender; - rawData: StructuredResponse; -} - -export interface TBGPTable extends Omit { - children: StructuredResponse; -} diff --git a/hyperglass/ui/components/path/chart.tsx b/hyperglass/ui/components/path/chart.tsx index a0c2a30..6a4bd11 100644 --- a/hyperglass/ui/components/path/chart.tsx +++ b/hyperglass/ui/components/path/chart.tsx @@ -5,9 +5,24 @@ import { useASNDetail } from '~/hooks'; import { Controls } from './controls'; import { useElements } from './useElements'; -import type { TChart, TNode, TNodeData } from './types'; +import type { NodeProps as ReactFlowNodeProps } from 'react-flow-renderer'; -export const Chart = (props: TChart): JSX.Element => { +interface ChartProps { + data: StructuredResponse; +} + +interface NodeProps extends Omit { + data: D; +} + +interface NodeData { + asn: string; + name: string; + hasChildren: boolean; + hasParents?: boolean; +} + +export const Chart = (props: ChartProps): JSX.Element => { const { data } = props; const { primaryAsn, orgName } = useConfig(); @@ -32,7 +47,7 @@ export const Chart = (props: TChart): JSX.Element => { ); }; -const ASNode = (props: TNode): JSX.Element => { +const ASNode = (props: NodeProps): JSX.Element => { const { data } = props; const { asn, name, hasChildren, hasParents } = data; diff --git a/hyperglass/ui/components/path/button.tsx b/hyperglass/ui/components/path/path-button.tsx similarity index 77% rename from hyperglass/ui/components/path/button.tsx rename to hyperglass/ui/components/path/path-button.tsx index d112a50..38a5d04 100644 --- a/hyperglass/ui/components/path/button.tsx +++ b/hyperglass/ui/components/path/path-button.tsx @@ -1,9 +1,11 @@ import { Button, Tooltip } from '@chakra-ui/react'; import { DynamicIcon } from '~/components'; -import type { TPathButton } from './types'; +interface PathButtonProps { + onOpen(): void; +} -export const PathButton = (props: TPathButton): JSX.Element => { +export const PathButton = (props: PathButtonProps): JSX.Element => { const { onOpen } = props; return ( diff --git a/hyperglass/ui/components/path/path.tsx b/hyperglass/ui/components/path/path.tsx index f9700ee..87f448f 100644 --- a/hyperglass/ui/components/path/path.tsx +++ b/hyperglass/ui/components/path/path.tsx @@ -10,12 +10,14 @@ import { } from '@chakra-ui/react'; import { useColorValue, useBreakpointValue } from '~/context'; import { useFormState } from '~/hooks'; -import { PathButton } from './button'; +import { PathButton } from './path-button'; import { Chart } from './chart'; -import type { TPath } from './types'; +interface PathProps { + device: string; +} -export const Path = (props: TPath): JSX.Element => { +export const Path = (props: PathProps): JSX.Element => { const { device } = props; const displayTarget = useFormState(s => s.target.display); const getResponse = useFormState(s => s.response); diff --git a/hyperglass/ui/components/path/types.ts b/hyperglass/ui/components/path/types.ts deleted file mode 100644 index e28e076..0000000 --- a/hyperglass/ui/components/path/types.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { NodeProps } from 'react-flow-renderer'; - -export interface TChart { - data: StructuredResponse; -} - -export interface TPath { - device: string; -} - -export interface TNode extends Omit { - data: D; -} - -export interface TNodeData { - asn: string; - name: string; - hasChildren: boolean; - hasParents?: boolean; -} - -export interface BasePath { - asn: string; - name: string; -} - -export interface TPathButton { - onOpen(): void; -} diff --git a/hyperglass/ui/components/path/useElements.ts b/hyperglass/ui/components/path/useElements.ts index 98eec62..5a7b791 100644 --- a/hyperglass/ui/components/path/useElements.ts +++ b/hyperglass/ui/components/path/useElements.ts @@ -3,7 +3,11 @@ import { useMemo } from 'react'; import isEqual from 'react-fast-compare'; import type { FlowElement } from 'react-flow-renderer'; -import type { BasePath } from './types'; + +interface BasePath { + asn: string; + name: string; +} const NODE_WIDTH = 200; const NODE_HEIGHT = 48; diff --git a/hyperglass/ui/components/form/queryLocation.tsx b/hyperglass/ui/components/query-location.tsx similarity index 94% rename from hyperglass/ui/components/form/queryLocation.tsx rename to hyperglass/ui/components/query-location.tsx index c816c88..8d8db04 100644 --- a/hyperglass/ui/components/form/queryLocation.tsx +++ b/hyperglass/ui/components/query-location.tsx @@ -1,19 +1,22 @@ import { useMemo } from 'react'; import { Wrap, VStack, Flex, chakra } from '@chakra-ui/react'; import { useFormContext } from 'react-hook-form'; -import { Select } from '~/components'; +import { Select, LocationCard } from '~/components'; import { useConfig } from '~/context'; import { useFormState } from '~/hooks'; import { isMultiValue, isSingleValue } from '~/components/select'; -import { LocationCard } from './location-card'; -import type { DeviceGroup, SingleOption, OptionGroup, FormData } from '~/types'; +import type { DeviceGroup, SingleOption, OptionGroup, FormData, OnChangeArgs } from '~/types'; import type { SelectOnChange } from '~/components/select'; -import type { TQuerySelectField } from './types'; /** Location option type alias for future extensions. */ export type LocationOption = SingleOption; +interface QueryLocationProps { + onChange: (f: OnChangeArgs) => void; + label: string; +} + function buildOptions(devices: DeviceGroup[]): OptionGroup[] { return devices .map(group => { @@ -37,7 +40,7 @@ function buildOptions(devices: DeviceGroup[]): OptionGroup[] { .sort((a, b) => (a.label < b.label ? -1 : a.label > b.label ? 1 : 0)); } -export const QueryLocation = (props: TQuerySelectField): JSX.Element => { +export const QueryLocation = (props: QueryLocationProps): JSX.Element => { const { onChange, label } = props; const { diff --git a/hyperglass/ui/components/form/queryTarget.tsx b/hyperglass/ui/components/query-target.tsx similarity index 90% rename from hyperglass/ui/components/form/queryTarget.tsx rename to hyperglass/ui/components/query-target.tsx index 78d2bce..4e7838f 100644 --- a/hyperglass/ui/components/form/queryTarget.tsx +++ b/hyperglass/ui/components/query-target.tsx @@ -7,15 +7,22 @@ import { isSingleValue } from '~/components/select'; import { useColorValue } from '~/context'; import { useDirective, useFormState } from '~/hooks'; import { isSelectDirective } from '~/types'; -import { UserIP } from './userIP'; +import { UserIP } from './user-ip'; import type { OptionProps, GroupBase } from 'react-select'; +import type { UseFormRegister } from 'react-hook-form'; import type { SelectOnChange } from '~/components/select'; -import type { Directive, SingleOption } from '~/types'; -import type { TQueryTarget } from './types'; +import type { Directive, SingleOption, OnChangeArgs, FormData } from '~/types'; type OptionWithDescription = SingleOption<{ description: string | null }>; +interface QueryTargetProps { + name: string; + placeholder: string; + onChange(e: OnChangeArgs): void; + register: UseFormRegister; +} + function buildOptions(directive: Nullable): OptionWithDescription[] { if (directive !== null && isSelectDirective(directive)) { return directive.options.map(o => ({ @@ -40,7 +47,7 @@ const Option = (props: OptionProps) => { ); }; -export const QueryTarget = (props: TQueryTarget): JSX.Element => { +export const QueryTarget = (props: QueryTargetProps): JSX.Element => { const { name, register, onChange, placeholder } = props; const bg = useColorValue('white', 'blackSolid.800'); diff --git a/hyperglass/ui/components/form/queryType.tsx b/hyperglass/ui/components/query-type.tsx similarity index 95% rename from hyperglass/ui/components/form/queryType.tsx rename to hyperglass/ui/components/query-type.tsx index a65a0ec..de460a0 100644 --- a/hyperglass/ui/components/form/queryType.tsx +++ b/hyperglass/ui/components/query-type.tsx @@ -9,14 +9,14 @@ import { isSingleValue } from '~/components/select'; import type { UseRadioProps } from '@chakra-ui/react'; import type { MenuListProps } from 'react-select'; -import type { SingleOption, OptionGroup, OptionsOrGroup } from '~/types'; +import type { SingleOption, OptionGroup, OptionsOrGroup, OnChangeArgs } from '~/types'; import type { SelectOnChange } from '~/components/select'; -import type { TQuerySelectField } from './types'; type QueryTypeOption = SingleOption<{ group?: string }>; -function sorter>(a: T, b: T): number { - return a.label < b.label ? -1 : a.label > b.label ? 1 : 0; +interface QueryTypeProps { + onChange: (f: OnChangeArgs) => void; + label: string; } type UserFilter = { @@ -25,6 +25,10 @@ type UserFilter = { filter(candidate: QueryTypeOption, input: string): boolean; }; +function sorter>(a: T, b: T): number { + return a.label < b.label ? -1 : a.label > b.label ? 1 : 0; +} + const useFilter = create((set, get) => ({ selected: '', setSelected(newValue: string) { @@ -146,7 +150,7 @@ const MenuList = (props: MenuListProps): JSX.Element = ); }; -export const QueryType = (props: TQuerySelectField): JSX.Element => { +export const QueryType = (props: QueryTypeProps): JSX.Element => { const { onChange, label } = props; const { formState: { errors }, diff --git a/hyperglass/ui/components/form/resolvedTarget.tsx b/hyperglass/ui/components/resolved-target.tsx similarity index 98% rename from hyperglass/ui/components/form/resolvedTarget.tsx rename to hyperglass/ui/components/resolved-target.tsx index d7ee705..1264225 100644 --- a/hyperglass/ui/components/form/resolvedTarget.tsx +++ b/hyperglass/ui/components/resolved-target.tsx @@ -5,7 +5,10 @@ import { useConfig, useColorValue } from '~/context'; import { useStrf, useDNSQuery, useFormState } from '~/hooks'; import type { DnsOverHttps } from '~/types'; -import type { ResolvedTargetProps } from './types'; + +interface ResolvedTargetProps { + errorClose(): void; +} function findAnswer(data: DnsOverHttps.Response | undefined): string { let answer = ''; diff --git a/hyperglass/ui/components/results/copyButton.tsx b/hyperglass/ui/components/results/copy-button.tsx similarity index 74% rename from hyperglass/ui/components/results/copyButton.tsx rename to hyperglass/ui/components/results/copy-button.tsx index 74a2eaf..70cce55 100644 --- a/hyperglass/ui/components/results/copyButton.tsx +++ b/hyperglass/ui/components/results/copy-button.tsx @@ -1,9 +1,13 @@ import { Button, Tooltip, useClipboard } from '@chakra-ui/react'; import { DynamicIcon } from '~/components'; -import type { TCopyButton } from './types'; +import type { ButtonProps } from '@chakra-ui/react'; -export const CopyButton = (props: TCopyButton): JSX.Element => { +interface CopyButtonProps extends ButtonProps { + copyValue: string; +} + +export const CopyButton = (props: CopyButtonProps): JSX.Element => { const { copyValue, ...rest } = props; const { onCopy, hasCopied } = useClipboard(copyValue); return ( diff --git a/hyperglass/ui/components/results/error.tsx b/hyperglass/ui/components/results/formatted-error.tsx similarity index 60% rename from hyperglass/ui/components/results/error.tsx rename to hyperglass/ui/components/results/formatted-error.tsx index 5e3f102..6070151 100644 --- a/hyperglass/ui/components/results/error.tsx +++ b/hyperglass/ui/components/results/formatted-error.tsx @@ -1,10 +1,13 @@ -import { Text } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; -import type { TFormattedError } from './types'; +interface FormattedErrorProps { + keywords: string[]; + message: string; +} -type TFormatError = string | JSX.Element; +type FormatError = string | JSX.Element; -function formatError(text: string, values: string[], regex: RegExp): TFormatError[] | TFormatError { +function formatError(text: string, values: string[], regex: RegExp): FormatError[] | FormatError { if (!values.length) { return text; } @@ -19,16 +22,16 @@ function formatError(text: string, values: string[], regex: RegExp): TFormatErro return prev.concat( values.includes(current) ? {current} : current, ); - }, [] as TFormatError[]); + }, [] as FormatError[]); } -export const FormattedError = (props: TFormattedError): JSX.Element => { +export const FormattedError = (props: FormattedErrorProps): JSX.Element => { const { keywords, message } = props; const pattern = new RegExp(keywords.map(kw => `(${kw})`).join('|'), 'gi'); const things = formatError(message, keywords, pattern); return ( - + {keywords.length !== 0 ? things : message} - + ); }; diff --git a/hyperglass/ui/components/results/header.tsx b/hyperglass/ui/components/results/header.tsx index 90b3eb8..95d8b7b 100644 --- a/hyperglass/ui/components/results/header.tsx +++ b/hyperglass/ui/components/results/header.tsx @@ -4,7 +4,16 @@ import { DynamicIcon } from '~/components'; import { useConfig, useColorValue } from '~/context'; import { useOpposingColor, useStrf } from '~/hooks'; -import type { TResultHeader } from './types'; +import type { ErrorLevels } from '~/types'; + +interface ResultHeaderProps { + title: string; + loading: boolean; + isError?: boolean; + errorMsg: string; + errorLevel: ErrorLevels; + runtime: number; +} const runtimeText = (runtime: number, text: string): string => { let unit = 'seconds'; @@ -14,7 +23,7 @@ const runtimeText = (runtime: number, text: string): string => { return `${text} ${unit}`; }; -export const ResultHeader = (props: TResultHeader): JSX.Element => { +export const ResultHeader = (props: ResultHeaderProps): JSX.Element => { const { title, loading, isError, errorMsg, errorLevel, runtime } = props; const status = useColorValue('primary.500', 'primary.300'); diff --git a/hyperglass/ui/components/results/individual.tsx b/hyperglass/ui/components/results/individual.tsx index 43eb6a9..e2b6578 100644 --- a/hyperglass/ui/components/results/individual.tsx +++ b/hyperglass/ui/components/results/individual.tsx @@ -21,12 +21,17 @@ import { useColorValue, useConfig, useMobile } from '~/context'; import { useStrf, useLGQuery, useTableToString, useFormState, useDevice } from '~/hooks'; import { isStructuredOutput, isStringOutput } from '~/types'; import { isStackError, isFetchError, isLGError, isLGOutputOrError } from './guards'; -import { RequeryButton } from './requeryButton'; -import { CopyButton } from './copyButton'; -import { FormattedError } from './error'; +import { RequeryButton } from './requery-button'; +import { CopyButton } from './copy-button'; +import { FormattedError } from './formatted-error'; import { ResultHeader } from './header'; -import type { ResultProps, TErrorLevels } from './types'; +import type { ErrorLevels } from '~/types'; + +interface ResultProps { + index: number; + queryLocation: string; +} const AnimatedAccordionItem = motion(AccordionItem); @@ -106,7 +111,7 @@ const _Result: React.ForwardRefRenderFunction = ( } }, [error, data, messages.general, messages.requestTimeout]); - const errorLevel = useMemo(() => { + const errorLevel = useMemo(() => { const statusMap = { success: 'success', warning: 'warning', @@ -114,7 +119,7 @@ const _Result: React.ForwardRefRenderFunction = ( danger: 'error', } as { [K in ResponseLevel]: 'success' | 'warning' | 'error' }; - let e: TErrorLevels = 'error'; + let e: ErrorLevels = 'error'; if (isLGError(error)) { const idx = error.level as ResponseLevel; @@ -182,103 +187,101 @@ const _Result: React.ForwardRefRenderFunction = ( '&:last-of-type': { borderBottom: 'none' }, }} > - <> - - - - - - {isStructuredOutput(data) && data.level === 'success' && tableComponent && ( - + + + + + + {isStructuredOutput(data) && data.level === 'success' && tableComponent && ( + + )} + + + + + + + + {!isError && typeof data !== 'undefined' ? ( + <> + {isStructuredOutput(data) && data.level === 'success' && tableComponent ? ( + {data.output} + ) : isStringOutput(data) && data.level === 'success' && !tableComponent ? ( + {data.output} + ) : isStringOutput(data) && data.level !== 'success' ? ( + + + + ) : ( + + + + )} + + ) : ( + + + )} - - - - - - - - {!isError && typeof data !== 'undefined' ? ( - <> - {isStructuredOutput(data) && data.level === 'success' && tableComponent ? ( - {data.output} - ) : isStringOutput(data) && data.level === 'success' && !tableComponent ? ( - {data.output} - ) : isStringOutput(data) && data.level !== 'success' ? ( - - - - ) : ( - - - - )} - - ) : ( - - - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/hyperglass/ui/components/results/requeryButton.tsx b/hyperglass/ui/components/results/requery-button.tsx similarity index 58% rename from hyperglass/ui/components/results/requeryButton.tsx rename to hyperglass/ui/components/results/requery-button.tsx index 9724659..f4ab286 100644 --- a/hyperglass/ui/components/results/requeryButton.tsx +++ b/hyperglass/ui/components/results/requery-button.tsx @@ -2,10 +2,15 @@ import { forwardRef } from 'react'; import { Button, Tooltip } from '@chakra-ui/react'; import { DynamicIcon } from '~/components'; -import type { TRequeryButton } from './types'; +import type { ButtonProps } from '@chakra-ui/react'; +import type { UseQueryResult } from 'react-query'; -const _RequeryButton: React.ForwardRefRenderFunction = ( - props: TRequeryButton, +interface RequeryButtonProps extends ButtonProps { + requery: Get, 'refetch'>; +} + +const _RequeryButton: React.ForwardRefRenderFunction = ( + props: RequeryButtonProps, ref, ) => { const { requery, ...rest } = props; @@ -19,7 +24,7 @@ const _RequeryButton: React.ForwardRefRenderFunction} colorScheme="secondary" {...rest} > @@ -29,4 +34,4 @@ const _RequeryButton: React.ForwardRefRenderFunction(_RequeryButton); +export const RequeryButton = forwardRef(_RequeryButton); diff --git a/hyperglass/ui/components/results/types.ts b/hyperglass/ui/components/results/types.ts deleted file mode 100644 index afaadec..0000000 --- a/hyperglass/ui/components/results/types.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { ButtonProps } from '@chakra-ui/react'; -import type { UseQueryResult } from 'react-query'; - -export interface TResultHeader { - title: string; - loading: boolean; - isError?: boolean; - errorMsg: string; - errorLevel: 'success' | 'warning' | 'error'; - runtime: number; -} - -export interface TFormattedError { - keywords: string[]; - message: string; -} - -export interface ResultProps { - index: number; - queryLocation: string; -} - -export type TErrorLevels = 'success' | 'warning' | 'error'; - -export interface TCopyButton extends ButtonProps { - copyValue: string; -} - -export interface TRequeryButton extends ButtonProps { - requery: UseQueryResult['refetch']; -} diff --git a/hyperglass/ui/components/select/select.tsx b/hyperglass/ui/components/select/select.tsx index 0f4d370..9cd4be9 100644 --- a/hyperglass/ui/components/select/select.tsx +++ b/hyperglass/ui/components/select/select.tsx @@ -26,14 +26,14 @@ import type { SelectInstance, } from 'react-select'; import type { SingleOption } from '~/types'; -import type { TSelectBase, TSelectContext } from './types'; +import type { SelectProps, SelectContextProps } from './types'; -const SelectContext = createContext({} as TSelectContext); -export const useSelectContext = (): TSelectContext => useContext(SelectContext); +const SelectContext = createContext({} as SelectContextProps); +export const useSelectContext = (): SelectContextProps => useContext(SelectContext); export const Select = forwardRef( ( - props: TSelectBase, + props: SelectProps, ref: React.Ref>, ): JSX.Element => { const { options, isMulti, onSelect, isError = false, components, ...rest } = props; diff --git a/hyperglass/ui/components/select/types.ts b/hyperglass/ui/components/select/types.ts index b464827..c61b763 100644 --- a/hyperglass/ui/components/select/types.ts +++ b/hyperglass/ui/components/select/types.ts @@ -6,9 +6,9 @@ import type { Theme, SingleOption } from '~/types'; export type SelectOnChange< Opt extends SingleOption = SingleOption, IsMulti extends boolean = boolean, -> = NonNullable['onChange']>; +> = NonNullable, 'onChange'>>; -export interface TSelectBase +export interface SelectProps extends ReactSelect.Props { name: string; isMulti?: IsMulti; @@ -18,7 +18,7 @@ export interface TSelectBase colorScheme?: Theme.ColorNames; } -export interface TSelectContext { +export interface SelectContextProps { colorMode: 'light' | 'dark'; isOpen: boolean; isError: boolean; diff --git a/hyperglass/ui/components/submit/submit.tsx b/hyperglass/ui/components/submit-button.tsx similarity index 95% rename from hyperglass/ui/components/submit/submit.tsx rename to hyperglass/ui/components/submit-button.tsx index 0dc5a5f..7b8f400 100644 --- a/hyperglass/ui/components/submit/submit.tsx +++ b/hyperglass/ui/components/submit-button.tsx @@ -20,7 +20,14 @@ import { useMobile, useColorValue } from '~/context'; import { useFormState } from '~/hooks'; import type { IconButtonProps } from '@chakra-ui/react'; -import type { SubmitButtonProps, ResponsiveSubmitButtonProps } from './types'; + +type SubmitButtonProps = Omit; + +interface ResponsiveSubmitButtonProps { + isOpen: boolean; + onClose(): void; + children: React.ReactNode; +} const _SubmitIcon: React.ForwardRefRenderFunction< HTMLButtonElement, diff --git a/hyperglass/ui/components/submit/index.ts b/hyperglass/ui/components/submit/index.ts deleted file mode 100644 index e9be2e3..0000000 --- a/hyperglass/ui/components/submit/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './submit'; diff --git a/hyperglass/ui/components/submit/types.ts b/hyperglass/ui/components/submit/types.ts deleted file mode 100644 index 689679f..0000000 --- a/hyperglass/ui/components/submit/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { IconButtonProps } from '@chakra-ui/react'; - -export type SubmitButtonProps = Omit; - -export interface ResponsiveSubmitButtonProps { - isOpen: boolean; - onClose(): void; - children: React.ReactNode; -} diff --git a/hyperglass/ui/components/table/button.tsx b/hyperglass/ui/components/table/button.tsx index c61baf0..6759abe 100644 --- a/hyperglass/ui/components/table/button.tsx +++ b/hyperglass/ui/components/table/button.tsx @@ -1,6 +1,8 @@ import { IconButton } from '@chakra-ui/react'; -import type { TTableIconButton } from './types'; +import type { IconButtonProps } from '@chakra-ui/react'; + +type TTableIconButton = Omit; export const TableIconButton = (props: TTableIconButton): JSX.Element => ( diff --git a/hyperglass/ui/components/table/cell.tsx b/hyperglass/ui/components/table/cell.tsx index f0f6778..0465602 100644 --- a/hyperglass/ui/components/table/cell.tsx +++ b/hyperglass/ui/components/table/cell.tsx @@ -1,9 +1,14 @@ import { chakra } from '@chakra-ui/react'; import { useColorValue } from '~/context'; -import type { TTableCell } from './types'; +import type { BoxProps } from '@chakra-ui/react'; -export const TableCell = (props: TTableCell): JSX.Element => { +interface TableCellProps extends Omit { + bordersVertical?: [boolean, number]; + align?: 'left' | 'right' | 'center'; +} + +export const TableCell = (props: TableCellProps): JSX.Element => { 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/index.ts b/hyperglass/ui/components/table/index.ts index 2f60898..aad1ca8 100644 --- a/hyperglass/ui/components/table/index.ts +++ b/hyperglass/ui/components/table/index.ts @@ -1,7 +1 @@ -export * from './body'; -export * from './button'; -export * from './cell'; -export * from './head'; 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 index 5973264..bd242c3 100644 --- a/hyperglass/ui/components/table/main.tsx +++ b/hyperglass/ui/components/table/main.tsx @@ -11,13 +11,24 @@ import { TableHead } from './head'; import { TableRow } from './row'; import { TableBody } from './body'; import { TableIconButton } from './button'; -import { TableSelectShow } from './pageSelect'; +import { PageSelect } from './page-select'; import type { TableOptions, PluginHook } from 'react-table'; -import type { TCellRender } from '~/types'; -import type { TTable } from './types'; +import type { Theme, TableColumn, CellRenderProps } from '~/types'; -export const Table = (props: TTable): JSX.Element => { +interface TableProps { + data: Route[]; + striped?: boolean; + columns: TableColumn[]; + heading?: React.ReactNode; + bordersVertical?: boolean; + bordersHorizontal?: boolean; + Cell?: React.FC; + rowHighlightProp?: keyof Route; + rowHighlightBg?: Theme.ColorNames; +} + +export const Table = (props: TableProps): JSX.Element => { const { data, columns, @@ -121,7 +132,7 @@ export const Table = (props: TTable): JSX.Element => { {...row.getRowProps()} > {row.cells.map((cell, i) => { - const { column, row, value } = cell as TCellRender; + const { column, row, value } = cell as CellRenderProps; return ( { {' '} {!isMobile && ( - { setPageSize(Number(e.target.value)); diff --git a/hyperglass/ui/components/table/pageSelect.tsx b/hyperglass/ui/components/table/page-select.tsx similarity index 82% rename from hyperglass/ui/components/table/pageSelect.tsx rename to hyperglass/ui/components/table/page-select.tsx index 8e17b95..1605ef4 100644 --- a/hyperglass/ui/components/table/pageSelect.tsx +++ b/hyperglass/ui/components/table/page-select.tsx @@ -2,7 +2,7 @@ import { Select } from '@chakra-ui/react'; import type { SelectProps } from '@chakra-ui/react'; -export const TableSelectShow = (props: SelectProps): JSX.Element => { +export const PageSelect = (props: SelectProps): JSX.Element => { const { value, ...rest } = props; return (