react-visual-feedback 1.4.6 → 1.4.7

package/README.md

@@ -153,7 +153,8 @@ function App() {
 | `isLoading` | `boolean` | `false` | Show loading state |
 | `onRefresh` | `() => void` | - | Callback for refresh button |
 | `title` | `string` | `'Feedback'` | Dashboard title |
-| `statuses` | `object` | `DEFAULT_STATUSES` | Custom status configurations |
+| `statuses` | `object` | `DEFAULT_STATUSES` | Status configurations (label, color, icon) |
+| `acceptableStatuses` | `string[]` | - | Array of status keys to show (e.g., `['open', 'resolved']`) |
 | `showAllStatuses` | `boolean` | `true` | Show all statuses in filter |
 | `error` | `string` | `null` | Error message to display |
 
@@ -593,42 +594,48 @@ app.patch('/api/feedback/:id/status', async (req, res) => {
 
 ### Custom Statuses
 
-You control which statuses are available. Pass your own `statuses` object to `FeedbackDashboard`. The widget will only show the statuses you provide:
+You control which statuses are available. Pass your own `statuses` object and optionally `acceptableStatuses` array to control what's shown:
 
 ```jsx
 import { FeedbackDashboard } from 'react-visual-feedback';
 
-// Define ONLY the statuses you want to show
+// Define your status configurations
 const myStatuses = {
-  pending: {
-    key: 'pending',
-    label: 'Pending Review',
+  open: {
+    label: 'Open',
     color: '#f59e0b',
     bgColor: '#fef3c7',
     textColor: '#92400e',
-    icon: 'AlertCircle'
+    icon: 'AlertCircle'  // Optional - defaults to AlertCircle if not provided
   },
-  approved: {
-    key: 'approved',
-    label: 'Approved',
+  in_progress: {
+    label: 'In Progress',
+    color: '#3b82f6',
+    bgColor: '#dbeafe',
+    textColor: '#1e40af',
+    icon: 'Play'
+  },
+  resolved: {
+    label: 'Resolved',
     color: '#10b981',
     bgColor: '#d1fae5',
     textColor: '#065f46',
     icon: 'CheckCircle'
-  },
-  rejected: {
-    key: 'rejected',
-    label: 'Rejected',
-    color: '#ef4444',
-    bgColor: '#fee2e2',
-    textColor: '#991b1b',
-    icon: 'Ban'
   }
 };
 
+// Option 1: Show all statuses defined in myStatuses
+<FeedbackDashboard
+  isOpen={true}
+  statuses={myStatuses}
+  // ... other props
+/>
+
+// Option 2: Use acceptableStatuses to show only specific statuses
 <FeedbackDashboard
   isOpen={true}
-  statuses={myStatuses}  // Only these 3 statuses will be shown
+  statuses={myStatuses}
+  acceptableStatuses={['open', 'resolved']}  // Only show these 2
   // ... other props
 />
 ```