@notificationapi/react 0.0.1

package/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    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

package/dist/api.d.ts

@@ -0,0 +1 @@
+export declare const api: (endpoint: string, method: "GET" | "POST" | "PATCH", resource: string, clientId: string, userId: string, hashedUserId?: string, data?: any) => Promise<any>;

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

@@ -0,0 +1,17 @@
+import { ImageShape } from './Notification';
+import { NotificationPopupProps } from './NotificationPopup';
+
+export declare enum Pagination {
+    INFINITE_SCROLL = "infinite_scroll",
+    PAGINATED = "paginated"
+}
+type InboxProps = {
+    pagination: keyof typeof Pagination;
+    maxHeight: number;
+    filter: NotificationPopupProps["filter"];
+    imageShape: keyof typeof ImageShape;
+    pageSize: number;
+    pagePosition: NotificationPopupProps["pagePosition"];
+};
+export declare const Inbox: React.FC<InboxProps>;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const InboxHeader: (props: {
+    markAsArchived: (ids: string[] | "ALL") => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+export declare enum ImageShape {
+    square = "square",
+    circle = "circle"
+}
+export declare const Notification: (props: {
+    notification: any;
+    markAsArchived: (ids: string[] | "ALL") => void;
+    markAsClicked: (id: string) => void;
+    imageShape: keyof typeof ImageShape;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { UnreadBadgeProps } from './UnreadBadge';
+
+export type NotificationCounterProps = Omit<UnreadBadgeProps, "count"> & {
+    counting?: UnreadBadgeProps["count"];
+};
+export declare const NotificationCounter: React.FC<PropsWithChildren<NotificationCounterProps>>;

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

@@ -0,0 +1,14 @@
+import { Pagination } from './Inbox';
+import { ImageShape } from './Notification';
+import { Filter } from './NotificationPopup';
+
+export type NotificationFeedProps = {
+    imageShape?: keyof typeof ImageShape;
+    pagination?: keyof typeof Pagination;
+    pageSize?: number;
+    pagePosition?: "top" | "bottom";
+    infiniteScrollHeight?: number;
+    style?: React.CSSProperties;
+    filter?: keyof typeof Filter | ((n: any) => boolean);
+};
+export declare const NotificationFeed: React.FC<NotificationFeedProps>;

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

@@ -0,0 +1,15 @@
+import { NotificationPopupProps } from './NotificationPopup';
+
+export declare enum Position {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right"
+}
+type NotificationLaucherProps = NotificationPopupProps & {
+    position?: keyof typeof Position;
+    offsetX?: number | string;
+    offsetY?: number | string;
+};
+export declare const NotificationLauncher: React.FC<NotificationLaucherProps>;
+export {};

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

@@ -0,0 +1,24 @@
+import { Pagination } from './Inbox';
+import { UnreadBadgeProps } from './UnreadBadge';
+import { ImageShape } from './Notification';
+
+export declare enum Filter {
+    ALL = "ALL",
+    UNARCHIVED = "UNARCHIVED"
+}
+export type NotificationPopupProps = {
+    buttonIconSize?: number;
+    buttonWidth?: number;
+    buttonHeight?: number;
+    popupWidth?: number | string;
+    popupHeight?: number | string;
+    imageShape?: keyof typeof ImageShape;
+    pagination?: keyof typeof Pagination;
+    pageSize?: number;
+    pagePosition?: "top" | "bottom";
+    style?: React.CSSProperties;
+    unreadBadgeProps?: UnreadBadgeProps;
+    count?: UnreadBadgeProps["count"];
+    filter?: keyof typeof Filter | ((n: any) => boolean);
+};
+export declare const NotificationPopup: React.FC<NotificationPopupProps>;

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

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { NotificationPopupProps } from './NotificationPopup';
+
+export type UnreadBadgeProps = {
+    color?: "blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | undefined;
+    overflowCount?: number;
+    dot?: boolean;
+    showZero?: boolean;
+    size?: "default" | "small";
+    style?: React.CSSProperties;
+    count?: keyof typeof COUNT_TYPE | ((notification: any) => boolean);
+    filter?: NotificationPopupProps["filter"];
+};
+export declare enum COUNT_TYPE {
+    COUNT_UNOPENED_NOTIFICATIONS = "COUNT_UNOPENED_NOTIFICATIONS",
+    COUNT_UNARCHIVED_NOTIFICATIONS = "COUNT_UNARCHIVED_NOTIFICATIONS"
+}
+export declare const UnreadBadge: React.FunctionComponent<PropsWithChildren<UnreadBadgeProps>>;

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

@@ -0,0 +1,4 @@
+export { NotificationFeed } from './NotificationFeed';
+export { NotificationPopup } from './NotificationPopup';
+export { NotificationLauncher } from './NotificationLauncher';
+export { NotificationCounter } from './NotificationCounter';

package/dist/components/Preferences/NotificationPreferencesInline.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function NotificationPreferencesInline(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Preferences/NotificationPreferencesPopup.d.ts

@@ -0,0 +1,6 @@
+type NotificationPreferencesPopupProps = {
+    open?: boolean;
+    onClose?: () => void;
+};
+export declare function NotificationPreferencesPopup(props: NotificationPreferencesPopupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Preferences/PreferenceGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type PreferenceGroupProps = {
+    subNotificationId?: string;
+    title: string;
+};
+export declare const PreferenceGroup: React.FC<PreferenceGroupProps>;
+export {};

package/dist/components/Preferences/Preferences.d.ts

@@ -0,0 +1,5 @@
+import { Channels } from '../Provider';
+
+export declare const getChannelLabel: (c: Channels) => string;
+export declare const getChannelIcon: (channel: Channels) => React.ReactElement;
+export declare function Preferences(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Preferences/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationPreferencesPopup } from './NotificationPreferencesPopup';
+export { NotificationPreferencesInline } from './NotificationPreferencesInline';

package/dist/components/Provider/index.d.ts

@@ -0,0 +1,130 @@
+import { default as React, PropsWithChildren } from 'react';
+
+type Props = {
+    clientId: string;
+    userId: string;
+    apiURL?: string;
+    wsURL?: string;
+    initialLoadMaxCount?: number;
+    initialLoadMaxAge?: Date;
+};
+export declare const NOTIFICATION_ACTIONS: {
+    opened: string;
+    clicked: string;
+    archived: string;
+    replied: string;
+    actioned1: string;
+    actioned2: string;
+};
+export declare enum Channels {
+    EMAIL = "EMAIL",
+    INAPP_WEB = "INAPP_WEB",
+    SMS = "SMS",
+    CALL = "CALL",
+    PUSH = "PUSH",
+    WEB_PUSH = "WEB_PUSH"
+}
+export declare enum DeliveryOptions {
+    OFF = "off",
+    INSTANT = "instant",
+    HOURLY = "hourly",
+    DAILY = "daily",
+    WEEKLY = "weekly",
+    MONTHLY = "monthly"
+}
+export interface Notification {
+    envId: string;
+    notificationId: string;
+    title: string;
+    channels: Channels[];
+    enabled: boolean;
+    deduplication?: {
+        duration: number;
+    };
+    throttling?: {
+        max: number;
+        period: number;
+        unit: "seconds" | "minutes" | "hours" | "days" | "months" | "years";
+        forever: boolean;
+        scope: ["userId", "notificationId"];
+    };
+    retention?: number;
+    options?: {
+        [key in Channels]?: {
+            defaultDeliveryOption: DeliveryOptions;
+            [DeliveryOptions.OFF]: {
+                enabled: boolean;
+            };
+            [DeliveryOptions.INSTANT]: {
+                enabled: boolean;
+            };
+            [DeliveryOptions.HOURLY]: {
+                enabled: boolean;
+            };
+            [DeliveryOptions.DAILY]: {
+                enabled: boolean;
+                hour: string;
+            };
+            [DeliveryOptions.WEEKLY]: {
+                enabled: boolean;
+                hour: string;
+                day: string;
+            };
+            [DeliveryOptions.MONTHLY]: {
+                enabled: boolean;
+                hour: string;
+                date: "first" | "last";
+            };
+        };
+    };
+}
+export interface InappNotification {
+    id: string;
+    seen: boolean;
+    title: string;
+    redirectURL?: string;
+    imageURL?: string;
+    date: Date;
+    parameters?: Record<string, unknown>;
+    expDate?: Date;
+    opened?: string;
+    clicked?: string;
+    archived?: string;
+    actioned1?: string;
+    actioned2?: string;
+    replies?: {
+        date: string;
+        message: string;
+    }[];
+}
+export interface Preferences {
+    preferences: {
+        notificationId: string;
+        channel: Channels;
+        delivery: DeliveryOptions;
+        subNotificationId?: string;
+    }[];
+    notifications: {
+        notificationId: string;
+        title: string;
+        channels: Channels[];
+        options: Notification["options"];
+    }[];
+    subNotifications: {
+        notificationId: string;
+        subNotificationId: string;
+        title: string;
+    }[];
+}
+export type Context = {
+    notifications?: InappNotification[];
+    preferences?: Preferences;
+    loadNotifications: (initial?: boolean) => void;
+    markAsOpened: () => void;
+    markAsArchived: (ids: string[] | "ALL") => void;
+    markAsClicked: (id: string) => void;
+    updateDelivery: (notificationId: string, channel: Channels, delivery: DeliveryOptions, subNotificationId?: string) => void;
+};
+export declare const NotificationAPIContext: React.Context<Context | undefined>;
+export declare const NotificatinAPIProvider: React.FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/dist/main.d.ts

@@ -0,0 +1,3 @@
+export { NotificationFeed, NotificationPopup, NotificationLauncher, NotificationCounter, } from './components/Notifications';
+export { NotificationPreferencesInline, NotificationPreferencesPopup, } from './components/Preferences';
+export { NotificatinAPIProvider } from './components/Provider';