Merge pull request #14750 from TylerAPfledderer/feat/simulator-main-shadcn

[ShadCN]: Migrate Base Simulator Content

Author: pettinarip

src/components/Simulator/ClickAnimation.tsx

@@ -1,21 +1,26 @@
-import React, { useEffect, useState } from "react"
+import { type ReactNode, useEffect, useState } from "react"
 import { motion, type Transition } from "framer-motion"
-import { createIcon, Flex, Text, TextProps } from "@chakra-ui/react"
+
+import { cn } from "@/lib/utils/cn"
+
+import { createIconBase } from "../icons/icon-base"
+import { Flex } from "../ui/flex"
 
 const MotionFlex = motion(Flex)
 
 const DownArrowLong = motion(
-  createIcon({
+  createIconBase({
     displayName: "DownArrowLong",
     viewBox: "0 0 8 24",
-    defaultProps: { fill: "currentColor" },
-    path: (
+    className: "fill-current",
+    children: (
       <path d="M3.64645 23.3536C3.84171 23.5488 4.15829 23.5488 4.35355 23.3536L7.53553 20.1716C7.7308 19.9763 7.7308 19.6597 7.53553 19.4645C7.34027 19.2692 7.02369 19.2692 6.82843 19.4645L4 22.2929L1.17157 19.4645C0.976312 19.2692 0.659729 19.2692 0.464467 19.4645C0.269205 19.6597 0.269205 19.9763 0.464467 20.1716L3.64645 23.3536ZM3.5 2.18557e-08L3.5 23L4.5 23L4.5 -2.18557e-08L3.5 2.18557e-08Z" />
     ),
   })
 )
 
-type ClickAnimationProps = Pick<TextProps, "children"> & {
+type ClickAnimationProps = {
+  children: ReactNode
   below?: boolean
   delay?: number
 }
@@ -34,33 +39,28 @@ export const ClickAnimation = ({
     times: [0, 0.25, 0.5],
     repeat: Infinity,
   }
-  const top = below ? "calc(100% + 0.5rem)" : "auto"
-  const bottom = below ? "auto" : "calc(100% + 1rem)"
+  const topClass = below ? "top-[calc(100%_+_0.5rem)]" : "top-auto"
+  const bottomClass = below ? "bottom-auto" : "bottom-[calc(100%_+_1rem)]"
   const y = below ? [0, 20, 0] : [0, -20, 0]
-  const direction = below ? "column-reverse" : "column"
-  const transformOrigin = below ? { bottom: 0 } : { top: 0 }
+  const directionClass = below ? "flex-col-reverse" : "flex-col"
   const rotate = below ? 180 : 0
   return visible ? (
     <MotionFlex
+      className={cn(
+        "absolute inset-x-0 justify-center text-primary",
+        topClass,
+        bottomClass
+      )}
       animate={{ opacity: [0, 1] }} // Fade in once
-      position="absolute"
-      top={top}
-      justify="center"
-      bottom={bottom}
-      insetInline={0}
-      color="primary.base"
+      data-testid="click-animation-el"
     >
       <MotionFlex
-        direction={direction}
-        alignItems="center"
+        className={cn("items-center", directionClass)}
         animate={{ y }} // Slide up and down
         transition={transition}
       >
-        <Text fontSize="xs" fontStyle="italic" textTransform="lowercase" m={0}>
-          {children}
-        </Text>
+        <p className="m-0 text-xs lowercase italic">{children}</p>
         <DownArrowLong
-          transformOrigin={transformOrigin}
           initial={{ scaleY: 1, rotate }}
           animate={{ scaleY: [1, 1.25, 1] }} // Arrow scales up and down
           transition={transition}

src/components/Simulator/Explanation.tsx

@@ -1,11 +1,13 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { MdArrowBack } from "react-icons/md"
-import { Box, Flex, Grid, Heading, Text } from "@chakra-ui/react"
 
 import type { SimulatorNavProps } from "@/lib/types"
 
-import { Button, ButtonLink } from "../Buttons"
+import { cn } from "@/lib/utils/cn"
+
+import { Button, ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
 
 import type {
   LabelHref,
@@ -43,74 +45,51 @@ export const Explanation = ({
     hidden: { opacity: 0 },
   }
   return (
-    <Flex direction="column" flex={1} zIndex={1}>
+    <Flex className="z-[1] flex-1 flex-col">
       {/* Back button */}
       <Button
-        as={motion.button}
         variant="ghost"
-        leftIcon={<MdArrowBack size="18px" />}
-        sx={{ paddingInlineStart: 0 }}
-        mt={{ base: -6, md: 0 }}
-        mb={{ base: 2, md: 8 }}
+        className={cn(
+          "-mt-6 mb-2 w-fit ps-0 [transition-duration:10ms] md:mb-8 md:mt-0",
+          step === 0 ? "pointer-events-none" : "pointer-events-auto"
+        )}
         onClick={regressStepper}
-        pointerEvents={step === 0 ? "none" : "all"}
-        variants={backButtonVariants}
-        initial="hidden"
-        animate={step === 0 ? "hidden" : "visible"}
-        transitionDuration="10ms"
-        w="fit-content"
+        asChild
       >
-        Back
+        <motion.button
+          initial="hidden"
+          variants={backButtonVariants}
+          animate={step === 0 ? "hidden" : "visible"}
+        >
+          <MdArrowBack size="18px" />
+          Back
+        </motion.button>
       </Button>
-      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 3, md: 2 }}>
+      <Flex className="gap-3 md:flex-col md:gap-2">
         {/* Step counter */}
-        <Grid
-          placeItems="center"
-          bg="body.light"
-          borderRadius="lg"
-          p={2}
-          w={9}
-          h={8}
-          fontSize="xs"
-        >
-          <Text as="span" lineHeight={1} fontWeight="bold" m={0}>
+        <div className="grid h-8 w-9 place-items-center rounded-lg bg-body-light p-2 text-xs">
+          <span className="font-bold leading-none">
             {step + 1}/{totalSteps}
-          </Text>
-        </Grid>
+          </span>
+        </div>
         {/* Header and description */}
-        <Box>
-          <Heading
-            as="h3"
-            fontSize={{ base: "xl", sm: "2xl", md: "3xl", lg: "4xl" }}
-            lineHeight={{ base: 8, md: 10 }}
-            mt={0}
-            mb={{ base: 4, md: 8 }}
-          >
+        <div>
+          <h3 className="mb-4 mt-0 text-xl leading-8 sm:text-2xl md:mb-8 md:text-3xl md:leading-10 lg:text-4xl">
             {header}
-          </Heading>
+          </h3>
           {description && (
-            <Box display={{ base: "block", md: "none" }} position="relative">
+            <div className="relative md:hidden">
               <MoreInfoPopover isFirstStep={nav.step === 0}>
-                <Box>{description}</Box>
+                <div>{description}</div>
               </MoreInfoPopover>
-            </Box>
+            </div>
           )}
-        </Box>
+        </div>
       </Flex>
-      {description && (
-        <Box display={{ base: "none", md: "block" }}>{description}</Box>
-      )}
+      {description && <div className="max-md:hidden">{description}</div>}
       {/* Last step navigation buttons */}
       {isLastStep && (
-        <Flex
-          direction="column"
-          gap={4}
-          maxW="300px"
-          w="full"
-          mx={{ base: "auto", md: 0 }}
-          mt={4}
-          zIndex={-1}
-        >
+        <Flex className="z-[-1] mx-auto mt-4 w-full max-w-[300px] flex-col gap-4 md:mx-0">
           {nextPathSummary && openPath && nextPathId && (
             <PathButton
               pathSummary={nextPathSummary}

src/components/Simulator/MoreInfoPopover.tsx

@@ -1,55 +1,47 @@
-import React, { useState } from "react"
+import { type ReactNode, useState } from "react"
 import { motion } from "framer-motion"
-import { MdInfoOutline } from "react-icons/md"
+import { MdClose, MdInfoOutline } from "react-icons/md"
+
+import { Button } from "../ui/buttons/Button"
 import {
-  Button,
-  Icon,
   Popover,
-  PopoverArrow,
-  PopoverBody,
-  type PopoverBodyProps,
-  PopoverCloseButton,
+  PopoverClose,
   PopoverContent,
   PopoverTrigger,
-} from "@chakra-ui/react"
+} from "../ui/popover"
 
 import { PulseAnimation } from "./PulseAnimation"
 
 const MotionButton = motion(Button)
 
-type MoreInfoPopover = Pick<PopoverBodyProps, "children"> & {
+type MoreInfoPopover = {
   isFirstStep: boolean
+  children: ReactNode
 }
 export const MoreInfoPopover = ({ isFirstStep, children }: MoreInfoPopover) => {
   const [clicked, setClicked] = useState(false)
   return (
     <Popover>
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <MotionButton
-          rightIcon={<Icon as={MdInfoOutline} size={24} />}
           variant="ghost"
-          sx={{ paddingInlineStart: 0 }}
-          color="body.medium"
-          fontSize="sm"
-          p={0}
+          className="relative min-h-0 p-0 text-sm text-body-medium"
           onClick={() => setClicked(true)}
-          position="relative"
+          data-testid="more-info-popover-trigger"
         >
           More info
+          <MdInfoOutline size={24} />
           {isFirstStep && !clicked && <PulseAnimation type="narrow-button" />}
         </MotionButton>
       </PopoverTrigger>
       <PopoverContent
-        px={4}
-        py={6}
-        insetStart={{ base: 4, sm: 8 }}
-        w={{ base: "calc(100vw - 3rem)", sm: "calc(100vw - 5rem)" }}
+        className="relative start-4 w-[calc(100vw-3rem)] max-w-xs bg-background-highlight px-4 py-6 text-sm shadow-none sm:start-8 sm:w-[calc(100vw-5rem)]"
+        data-testid="more-info-popover-content"
       >
-        <PopoverArrow />
-        <PopoverCloseButton ms="auto" />
-        <PopoverBody sx={{ "p:last-of-type": { mb: 2 } }}>
-          {children}
-        </PopoverBody>
+        <PopoverClose className="absolute right-2 top-1 ms-auto flex size-6 items-center justify-center text-xl leading-none">
+          <MdClose />
+        </PopoverClose>
+        <div className="px-3 py-2 last-of-type:[&_p]:mb-2">{children}</div>
       </PopoverContent>
     </Popover>
   )

src/components/Simulator/NotificationPopover.tsx

@@ -1,38 +1,45 @@
 import React, { type ReactNode } from "react"
+import { MdClose } from "react-icons/md"
+
+import { Flex } from "../ui/flex"
 import {
-  Flex,
   Popover,
-  PopoverBody,
-  PopoverCloseButton,
+  PopoverClose,
   PopoverContent,
-  PopoverContentProps,
-  PopoverHeader,
-  PopoverProps,
+  type PopoverContentProps,
   PopoverTrigger,
-} from "@chakra-ui/react"
+} from "../ui/popover"
 
-type NotificationPopoverProps = Omit<PopoverContentProps, "children"> &
-  Pick<PopoverProps, "placement"> & {
-    children: ReactNode
-  }
+type NotificationPopoverProps = Omit<
+  PopoverContentProps,
+  "children" | "className"
+> & {
+  children: ReactNode
+}
 export const NotificationPopover = ({
-  placement,
   children,
   content,
   title,
   ...restProps
 }: NotificationPopoverProps) => {
   return (
-    <Popover placement={placement}>
-      <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent px={4} py={2} maxW="15rem" fontSize="xs" {...restProps}>
-        <Flex gap={2}>
-          <PopoverHeader fontWeight="bold" mb={2} flex={1} mt={0.5} p={0}>
+    <Popover>
+      <PopoverTrigger asChild className="text-start">
+        <div>{children}</div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="max-w-[15rem] px-4 py-2 text-xs"
+        {...restProps}
+      >
+        <Flex className="gap-2">
+          <header className="mb-2 mt-0.5 flex-1 p-0 font-bold">
             {title || ""}
-          </PopoverHeader>
-          <PopoverCloseButton ms="auto" />
+          </header>
+          <PopoverClose className="absolute right-2 top-1 ms-auto flex size-6 items-center justify-center text-xl leading-none">
+            <MdClose />
+          </PopoverClose>
         </Flex>
-        <PopoverBody p={0}>{content}</PopoverBody>
+        <div>{content}</div>
       </PopoverContent>
     </Popover>
   )

src/components/Simulator/PathButton.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { Button, Flex, Text } from "@chakra-ui/react"
+import { Button } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
 
 import type { SimulatorPathSummary } from "./interfaces"
 
@@ -9,38 +9,27 @@ type PathButtonProps = {
 }
 export const PathButton = ({ pathSummary, handleClick }: PathButtonProps) => {
   const { primaryText, secondaryText, Icon } = pathSummary
+  // TODO: Convert this component to use ButtonLinkTwoLines
   return (
     <Button
       variant="outline"
-      leftIcon={<Icon />}
-      justifyContent="start"
-      gap={3}
-      textAlign="start"
-      w="full"
-      py={6}
+      className="w-full justify-start gap-3 py-6 text-start"
       onClick={handleClick}
     >
-      <Flex direction="column" as="span">
-        <Text
-          as="span"
-          fontWeight="bold"
-          m={0}
-          lineHeight={6}
-          letterSpacing="-1.1%"
-        >
-          {primaryText}
-        </Text>
-        {secondaryText && (
-          <Text
-            as="span"
-            m={0}
-            color="body.medium"
-            fontSize="xs"
-            lineHeight={5}
-          >
-            {secondaryText}
-          </Text>
-        )}
+      <span className="me-2">
+        <Icon />
+      </span>
+      <Flex className="flex-col" asChild>
+        <span>
+          <span className="m-0 font-bold leading-6 tracking-[-1.1%]">
+            {primaryText}
+          </span>
+          {secondaryText && (
+            <span className="m-0 text-xs leading-5 text-body-medium">
+              {secondaryText}
+            </span>
+          )}
+        </span>
       </Flex>
     </Button>
   )