diff --git a/hyperglass/ui/components/debugger.tsx b/hyperglass/ui/components/debugger.tsx index 89a3ba6..1823851 100644 --- a/hyperglass/ui/components/debugger.tsx +++ b/hyperglass/ui/components/debugger.tsx @@ -3,18 +3,22 @@ import { Modal, HStack, Button, - useTheme, ModalBody, ModalHeader, ModalOverlay, ModalContent, - useColorMode, useDisclosure, ModalCloseButton, } from '@chakra-ui/react'; -import { useConfig, useColorValue, useBreakpointValue } from '~/context'; +import { useConfig } from '~/context'; import { CodeBlock, DynamicIcon } from '~/elements'; -import { useHyperglassConfig } from '~/hooks'; +import { + useTheme, + useColorMode, + useColorValue, + useBreakpointValue, + useHyperglassConfig, +} from '~/hooks'; import type { UseDisclosureReturn } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/directive-info-modal.tsx b/hyperglass/ui/components/directive-info-modal.tsx index aa3aa65..9b7b915 100644 --- a/hyperglass/ui/components/directive-info-modal.tsx +++ b/hyperglass/ui/components/directive-info-modal.tsx @@ -9,8 +9,8 @@ import { useDisclosure, ModalCloseButton, } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; import { DynamicIcon, Markdown } from '~/elements'; +import { useColorValue } from '~/hooks'; import type { ModalContentProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/footer/button.tsx b/hyperglass/ui/components/footer/button.tsx index b92bcbe..3546849 100644 --- a/hyperglass/ui/components/footer/button.tsx +++ b/hyperglass/ui/components/footer/button.tsx @@ -1,8 +1,8 @@ import { useMemo } from 'react'; import { Button, Menu, MenuButton, MenuList } from '@chakra-ui/react'; -import { useColorValue, useBreakpointValue, useConfig } from '~/context'; +import { useConfig } from '~/context'; import { Markdown } from '~/elements'; -import { useOpposingColor, useStrf } from '~/hooks'; +import { useColorValue, useBreakpointValue, useOpposingColor, useStrf } from '~/hooks'; import type { MenuListProps } from '@chakra-ui/react'; import type { Config } from '~/types'; diff --git a/hyperglass/ui/components/footer/color-mode.tsx b/hyperglass/ui/components/footer/color-mode.tsx index dbc0c9c..064b8cd 100644 --- a/hyperglass/ui/components/footer/color-mode.tsx +++ b/hyperglass/ui/components/footer/color-mode.tsx @@ -1,9 +1,8 @@ import { forwardRef } from 'react'; import { Button, Tooltip } from '@chakra-ui/react'; import { Switch, Case } from 'react-if'; -import { useColorMode, useColorValue, useBreakpointValue } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useOpposingColor } from '~/hooks'; +import { useOpposingColor, useColorMode, useColorValue, useBreakpointValue } from '~/hooks'; import type { ButtonProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/footer/footer.tsx b/hyperglass/ui/components/footer/footer.tsx index 60f4a82..63332da 100644 --- a/hyperglass/ui/components/footer/footer.tsx +++ b/hyperglass/ui/components/footer/footer.tsx @@ -1,9 +1,9 @@ import { useMemo } from 'react'; import { Flex, HStack, useToken } from '@chakra-ui/react'; import { If, Then } from 'react-if'; -import { useConfig, useMobile, useColorValue, useBreakpointValue } from '~/context'; +import { useConfig } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useStrf } from '~/hooks'; +import { useStrf, useMobile, useColorValue, useBreakpointValue } from '~/hooks'; import { FooterButton } from './button'; import { ColorModeToggle } from './color-mode'; import { FooterLink } from './link'; diff --git a/hyperglass/ui/components/footer/link.tsx b/hyperglass/ui/components/footer/link.tsx index a803f2f..cac171e 100644 --- a/hyperglass/ui/components/footer/link.tsx +++ b/hyperglass/ui/components/footer/link.tsx @@ -1,4 +1,5 @@ -import { Button, Link, useBreakpointValue } from '@chakra-ui/react'; +import { Button, Link } from '@chakra-ui/react'; +import { useBreakpointValue } from '~/hooks'; import type { ButtonProps, LinkProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/form-field.tsx b/hyperglass/ui/components/form-field.tsx index 7b709aa..3952735 100644 --- a/hyperglass/ui/components/form-field.tsx +++ b/hyperglass/ui/components/form-field.tsx @@ -2,8 +2,7 @@ import { useMemo } from 'react'; import { Flex, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react'; import { useFormContext } from 'react-hook-form'; import { If, Then } from 'react-if'; -import { useColorValue } from '~/context'; -import { useBooleanValue } from '~/hooks'; +import { useBooleanValue, useColorValue } from '~/hooks'; import type { FormControlProps } from '@chakra-ui/react'; import type { FieldError } from 'react-hook-form'; diff --git a/hyperglass/ui/components/greeting.tsx b/hyperglass/ui/components/greeting.tsx index 959d206..ca9c004 100644 --- a/hyperglass/ui/components/greeting.tsx +++ b/hyperglass/ui/components/greeting.tsx @@ -11,8 +11,8 @@ import { } from '@chakra-ui/react'; import { If, Then } from 'react-if'; import { Markdown } from '~/elements'; -import { useConfig, useColorValue } from '~/context'; -import { useGreeting, useOpposingColor } from '~/hooks'; +import { useConfig } from '~/context'; +import { useGreeting, useColorValue, useOpposingColor } from '~/hooks'; import type { ModalContentProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/header/header.tsx b/hyperglass/ui/components/header/header.tsx index 2e408c6..db7dd3b 100644 --- a/hyperglass/ui/components/header/header.tsx +++ b/hyperglass/ui/components/header/header.tsx @@ -1,7 +1,6 @@ import { Flex, ScaleFade } from '@chakra-ui/react'; -import { useBreakpointValue } from '~/context'; import { motionChakra } from '~/elements'; -import { useBooleanValue, useFormInteractive } from '~/hooks'; +import { useBooleanValue, useFormInteractive, useBreakpointValue } from '~/hooks'; import { Title } from './title'; const Wrapper = motionChakra('header', { diff --git a/hyperglass/ui/components/header/logo.tsx b/hyperglass/ui/components/header/logo.tsx index f7328e9..1858c32 100644 --- a/hyperglass/ui/components/header/logo.tsx +++ b/hyperglass/ui/components/header/logo.tsx @@ -1,6 +1,7 @@ import { useCallback, useMemo, useState } from 'react'; import { Image, Skeleton } from '@chakra-ui/react'; -import { useColorValue, useConfig } from '~/context'; +import { useConfig } from '~/context'; +import { useColorValue } from '~/hooks'; import type { ImageProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/header/subtitle-only.tsx b/hyperglass/ui/components/header/subtitle-only.tsx index a66bf5b..0f9a0cb 100644 --- a/hyperglass/ui/components/header/subtitle-only.tsx +++ b/hyperglass/ui/components/header/subtitle-only.tsx @@ -1,6 +1,7 @@ import { Heading } from '@chakra-ui/react'; -import { useConfig, useBreakpointValue } from '~/context'; -import { useTitleSize } from './useTitleSize'; +import { useConfig } from '~/context'; +import { useBreakpointValue } from '~/hooks'; +import { useTitleSize } from './use-title-size'; export const SubtitleOnly = (): JSX.Element => { const { web } = useConfig(); diff --git a/hyperglass/ui/components/header/title-only.tsx b/hyperglass/ui/components/header/title-only.tsx index 91907e3..4b12d1a 100644 --- a/hyperglass/ui/components/header/title-only.tsx +++ b/hyperglass/ui/components/header/title-only.tsx @@ -1,7 +1,7 @@ import { Heading } from '@chakra-ui/react'; import { useConfig } from '~/context'; import { useBooleanValue, useFormInteractive } from '~/hooks'; -import { useTitleSize } from './useTitleSize'; +import { useTitleSize } from './use-title-size'; export const TitleOnly = (): JSX.Element => { const { web } = useConfig(); diff --git a/hyperglass/ui/components/header/title.tsx b/hyperglass/ui/components/header/title.tsx index ad41477..4e3dcd3 100644 --- a/hyperglass/ui/components/header/title.tsx +++ b/hyperglass/ui/components/header/title.tsx @@ -2,8 +2,8 @@ import { Flex, Button, VStack } from '@chakra-ui/react'; import { motion } from 'framer-motion'; import { isSafari } from 'react-device-detect'; import { Switch, Case } from 'react-if'; -import { useConfig, useMobile } from '~/context'; -import { useFormState, useFormInteractive } from '~/hooks'; +import { useConfig } from '~/context'; +import { useFormState, useFormInteractive, useMobile } from '~/hooks'; import { Logo } from './logo'; import { SubtitleOnly } from './subtitle-only'; import { TitleOnly } from './title-only'; diff --git a/hyperglass/ui/components/header/useTitleSize.ts b/hyperglass/ui/components/header/use-title-size.ts similarity index 97% rename from hyperglass/ui/components/header/useTitleSize.ts rename to hyperglass/ui/components/header/use-title-size.ts index 6e2eea1..e6223c9 100644 --- a/hyperglass/ui/components/header/useTitleSize.ts +++ b/hyperglass/ui/components/header/use-title-size.ts @@ -1,6 +1,6 @@ import { useMemo, useState } from 'react'; import { useToken } from '@chakra-ui/react'; -import { useMobile } from '~/context'; +import { useMobile } from '~/hooks'; // Mobile: // xs: 32 diff --git a/hyperglass/ui/components/location-card.tsx b/hyperglass/ui/components/location-card.tsx index 29d4cd1..7983963 100644 --- a/hyperglass/ui/components/location-card.tsx +++ b/hyperglass/ui/components/location-card.tsx @@ -1,8 +1,7 @@ import { useMemo, useState } from 'react'; -import { Flex, Box, Avatar, chakra } from '@chakra-ui/react'; -import { motion } from 'framer-motion'; -import { useColorValue } from '~/context'; -import { useOpposingColor } from '~/hooks'; +import { Flex, Avatar, chakra } from '@chakra-ui/react'; +import { motionChakra } from '~/elements'; +import { useColorValue, useOpposingColor } from '~/hooks'; import type { SingleOption } from '~/types'; import type { LocationOption } from './query-location'; @@ -14,7 +13,21 @@ interface LocationCardProps { hasError: boolean; } -const MotionBox = motion(Box); +const LocationCardWrapper = motionChakra('div', { + baseStyle: { + py: 4, + px: 6, + w: '100%', + minW: 'xs', + maxW: 'sm', + mx: 'auto', + shadow: 'sm', + rounded: 'lg', + cursor: 'pointer', + borderWidth: '1px', + borderStyle: 'solid', + }, +}); export const LocationCard = (props: LocationCardProps): JSX.Element => { const { option, onChange, defaultChecked, hasError } = props; @@ -51,20 +64,9 @@ export const LocationCard = (props: LocationCardProps): JSX.Element => { [hasError, isChecked, checkedBorder, errorBorder], ); return ( - { @@ -101,6 +103,6 @@ export const LocationCard = (props: LocationCardProps): JSX.Element => { {option.data.description as string} )} - + ); }; diff --git a/hyperglass/ui/components/meta.tsx b/hyperglass/ui/components/meta.tsx index 6f9c61e..ed3aaf0 100644 --- a/hyperglass/ui/components/meta.tsx +++ b/hyperglass/ui/components/meta.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useState } from 'react'; import Head from 'next/head'; -import { useTheme } from '@chakra-ui/react'; import { useConfig } from '~/context'; +import { useTheme } from '~/hooks'; import { googleFontUrl } from '~/util'; export const Meta = (): JSX.Element => { diff --git a/hyperglass/ui/components/output/fields.tsx b/hyperglass/ui/components/output/fields.tsx index 293d9f3..d7e3cb3 100644 --- a/hyperglass/ui/components/output/fields.tsx +++ b/hyperglass/ui/components/output/fields.tsx @@ -4,9 +4,9 @@ import dayjs from 'dayjs'; import relativeTimePlugin from 'dayjs/plugin/relativeTime'; import utcPlugin from 'dayjs/plugin/utc'; import { If, Then, Else } from 'react-if'; -import { useConfig, useColorValue } from '~/context'; +import { useConfig } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useOpposingColor } from '~/hooks'; +import { useOpposingColor, useColorValue } from '~/hooks'; import type { TextProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/output/text-output.tsx b/hyperglass/ui/components/output/text-output.tsx index 9001d1b..1d2c821 100644 --- a/hyperglass/ui/components/output/text-output.tsx +++ b/hyperglass/ui/components/output/text-output.tsx @@ -1,5 +1,6 @@ import { Box } from '@chakra-ui/react'; -import { useColorValue, useConfig } from '~/context'; +import { useConfig } from '~/context'; +import { useColorValue } from '~/hooks'; import { Highlighted } from './highlighted'; import type { BoxProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/path/chart.tsx b/hyperglass/ui/components/path/chart.tsx index 6a4bd11..bddd719 100644 --- a/hyperglass/ui/components/path/chart.tsx +++ b/hyperglass/ui/components/path/chart.tsx @@ -1,7 +1,7 @@ import { Box, Flex, SkeletonText, Badge, VStack } from '@chakra-ui/react'; import ReactFlow, { Background, ReactFlowProvider, Handle, Position } from 'react-flow-renderer'; -import { useConfig, useColorValue, useColorToken } from '~/context'; -import { useASNDetail } from '~/hooks'; +import { useConfig } from '~/context'; +import { useASNDetail, useColorValue, useColorToken } from '~/hooks'; import { Controls } from './controls'; import { useElements } from './useElements'; diff --git a/hyperglass/ui/components/path/path.tsx b/hyperglass/ui/components/path/path.tsx index 87f448f..16cea1f 100644 --- a/hyperglass/ui/components/path/path.tsx +++ b/hyperglass/ui/components/path/path.tsx @@ -8,8 +8,7 @@ import { useDisclosure, ModalCloseButton, } from '@chakra-ui/react'; -import { useColorValue, useBreakpointValue } from '~/context'; -import { useFormState } from '~/hooks'; +import { useFormState, useColorValue, useBreakpointValue } from '~/hooks'; import { PathButton } from './path-button'; import { Chart } from './chart'; diff --git a/hyperglass/ui/components/prompt/desktop.tsx b/hyperglass/ui/components/prompt/desktop.tsx index 4816e4c..e9cdd1c 100644 --- a/hyperglass/ui/components/prompt/desktop.tsx +++ b/hyperglass/ui/components/prompt/desktop.tsx @@ -6,7 +6,7 @@ import { PopoverContent, PopoverCloseButton, } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { PromptProps } from './types'; diff --git a/hyperglass/ui/components/prompt/index.tsx b/hyperglass/ui/components/prompt/index.tsx index d527164..1f50f6d 100644 --- a/hyperglass/ui/components/prompt/index.tsx +++ b/hyperglass/ui/components/prompt/index.tsx @@ -1,4 +1,4 @@ -import { useMobile } from '~/context'; +import { useMobile } from '~/hooks'; import { DesktopPrompt } from './desktop'; import { MobilePrompt } from './mobile'; diff --git a/hyperglass/ui/components/prompt/mobile.tsx b/hyperglass/ui/components/prompt/mobile.tsx index afde8a8..47c0da5 100644 --- a/hyperglass/ui/components/prompt/mobile.tsx +++ b/hyperglass/ui/components/prompt/mobile.tsx @@ -1,5 +1,5 @@ import { Modal, ModalBody, ModalOverlay, ModalContent, ModalCloseButton } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { PromptProps } from './types'; diff --git a/hyperglass/ui/components/query-target.tsx b/hyperglass/ui/components/query-target.tsx index 4e7838f..0b9a520 100644 --- a/hyperglass/ui/components/query-target.tsx +++ b/hyperglass/ui/components/query-target.tsx @@ -4,8 +4,7 @@ import { components } from 'react-select'; import { If, Then, Else } from 'react-if'; import { Select } from '~/components'; import { isSingleValue } from '~/components/select'; -import { useColorValue } from '~/context'; -import { useDirective, useFormState } from '~/hooks'; +import { useColorValue, useDirective, useFormState } from '~/hooks'; import { isSelectDirective } from '~/types'; import { UserIP } from './user-ip'; diff --git a/hyperglass/ui/components/reset-button.tsx b/hyperglass/ui/components/reset-button.tsx index 7348583..c0ea69f 100644 --- a/hyperglass/ui/components/reset-button.tsx +++ b/hyperglass/ui/components/reset-button.tsx @@ -1,8 +1,7 @@ import { Flex, IconButton } from '@chakra-ui/react'; import { AnimatePresence } from 'framer-motion'; -import { useColorValue } from '~/context'; import { AnimatedDiv, DynamicIcon } from '~/elements'; -import { useOpposingColor, useFormState } from '~/hooks'; +import { useColorValue, useOpposingColor, useFormState } from '~/hooks'; import type { FlexProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/resolved-target.tsx b/hyperglass/ui/components/resolved-target.tsx index d976967..6ce8a6a 100644 --- a/hyperglass/ui/components/resolved-target.tsx +++ b/hyperglass/ui/components/resolved-target.tsx @@ -1,8 +1,8 @@ import { useMemo } from 'react'; import { Button, Stack, Text, VStack } from '@chakra-ui/react'; -import { useConfig, useColorValue } from '~/context'; +import { useConfig } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useStrf, useDNSQuery, useFormState } from '~/hooks'; +import { useStrf, useColorValue, useDNSQuery, useFormState } from '~/hooks'; import type { DnsOverHttps } from '~/types'; diff --git a/hyperglass/ui/components/results/header.tsx b/hyperglass/ui/components/results/header.tsx index ee21359..0adf3ea 100644 --- a/hyperglass/ui/components/results/header.tsx +++ b/hyperglass/ui/components/results/header.tsx @@ -1,8 +1,8 @@ import { useMemo } from 'react'; import { AccordionIcon, Box, Spinner, HStack, Text, Tooltip } from '@chakra-ui/react'; -import { useConfig, useColorValue } from '~/context'; +import { useConfig } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useOpposingColor, useStrf } from '~/hooks'; +import { useColorValue, useOpposingColor, useStrf } from '~/hooks'; import type { ErrorLevels } from '~/types'; diff --git a/hyperglass/ui/components/results/individual.tsx b/hyperglass/ui/components/results/individual.tsx index 50f50ae..bbffe1d 100644 --- a/hyperglass/ui/components/results/individual.tsx +++ b/hyperglass/ui/components/results/individual.tsx @@ -17,9 +17,17 @@ import startCase from 'lodash/startCase'; import isEqual from 'react-fast-compare'; import { If, Then, Else } from 'react-if'; import { BGPTable, Path, TextOutput } from '~/components'; -import { useColorValue, useConfig, useMobile } from '~/context'; +import { useConfig } from '~/context'; import { Countdown, DynamicIcon } from '~/elements'; -import { useStrf, useLGQuery, useTableToString, useFormState, useDevice } from '~/hooks'; +import { + useStrf, + useDevice, + useMobile, + useLGQuery, + useFormState, + useColorValue, + useTableToString, +} from '~/hooks'; import { isStructuredOutput, isStringOutput } from '~/types'; import { isStackError, isFetchError, isLGError, isLGOutputOrError } from './guards'; import { RequeryButton } from './requery-button'; diff --git a/hyperglass/ui/components/results/tags.tsx b/hyperglass/ui/components/results/tags.tsx index 7d82421..867cd7f 100644 --- a/hyperglass/ui/components/results/tags.tsx +++ b/hyperglass/ui/components/results/tags.tsx @@ -1,9 +1,9 @@ import { useMemo } from 'react'; import { Box, Stack, useToken } from '@chakra-ui/react'; import { motion, AnimatePresence } from 'framer-motion'; -import { useConfig, useBreakpointValue } from '~/context'; +import { useConfig } from '~/context'; import { Label } from '~/elements'; -import { useFormState } from '~/hooks'; +import { useFormState, useBreakpointValue } from '~/hooks'; import type { Transition } from 'framer-motion'; diff --git a/hyperglass/ui/components/select/select.tsx b/hyperglass/ui/components/select/select.tsx index 9cd4be9..b8bae08 100644 --- a/hyperglass/ui/components/select/select.tsx +++ b/hyperglass/ui/components/select/select.tsx @@ -1,7 +1,7 @@ import { createContext, forwardRef, useContext } from 'react'; import ReactSelect from 'react-select'; import { useDisclosure } from '@chakra-ui/react'; -import { useColorMode } from '~/context'; +import { useColorMode } from '~/hooks'; import { Option } from './option'; import { useRSTheme, diff --git a/hyperglass/ui/components/select/styles.ts b/hyperglass/ui/components/select/styles.ts index 39dcc4e..eb3ade6 100644 --- a/hyperglass/ui/components/select/styles.ts +++ b/hyperglass/ui/components/select/styles.ts @@ -3,8 +3,13 @@ import { useCallback } from 'react'; import { useToken } from '@chakra-ui/react'; import { mergeWith } from '@chakra-ui/utils'; import { merge } from 'merge-anything'; -import { useOpposingColor, useOpposingColorCallback } from '~/hooks'; -import { useColorValue, useColorToken, useMobile } from '~/context'; +import { + useMobile, + useColorValue, + useColorToken, + useOpposingColor, + useOpposingColorCallback, +} from '~/hooks'; import { useSelectContext } from './select'; import * as ReactSelect from 'react-select'; diff --git a/hyperglass/ui/components/submit-button.tsx b/hyperglass/ui/components/submit-button.tsx index e62e747..f85fc01 100644 --- a/hyperglass/ui/components/submit-button.tsx +++ b/hyperglass/ui/components/submit-button.tsx @@ -16,9 +16,8 @@ import { import { useFormContext } from 'react-hook-form'; import { If, Then, Else } from 'react-if'; import { ResolvedTarget } from '~/components'; -import { useMobile, useColorValue } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useFormState } from '~/hooks'; +import { useFormState, useMobile, useColorValue } from '~/hooks'; import type { IconButtonProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/table/cell.tsx b/hyperglass/ui/components/table/cell.tsx index 0465602..228576f 100644 --- a/hyperglass/ui/components/table/cell.tsx +++ b/hyperglass/ui/components/table/cell.tsx @@ -1,5 +1,5 @@ import { chakra } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { BoxProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/table/head.tsx b/hyperglass/ui/components/table/head.tsx index 92a7345..3e82fad 100644 --- a/hyperglass/ui/components/table/head.tsx +++ b/hyperglass/ui/components/table/head.tsx @@ -1,5 +1,5 @@ import { chakra } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { BoxProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/table/main.tsx b/hyperglass/ui/components/table/main.tsx index 9d2a671..5ce7028 100644 --- a/hyperglass/ui/components/table/main.tsx +++ b/hyperglass/ui/components/table/main.tsx @@ -3,8 +3,8 @@ import { Flex, Text } from '@chakra-ui/react'; import { usePagination, useSortBy, useTable } from 'react-table'; import { If, Then, Else } from 'react-if'; -import { useMobile } from '~/context'; import { CardBody, CardFooter, CardHeader, DynamicIcon } from '~/elements'; +import { useMobile } from '~/hooks'; import { TableMain } from './table'; import { TableCell } from './cell'; import { TableHead } from './head'; diff --git a/hyperglass/ui/components/table/row.tsx b/hyperglass/ui/components/table/row.tsx index 1738947..501c0a4 100644 --- a/hyperglass/ui/components/table/row.tsx +++ b/hyperglass/ui/components/table/row.tsx @@ -1,9 +1,7 @@ import { chakra } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; -import { useOpposingColor } from '~/hooks'; +import { useColorValue, useOpposingColor } from '~/hooks'; import type { BoxProps } from '@chakra-ui/react'; - import type { Theme } from '~/types'; interface TableRowProps extends BoxProps { diff --git a/hyperglass/ui/components/table/table.tsx b/hyperglass/ui/components/table/table.tsx index 8e1d927..c0fba35 100644 --- a/hyperglass/ui/components/table/table.tsx +++ b/hyperglass/ui/components/table/table.tsx @@ -1,5 +1,5 @@ import { chakra } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { BoxProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/components/user-ip.tsx b/hyperglass/ui/components/user-ip.tsx index 6f22a00..7a31630 100644 --- a/hyperglass/ui/components/user-ip.tsx +++ b/hyperglass/ui/components/user-ip.tsx @@ -1,9 +1,9 @@ import { useMemo } from 'react'; import { Button, Stack, Text, VStack, useDisclosure } from '@chakra-ui/react'; import { Prompt } from '~/components'; -import { useConfig, useColorValue } from '~/context'; +import { useConfig } from '~/context'; import { DynamicIcon } from '~/elements'; -import { useStrf, useWtf } from '~/hooks'; +import { useStrf, useWtf, useColorValue } from '~/hooks'; interface UserIPProps { setTarget(target: string): void; diff --git a/hyperglass/ui/context/HyperglassProvider.tsx b/hyperglass/ui/context/HyperglassProvider.tsx deleted file mode 100644 index 73e7811..0000000 --- a/hyperglass/ui/context/HyperglassProvider.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { createContext, useContext, useMemo } from 'react'; -import { - useToken, - ChakraProvider, - useColorModeValue, - useBreakpointValue, - useTheme as useChakraTheme, -} from '@chakra-ui/react'; -import { QueryClient, QueryClientProvider } from 'react-query'; -import { makeTheme, defaultTheme } from '~/util'; - -import type { Config, Theme } from '~/types'; -import type { THyperglassProvider } from './types'; - -export const HyperglassContext = createContext({} as Config); - -const queryClient = new QueryClient(); - -export const HyperglassProvider = (props: THyperglassProvider): JSX.Element => { - const { config, children } = props; - const value = useMemo(() => config, [config]); - const userTheme = value && makeTheme(value.web.theme, value.web.theme.defaultColorMode); - const theme = value ? userTheme : defaultTheme; - return ( - - - {children} - - - ); -}; - -/** - * Get the current configuration. - */ -export const useConfig = (): Config => useContext(HyperglassContext); - -/** - * Get the current theme object. - */ -export const useTheme = (): Theme.Full => useChakraTheme(); - -/** - * Determine if device is mobile or desktop based on Chakra UI theme breakpoints. - */ -export const useMobile = (): boolean => - useBreakpointValue({ base: true, md: true, lg: false, xl: false }) ?? true; - -/** - * Convenience function to combine Chakra UI's useToken & useColorModeValue. - */ -export const useColorToken = ( - token: keyof Theme.Full, - light: L, - dark: D, -): L | D => useColorModeValue(useToken(token, light), useToken(token, dark)); - -export { - useColorMode, - useBreakpointValue, - useColorModeValue as useColorValue, -} from '@chakra-ui/react'; diff --git a/hyperglass/ui/context/hyperglass-provider.tsx b/hyperglass/ui/context/hyperglass-provider.tsx new file mode 100644 index 0000000..264f3f5 --- /dev/null +++ b/hyperglass/ui/context/hyperglass-provider.tsx @@ -0,0 +1,34 @@ +import { createContext, useContext, useMemo } from 'react'; +import { ChakraProvider } from '@chakra-ui/react'; +import { QueryClient, QueryClientProvider } from 'react-query'; +import { makeTheme, defaultTheme } from '~/util'; + +import type { Config } from '~/types'; + +interface HyperglassProviderProps { + config: Config; + children: React.ReactNode; +} + +export const HyperglassContext = createContext({} as Config); + +const queryClient = new QueryClient(); + +export const HyperglassProvider = (props: HyperglassProviderProps): JSX.Element => { + const { config, children } = props; + const value = useMemo(() => config, [config]); + const userTheme = value && makeTheme(value.web.theme, value.web.theme.defaultColorMode); + const theme = value ? userTheme : defaultTheme; + return ( + + + {children} + + + ); +}; + +/** + * Get the current configuration. + */ +export const useConfig = (): Config => useContext(HyperglassContext); diff --git a/hyperglass/ui/context/index.ts b/hyperglass/ui/context/index.ts index 757b5cf..42f6a79 100644 --- a/hyperglass/ui/context/index.ts +++ b/hyperglass/ui/context/index.ts @@ -1 +1 @@ -export * from './HyperglassProvider'; +export * from './hyperglass-provider'; diff --git a/hyperglass/ui/context/types.ts b/hyperglass/ui/context/types.ts deleted file mode 100644 index 60eac45..0000000 --- a/hyperglass/ui/context/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { Config } from '~/types'; - -export interface THyperglassProvider { - config: Config; - children: React.ReactNode; -} diff --git a/hyperglass/ui/elements/card/body.tsx b/hyperglass/ui/elements/card/body.tsx index ed31a30..9d879bc 100644 --- a/hyperglass/ui/elements/card/body.tsx +++ b/hyperglass/ui/elements/card/body.tsx @@ -1,5 +1,5 @@ import { Flex } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { FlexProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/elements/card/header.tsx b/hyperglass/ui/elements/card/header.tsx index 3184879..fa4a447 100644 --- a/hyperglass/ui/elements/card/header.tsx +++ b/hyperglass/ui/elements/card/header.tsx @@ -1,5 +1,5 @@ import { Flex, Text } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { FlexProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/elements/code-block.tsx b/hyperglass/ui/elements/code-block.tsx index ad37b9c..eeb25e8 100644 --- a/hyperglass/ui/elements/code-block.tsx +++ b/hyperglass/ui/elements/code-block.tsx @@ -1,5 +1,5 @@ import { Box } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { BoxProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/elements/countdown.tsx b/hyperglass/ui/elements/countdown.tsx index 910dd48..40a3110 100644 --- a/hyperglass/ui/elements/countdown.tsx +++ b/hyperglass/ui/elements/countdown.tsx @@ -1,7 +1,7 @@ import { chakra, Text } from '@chakra-ui/react'; import ReactCountdown, { zeroPad } from 'react-countdown'; import { If, Then, Else } from 'react-if'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { CountdownRenderProps } from 'react-countdown'; diff --git a/hyperglass/ui/elements/label.tsx b/hyperglass/ui/elements/label.tsx index aa70ca5..71cbee0 100644 --- a/hyperglass/ui/elements/label.tsx +++ b/hyperglass/ui/elements/label.tsx @@ -1,7 +1,6 @@ import { forwardRef } from 'react'; import { Flex } from '@chakra-ui/react'; -import { useColorValue } from '~/context'; -import { useOpposingColor } from '~/hooks'; +import { useColorValue, useOpposingColor } from '~/hooks'; import type { FlexProps } from '@chakra-ui/react'; diff --git a/hyperglass/ui/elements/markdown/elements.tsx b/hyperglass/ui/elements/markdown/elements.tsx index 5f91dd4..8adf9aa 100644 --- a/hyperglass/ui/elements/markdown/elements.tsx +++ b/hyperglass/ui/elements/markdown/elements.tsx @@ -19,7 +19,7 @@ import { } from '@chakra-ui/react'; import { If, Then, Else } from 'react-if'; import { CodeBlock as CustomCodeBlock } from '~/elements'; -import { useColorValue } from '~/context'; +import { useColorValue } from '~/hooks'; import type { BoxProps, diff --git a/hyperglass/ui/hooks/use-opposing-color.ts b/hyperglass/ui/hooks/use-opposing-color.ts index 5fa5746..882ba3a 100644 --- a/hyperglass/ui/hooks/use-opposing-color.ts +++ b/hyperglass/ui/hooks/use-opposing-color.ts @@ -1,6 +1,6 @@ import { useMemo, useCallback } from 'react'; import { getColor, isLight } from '@chakra-ui/theme-tools'; -import { useTheme } from '~/context'; +import { useTheme } from './theme-hooks'; interface OpposingColorOptions { light?: string; diff --git a/hyperglass/ui/types/theme.ts b/hyperglass/ui/types/theme.ts index a82317b..e929b8a 100644 --- a/hyperglass/ui/types/theme.ts +++ b/hyperglass/ui/types/theme.ts @@ -12,7 +12,8 @@ export namespace Theme { export type FontWeights = Partial; - export interface Full extends Omit { + export interface Full extends Omit { colors: Colors; + fonts: Fonts; } }