refactor(QuizzesList): migrate to Tailwind

Author: TylerAPfledderer

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/QuizzesList.tsx

@@ -1,12 +1,14 @@
 import React from "react"
-import { Heading, OrderedList, Stack, Text } from "@chakra-ui/react"
 
 import type { QuizKey, QuizzesSection, UserStats } from "@/lib/types"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import allQuizzesData from "@/data/quizzes"
 
+import { Stack } from "../ui/flex"
+import { OrderedList } from "../ui/list"
+
 import QuizItem from "./QuizItem"
 
 type QuizzesListProps = {
@@ -26,17 +28,13 @@ const QuizzesList = ({
   quizHandler,
   modalHandler,
 }: QuizzesListProps) => (
-  <Stack spacing="8" px={{ base: "8", lg: 0 }} pt="12">
-    <Stack spacing="8">
-      <Heading size="xl">{headingId}</Heading>
-      <Text>{descriptionId}</Text>
+  <Stack className="gap-8 pt-12 max-lg:px-8">
+    <Stack className="gap-8">
+      <h2>{headingId}</h2>
+      <p>{descriptionId}</p>
     </Stack>
 
-    <OrderedList
-      m={0}
-      listStyleType="none"
-      sx={{ counterReset: "list-counter" }}
-    >
+    <OrderedList className="m-0 list-none [counter-reset:_list-counter]">
       {content.map((listItem) => {
         const handleStart = () => {
           quizHandler(listItem.id)

src/components/Quiz/stories/QuizzesList.stories.tsx

@@ -26,11 +26,6 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof QuizzesListComponent>
-
-export default meta
-
-export const QuizzesList: StoryObj<typeof meta> = {
   args: {
     content: ethereumBasicsQuizzes,
     headingId: "basics",
@@ -43,7 +38,32 @@ export const QuizzesList: StoryObj<typeof meta> = {
     quizHandler: fn(),
     modalHandler: fn(),
   },
+} satisfies Meta<typeof QuizzesListComponent>
 
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  render: ({ headingId, descriptionId, ...args }) => (
+    <QuizzesListComponent
+      {...args}
+      headingId={getTranslation(headingId, "learn-quizzes")}
+      descriptionId={getTranslation(descriptionId, "learn-quizzes")}
+    />
+  ),
+}
+
+export const OneCompletedQuiz: StoryObj<typeof meta> = {
+  args: {
+    ...meta.args,
+    userStats: {
+      average: [100],
+      score: 4,
+      completed: {
+        ...meta.args.userStats.completed,
+        "what-is-ethereum": [true, 5],
+      },
+    },
+  },
   render: ({ headingId, descriptionId, ...args }) => (
     <QuizzesListComponent
       {...args}