@bbearai/react-native 0.1.0

package/README.md

@@ -0,0 +1,196 @@
+# @bugbearai/react-native
+
+BugBear QA widget for React Native mobile apps.
+
+## Installation
+
+```bash
+npm install @bugbearai/react-native @bugbearai/core
+# or
+yarn add @bugbearai/react-native @bugbearai/core
+```
+
+## Quick Start
+
+```tsx
+import { BugBearProvider, BugBearWidget } from '@bugbearai/react-native';
+
+function App() {
+  return (
+    <BugBearProvider
+      projectId="your-project-id"
+      getCurrentUser={async () => ({
+        id: user.id,
+        email: user.email,
+      })}
+    >
+      <YourApp />
+      <BugBearWidget />
+    </BugBearProvider>
+  );
+}
+```
+
+## Monorepo Setup
+
+When using BugBear in a monorepo (e.g., with Turborepo, Nx, or Yarn Workspaces), you may encounter React duplicate instance errors like:
+
+- "Invalid hook call"
+- "Cannot read property 'useState' of null"
+- "Hooks can only be called inside the body of a function component"
+
+This happens when Metro (React Native's bundler) picks up different React instances from different `node_modules` folders.
+
+### Fix: Configure Metro to use a single React instance
+
+Update your `metro.config.js` in the React Native app:
+
+```javascript
+const path = require('path');
+const { getDefaultConfig } = require('@react-native/metro-config');
+
+// Get the monorepo root (adjust path as needed)
+const monorepoRoot = path.resolve(__dirname, '../..');
+
+const config = getDefaultConfig(__dirname);
+
+// Block React from monorepo root to prevent duplicates
+config.resolver.blockList = [
+  ...(config.resolver.blockList || []),
+  new RegExp(`${monorepoRoot}/node_modules/react/.*`),
+  new RegExp(`${monorepoRoot}/node_modules/react-native/.*`),
+];
+
+// Ensure Metro uses the app's React instance
+config.resolver.extraNodeModules = {
+  react: path.resolve(__dirname, 'node_modules/react'),
+  'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+};
+
+// Watch the monorepo packages
+config.watchFolders = [
+  monorepoRoot,
+];
+
+module.exports = config;
+```
+
+### Alternative: Yarn/npm Workspaces hoisting
+
+If you're using Yarn workspaces, you can also configure hoisting to ensure a single React version:
+
+```json
+// package.json (workspace root)
+{
+  "workspaces": {
+    "packages": ["apps/*", "packages/*"],
+    "nohoist": [
+      "**/react-native",
+      "**/react-native/**"
+    ]
+  }
+}
+```
+
+## Configuration Options
+
+```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
+>
+```
+
+## Navigation Tracking
+
+BugBear can automatically track navigation history for better bug context. If you're using React Navigation:
+
+```tsx
+import { useNavigationContainerRef } from '@react-navigation/native';
+
+function App() {
+  const navigationRef = useNavigationContainerRef();
+  const routeNameRef = useRef<string>();
+
+  return (
+    <BugBearProvider
+      projectId="your-project-id"
+      getCurrentUser={...}
+      getNavigationHistory={() => routeNameRef.current ? [routeNameRef.current] : []}
+    >
+      <NavigationContainer
+        ref={navigationRef}
+        onReady={() => {
+          routeNameRef.current = navigationRef.getCurrentRoute()?.name;
+        }}
+        onStateChange={() => {
+          const currentRouteName = navigationRef.getCurrentRoute()?.name;
+          routeNameRef.current = currentRouteName;
+        }}
+      >
+        {/* Your navigation */}
+      </NavigationContainer>
+      <BugBearWidget />
+    </BugBearProvider>
+  );
+}
+```
+
+## Button Configuration
+
+The BugBear button is draggable by default with edge-snapping behavior:
+
+```tsx
+<BugBearButton
+  draggable={true}           // Enable/disable dragging (default: true)
+  position="bottom-right"    // Initial position: 'bottom-right' | 'bottom-left'
+  initialX={100}             // Custom initial X position (optional)
+  initialY={500}             // Custom initial Y position (optional)
+  minY={100}                 // Minimum Y from top (default: 100)
+  maxYOffset={160}           // Max Y offset from bottom (default: 160)
+/>
+```
+
+The button automatically snaps to the nearest screen edge when released.
+
+## Troubleshooting
+
+### Widget not showing
+
+1. Make sure the current user's email is registered as a tester in the BugBear dashboard
+2. Verify QA mode is enabled for your project
+3. Check that `getCurrentUser` returns a valid email
+
+### Supabase connection issues
+
+If you're using your own Supabase instance, provide the credentials:
+
+```tsx
+<BugBearProvider
+  projectId="your-project-id"
+  supabaseUrl="https://your-instance.supabase.co"
+  supabaseAnonKey="your-anon-key"
+  getCurrentUser={...}
+>
+```
+
+## Known Limitations
+
+### Button hidden behind modals
+
+The BugBear button renders within the normal React Native view hierarchy using absolute positioning. When your app displays modals, bottom sheets, or the keyboard, the button may be hidden behind them.
+
+This is a platform limitation - React Native doesn't provide a built-in way to render views above all modals without using a Modal component (which would block touch events on the underlying app).
+
+**Workarounds:**
+- Accept that the button won't be accessible when modals are open
+- Consider dismissing the modal to access BugBear
+- For testing flows that involve modals, provide an alternative way to trigger the BugBear widget
+
+We're investigating solutions using `react-native-portal` or similar libraries for future releases.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import { BugBearConfig, BugBearClient, TesterInfo, TestAssignment, DeviceInfo, TesterThread, TesterMessage, AppContext } from '@bbearai/core';
+export { AppContext, BugBearConfig, BugBearReport, DeviceInfo, MessageSenderType, ReportType, Severity, TestAssignment, TesterInfo, TesterMessage, TesterThread, ThreadPriority, ThreadType } from '@bbearai/core';
+
+interface BugBearContextValue {
+    client: BugBearClient | null;
+    isTester: boolean;
+    isQAEnabled: boolean;
+    shouldShowWidget: boolean;
+    testerInfo: TesterInfo | null;
+    assignments: TestAssignment[];
+    currentAssignment: TestAssignment | null;
+    refreshAssignments: () => Promise<void>;
+    isLoading: boolean;
+    getDeviceInfo: () => DeviceInfo;
+    /** Navigate to a route/screen (for deep linking from test cases) */
+    onNavigate?: (route: string) => void;
+    /** Message threads for the current tester */
+    threads: TesterThread[];
+    /** Total unread message count */
+    unreadCount: number;
+    /** Refresh message threads */
+    refreshThreads: () => Promise<void>;
+    /** Get all messages in a thread */
+    getThreadMessages: (threadId: string) => Promise<TesterMessage[]>;
+    /** Send a message to a thread */
+    sendMessage: (threadId: string, content: string) => Promise<boolean>;
+    /** Mark a thread as read */
+    markAsRead: (threadId: string) => Promise<void>;
+}
+declare function useBugBear(): BugBearContextValue;
+interface BugBearProviderProps {
+    config: BugBearConfig;
+    children: ReactNode;
+    /** App version string */
+    appVersion?: string;
+}
+declare function BugBearProvider({ config, children, appVersion }: BugBearProviderProps): React.JSX.Element;
+
+interface BugBearButtonProps {
+    /** Get current app context */
+    getAppContext?: () => AppContext;
+    /** Position of the floating button (used as initial position when draggable) */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Custom button style */
+    buttonStyle?: object;
+    /** Enable draggable button with edge snapping (default: true) */
+    draggable?: boolean;
+    /** Initial X position (overrides position prop) */
+    initialX?: number;
+    /** Initial Y position (overrides position prop) */
+    initialY?: number;
+    /** Minimum Y position from top of screen */
+    minY?: number;
+    /** 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;
+
+export { BugBearButton, BugBearProvider, useBugBear };

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import { BugBearConfig, BugBearClient, TesterInfo, TestAssignment, DeviceInfo, TesterThread, TesterMessage, AppContext } from '@bbearai/core';
+export { AppContext, BugBearConfig, BugBearReport, DeviceInfo, MessageSenderType, ReportType, Severity, TestAssignment, TesterInfo, TesterMessage, TesterThread, ThreadPriority, ThreadType } from '@bbearai/core';
+
+interface BugBearContextValue {
+    client: BugBearClient | null;
+    isTester: boolean;
+    isQAEnabled: boolean;
+    shouldShowWidget: boolean;
+    testerInfo: TesterInfo | null;
+    assignments: TestAssignment[];
+    currentAssignment: TestAssignment | null;
+    refreshAssignments: () => Promise<void>;
+    isLoading: boolean;
+    getDeviceInfo: () => DeviceInfo;
+    /** Navigate to a route/screen (for deep linking from test cases) */
+    onNavigate?: (route: string) => void;
+    /** Message threads for the current tester */
+    threads: TesterThread[];
+    /** Total unread message count */
+    unreadCount: number;
+    /** Refresh message threads */
+    refreshThreads: () => Promise<void>;
+    /** Get all messages in a thread */
+    getThreadMessages: (threadId: string) => Promise<TesterMessage[]>;
+    /** Send a message to a thread */
+    sendMessage: (threadId: string, content: string) => Promise<boolean>;
+    /** Mark a thread as read */
+    markAsRead: (threadId: string) => Promise<void>;
+}
+declare function useBugBear(): BugBearContextValue;
+interface BugBearProviderProps {
+    config: BugBearConfig;
+    children: ReactNode;
+    /** App version string */
+    appVersion?: string;
+}
+declare function BugBearProvider({ config, children, appVersion }: BugBearProviderProps): React.JSX.Element;
+
+interface BugBearButtonProps {
+    /** Get current app context */
+    getAppContext?: () => AppContext;
+    /** Position of the floating button (used as initial position when draggable) */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Custom button style */
+    buttonStyle?: object;
+    /** Enable draggable button with edge snapping (default: true) */
+    draggable?: boolean;
+    /** Initial X position (overrides position prop) */
+    initialX?: number;
+    /** Initial Y position (overrides position prop) */
+    initialY?: number;
+    /** Minimum Y position from top of screen */
+    minY?: number;
+    /** 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;
+
+export { BugBearButton, BugBearProvider, useBugBear };