@edusight/notification-widget 1.0.32 → 1.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -23
- package/dist/{components-D8XxiFEB.js → components-Dq8aSwWR.js} +125 -131
- package/dist/components-Dq8aSwWR.js.map +1 -0
- package/dist/components-dwdMDd9K.cjs +71 -0
- package/dist/{components-D8XxiFEB.js.map → components-dwdMDd9K.cjs.map} +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.js +121 -119
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/components-KafszaqK.cjs +0 -71
- package/dist/components-KafszaqK.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -2,32 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
A modern, accessible React notification center widget built with clean architecture principles, featuring real-time updates, comprehensive notification management, and SDK dependency injection.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
5
|
+
## Version 1.0.35 Features
|
|
6
|
+
|
|
7
|
+
- **Refactored Architecture** - Clean architecture with dependency injection and separation of concerns
|
|
8
|
+
- **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection pattern
|
|
9
|
+
- **Performance Optimized** - Code splitting, memoization, and optimized bundle size (<25KB gzipped)
|
|
10
|
+
- **Enhanced Accessibility** - WCAG 2.1 AA compliance with improved keyboard navigation
|
|
11
|
+
- **Dynamic Theming** - Runtime theme switching with dark mode support
|
|
12
|
+
- **Responsive Design** - Mobile-first approach with responsive breakpoints
|
|
13
|
+
- **Error Boundaries** - Comprehensive error handling with fallback components
|
|
14
|
+
- **Real-time Sync** - WebSocket integration with fallback polling and cross-tab synchronization
|
|
15
|
+
- **Comprehensive Testing** - Unit, integration, and accessibility tests with >90% coverage
|
|
16
16
|
|
|
17
17
|
## Features
|
|
18
18
|
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
19
|
+
- **Real-time Updates** - WebSocket integration with automatic reconnection and fallback polling
|
|
20
|
+
- **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
|
|
21
|
+
- **Full CRUD Operations** - Mark as read/unread, archive, delete with optimistic updates
|
|
22
|
+
- **Customizable UI** - Dynamic theme support with CSS variables
|
|
23
|
+
- **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection
|
|
24
|
+
- **Accessibility** - Full WCAG 2.1 compliance with keyboard navigation
|
|
25
|
+
- **Performance** - Lazy loading, memoization, and optimized re-renders
|
|
26
|
+
- **Multi-tenant** - Built-in tenant and environment scoping
|
|
27
|
+
- **Error Boundaries** - Component-level error boundaries with fallback UI
|
|
28
|
+
- **Live Preferences** - Real-time preference management with debounced saving
|
|
29
|
+
- **Cross-tab Sync** - Synchronization across multiple browser tabs
|
|
30
|
+
- **Clean Architecture** - Separation of concerns with dependency injection pattern
|
|
31
31
|
|
|
32
32
|
## Installation
|
|
33
33
|
|
|
@@ -53,6 +53,21 @@ import '@edusight/notification-widget/styles';
|
|
|
53
53
|
import '@edusight/notification-widget/styles.css';
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
+
### Custom Selectors
|
|
57
|
+
|
|
58
|
+
Each widget section exposes `mx-widget-*` hooks so host apps can override colors or spacing without touching the bundled CSS:
|
|
59
|
+
|
|
60
|
+
| Attribute | Target |
|
|
61
|
+
| --- | --- |
|
|
62
|
+
| `data-mx-widget="root"` | Widget shell/bell container |
|
|
63
|
+
| `data-mx-widget="popover"` | Notifications popover root |
|
|
64
|
+
| `data-mx-widget="tabs"` | Tab navigation bar |
|
|
65
|
+
| `data-mx-widget="item"` | Individual notification item |
|
|
66
|
+
| `data-mx-widget="action"` | Primary/secondary action buttons |
|
|
67
|
+
| `data-mx-widget="bell"` | Bell button itself |
|
|
68
|
+
|
|
69
|
+
Use these selectors in your global CSS to align the widget with your design system (for example `.mx-widget-root { background-color: #fff; }`). No need to import the widget CSS if you only rely on the shared CSS variables.
|
|
70
|
+
|
|
56
71
|
## Quick Start
|
|
57
72
|
|
|
58
73
|
### Basic Setup with NotificationWidget
|