@ttoss/react-notifications 1.24.56 → 1.24.57

package/dist/esm/index.js

@@ -0,0 +1,177 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/Provider.tsx
+import * as React from "react";
+import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsContext = React.createContext({
+  isLoading: false,
+  setLoading: () => {
+    return void 0;
+  },
+  setNotifications: () => {
+    return void 0;
+  }
+});
+var NotificationsProvider = ({
+  children,
+  enableNotificationBox
+}) => {
+  const [isLoading, setLoading] = React.useState(false);
+  const [notifications, setNotifications] = React.useState();
+  return /* @__PURE__ */jsxs(NotificationsContext.Provider, {
+    value: {
+      isLoading,
+      setLoading,
+      setNotifications,
+      notifications,
+      enableNotificationBox
+    },
+    children: [isLoading && /* @__PURE__ */jsx(Flex, {
+      sx: {
+        position: "absolute",
+        width: "100%",
+        top: 0
+      },
+      children: /* @__PURE__ */jsx(InfiniteLinearProgress, {})
+    }), children]
+  });
+};
+var useNotifications = () => {
+  const {
+    isLoading,
+    setLoading,
+    notifications,
+    setNotifications
+  } = React.useContext(NotificationsContext);
+  return {
+    isLoading,
+    setLoading,
+    notifications,
+    setNotifications
+  };
+};
+
+// 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"
+}) => {
+  const {
+    setNotifications,
+    notifications
+  } = useNotifications();
+  if (!notifications) {
+    return null;
+  }
+  const renderNotifications = resolveNotifications(notifications);
+  const ButtonMemoized = React2.memo(({
+    notification: {
+      key,
+      type,
+      message
+    }
+  }) => {
+    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
+    });
+  });
+  ButtonMemoized.displayName = "ButtonMemoized";
+  return /* @__PURE__ */jsx2(NotificationBoxWrapper, {
+    ...{
+      notifications,
+      direction
+    },
+    children: Array.isArray(renderNotifications) ? renderNotifications.map(notification => {
+      return /* @__PURE__ */jsx2(ButtonMemoized, {
+        notification
+      }, notification.key);
+    }) : /* @__PURE__ */jsx2(ButtonMemoized, {
+      notification: renderNotifications
+    })
+  });
+};
+
+// 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 };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type NotifyParams = {
+    key?: string;
+    message: 'string' | React.ReactNode;
+    type: 'success' | 'error' | 'warning' | 'info';
+};
+type NotificationsProviderProps = {
+    children: React.ReactNode;
+    enableNotificationBox?: boolean;
+};
+declare const NotificationsProvider: ({ children, enableNotificationBox, }: 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;
+};
+
+declare const NotificationsBox: ({ direction, }: {
+    direction?: "row" | "column";
+}) => react_jsx_runtime.JSX.Element | null;
+
+declare const NotificationsModal: () => react_jsx_runtime.JSX.Element;
+
+export { NotificationsBox, NotificationsModal, NotificationsProvider, type NotificationsProviderProps, type NotifyParams, useNotifications };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "1.24.56",
+  "version": "1.24.57",
   "description": "ttoss notifications module for React apps.",
   "author": "ttoss",
   "contributors": [
@@ -25,20 +25,20 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.0.6",
-    "@ttoss/components": "^2.0.8",
-    "@ttoss/react-icons": "^0.4.2"
+    "@ttoss/components": "^2.0.9",
+    "@ttoss/ui": "^5.0.7",
+    "@ttoss/react-icons": "^0.4.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.7",
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/test-utils": "^2.1.15",
-    "@ttoss/components": "^2.0.8",
-    "@ttoss/ui": "^5.0.6",
-    "@ttoss/react-icons": "^0.4.2",
-    "@ttoss/config": "^1.33.0"
+    "@ttoss/config": "^1.34.0",
+    "@ttoss/test-utils": "^2.1.16",
+    "@ttoss/components": "^2.0.9",
+    "@ttoss/react-icons": "^0.4.3",
+    "@ttoss/ui": "^5.0.7"
   },
   "keywords": [
     "React",