@notificationapi/react 0.0.27 → 0.0.28

package/README.md

@@ -1,3 +1,25 @@
+[![NotificationAPI](./ReadmeLogo.svg)](https://notificationapi.com)
+
+The React SDK is mainly used for displaying In-App Notifications and allowing users to see and change their Notification Preferences.
+
+# Docs
+
+Please refer to our [documentations](https://docs.notificationapi.com).
+
+# Development
+
+1. Install dependencies:
+
+```
+npm install
+```
+
+2. Run the example application:
+
+```
+npm run dev
+```
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
@@ -20,11 +42,85 @@ export default {
     ecmaVersion: 'latest',
     sourceType: 'module',
     project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+    tsconfigRootDir: __dirname
+  }
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Contributing
+
+We welcome contributions! To ensure smooth collaboration, please follow these steps:
+
+1. **Clone the Repository**
+
+   - Fork the repository to your GitHub account.
+   - Clone it to your local machine:
+
+     ```bash
+     git clone https://github.com/your-username/repo-name.git
+     cd repo-name
+     ```
+
+2. **Create a Branch**
+
+   - Create a new branch for your changes:
+
+     ```bash
+     git checkout -b your-branch-name
+     ```
+
+3. **Make Your Changes**
+
+   - Make your changes in the relevant files.
+   - Thoroughly test your changes to ensure they work as expected.
+
+4. **Versioning**
+
+   - Before committing your changes, update the package version by running:
+
+     ```bash
+     npm version <type>
+     ```
+
+   - **Versioning Types:**
+
+     - **major**: For breaking changes or large-scale features.
+     - **minor**: For adding functionality in a backwards-compatible manner.
+     - **patch**: For backwards-compatible bug fixes or small improvements.
+
+   - For example, to update a patch version:
+
+     ```bash
+     npm version patch
+     ```
+
+5. **Commit and Push**
+
+   - Once you’ve made and tested your changes, commit them with a meaningful message:
+
+     ```bash
+     git add .
+     git commit -m "Describe your changes"
+     ```
+
+   - Push your branch to GitHub:
+
+     ```bash
+     git push origin your-branch-name
+     ```
+
+6. **Submit a Pull Request**
+
+   - Create a pull request (PR) on GitHub.
+   - Provide a clear description of what your changes do.
+   - Link any relevant issues.
+
+7. **Update Documentation**
+   - If your changes affect the documentation, please update it accordingly.
+   - You can find the documentation repository here: [NotificationAPI Docs](https://github.com/notificationapi-com/docs).
+
+Thank you for contributing!

package/dist/components/Notifications/Inbox.js

@@ -6185,7 +6185,7 @@ const us = (e) => {
             data: s,
             height: e.maxHeight,
             itemHeight: 47,
-            itemKey: "id",
+            itemKey: (u) => u[0].id,
             onScroll: (u) => {
               Math.abs(
                 u.currentTarget.scrollHeight - u.currentTarget.scrollTop - e.maxHeight

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,24 +1,25 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { Inbox as l } from "./Inbox.js";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { Inbox as h } from "./Inbox.js";
 import { UnreadBadge as g } from "./UnreadBadge.js";
 import { useState as m, useContext as b } from "react";
 import { NotificationAPIContext as s } from "../Provider/index.js";
 import { NotificationPreferencesPopup as I } from "../Preferences/NotificationPreferencesPopup.js";
 import "../Preferences/PreferenceInput.js";
-import { R as p } from "../../assets/channelUtils.js";
-import { P as S } from "../../assets/index.js";
-import { B as P } from "../../assets/button.js";
+import { R as S } from "../../assets/channelUtils.js";
+import { P } from "../../assets/index.js";
+import { B as C } from "../../assets/button.js";
 const B = (t) => {
-  var a, r, d, u;
-  const [c, o] = m(!1), n = b(s);
+  var a, r, d, c;
+  const [u, o] = m(!1), n = b(s);
   if (!n)
     return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      p,
+      S,
       {
         style: {
-          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
+          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
+          color: t.iconColor || "#000000"
         }
       }
     ),
@@ -28,6 +29,7 @@ const B = (t) => {
     popupHeight: t.popupHeight || 600,
     buttonIconSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
     imageShape: t.imageShape || "circle",
+    iconColor: t.iconColor || "#000000",
     pagination: t.pagination || "INFINITE_SCROLL",
     pageSize: t.pageSize || 10,
     pagePosition: t.pagePosition || "top",
@@ -44,10 +46,10 @@ const B = (t) => {
       button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
     },
     renderers: {
-      notification: (u = t.renderers) == null ? void 0 : u.notification
+      notification: (c = t.renderers) == null ? void 0 : c.notification
     }
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -58,12 +60,12 @@ const B = (t) => {
       },
       children: [
         /* @__PURE__ */ i(
-          S,
+          P,
           {
             autoAdjustOverflow: !0,
             trigger: "click",
             content: /* @__PURE__ */ i(
-              l,
+              h,
               {
                 maxHeight: 500,
                 pagination: e.pagination,
@@ -99,7 +101,7 @@ const B = (t) => {
                     },
                     count: e.count,
                     children: /* @__PURE__ */ i(
-                      P,
+                      C,
                       {
                         icon: e.buttonIcon,
                         style: {
@@ -119,7 +121,7 @@ const B = (t) => {
         /* @__PURE__ */ i(
           I,
           {
-            open: c,
+            open: u,
             onClose: () => o(!1)
           }
         )

package/dist/components/Notifications/NotificationPopup.d.ts

@@ -12,6 +12,7 @@ export type NotificationPopupProps = {
     popupWidth?: number | string;
     popupHeight?: number;
     imageShape?: keyof typeof ImageShape;
+    iconColor?: string;
     pagination?: keyof typeof Pagination;
     pageSize?: number;
     pagePosition?: 'top' | 'bottom';

package/dist/components/Notifications/NotificationPopup.js

@@ -6,20 +6,21 @@ import { useState as b, useContext as I } from "react";
 import { NotificationPreferencesPopup as P } from "../Preferences/NotificationPreferencesPopup.js";
 import "../Preferences/PreferenceInput.js";
 import { Filter as S } from "./interface.js";
-import { R as s } from "../../assets/channelUtils.js";
-import { P as x } from "../../assets/index.js";
-import { B as C } from "../../assets/button.js";
+import { R as x } from "../../assets/channelUtils.js";
+import { P as C } from "../../assets/index.js";
+import { B as s } from "../../assets/button.js";
 const F = (t) => {
-  var a, r, d, u;
-  const [c, o] = b(!1), n = I(p);
+  var a, r, c, d;
+  const [u, o] = b(!1), n = I(p);
   if (!n)
     return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      s,
+      x,
       {
         style: {
-          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
+          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
+          color: t.iconColor || "#000000"
         }
       }
     ),
@@ -29,6 +30,7 @@ const F = (t) => {
     popupHeight: t.popupHeight || 600,
     buttonIconSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
     imageShape: t.imageShape || "circle",
+    iconColor: t.iconColor || "#000000",
     pagination: t.pagination || "INFINITE_SCROLL",
     pageSize: t.pageSize || 10,
     pagePosition: t.pagePosition || "top",
@@ -39,15 +41,15 @@ const F = (t) => {
     header: {
       title: (a = t.header) == null ? void 0 : a.title,
       button1ClickHandler: ((r = t.header) == null ? void 0 : r.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
+      button2ClickHandler: ((c = t.header) == null ? void 0 : c.button2ClickHandler) ?? (() => o(!0))
     },
     renderers: {
-      notification: (u = t.renderers) == null ? void 0 : u.notification
+      notification: (d = t.renderers) == null ? void 0 : d.notification
     }
   };
   return /* @__PURE__ */ h(f, { children: [
     /* @__PURE__ */ i(
-      x,
+      C,
       {
         autoAdjustOverflow: !0,
         trigger: "click",
@@ -90,7 +92,7 @@ const F = (t) => {
                 count: e.count,
                 filter: e.filter,
                 children: /* @__PURE__ */ i(
-                  C,
+                  s,
                   {
                     icon: e.buttonIcon,
                     style: {
@@ -110,7 +112,7 @@ const F = (t) => {
     /* @__PURE__ */ i(
       P,
       {
-        open: c,
+        open: u,
         onClose: () => o(!1)
       }
     )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "scripts": {
     "dev": "vite",