Merge pull request #13165 from TylerAPfledderer/feat/quiz-component-stories

feat(Quiz): create stories for Quiz components

Author: corwintines

src/components/Quiz/QuizWidget/QuizButtonGroup.tsx

@@ -1,32 +1,55 @@
-import { useMemo } from "react"
+import { type Dispatch, type SetStateAction, useMemo } from "react"
 import { FaTwitter } from "react-icons/fa"
 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 { trackCustomEvent } from "@/lib/utils/matomo"
 
-import { useQuizWidgetContext } from "./context"
-
-export const QuizButtonGroup = () => {
-  const {
-    showResults,
-    initialize: handleReset,
-    currentQuestionAnswerChoice,
-    title,
-    questions,
-    currentQuestionIndex,
-    quizPageProps,
-    answerStatus,
-    numberOfCorrectAnswers,
-    userQuizProgress,
-    quizScore,
-    setCurrentQuestionAnswerChoice,
-    setUserQuizProgress,
-    setShowAnswer,
-  } = useQuizWidgetContext()
+import type { AnswerStatus } from "./useQuizWidget"
+
+type QuizButtonGroupProps = {
+  showResults: boolean
+  handleReset: () => void
+  currentQuestionAnswerChoice: AnswerChoice | null
+  title: string
+  questions: Question[]
+  currentQuestionIndex: number
+  quizPageProps:
+    | {
+        currentHandler: (nextKey: QuizKey) => void
+        statusHandler: (status: QuizStatus) => void
+        nextQuiz: QuizKey | undefined
+      }
+    | false
+  answerStatus: AnswerStatus
+  numberOfCorrectAnswers: number
+  userQuizProgress: AnswerChoice[]
+  quizScore: number
+  setCurrentQuestionAnswerChoice: (answer: AnswerChoice | null) => void
+  setUserQuizProgress: Dispatch<SetStateAction<AnswerChoice[]>>
+  setShowAnswer: (prev: boolean) => void
+}
 
+export const QuizButtonGroup = ({
+  showResults,
+  handleReset,
+  currentQuestionAnswerChoice,
+  title,
+  questions,
+  currentQuestionIndex,
+  quizPageProps,
+  answerStatus,
+  numberOfCorrectAnswers,
+  userQuizProgress,
+  quizScore,
+  setCurrentQuestionAnswerChoice,
+  setUserQuizProgress,
+  setShowAnswer,
+}: QuizButtonGroupProps) => {
   const finishedQuiz = useMemo(
     () => userQuizProgress.length === questions.length! - 1,
     [questions.length, userQuizProgress.length]

src/components/Quiz/QuizWidget/QuizContent.tsx

@@ -1,15 +1,19 @@
-import { useCallback } from "react"
+import { type ReactNode, useCallback } from "react"
 import { Text, type TextProps, VStack } from "@chakra-ui/react"
 
-import { ChildOnlyProp } from "@/lib/types"
+import type { AnswerStatus } from "./useQuizWidget"
 
-import { useQuizWidgetContext } from "./context"
-
-type QuizContentProps = ChildOnlyProp
-
-export const QuizContent = ({ children }: QuizContentProps) => {
-  const { answerStatus, title } = useQuizWidgetContext()
+type QuizContentProps = {
+  answerStatus: AnswerStatus
+  title: string
+  children: ReactNode
+}
 
+export const QuizContent = ({
+  answerStatus,
+  title,
+  children,
+}: QuizContentProps) => {
   const getTitleContent = useCallback((): string => {
     if (!answerStatus) return title
 

src/components/Quiz/QuizWidget/QuizProgressBar.tsx

@@ -1,14 +1,25 @@
 import { useCallback } from "react"
 import { Center, ChakraProps, Container } from "@chakra-ui/react"
 
+import type { AnswerChoice, Question } from "@/lib/types"
+
 import { PROGRESS_BAR_GAP } from "@/lib/constants"
 
-import { useQuizWidgetContext } from "./context"
+import type { AnswerStatus } from "./useQuizWidget"
 
-export const QuizProgressBar = () => {
-  const { questions, answerStatus, currentQuestionIndex, userQuizProgress } =
-    useQuizWidgetContext()
+type QuizProgressBarProps = {
+  questions: Question[]
+  answerStatus: AnswerStatus
+  currentQuestionIndex: number
+  userQuizProgress: AnswerChoice[]
+}
 
+export const QuizProgressBar = ({
+  questions,
+  answerStatus,
+  currentQuestionIndex,
+  userQuizProgress,
+}: QuizProgressBarProps) => {
   const progressBarBackground = useCallback(
     (index: number): ChakraProps["bg"] => {
       if (

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -15,17 +15,28 @@ import {
   VisuallyHidden,
 } from "@chakra-ui/react"
 
-import type { AnswerKey, TranslationKey } from "@/lib/types"
-
-import { useQuizWidgetContext } from "./context"
+import type {
+  AnswerChoice,
+  AnswerKey,
+  Question,
+  TranslationKey,
+} from "@/lib/types"
+
+import type { AnswerStatus } from "./useQuizWidget"
+
+type QuizRadioGroupProps = {
+  questions: Question[]
+  currentQuestionIndex: number
+  answerStatus: AnswerStatus
+  setCurrentQuestionAnswerChoice: (answer: AnswerChoice | null) => void
+}
 
-export const QuizRadioGroup = () => {
-  const {
-    questions,
-    currentQuestionIndex,
-    answerStatus,
-    setCurrentQuestionAnswerChoice,
-  } = useQuizWidgetContext()
+export const QuizRadioGroup = ({
+  questions,
+  currentQuestionIndex,
+  answerStatus,
+  setCurrentQuestionAnswerChoice,
+}: QuizRadioGroupProps) => {
   const { t } = useTranslation("learn-quizzes")
 
   const handleSelection = (answerId: AnswerKey) => {

src/components/Quiz/QuizWidget/QuizSummary.tsx

@@ -14,12 +14,19 @@ import {
 
 import { numberToPercent } from "@/lib/utils/numberToPercent"
 
-import { useQuizWidgetContext } from "./context"
-
-export const QuizSummary = () => {
-  const { numberOfCorrectAnswers, questions, ratioCorrect, isPassingScore } =
-    useQuizWidgetContext()
+type QuizSummaryProps = {
+  numberOfCorrectAnswers: number
+  questionsLength: number
+  ratioCorrect: number
+  isPassingScore: boolean
+}
 
+export const QuizSummary = ({
+  numberOfCorrectAnswers,
+  questionsLength,
+  ratioCorrect,
+  isPassingScore,
+}: QuizSummaryProps) => {
   const { locale } = useRouter()
   const { t } = useTranslation("learn-quizzes")
 
@@ -78,7 +85,7 @@ export const QuizSummary = () => {
         {largerThanMobile && (
           <VStack>
             <Text size={commonTextSize} {...valueStyles}>
-              {questions.length}
+              {questionsLength}
             </Text>
             <Text size={commonTextSize} {...labelStyles}>
               {t("questions")}

src/components/Quiz/QuizWidget/context.ts

@@ -16,7 +16,6 @@ import Translation from "@/components/Translation"
 import { useLocalQuizData } from "../useLocalQuizData"
 
 import { AnswerIcon } from "./AnswerIcon"
-import { QuizWidgetProvider } from "./context"
 import { QuizButtonGroup } from "./QuizButtonGroup"
 import { QuizConfetti } from "./QuizConfetti"
 import { QuizContent } from "./QuizContent"
@@ -139,39 +138,57 @@ const QuizWidget = ({
         >
           <AnswerIcon answerStatus={answerStatus} />
         </Center>
-        <Stack spacing="8" justifyContent="space-between">
+        <Stack
+          spacing="8"
+          justifyContent="space-between"
+          mt={{ base: 8, sm: 0 }}
+        >
           {quizData ? (
-            <QuizWidgetProvider
-              value={{
-                ...quizData,
-                answerStatus,
-                currentQuestionIndex,
-                userQuizProgress,
-                showResults,
-                currentQuestionAnswerChoice,
-                quizPageProps: quizPageProps.current,
-                numberOfCorrectAnswers,
-                quizScore,
-                ratioCorrect,
-                isPassingScore,
-                initialize,
-                setUserQuizProgress,
-                setShowAnswer,
-                setCurrentQuestionAnswerChoice,
-              }}
-            >
-              <QuizContent>
+            <>
+              <QuizContent answerStatus={answerStatus} title={quizData.title}>
                 {!showResults ? (
                   <>
-                    <QuizProgressBar />
-                    <QuizRadioGroup />
+                    <QuizProgressBar
+                      answerStatus={answerStatus}
+                      currentQuestionIndex={currentQuestionIndex}
+                      questions={quizData.questions}
+                      userQuizProgress={userQuizProgress}
+                    />
+                    <QuizRadioGroup
+                      answerStatus={answerStatus}
+                      currentQuestionIndex={currentQuestionIndex}
+                      questions={quizData.questions}
+                      setCurrentQuestionAnswerChoice={
+                        setCurrentQuestionAnswerChoice
+                      }
+                    />
                   </>
                 ) : (
-                  <QuizSummary />
+                  <QuizSummary
+                    questionsLength={quizData.questions.length}
+                    isPassingScore={isPassingScore}
+                    numberOfCorrectAnswers={numberOfCorrectAnswers}
+                    ratioCorrect={ratioCorrect}
+                  />
                 )}
               </QuizContent>
-              <QuizButtonGroup />
-            </QuizWidgetProvider>
+              <QuizButtonGroup
+                answerStatus={answerStatus}
+                currentQuestionAnswerChoice={currentQuestionAnswerChoice}
+                currentQuestionIndex={currentQuestionIndex}
+                handleReset={initialize}
+                numberOfCorrectAnswers={numberOfCorrectAnswers}
+                questions={quizData.questions}
+                quizPageProps={quizPageProps.current}
+                quizScore={quizScore}
+                setCurrentQuestionAnswerChoice={setCurrentQuestionAnswerChoice}
+                setShowAnswer={setShowAnswer}
+                showResults={showResults}
+                title={quizData.title}
+                userQuizProgress={userQuizProgress}
+                setUserQuizProgress={setUserQuizProgress}
+              />
+            </>
           ) : (
             <Center>
               <Spinner />