@ttt-productions/notification-core 0.2.1 → 0.2.2

package/src/styles/notifications.css

@@ -0,0 +1,206 @@
+/* ============================================================================
+ * @ttt-productions/notification-core — Notification Styles
+ *
+ * Uses theme-core CSS variables for automatic light/dark/high-contrast support.
+ * All classes use the `ntf-` prefix to avoid collisions.
+ * Apps can override any class for custom branding.
+ * ============================================================================ */
+
+/* === NOTIFICATION LIST === */
+.ntf-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 24rem;
+  overflow-y: auto;
+}
+
+.ntf-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.ntf-list-header-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+.ntf-list-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* === NOTIFICATION ITEM === */
+.ntf-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  transition: background-color 150ms ease;
+}
+
+.ntf-item:hover {
+  background-color: hsl(var(--muted));
+}
+
+.ntf-item:last-child {
+  border-bottom: none;
+}
+
+.ntf-item-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background-color: hsl(var(--primary) / 0.10);
+  color: hsl(var(--primary));
+  font-size: 1rem;
+}
+
+.ntf-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ntf-item-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  line-height: 1.25rem;
+}
+
+.ntf-item-message {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  line-height: 1rem;
+  margin-top: 0.125rem;
+}
+
+.ntf-item-timestamp {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  margin-top: 0.25rem;
+}
+
+.ntf-item-count {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+/* === EMPTY STATE === */
+.ntf-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  gap: 0.5rem;
+}
+
+.ntf-empty-icon {
+  color: hsl(var(--success));
+}
+
+.ntf-empty-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+}
+
+/* === UNREAD BADGE === */
+.ntf-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 700;
+  background-color: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
+}
+
+.ntf-badge--hidden {
+  display: none;
+}
+
+/* === HISTORY LIST === */
+.ntf-history-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  opacity: 0.7;
+}
+
+.ntf-history-item:last-child {
+  border-bottom: none;
+}
+
+.ntf-history-item--clickable {
+  cursor: pointer;
+  transition: opacity 150ms ease;
+}
+
+.ntf-history-item--clickable:hover {
+  opacity: 1;
+}
+
+/* === LOADING STATE === */
+.ntf-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+}
+
+/* === HIGH CONTRAST MODE === */
+.high-contrast .ntf-item {
+  border-bottom-width: 2px;
+  border-color: hsl(var(--border));
+}
+
+.high-contrast .ntf-item:hover {
+  background-color: hsl(var(--foreground));
+  color: hsl(var(--background));
+}
+
+.high-contrast .ntf-item:hover .ntf-item-title,
+.high-contrast .ntf-item:hover .ntf-item-message,
+.high-contrast .ntf-item:hover .ntf-item-timestamp {
+  color: hsl(var(--background));
+}
+
+.high-contrast .ntf-item-icon {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  border: 2px solid hsl(var(--border));
+}
+
+.high-contrast .ntf-badge {
+  background-color: hsl(var(--foreground));
+  color: hsl(var(--background));
+  border: 2px solid hsl(var(--border));
+}
+
+.high-contrast .ntf-list-header {
+  border-bottom-width: 2px;
+}

package/dist/hooks/useMarkAllAsRead.d.ts

@@ -1,30 +0,0 @@
-export interface UseMarkAllAsReadOptions {
-    /** User ID */
-    userId: string;
-    /** Query keys to invalidate after marking all as read */
-    invalidateKeys?: readonly unknown[][];
-}
-/**
- * Mark all unread notifications as read in a batch operation.
- *
- * @example
- * ```tsx
- * const markAllAsRead = useMarkAllAsRead({ userId: currentUser.uid });
- *
- * const handleMarkAllRead = (unreadNotifications: Notification[]) => {
- *   markAllAsRead.mutate({ notifications: unreadNotifications });
- * };
- * ```
- */
-export declare function useMarkAllAsRead({ userId, invalidateKeys, }: UseMarkAllAsReadOptions): {
-    mutate: ({ notificationIds }: {
-        notificationIds: string[];
-    }) => void;
-    mutateAsync: ({ notificationIds }: {
-        notificationIds: string[];
-    }) => Promise<any>;
-    isPending: any;
-    isError: any;
-    error: any;
-};
-//# sourceMappingURL=useMarkAllAsRead.d.ts.map

package/dist/hooks/useMarkAllAsRead.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMarkAllAsRead.d.ts","sourceRoot":"","sources":["../../src/hooks/useMarkAllAsRead.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,uBAAuB;IACtC,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,cAAc,CAAC,EAAE,SAAS,OAAO,EAAE,EAAE,CAAC;CACvC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB;kCASQ;QAAE,eAAe,EAAE,MAAM,EAAE,CAAA;KAAE;uCASlB;QAAE,eAAe,EAAE,MAAM,EAAE,CAAA;KAAE;;;;EAazE"}

package/dist/hooks/useMarkAllAsRead.js

@@ -1,44 +0,0 @@
-'use client';
-import { useFirestoreBatch } from '@ttt-productions/query-core';
-/**
- * Mark all unread notifications as read in a batch operation.
- *
- * @example
- * ```tsx
- * const markAllAsRead = useMarkAllAsRead({ userId: currentUser.uid });
- *
- * const handleMarkAllRead = (unreadNotifications: Notification[]) => {
- *   markAllAsRead.mutate({ notifications: unreadNotifications });
- * };
- * ```
- */
-export function useMarkAllAsRead({ userId, invalidateKeys, }) {
-    const batchMutation = useFirestoreBatch({
-        invalidateKeys: invalidateKeys ?? [
-            ['notifications', userId],
-            ['notifications-unread-count', userId],
-        ],
-    });
-    return {
-        mutate: ({ notificationIds }) => {
-            const operations = notificationIds.map((id) => ({
-                type: 'update',
-                docPath: `userData/${userId}/metadata/notifications/${id}`,
-                data: { isRead: true },
-            }));
-            batchMutation.mutate({ operations });
-        },
-        mutateAsync: async ({ notificationIds }) => {
-            const operations = notificationIds.map((id) => ({
-                type: 'update',
-                docPath: `userData/${userId}/metadata/notifications/${id}`,
-                data: { isRead: true },
-            }));
-            return batchMutation.mutateAsync({ operations });
-        },
-        isPending: batchMutation.isPending,
-        isError: batchMutation.isError,
-        error: batchMutation.error,
-    };
-}
-//# sourceMappingURL=useMarkAllAsRead.js.map

package/dist/hooks/useMarkAllAsRead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMarkAllAsRead.js","sourceRoot":"","sources":["../../src/hooks/useMarkAllAsRead.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAUhE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,cAAc,GACU;IACxB,MAAM,aAAa,GAAG,iBAAiB,CAAC;QACtC,cAAc,EAAE,cAAc,IAAI;YAChC,CAAC,eAAe,EAAE,MAAM,CAAC;YACzB,CAAC,4BAA4B,EAAE,MAAM,CAAC;SACvC;KACF,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,CAAC,EAAE,eAAe,EAAiC,EAAE,EAAE;YAC7D,MAAM,UAAU,GAAwB,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnE,IAAI,EAAE,QAAiB;gBACvB,OAAO,EAAE,YAAY,MAAM,2BAA2B,EAAE,EAAE;gBAC1D,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;aACvB,CAAC,CAAC,CAAC;YAEJ,aAAa,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;QACvC,CAAC;QACD,WAAW,EAAE,KAAK,EAAE,EAAE,eAAe,EAAiC,EAAE,EAAE;YACxE,MAAM,UAAU,GAAwB,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnE,IAAI,EAAE,QAAiB;gBACvB,OAAO,EAAE,YAAY,MAAM,2BAA2B,EAAE,EAAE;gBAC1D,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;aACvB,CAAC,CAAC,CAAC;YAEJ,OAAO,aAAa,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;QACnD,CAAC;QACD,SAAS,EAAE,aAAa,CAAC,SAAS;QAClC,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,KAAK,EAAE,aAAa,CAAC,KAAK;KAC3B,CAAC;AACJ,CAAC"}

package/dist/hooks/useMarkAsRead.d.ts

@@ -1,30 +0,0 @@
-export interface UseMarkAsReadOptions {
-    /** User ID */
-    userId: string;
-    /** Query keys to invalidate after marking as read */
-    invalidateKeys?: readonly unknown[][];
-}
-/**
- * Mark a single notification as read.
- *
- * @example
- * ```tsx
- * const markAsRead = useMarkAsRead({ userId: currentUser.uid });
- *
- * const handleNotificationClick = (notificationId: string) => {
- *   markAsRead.mutate({ notificationId });
- * };
- * ```
- */
-export declare function useMarkAsRead({ userId, invalidateKeys, }: UseMarkAsReadOptions): {
-    mutate: ({ notificationId }: {
-        notificationId: string;
-    }) => void;
-    mutateAsync: ({ notificationId }: {
-        notificationId: string;
-    }) => Promise<any>;
-    isPending: any;
-    isError: any;
-    error: any;
-};
-//# sourceMappingURL=useMarkAsRead.d.ts.map

package/dist/hooks/useMarkAsRead.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMarkAsRead.d.ts","sourceRoot":"","sources":["../../src/hooks/useMarkAsRead.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,oBAAoB;IACnC,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,cAAc,CAAC,EAAE,SAAS,OAAO,EAAE,EAAE,CAAC;CACvC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,cAAc,GACf,EAAE,oBAAoB;iCASU;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE;sCAMf;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE;;;;EAUrE"}

package/dist/hooks/useMarkAsRead.js

@@ -1,40 +0,0 @@
-'use client';
-import { useFirestoreUpdate } from '@ttt-productions/query-core';
-/**
- * Mark a single notification as read.
- *
- * @example
- * ```tsx
- * const markAsRead = useMarkAsRead({ userId: currentUser.uid });
- *
- * const handleNotificationClick = (notificationId: string) => {
- *   markAsRead.mutate({ notificationId });
- * };
- * ```
- */
-export function useMarkAsRead({ userId, invalidateKeys, }) {
-    const updateMutation = useFirestoreUpdate({
-        invalidateKeys: invalidateKeys ?? [
-            ['notifications', userId],
-            ['notifications-unread-count', userId],
-        ],
-    });
-    return {
-        mutate: ({ notificationId }) => {
-            updateMutation.mutate({
-                docPath: `userData/${userId}/metadata/notifications/${notificationId}`,
-                data: { isRead: true },
-            });
-        },
-        mutateAsync: async ({ notificationId }) => {
-            return updateMutation.mutateAsync({
-                docPath: `userData/${userId}/metadata/notifications/${notificationId}`,
-                data: { isRead: true },
-            });
-        },
-        isPending: updateMutation.isPending,
-        isError: updateMutation.isError,
-        error: updateMutation.error,
-    };
-}
-//# sourceMappingURL=useMarkAsRead.js.map

package/dist/hooks/useMarkAsRead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMarkAsRead.js","sourceRoot":"","sources":["../../src/hooks/useMarkAsRead.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAUjE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,MAAM,EACN,cAAc,GACO;IACrB,MAAM,cAAc,GAAG,kBAAkB,CAAe;QACtD,cAAc,EAAE,cAAc,IAAI;YAChC,CAAC,eAAe,EAAE,MAAM,CAAC;YACzB,CAAC,4BAA4B,EAAE,MAAM,CAAC;SACvC;KACF,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,CAAC,EAAE,cAAc,EAA8B,EAAE,EAAE;YACzD,cAAc,CAAC,MAAM,CAAC;gBACpB,OAAO,EAAE,YAAY,MAAM,2BAA2B,cAAc,EAAE;gBACtE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;aACvB,CAAC,CAAC;QACL,CAAC;QACD,WAAW,EAAE,KAAK,EAAE,EAAE,cAAc,EAA8B,EAAE,EAAE;YACpE,OAAO,cAAc,CAAC,WAAW,CAAC;gBAChC,OAAO,EAAE,YAAY,MAAM,2BAA2B,cAAc,EAAE;gBACtE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;aACvB,CAAC,CAAC;QACL,CAAC;QACD,SAAS,EAAE,cAAc,CAAC,SAAS;QACnC,OAAO,EAAE,cAAc,CAAC,OAAO;QAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B,CAAC;AACJ,CAAC"}

package/dist/hooks/useNotifications.d.ts

@@ -1,25 +0,0 @@
-export interface UseNotificationsOptions {
-    /** User ID to fetch notifications for */
-    userId: string;
-    /** Enable/disable the query */
-    enabled?: boolean;
-    /** Enable realtime updates (default: true) */
-    subscribe?: boolean;
-    /** Maximum number of notifications to fetch (default: 50) */
-    limit?: number;
-    /** Only fetch unread notifications */
-    unreadOnly?: boolean;
-}
-/**
- * Fetch user notifications with optional realtime updates.
- *
- * @example
- * ```tsx
- * const { data: notifications, isLoading } = useNotifications({
- *   userId: currentUser.uid,
- *   subscribe: true,
- * });
- * ```
- */
-export declare function useNotifications({ userId, enabled, subscribe, limit: maxResults, unreadOnly, }: UseNotificationsOptions): any;
-//# sourceMappingURL=useNotifications.d.ts.map

package/dist/hooks/useNotifications.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../src/hooks/useNotifications.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAc,EACd,SAAgB,EAChB,KAAK,EAAE,UAAe,EACtB,UAAkB,GACnB,EAAE,uBAAuB,OAiBzB"}

package/dist/hooks/useNotifications.js

@@ -1,31 +0,0 @@
-'use client';
-import { useFirestoreCollection } from '@ttt-productions/query-core';
-import { orderBy, limit, where } from 'firebase/firestore';
-/**
- * Fetch user notifications with optional realtime updates.
- *
- * @example
- * ```tsx
- * const { data: notifications, isLoading } = useNotifications({
- *   userId: currentUser.uid,
- *   subscribe: true,
- * });
- * ```
- */
-export function useNotifications({ userId, enabled = true, subscribe = true, limit: maxResults = 50, unreadOnly = false, }) {
-    const constraints = [
-        orderBy('createdAt', 'desc'),
-        limit(maxResults),
-    ];
-    if (unreadOnly) {
-        constraints.unshift(where('isRead', '==', false));
-    }
-    return useFirestoreCollection({
-        collectionPath: `userData/${userId}/metadata/notifications`,
-        queryKey: ['notifications', userId, { unreadOnly, limit: maxResults }],
-        constraints,
-        enabled: enabled && !!userId,
-        subscribe,
-    });
-}
-//# sourceMappingURL=useNotifications.js.map

package/dist/hooks/useNotifications.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNotifications.js","sourceRoot":"","sources":["../../src/hooks/useNotifications.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAwB,MAAM,oBAAoB,CAAC;AAgBjF;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,GAAG,IAAI,EACd,SAAS,GAAG,IAAI,EAChB,KAAK,EAAE,UAAU,GAAG,EAAE,EACtB,UAAU,GAAG,KAAK,GACM;IACxB,MAAM,WAAW,GAAsB;QACrC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC;QAC5B,KAAK,CAAC,UAAU,CAAC;KAClB,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,sBAAsB,CAAe;QAC1C,cAAc,EAAE,YAAY,MAAM,yBAAyB;QAC3D,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QACtE,WAAW;QACX,OAAO,EAAE,OAAO,IAAI,CAAC,CAAC,MAAM;QAC5B,SAAS;KACV,CAAC,CAAC;AACL,CAAC"}