fix: notification type not correctly rendered in antd and mantine providers

packages/antd/src/providers/notificationProvider/index.tsx

@@ -38,12 +38,35 @@ export const useNotificationProvider = (): NotificationProvider => {
           duration: 0,
           closeIcon: <></>,
         });
+      } else if (type === "success") {
+        notification.success({
+          key,
+          description: message,
+          message: description ?? null,
+        });
+      } else if (type === "error") {
+        notification.error({
+          key,
+          description: message,
+          message: description ?? null,
+        });
+      } else if (type === "info") {
+        notification.info({
+          key,
+          description: message,
+          message: description ?? null,
+        });
+      } else if (type === "warning") {
+        notification.warning({
+          key,
+          description: message,
+          message: description ?? null,
+        });
       } else {
         notification.open({
           key,
           description: message,
           message: description ?? null,
-          type,
         });
       }
     },

packages/core/src/contexts/notification/types.ts

@@ -33,7 +33,7 @@ export type SuccessErrorNotification<
 export type OpenNotificationParams = {
   key?: string;
   message: string;
-  type: "success" | "error" | "progress";
+  type?: "success" | "error" | "progress" | "info" | "warning";
   description?: string;
   cancelMutation?: () => void;
   undoableTimeout?: number;

packages/mantine/src/providers/notificationProvider.tsx

@@ -6,10 +6,28 @@ import {
   hideNotification,
 } from "@mantine/notifications";
 import { ActionIcon, Box, Group, Text } from "@mantine/core";
-import { IconCheck, IconRotate2, IconX } from "@tabler/icons-react";
+import {
+  IconCheck,
+  IconRotate2,
+  IconX,
+  IconInfoCircle,
+  IconAlertCircle,
+} from "@tabler/icons-react";
 
 import { RingCountdown } from "@components";
 
+const notificationStyleByType: Record<
+  string,
+  { color: string; icon: React.ReactNode }
+> = {
+  success: { color: "primary", icon: <IconCheck size={18} /> },
+  error: { color: "red", icon: <IconX size={18} /> },
+  info: { color: "blue", icon: <IconInfoCircle size={18} /> },
+  warning: { color: "orange", icon: <IconAlertCircle size={18} /> },
+};
+
+const defaultStyle = { color: "gray", icon: null };
+
 export const useNotificationProvider = (): NotificationProvider => {
   const activeNotifications: string[] = [];
 
@@ -35,6 +53,10 @@ export const useNotificationProvider = (): NotificationProvider => {
     }
   };
 
+  const getStyle = (type?: string) => {
+    return notificationStyleByType[type ?? ""] ?? defaultStyle;
+  };
+
   const notificationProvider: NotificationProvider = {
     open: ({
       message,
@@ -123,16 +145,12 @@ export const useNotificationProvider = (): NotificationProvider => {
           });
         }
       } else {
+        const style = getStyle(type);
         if (isNotificationActive(key)) {
           updateNotification({
             id: key!,
-            color: type === "success" ? "primary" : "red",
-            icon:
-              type === "success" ? (
-                <IconCheck size={18} />
-              ) : (
-                <IconX size={18} />
-              ),
+            color: style.color,
+            icon: style.icon ?? undefined,
             message,
             title: description,
             autoClose: 5000,
@@ -141,13 +159,8 @@ export const useNotificationProvider = (): NotificationProvider => {
           addNotification(key);
           showNotification({
             id: key!,
-            color: type === "success" ? "primary" : "red",
-            icon:
-              type === "success" ? (
-                <IconCheck size={18} />
-              ) : (
-                <IconX size={18} />
-              ),
+            color: style.color,
+            icon: style.icon ?? undefined,
             message,
             title: description,
             onClose: () => {