analytica-frontend-lib 1.2.13 → 1.2.14

package/dist/AlertManagerView/index.mjs

@@ -389,38 +389,181 @@ import {
   forwardRef,
   useState,
   useMemo,
-  useEffect as useEffect2
+  useEffect as useEffect2,
+  Children,
+  isValidElement,
+  cloneElement
 } from "react";
 import { CaretUp, CaretDown } from "phosphor-react";
+
+// src/components/NoSearchResult/NoSearchResult.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var NoSearchResult = ({ image, title, description }) => {
+  const displayTitle = title || "Nenhum resultado encontrado";
+  const displayDescription = description || "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.";
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-center items-center gap-8 w-full max-w-4xl min-h-96", children: [
+    /* @__PURE__ */ jsx5("div", { className: "w-72 h-72 flex-shrink-0 relative", children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: image,
+        alt: "No search results",
+        className: "w-full h-full object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start w-full max-w-md", children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex flex-row justify-between items-end px-6 pt-6 pb-4 w-full rounded-t-xl", children: /* @__PURE__ */ jsx5(
+        Text_default,
+        {
+          as: "h2",
+          className: "text-text-950 font-semibold text-3xl leading-tight w-full flex items-center",
+          children: displayTitle
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("div", { className: "flex flex-row justify-center items-center px-6 gap-2 w-full", children: /* @__PURE__ */ jsx5(Text_default, { className: "text-text-600 font-normal text-lg leading-relaxed w-full text-justify", children: displayDescription }) })
+    ] })
+  ] });
+};
+var NoSearchResult_default = NoSearchResult;
+
+// src/components/Table/Table.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Table = forwardRef(
-  ({ variant = "default", className, children, ...props }, ref) => /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className: cn(
-        "relative w-full overflow-x-auto",
-        variant === "default" && "border border-border-200 rounded-xl"
-      ),
-      children: /* @__PURE__ */ jsxs3(
-        "table",
+  ({
+    variant = "default",
+    className,
+    children,
+    searchTerm,
+    noSearchResultImage,
+    noSearchResultTitle = "Nenhum resultado encontrado",
+    noSearchResultDescription = "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.",
+    emptyStateMessage = "Nenhum dado dispon\xEDvel no momento.",
+    emptyStateButtonText = "Adicionar item",
+    onEmptyStateButtonClick,
+    ...props
+  }, ref) => {
+    const isTableBodyEmpty = useMemo(() => {
+      let foundBody = false;
+      let empty = true;
+      Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === TableBody) {
+          foundBody = true;
+          const bodyProps = child.props;
+          if (Children.count(bodyProps?.children) > 0) {
+            empty = false;
+          }
+        }
+      });
+      return foundBody ? empty : false;
+    }, [children]);
+    const columnCount = useMemo(() => {
+      let count = 0;
+      Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === TableHeader) {
+          const headerProps = child.props;
+          Children.forEach(headerProps.children, (row) => {
+            if (isValidElement(row) && row.type === TableRow) {
+              const rowProps = row.props;
+              count = Children.count(rowProps.children);
+            }
+          });
+        }
+      });
+      return count || 1;
+    }, [children]);
+    const hasSearchTerm = searchTerm && searchTerm.trim() !== "";
+    const showNoSearchResult = hasSearchTerm && isTableBodyEmpty;
+    const showEmptyState = !hasSearchTerm && isTableBodyEmpty;
+    if (showNoSearchResult) {
+      return /* @__PURE__ */ jsxs4(
+        "div",
         {
-          ref,
           className: cn(
-            "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
-            className
+            "relative w-full overflow-x-auto",
+            variant === "default" && "border border-border-200 rounded-xl"
           ),
-          ...props,
           children: [
-            /* @__PURE__ */ jsx5("caption", { className: "sr-only", children: "My Table" }),
-            children
+            /* @__PURE__ */ jsx6(
+              "table",
+              {
+                ref,
+                className: cn(
+                  "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
+                  className
+                ),
+                ...props,
+                children: Children.map(children, (child) => {
+                  if (isValidElement(child) && (child.type === TableCaption || child.type === TableHeader)) {
+                    return child;
+                  }
+                  return null;
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { className: "py-8 flex justify-center", children: noSearchResultImage ? /* @__PURE__ */ jsx6(
+              NoSearchResult_default,
+              {
+                image: noSearchResultImage,
+                title: noSearchResultTitle,
+                description: noSearchResultDescription
+              }
+            ) : /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx6("p", { className: "text-text-600 text-lg font-semibold mb-2", children: noSearchResultTitle }),
+              /* @__PURE__ */ jsx6("p", { className: "text-text-500 text-sm", children: noSearchResultDescription })
+            ] }) })
           ]
         }
-      )
+      );
     }
-  )
+    const modifiedChildren = Children.map(children, (child) => {
+      if (isValidElement(child) && child.type === TableBody && showEmptyState) {
+        return cloneElement(child, {
+          children: /* @__PURE__ */ jsx6(TableRow, { variant, children: /* @__PURE__ */ jsx6(TableCell, { colSpan: columnCount, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-12 gap-4", children: [
+            /* @__PURE__ */ jsx6("p", { className: "text-text-600 text-base font-normal", children: emptyStateMessage }),
+            onEmptyStateButtonClick && /* @__PURE__ */ jsx6(
+              Button_default,
+              {
+                variant: "solid",
+                action: "primary",
+                size: "medium",
+                onClick: onEmptyStateButtonClick,
+                children: emptyStateButtonText
+              }
+            )
+          ] }) }) })
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(
+          "relative w-full overflow-x-auto",
+          variant === "default" && "border border-border-200 rounded-xl"
+        ),
+        children: /* @__PURE__ */ jsxs4(
+          "table",
+          {
+            ref,
+            className: cn(
+              "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
+              className
+            ),
+            ...props,
+            children: [
+              !Children.toArray(children).some(
+                (child) => isValidElement(child) && child.type === TableCaption
+              ) && /* @__PURE__ */ jsx6("caption", { className: "sr-only", children: "My Table" }),
+              modifiedChildren
+            ]
+          }
+        )
+      }
+    );
+  }
 );
 Table.displayName = "Table";
-var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "thead",
   {
     ref,
@@ -430,7 +573,7 @@ var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
 ));
 TableHeader.displayName = "TableHeader";
 var TableBody = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
     "tbody",
     {
       ref,
@@ -441,7 +584,7 @@ var TableBody = forwardRef(
 );
 TableBody.displayName = "TableBody";
 var TableFooter = forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx6(
     "tfoot",
     {
       ref,
@@ -481,14 +624,14 @@ var TableRow = forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "tr",
       {
         ref,
         className: cn(
           "transition-colors",
-          state !== "disabled" ? "hover:bg-muted/50" : "",
-          clickable && state !== "disabled" ? "cursor-pointer" : "",
+          state === "disabled" ? "" : "hover:bg-muted/50",
+          state === "disabled" || !clickable ? "" : "cursor-pointer",
           VARIANT_STATES_ROW[state][variant],
           className
         ),
@@ -513,7 +656,7 @@ var TableHead = forwardRef(
         onSort();
       }
     };
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "th",
       {
         ref,
@@ -524,11 +667,11 @@ var TableHead = forwardRef(
         ),
         onClick: handleClick,
         ...props,
-        children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
           children,
-          sortable && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-            sortDirection === "asc" && /* @__PURE__ */ jsx5(CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
-            sortDirection === "desc" && /* @__PURE__ */ jsx5(CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
+          sortable && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+            sortDirection === "asc" && /* @__PURE__ */ jsx6(CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
+            sortDirection === "desc" && /* @__PURE__ */ jsx6(CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
           ] })
         ] })
       }
@@ -536,7 +679,7 @@ var TableHead = forwardRef(
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "td",
   {
     ref,
@@ -548,7 +691,7 @@ var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "caption",
   {
     ref,
@@ -564,7 +707,7 @@ var Table_default = Table;
 
 // src/components/Badge/Badge.tsx
 import { Bell } from "phosphor-react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error-background text-error-700 focus-visible:outline-none",
@@ -626,14 +769,14 @@ var Badge = ({
   const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
   const baseClassesIcon = "flex items-center";
   if (variant === "notification") {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         className: cn(baseClasses, variantClasses, sizeClasses, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx6(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
-          notificationActive && /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
+          notificationActive && /* @__PURE__ */ jsx7(
             "span",
             {
               "data-testid": "notification-dot",
@@ -644,15 +787,15 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(baseClasses, variantClasses, sizeClasses, className),
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ jsx6("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
+        iconLeft && /* @__PURE__ */ jsx7("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ jsx6("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
+        iconRight && /* @__PURE__ */ jsx7("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -666,7 +809,7 @@ import { CaretLeft, CaretRight, User } from "phosphor-react";
 var notification_default = "../notification-TD7ZFRLL.png";
 
 // src/components/AlertManagerView/AlertsManagerView.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var AlertsManagerView = ({
   alertData,
   isOpen = false,
@@ -709,7 +852,7 @@ var AlertsManagerView = ({
       year: "numeric"
     });
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Modal_default,
     {
       isOpen,
@@ -717,59 +860,59 @@ var AlertsManagerView = ({
       title: alertData.title,
       size: "md",
       contentClassName: "p-0",
-      children: /* @__PURE__ */ jsx7("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
-          /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ jsxs6("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
+          /* @__PURE__ */ jsx8(
             "img",
             {
               src: imageUrl || notification_default,
               alt: alertData.title || "Imagem do alerta"
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center text-center gap-3", children: [
-            /* @__PURE__ */ jsx7(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
-            /* @__PURE__ */ jsx7(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center text-center gap-3", children: [
+            /* @__PURE__ */ jsx8(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
+            /* @__PURE__ */ jsx8(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx7(Divider_default, { className: "my-4" }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex justify-between items-center mb-4 px-2", children: [
-          /* @__PURE__ */ jsx7(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
-          /* @__PURE__ */ jsx7(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
+        /* @__PURE__ */ jsx8(Divider_default, { className: "my-4" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex justify-between items-center mb-4 px-2", children: [
+          /* @__PURE__ */ jsx8(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
+          /* @__PURE__ */ jsx8(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
         ] }),
-        /* @__PURE__ */ jsx7(Divider_default, { className: "my-4" }),
-        /* @__PURE__ */ jsx7("div", { className: "mb-4", children: /* @__PURE__ */ jsxs5(Table_default, { variant: "borderless", className: "table-fixed", children: [
-          /* @__PURE__ */ jsx7(TableHeader, { children: /* @__PURE__ */ jsxs5(TableRow, { variant: "borderless", children: [
-            /* @__PURE__ */ jsx7(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
-            /* @__PURE__ */ jsx7(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
+        /* @__PURE__ */ jsx8(Divider_default, { className: "my-4" }),
+        /* @__PURE__ */ jsx8("div", { className: "mb-4", children: /* @__PURE__ */ jsxs6(Table_default, { variant: "borderless", className: "table-fixed", children: [
+          /* @__PURE__ */ jsx8(TableHeader, { children: /* @__PURE__ */ jsxs6(TableRow, { variant: "borderless", children: [
+            /* @__PURE__ */ jsx8(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
+            /* @__PURE__ */ jsx8(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
           ] }) }),
-          /* @__PURE__ */ jsx7(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-            /* @__PURE__ */ jsxs5(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
-              /* @__PURE__ */ jsx7("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx7(User, { className: "text-primary-950", size: 18 }) }),
+          /* @__PURE__ */ jsx8(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ jsxs6(TableRow, { children: [
+            /* @__PURE__ */ jsxs6(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
+              /* @__PURE__ */ jsx8("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx8(User, { className: "text-primary-950", size: 18 }) }),
               recipient.name
             ] }),
-            /* @__PURE__ */ jsx7(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ jsx7("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ jsx7(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ jsx7(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
+            /* @__PURE__ */ jsx8(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ jsx8("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ jsx8(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ jsx8(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
           ] }, recipient.id)) })
         ] }) }),
-        totalPages > 1 && /* @__PURE__ */ jsxs5("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
-          /* @__PURE__ */ jsxs5(Text_default, { size: "sm", className: "text-text-600", children: [
+        totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
+          /* @__PURE__ */ jsxs6(Text_default, { size: "sm", className: "text-text-600", children: [
             "P\xE1gina ",
             effectiveCurrentPage,
             " de ",
             totalPages
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+            /* @__PURE__ */ jsx8(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 onClick: () => onPageChange(Math.max(1, effectiveCurrentPage - 1)),
                 disabled: effectiveCurrentPage === 1,
-                iconLeft: /* @__PURE__ */ jsx7(CaretLeft, {}),
+                iconLeft: /* @__PURE__ */ jsx8(CaretLeft, {}),
                 children: "Anterior"
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               Button_default,
               {
                 variant: "link",
@@ -778,28 +921,28 @@ var AlertsManagerView = ({
                   Math.min(totalPages, effectiveCurrentPage + 1)
                 ),
                 disabled: effectiveCurrentPage === totalPages,
-                iconRight: /* @__PURE__ */ jsx7(CaretRight, {}),
+                iconRight: /* @__PURE__ */ jsx8(CaretRight, {}),
                 children: "Pr\xF3ximo"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-            /* @__PURE__ */ jsx7(
+          ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+            /* @__PURE__ */ jsx8(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 disabled: effectiveCurrentPage === 1,
-                iconLeft: /* @__PURE__ */ jsx7(CaretLeft, {}),
+                iconLeft: /* @__PURE__ */ jsx8(CaretLeft, {}),
                 children: "Anterior"
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 disabled: effectiveCurrentPage === totalPages,
-                iconRight: /* @__PURE__ */ jsx7(CaretRight, {}),
+                iconRight: /* @__PURE__ */ jsx8(CaretRight, {}),
                 children: "Pr\xF3ximo"
               }
             )