diff --git a/src/app/_components/NavBar/NetworkLabel.tsx b/src/app/_components/NavBar/NetworkLabel.tsx index bb4ad3766..d961446c1 100644 --- a/src/app/_components/NavBar/NetworkLabel.tsx +++ b/src/app/_components/NavBar/NetworkLabel.tsx @@ -1,4 +1,5 @@ import { Spinner } from '@chakra-ui/react'; +import { Flex, Icon, Stack } from '@chakra-ui/react'; import { Check, Trash } from '@phosphor-icons/react'; import { FC, useMemo } from 'react'; @@ -8,9 +9,8 @@ import { useGlobalContext } from '../../../common/context/useGlobalContext'; import { useCustomNetworkApiInfo } from '../../../common/queries/useCustomNetworkApiInfo'; import { Network } from '../../../common/types/network'; import { buildUrl } from '../../../common/utils/buildUrl'; -import { Icon, Flex, Stack } from '@chakra-ui/react'; import { IconButton } from '../../../ui/IconButton'; -import { Tooltip } from '../../../components/ui/tooltip'; +import { Tooltip } from '../../../ui/Tooltip'; import { Caption, Title } from '../../../ui/typography'; const ellipsisStyle: React.CSSProperties = { diff --git a/src/app/_components/Stats/NextStackingCycle/index.tsx b/src/app/_components/Stats/NextStackingCycle/index.tsx index 7aa188481..025d39886 100644 --- a/src/app/_components/Stats/NextStackingCycle/index.tsx +++ b/src/app/_components/Stats/NextStackingCycle/index.tsx @@ -4,7 +4,7 @@ import { Flex, GridProps, Icon, Text } from '@chakra-ui/react'; import { Info } from '@phosphor-icons/react'; import { useMemo } from 'react'; -import { Tooltip } from '../../../../components/ui/tooltip'; +import { Tooltip } from '../../../../ui/Tooltip'; import { ExplorerErrorBoundary } from '../../ErrorBoundary'; import { StackingCycle } from '../StackingCycle'; import { StatSection } from '../StatSection'; diff --git a/src/app/_components/Stats/StxSupply/index.tsx b/src/app/_components/Stats/StxSupply/index.tsx index b180c99f2..0ebac83d6 100644 --- a/src/app/_components/Stats/StxSupply/index.tsx +++ b/src/app/_components/Stats/StxSupply/index.tsx @@ -6,7 +6,7 @@ import { Info } from '@phosphor-icons/react'; import { useGlobalContext } from '../../../../common/context/useGlobalContext'; import { useSuspenseStxSupply } from '../../../../common/queries/useStxSupply'; import { abbreviateNumber } from '../../../../common/utils/utils'; -import { Tooltip } from '../../../../components/ui/tooltip'; +import { Tooltip } from '../../../../ui/Tooltip'; import { ExplorerErrorBoundary } from '../../ErrorBoundary'; import { StatSection } from '../StatSection'; diff --git a/src/app/address/[principal]/StxBalance/index.tsx b/src/app/address/[principal]/StxBalance/index.tsx index 6b98d5ced..bf343836f 100644 --- a/src/app/address/[principal]/StxBalance/index.tsx +++ b/src/app/address/[principal]/StxBalance/index.tsx @@ -6,8 +6,8 @@ import { Circle } from '../../../../common/components/Circle'; import { Section } from '../../../../common/components/Section'; import { useAccountBalance } from '../../../../common/queries/useAccountBalance'; import { microToStacks } from '../../../../common/utils/utils'; -import { Tooltip } from '../../../../components/ui/tooltip'; import { IconButton } from '../../../../ui/IconButton'; +import { Tooltip } from '../../../../ui/Tooltip'; import StxIcon from '../../../../ui/icons/StxIcon'; import { Caption } from '../../../../ui/typography'; import { ExplorerErrorBoundary } from '../../../_components/ErrorBoundary'; diff --git a/src/app/sandbox/components/ContractCall/FunctionView.tsx b/src/app/sandbox/components/ContractCall/FunctionView.tsx index 3abddf4b6..17e446410 100644 --- a/src/app/sandbox/components/ContractCall/FunctionView.tsx +++ b/src/app/sandbox/components/ContractCall/FunctionView.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Box, Flex, Stack, Text, Icon } from '@chakra-ui/react'; +import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react'; import { Info } from '@phosphor-icons/react'; import { useQueryClient } from '@tanstack/react-query'; import { Form, Formik, FormikErrors } from 'formik'; @@ -24,7 +24,7 @@ import { useStacksNetwork } from '../../../../common/hooks/useStacksNetwork'; import { showFn } from '../../../../common/utils/sandbox'; import { Switch } from '../../../../components/ui/switch'; import { Button } from '../../../../ui/Button'; -import { Tooltip } from '../../../../components/ui/tooltip'; +import { Tooltip } from '../../../../ui/Tooltip'; import { ListValueType, NonTupleValueType, TupleValueType, ValueType } from '../../types/values'; import { encodeOptional, encodeOptionalTuple, encodeTuple, getTuple } from '../../utils'; import { Argument } from '../Argument'; diff --git a/src/app/sandbox/components/Toolbar.tsx b/src/app/sandbox/components/Toolbar.tsx index 5b1eac055..fa59d68a4 100644 --- a/src/app/sandbox/components/Toolbar.tsx +++ b/src/app/sandbox/components/Toolbar.tsx @@ -1,7 +1,14 @@ 'use client'; -import { Select, createListCollection, useClipboard } from '@chakra-ui/react'; -import { Box, Flex, HStack, Icon } from '@chakra-ui/react'; +import { + Box, + Flex, + HStack, + Icon, + Select, + createListCollection, + useClipboard, +} from '@chakra-ui/react'; import { useMonaco } from '@monaco-editor/react'; import { CopySimple, X } from '@phosphor-icons/react'; import React, { useState } from 'react'; @@ -11,8 +18,8 @@ import { kvStoreContract } from '../../../common/constants/contracts/kv-store'; import { statusContract } from '../../../common/constants/contracts/status'; import { streamContract } from '../../../common/constants/contracts/stream'; import { useAppDispatch, useAppSelector } from '../../../common/state/hooks'; -import { Tooltip } from '../../../components/ui/tooltip'; import { IconButton } from '../../../ui/IconButton'; +import { Tooltip } from '../../../ui/Tooltip'; import { Caption } from '../../../ui/typography'; import { useUser } from '../hooks/useUser'; import { diff --git a/src/app/sandbox/deploy/LeftSection.tsx b/src/app/sandbox/deploy/LeftSection.tsx index 995248801..816943b18 100644 --- a/src/app/sandbox/deploy/LeftSection.tsx +++ b/src/app/sandbox/deploy/LeftSection.tsx @@ -12,10 +12,10 @@ import { useRandomName } from '../../../common/hooks/useRandomName'; import { useStacksNetwork } from '../../../common/hooks/useStacksNetwork'; import { useAppDispatch, useAppSelector } from '../../../common/state/hooks'; import { InputGroup } from '../../../components/ui/input-group'; -import { Tooltip } from '../../../components/ui/tooltip'; import { IconButton } from '../../../ui/IconButton'; import { Input } from '../../../ui/Input'; import { TextLink } from '../../../ui/TextLink'; +import { Tooltip } from '../../../ui/Tooltip'; import { Caption, Title } from '../../../ui/typography'; import { useUser } from '../hooks/useUser'; import { selectCodeBody, setUserData, toggleCodeToolbar } from '../sandbox-slice'; diff --git a/src/app/sandbox/layout/RightPanel.tsx b/src/app/sandbox/layout/RightPanel.tsx index 878f32702..14f887a61 100644 --- a/src/app/sandbox/layout/RightPanel.tsx +++ b/src/app/sandbox/layout/RightPanel.tsx @@ -4,8 +4,8 @@ import { SignOut } from '@phosphor-icons/react'; import { Card } from '../../../common/components/Card'; import { useAppSelector } from '../../../common/state/hooks'; import { microToStacksFormatted, truncateMiddle } from '../../../common/utils/utils'; -import { Tooltip } from '../../../components/ui/tooltip'; import { IconButton } from '../../../ui/IconButton'; +import { Tooltip } from '../../../ui/Tooltip'; import StxIcon from '../../../ui/icons/StxIcon'; import { Caption, Text } from '../../../ui/typography'; import { TransactionsPanel } from '../components/TransactionsPanel'; diff --git a/src/app/signers/SignerDistributionHeader.tsx b/src/app/signers/SignerDistributionHeader.tsx index 1ed5da0fa..6eb945f4b 100644 --- a/src/app/signers/SignerDistributionHeader.tsx +++ b/src/app/signers/SignerDistributionHeader.tsx @@ -2,7 +2,7 @@ import { Box, Flex, Icon, Link, Stack, Text, useDisclosure } from '@chakra-ui/re import { Question, X } from '@phosphor-icons/react'; import { DialogBackdrop, DialogContent, DialogRoot } from '../../components/ui/dialog'; -import { Tooltip } from '../../components/ui/tooltip'; +import { Tooltip } from '../../ui/Tooltip'; export function SignerDistributionHeader({ signerTitle }: { signerTitle: string }) { const { open, onToggle } = useDisclosure(); diff --git a/src/app/transactions/MempoolFeeStats.tsx b/src/app/transactions/MempoolFeeStats.tsx index 1e6fcd99c..38acc7485 100644 --- a/src/app/transactions/MempoolFeeStats.tsx +++ b/src/app/transactions/MempoolFeeStats.tsx @@ -1,4 +1,4 @@ -import { StackSeparator, VStack, Text, Icon, HStack, Flex, FlexProps, Box } from '@chakra-ui/react'; +import { Box, Flex, FlexProps, HStack, Icon, StackSeparator, Text, VStack } from '@chakra-ui/react'; import { CaretCircleDoubleUp, CaretCircleDown, @@ -16,7 +16,7 @@ import { useSuspenseMempoolFee } from '../../common/queries/useMempoolFee'; import { useSuspenseMempoolTransactionStats } from '../../common/queries/useMempoolTxStats'; import { TokenPrice } from '../../common/types/tokenPrice'; import { MICROSTACKS_IN_STACKS, capitalize, getUsdValue } from '../../common/utils/utils'; -import { Tooltip } from '../../components/ui/tooltip'; +import { Tooltip } from '../../ui/Tooltip'; import { ExplorerErrorBoundary } from '../_components/ErrorBoundary'; import { MempoolFeePieChart, getTxTypePieChartColor } from './MempoolFeePieChart'; import { @@ -273,7 +273,12 @@ export function MempoolFeeStats({ tokenPrice }: { tokenPrice: TokenPrice }) { return ( - + {icon} ( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/FormErrorMessage.tsx b/src/ui/FormErrorMessage.tsx deleted file mode 100644 index ce82aab61..000000000 --- a/src/ui/FormErrorMessage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; - -import { - FormErrorMessage as CUIFormErrorMessage, - FormErrorMessageProps as CUIFormErrorMessageProps, -} from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type FormErrorMessageProps = CUIFormErrorMessageProps & UIComponent; -export const FormErrorMessage = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/Hide.tsx b/src/ui/Hide.tsx deleted file mode 100644 index b72751d11..000000000 --- a/src/ui/Hide.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import { Hide as CUIHide, HideProps as CUIHideProps } from '@chakra-ui/react'; -import { FC } from 'react'; - -export const Hide: FC = ({ children, ...rest }) => ( - {children} -); diff --git a/src/ui/Menu.tsx b/src/ui/Menu.tsx deleted file mode 100644 index 02789b3e7..000000000 --- a/src/ui/Menu.tsx +++ /dev/null @@ -1,11 +0,0 @@ -'use client'; - -import { MenuRoot as CUIMenu, MenuRootProps as CUIMenuProps } from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuProps = CUIMenuProps & UIComponent; -export const Menu = forwardRef(({ children, ...rest }, ref) => ( - {children} -)); diff --git a/src/ui/MenuButton.tsx b/src/ui/MenuButton.tsx deleted file mode 100644 index 241b21b4a..000000000 --- a/src/ui/MenuButton.tsx +++ /dev/null @@ -1,28 +0,0 @@ -'use client'; - -import { - MenuTrigger as CUIMenuButton, - MenuTriggerProps as CUIMenuButtonProps, -} from '@chakra-ui/react'; -import { ReactNode, forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuButtonProps = CUIMenuButtonProps & - UIComponent & { - leftIcon?: ReactNode | null; - }; -export const MenuButton = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/MenuGroup.tsx b/src/ui/MenuGroup.tsx deleted file mode 100644 index 63b4d8f75..000000000 --- a/src/ui/MenuGroup.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; - -import { - MenuItemGroup as CUIItemMenuGroup, - MenuItemGroupProps as CUIMenuItemGroupProps, -} from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuGroupProps = CUIMenuItemGroupProps & UIComponent; -export const MenuItemGroup = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/MenuItem.tsx b/src/ui/MenuItem.tsx deleted file mode 100644 index bad9cd5ad..000000000 --- a/src/ui/MenuItem.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client'; - -import { MenuItem as CUIMenuItem, MenuItemProps as CUIMenuItemProps } from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuItemProps = CUIMenuItemProps & UIComponent; -export const MenuItem = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/MenuList.tsx b/src/ui/MenuList.tsx deleted file mode 100644 index 0a794576c..000000000 --- a/src/ui/MenuList.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; - -import { - MenuContent as CUIMenuContent, - MenuContentProps as CUIMenuContentProps, -} from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuListProps = CUIMenuContentProps & UIComponent; -export const MenuList = forwardRef( - ({ children, size, ...rest }, ref) => ( - *:not(:last-child)': { mb: 2 } }} - {...rest} - > - {children} - - ) -); diff --git a/src/ui/MenuSeparator.tsx b/src/ui/MenuSeparator.tsx deleted file mode 100644 index f4bc75bea..000000000 --- a/src/ui/MenuSeparator.tsx +++ /dev/null @@ -1,14 +0,0 @@ -'use client'; - -import { - MenuSeparator as CUIMenuSeparator, - MenuSeparatorProps as CUIMenuSeparatorProps, -} from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type MenuSeparatorProps = CUIMenuSeparatorProps & UIComponent; -export const MenuSeparator = forwardRef( - ({ children, size, ...rest }, ref) => {children} -); diff --git a/src/ui/Select.tsx b/src/ui/Select.tsx deleted file mode 100644 index 1c08fdbf5..000000000 --- a/src/ui/Select.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client'; - -import { SelectRoot as CUISelect, SelectRootProps as CUISelectProps } from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type SelectProps = CUISelectProps & UIComponent; -export const Select = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/Switch.tsx b/src/ui/Switch.tsx deleted file mode 100644 index bedf99271..000000000 --- a/src/ui/Switch.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client'; - -import type { HTMLChakraProps, RecipeVariantProps } from '@chakra-ui/react'; -import { - Switch as CUISwitch, - SwitchControlProps as CUISwitchControlProps, - SwitchLabelProps as CUISwitchLabelProps, - SwitchRootProps as CUISwitchRootProps, - createSlotRecipeContext, -} from '@chakra-ui/react'; - -import { switchSlotRecipe } from './theme/recipes/SwitchRecipe'; - -const { withProvider, withContext } = createSlotRecipeContext({ - recipe: switchSlotRecipe, -}); - -export type SwitchRootProps = HTMLChakraProps< - 'label', - RecipeVariantProps -> & - CUISwitchRootProps; -export const SwitchRoot = withProvider('input', 'root'); - -export type SwitchControlProps = HTMLChakraProps<'span'> & CUISwitchControlProps; -export const SwitchControl = withContext('span', 'control'); - -export type SwitchLabelProps = HTMLChakraProps<'span'> & CUISwitchLabelProps; -export const SwitchLabel = withContext('span', 'label'); diff --git a/src/ui/TabList.tsx b/src/ui/TabList.tsx deleted file mode 100644 index 697550add..000000000 --- a/src/ui/TabList.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client'; - -import { TabsList as CUITabsList, TabsListProps as CUITabsListProps } from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type TabsListProps = CUITabsListProps & UIComponent; -export const TabsList = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/TabPanel.tsx b/src/ui/TabPanel.tsx deleted file mode 100644 index 2d5b09ea6..000000000 --- a/src/ui/TabPanel.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; - -import { - TabsContent as CUITabsContent, - TabsContentProps as CUITabsContentProps, -} from '@chakra-ui/react'; -import { forwardRef } from 'react'; - -import { UIComponent } from './types'; - -export type TabPanelProps = CUITabsContentProps & UIComponent; -export const TabPanel = forwardRef( - ({ children, size, ...rest }, ref) => ( - - {children} - - ) -); diff --git a/src/ui/Tooltip.tsx b/src/ui/Tooltip.tsx index 1d15dfecf..50a3d9c18 100644 --- a/src/ui/Tooltip.tsx +++ b/src/ui/Tooltip.tsx @@ -5,7 +5,7 @@ import { forwardRef } from 'react'; import { Tooltip as SnippetTooltip, TooltipProps as SnippetTooltipProps, -} from '../components/ui/tooltip'; +} from '../ui/components/Tooltip'; export type TooltipProps = SnippetTooltipProps; // Having two files named Tooltip and tooltip could cause issues with the build diff --git a/src/ui/components.ts b/src/ui/components.ts index 495e8434f..a003072e7 100644 --- a/src/ui/components.ts +++ b/src/ui/components.ts @@ -1,35 +1,21 @@ 'use client'; -// TODO: review this when finished and remove unused components or components that aren't doing anything useful -export * from './Box'; -export * from './Button'; +export * from './Box'; // replace with @chakra-ui/react +export * from './Button'; // replace with @chakra-ui/react export * from './CodeEditor'; -export * from './Collapsible'; -export * from './Flex'; -export * from './FormErrorMessage'; -export * from './Grid'; -export * from './Hide'; -export * from './Icon'; -export * from './IconButton'; -export * from './Input'; -export * from './Menu'; -export * from './MenuButton'; -export * from './MenuGroup'; -export * from './MenuItem'; -export * from './MenuList'; +export * from './Flex'; // replace with @chakra-ui/react +export * from './Grid'; // replace with @chakra-ui/react +export * from './IconButton'; // replace with @chakra-ui/react +export * from './Input'; // replace with @chakra-ui/react export * from './Modal'; -export * from './Select'; export * from './Spinner'; -export * from './Stack'; -export * from './Switch'; -export * from './Table'; +export * from './Stack'; // replace with @chakra-ui/react +export * from './Table'; // replace with @chakra-ui/react export * from './TableContainer'; -export * from './TabList'; -export * from './TabPanel'; -export * from './Tbody'; -export * from './Td'; +export * from './Tbody'; // replace with @chakra-ui/react +export * from './Td'; // replace with @chakra-ui/react export * from './TextLink'; -export * from './Tfoot'; -export * from './Th'; -export * from './Thead'; +export * from './Tfoot'; // replace with @chakra-ui/react +export * from './Th'; // replace with @chakra-ui/react +export * from './Thead'; // replace with @chakra-ui/react export * from './Tooltip'; -export * from './Tr'; +export * from './Tr'; // replace with @chakra-ui/react