@novu/nextjs 2.5.0

package/README.md

@@ -0,0 +1,145 @@
+# Novu's NextJS SDK for <Inbox />.
+
+Novu provides the `@novu/nextjs` library that helps to add a fully functioning <Inbox /> to your web application in minutes.
+See full documentation [here](https://docs.novu.co/inbox/react/get-started).
+
+## Installation
+
+- Install `@novu/nextjs` npm package in your nextjs app
+
+```bash
+npm install @novu/nextjs
+```
+
+## Getting Started
+
+- Add the below code in the app.tsx file
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+    />
+  );
+}
+```
+
+## Controlled Inbox
+
+You can use the `open` prop to manage the Inbox popover open state.
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <Inbox
+        options={{
+          subscriberId: 'SUBSCRIBER_ID',
+          applicationIdentifier: 'APPLICATION_IDENTIFIER',
+        }}
+        open={isOpen}
+      />
+      <button onClick={() => setOpen(true)}>Open Inbox</button>
+      <button onClick={() => setOpen(false)}>Close Inbox</button>
+    </div>
+  );
+}
+```
+
+## Localization
+
+You can pass the `localization` prop to the Inbox component to change the language of the Inbox.
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+      localization={{
+        'inbox.status.archived': 'Archived',
+        'inbox.status.unread': 'Unread',
+        'inbox.status.options.archived': 'Archived',
+        'inbox.status.options.unread': 'Unread',
+        'inbox.status.options.unreadRead': 'Unread/Read',
+        'inbox.status.unreadRead': 'Unread/Read',
+        'inbox.title': 'Inbox',
+        'notifications.emptyNotice': 'No notifications',
+        locale: 'en-US',
+      }}
+    />
+  );
+}
+```
+
+## HMAC Encryption
+
+When Novu's user adds the Inbox to their application they are required to pass a `subscriberId` which identifies the user's end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.
+
+A malicious actor can access the user feed by accessing the API and passing another `subscriberId` using the public application identifier.
+
+HMAC encryption will make sure that a `subscriberId` is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.
+
+### Enabling HMAC Encryption
+
+In order to enable Hash-Based Message Authentication Codes, you need to visit the admin panel In-App settings page and enable HMAC encryption for your environment.
+
+<Frame caption="How to enable HMAC encryption for In-App Inbox">
+  <img src="/images/notification-center/client/react/get-started/hmac-encryption-enable.png" />
+</Frame>
+
+1. Next step would be to generate an HMAC encrypted subscriberId on your backend:
+
+```jsx
+import { createHmac } from 'crypto';
+
+const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscriberId).digest('hex');
+```
+
+2. Then pass the created HMAC to your client side application forward it to the component:
+
+```jsx
+<Inbox
+  subscriberId={'SUBSCRIBER_ID_PLAIN_VALUE'}
+  subscriberHash={'SUBSCRIBER_ID_HASH_VALUE'}
+  applicationIdentifier={'APPLICATION_IDENTIFIER'}
+/>
+```
+
+> Note: If HMAC encryption is active in In-App provider settings and `subscriberHash`
+> along with `subscriberId` is not provided, then Inbox will not load
+
+## Use your own backend and socket URL
+
+By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
+
+```tsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        backendUrl: 'YOUR_BACKEND_URL',
+        socketUrl: 'YOUR_SOCKET_URL',
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+    />
+  );
+}
+```

package/dist/client/index.d.mts

@@ -0,0 +1,9 @@
+import { InboxProps } from '@novu/react';
+export { BaseProps, Bell, BellProps, BellRenderer, DefaultInboxProps, DefaultProps, InboxContent, InboxContentProps, InboxProps, Notification, NotificationProps, Notifications, NotificationsRenderer, Preferences, WithChildrenProps } from '@novu/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+export * from '@novu/react/hooks';
+
+declare const Inbox: React.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+
+export { Inbox };

package/dist/client/index.d.ts

@@ -0,0 +1,9 @@
+import { InboxProps } from '@novu/react';
+export { BaseProps, Bell, BellProps, BellRenderer, DefaultInboxProps, DefaultProps, InboxContent, InboxContentProps, InboxProps, Notification, NotificationProps, Notifications, NotificationsRenderer, Preferences, WithChildrenProps } from '@novu/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+export * from '@novu/react/hooks';
+
+declare const Inbox: React.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+
+export { Inbox };

package/dist/client/index.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Bell: () => import_react3.Bell,
+  Inbox: () => Inbox,
+  InboxContent: () => import_react3.InboxContent,
+  Notifications: () => import_react3.Notifications,
+  Preferences: () => import_react3.Preferences
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/index.ts
+var import_react3 = require("@novu/react");
+
+// src/components/Inbox.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("@novu/react");
+var import_navigation = require("next/navigation");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Inbox = import_react.default.memo((props) => {
+  const router = (0, import_navigation.useRouter)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Inbox, { routerPush: router.push, ...props });
+});
+
+// src/hooks/index.ts
+var hooks_exports = {};
+__reExport(hooks_exports, require("@novu/react/hooks"));
+
+// src/index.ts
+__reExport(src_exports, hooks_exports, module.exports);
+//# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/index.ts","../../src/components/Inbox.tsx","../../src/hooks/index.ts"],"sourcesContent":["'use client';\n\nexport * from './components';\nexport * from './hooks';\n","'use client';\n\nimport {\n  BaseProps,\n  Bell,\n  BellProps,\n  BellRenderer,\n  DefaultInboxProps,\n  DefaultProps,\n  Inbox,\n  InboxContent,\n  InboxContentProps,\n  InboxProps,\n  Notification,\n  NotificationProps,\n  Notifications,\n  NotificationsRenderer,\n  Preferences,\n  WithChildrenProps,\n} from '@novu/react';\n\nexport * from './Inbox';\n\nexport { Bell, InboxContent, Notifications, Preferences };\n\nexport type {\n  BaseProps,\n  BellProps,\n  BellRenderer,\n  DefaultInboxProps,\n  DefaultProps,\n  InboxContentProps,\n  InboxProps,\n  NotificationProps,\n  NotificationsRenderer,\n  WithChildrenProps,\n  Notification,\n};\n","'use client';\n\nimport React from 'react';\nimport { InboxProps, Inbox as RInbox } from '@novu/react';\nimport { useRouter } from 'next/navigation';\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const router = useRouter();\n\n  return <RInbox routerPush={router.push} {...props} />;\n});\n","'use client';\n\nexport * from '@novu/react/hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,gBAiBO;;;ACjBP,mBAAkB;AAClB,IAAAC,gBAA4C;AAC5C,wBAA0B;AAKjB;AAHF,IAAM,QAAQ,aAAAC,QAAM,KAAK,CAAC,UAAsB;AACrD,QAAM,aAAS,6BAAU;AAEzB,SAAO,4CAAC,cAAAC,OAAA,EAAO,YAAY,OAAO,MAAO,GAAG,OAAO;AACrD,CAAC;;;ACVD;AAEA,0BAAc;;;AHCd,wBAAc,eAHd;","names":["import_react","import_react","React","RInbox"]}

package/dist/client/index.mjs

@@ -0,0 +1,62 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Bell: () => Bell,
+  Inbox: () => Inbox,
+  InboxContent: () => InboxContent,
+  Notifications: () => Notifications,
+  Preferences: () => Preferences
+});
+
+// src/components/index.ts
+import {
+  Bell,
+  InboxContent,
+  Notifications,
+  Preferences
+} from "@novu/react";
+
+// src/components/Inbox.tsx
+import React from "react";
+import { Inbox as RInbox } from "@novu/react";
+import { useRouter } from "next/navigation";
+import { jsx } from "react/jsx-runtime";
+var Inbox = React.memo((props) => {
+  const router = useRouter();
+  return /* @__PURE__ */ jsx(RInbox, { routerPush: router.push, ...props });
+});
+
+// src/hooks/index.ts
+var hooks_exports = {};
+__reExport(hooks_exports, hooks_star);
+import * as hooks_star from "@novu/react/hooks";
+
+// src/index.ts
+__reExport(src_exports, hooks_exports);
+export {
+  Bell,
+  Inbox,
+  InboxContent,
+  Notifications,
+  Preferences
+};
+//# sourceMappingURL=index.mjs.map

package/dist/client/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/index.ts","../../src/components/Inbox.tsx","../../src/hooks/index.ts"],"sourcesContent":["'use client';\n\nexport * from './components';\nexport * from './hooks';\n","'use client';\n\nimport {\n  BaseProps,\n  Bell,\n  BellProps,\n  BellRenderer,\n  DefaultInboxProps,\n  DefaultProps,\n  Inbox,\n  InboxContent,\n  InboxContentProps,\n  InboxProps,\n  Notification,\n  NotificationProps,\n  Notifications,\n  NotificationsRenderer,\n  Preferences,\n  WithChildrenProps,\n} from '@novu/react';\n\nexport * from './Inbox';\n\nexport { Bell, InboxContent, Notifications, Preferences };\n\nexport type {\n  BaseProps,\n  BellProps,\n  BellRenderer,\n  DefaultInboxProps,\n  DefaultProps,\n  InboxContentProps,\n  InboxProps,\n  NotificationProps,\n  NotificationsRenderer,\n  WithChildrenProps,\n  Notification,\n};\n","'use client';\n\nimport React from 'react';\nimport { InboxProps, Inbox as RInbox } from '@novu/react';\nimport { useRouter } from 'next/navigation';\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const router = useRouter();\n\n  return <RInbox routerPush={router.push} {...props} />;\n});\n","'use client';\n\nexport * from '@novu/react/hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA;AAAA,EAEE;AAAA,EAMA;AAAA,EAKA;AAAA,EAEA;AAAA,OAEK;;;ACjBP,OAAO,WAAW;AAClB,SAAqB,SAAS,cAAc;AAC5C,SAAS,iBAAiB;AAKjB;AAHF,IAAM,QAAQ,MAAM,KAAK,CAAC,UAAsB;AACrD,QAAM,SAAS,UAAU;AAEzB,SAAO,oBAAC,UAAO,YAAY,OAAO,MAAO,GAAG,OAAO;AACrD,CAAC;;;ACVD;AAEA;AAAA,4BAAc;;;AHCd,wBAAc;","names":[]}

package/dist/hooks/index.d.mts

@@ -0,0 +1 @@
+export * from '@novu/react/hooks';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from '@novu/react/hooks';

package/dist/hooks/index.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/index.ts
+var hooks_exports = {};
+module.exports = __toCommonJS(hooks_exports);
+__reExport(hooks_exports, require("@novu/react/hooks"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["'use client';\n\nexport * from '@novu/react/hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAEA,0BAAc,8BAFd;","names":[]}

package/dist/hooks/index.mjs

@@ -0,0 +1,5 @@
+"use client";
+
+// src/hooks/index.ts
+export * from "@novu/react/hooks";
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["'use client';\n\nexport * from '@novu/react/hooks';\n"],"mappings":";;;AAEA,cAAc;","names":[]}

package/dist/themes/index.d.mts

@@ -0,0 +1 @@
+export * from '@novu/react/themes';

package/dist/themes/index.d.ts

@@ -0,0 +1 @@
+export * from '@novu/react/themes';

package/dist/themes/index.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/themes/index.ts
+var themes_exports = {};
+module.exports = __toCommonJS(themes_exports);
+__reExport(themes_exports, require("@novu/react/themes"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/themes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["'use client';\n\nexport * from '@novu/react/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAEA,2BAAc,+BAFd;","names":[]}

package/dist/themes/index.mjs

@@ -0,0 +1,5 @@
+"use client";
+
+// src/themes/index.ts
+export * from "@novu/react/themes";
+//# sourceMappingURL=index.mjs.map

package/dist/themes/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["'use client';\n\nexport * from '@novu/react/themes';\n"],"mappings":";;;AAEA,cAAc;","names":[]}

package/hooks/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/hooks/index.js",
+  "module": "../dist/hooks/index.mjs",
+  "types": "../dist/hooks/index.d.ts"
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@novu/nextjs",
+  "version": "2.5.0",
+  "repository": "https://github.com/novuhq/novu",
+  "description": "Novu's Next.js SDK for building custom inbox notification experiences",
+  "author": "",
+  "license": "ISC",
+  "main": "dist/client/index.js",
+  "module": "dist/client/index.mjs",
+  "types": "dist/client/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/client/index.d.mts",
+        "default": "./dist/client/index.mjs"
+      },
+      "require": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
+      }
+    },
+    "./hooks": {
+      "import": {
+        "types": "./dist/hooks/index.d.mts",
+        "default": "./dist/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/hooks/index.d.ts",
+        "default": "./dist/hooks/index.js"
+      }
+    },
+    "./themes": {
+      "import": {
+        "types": "./dist/themes/index.d.mts",
+        "default": "./dist/themes/index.mjs"
+      },
+      "require": {
+        "types": "./dist/themes/index.d.ts",
+        "default": "./dist/themes/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "dist/client/**/*",
+    "dist/hooks/**/*",
+    "dist/themes/**/*",
+    "hooks/**/*",
+    "themes/**/*"
+  ],
+  "sideEffects": false,
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:watch": "tsup --watch",
+    "build": "tsup && pnpm run check-exports",
+    "lint": "eslint src",
+    "check-exports": "attw --pack ."
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.4",
+    "@types/node": "^20.14.12",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "tsup": "^8.2.1",
+    "typescript": "5.6.2"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "next": ">=13"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@novu/react": "^2.5.0"
+  },
+  "nx": {
+    "tags": ["package:public"]
+  }
+}

package/themes/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/themes/index.js",
+  "module": "../dist/themes/index.mjs",
+  "types": "../dist/themes/index.d.ts"
+}