@trycourier/courier-ui-inbox 1.0.0-beta

package/dist/types/courier-inbox-theme-manager.d.ts

@@ -0,0 +1,50 @@
+import { CourierComponentThemeMode, SystemThemeMode } from '@trycourier/courier-ui-core';
+import { CourierInboxTheme } from './courier-inbox-theme';
+export interface CourierInboxThemeSubscription {
+    manager: CourierInboxThemeManager;
+    unsubscribe: () => void;
+}
+export declare class CourierInboxThemeManager {
+    private readonly THEME_CHANGE_EVENT;
+    private _theme;
+    private _lightTheme;
+    private _darkTheme;
+    private _target;
+    private _subscriptions;
+    private _userMode;
+    private _systemMode;
+    private _systemThemeCleanup;
+    setLightTheme(theme: CourierInboxTheme): void;
+    setDarkTheme(theme: CourierInboxTheme): void;
+    constructor(initialTheme: CourierInboxTheme);
+    /**
+     * Get the current system theme
+     */
+    get currentSystemTheme(): SystemThemeMode;
+    /**
+     * Get the current theme
+     */
+    getTheme(): CourierInboxTheme;
+    /**
+     * Update the theme
+     */
+    private updateTheme;
+    /**
+     * Set the theme and notify all listeners
+     */
+    private setTheme;
+    /**
+     * Set the mode and notify all listeners
+     */
+    setMode(mode: CourierComponentThemeMode): void;
+    /**
+     * Subscribe to theme changes
+     * @param {Function} callback - Function to run when the theme changes
+     * @returns {CourierInboxThemeSubscription} - Object with remove method to stop listening
+     */
+    subscribe(callback: (theme: CourierInboxTheme) => void): CourierInboxThemeSubscription;
+    /**
+     * Clean up event listeners
+     */
+    cleanup(): void;
+}

package/dist/types/courier-inbox-theme.d.ts

@@ -0,0 +1,161 @@
+import { SystemThemeMode } from '@trycourier/courier-ui-core';
+export type CourierInboxFont = {
+    family?: string;
+    weight?: string;
+    size?: string;
+    color?: string;
+};
+export type CourierInboxIcon = {
+    color?: string;
+    svg?: string;
+};
+export type CourierInboxFilterItem = {
+    icon?: CourierInboxIcon;
+    text?: string;
+};
+export type CourierInboxUnreadIndicator = {
+    font?: CourierInboxFont;
+    backgroundColor?: string;
+    borderRadius?: string;
+};
+export type CourierInboxIconButton = {
+    icon?: CourierInboxIcon;
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    activeBackgroundColor?: string;
+};
+export type CourierInboxButton = {
+    font?: CourierInboxFont;
+    text?: string;
+    shadow?: string;
+    border?: string;
+    borderRadius?: string;
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    activeBackgroundColor?: string;
+};
+export type CourierInboxMenuButton = CourierInboxIconButton & {
+    unreadIndicator?: CourierInboxUnreadIndicator;
+};
+export type CourierInboxPopup = {
+    backgroundColor?: string;
+    border?: string;
+    borderRadius?: string;
+    shadow?: string;
+    list?: {
+        font?: CourierInboxFont;
+        selectionIcon?: CourierInboxIcon;
+        hoverBackgroundColor?: string;
+        activeBackgroundColor?: string;
+        divider?: string;
+    };
+};
+export type CourierInboxListItem = {
+    unreadIndicatorColor?: string;
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    activeBackgroundColor?: string;
+    title?: CourierInboxFont;
+    subtitle?: CourierInboxFont;
+    time?: CourierInboxFont;
+    archiveIcon?: CourierInboxIcon;
+    divider?: string;
+    actions?: {
+        backgroundColor?: string;
+        hoverBackgroundColor?: string;
+        activeBackgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        shadow?: string;
+        font?: CourierInboxFont;
+    };
+    menu?: {
+        enabled?: boolean;
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        shadow?: string;
+        longPress?: {
+            displayDuration?: number;
+            vibrationDuration?: number;
+        };
+        item?: {
+            hoverBackgroundColor?: string;
+            activeBackgroundColor?: string;
+            borderRadius?: string;
+            read?: CourierInboxIcon;
+            unread?: CourierInboxIcon;
+            archive?: CourierInboxIcon;
+            unarchive?: CourierInboxIcon;
+        };
+    };
+};
+export type CourierInboxSkeletonLoadingState = {
+    animation?: {
+        barColor?: string;
+        barHeight?: string;
+        barBorderRadius?: string;
+        duration?: string;
+    };
+    divider?: string;
+};
+export type CourierInboxInfoState = {
+    title?: {
+        font?: CourierInboxFont;
+        text?: string;
+    };
+    button?: CourierInboxButton;
+};
+export type CourierMenuItem = {
+    icon?: CourierInboxIcon;
+    text?: string;
+};
+export type CourierFilterMenu = {
+    button?: CourierInboxIconButton;
+    inbox?: CourierMenuItem;
+    archive?: CourierMenuItem;
+};
+export type CourierActionMenu = {
+    button?: CourierInboxIconButton;
+    markAllRead?: CourierMenuItem;
+    archiveAll?: CourierMenuItem;
+    archiveRead?: CourierMenuItem;
+};
+export type CourierInboxTheme = {
+    popup?: {
+        button?: CourierInboxMenuButton;
+        window?: {
+            backgroundColor?: string;
+            borderRadius?: string;
+            border?: string;
+            shadow?: string;
+        };
+    };
+    inbox?: {
+        header?: {
+            backgroundColor?: string;
+            shadow?: string;
+            filters?: {
+                font?: CourierInboxFont;
+                inbox?: CourierInboxFilterItem;
+                archive?: CourierInboxFilterItem;
+                unreadIndicator?: CourierInboxUnreadIndicator;
+            };
+            menus?: {
+                popup?: CourierInboxPopup;
+                filters?: CourierFilterMenu;
+                actions?: CourierActionMenu;
+            };
+        };
+        list?: {
+            backgroundColor?: string;
+            item?: CourierInboxListItem;
+        };
+        loading?: CourierInboxSkeletonLoadingState;
+        empty?: CourierInboxInfoState;
+        error?: CourierInboxInfoState;
+    };
+};
+export declare const defaultLightTheme: CourierInboxTheme;
+export declare const defaultDarkTheme: CourierInboxTheme;
+export declare const mergeTheme: (mode: SystemThemeMode, theme: CourierInboxTheme) => CourierInboxTheme;

package/dist/types/factories.d.ts

@@ -0,0 +1,32 @@
+import { InboxAction, InboxMessage } from '../../@trycourier/courier-js/src';
+import { CourierInboxFeedType } from './feed-type';
+export type CourierInboxHeaderFactoryProps = {
+    feedType: CourierInboxFeedType;
+    unreadCount: number;
+    messageCount: number;
+};
+export type CourierInboxStateLoadingFactoryProps = {
+    feedType: CourierInboxFeedType;
+};
+export type CourierInboxStateEmptyFactoryProps = {
+    feedType: CourierInboxFeedType;
+};
+export type CourierInboxStateErrorFactoryProps = {
+    feedType: CourierInboxFeedType;
+    error: Error;
+};
+export type CourierInboxListItemFactoryProps = {
+    message: InboxMessage;
+    index: number;
+};
+export type CourierInboxListItemActionFactoryProps = {
+    message: InboxMessage;
+    action: InboxAction;
+    index: number;
+};
+export type CourierInboxPaginationItemFactoryProps = {
+    feedType: CourierInboxFeedType;
+};
+export type CourierInboxMenuButtonFactoryProps = {
+    unreadCount: number;
+};

package/dist/types/feed-type.d.ts

@@ -0,0 +1 @@
+export type CourierInboxFeedType = 'inbox' | 'archive';

package/dist/types/inbox-data-set.d.ts

@@ -0,0 +1,6 @@
+import { InboxMessage } from '../../@trycourier/courier-js/src';
+export type InboxDataSet = {
+    messages: InboxMessage[];
+    canPaginate: boolean;
+    paginationCursor: string | null;
+};

package/dist/utils/extensions.d.ts

@@ -0,0 +1,7 @@
+import { InboxMessage } from '../../@trycourier/courier-js/src';
+export declare function markAsRead(message: InboxMessage): Promise<void>;
+export declare function markAsUnread(message: InboxMessage): Promise<void>;
+export declare function clickMessage(message: InboxMessage): Promise<void>;
+export declare function archiveMessage(message: InboxMessage): Promise<void>;
+export declare function openMessage(message: InboxMessage): Promise<void>;
+export declare function getMessageTime(message: InboxMessage): string;

package/dist/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function replaceElementInShadowRoot(shadowRoot: ShadowRoot, elementId: string, newElement: HTMLElement): void;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@trycourier/courier-ui-inbox",
+  "version": "1.0.0-beta",
+  "description": "Inbox components for the Courier web UI",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "courier",
+    "ui",
+    "inbox",
+    "typescript",
+    "browser"
+  ],
+  "author": "Courier",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@trycourier/courier-js": "file:../@trycourier/courier-js",
+    "@trycourier/courier-ui-core": "file:../@trycourier/courier-ui-core"
+  },
+  "devDependencies": {
+    "@trycourier/courier-js": "file:../@trycourier/courier-js",
+    "@trycourier/courier-ui-core": "file:../@trycourier/courier-ui-core"
+  }
+}