Merge pull request #130 from loathers/chakra3

chakra-ui v3
loathers · Nov 21, 2024 · c9d039e · c9d039e
2 parents 623dce1 + a4f710c
commit c9d039e
Show file tree

Hide file tree

Showing 105 changed files with 2,203 additions and 1,252 deletions.
diff --git a/package.json b/package.json
@@ -5,11 +5,9 @@
   "type": "module",
   "packageManager": "[email protected]",
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^3.1.2",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@eslint/compat": "^1.1.1",
     "@vitejs/plugin-react": "^4.3.1",
     "dataloader": "^2.2.2",
@@ -18,16 +16,18 @@
     "eslint-plugin-libram": "^0.4.17",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "framer-motion": "^11.3.29",
     "globals": "^15.9.0",
     "html-entities": "^2.5.2",
     "kolmafia": "npm:[email protected]",
     "libram": "^0.9.18",
+    "lucide-react": "^0.460.0",
+    "next-themes": "^0.4.3",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
     "tome-kolmafia-lib": "^5.28118.0",
     "tome-kolmafia-react": "^0.2.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,48 +1,12 @@
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-ui/react";
 import { RefreshContextProvider } from "tome-kolmafia-react";
 
 import NagContextProvider from "./contexts/NagContextProvider";
 import Layout from "./Layout";
-
-const bulleted = {
-  container: {
-    paddingTop: "0.125rem",
-    paddingLeft: "1.25rem",
-  },
-  item: {
-    textIndent: "-0.375rem",
-    _before: {
-      content: '"●"',
-      verticalAlign: "middle",
-      fontFamily: "Arial, Helvetica, sans-serif",
-      fontSize: "0.75rem",
-      lineHeight: 0,
-      display: "inline-block",
-      width: "0.375rem",
-      // This is a hackish tweak...
-      marginTop: "-3px",
-    },
-  },
-};
-
-const theme = extendTheme({
-  lineHeights: {
-    none: 1,
-    shorter: 1.05,
-    short: 1.1,
-    base: 1.15,
-    tall: 1.25,
-    taller: 1.5,
-  },
-  components: {
-    List: {
-      variants: { bulleted },
-    },
-  },
-});
+import { system } from "./theme";
 
 const App = () => (
-  <ChakraProvider theme={theme}>
+  <ChakraProvider value={system}>
     <RefreshContextProvider>
       <NagContextProvider>
         <Layout />

diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Container,
-  Divider,
-  Flex,
-  Stack,
-  useToast,
-} from "@chakra-ui/react";
+import { Box, Container, Flex, Separator, Stack } from "@chakra-ui/react";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { setGlobalErrorHandler } from "tome-kolmafia-lib";
 import { RefreshContext } from "tome-kolmafia-react";
@@ -15,6 +8,7 @@ import ChatButton from "./components/ChatButton";
 import LocationBar from "./components/LocationBar";
 import PrefsButton from "./components/PrefsButton";
 import RefreshButton from "./components/RefreshButton";
+import { toaster, Toaster } from "./components/ui/toaster";
 import { addDevelopmentListeners } from "./prefs/addListeners";
 import NagSection from "./sections/NagSection";
 import QuestSection from "./sections/QuestSection";
@@ -52,26 +46,23 @@ const Layout = () => {
     }
   }, [triggerHardRefresh]);
 
-  const toast = useToast();
   useEffect(() => {
     setGlobalErrorHandler((err) => {
       console.error(err);
-      toast({
+      toaster.error({
         title: "Error updating.",
         description:
           err !== null && (typeof err === "object" || typeof err === "string")
             ? err.toString()
             : "Unknown error.",
-        status: "error",
         duration: 10000,
-        isClosable: true,
-        containerStyle: { maxW: "95vw" },
       });
     });
-  }, [toast]);
+  }, []);
 
   return (
     <Container
+      maxW="4xl"
       paddingX={0}
       fontSize="sm"
       h="100vh"
@@ -81,7 +72,7 @@ const Layout = () => {
       <Flex position="relative" minH={0}>
         <Stack
           direction="row"
-          spacing={1}
+          gap={1}
           position="absolute"
           top={1}
           right={1}
@@ -95,7 +86,7 @@ const Layout = () => {
           <Stack>
             <NagSection />
             <QuestSection />
-            <Divider />
+            <Separator />
             <ResourceSection />
           </Stack>
         </Box>
@@ -109,6 +100,7 @@ const Layout = () => {
         />
       </Flex>
       <LocationBar />
+      <Toaster />
     </Container>
   );
 };

diff --git a/src/components/AdviceTip.tsx b/src/components/AdviceTip.tsx
diff --git a/src/components/AdviceTooltip.tsx b/src/components/AdviceTooltip.tsx
@@ -1,39 +1,23 @@
-import { Box, Text, TooltipProps } from "@chakra-ui/react";
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 
-import AdviceTip from "./AdviceTip";
+import { Tooltip, TooltipProps } from "./ui/tooltip";
 
-interface AdviceTooltipProps extends Omit<TooltipProps, "children"> {
-  text: string | JSX.Element;
-  label: ReactNode;
-}
-/**
- * A tooltip generated on text for a quick descriptive tooltip.
- * @param text The text you want displayed inside this tooltip.
- * @param label The text you want displayed that users hover over to get the tooltip
- * @returns A FC Tooltip object where the label generates the tooltip on hoverover.
- */
-
-const AdviceTooltip: FC<AdviceTooltipProps> = ({ text, label, ...props }) => {
-  const toolTip = (
-    <Box bg="gray.100" p={2} rounded="md" fontSize={12}>
-      {typeof text === "string" ? <Text>{text}</Text> : text}
-    </Box>
-  );
-
-  return (
-    <AdviceTip label={toolTip} {...props}>
-      <Text
-        as="span"
-        fontWeight="bold"
-        color="gray.500"
-        decoration="underline dotted lightsteelblue"
-        cursor="pointer"
-      >
-        {label}
-      </Text>
-    </AdviceTip>
-  );
-};
+const AdviceTooltip: FC<TooltipProps> = ({ content, ...props }) => (
+  <Tooltip
+    showArrow
+    openDelay={0}
+    contentProps={{
+      css: { "--tooltip-bg": "bg" },
+      bgColor: "bg",
+      border: "1px solid border",
+      shadow: "xs",
+      rounded: "md",
+      mx: 5,
+      p: 3,
+    }}
+    content={content}
+    {...props}
+  />
+);
 
 export default AdviceTooltip;
diff --git a/src/components/AdviceTooltipIcon.tsx b/src/components/AdviceTooltipIcon.tsx
@@ -1,19 +1,12 @@
-import { InfoIcon, Text } from "@chakra-ui/icons";
-import {
-  ComponentWithAs,
-  HStack,
-  Icon,
-  IconProps,
-  Image,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Icon, Image, Text, VStack } from "@chakra-ui/react";
+import { Info } from "lucide-react";
 import { FC } from "react";
 
-import AdviceTip from "./AdviceTip";
+import AdviceTooltip from "./AdviceTooltip";
 
 interface AdviceTooltipIconProps {
-  text: string;
-  icon?: ComponentWithAs<"svg", IconProps>;
+  advice: string;
+  icon?: typeof Info;
 }
 /**
  * A tooltip generated on an icon hoverover with a skull that states whatever text you want for the player.
@@ -22,7 +15,10 @@ interface AdviceTooltipIconProps {
  * @returns A FC Tooltip object where the displayed icon generates the tooltip on hoverover.
  */
 
-const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({ text, icon }) => {
+const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({
+  advice,
+  icon: TooltipIcon = Info,
+}) => {
   const toolTip = (
     <HStack px={2}>
       <Image
@@ -31,18 +27,20 @@ const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({ text, icon }) => {
         boxSize="30px"
         fit="contain"
       />
-      <VStack align="stretch" spacing={0.3}>
-        <Text bg="gray.200" p={4} rounded="md" fontSize={12}>
-          {text}
+      <VStack align="stretch" gap={0.3}>
+        <Text bg="gray.muted" p={4} rounded="md" fontSize={12}>
+          {advice}
         </Text>
       </VStack>
     </HStack>
   );
 
   return (
-    <AdviceTip label={toolTip}>
-      <Icon as={icon ? icon : InfoIcon} color="gray.500" h={3.5} w={3.5} />
-    </AdviceTip>
+    <AdviceTooltip content={toolTip}>
+      <Icon color="gray.solid" h={3.5} w={3.5}>
+        <TooltipIcon />
+      </Icon>
+    </AdviceTooltip>
   );
 };
 

diff --git a/src/components/AdviceTooltipText.tsx b/src/components/AdviceTooltipText.tsx
@@ -0,0 +1,43 @@
+import { Box, Text } from "@chakra-ui/react";
+import { FC } from "react";
+
+import AdviceTooltip from "./AdviceTooltip";
+import { TooltipProps } from "./ui/tooltip";
+
+interface AdviceTooltipProps extends Omit<TooltipProps, "content"> {
+  advice: string | JSX.Element;
+}
+/**
+ * A tooltip generated on text for a quick descriptive tooltip.
+ * @param text The text you want displayed inside this tooltip.
+ * @param label The text you want displayed that users hover over to get the tooltip
+ * @returns A FC Tooltip object where the label generates the tooltip on hoverover.
+ */
+
+const AdviceTooltipText: FC<AdviceTooltipProps> = ({
+  advice,
+  children,
+  ...props
+}) => {
+  const toolTip = (
+    <Box bg="bg.muted" p={2} rounded="md" fontSize="xs">
+      {typeof advice === "string" ? <Text>{advice}</Text> : advice}
+    </Box>
+  );
+
+  return (
+    <AdviceTooltip content={toolTip} {...props}>
+      <Text
+        as="span"
+        fontWeight="bold"
+        color="fg.subtle"
+        textDecoration="underline dotted"
+        cursor="pointer"
+      >
+        {children}
+      </Text>
+    </AdviceTooltip>
+  );
+};
+
+export default AdviceTooltipText;