@bbearai/react-native 0.2.3 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # @bbearai/react-native
 
-BugBear QA widget for React Native mobile apps.
+BugBear QA widget for React Native mobile apps. Features a navigation-stack-based UI with 10 dedicated screens for testing, bug reporting, messaging, and profile management.
 
 ## Installation
 
@@ -10,22 +10,35 @@ npm install @bbearai/react-native @bbearai/core
 yarn add @bbearai/react-native @bbearai/core
 ```
 
+### Optional: Image attachments
+
+For image attachments in bug reports and messages:
+
+```bash
+npm install react-native-image-picker
+```
+
+This is an optional peer dependency — the widget works without it but won't show image picker buttons.
+
 ## Quick Start
 
 ```tsx
-import { BugBearProvider, BugBearWidget } from '@bbearai/react-native';
+import { BugBearProvider, BugBearButton } from '@bbearai/react-native';
 
 function App() {
   return (
     <BugBearProvider
-      projectId="your-project-id"
-      getCurrentUser={async () => ({
-        id: user.id,
-        email: user.email,
-      })}
+      config={{
+        projectId: 'your-project-id',
+        dashboardUrl: 'https://app.bugbear.ai',
+        getCurrentUser: async () => ({
+          id: user.id,
+          email: user.email,
+        }),
+      }}
     >
       <YourApp />
-      <BugBearWidget />
+      <BugBearButton position="bottom-right" />
     </BugBearProvider>
   );
 }
@@ -96,13 +109,34 @@ If you're using Yarn workspaces, you can also configure hoisting to ensure a sin
 
 ```tsx
 <BugBearProvider
-  projectId="your-project-id"           // Required: Your BugBear project ID
-  getCurrentUser={async () => {...}}    // Required: Return current user info
-  getNavigationHistory={() => [...]}    // Optional: Custom navigation tracking
-  onReportSubmitted={(report) => {...}} // Optional: Callback after report submission
+  config={{
+    projectId: 'your-project-id',           // Required: Your BugBear project ID
+    getCurrentUser: async () => {...},       // Required: Return current user info
+    dashboardUrl: 'https://app.bugbear.ai', // Optional: Web dashboard link in widget
+    getNavigationHistory: () => [...],       // Optional: Custom navigation tracking
+    onNavigate: (route) => {...},            // Optional: Deep link handler for test cases
+    onReportSubmitted: (report) => {...},    // Optional: Callback after report submission
+  }}
 >
 ```
 
+## Widget Architecture
+
+The widget uses a navigation stack pattern with 10 screens:
+
+| Screen | Purpose |
+|--------|---------|
+| **Home** | Smart hero banner + 2x2 action grid + progress bar + web dashboard link |
+| **Test Detail** | One-test-at-a-time execution with pass/fail/skip actions |
+| **Test List** | All assignments grouped by folder with filter bar |
+| **Test Feedback** | Star rating + quality flags after pass/fail |
+| **Report** | Bug/feedback submission with type, severity, description |
+| **Report Success** | Confirmation with auto-return to home |
+| **Message List** | Thread list with unread badges + compose button |
+| **Thread Detail** | Chat bubbles + reply composer |
+| **Compose Message** | New thread form with subject + message |
+| **Profile** | Tester info, stats, and editable fields |
+
 ## Navigation Tracking
 
 BugBear can automatically track navigation history for better bug context. If you're using React Navigation:

package/dist/index.d.mts

@@ -24,18 +24,29 @@ interface BugBearContextValue {
     /** Get all messages in a thread */
     getThreadMessages: (threadId: string) => Promise<TesterMessage[]>;
     /** Send a message to a thread */
-    sendMessage: (threadId: string, content: string) => Promise<boolean>;
+    sendMessage: (threadId: string, content: string, attachments?: Array<{
+        type: 'image' | 'document' | 'video_link';
+        url: string;
+        name: string;
+    }>) => Promise<boolean>;
     /** Mark a thread as read */
     markAsRead: (threadId: string) => Promise<void>;
     /** Create a new thread */
     createThread: (options: {
         subject: string;
         message: string;
+        attachments?: Array<{
+            type: 'image' | 'document' | 'video_link';
+            url: string;
+            name: string;
+        }>;
     }) => Promise<{
         success: boolean;
         threadId?: string;
         error?: string;
     }>;
+    /** Upload an image from a local URI (React Native) */
+    uploadImage: (uri: string, bucket?: 'screenshots' | 'discussion-attachments') => Promise<string | null>;
     activeSession: QASession | null;
     sessionFindings: QAFinding[];
     startSession: (options?: StartSessionOptions) => Promise<{
@@ -61,6 +72,8 @@ interface BugBearContextValue {
     }>;
     /** Refresh tester info from server */
     refreshTesterInfo: () => Promise<void>;
+    /** URL to the BugBear web dashboard (for linking testers to the full web experience) */
+    dashboardUrl?: string;
 }
 declare function useBugBear(): BugBearContextValue;
 interface BugBearProviderProps {
@@ -95,6 +108,6 @@ interface BugBearButtonProps {
     /** Maximum Y position from bottom of screen */
     maxYOffset?: number;
 }
-declare function BugBearButton({ getAppContext, position, buttonStyle, draggable, initialX, initialY, minY, maxYOffset, }: BugBearButtonProps): React.JSX.Element | null;
+declare function BugBearButton({ position, buttonStyle, draggable, initialX, initialY, minY, maxYOffset, }: BugBearButtonProps): React.JSX.Element | null;
 
 export { BugBearButton, BugBearProvider, useBugBear };

package/dist/index.d.ts

@@ -24,18 +24,29 @@ interface BugBearContextValue {
     /** Get all messages in a thread */
     getThreadMessages: (threadId: string) => Promise<TesterMessage[]>;
     /** Send a message to a thread */
-    sendMessage: (threadId: string, content: string) => Promise<boolean>;
+    sendMessage: (threadId: string, content: string, attachments?: Array<{
+        type: 'image' | 'document' | 'video_link';
+        url: string;
+        name: string;
+    }>) => Promise<boolean>;
     /** Mark a thread as read */
     markAsRead: (threadId: string) => Promise<void>;
     /** Create a new thread */
     createThread: (options: {
         subject: string;
         message: string;
+        attachments?: Array<{
+            type: 'image' | 'document' | 'video_link';
+            url: string;
+            name: string;
+        }>;
     }) => Promise<{
         success: boolean;
         threadId?: string;
         error?: string;
     }>;
+    /** Upload an image from a local URI (React Native) */
+    uploadImage: (uri: string, bucket?: 'screenshots' | 'discussion-attachments') => Promise<string | null>;
     activeSession: QASession | null;
     sessionFindings: QAFinding[];
     startSession: (options?: StartSessionOptions) => Promise<{
@@ -61,6 +72,8 @@ interface BugBearContextValue {
     }>;
     /** Refresh tester info from server */
     refreshTesterInfo: () => Promise<void>;
+    /** URL to the BugBear web dashboard (for linking testers to the full web experience) */
+    dashboardUrl?: string;
 }
 declare function useBugBear(): BugBearContextValue;
 interface BugBearProviderProps {
@@ -95,6 +108,6 @@ interface BugBearButtonProps {
     /** Maximum Y position from bottom of screen */
     maxYOffset?: number;
 }
-declare function BugBearButton({ getAppContext, position, buttonStyle, draggable, initialX, initialY, minY, maxYOffset, }: BugBearButtonProps): React.JSX.Element | null;
+declare function BugBearButton({ position, buttonStyle, draggable, initialX, initialY, minY, maxYOffset, }: BugBearButtonProps): React.JSX.Element | null;
 
 export { BugBearButton, BugBearProvider, useBugBear };