analytica-frontend-lib 1.1.21 → 1.1.23

package/dist/index.d.mts

@@ -45,6 +45,8 @@ export { useUrlAuthentication } from './Auth/useUrlAuthentication/index.mjs';
 export { useApiConfig } from './Auth/useApiConfig/index.mjs';
 export { Quiz, QuizAlternative, QuizConnectDots, QuizContent, QuizDissertative, QuizFooter, QuizHeader, QuizHeaderResult, QuizImageQuestion, QuizListResult, QuizListResultByMateria, QuizMultipleChoice, QuizQuestionList, QuizResultHeaderTitle, QuizResultPerformance, QuizResultTitle, QuizTitle, QuizTrueOrFalse, getStatusBadge } from './Quiz/index.mjs';
 export { ANSWER_STATUS, Activity, Lesson, QUESTION_DIFFICULTY, QUESTION_STATUS, QUESTION_TYPE, Question, QuestionResult, QuizState, Simulated, UserAnswerItem, useQuizStore } from './Quiz/useQuizStore/index.mjs';
+export { default as LoadingModal } from './LoadingModal/index.mjs';
+export { default as NotificationCard, NotificationGroup, NotificationItem } from './NotificationCard/index.mjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/index.d.ts

@@ -45,6 +45,8 @@ export { useUrlAuthentication } from './Auth/useUrlAuthentication/index.js';
 export { useApiConfig } from './Auth/useApiConfig/index.js';
 export { Quiz, QuizAlternative, QuizConnectDots, QuizContent, QuizDissertative, QuizFooter, QuizHeader, QuizHeaderResult, QuizImageQuestion, QuizListResult, QuizListResultByMateria, QuizMultipleChoice, QuizQuestionList, QuizResultHeaderTitle, QuizResultPerformance, QuizResultTitle, QuizTitle, QuizTrueOrFalse, getStatusBadge } from './Quiz/index.js';
 export { ANSWER_STATUS, Activity, Lesson, QUESTION_DIFFICULTY, QUESTION_STATUS, QUESTION_TYPE, Question, QuestionResult, QuizState, Simulated, UserAnswerItem, useQuizStore } from './Quiz/useQuizStore/index.js';
+export { default as LoadingModal } from './LoadingModal/index.js';
+export { default as NotificationCard, NotificationGroup, NotificationItem } from './NotificationCard/index.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   IconRender: () => IconRender_default,
   IconRoundedButton: () => IconRoundedButton_default,
   Input: () => Input_default,
+  LoadingModal: () => loadingModal_default,
   Menu: () => Menu_default,
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
@@ -73,6 +74,7 @@ __export(src_exports, {
   MultipleChoiceList: () => MultipleChoiceList,
   NavButton: () => NavButton_default,
   NotFound: () => NotFound_default,
+  NotificationCard: () => NotificationCard_default,
   ProfileMenuFooter: () => ProfileMenuFooter,
   ProfileMenuHeader: () => ProfileMenuHeader,
   ProfileMenuSection: () => ProfileMenuSection,
@@ -5215,7 +5217,7 @@ var CardSimulationHistory = (0, import_react14.forwardRef)(({ data, onSimulation
                     ),
                     onClick: () => onSimulationClick?.(simulation),
                     children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-wrap flex-col justify-between sm:flex-row gap-2 flex-1 min-w-0", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                           Text_default,
                           {
@@ -8595,18 +8597,7 @@ var Quiz = (0, import_react28.forwardRef)(({ children, className, variant = "def
   (0, import_react28.useEffect)(() => {
     setVariant(variant);
   }, [variant, setVariant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "div",
-    {
-      ref,
-      className: cn(
-        "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children });
 });
 var QuizHeaderResult = (0, import_react28.forwardRef)(
   ({ className, ...props }, ref) => {
@@ -9946,7 +9937,7 @@ var QuizListResultByMateria = ({
   const { getQuestionsGroupedBySubject, getQuestionIndex } = useQuizStore();
   const groupedQuestions = getQuestionsGroupedBySubject();
   const answeredQuestions = groupedQuestions[subject] || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: answeredQuestions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("section", { className: "flex flex-col ", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
@@ -9974,6 +9965,256 @@ var QuizListResultByMateria = ({
     ] })
   ] });
 };
+
+// src/components/LoadingModal/loadingModal.tsx
+var import_react29 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var LoadingModal = (0, import_react29.forwardRef)(
+  ({ open, title = "Titulo...", subtitle = "Subtitulo...", ...props }, ref) => {
+    if (!open) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "div",
+      {
+        ref,
+        "aria-modal": "true",
+        "aria-labelledby": "loading-modal-title",
+        "aria-describedby": "loading-modal-subtitle",
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-background/90 backdrop-blur-xs",
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-full max-w-[364px] flex flex-col items-center justify-center gap-14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "animate-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            "svg",
+            {
+              width: "102",
+              height: "102",
+              viewBox: "0 0 102 102",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              focusable: false,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  "path",
+                  {
+                    d: "M101.5 51C101.5 78.8904 78.8904 101.5 51 101.5C23.1096 101.5 0.5 78.8904 0.5 51C0.5 23.1096 23.1096 0.5 51 0.5C78.8904 0.5 101.5 23.1096 101.5 51ZM8.62286 51C8.62286 74.4043 27.5957 93.3771 51 93.3771C74.4043 93.3771 93.3771 74.4043 93.3771 51C93.3771 27.5957 74.4043 8.62286 51 8.62286C27.5957 8.62286 8.62286 27.5957 8.62286 51Z",
+                    className: "fill-primary-100"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  "path",
+                  {
+                    d: "M97.4386 51C99.6816 51 101.517 52.8213 101.337 55.0571C100.754 62.2833 98.6212 69.3162 95.0643 75.6696C90.8444 83.207 84.7616 89.536 77.3975 94.0514C70.0333 98.5668 61.6339 101.118 53.0024 101.46C44.371 101.803 35.7959 99.9255 28.0971 96.0078C20.3982 92.0902 13.833 86.2631 9.02917 79.0838C4.22529 71.9045 1.34332 63.6129 0.658804 55.0017C-0.0257159 46.3906 1.51009 37.7479 5.1194 29.8997C8.16173 23.2845 12.5915 17.4202 18.0904 12.6959C19.7917 11.2341 22.3444 11.6457 23.6647 13.459C24.9851 15.2723 24.5702 17.7988 22.8916 19.2866C18.5048 23.1747 14.9608 27.9413 12.4992 33.2937C9.47048 39.8794 8.1817 47.132 8.75612 54.3581C9.33053 61.5841 11.7489 68.542 15.7801 74.5666C19.8113 80.5911 25.3205 85.4809 31.781 88.7684C38.2414 92.0559 45.4372 93.6312 52.6804 93.3438C59.9235 93.0564 66.9718 90.9158 73.1515 87.1267C79.3311 83.3375 84.4355 78.0266 87.9766 71.7015C90.8546 66.561 92.6217 60.8903 93.1827 55.0553C93.3973 52.8225 95.1955 51 97.4386 51Z",
+                    className: "fill-primary-600"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex flex-col gap-4 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { id: "loading-modal-title", className: "text-text-950 text-lg", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { id: "loading-modal-subtitle", className: "text-text-600 text-lg", children: subtitle })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+var loadingModal_default = LoadingModal;
+
+// src/components/NotificationCard/NotificationCard.tsx
+var import_phosphor_react21 = require("phosphor-react");
+
+// src/assets/img/no-notification-result.png
+var no_notification_result_default = "./no-notification-result-7Y3ACV6V.png";
+
+// src/components/NotificationCard/NotificationCard.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SingleNotificationCard = ({
+  title,
+  message,
+  time,
+  isRead,
+  onMarkAsRead,
+  onDelete,
+  onNavigate,
+  actionLabel,
+  className
+}) => {
+  const handleMarkAsRead = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isRead) {
+      onMarkAsRead();
+    }
+  };
+  const handleDelete = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete();
+  };
+  const handleNavigate = (e) => {
+    e.stopPropagation();
+    if (onNavigate) {
+      onNavigate();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col justify-center items-start p-4 gap-2 w-full bg-background border-b border-border-200",
+        "last:border-b-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+          !isRead && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DropdownMenu_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              DropdownMenuTrigger,
+              {
+                className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
+                "aria-label": "Menu de a\xE7\xF5es",
+                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_phosphor_react21.DotsThreeVertical, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              !isRead && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                DropdownMenuItem,
+                {
+                  onClick: handleMarkAsRead,
+                  className: "text-text-950",
+                  children: "Marcar como lida"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
+          onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleNavigate,
+              className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+              children: actionLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var NotificationEmpty = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "img",
+      {
+        src: no_notification_result_default,
+        alt: "Sem notifica\xE7\xF5es",
+        width: 82,
+        height: 82,
+        className: "object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: "Nenhuma notifica\xE7\xE3o no momento" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!" })
+  ] });
+};
+var NotificationList = ({
+  groupedNotifications = [],
+  loading = false,
+  error = null,
+  onRetry,
+  onMarkAsReadById,
+  onDeleteById,
+  onNavigateById,
+  getActionLabel,
+  renderEmpty,
+  className
+}) => {
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-error-600", children: error }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "text-sm text-info-600 hover:text-info-700",
+          children: "Tentar novamente"
+        }
+      )
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
+      (skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SkeletonCard,
+        {
+          className: "p-4 border-b border-border-200"
+        },
+        skeletonId
+      )
+    ) });
+  }
+  if (!groupedNotifications || groupedNotifications.length === 0) {
+    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotificationEmpty, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      SingleNotificationCard,
+      {
+        title: notification.title,
+        message: notification.message,
+        time: notification.time,
+        isRead: notification.isRead,
+        onMarkAsRead: () => onMarkAsReadById?.(notification.id),
+        onDelete: () => onDeleteById?.(notification.id),
+        onNavigate: notification.entityType && notification.entityId && onNavigateById ? () => onNavigateById(
+          notification.entityType,
+          notification.entityId
+        ) : void 0,
+        actionLabel: getActionLabel?.(notification.entityType)
+      },
+      notification.id
+    ))
+  ] }, `${group.label}-${idx}`)) });
+};
+var NotificationCard = (props) => {
+  if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      NotificationList,
+      {
+        ...props,
+        groupedNotifications: props.groupedNotifications ?? (props.notifications ? [{ label: "Notifica\xE7\xF5es", notifications: props.notifications }] : [])
+      }
+    );
+  }
+  if (props.title !== void 0 && props.message !== void 0 && props.time !== void 0 && props.isRead !== void 0 && props.onMarkAsRead && props.onDelete) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      SingleNotificationCard,
+      {
+        title: props.title,
+        message: props.message,
+        time: props.time,
+        isRead: props.isRead,
+        onMarkAsRead: props.onMarkAsRead,
+        onDelete: props.onDelete,
+        onNavigate: props.onNavigate,
+        actionLabel: props.actionLabel,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
+};
+var NotificationCard_default = NotificationCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ANSWER_STATUS,
@@ -10010,6 +10251,7 @@ var QuizListResultByMateria = ({
   IconRender,
   IconRoundedButton,
   Input,
+  LoadingModal,
   Menu,
   MenuContent,
   MenuItem,
@@ -10019,6 +10261,7 @@ var QuizListResultByMateria = ({
   MultipleChoiceList,
   NavButton,
   NotFound,
+  NotificationCard,
   ProfileMenuFooter,
   ProfileMenuHeader,
   ProfileMenuSection,