notification-kit
Version:
A unified notification library for React + Capacitor apps. One API for push notifications, in-app notifications, and local notifications across Web, iOS, and Android.
330 lines • 9.75 kB
TypeScript
import { ReactNode, CSSProperties } from 'react';
export type InAppNotificationType = 'success' | 'error' | 'warning' | 'info' | 'custom';
export type InAppNotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center';
export type InAppNotificationAnimation = 'slide' | 'fade' | 'pop' | 'bounce' | 'zoom' | 'none';
export interface InAppOptions {
id?: string;
title?: string;
message: string;
type?: InAppNotificationType;
duration?: number;
position?: InAppNotificationPosition;
animation?: InAppNotificationAnimation;
persistent?: boolean;
dismissible?: boolean;
pauseOnHover?: boolean;
showProgressBar?: boolean;
icon?: string | ReactNode;
image?: string;
avatar?: string;
color?: string;
backgroundColor?: string;
borderColor?: string;
textColor?: string;
className?: string;
style?: CSSProperties;
action?: InAppAction;
actions?: InAppAction[];
onShow?: () => void;
onHide?: () => void;
onAction?: (actionId: string) => void;
onDismiss?: () => void;
data?: Record<string, any>;
priority?: InAppPriority;
category?: string;
tags?: string[];
metadata?: Record<string, any>;
sound?: string | boolean;
vibration?: boolean | number[];
badge?: string | number;
interactive?: boolean;
fullScreen?: boolean;
modal?: boolean;
overlay?: boolean;
blur?: boolean;
rtl?: boolean;
accessibility?: InAppAccessibility;
responsive?: InAppResponsive;
theme?: InAppTheme;
layout?: InAppLayout;
content?: InAppContent;
behavior?: InAppBehavior;
}
export interface InAppAction {
id: string;
label: string;
icon?: string | ReactNode;
color?: string;
backgroundColor?: string;
variant?: 'text' | 'outlined' | 'contained';
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
loading?: boolean;
destructive?: boolean;
primary?: boolean;
onClick?: () => void;
href?: string;
target?: string;
download?: boolean;
style?: CSSProperties;
className?: string;
tooltip?: string;
shortcut?: string;
hidden?: boolean;
conditional?: boolean;
condition?: (notification: InAppNotification) => boolean;
}
export type InAppPriority = 'low' | 'normal' | 'high' | 'urgent';
export interface InAppAccessibility {
label?: string;
description?: string;
role?: string;
announceOnShow?: boolean;
announceOnHide?: boolean;
focusOnShow?: boolean;
focusable?: boolean;
keyboardNavigation?: boolean;
highContrast?: boolean;
reduceMotion?: boolean;
screenReader?: boolean;
customAriaAttributes?: Record<string, string>;
}
export interface InAppResponsive {
mobile?: Partial<InAppOptions>;
tablet?: Partial<InAppOptions>;
desktop?: Partial<InAppOptions>;
breakpoints?: {
mobile?: number;
tablet?: number;
desktop?: number;
};
}
export interface InAppTheme {
primary?: string;
secondary?: string;
success?: string;
error?: string;
warning?: string;
info?: string;
background?: string;
surface?: string;
text?: string;
textSecondary?: string;
border?: string;
shadow?: string;
radius?: string;
spacing?: string;
typography?: InAppTypography;
elevation?: number;
opacity?: number;
blur?: number;
gradient?: string;
dark?: boolean;
customColors?: Record<string, string>;
}
export interface InAppTypography {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
lineHeight?: string;
letterSpacing?: string;
textTransform?: string;
textDecoration?: string;
textAlign?: string;
title?: Partial<InAppTypography>;
message?: Partial<InAppTypography>;
action?: Partial<InAppTypography>;
}
export interface InAppLayout {
width?: string | number;
height?: string | number;
maxWidth?: string | number;
maxHeight?: string | number;
minWidth?: string | number;
minHeight?: string | number;
padding?: string | number;
margin?: string | number;
gap?: string | number;
direction?: 'row' | 'column';
align?: 'start' | 'center' | 'end' | 'stretch';
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
wrap?: boolean;
reverse?: boolean;
stack?: boolean;
compact?: boolean;
fluid?: boolean;
}
export interface InAppContent {
header?: ReactNode;
body?: ReactNode;
footer?: ReactNode;
media?: ReactNode;
custom?: ReactNode;
template?: string;
variables?: Record<string, any>;
markdown?: boolean;
html?: boolean;
sanitize?: boolean;
truncate?: number;
expandable?: boolean;
collapsible?: boolean;
searchable?: boolean;
selectable?: boolean;
copyable?: boolean;
translatable?: boolean;
language?: string;
}
export interface InAppBehavior {
autoHide?: boolean;
hideOnClick?: boolean;
hideOnAction?: boolean;
hideOnOutsideClick?: boolean;
hideOnEscape?: boolean;
hideOnScroll?: boolean;
hideOnFocus?: boolean;
hideOnBlur?: boolean;
preventDuplicates?: boolean;
queue?: boolean;
replace?: boolean;
stack?: boolean;
group?: string;
limit?: number;
newestOnTop?: boolean;
reverseOrder?: boolean;
clearOnNavigate?: boolean;
persistAcrossPages?: boolean;
rememberDismissed?: boolean;
showOnlyOnce?: boolean;
requireInteraction?: boolean;
preventClose?: boolean;
modal?: boolean;
draggable?: boolean;
swipeable?: boolean;
resizable?: boolean;
zIndex?: number;
isolation?: boolean;
backdrop?: boolean;
closeButton?: boolean;
progressBar?: boolean;
timer?: boolean;
counter?: boolean;
history?: boolean;
analytics?: boolean;
debugging?: boolean;
}
export interface InAppConfig {
position?: InAppNotificationPosition;
animation?: InAppNotificationAnimation;
duration?: number;
theme?: InAppTheme;
container?: {
id?: string;
className?: string;
style?: CSSProperties;
};
defaults?: Partial<InAppOptions>;
limits?: {
max?: number;
perType?: Record<InAppNotificationType, number>;
perCategory?: Record<string, number>;
};
persistence?: {
enabled?: boolean;
storage?: 'localStorage' | 'sessionStorage' | 'preferences';
key?: string;
ttl?: number;
};
accessibility?: InAppAccessibility;
responsive?: InAppResponsive;
behavior?: InAppBehavior;
customTypes?: Record<string, Partial<InAppOptions>>;
middleware?: InAppMiddleware[];
plugins?: InAppPlugin[];
}
export interface InAppMiddleware {
name: string;
before?: (notification: InAppNotification) => InAppNotification | null;
after?: (notification: InAppNotification) => void;
error?: (error: Error, notification: InAppNotification) => void;
}
export interface InAppPlugin {
name: string;
version: string;
init?: (config: InAppConfig) => void;
destroy?: () => void;
extend?: (api: InAppAPI) => void;
}
export interface InAppAPI {
show: (options: InAppOptions) => string;
hide: (id: string) => void;
hideAll: () => void;
update: (id: string, options: Partial<InAppOptions>) => void;
get: (id: string) => InAppNotification | null;
getAll: () => InAppNotification[];
clear: () => void;
configure: (config: Partial<InAppConfig>) => void;
middleware: (middleware: InAppMiddleware) => void;
plugin: (plugin: InAppPlugin) => void;
on: (event: string, callback: (...args: unknown[]) => void) => void;
off: (event: string, callback: (...args: unknown[]) => void) => void;
emit: (event: string, ...args: any[]) => void;
}
export interface InAppNotification {
id: string;
options: InAppOptions;
createdAt: Date;
updatedAt: Date;
showAt?: Date;
hideAt?: Date;
status: 'pending' | 'showing' | 'hidden' | 'dismissed';
interactions: InAppInteraction[];
metadata: Record<string, any>;
element?: HTMLElement;
timer?: ReturnType<typeof setTimeout>;
animation?: Animation;
controller?: AbortController;
}
export interface InAppInteraction {
type: 'show' | 'hide' | 'dismiss' | 'action' | 'hover' | 'focus' | 'click';
timestamp: Date;
data?: any;
actionId?: string;
duration?: number;
source?: 'user' | 'system' | 'timer';
}
export interface InAppEvent {
type: string;
notification: InAppNotification;
timestamp: Date;
data?: any;
cancelled?: boolean;
preventDefault?: () => void;
stopPropagation?: () => void;
}
export interface InAppContext {
notifications: InAppNotification[];
config: InAppConfig;
api: InAppAPI;
container: HTMLElement | null;
theme: InAppTheme;
responsive: boolean;
rtl: boolean;
accessibility: boolean;
debugging: boolean;
}
export interface UseInAppNotificationReturn {
show: (options: InAppOptions) => string;
hide: (id: string) => void;
hideAll: () => void;
update: (id: string, options: Partial<InAppOptions>) => void;
success: (message: string, options?: Partial<InAppOptions>) => string;
error: (message: string, options?: Partial<InAppOptions>) => string;
warning: (message: string, options?: Partial<InAppOptions>) => string;
info: (message: string, options?: Partial<InAppOptions>) => string;
notifications: InAppNotification[];
isVisible: boolean;
count: number;
clear: () => void;
}
export type InAppNotificationPayload = InAppNotification;
//# sourceMappingURL=in-app.d.ts.map