react-native-bug-reporter 1.0.0

package/src/components/ScreenshotEditor.tsx

@@ -0,0 +1,410 @@
+import { Fragment, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  Modal,
+  PanResponder,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import Svg, {
+  Circle,
+  Line,
+  Path,
+  Polygon,
+  Text as SvgText,
+} from 'react-native-svg';
+import { captureRef } from 'react-native-view-shot';
+import type { ScreenshotData } from '../types';
+import type { ResolvedTheme } from '../theme';
+import { logger } from '../utils/logger';
+
+type Tool = 'pen' | 'arrow' | 'point' | 'text';
+
+interface PathEl {
+  kind: 'path';
+  d: string;
+  color: string;
+  width: number;
+}
+interface ArrowEl {
+  kind: 'arrow';
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  color: string;
+  width: number;
+}
+interface PointEl {
+  kind: 'point';
+  x: number;
+  y: number;
+  color: string;
+}
+interface TextEl {
+  kind: 'text';
+  x: number;
+  y: number;
+  text: string;
+  color: string;
+}
+type Element = PathEl | ArrowEl | PointEl | TextEl;
+
+interface Props {
+  screenshot: ScreenshotData;
+  theme: ResolvedTheme;
+  onCancel: () => void;
+  onSave: (uri: string) => void;
+}
+
+const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#ffffff', '#111827'];
+const STROKE = 4;
+const ARROW_HEAD = 16;
+const TEXT_SIZE = 22;
+
+/**
+ * Full-screen screenshot annotation editor. Lets the reporter draw on the
+ * captured screenshot to point at the bug — freehand pen, arrows, points, and
+ * text labels — then flattens everything into a single PNG via view-shot.
+ */
+export function ScreenshotEditor({ screenshot, theme, onCancel, onSave }: Props) {
+  const [tool, setTool] = useState<Tool>('pen');
+  const [color, setColor] = useState<string>(COLORS[0]);
+  const [elements, setElements] = useState<Element[]>([]);
+  const [draft, setDraft] = useState<Element | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [textPrompt, setTextPrompt] = useState<{ x: number; y: number; value: string } | null>(null);
+
+  const canvasRef = useRef<View>(null);
+  // Refs so the (stable) PanResponder always sees the latest tool/color.
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+  const colorRef = useRef(color);
+  colorRef.current = color;
+  const draftRef = useRef<Element | null>(null);
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (e: GestureResponderEvent) => {
+          const { locationX: x, locationY: y } = e.nativeEvent;
+          const t = toolRef.current;
+          const c = colorRef.current;
+          if (t === 'pen') {
+            draftRef.current = { kind: 'path', d: `M${x} ${y}`, color: c, width: STROKE };
+            setDraft(draftRef.current);
+          } else if (t === 'arrow') {
+            draftRef.current = { kind: 'arrow', x1: x, y1: y, x2: x, y2: y, color: c, width: STROKE };
+            setDraft(draftRef.current);
+          } else if (t === 'point') {
+            setElements(prev => [...prev, { kind: 'point', x, y, color: c }]);
+          } else if (t === 'text') {
+            setTextPrompt({ x, y, value: '' });
+          }
+        },
+        onPanResponderMove: (e: GestureResponderEvent) => {
+          const { locationX: x, locationY: y } = e.nativeEvent;
+          const d = draftRef.current;
+          if (!d) return;
+          if (d.kind === 'path') {
+            d.d += ` L${x} ${y}`;
+            setDraft({ ...d });
+          } else if (d.kind === 'arrow') {
+            d.x2 = x;
+            d.y2 = y;
+            setDraft({ ...d });
+          }
+        },
+        onPanResponderRelease: () => {
+          const d = draftRef.current;
+          if (d) {
+            setElements(prev => [...prev, d]);
+            draftRef.current = null;
+            setDraft(null);
+          }
+        },
+      }),
+    [],
+  );
+
+  const undo = () => setElements(prev => prev.slice(0, -1));
+  const clear = () => {
+    setElements([]);
+    setDraft(null);
+    draftRef.current = null;
+  };
+
+  const commitText = () => {
+    if (textPrompt && textPrompt.value.trim()) {
+      setElements(prev => [
+        ...prev,
+        { kind: 'text', x: textPrompt.x, y: textPrompt.y, text: textPrompt.value.trim(), color },
+      ]);
+    }
+    setTextPrompt(null);
+  };
+
+  const handleSave = async () => {
+    // Nothing drawn — just keep the original.
+    if (elements.length === 0) {
+      onSave(screenshot.uri);
+      return;
+    }
+    setSaving(true);
+    try {
+      // Let the SVG/layout settle before snapshotting (Android needs a tick).
+      await new Promise<void>(res => setTimeout(() => res(), 150));
+      let uri = await captureRef(canvasRef, {
+        format: 'png',
+        quality: 1,
+        result: 'tmpfile',
+      });
+      if (uri && !uri.startsWith('file://') && !uri.startsWith('content://')) {
+        uri = `file://${uri}`;
+      }
+      onSave(uri || screenshot.uri);
+    } catch (e) {
+      logger.warn('failed to flatten annotated screenshot', e);
+      onSave(screenshot.uri); // fall back to the un-annotated image
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const all = draft ? [...elements, draft] : elements;
+
+  return (
+    <Modal visible animationType="slide" onRequestClose={onCancel}>
+      <View style={[styles.container, { backgroundColor: '#000' }]}>
+        {/* Top bar */}
+        <View style={styles.topBar}>
+          <TouchableOpacity onPress={onCancel} style={styles.barBtn} disabled={saving}>
+            <Text style={styles.barText}>Cancel</Text>
+          </TouchableOpacity>
+          <Text style={styles.barTitle}>Mark the bug</Text>
+          <TouchableOpacity
+            onPress={handleSave}
+            disabled={saving}
+            style={[styles.saveBtn, { backgroundColor: theme.primaryColor }]}>
+            {saving ? (
+              <ActivityIndicator color="#fff" size="small" />
+            ) : (
+              <Text style={styles.saveText}>✓ Save</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+
+        {/* Canvas — fills the space between top bar and tools so the toolbar
+            and Save button are always visible regardless of screenshot size. */}
+        <View style={styles.canvasWrap}>
+          <View ref={canvasRef} collapsable={false} style={styles.canvas}>
+            <Image source={{ uri: screenshot.uri }} style={StyleSheet.absoluteFill} resizeMode="contain" />
+            <Svg style={StyleSheet.absoluteFill} {...panResponder.panHandlers}>
+              {all.map((el, i) => renderEl(el, i))}
+            </Svg>
+          </View>
+        </View>
+
+        {/* Color row */}
+        <View style={styles.colorRow}>
+          {COLORS.map(c => (
+            <TouchableOpacity
+              key={c}
+              onPress={() => setColor(c)}
+              style={[
+                styles.swatch,
+                { backgroundColor: c },
+                color === c && styles.swatchActive,
+              ]}
+            />
+          ))}
+        </View>
+
+        {/* Tool row */}
+        <View style={styles.toolRow}>
+          <ToolButton label="✏️ Pen" active={tool === 'pen'} onPress={() => setTool('pen')} />
+          <ToolButton label="➴ Arrow" active={tool === 'arrow'} onPress={() => setTool('arrow')} />
+          <ToolButton label="● Point" active={tool === 'point'} onPress={() => setTool('point')} />
+          <ToolButton label="T Text" active={tool === 'text'} onPress={() => setTool('text')} />
+          <ToolButton label="↺ Undo" onPress={undo} />
+          <ToolButton label="🗑 Clear" onPress={clear} />
+        </View>
+
+        {/* Text entry */}
+        {textPrompt && (
+          <View style={styles.textPrompt}>
+            <TextInput
+              autoFocus
+              value={textPrompt.value}
+              onChangeText={v => setTextPrompt(p => (p ? { ...p, value: v } : p))}
+              onSubmitEditing={commitText}
+              placeholder="Type a label…"
+              placeholderTextColor="#888"
+              style={styles.textInput}
+            />
+            <TouchableOpacity onPress={commitText} style={styles.textAdd}>
+              <Text style={styles.textAddLabel}>Add</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+}
+
+function renderEl(el: Element, key: number) {
+  switch (el.kind) {
+    case 'path':
+      return (
+        <Path
+          key={key}
+          d={el.d}
+          stroke={el.color}
+          strokeWidth={el.width}
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      );
+    case 'arrow': {
+      const angle = Math.atan2(el.y2 - el.y1, el.x2 - el.x1);
+      const a1 = angle - Math.PI / 6;
+      const a2 = angle + Math.PI / 6;
+      const head = `${el.x2},${el.y2} ${el.x2 - ARROW_HEAD * Math.cos(a1)},${
+        el.y2 - ARROW_HEAD * Math.sin(a1)
+      } ${el.x2 - ARROW_HEAD * Math.cos(a2)},${el.y2 - ARROW_HEAD * Math.sin(a2)}`;
+      return (
+        <Fragment key={key}>
+          <Line x1={el.x1} y1={el.y1} x2={el.x2} y2={el.y2} stroke={el.color} strokeWidth={el.width} strokeLinecap="round" />
+          <Polygon points={head} fill={el.color} />
+        </Fragment>
+      );
+    }
+    case 'point':
+      return (
+        <Circle key={key} cx={el.x} cy={el.y} r={9} fill="none" stroke={el.color} strokeWidth={4} />
+      );
+    case 'text':
+      return (
+        <SvgText
+          key={key}
+          x={el.x}
+          y={el.y}
+          fill={el.color}
+          fontSize={TEXT_SIZE}
+          fontWeight="bold"
+          stroke="#00000055"
+          strokeWidth={0.5}>
+          {el.text}
+        </SvgText>
+      );
+    default:
+      return null;
+  }
+}
+
+function ToolButton({
+  label,
+  active,
+  onPress,
+}: {
+  label: string;
+  active?: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.toolBtn, active && styles.toolBtnActive]}>
+      <Text style={[styles.toolLabel, active && styles.toolLabelActive]}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 14,
+    paddingTop: (Platform.OS === 'android' ? StatusBar.currentHeight ?? 24 : 50) + 8,
+    paddingBottom: 10,
+  },
+  barBtn: { padding: 6, minWidth: 64 },
+  barText: { color: '#fff', fontSize: 16 },
+  barTitle: { color: '#fff', fontSize: 16, fontWeight: '600' },
+  saveBtn: {
+    minWidth: 84,
+    paddingVertical: 9,
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  saveText: { color: '#fff', fontSize: 15, fontWeight: '800' },
+  canvasWrap: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  canvas: { flex: 1, width: '100%', backgroundColor: '#000' },
+  colorRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 12,
+  },
+  swatch: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: '#444' },
+  swatchActive: { borderColor: '#fff', transform: [{ scale: 1.15 }] },
+  toolRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingBottom: 34,
+    paddingTop: 4,
+  },
+  toolBtn: {
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+    backgroundColor: '#1c1f26',
+  },
+  toolBtnActive: { backgroundColor: '#2563eb' },
+  toolLabel: { color: '#cbd2dc', fontSize: 13, fontWeight: '600' },
+  toolLabelActive: { color: '#fff' },
+  textPrompt: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    gap: 8,
+    padding: 12,
+    paddingBottom: 28,
+    backgroundColor: '#14161c',
+  },
+  textInput: {
+    flex: 1,
+    backgroundColor: '#0b0c10',
+    color: '#fff',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+  },
+  textAdd: {
+    backgroundColor: '#2563eb',
+    borderRadius: 8,
+    paddingHorizontal: 18,
+    justifyContent: 'center',
+  },
+  textAddLabel: { color: '#fff', fontWeight: '700' },
+});

package/src/components/ScreenshotPreview.tsx

@@ -0,0 +1,98 @@
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { ScreenshotData } from '../types';
+import type { ResolvedTheme } from '../theme';
+
+interface Props {
+  screenshot: ScreenshotData | null;
+  onRemove: () => void;
+  onEdit?: () => void;
+  theme: ResolvedTheme;
+}
+
+export function ScreenshotPreview({ screenshot, onRemove, onEdit, theme }: Props) {
+  if (!screenshot?.uri) {
+    return (
+      <View style={[styles.empty, { borderColor: theme.borderColor }]}>
+        <Text style={[styles.emptyText, { color: theme.mutedColor }]}>
+          No screenshot attached
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { borderColor: theme.borderColor }]}>
+      <Image source={{ uri: screenshot.uri }} style={styles.image} resizeMode="contain" />
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel="Remove screenshot"
+        onPress={onRemove}
+        style={styles.removeBtn}>
+        <Text style={styles.removeText}>✕</Text>
+      </TouchableOpacity>
+      {onEdit && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel="Annotate screenshot"
+          onPress={onEdit}
+          style={[styles.editBtn, { backgroundColor: theme.primaryColor }]}>
+          <Text style={styles.editText}>✏️ Mark the bug</Text>
+        </TouchableOpacity>
+      )}
+      <View style={styles.badge}>
+        <Text style={styles.badgeText}>Attached</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 180,
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: 'hidden',
+    backgroundColor: '#0b0c10',
+  },
+  image: { width: '100%', height: '100%' },
+  empty: {
+    height: 80,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: { fontSize: 13 },
+  removeBtn: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeText: { color: '#fff', fontSize: 14, fontWeight: '700' },
+  editBtn: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  editText: { color: '#fff', fontSize: 12, fontWeight: '700' },
+  badge: {
+    position: 'absolute',
+    bottom: 8,
+    left: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    backgroundColor: 'rgba(37,99,235,0.9)',
+  },
+  badgeText: { color: '#fff', fontSize: 11, fontWeight: '600' },
+});

package/src/components/SeveritySelector.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SEVERITIES, type BugSeverity } from '../types';
+import { SEVERITY_COLORS, type ResolvedTheme } from '../theme';
+
+interface Props {
+  value: BugSeverity;
+  onChange: (value: BugSeverity) => void;
+  theme: ResolvedTheme;
+}
+
+const LABELS: Record<BugSeverity, string> = {
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  critical: 'Critical',
+};
+
+export function SeveritySelector({ value, onChange, theme }: Props) {
+  return (
+    <View style={styles.row}>
+      {SEVERITIES.map(sev => {
+        const selected = sev === value;
+        const color = SEVERITY_COLORS[sev];
+        return (
+          <TouchableOpacity
+            key={sev}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            onPress={() => onChange(sev)}
+            style={[
+              styles.chip,
+              { borderColor: selected ? color : theme.borderColor },
+              selected && { backgroundColor: color },
+            ]}>
+            <Text
+              style={[
+                styles.label,
+                { color: selected ? '#fff' : theme.mutedColor },
+              ]}>
+              {LABELS[sev]}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', gap: 8 },
+  chip: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    alignItems: 'center',
+  },
+  label: { fontSize: 13, fontWeight: '600' },
+});

package/src/context/BugReporterContext.ts

@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'react';
+import type { ScreenshotData } from '../types';
+
+export interface BugReporterContextValue {
+  /** Whether automatic screenshot detection is currently active. */
+  isAutoDetectEnabled: boolean;
+  /** Open the report modal manually, optionally pre-attaching a screenshot. */
+  openReporter: (screenshot?: ScreenshotData | null) => void;
+  /** Close the report modal. */
+  closeReporter: () => void;
+  /** True while the modal is visible. */
+  isOpen: boolean;
+}
+
+export const BugReporterContext = createContext<BugReporterContextValue | null>(null);
+
+/**
+ * Access the bug reporter imperatively, e.g. to wire a "Report a bug" button:
+ *
+ *   const { openReporter } = useBugReporter();
+ *   <Button title="Report a bug" onPress={() => openReporter()} />
+ */
+export function useBugReporter(): BugReporterContextValue {
+  const ctx = useContext(BugReporterContext);
+  if (!ctx) {
+    throw new Error('useBugReporter must be used within a <BugReporterProvider>');
+  }
+  return ctx;
+}

package/src/hooks/useScreenshotDetector.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { screenshotDetector } from '../native/ScreenshotDetector';
+import type { ScreenshotData } from '../types';
+
+/**
+ * Subscribes to native screenshot detection while `enabled` is true.
+ * Calls `onScreenshot` with the captured image whenever the user takes one.
+ */
+export function useScreenshotDetector(
+  enabled: boolean,
+  onScreenshot: (screenshot: ScreenshotData) => void,
+) {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const unsubscribe = screenshotDetector.subscribe(onScreenshot);
+    return unsubscribe;
+  }, [enabled, onScreenshot]);
+}

package/src/index.ts

@@ -0,0 +1,51 @@
+/**
+ * React Native Universal Bug Reporter SDK
+ * ---------------------------------------
+ * Drop-in bug reporting: detect screenshots, collect device/app/user context,
+ * and ship everything to Supabase (Postgres + Storage). A Database Webhook →
+ * Edge Function sends the notification email.
+ *
+ * Quick start:
+ *
+ *   import { BugReporterProvider } from 'react-native-bug-reporter';
+ *
+ *   <BugReporterProvider config={{ supabaseUrl: '...', supabaseAnonKey: '...' }}>
+ *     <App />
+ *   </BugReporterProvider>
+ */
+
+export { BugReporterProvider } from './BugReporterProvider';
+export { useBugReporter } from './context/BugReporterContext';
+export { BugReportAdminScreen } from './components/BugReportAdminScreen';
+
+// Navigation tracking helpers
+export {
+  setCurrentScreen,
+  getCurrentScreen,
+  getActiveRouteName,
+} from './navigation/screenTracker';
+
+// Lower-level pieces, exported for advanced/custom integrations.
+export { collectContext } from './collectors/collectContext';
+export { submitBugReport } from './services/bugReportService';
+export {
+  subscribeToReports,
+  updateReportStatus,
+} from './services/supabaseService';
+export { screenshotDetector } from './native/ScreenshotDetector';
+
+export type {
+  BugReporterConfig,
+  BugReporterTheme,
+  BugReport,
+  BugReportInput,
+  BugSeverity,
+  CollectedContext,
+  DeviceInfo,
+  AppInfo,
+  NetworkInfo,
+  UserInfo,
+  ScreenshotData,
+  SubmitState,
+} from './types';
+export { SEVERITIES } from './types';