analytica-frontend-lib 1.1.22 → 1.1.23

package/dist/index.d.mts

@@ -46,6 +46,7 @@ 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

@@ -46,6 +46,7 @@ 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

@@ -74,6 +74,7 @@ __export(src_exports, {
   MultipleChoiceList: () => MultipleChoiceList,
   NavButton: () => NavButton_default,
   NotFound: () => NotFound_default,
+  NotificationCard: () => NotificationCard_default,
   ProfileMenuFooter: () => ProfileMenuFooter,
   ProfileMenuHeader: () => ProfileMenuHeader,
   ProfileMenuSection: () => ProfileMenuSection,
@@ -10019,6 +10020,201 @@ var LoadingModal = (0, import_react29.forwardRef)(
   }
 );
 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,
@@ -10065,6 +10261,7 @@ var loadingModal_default = LoadingModal;
   MultipleChoiceList,
   NavButton,
   NotFound,
+  NotificationCard,
   ProfileMenuFooter,
   ProfileMenuHeader,
   ProfileMenuSection,