@ttoss/react-notifications 1.24.72 → 2.1.1

package/README.md

@@ -2,25 +2,24 @@
 
 ## About
 
-This module handles notifications in your applications and other ttoss modules.
+This module provides a simple way to show notifications in your application using ttoss ecosystem.
 
-## Getting Started
-
-### Install
+## Installation
 
 ```shell
-pnpm add @ttoss/notifications @ttoss/ui @ttoss/react-icons @emotion/react
+pnpm add @ttoss/notifications @ttoss/components @ttoss/react-icons @ttoss/ui @emotion/react
 ```
 
-## Usage
+## Getting Started
 
 ### Provider
 
-Add a provider on top of your application.
+Add a provider on top of your application and set [Modal app element](https://reactcommunity.org/react-modal/accessibility/).
 
 ```tsx
 import { NotificationsProvider } from '@ttoss/react-notifications';
 import { ThemeProvider } from "@ttoss/ui";
+import { Modal } from "@ttoss/components";
 
 ReactDOM.render(
   <React.StrictMode>
@@ -31,6 +30,8 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
+
+Modal.setAppElement('#root');
 ```
 
 ### Loading
@@ -39,80 +40,139 @@ This modules provides a global loading bar that you can use on every part of you
 
 ```tsx
 import { useNotifications } from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
 
 const Component = () => {
   const { loading, setLoading } = useNotifications();
 
   return (
-    <div>
-      <button onClick={() => setLoading(true)} disabled={isLoading}>
+    <Box>
+      <Button onClick={() => setLoading(true)} disabled={isLoading}>
         Click Me!
-      </button>
-    </div>
+      </Button>
+    </Box>
   );
 };
 ```
 
 ### Modal
 
-This modules loads your notification in a Modal. Just put a container under a `NotificationsProvider` and you are ready to go.
+Set `viewType` to `modal` to show a modal notification.
 
 ```tsx
 import { useNotifications } from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
 
 const Component = () => {
-  const { setNotifications } = useNotifications();
+  const { addNotification } = useNotifications();
 
   return (
-    <div>
-      <button
+    <Box>
+      <Button
         onClick={() =>
-          setNotifications({ message: "I'm a notification", type: 'info' })
+          addNotification({
+            message: "I'm a notification",
+            type: 'info',
+            viewType: 'modal',
+          })
         }
       >
         Click Me!
-      </button>
-      <NotificationsModal />
-    </div>
+      </Button>
+    </Box>
   );
 };
 ```
 
-### Resolving notifications
-
-Additionally, the API accepts a third property in `setNotifications`: `notificationKey`.
-In this property, you can insert a placeholder for a particular notification, and, the library gonna resolve any repetated key for this notification to be only one notification.
+### Toast
 
-In that way, you have more control if you gonna render a repeated notification or not:
+Set `viewType` to `toast` to show a toast notification.
 
 ```tsx
 import { useNotifications } from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
+
+const Component = () => {
+  const { addNotification } = useNotifications();
+
+  return (
+    <Box>
+      <Button
+        onClick={() =>
+          addNotification({
+            message: "I'm a notification",
+            type: 'info',
+            viewType: 'toast',
+          })
+        }
+      >
+        Click Me!
+      </Button>
+    </Box>
+  );
+};
+```
+
+### NotificationsBox
+
+You can use `NotificationsBox` to show the notifications in a specific place. You can render as many `NotificationsBox` as you want in your application.
+
+```tsx
+import { NotificationsBox } from '@ttoss/react-notifications';
+import { Box } from '@ttoss/ui';
 
 const Component = () => {
-  const { setNotifications } = useNotifications();
+  return (
+    <Box>
+      <NotificationsBox />
+    </Box>
+  );
+};
 
+const App = () => {
   return (
-    <div>
-      <button
+    <Box>
+      <NotificationsBox />
+      <Component />
+    </Box>
+  );
+};
+```
+
+In the example above, both `NotificationsBox` will show the notifications.
+
+To render the notifications in a specific `NotificationsBox`, you can set the `boxId` in the notification, which is the `id` of the `NotificationsBox` you want to show the notification.
+
+```tsx
+import { useNotifications, NotificationsBox } from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
+
+const Component = () => {
+  const { addNotification , NotificationsBox } = useNotifications();
+
+  return (
+    <Box>
+      <NotificationsBox id="my-box" />
+      <Button
         onClick={() =>
-          setNotifications([
-            {
-              message: "I'm a notification",
-              type: 'info',
-              key: 'information',
-            },
-            {
-              message: "I'm considered to be the same notification",
-              type: 'info',
-              key: 'information',
-            },
-          ])
+          addNotification({
+            message: "I'm a notification",
+            type: 'info',,
+            boxId: 'my-box',
+          })
         }
       >
         Click Me!
-      </button>
-      <NotificationsModal />
-    </div>
+      </Button>
+    </Box>
   );
 };
 ```
+
+#### Recommendation
+
+"You can place the `NotificationsBox` component at the root of your application to handle notifications rendering automatically, eliminating the need to manage it manually elsewhere. If you need a specific `NotificationsBox`, simply render the `NotificationsBox` in the desired location and use the `boxId` property to differentiate it."
+
+## License
+
+[MIT](https://github.com/ttoss/ttoss/blob/main/LICENSE)

package/dist/esm/index.js

@@ -1,177 +1,204 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
+// src/NotificationsBox.tsx
+import { NotificationCard } from "@ttoss/components/NotificationCard";
+import { Stack } from "@ttoss/ui";
+
 // src/Provider.tsx
-import * as React from "react";
+import { toast, ToastContainer } from "@ttoss/components/Toast";
 import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
+import * as React from "react";
+
+// src/NotificationsModal.tsx
+import { Modal } from "@ttoss/components/Modal";
+import { CloseButton } from "@ttoss/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsModal = () => {
+  const {
+    notifications,
+    clearNotifications,
+    defaultViewType
+  } = useNotifications();
+  const modalNotifications = notifications?.filter(notification => {
+    if (defaultViewType === "modal" && !notification.viewType) {
+      return true;
+    }
+    return notification.viewType === "modal";
+  });
+  const isOpen = !!modalNotifications && modalNotifications.length > 0;
+  return /* @__PURE__ */jsxs(Modal, {
+    isOpen,
+    style: {
+      content: {
+        minWidth: "30%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "4"
+      }
+    },
+    children: [/* @__PURE__ */jsx(CloseButton, {
+      "aria-label": "Close",
+      sx: {
+        alignSelf: "flex-end"
+      },
+      onClick: () => {
+        clearNotifications();
+      }
+    }), /* @__PURE__ */jsx(NotificationsBox, {
+      notifications: modalNotifications
+    })]
+  });
+};
+
+// src/Provider.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var NotificationsContext = React.createContext({
   isLoading: false,
   setLoading: () => {
     return void 0;
   },
-  setNotifications: () => {
+  defaultViewType: "box",
+  addNotification: () => {
+    return void 0;
+  },
+  removeNotification: () => {
+    return void 0;
+  },
+  clearNotifications: () => {
     return void 0;
   }
 });
-var NotificationsProvider = ({
-  children,
-  enableNotificationBox
-}) => {
+var NotificationsProvider = props => {
   const [isLoading, setLoading] = React.useState(false);
   const [notifications, setNotifications] = React.useState();
-  return /* @__PURE__ */jsxs(NotificationsContext.Provider, {
+  const prefix = React.useId();
+  const removeNotification = React.useCallback(id => {
+    setNotifications(prevNotifications => {
+      return prevNotifications?.filter(notification => {
+        return notification.id !== id;
+      });
+    });
+  }, []);
+  const addNotification = React.useCallback(notification => {
+    const newNotifications = (Array.isArray(notification) ? notification : [notification]).map(notification2 => {
+      const id = notification2.id || `${prefix}-${Math.random()}`;
+      return {
+        ...notification2,
+        id
+      };
+    }).filter((notification2, index, notifications2) => {
+      return notifications2.findIndex(n => {
+        return n.id === notification2.id;
+      }) === index;
+    });
+    const toastNotifications = newNotifications.filter(notification2 => {
+      if (notification2.viewType === "toast") {
+        return true;
+      }
+      if (!notification2.viewType && props.defaultViewType === "toast") {
+        return true;
+      }
+      return false;
+    });
+    toastNotifications.forEach(notification2 => {
+      toast(notification2.message, {
+        ...notification2.toast,
+        type: notification2.type,
+        onClose: () => {
+          removeNotification(notification2.id);
+          notification2.toast?.onClose?.();
+        }
+      });
+    });
+    setNotifications((prevNotifications = []) => {
+      const oldNotifications = prevNotifications.filter(prevNotification => {
+        const newNotification = newNotifications.find(newNotification2 => {
+          return newNotification2.id === prevNotification.id;
+        });
+        if (newNotification) {
+          if (newNotification.viewType === "toast") {
+            return false;
+          }
+          if (!newNotification.viewType && props.defaultViewType === "toast") {
+            return false;
+          }
+        }
+        return true;
+      });
+      return [...oldNotifications, ...newNotifications];
+    });
+  }, [prefix, props.defaultViewType, removeNotification]);
+  const clearNotifications = React.useCallback(() => {
+    setNotifications(void 0);
+  }, []);
+  return /* @__PURE__ */jsxs2(NotificationsContext.Provider, {
     value: {
       isLoading,
       setLoading,
-      setNotifications,
       notifications,
-      enableNotificationBox
+      addNotification,
+      removeNotification,
+      clearNotifications,
+      defaultViewType: props.defaultViewType || "box"
     },
-    children: [isLoading && /* @__PURE__ */jsx(Flex, {
+    children: [/* @__PURE__ */jsx2(ToastContainer, {
+      ...props.toast
+    }), /* @__PURE__ */jsx2(NotificationsModal, {}), isLoading && /* @__PURE__ */jsx2(Flex, {
       sx: {
         position: "absolute",
         width: "100%",
         top: 0
       },
-      children: /* @__PURE__ */jsx(InfiniteLinearProgress, {})
-    }), children]
+      children: /* @__PURE__ */jsx2(InfiniteLinearProgress, {})
+    }), props.children]
   });
 };
 var useNotifications = () => {
-  const {
-    isLoading,
-    setLoading,
-    notifications,
-    setNotifications
-  } = React.useContext(NotificationsContext);
-  return {
-    isLoading,
-    setLoading,
-    notifications,
-    setNotifications
-  };
+  return React.useContext(NotificationsContext);
 };
 
 // src/NotificationsBox.tsx
-import * as React2 from "react";
-import { Button, Flex as Flex2, Stack } from "@ttoss/ui";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var NotificationBoxWrapper = ({
-  direction,
-  notifications,
-  children
-}) => {
-  const sx = {
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "md",
-    marginTop: !notifications || Array.isArray(notifications) && !notifications.length ? 0 : "2xl"
-  };
-  return direction === "row" ? /* @__PURE__ */jsx2(Flex2, {
-    sx,
-    children
-  }) : /* @__PURE__ */jsx2(Stack, {
-    sx,
-    children
-  });
-};
-var resolveNotifications = notifications => {
-  if (!Array.isArray(notifications)) return notifications;
-  const keyedNotifications = new Map(notifications.filter(notification => {
-    return notification.key;
-  }).map(notification => {
-    return [notification?.key, notification];
-  })).values();
-  const nonKeyedNotifications = notifications.filter(notification => {
-    return !notification.key;
-  }).map((notification, index) => {
-    return {
-      ...notification,
-      key: index.toString()
-    };
-  });
-  return Array.from(keyedNotifications).concat(nonKeyedNotifications);
-};
-var NotificationsBox = ({
-  direction = "row"
-}) => {
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NotificationsBox = props => {
   const {
-    setNotifications,
-    notifications
+    notifications,
+    removeNotification,
+    defaultViewType
   } = useNotifications();
-  if (!notifications) {
-    return null;
-  }
-  const renderNotifications = resolveNotifications(notifications);
-  const ButtonMemoized = React2.memo(({
-    notification: {
-      key,
-      type,
-      message
+  const boxNotifications = props.notifications || notifications?.filter(notification => {
+    if (notification.viewType !== "box" && defaultViewType !== "box") {
+      return false;
     }
-  }) => {
-    return /* @__PURE__ */jsx2(Button, {
-      sx: {
-        backgroundColor: type === "error" ? "danger" : "positive"
-      },
-      onClick: () => {
-        if (Array.isArray(renderNotifications) && renderNotifications.length > 1) {
-          return setNotifications(renderNotifications.filter(notification => {
-            return notification.key !== key;
-          }));
-        }
-        return setNotifications(void 0);
-      },
-      rightIcon: "close",
-      leftIcon: type === "error" ? "warning" : void 0,
-      children: message
-    });
+    if (!props.id && notification.boxId) {
+      return false;
+    }
+    if (!props.id && !notification.boxId) {
+      return true;
+    }
+    return notification.boxId === props.id;
   });
-  ButtonMemoized.displayName = "ButtonMemoized";
-  return /* @__PURE__ */jsx2(NotificationBoxWrapper, {
-    ...{
-      notifications,
-      direction
+  const hasBoxNotifications = Array.isArray(boxNotifications);
+  if (!hasBoxNotifications) {
+    return null;
+  }
+  return /* @__PURE__ */jsx3(Stack, {
+    sx: {
+      width: "full",
+      gap: "1"
     },
-    children: Array.isArray(renderNotifications) ? renderNotifications.map(notification => {
-      return /* @__PURE__ */jsx2(ButtonMemoized, {
-        notification
-      }, notification.key);
-    }) : /* @__PURE__ */jsx2(ButtonMemoized, {
-      notification: renderNotifications
+    children: boxNotifications.map(notification => {
+      return /* @__PURE__ */jsx3(NotificationCard, {
+        type: notification.type,
+        title: notification.title,
+        message: notification.message,
+        onClose: () => {
+          if (notification.id) {
+            removeNotification(notification.id);
+          }
+        }
+      }, notification.id);
     })
   });
 };
-
-// src/NotificationsModal.tsx
-import { CloseButton } from "@ttoss/ui";
-import { Modal } from "@ttoss/components/Modal";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var NotificationsModal = () => {
-  const {
-    notifications,
-    setNotifications
-  } = useNotifications();
-  return /* @__PURE__ */jsxs2(Modal, {
-    isOpen: !!notifications,
-    style: {
-      content: {
-        minWidth: "30%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center"
-      }
-    },
-    children: [/* @__PURE__ */jsx3(CloseButton, {
-      sx: {
-        alignSelf: "flex-end"
-      },
-      onClick: () => {
-        setNotifications(void 0);
-      }
-    }), /* @__PURE__ */jsx3(NotificationsBox, {
-      direction: "column"
-    })]
-  });
-};
-export { NotificationsBox, NotificationsModal, NotificationsProvider, useNotifications };
+export { NotificationsBox, NotificationsProvider, toast, useNotifications };

package/dist/index.d.ts

@@ -1,27 +1,37 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToastOptions, ToastContainerProps } from '@ttoss/components/Toast';
+export { toast } from '@ttoss/components/Toast';
 import * as React from 'react';
 
-type NotifyParams = {
-    key?: string;
-    message: 'string' | React.ReactNode;
-    type: 'success' | 'error' | 'warning' | 'info';
+type ViewType = 'toast' | 'modal' | 'box';
+type Notification = {
+    id?: string | number;
+    title?: string;
+    message: string;
+    type: 'warning' | 'error' | 'info' | 'success';
+    viewType?: ViewType;
+    toast?: ToastOptions;
+    boxId?: string | number;
 };
 type NotificationsProviderProps = {
     children: React.ReactNode;
-    enableNotificationBox?: boolean;
+    defaultViewType?: ViewType;
+    toast?: ToastContainerProps;
 };
-declare const NotificationsProvider: ({ children, enableNotificationBox, }: NotificationsProviderProps) => react_jsx_runtime.JSX.Element;
+declare const NotificationsProvider: (props: NotificationsProviderProps) => react_jsx_runtime.JSX.Element;
 declare const useNotifications: () => {
     isLoading: boolean;
     setLoading: (arg: boolean) => void;
-    notifications: NotifyParams | NotifyParams[] | undefined;
-    setNotifications: (args: NotifyParams | NotifyParams[] | undefined) => void;
+    defaultViewType: ViewType;
+    notifications?: Notification[];
+    addNotification(notification: Notification | Notification[]): void;
+    removeNotification(id: string | number): void;
+    clearNotifications(): void;
 };
 
-declare const NotificationsBox: ({ direction, }: {
-    direction?: "row" | "column";
+declare const NotificationsBox: (props: {
+    id?: string | number;
+    notifications?: Notification[] | undefined;
 }) => react_jsx_runtime.JSX.Element | null;
 
-declare const NotificationsModal: () => react_jsx_runtime.JSX.Element;
-
-export { NotificationsBox, NotificationsModal, NotificationsProvider, type NotificationsProviderProps, type NotifyParams, useNotifications };
+export { type Notification, NotificationsBox, NotificationsProvider, type NotificationsProviderProps, useNotifications };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "1.24.72",
+  "version": "2.1.1",
   "description": "ttoss notifications module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,8 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.0.24",
-    "@ttoss/ui": "^5.1.6",
+    "@ttoss/components": "^2.1.1",
+    "@ttoss/ui": "^5.2.0",
     "@ttoss/react-icons": "^0.4.9"
   },
   "devDependencies": {
@@ -34,11 +34,11 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/components": "^2.0.24",
+    "@ttoss/components": "^2.1.1",
     "@ttoss/config": "^1.35.2",
-    "@ttoss/react-icons": "^0.4.9",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.1.6"
+    "@ttoss/ui": "^5.2.0",
+    "@ttoss/react-icons": "^0.4.9"
   },
   "keywords": [
     "React",