@novu/react 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,145 @@
+# Novu's React SDK for building custom inbox notification experiences.
+
+Novu provides the `@novu/react` a React library that helps to add a fully functioning Inbox to your web application in minutes. Let's do a quick recap on how you can easily use it in your application.
+See full documentation [here](https://docs.novu.co/inbox/react/get-started).
+
+## Installation
+
+- Install `@novu/react` npm package in your react app
+
+```bash
+npm install @novu/react
+```
+
+## Getting Started
+
+- Add the below code in the app.tsx file
+
+```jsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+    />
+  );
+}
+```
+
+## 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/react';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        backendUrl: 'YOUR_BACKEND_URL',
+        socketUrl: 'YOUR_SOCKET_URL',
+        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/react';
+
+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/react';
+
+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

package/dist/client/index.d.mts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+export { Notification } from '@novu/js/ui';
+
+type BellRenderProps = ({ unreadCount }: {
+    unreadCount: number;
+}) => React$1.ReactNode;
+type BellProps = {
+    children?: never | BellRenderProps;
+};
+declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
+
+type NotificationsRenderProps = (args: {
+    notification: Notification;
+}) => React.ReactNode;
+type DefaultInboxProps = {
+    open?: boolean;
+    renderNotification?: (args: {
+        notification: Notification;
+    }) => React.ReactNode;
+    renderBell?: ({ unreadCount }: {
+        unreadCount: number;
+    }) => React.ReactNode;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+type BaseProps = BaseNovuUIOptions;
+type DefaultProps = BaseProps & DefaultInboxProps & {
+    children?: never;
+};
+type WithChildrenProps = BaseProps & {
+    children: React.ReactNode;
+};
+
+type InboxProps = DefaultProps | WithChildrenProps;
+declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+
+declare const Preferences: () => react_jsx_runtime.JSX.Element;
+
+type NotificationProps = {
+    children?: never | NotificationsRenderProps;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+declare const Notifications: React$1.MemoExoticComponent<({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => react_jsx_runtime.JSX.Element>;
+
+export { type BaseProps, Bell, type BellProps, type BellRenderProps, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };

package/dist/client/index.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+export { Notification } from '@novu/js/ui';
+
+type BellRenderProps = ({ unreadCount }: {
+    unreadCount: number;
+}) => React$1.ReactNode;
+type BellProps = {
+    children?: never | BellRenderProps;
+};
+declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
+
+type NotificationsRenderProps = (args: {
+    notification: Notification;
+}) => React.ReactNode;
+type DefaultInboxProps = {
+    open?: boolean;
+    renderNotification?: (args: {
+        notification: Notification;
+    }) => React.ReactNode;
+    renderBell?: ({ unreadCount }: {
+        unreadCount: number;
+    }) => React.ReactNode;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+type BaseProps = BaseNovuUIOptions;
+type DefaultProps = BaseProps & DefaultInboxProps & {
+    children?: never;
+};
+type WithChildrenProps = BaseProps & {
+    children: React.ReactNode;
+};
+
+type InboxProps = DefaultProps | WithChildrenProps;
+declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+
+declare const Preferences: () => react_jsx_runtime.JSX.Element;
+
+type NotificationProps = {
+    children?: never | NotificationsRenderProps;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+declare const Notifications: React$1.MemoExoticComponent<({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => react_jsx_runtime.JSX.Element>;
+
+export { type BaseProps, Bell, type BellProps, type BellRenderProps, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };

package/dist/client/index.js

@@ -0,0 +1,244 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Bell.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// src/utils/createContextAndHook.ts
+
+function assertContextExists(contextVal, msgOrCtx) {
+  if (!contextVal) {
+    throw typeof msgOrCtx === "string" ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);
+  }
+}
+var createContextAndHook = (displayName, options) => {
+  const { assertCtxFn = assertContextExists } = options || {};
+  const Ctx = _react2.default.createContext(void 0);
+  Ctx.displayName = displayName;
+  const useCtx = () => {
+    const ctx = _react2.default.useContext(Ctx);
+    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);
+    return ctx.value;
+  };
+  const useCtxWithoutGuarantee = () => {
+    const ctx = _react2.default.useContext(Ctx);
+    return ctx ? ctx.value : {};
+  };
+  return [Ctx, useCtx, useCtxWithoutGuarantee];
+};
+
+// src/context/RenderContext.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var [RendererContext, useRendererContext] = createContextAndHook("RendererContext");
+var RendererProvider = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RendererContext.Provider, { value: { value: props.value }, children: props.children });
+};
+
+// src/components/Mounter.tsx
+
+
+function Mounter({ mount }) {
+  const ref = _react2.default.useRef(null);
+  _react2.default.useEffect(() => {
+    let unmount;
+    const element = ref.current;
+    if (element && mount) {
+      const possibleUnmount = mount(element);
+      if (possibleUnmount) {
+        unmount = possibleUnmount;
+      }
+    }
+    return () => {
+      if (element && unmount) {
+        unmount(element);
+      }
+    };
+  }, [ref, mount]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref });
+}
+
+// src/components/Bell.tsx
+
+var Bell = _react2.default.memo((props) => {
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = _react2.default.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Bell",
+        element,
+        props: props.children ? { mountBell: (el, { unreadCount }) => mountElement(el, _optionalChain([props, 'access', _ => _.children, 'optionalCall', _2 => _2({ unreadCount })])) } : void 0
+      });
+    },
+    [props.children]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+});
+
+// src/components/Inbox.tsx
+
+
+// src/components/Renderer.tsx
+
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var _ui = require('@novu/js/ui');
+
+// src/hooks/useDataRef.ts
+
+var useDataRef = (data) => {
+  const ref = _react.useRef.call(void 0, data);
+  ref.current = data;
+  return ref;
+};
+
+// src/components/Renderer.tsx
+
+var Renderer = ({ options, children }) => {
+  const optionsRef = useDataRef(options);
+  const [novuUI, setNovuUI] = _react.useState.call(void 0, );
+  const [mountedElements, setMountedElements] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const mountElement = _react.useCallback.call(void 0, 
+    (el, mountedElement) => {
+      setMountedElements((prev) => {
+        const newMountedElements = new Map(prev);
+        newMountedElements.set(el, mountedElement);
+        return newMountedElements;
+      });
+      return () => {
+        setMountedElements((prev) => {
+          const newMountedElements = new Map(prev);
+          newMountedElements.delete(el);
+          return newMountedElements;
+        });
+      };
+    },
+    [setMountedElements]
+  );
+  _react.useEffect.call(void 0, () => {
+    const novu = new (0, _ui.NovuUI)(optionsRef.current);
+    setNovuUI(novu);
+    return () => {
+      novu.unmount();
+    };
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (!novuUI) {
+      return;
+    }
+    novuUI.updateAppearance(options.appearance);
+    novuUI.updateLocalization(options.localization);
+    novuUI.updateTabs(options.tabs);
+    novuUI.updateOptions(options.options);
+  }, [options]);
+  if (!novuUI) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RendererProvider, { value: { mountElement, novuUI }, children: [
+    [...mountedElements].map(([element, mountedElement]) => {
+      return _reactdom2.default.createPortal(mountedElement, element);
+    }),
+    children
+  ] });
+};
+
+// src/components/Inbox.tsx
+
+var DefaultInbox = ({
+  open,
+  renderNotification,
+  renderBell,
+  onNotificationClick,
+  onPrimaryActionClick,
+  onSecondaryActionClick
+}) => {
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = _react2.default.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Inbox",
+        props: {
+          open,
+          mountNotification: renderNotification ? (el, { notification }) => mountElement(el, renderNotification({ notification })) : void 0,
+          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick
+        },
+        element
+      });
+    },
+    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+};
+var Inbox = _react2.default.memo((props) => {
+  if (isWithChildrenProps(props)) {
+    const { children, ...options2 } = props;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options: options2, children });
+  }
+  const {
+    open,
+    renderNotification,
+    renderBell,
+    onNotificationClick,
+    onPrimaryActionClick,
+    onSecondaryActionClick,
+    ...options
+  } = props;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    DefaultInbox,
+    {
+      open,
+      renderNotification,
+      renderBell,
+      onNotificationClick,
+      onPrimaryActionClick,
+      onSecondaryActionClick
+    }
+  ) });
+});
+function isWithChildrenProps(props) {
+  return "children" in props;
+}
+
+// src/components/Preferences.tsx
+
+
+var Preferences = () => {
+  const { novuUI } = useRendererContext();
+  const mount = _react2.default.useCallback((element) => {
+    return novuUI.mountComponent({
+      name: "Preferences",
+      element
+    });
+  }, []);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+};
+
+// src/components/Notifications.tsx
+
+
+var Notifications = _react2.default.memo(
+  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }) => {
+    const { novuUI, mountElement } = useRendererContext();
+    const mount = _react2.default.useCallback(
+      (element) => {
+        return novuUI.mountComponent({
+          name: "Notifications",
+          element,
+          props: children ? {
+            mountNotification: (el, { notification }) => mountElement(el, _optionalChain([children, 'optionalCall', _3 => _3({ notification })])),
+            onNotificationClick,
+            onPrimaryActionClick,
+            onSecondaryActionClick
+          } : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }
+        });
+      },
+      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+  }
+);
+
+
+
+
+
+exports.Bell = Bell; exports.Inbox = Inbox; exports.Notifications = Notifications; exports.Preferences = Preferences;
+//# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"names":[],"mappings":"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","file":"/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","sourcesContent":[null,"import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n  children?: never | BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: props.children\n          ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n          : undefined,\n      });\n    },\n    [props.children]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = ({\n  open,\n  renderNotification,\n  renderBell,\n  onNotificationClick,\n  onPrimaryActionClick,\n  onSecondaryActionClick,\n}: DefaultInboxProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n            : undefined,\n          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  if (isWithChildrenProps(props)) {\n    const { children, ...options } = props;\n\n    return <Renderer options={options}>{children}</Renderer>;\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    ...options\n  } = props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n  children?: never | NotificationsRenderProps;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n    const { novuUI, mountElement } = useRenderer();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        return novuUI.mountComponent({\n          name: 'Notifications',\n          element,\n          props: children\n            ? {\n                mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n                onNotificationClick,\n                onPrimaryActionClick,\n                onSecondaryActionClick,\n              }\n            : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n        });\n      },\n      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"]}

package/dist/client/index.mjs

@@ -0,0 +1,244 @@
+// src/components/Bell.tsx
+import React3 from "react";
+
+// src/utils/createContextAndHook.ts
+import React from "react";
+function assertContextExists(contextVal, msgOrCtx) {
+  if (!contextVal) {
+    throw typeof msgOrCtx === "string" ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);
+  }
+}
+var createContextAndHook = (displayName, options) => {
+  const { assertCtxFn = assertContextExists } = options || {};
+  const Ctx = React.createContext(void 0);
+  Ctx.displayName = displayName;
+  const useCtx = () => {
+    const ctx = React.useContext(Ctx);
+    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);
+    return ctx.value;
+  };
+  const useCtxWithoutGuarantee = () => {
+    const ctx = React.useContext(Ctx);
+    return ctx ? ctx.value : {};
+  };
+  return [Ctx, useCtx, useCtxWithoutGuarantee];
+};
+
+// src/context/RenderContext.tsx
+import { jsx } from "react/jsx-runtime";
+var [RendererContext, useRendererContext] = createContextAndHook("RendererContext");
+var RendererProvider = (props) => {
+  return /* @__PURE__ */ jsx(RendererContext.Provider, { value: { value: props.value }, children: props.children });
+};
+
+// src/components/Mounter.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Mounter({ mount }) {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    let unmount;
+    const element = ref.current;
+    if (element && mount) {
+      const possibleUnmount = mount(element);
+      if (possibleUnmount) {
+        unmount = possibleUnmount;
+      }
+    }
+    return () => {
+      if (element && unmount) {
+        unmount(element);
+      }
+    };
+  }, [ref, mount]);
+  return /* @__PURE__ */ jsx2("div", { ref });
+}
+
+// src/components/Bell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Bell = React3.memo((props) => {
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = React3.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Bell",
+        element,
+        props: props.children ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) } : void 0
+      });
+    },
+    [props.children]
+  );
+  return /* @__PURE__ */ jsx3(Mounter, { mount });
+});
+
+// src/components/Inbox.tsx
+import React5 from "react";
+
+// src/components/Renderer.tsx
+import { useCallback, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { NovuUI } from "@novu/js/ui";
+
+// src/hooks/useDataRef.ts
+import { useRef } from "react";
+var useDataRef = (data) => {
+  const ref = useRef(data);
+  ref.current = data;
+  return ref;
+};
+
+// src/components/Renderer.tsx
+import { jsxs } from "react/jsx-runtime";
+var Renderer = ({ options, children }) => {
+  const optionsRef = useDataRef(options);
+  const [novuUI, setNovuUI] = useState();
+  const [mountedElements, setMountedElements] = useState(/* @__PURE__ */ new Map());
+  const mountElement = useCallback(
+    (el, mountedElement) => {
+      setMountedElements((prev) => {
+        const newMountedElements = new Map(prev);
+        newMountedElements.set(el, mountedElement);
+        return newMountedElements;
+      });
+      return () => {
+        setMountedElements((prev) => {
+          const newMountedElements = new Map(prev);
+          newMountedElements.delete(el);
+          return newMountedElements;
+        });
+      };
+    },
+    [setMountedElements]
+  );
+  useEffect(() => {
+    const novu = new NovuUI(optionsRef.current);
+    setNovuUI(novu);
+    return () => {
+      novu.unmount();
+    };
+  }, []);
+  useEffect(() => {
+    if (!novuUI) {
+      return;
+    }
+    novuUI.updateAppearance(options.appearance);
+    novuUI.updateLocalization(options.localization);
+    novuUI.updateTabs(options.tabs);
+    novuUI.updateOptions(options.options);
+  }, [options]);
+  if (!novuUI) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(RendererProvider, { value: { mountElement, novuUI }, children: [
+    [...mountedElements].map(([element, mountedElement]) => {
+      return ReactDOM.createPortal(mountedElement, element);
+    }),
+    children
+  ] });
+};
+
+// src/components/Inbox.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DefaultInbox = ({
+  open,
+  renderNotification,
+  renderBell,
+  onNotificationClick,
+  onPrimaryActionClick,
+  onSecondaryActionClick
+}) => {
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = React5.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Inbox",
+        props: {
+          open,
+          mountNotification: renderNotification ? (el, { notification }) => mountElement(el, renderNotification({ notification })) : void 0,
+          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick
+        },
+        element
+      });
+    },
+    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  return /* @__PURE__ */ jsx4(Mounter, { mount });
+};
+var Inbox = React5.memo((props) => {
+  if (isWithChildrenProps(props)) {
+    const { children, ...options2 } = props;
+    return /* @__PURE__ */ jsx4(Renderer, { options: options2, children });
+  }
+  const {
+    open,
+    renderNotification,
+    renderBell,
+    onNotificationClick,
+    onPrimaryActionClick,
+    onSecondaryActionClick,
+    ...options
+  } = props;
+  return /* @__PURE__ */ jsx4(Renderer, { options, children: /* @__PURE__ */ jsx4(
+    DefaultInbox,
+    {
+      open,
+      renderNotification,
+      renderBell,
+      onNotificationClick,
+      onPrimaryActionClick,
+      onSecondaryActionClick
+    }
+  ) });
+});
+function isWithChildrenProps(props) {
+  return "children" in props;
+}
+
+// src/components/Preferences.tsx
+import React6 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Preferences = () => {
+  const { novuUI } = useRendererContext();
+  const mount = React6.useCallback((element) => {
+    return novuUI.mountComponent({
+      name: "Preferences",
+      element
+    });
+  }, []);
+  return /* @__PURE__ */ jsx5(Mounter, { mount });
+};
+
+// src/components/Notifications.tsx
+import React7 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Notifications = React7.memo(
+  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }) => {
+    const { novuUI, mountElement } = useRendererContext();
+    const mount = React7.useCallback(
+      (element) => {
+        return novuUI.mountComponent({
+          name: "Notifications",
+          element,
+          props: children ? {
+            mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),
+            onNotificationClick,
+            onPrimaryActionClick,
+            onSecondaryActionClick
+          } : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }
+        });
+      },
+      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+    );
+    return /* @__PURE__ */ jsx6(Mounter, { mount });
+  }
+);
+export {
+  Bell,
+  Inbox,
+  Notifications,
+  Preferences
+};
+//# sourceMappingURL=index.mjs.map

package/dist/client/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n  children?: never | BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: props.children\n          ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n          : undefined,\n      });\n    },\n    [props.children]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = ({\n  open,\n  renderNotification,\n  renderBell,\n  onNotificationClick,\n  onPrimaryActionClick,\n  onSecondaryActionClick,\n}: DefaultInboxProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n            : undefined,\n          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  if (isWithChildrenProps(props)) {\n    const { children, ...options } = props;\n\n    return <Renderer options={options}>{children}</Renderer>;\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    ...options\n  } = props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n  children?: never | NotificationsRenderProps;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n    const { novuUI, mountElement } = useRenderer();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        return novuUI.mountComponent({\n          name: 'Notifications',\n          element,\n          props: children\n            ? {\n                mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n                onNotificationClick,\n                onPrimaryActionClick,\n                onSecondaryActionClick,\n              }\n            : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n        });\n      },\n      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","options","React","jsx","React","React","jsx","React"]}

package/dist/server/server.d.mts

@@ -0,0 +1,38 @@
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+export { Notification } from '@novu/js/ui';
+
+type NotificationsRenderProps = (args: {
+    notification: Notification;
+}) => React.ReactNode;
+type DefaultInboxProps = {
+    open?: boolean;
+    renderNotification?: (args: {
+        notification: Notification;
+    }) => React.ReactNode;
+    renderBell?: ({ unreadCount }: {
+        unreadCount: number;
+    }) => React.ReactNode;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+type BaseProps = BaseNovuUIOptions;
+type DefaultProps = BaseProps & DefaultInboxProps & {
+    children?: never;
+};
+type WithChildrenProps = BaseProps & {
+    children: React.ReactNode;
+};
+
+/**
+ * Exporting all components from the components folder
+ * as empty functions to fix build errors in SSR
+ * This will be replaced with actual components
+ * when we implement the SSR components in @novu/js/ui
+ */
+declare function Inbox(): void;
+declare function Notifications(): void;
+declare function Preferences(): void;
+declare function Bell(): void;
+
+export { type BaseProps, Bell, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };

package/dist/server/server.d.ts

@@ -0,0 +1,38 @@
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+export { Notification } from '@novu/js/ui';
+
+type NotificationsRenderProps = (args: {
+    notification: Notification;
+}) => React.ReactNode;
+type DefaultInboxProps = {
+    open?: boolean;
+    renderNotification?: (args: {
+        notification: Notification;
+    }) => React.ReactNode;
+    renderBell?: ({ unreadCount }: {
+        unreadCount: number;
+    }) => React.ReactNode;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+};
+type BaseProps = BaseNovuUIOptions;
+type DefaultProps = BaseProps & DefaultInboxProps & {
+    children?: never;
+};
+type WithChildrenProps = BaseProps & {
+    children: React.ReactNode;
+};
+
+/**
+ * Exporting all components from the components folder
+ * as empty functions to fix build errors in SSR
+ * This will be replaced with actual components
+ * when we implement the SSR components in @novu/js/ui
+ */
+declare function Inbox(): void;
+declare function Notifications(): void;
+declare function Preferences(): void;
+declare function Bell(): void;
+
+export { type BaseProps, Bell, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };

package/dist/server/server.js

@@ -0,0 +1,44 @@
+"use strict";
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  Bell: () => Bell,
+  Inbox: () => Inbox,
+  Notifications: () => Notifications,
+  Preferences: () => Preferences
+});
+module.exports = __toCommonJS(server_exports);
+function Inbox() {
+}
+function Notifications() {
+}
+function Preferences() {
+}
+function Bell() {
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bell,
+  Inbox,
+  Notifications,
+  Preferences
+});
+//# sourceMappingURL=server.js.map

package/dist/server/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server.ts"],"sourcesContent":["export * from './utils/types';\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox() {}\nexport function Notifications() {}\nexport function Preferences() {}\nexport function Bell() {}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,QAAQ;AAAC;AAClB,SAAS,gBAAgB;AAAC;AAC1B,SAAS,cAAc;AAAC;AACxB,SAAS,OAAO;AAAC;","names":[]}

package/dist/server/server.mjs

@@ -0,0 +1,16 @@
+// src/server.ts
+function Inbox() {
+}
+function Notifications() {
+}
+function Preferences() {
+}
+function Bell() {
+}
+export {
+  Bell,
+  Inbox,
+  Notifications,
+  Preferences
+};
+//# sourceMappingURL=server.mjs.map

package/dist/server/server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server.ts"],"sourcesContent":["export * from './utils/types';\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox() {}\nexport function Notifications() {}\nexport function Preferences() {}\nexport function Bell() {}\n"],"mappings":";AAOO,SAAS,QAAQ;AAAC;AAClB,SAAS,gBAAgB;AAAC;AAC1B,SAAS,cAAc;AAAC;AACxB,SAAS,OAAO;AAAC;","names":[]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@novu/react",
+  "version": "2.0.0-alpha.0",
+  "repository": "https://github.com/novuhq/novu",
+  "description": "Novu's React SDK for building custom inbox notification experiences",
+  "author": "",
+  "license": "ISC",
+  "main": "dist/server/server.js",
+  "module": "dist/client/index.mjs",
+  "types": "dist/client/index.d.ts",
+  "browser": {
+    "./dist/server/server.js": "./dist/client/index.js",
+    "./dist/server/server.mjs": "./dist/client/index.mjs"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/server/server.js"
+      },
+      "require": {
+        "types": "./dist/server/server.d.ts",
+        "default": "./dist/server/server.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "dist/client/**/*",
+    "dist/server/**/*"
+  ],
+  "sideEffects": false,
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:watch": "tsup --watch",
+    "build": "tsup",
+    "lint": "eslint --ext .ts,.tsx src"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.2.1",
+    "typescript": "4.9.5"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "dependencies": {
+    "@novu/js": "^2.0.0-alpha.0"
+  }
+}