react-visual-feedback 1.4.0 → 1.4.2

package/README.md

@@ -139,6 +139,24 @@ function App() {
 | `isActive` | `boolean` | - | Controlled active state |
 | `onActiveChange` | `(active) => void` | - | Callback for controlled mode |
 
+### FeedbackDashboard Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | required | Control dashboard visibility |
+| `onClose` | `() => void` | required | Callback when dashboard closes |
+| `data` | `Array` | - | Feedback data (uses localStorage if undefined) |
+| `isDeveloper` | `boolean` | `false` | Enable developer mode with delete |
+| `isUser` | `boolean` | `true` | Enable user mode |
+| `onStatusChange` | `({id, status, comment}) => void` | - | Callback when status changes |
+| `mode` | `'light' \| 'dark'` | `'light'` | Theme mode |
+| `isLoading` | `boolean` | `false` | Show loading state |
+| `onRefresh` | `() => void` | - | Callback for refresh button |
+| `title` | `string` | `'Feedback'` | Dashboard title |
+| `statuses` | `object` | `DEFAULT_STATUSES` | Custom status configurations |
+| `showAllStatuses` | `boolean` | `true` | Show all statuses in filter |
+| `error` | `string` | `null` | Error message to display |
+
 ### useFeedback Hook
 
 ```jsx
@@ -553,22 +571,223 @@ app.patch('/api/feedback/:id/status', async (req, res) => {
 
 | Shortcut | Action |
 |----------|--------|
-| `Alt+Q` | Activate feedback mode |
+| `Alt+Q` | Activate feedback mode (element selection) |
+| `Alt+W` | Start screen recording |
 | `Alt+Shift+Q` | Open dashboard |
 | `Esc` | Cancel/close |
 
-## Status Options
+## Status System
+
+### Default Statuses
+
+| Key | Label | Color | Icon |
+|-----|-------|-------|------|
+| `new` | New | Purple (#8b5cf6) | Inbox |
+| `open` | Open | Amber (#f59e0b) | AlertCircle |
+| `inProgress` | In Progress | Blue (#3b82f6) | Play |
+| `underReview` | Under Review | Cyan (#06b6d4) | Eye |
+| `onHold` | On Hold | Gray (#6b7280) | PauseCircle |
+| `resolved` | Resolved | Green (#10b981) | CheckCircle |
+| `closed` | Closed | Slate (#64748b) | Archive |
+| `wontFix` | Won't Fix | Red (#ef4444) | Ban |
+
+### Custom Statuses
+
+You control which statuses are available. Pass your own `statuses` object to `FeedbackDashboard`. The widget will only show the statuses you provide:
+
+```jsx
+import { FeedbackDashboard } from 'react-visual-feedback';
+
+// Define ONLY the statuses you want to show
+const myStatuses = {
+  pending: {
+    key: 'pending',
+    label: 'Pending Review',
+    color: '#f59e0b',
+    bgColor: '#fef3c7',
+    textColor: '#92400e',
+    icon: 'AlertCircle'
+  },
+  approved: {
+    key: 'approved',
+    label: 'Approved',
+    color: '#10b981',
+    bgColor: '#d1fae5',
+    textColor: '#065f46',
+    icon: 'CheckCircle'
+  },
+  rejected: {
+    key: 'rejected',
+    label: 'Rejected',
+    color: '#ef4444',
+    bgColor: '#fee2e2',
+    textColor: '#991b1b',
+    icon: 'Ban'
+  }
+};
+
+<FeedbackDashboard
+  isOpen={true}
+  statuses={myStatuses}  // Only these 3 statuses will be shown
+  // ... other props
+/>
+```
+
+#### Extending Default Statuses
+
+If you want to keep the defaults and add more:
+
+```jsx
+import { DEFAULT_STATUSES } from 'react-visual-feedback';
+
+const extendedStatuses = {
+  ...DEFAULT_STATUSES,
+  // Add new status
+  testing: {
+    key: 'testing',
+    label: 'In Testing',
+    color: '#8b5cf6',
+    bgColor: '#ede9fe',
+    textColor: '#6d28d9',
+    icon: 'Bug'
+  },
+  // Override existing
+  resolved: {
+    ...DEFAULT_STATUSES.resolved,
+    label: 'Fixed & Deployed'
+  }
+};
+```
+
+### Status Object Structure
+
+```typescript
+interface StatusConfig {
+  key: string;        // Unique identifier
+  label: string;      // Display name in UI
+  color: string;      // Border and icon color (hex)
+  bgColor: string;    // Background color (hex)
+  textColor: string;  // Text color (hex)
+  icon: string;       // Icon name from available icons
+}
+```
+
+### Available Icons
+
+The following icons from Lucide React are available for custom statuses:
+
+| Icon Name | Description |
+|-----------|-------------|
+| `Inbox` | New items |
+| `AlertCircle` | Warnings/alerts |
+| `Play` | In progress |
+| `Eye` | Under review |
+| `PauseCircle` | Paused/on hold |
+| `CheckCircle` | Completed/resolved |
+| `Archive` | Archived/closed |
+| `Ban` | Rejected/won't fix |
+| `XCircle` | Cancelled |
+| `HelpCircle` | Questions |
+| `Lightbulb` | Ideas/features |
+| `Bug` | Bug reports |
+| `Zap` | Quick actions |
+| `MessageSquare` | Comments |
+
+### Status Utility Functions
+
+```jsx
+import {
+  getStatusData,       // Get status config with safe defaults
+  getIconComponent,    // Get icon component from name
+  normalizeStatusKey,  // Normalize status key to available options
+  StatusBadge,         // Status badge component
+  StatusDropdown       // Status dropdown component
+} from 'react-visual-feedback';
+
+// Get status data with fallbacks for missing properties
+const statusData = getStatusData('inProgress', customStatuses);
+// Returns: { key, label, color, bgColor, textColor, icon }
+
+// Get icon component from string name
+const Icon = getIconComponent('CheckCircle');
+// Returns: Lucide React component
+
+// Normalize various status formats to valid keys
+const key = normalizeStatusKey('in_progress', customStatuses);
+// Returns: 'inProgress'
+```
+
+### Status Key Normalization
 
-| Status | Description |
-|--------|-------------|
-| **New** | Initial submission |
-| **Open** | Acknowledged |
-| **In Progress** | Being worked on |
-| **Under Review** | Code review |
-| **On Hold** | Paused |
-| **Resolved** | Fixed |
-| **Closed** | Completed |
-| **Won't Fix** | Not planned |
+The widget automatically normalizes various status key formats:
+
+| Input | Normalized To |
+|-------|---------------|
+| `reported`, `submitted`, `pending` | `new` |
+| `doing`, `in_progress` | `inProgress` |
+| `review`, `under_review` | `underReview` |
+| `hold`, `on_hold`, `paused` | `onHold` |
+| `done`, `fixed`, `completed` | `resolved` |
+| `archived` | `closed` |
+| `rejected`, `wont_fix`, `cancelled` | `wontFix` |
+
+## Next.js Usage
+
+This package uses browser-only APIs and requires client-side rendering. Use dynamic import with `ssr: false`:
+
+```tsx
+// providers/FeedbackProviderClient.tsx
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const FeedbackProvider = dynamic(
+  () => import('react-visual-feedback').then((mod) => mod.FeedbackProvider),
+  { ssr: false }
+);
+
+export default function FeedbackProviderClient({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+  [key: string]: any;
+}) {
+  return (
+    <FeedbackProvider {...props}>
+      {children}
+    </FeedbackProvider>
+  );
+}
+```
+
+Then use in your layout:
+
+```tsx
+// app/layout.tsx
+import FeedbackProviderClient from './providers/FeedbackProviderClient';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <FeedbackProviderClient
+          onSubmit={async (data) => {
+            await fetch('/api/feedback', {
+              method: 'POST',
+              body: JSON.stringify(data)
+            });
+          }}
+          dashboard={true}
+          mode="light"
+        >
+          {children}
+        </FeedbackProviderClient>
+      </body>
+    </html>
+  );
+}
+```
 
 ## Browser Support
 
@@ -577,6 +796,81 @@ app.patch('/api/feedback/:id/status', async (req, res) => {
 - Safari
 - Opera
 
+## All Exports
+
+```jsx
+import {
+  // Core components
+  FeedbackProvider,
+  FeedbackModal,
+  FeedbackDashboard,
+  FeedbackTrigger,
+  CanvasOverlay,
+
+  // Hooks
+  useFeedback,
+
+  // Status components
+  StatusBadge,
+  StatusDropdown,
+
+  // Status utilities
+  getStatusData,
+  getIconComponent,
+  normalizeStatusKey,
+  DEFAULT_STATUSES,
+
+  // Storage utilities
+  saveFeedbackToLocalStorage,
+
+  // Theme utilities
+  getTheme,
+  lightTheme,
+  darkTheme,
+
+  // General utilities
+  getElementInfo,
+  captureElementScreenshot,
+  getReactComponentInfo,
+  formatPath
+} from 'react-visual-feedback';
+```
+
+## Changelog
+
+### v1.4.2
+- **Fixed**: Modal state not resetting after submission (was showing "Sending..." on reopen)
+- **Added**: `Alt+W` keyboard shortcut for video recording
+- **Improved**: Custom status documentation - clarified that users control which statuses appear
+- **Fixed**: Prevented double submission by checking `isSubmitting` state
+
+### v1.4.1
+- **Fixed**: `Cannot read properties of undefined (reading 'icon')` error when status data is malformed
+- **Added**: `getStatusData()` utility function for safe status access with defaults
+- **Improved**: Defensive null checks in StatusBadge, StatusDropdown, and FeedbackDashboard
+- **Added**: Export of status utility functions for custom implementations
+
+### v1.4.0
+- **Added**: Screen recording with session replay
+- **Added**: Console and network log capture during recording
+- **Added**: Session replay component with expandable logs panel
+- **Improved**: Dashboard UI with video playback support
+
+### v1.3.0
+- **Added**: Canvas drawing and annotation support
+- **Added**: Download all feedback as ZIP
+
+### v1.2.0
+- **Added**: Custom status configurations
+- **Added**: Status normalization for various formats
+
+### v1.1.0
+- **Added**: Dark mode support
+- **Added**: Developer/User mode views
+
+### v1.0.0
+- Initial release with element selection and screenshot capture
+
 ## License
 
 MIT