react-visual-feedback 1.3.0 → 1.3.1

package/README.md

@@ -23,6 +23,13 @@ A powerful, visual feedback collection tool for React applications with an integ
 - 🔄 Status change callbacks for database synchronization
 - ⌨️ Dashboard keyboard shortcut (Ctrl+Shift+Q)
 
+### Update Notifications
+- 🔔 Beautiful notification component for feedback updates
+- 📬 Show users when their feedback status changes
+- 🎨 Grouped by status (Completed, In Progress, Other)
+- 👋 Dismiss individual updates or all at once
+- ⏰ Smart time formatting (e.g., "2 hours ago", "3 days ago")
+
 ## Installation
 
 ```bash
@@ -123,6 +130,71 @@ function App() {
 export default App;
 ```
 
+### With Update Notifications
+
+```jsx
+import React, { useState } from 'react';
+import {
+  FeedbackProvider,
+  FeedbackUpdatesNotification
+} from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
+
+function App() {
+  const [showNotifications, setShowNotifications] = useState(false);
+  const [updates, setUpdates] = useState([
+    {
+      id: '1',
+      title: 'Button not working on mobile',
+      feedback: 'The submit button is not clickable',
+      status: 'resolved',
+      responseMessage: 'Fixed! The button now works on all devices.',
+      resolvedBy: 'John Developer',
+      updatedAt: '2025-11-02T14:30:00Z'
+    },
+    {
+      id: '2',
+      title: 'Add dark mode',
+      feedback: 'Would be great to have dark mode',
+      status: 'inProgress',
+      responseMessage: 'Working on it! Should be ready next week.',
+      assignedTo: 'Sarah Designer',
+      estimatedResolutionDate: '2025-11-10T00:00:00Z',
+      updatedAt: '2025-11-01T11:00:00Z'
+    }
+  ]);
+
+  const handleDismissUpdate = (updateId) => {
+    setUpdates(prev => prev.filter(u => u.id !== updateId));
+  };
+
+  const handleDismissAll = () => {
+    setUpdates([]);
+    setShowNotifications(false);
+  };
+
+  return (
+    <FeedbackProvider onSubmit={handleFeedbackSubmit}>
+      <YourApp />
+
+      <button onClick={() => setShowNotifications(true)}>
+        🔔 Updates ({updates.length})
+      </button>
+
+      <FeedbackUpdatesNotification
+        isOpen={showNotifications}
+        onClose={() => setShowNotifications(false)}
+        updates={updates}
+        onDismissUpdate={handleDismissUpdate}
+        onDismissAll={handleDismissAll}
+      />
+    </FeedbackProvider>
+  );
+}
+
+export default App;
+```
+
 ## Status Options
 
 The dashboard includes 7 professional status options:
@@ -165,6 +237,32 @@ const { isActive, setIsActive, setIsDashboardOpen } = useFeedback();
 - `setIsActive`: `(active: boolean) => void` - Activate/deactivate feedback mode
 - `setIsDashboardOpen`: `(open: boolean) => void` - Open/close dashboard
 
+### FeedbackUpdatesNotification Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `isOpen` | `boolean` | Yes | - | Controls notification visibility |
+| `onClose` | `() => void` | Yes | - | Callback when notification is closed |
+| `updates` | `Array` | Yes | - | Array of feedback updates to display |
+| `onDismissUpdate` | `(id: string) => void` | No | - | Callback when a single update is dismissed |
+| `onDismissAll` | `() => void` | No | - | Callback when all updates are dismissed |
+
+**Update Object Structure:**
+```typescript
+{
+  id: string,
+  title?: string,
+  feedback: string,
+  status: 'reported' | 'opened' | 'inProgress' | 'resolved' | 'released' | 'blocked' | 'wontFix',
+  responseMessage?: string,
+  assignedTo?: string,
+  resolvedBy?: string,
+  estimatedResolutionDate?: string,
+  updatedAt: string,
+  createdAt?: string
+}
+```
+
 ### Feedback Data Structure
 
 ```typescript
@@ -265,6 +363,16 @@ npm run dev
 
 Visit `http://localhost:8080` to see the demo!
 
+## Components Exported
+
+```jsx
+import {
+  FeedbackProvider,           // Main provider component
+  useFeedback,               // Hook to control feedback state
+  FeedbackUpdatesNotification // Notification component for updates
+} from 'react-visual-feedback';
+```
+
 ## What's New in v1.3.0
 
 ### Status Change with Comments
@@ -272,6 +380,12 @@ Visit `http://localhost:8080` to see the demo!
 - 📝 Comments are passed to `onStatusChange` callback
 - 👥 Comments visible to users as developer responses
 
+### Update Notifications Component
+- 🔔 New `FeedbackUpdatesNotification` component
+- 📬 Show users updates on their feedback
+- 🎨 Beautifully grouped by status
+- 👋 Dismiss individual or all updates
+
 ## License
 
 MIT © 2025 Murali Vvrsn Gurajapu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visual-feedback",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A visual feedback widget for React applications with element selection, screenshot capture, and professional dashboard",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",