analytica-frontend-lib 1.1.13 → 1.1.15

package/dist/Quiz/index.d.ts

@@ -5,6 +5,7 @@ import { Question } from './useQuizStore/index.js';
 import 'zustand';
 
 declare const getStatusBadge: (status?: "correct" | "incorrect") => react_jsx_runtime.JSX.Element | null;
+declare const getStatusStyles: (variantCorrect?: string) => "bg-success-background border-success-300" | "bg-error-background border-error-300" | undefined;
 declare const Quiz: react.ForwardRefExoticComponent<{
     children: ReactNode;
     className?: string;
@@ -16,7 +17,14 @@ declare const QuizHeaderResult: react.ForwardRefExoticComponent<{
 declare const QuizTitle: react.ForwardRefExoticComponent<{
     className?: string;
 } & react.RefAttributes<HTMLDivElement>>;
+declare const QuizSubTitle: react.ForwardRefExoticComponent<{
+    subTitle: string;
+} & react.RefAttributes<HTMLDivElement>>;
 declare const QuizHeader: () => react_jsx_runtime.JSX.Element;
+declare const QuizContainer: react.ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
 declare const QuizContent: react.ForwardRefExoticComponent<{
     paddingBottom?: string;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -56,4 +64,4 @@ declare const QuizListResultByMateria: ({ subject, onQuestionClick, }: {
     onQuestionClick: (question: Question) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Quiz, QuizAlternative, QuizConnectDots, QuizContent, QuizDissertative, QuizFill, QuizFooter, QuizHeader, QuizHeaderResult, QuizImageQuestion, QuizListResult, QuizListResultByMateria, QuizMultipleChoice, QuizQuestionList, QuizResultHeaderTitle, QuizResultPerformance, QuizResultTitle, QuizTitle, QuizTrueOrFalse, getStatusBadge };
+export { Quiz, QuizAlternative, QuizConnectDots, QuizContainer, QuizContent, QuizDissertative, QuizFill, QuizFooter, QuizHeader, QuizHeaderResult, QuizImageQuestion, QuizListResult, QuizListResultByMateria, QuizMultipleChoice, QuizQuestionList, QuizResultHeaderTitle, QuizResultPerformance, QuizResultTitle, QuizSubTitle, QuizTitle, QuizTrueOrFalse, getStatusBadge, getStatusStyles };

package/dist/Quiz/index.js

@@ -23,6 +23,7 @@ __export(Quiz_exports, {
   Quiz: () => Quiz,
   QuizAlternative: () => QuizAlternative,
   QuizConnectDots: () => QuizConnectDots,
+  QuizContainer: () => QuizContainer,
   QuizContent: () => QuizContent,
   QuizDissertative: () => QuizDissertative,
   QuizFill: () => QuizFill,
@@ -37,9 +38,11 @@ __export(Quiz_exports, {
   QuizResultHeaderTitle: () => QuizResultHeaderTitle,
   QuizResultPerformance: () => QuizResultPerformance,
   QuizResultTitle: () => QuizResultTitle,
+  QuizSubTitle: () => QuizSubTitle,
   QuizTitle: () => QuizTitle,
   QuizTrueOrFalse: () => QuizTrueOrFalse,
-  getStatusBadge: () => getStatusBadge
+  getStatusBadge: () => getStatusBadge,
+  getStatusStyles: () => getStatusStyles
 });
 module.exports = __toCommonJS(Quiz_exports);
 var import_phosphor_react9 = require("phosphor-react");
@@ -1366,12 +1369,12 @@ var useQuizStore = (0, import_zustand2.create)()(
           return unansweredQuestions;
         },
         getQuestionsGroupedBySubject: () => {
-          const { getActiveQuiz } = get();
-          const activeQuiz = getActiveQuiz();
-          if (!activeQuiz) return {};
+          const { getQuestionResult, getActiveQuiz, variant } = get();
+          const questions = variant == "result" ? getQuestionResult()?.answers : getActiveQuiz()?.quiz.questions;
+          if (!questions) return {};
           const groupedQuestions = {};
-          activeQuiz.quiz.questions.forEach((question) => {
-            const subjectId = question.knowledgeMatrix?.[0]?.subjectId || "Sem mat\xE9ria";
+          questions.forEach((question) => {
+            const subjectId = question.knowledgeMatrix?.[0]?.subject?.id || "Sem mat\xE9ria";
             if (!groupedQuestions[subjectId]) {
               groupedQuestions[subjectId] = [];
             }
@@ -1405,12 +1408,22 @@ var useQuizStore = (0, import_zustand2.create)()(
           return userAnswers;
         },
         setCurrentQuestion: (question) => {
-          const { getActiveQuiz } = get();
+          const { getActiveQuiz, variant, questionsResult } = get();
           const activeQuiz = getActiveQuiz();
           if (!activeQuiz) return;
-          const questionIndex = activeQuiz.quiz.questions.findIndex(
-            (q) => q.id === question.id
-          );
+          let questionIndex = 0;
+          if (variant == "result") {
+            if (!questionsResult) return;
+            const questionResult = questionsResult.answers.find((q) => q.id === question.id) ?? questionsResult.answers.find((q) => q.questionId === question.id);
+            if (!questionResult) return;
+            questionIndex = activeQuiz.quiz.questions.findIndex(
+              (q) => q.id === questionResult.questionId
+            );
+          } else {
+            questionIndex = activeQuiz.quiz.questions.findIndex(
+              (q) => q.id === question.id
+            );
+          }
           if (questionIndex === -1) {
             console.warn(
               `Question with id "${question.id}" not found in active quiz`
@@ -1441,20 +1454,23 @@ var useQuizStore = (0, import_zustand2.create)()(
           return userAnswer ? userAnswer.answerStatus : null;
         },
         getQuestionIndex: (questionId) => {
-          const { getActiveQuiz } = get();
-          const activeQuiz = getActiveQuiz();
-          if (!activeQuiz) return 0;
-          const questionIndex = activeQuiz.quiz.questions.findIndex(
-            (q) => q.id === questionId
+          const { questionsResult } = get();
+          if (!questionsResult) return 0;
+          let idx = questionsResult.answers.findIndex(
+            (q) => q.questionId === questionId
           );
-          return questionIndex + 1;
+          if (idx === -1) {
+            idx = questionsResult.answers.findIndex((q) => q.id === questionId);
+          }
+          return idx !== -1 ? idx + 1 : 0;
         },
         // Question Result
         getQuestionResultByQuestionId: (questionId) => {
           const { questionsResult } = get();
-          return questionsResult?.answers.find(
+          const question = questionsResult?.answers.find(
             (answer) => answer.questionId === questionId
-          ) || null;
+          );
+          return question || null;
         },
         getQuestionResultStatistics: () => {
           const { questionsResult } = get();
@@ -3215,6 +3231,8 @@ var CardAudio = (0, import_react7.forwardRef)(
     const [duration, setDuration] = (0, import_react7.useState)(0);
     const [volume, setVolume] = (0, import_react7.useState)(1);
     const [showVolumeControl, setShowVolumeControl] = (0, import_react7.useState)(false);
+    const [showSpeedMenu, setShowSpeedMenu] = (0, import_react7.useState)(false);
+    const [playbackRate, setPlaybackRate] = (0, import_react7.useState)(1);
     const audioRef = (0, import_react7.useRef)(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
@@ -3268,6 +3286,16 @@ var CardAudio = (0, import_react7.forwardRef)(
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
     };
+    const toggleSpeedMenu = () => {
+      setShowSpeedMenu(!showSpeedMenu);
+    };
+    const handleSpeedChange = (speed) => {
+      setPlaybackRate(speed);
+      if (audioRef.current) {
+        audioRef.current.playbackRate = speed;
+      }
+      setShowSpeedMenu(false);
+    };
     const getVolumeIcon = () => {
       if (volume === 0) {
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_phosphor_react5.SpeakerSimpleX, {});
@@ -3424,13 +3452,35 @@ var CardAudio = (0, import_react7.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_phosphor_react5.DotsThreeVertical,
-            {
-              size: 24,
-              className: "text-text-950 cursor-pointer hover:text-primary-600"
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleSpeedMenu,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Op\xE7\xF5es de velocidade",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_phosphor_react5.DotsThreeVertical, { size: 24 })
+              }
+            ),
+            showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg min-w-24 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col gap-1", children: [
+              { speed: 1, label: "1x" },
+              { speed: 1.5, label: "1.5x" },
+              { speed: 2, label: "2x" }
+            ].map(({ speed, label }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSpeedChange(speed),
+                className: cn(
+                  "px-3 py-1 text-sm text-left rounded hover:bg-border-50 transition-colors",
+                  playbackRate === speed ? "bg-primary-950 text-secondary-100 font-medium" : "text-text-950"
+                ),
+                children: label
+              },
+              speed
+            )) }) })
+          ] })
         ]
       }
     );
@@ -4630,8 +4680,8 @@ var QuizHeader = () => {
     HeaderAlternative,
     {
       title: currentQuestion ? `Quest\xE3o ${currentQuestionIndex + 1}` : "Quest\xE3o",
-      subTitle: currentQuestion?.knowledgeMatrix?.[0]?.topicId ?? "",
-      content: currentQuestion?.questionText ?? ""
+      subTitle: currentQuestion?.knowledgeMatrix?.[0]?.topic?.name ?? "",
+      content: currentQuestion?.statement ?? ""
     }
   );
 };
@@ -4680,10 +4730,10 @@ var QuizAlternative = ({ paddingBottom }) => {
   const alternatives = currentQuestion?.options?.map((option) => {
     let status = "neutral" /* NEUTRAL */;
     if (variant === "result") {
-      const isCorrectOption = currentQuestion.correctOptionIds?.includes(
-        option.id
+      const isCorrectOption = currentQuestionResult?.options?.find((op) => op.id === option.id)?.isCorrect || false;
+      const isSelected = currentQuestionResult?.selectedOptions.some(
+        (selectedOption) => selectedOption.optionId === option.id
       );
-      const isSelected = currentQuestionResult?.optionId === option.id;
       if (isCorrectOption) {
         status = "correct" /* CORRECT */;
       } else if (isSelected && !isCorrectOption) {
@@ -4709,8 +4759,8 @@ var QuizAlternative = ({ paddingBottom }) => {
         name: `question-${currentQuestion?.id || "1"}`,
         layout: "compact",
         alternatives,
-        value: variant === "result" ? currentQuestionResult?.optionId || "" : currentAnswer?.optionId || "",
-        selectedValue: variant === "result" ? currentQuestionResult?.optionId || "" : currentAnswer?.optionId || "",
+        value: variant === "result" ? currentQuestionResult?.selectedOptions[0]?.optionId || "" : currentAnswer?.optionId || "",
+        selectedValue: variant === "result" ? currentQuestionResult?.selectedOptions[0]?.optionId || "" : currentAnswer?.optionId || "",
         onValueChange: (value) => {
           if (currentQuestion) {
             selectAnswer(currentQuestion.id, value);
@@ -4755,15 +4805,16 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
       prevSelectedValuesRef.current = selectedValues;
       return selectedValues;
     }
-    if (variant == "result" && currentQuestionResult?.options.length && currentQuestionResult?.options.length > 0) {
-      return currentQuestionResult?.options.map((op) => op.id) || [];
+    if (variant == "result") {
+      return currentQuestionResult?.selectedOptions.map((op) => op.optionId) || [];
+    } else {
+      return prevSelectedValuesRef.current;
     }
-    return prevSelectedValuesRef.current;
   }, [
     selectedValues,
     currentQuestion?.id,
     variant,
-    currentQuestionResult?.optionId
+    currentQuestionResult?.selectedOptions
   ]);
   const handleSelectedValues = (0, import_react12.useCallback)(
     (values) => {
@@ -4780,11 +4831,9 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
   const choices = currentQuestion?.options?.map((option) => {
     let status = "neutral" /* NEUTRAL */;
     if (variant === "result") {
-      const isCorrectOption = currentQuestion.correctOptionIds?.includes(
-        option.id
-      );
-      const isSelected = currentQuestionResult?.options.find(
-        (op) => op.id === option.id
+      const isCorrectOption = currentQuestionResult?.options?.find((op) => op.id === option.id)?.isCorrect || false;
+      const isSelected = currentQuestionResult?.selectedOptions?.some(
+        (op) => op.optionId === option.id
       );
       if (isCorrectOption) {
         status = "correct" /* CORRECT */;
@@ -5060,7 +5109,7 @@ var QuizConnectDots = ({ paddingBottom }) => {
     }) }) })
   ] });
 };
-var QuizFill = ({ paddingBottom = "pb-[80px]" }) => {
+var QuizFill = ({ paddingBottom }) => {
   const { variant } = useQuizStore();
   const options = [
     "ci\xEAncia",
@@ -5418,7 +5467,7 @@ var QuizQuestionList = ({
     ([subjectId, questions]) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.BookOpen, { size: 17, className: "text-white" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-800 font-bold text-lg", children: subjectId })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-800 font-bold text-lg", children: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
         const status = getQuestionStatus(question.id);
@@ -5849,28 +5898,24 @@ var QuizResultPerformance = (0, import_react12.forwardRef)(
   }
 );
 var QuizListResult = (0, import_react12.forwardRef)(({ className, onSubjectClick, ...props }, ref) => {
-  const {
-    getQuestionsGroupedBySubject,
-    isQuestionAnswered,
-    getUserAnswerByQuestionId
-  } = useQuizStore();
+  const { getQuestionsGroupedBySubject } = useQuizStore();
   const groupedQuestions = getQuestionsGroupedBySubject();
   const subjectsStats = Object.entries(groupedQuestions).map(
     ([subjectId, questions]) => {
       let correct = 0;
       let incorrect = 0;
       questions.forEach((question) => {
-        if (isQuestionAnswered(question.id)) {
-          const userAnswerItem = getUserAnswerByQuestionId(question.id);
-          if (userAnswerItem?.answerStatus == "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */) {
-            correct++;
-          } else {
-            incorrect++;
-          }
+        if (question.answerStatus == "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */) {
+          correct++;
+        } else {
+          incorrect++;
         }
       });
       return {
-        subject: subjectId,
+        subject: {
+          name: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria",
+          id: subjectId
+        },
         correct,
         incorrect,
         total: questions.length
@@ -5882,44 +5927,42 @@ var QuizListResult = (0, import_react12.forwardRef)(({ className, onSubjectClick
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "flex flex-col gap-2", children: subjectsStats.map((subject) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CardResults,
       {
-        onClick: () => onSubjectClick?.(subject.subject),
+        onClick: () => onSubjectClick?.(subject.subject.id),
         className: "max-w-full",
-        header: subject.subject,
+        header: subject.subject.name,
         correct_answers: subject.correct,
         incorrect_answers: subject.incorrect,
         icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.Book, { size: 20 }),
         direction: "row"
       }
-    ) }, subject.subject)) })
+    ) }, subject.subject.id)) })
   ] });
 });
 var QuizListResultByMateria = ({
   subject,
   onQuestionClick
 }) => {
-  const {
-    getQuestionsGroupedBySubject,
-    getUserAnswerByQuestionId,
-    getQuestionIndex
-  } = useQuizStore();
+  const { getQuestionsGroupedBySubject, getQuestionIndex } = useQuizStore();
   const groupedQuestions = getQuestionsGroupedBySubject();
   const answeredQuestions = groupedQuestions[subject] || [];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: subject }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: answeredQuestions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "flex flex-col ", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "flex flex-col gap-2 pt-4", children: answeredQuestions.map((question) => {
-        const questionIndex = getQuestionIndex(question.id);
+        const questionIndex = getQuestionIndex(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          question.questionId ?? question.id
+        );
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           CardStatus,
           {
             className: "max-w-full",
             header: `Quest\xE3o ${questionIndex.toString().padStart(2, "0")}`,
             status: (() => {
-              const userAnswer = getUserAnswerByQuestionId(question.id);
-              if (userAnswer?.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */)
+              if (question.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */)
                 return "correct";
-              if (userAnswer?.answerStatus === "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */)
+              if (question.answerStatus === "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */)
                 return "incorrect";
               return void 0;
             })(),
@@ -5935,6 +5978,7 @@ var QuizListResultByMateria = ({
   Quiz,
   QuizAlternative,
   QuizConnectDots,
+  QuizContainer,
   QuizContent,
   QuizDissertative,
   QuizFill,
@@ -5949,8 +5993,10 @@ var QuizListResultByMateria = ({
   QuizResultHeaderTitle,
   QuizResultPerformance,
   QuizResultTitle,
+  QuizSubTitle,
   QuizTitle,
   QuizTrueOrFalse,
-  getStatusBadge
+  getStatusBadge,
+  getStatusStyles
 });
 //# sourceMappingURL=index.js.map