@ttoss/react-notifications 1.22.6 → 1.22.8

package/README.md

@@ -52,3 +52,28 @@ const Component = () => {
   );
 };
 ```
+
+### Modal
+
+This modules loads your notification in a Modal. Just put a container under a `NotificationsProvider` and you are ready to go.
+
+```tsx
+import { useNotifications } from '@ttoss/react-notifications';
+
+const Component = () => {
+  const { setNotifications } = useNotifications();
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          setNotifications({ message: "I'm a notification", type: 'info' })
+        }
+      >
+        Click Me!
+      </button>
+      <NotificationsModal />
+    </div>
+  );
+};
+```

package/dist/esm/index.js

@@ -52,18 +52,93 @@ var useNotifications = () => {
   };
 };
 
-// src/NotificationBox.tsx
-import { Box } from "@ttoss/ui";
+// 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 NotificationBox = () => {
+var NotificationBoxWrapper = ({
+  direction,
+  notifications,
+  children
+}) => {
+  const sx = {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "md",
+    marginTop: !notifications || Array.isArray(notifications) && !notifications.length ? 0 : "2xl"
+  };
+  return direction === "flex" ? /* @__PURE__ */jsx2(Flex2, {
+    sx,
+    children
+  }) : /* @__PURE__ */jsx2(Stack, {
+    sx,
+    children
+  });
+};
+var NotificationsBox = ({
+  direction = "flex"
+}) => {
   const {
+    setNotifications,
     notifications
   } = useNotifications();
   if (!notifications) {
     return null;
   }
-  return /* @__PURE__ */jsx2(Box, {
-    children: JSON.stringify(notifications, null, 2)
+  const ButtonMemoized = /*#__PURE__*/React2.memo(({
+    message,
+    type
+  }) => {
+    return /* @__PURE__ */jsx2(Button, {
+      sx: {
+        backgroundColor: type === "error" ? "danger" : "positive"
+      },
+      onClick: () => {
+        if (Array.isArray(notifications) && notifications.length > 1) {
+          return setNotifications(notifications.filter(notification => {
+            return notification.message !== message;
+          }));
+        }
+        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(notifications) ? notifications.map(notification => {
+      return /* @__PURE__ */jsx2(ButtonMemoized, {
+        ...notification
+      }, JSON.stringify(notification));
+    }) : /* @__PURE__ */jsx2(ButtonMemoized, {
+      ...notifications
+    })
+  });
+};
+
+// src/NotificationsModal.tsx
+import { Modal } from "@ttoss/components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NotificationsModal = () => {
+  const {
+    notifications
+  } = useNotifications();
+  return /* @__PURE__ */jsx3(Modal, {
+    isOpen: !!notifications,
+    style: {
+      content: {
+        minWidth: "30%"
+      }
+    },
+    children: /* @__PURE__ */jsx3(NotificationsBox, {
+      direction: "stack"
+    })
   });
 };
-export { NotificationBox, NotificationsProvider, useNotifications };
+export { NotificationsBox, NotificationsModal, NotificationsProvider, useNotifications };

package/dist/index.d.ts

@@ -13,9 +13,13 @@ declare const useNotifications: () => {
     isLoading: boolean;
     setLoading: (arg: boolean) => void;
     notifications: NotifyParams | NotifyParams[] | undefined;
-    setNotifications: (args: NotifyParams | NotifyParams[]) => void;
+    setNotifications: (args: NotifyParams | NotifyParams[] | undefined) => void;
 };
 
-declare const NotificationBox: () => JSX.Element | null;
+declare const NotificationsBox: ({ direction, }: {
+    direction?: "flex" | "stack" | undefined;
+}) => JSX.Element | null;
 
-export { NotificationBox, NotificationsProvider, NotificationsProviderProps, useNotifications };
+declare const NotificationsModal: () => JSX.Element;
+
+export { NotificationsBox, NotificationsModal, NotificationsProvider, NotificationsProviderProps, NotifyParams, useNotifications };

package/dist/index.js

@@ -38,7 +38,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  NotificationBox: () => NotificationBox,
+  NotificationsBox: () => NotificationsBox,
+  NotificationsModal: () => NotificationsModal,
   NotificationsProvider: () => NotificationsProvider,
   useNotifications: () => useNotifications
 });
@@ -96,23 +97,99 @@ var useNotifications = () => {
   };
 };
 
-// src/NotificationBox.tsx
+// src/NotificationsBox.tsx
+var React2 = __toESM(require("react"));
 var import_ui2 = require("@ttoss/ui");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var NotificationBox = () => {
+var NotificationBoxWrapper = ({
+  direction,
+  notifications,
+  children
+}) => {
+  const sx = {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "md",
+    marginTop: !notifications || Array.isArray(notifications) && !notifications.length ? 0 : "2xl"
+  };
+  return direction === "flex" ? /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+    sx,
+    children
+  }) : /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Stack, {
+    sx,
+    children
+  });
+};
+var NotificationsBox = ({
+  direction = "flex"
+}) => {
   const {
+    setNotifications,
     notifications
   } = useNotifications();
   if (!notifications) {
     return null;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
-    children: JSON.stringify(notifications, null, 2)
+  const ButtonMemoized = React2.memo(({
+    message,
+    type
+  }) => {
+    return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Button, {
+      sx: {
+        backgroundColor: type === "error" ? "danger" : "positive"
+      },
+      onClick: () => {
+        if (Array.isArray(notifications) && notifications.length > 1) {
+          return setNotifications(notifications.filter(notification => {
+            return notification.message !== message;
+          }));
+        }
+        return setNotifications(void 0);
+      },
+      rightIcon: "close",
+      leftIcon: type === "error" ? "warning" : void 0,
+      children: message
+    });
+  });
+  ButtonMemoized.displayName = "ButtonMemoized";
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(NotificationBoxWrapper, {
+    ...{
+      notifications,
+      direction
+    },
+    children: Array.isArray(notifications) ? notifications.map(notification => {
+      return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(ButtonMemoized, {
+        ...notification
+      }, JSON.stringify(notification));
+    }) : /* @__PURE__ */(0, import_jsx_runtime2.jsx)(ButtonMemoized, {
+      ...notifications
+    })
+  });
+};
+
+// src/NotificationsModal.tsx
+var import_components = require("@ttoss/components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NotificationsModal = () => {
+  const {
+    notifications
+  } = useNotifications();
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_components.Modal, {
+    isOpen: !!notifications,
+    style: {
+      content: {
+        minWidth: "30%"
+      }
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(NotificationsBox, {
+      direction: "stack"
+    })
   });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  NotificationBox,
+  NotificationsBox,
+  NotificationsModal,
   NotificationsProvider,
   useNotifications
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "1.22.6",
+  "version": "1.22.8",
   "description": "ttoss notifications module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",

package/src/NotificationsBox.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Button, Flex, Stack } from '@ttoss/ui';
+import { type NotifyParams, useNotifications } from './Provider';
+
+const NotificationBoxWrapper = ({
+  direction,
+  notifications,
+  children,
+}: React.PropsWithChildren<{
+  direction: 'flex' | 'stack';
+  notifications: NotifyParams | NotifyParams[] | undefined;
+}>) => {
+  const sx = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 'md',
+    marginTop:
+      !notifications || (Array.isArray(notifications) && !notifications.length)
+        ? 0
+        : '2xl',
+  };
+
+  return direction === 'flex' ? (
+    <Flex sx={sx}>{children}</Flex>
+  ) : (
+    <Stack sx={sx}>{children}</Stack>
+  );
+};
+
+export const NotificationsBox = ({
+  direction = 'flex',
+}: {
+  direction?: 'flex' | 'stack';
+}) => {
+  const { setNotifications, notifications } = useNotifications();
+
+  if (!notifications) {
+    return null;
+  }
+
+  const ButtonMemoized = React.memo(({ message, type }: NotifyParams) => {
+    return (
+      <Button
+        sx={{
+          backgroundColor: type === 'error' ? 'danger' : 'positive',
+        }}
+        onClick={() => {
+          if (Array.isArray(notifications) && notifications.length > 1) {
+            return setNotifications(
+              notifications.filter((notification) => {
+                return notification.message !== message;
+              })
+            );
+          }
+          return setNotifications(undefined);
+        }}
+        rightIcon="close"
+        leftIcon={type === 'error' ? 'warning' : undefined}
+      >
+        {message}
+      </Button>
+    );
+  });
+
+  ButtonMemoized.displayName = 'ButtonMemoized';
+
+  return (
+    <NotificationBoxWrapper {...{ notifications, direction }}>
+      {Array.isArray(notifications) ? (
+        notifications.map((notification) => {
+          return (
+            <ButtonMemoized
+              key={JSON.stringify(notification)}
+              {...notification}
+            />
+          );
+        })
+      ) : (
+        <ButtonMemoized {...notifications} />
+      )}
+    </NotificationBoxWrapper>
+  );
+};

package/src/NotificationsModal.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Modal } from '@ttoss/components';
+import { NotificationsBox } from './NotificationsBox';
+import { useNotifications } from './Provider';
+
+export const NotificationsModal = () => {
+  const { notifications } = useNotifications();
+
+  return (
+    <Modal isOpen={!!notifications} style={{ content: { minWidth: '30%' } }}>
+      <NotificationsBox direction="stack" />
+    </Modal>
+  );
+};

package/src/Provider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Flex, InfiniteLinearProgress } from '@ttoss/ui';
 
-type NotifyParams = {
+export type NotifyParams = {
   message: 'string' | React.ReactNode;
   type: 'success' | 'error' | 'warning' | 'info';
 };
@@ -9,7 +9,7 @@ type NotifyParams = {
 const NotificationsContext = React.createContext<{
   isLoading: boolean;
   setLoading: (arg: boolean) => void;
-  setNotifications: (args: NotifyParams | NotifyParams[]) => void;
+  setNotifications: (args: NotifyParams | NotifyParams[] | undefined) => void;
   notifications?: NotifyParams | NotifyParams[];
   enableNotificationBox?: boolean;
 }>({

package/src/index.ts

@@ -1,6 +1,8 @@
 export {
   NotificationsProvider,
   useNotifications,
-  NotificationsProviderProps,
+  type NotificationsProviderProps,
+  type NotifyParams,
 } from './Provider';
-export { NotificationBox } from './NotificationBox';
+export { NotificationsBox } from './NotificationsBox';
+export { NotificationsModal } from './NotificationsModal';

package/src/NotificationBox.tsx

@@ -1,12 +0,0 @@
-import { Box } from '@ttoss/ui';
-import { useNotifications } from './Provider';
-
-export const NotificationBox = () => {
-  const { notifications } = useNotifications();
-
-  if (!notifications) {
-    return null;
-  }
-
-  return <Box>{JSON.stringify(notifications, null, 2)}</Box>;
-};