Merge pull request #13876 from TylerAPfledderer/refactor/shadcn-quiz-widget

[ShadCN] Migrate Quiz Components to ShadCN/Tailwind

Author: pettinarip

src/components/Quiz/QuizItem.tsx

@@ -1,12 +1,15 @@
 import { useTranslation } from "next-i18next"
-import { Box, Flex, ListItem, Stack, Text } from "@chakra-ui/react"
 
 import type { QuizzesSection } from "@/lib/types"
 
-import { Button } from "../Buttons"
+import { cn } from "@/lib/utils/cn"
+
 import { GreenTickIcon } from "../icons/quiz"
 import Tag from "../Tag"
 import Translation from "../Translation"
+import { Button } from "../ui/buttons/Button"
+import { Flex, Stack } from "../ui/flex"
+import { ListItem } from "../ui/list"
 
 export type QuizzesListItemProps = Omit<QuizzesSection, "id"> & {
   isCompleted: boolean
@@ -26,37 +29,24 @@ const QuizItem = ({
 
   return (
     <ListItem
-      color={isCompleted ? "body.medium" : "text"}
-      fontWeight="bold"
-      px={{ base: 0, lg: 4 }}
-      py={4}
-      borderBottom="1px solid"
-      borderColor="disabled"
-      mb={0}
-      sx={{ counterIncrement: "list-counter" }}
+      className={cn(
+        isCompleted ? "text-body-medium" : "text-body",
+        "mb-0 border-b border-disabled py-4 font-bold [counter-increment:_list-counter] lg:px-4"
+      )}
     >
-      <Flex
-        justifyContent="space-between"
-        alignItems={{ base: "flex-start", lg: "center" }}
-        direction={{ base: "column", lg: "row" }}
-      >
-        <Stack mb={{ base: 5, lg: 0 }}>
-          <Flex gap={2} alignItems="center">
-            <Text
-              color={isCompleted ? "body.medium" : "text"}
-              _before={{
-                content: 'counter(list-counter) ". "',
-              }}
-            >
+      <Flex className="justify-between max-lg:flex-col lg:items-center">
+        <Stack className="max-lg:mb-5">
+          <Flex className="items-center gap-2">
+            <span className="before:content-[counter(list-counter)_'._']">
               <Translation id={titleId} />
-            </Text>
+            </span>
 
             {/* Show green tick if quizz was completed only */}
             {isCompleted && <GreenTickIcon />}
           </Flex>
 
           {/* Labels */}
-          <Flex gap={3}>
+          <Flex className="gap-3">
             {/* number of questions - label */}
             <Tag
               label={t(`${numberOfQuestions} ${t("questions")}`)}
@@ -69,15 +59,15 @@ const QuizItem = ({
         </Stack>
 
         {/* Start Button */}
-        <Box w={{ base: "full", lg: "auto" }}>
+        <div className="max-lg:w-full">
           <Button
             variant="outline"
-            w={{ base: "full", lg: "auto" }}
+            className="max-lg:w-full"
             onClick={handleStart}
           >
             <Translation id="learn-quizzes:start" />
           </Button>
-        </Box>
+        </div>
       </Flex>
     </ListItem>
   )

src/components/Quiz/QuizWidget/AnswerIcon.tsx

@@ -1,8 +1,11 @@
 import * as React from "react"
-import { Circle, SquareProps } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
+import { Center } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
+
 import { CorrectIcon, IncorrectIcon, TrophyIcon } from "../../icons/quiz"
 
 import { AnswerStatus } from "./useQuizWidget"
@@ -17,43 +20,46 @@ type AnswerIconProps = {
  * Defaults to the `TrophyIcon` prior to answering a question
  */
 export const AnswerIcon = ({ answerStatus }: AnswerIconProps) => {
-  const commonProps = {
-    className: "text-body-inverse",
-  }
+  const commonIconClasses = "fill-background"
 
   const IconWrapper = (props: ChildOnlyProp) => {
-    const getWrapperBg = (): SquareProps["bg"] => {
+    const getWrapperBg = () => {
       if (!answerStatus) {
-        return "primary.base"
+        return "bg-primary"
       }
       if (answerStatus === "correct") {
-        return "success.base"
+        return "bg-success"
       }
-      return "error.base"
+      return "bg-error"
     }
 
-    return <Circle size="50px" bg={getWrapperBg()} {...props} />
+    return (
+      <Center
+        className={cn("size-[50px] rounded-full", getWrapperBg())}
+        {...props}
+      />
+    )
   }
 
   if (!answerStatus) {
     return (
       <IconWrapper>
-        <TrophyIcon {...commonProps} />
+        <TrophyIcon className={commonIconClasses} />
       </IconWrapper>
     )
   }
 
   if (answerStatus === "correct") {
     return (
       <IconWrapper>
-        <CorrectIcon {...commonProps} />
+        <CorrectIcon className={commonIconClasses} />
       </IconWrapper>
     )
   }
 
   return (
     <IconWrapper>
-      <IncorrectIcon {...commonProps} />
+      <IncorrectIcon className={commonIconClasses} />
     </IconWrapper>
   )
 }

src/components/Quiz/QuizWidget/QuizButtonGroup.tsx

@@ -1,11 +1,11 @@
 import { type Dispatch, type SetStateAction, useMemo } from "react"
 import { FaXTwitter } from "react-icons/fa6"
-import { Center, Icon } from "@chakra-ui/react"
 
 import type { AnswerChoice, Question, QuizKey, QuizStatus } from "@/lib/types"
 
-import { Button } from "@/components/Buttons"
 import Translation from "@/components/Translation"
+import { Button } from "@/components/ui/buttons/Button"
+import { Center } from "@/components/ui/flex"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -141,17 +141,12 @@ export const QuizButtonGroup = ({
 
       return (
         <>
-          <Center
-            flexDirection={{ base: "column", sm: "row" }}
-            gap={{ base: 4, md: 2 }}
-            w="100%"
-          >
-            <Button
-              variant="outline-color"
-              leftIcon={<Icon as={FaXTwitter} />}
-              onClick={handleShare}
-            >
-              <Translation id="learn-quizzes:share-results" />
+          <Center className="w-full gap-4 max-md:flex-col md:gap-2">
+            <Button variant="outline" onClick={handleShare}>
+              <>
+                <FaXTwitter />
+                <Translation id="learn-quizzes:share-results" />
+              </>
             </Button>
 
             {/* Show `Next Quiz` button if quiz is opened from hub page */}
@@ -170,8 +165,7 @@ export const QuizButtonGroup = ({
             <Button
               onClick={handleReset}
               variant="ghost"
-              fontWeight="bold"
-              textDecoration="underline"
+              className="font-bold underline"
             >
               <Translation id="learn-quizzes:try-again" />
             </Button>
@@ -209,7 +203,7 @@ export const QuizButtonGroup = ({
     return (
       <Button
         onClick={handleSubmitAnswer}
-        isDisabled={!currentQuestionAnswerChoice}
+        disabled={!currentQuestionAnswerChoice}
         data-testid="check-answer-button"
       >
         <Translation id="learn-quizzes:submit-answer" />
@@ -218,15 +212,7 @@ export const QuizButtonGroup = ({
   }
 
   return (
-    <Center
-      gap={{ base: 4, md: 6 }}
-      w={{ base: "full", sm: "auto" }}
-      flexDirection={{ base: "column", sm: "row" }}
-      flexWrap="wrap"
-      sx={{
-        button: { width: { base: "100%", sm: "fit-content" } },
-      }}
-    >
+    <Center className="flex-wrap gap-4 max-sm:w-full max-sm:flex-col md:gap-6 max-sm:[&>button]:w-full">
       <MainButtons />
     </Center>
   )

src/components/Quiz/QuizWidget/QuizConfetti.tsx

@@ -1,14 +1,16 @@
-import { StarConfettiIcon } from "@/components/icons/quiz/StarConfettiIcon"
+import * as React from "react"
 
 import { cn } from "@/lib/utils/cn"
 
+import { StarConfettiIcon } from "../../icons/quiz"
+
 export const QuizConfetti = () => {
-  const commonClasses = "h-[119px] absolute top-0"
+  const commonClasses = "absolute"
   return (
-    <>
-      <StarConfettiIcon className={cn(commonClasses, "left-0")} />
+    <div className="relative">
+      <StarConfettiIcon className={cn(commonClasses, "start-0")} />
 
-      <StarConfettiIcon className={cn(commonClasses, "right-0 -scale-x-100")} />
-    </>
+      <StarConfettiIcon className={cn(commonClasses, "end-0 -scale-x-100")} />
+    </div>
   )
 }

src/components/Quiz/QuizWidget/QuizContent.tsx

@@ -1,5 +1,8 @@
 import { type ReactNode, useCallback } from "react"
-import { Text, type TextProps, VStack } from "@chakra-ui/react"
+
+import { VStack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import type { AnswerStatus } from "./useQuizWidget"
 
@@ -20,21 +23,19 @@ export const QuizContent = ({
     return answerStatus === "correct" ? "Correct!" : "Incorrect"
   }, [answerStatus, title])
 
-  const getTitleTextColor = (): TextProps["color"] => {
-    if (!answerStatus) return "primary.hover"
-    return answerStatus === "correct" ? "success.base" : "fail.base"
+  const getTitleTextColor = () => {
+    if (!answerStatus) return "text-primary-hover"
+    return answerStatus === "correct" ? "text-success" : "text-error"
   }
 
   return (
-    <VStack spacing="4">
-      <Text
-        fontWeight="bold"
-        textAlign="center"
+    <VStack className="gap-4">
+      <span
+        className={cn(getTitleTextColor(), "text-center font-bold")}
         data-testid={`answer-status-${answerStatus}`}
-        color={getTitleTextColor()}
       >
         {getTitleContent()}
-      </Text>
+      </span>
       {children}
     </VStack>
   )

src/components/Quiz/QuizWidget/QuizProgressBar.tsx

@@ -1,8 +1,11 @@
 import { useCallback } from "react"
-import { Center, ChakraProps, Container } from "@chakra-ui/react"
 
 import type { AnswerChoice, Question } from "@/lib/types"
 
+import { Center } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
+
 import { PROGRESS_BAR_GAP } from "@/lib/constants"
 
 import type { AnswerStatus } from "./useQuizWidget"
@@ -21,48 +24,44 @@ export const QuizProgressBar = ({
   userQuizProgress,
 }: QuizProgressBarProps) => {
   const progressBarBackground = useCallback(
-    (index: number): ChakraProps["bg"] => {
+    (index: number) => {
       if (
         (answerStatus &&
           index === currentQuestionIndex &&
           answerStatus === "correct") ||
         userQuizProgress[index]?.isCorrect
       ) {
-        return "success.base"
+        return "bg-success"
       }
 
       if (
         (answerStatus === "incorrect" && index === currentQuestionIndex) ||
         (userQuizProgress[index] && !userQuizProgress[index].isCorrect)
       ) {
-        return "error.base"
+        return "bg-error"
       }
 
       if (index === currentQuestionIndex) {
-        return "gray.400"
+        return "bg-body-medium"
       }
 
-      return "gray.500"
+      return "bg-disabled"
     },
     [answerStatus, currentQuestionIndex, userQuizProgress]
   )
   return (
-    <Center gap={PROGRESS_BAR_GAP} w="full">
+    <Center className="w-full" style={{ gap: PROGRESS_BAR_GAP }}>
       {questions.map(({ id }, idx, arr) => {
         /* Calculate width percent based on number of questions */
         const width = `calc(${Math.floor(
           100 / arr.length
         )}% - ${PROGRESS_BAR_GAP})`
 
         return (
-          <Container
+          <div
             key={id}
-            bg={progressBarBackground(idx)}
-            h="4px"
-            w={width}
-            maxW={`min(${width}, 2rem)`}
-            marginInline={0}
-            p={0}
+            className={cn(progressBarBackground(idx), "mx-0 h-[4px] p-0")}
+            style={{ width, maxWidth: `min(${width}, 2rem)` }}
           />
         )
       })}