react-native-bug-reporter 1.0.0

package/src/components/BugReportModal.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type {
+  BugReportInput,
+  BugSeverity,
+  CollectedContext,
+  ScreenshotData,
+  SubmitState,
+} from '../types';
+import type { ResolvedTheme } from '../theme';
+import { SeveritySelector } from './SeveritySelector';
+import { ScreenshotPreview } from './ScreenshotPreview';
+
+interface Props {
+  visible: boolean;
+  screenshot: ScreenshotData | null;
+  context: CollectedContext | null;
+  /** Show the "Automatically attached" summary. Defaults to true. */
+  showContext?: boolean;
+  submitState: SubmitState;
+  errorMessage?: string | null;
+  theme: ResolvedTheme;
+  onRemoveScreenshot: () => void;
+  /** Open the (top-level) screenshot annotation editor. */
+  onRequestEdit: () => void;
+  onSubmit: (input: BugReportInput) => void;
+  onClose: () => void;
+}
+
+const SUBMIT_LABELS: Partial<Record<SubmitState, string>> = {
+  collecting: 'Collecting…',
+  uploading: 'Uploading…',
+  saving: 'Saving…',
+};
+
+export function BugReportModal({
+  visible,
+  screenshot,
+  context,
+  showContext = true,
+  submitState,
+  errorMessage,
+  theme,
+  onRemoveScreenshot,
+  onRequestEdit,
+  onSubmit,
+  onClose,
+}: Props) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [severity, setSeverity] = useState<BugSeverity>('medium');
+  const [touched, setTouched] = useState(false);
+
+  // Reset the form whenever the modal is freshly opened.
+  useEffect(() => {
+    if (visible) {
+      setTitle('');
+      setDescription('');
+      setSeverity('medium');
+      setTouched(false);
+    }
+  }, [visible]);
+
+  const busy =
+    submitState === 'collecting' ||
+    submitState === 'uploading' ||
+    submitState === 'saving';
+  const titleValid = title.trim().length > 0;
+
+  const handleSubmit = () => {
+    setTouched(true);
+    if (!titleValid || busy) return;
+    onSubmit({ title, description, severity });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={busy ? undefined : onClose}>
+      <KeyboardAvoidingView
+        style={styles.backdrop}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <View style={[styles.sheet, { backgroundColor: theme.backgroundColor }]}>
+          <View style={styles.handle} />
+          <View style={styles.header}>
+            <Text style={[styles.heading, { color: theme.textColor }]}>
+              Report a bug
+            </Text>
+            <TouchableOpacity
+              onPress={onClose}
+              disabled={busy}
+              accessibilityRole="button"
+              accessibilityLabel="Close">
+              <Text style={[styles.close, { color: theme.mutedColor, opacity: busy ? 0.4 : 1 }]}>
+                ✕
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.body}>
+            <ScreenshotPreview
+              screenshot={screenshot}
+              onRemove={onRemoveScreenshot}
+              onEdit={onRequestEdit}
+              theme={theme}
+            />
+
+            <Text style={[styles.label, { color: theme.textColor }]}>Title *</Text>
+            <TextInput
+              value={title}
+              onChangeText={setTitle}
+              placeholder="Short summary of the issue"
+              placeholderTextColor={theme.mutedColor}
+              editable={!busy}
+              style={[
+                styles.input,
+                {
+                  color: theme.textColor,
+                  borderColor:
+                    touched && !titleValid ? theme.errorColor : theme.borderColor,
+                },
+              ]}
+            />
+            {touched && !titleValid && (
+              <Text style={[styles.errorText, { color: theme.errorColor }]}>
+                A title is required
+              </Text>
+            )}
+
+            <Text style={[styles.label, { color: theme.textColor }]}>Description</Text>
+            <TextInput
+              value={description}
+              onChangeText={setDescription}
+              placeholder="What happened? What did you expect?"
+              placeholderTextColor={theme.mutedColor}
+              editable={!busy}
+              multiline
+              numberOfLines={4}
+              style={[
+                styles.input,
+                styles.textArea,
+                { color: theme.textColor, borderColor: theme.borderColor },
+              ]}
+            />
+
+            <Text style={[styles.label, { color: theme.textColor }]}>Severity</Text>
+            <SeveritySelector value={severity} onChange={setSeverity} theme={theme} />
+
+            {showContext && context && (
+              <View style={[styles.context, { borderColor: theme.borderColor }]}>
+                <Text style={[styles.contextTitle, { color: theme.mutedColor }]}>
+                  Automatically attached
+                </Text>
+                <ContextRow theme={theme} label="Screen" value={context.currentScreen || '—'} />
+                <ContextRow
+                  theme={theme}
+                  label="User"
+                  value={context.user.name || context.user.email || 'Anonymous'}
+                />
+                <ContextRow
+                  theme={theme}
+                  label="App"
+                  value={`${context.app.version} (${context.app.buildNumber})`}
+                />
+                <ContextRow
+                  theme={theme}
+                  label="Device"
+                  value={`${context.device.brand} ${context.device.model} · ${context.device.systemName} ${context.device.systemVersion}`}
+                />
+                <ContextRow
+                  theme={theme}
+                  label="Network"
+                  value={context.network.type}
+                />
+              </View>
+            )}
+
+            {errorMessage && (
+              <Text style={[styles.errorText, { color: theme.errorColor }]}>
+                {errorMessage}
+              </Text>
+            )}
+          </ScrollView>
+
+          <View style={[styles.footer, { borderColor: theme.borderColor }]}>
+            <TouchableOpacity
+              accessibilityRole="button"
+              onPress={handleSubmit}
+              disabled={busy}
+              style={[
+                styles.submit,
+                { backgroundColor: theme.primaryColor, opacity: busy ? 0.7 : 1 },
+              ]}>
+              {busy ? (
+                <View style={styles.submitBusy}>
+                  <ActivityIndicator color="#fff" size="small" />
+                  <Text style={styles.submitText}>
+                    {SUBMIT_LABELS[submitState] || 'Submitting…'}
+                  </Text>
+                </View>
+              ) : (
+                <Text style={styles.submitText}>Submit report</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+function ContextRow({
+  label,
+  value,
+  theme,
+}: {
+  label: string;
+  value: string;
+  theme: ResolvedTheme;
+}) {
+  return (
+    <View style={styles.contextRow}>
+      <Text style={[styles.contextLabel, { color: theme.mutedColor }]}>{label}</Text>
+      <Text style={[styles.contextValue, { color: theme.textColor }]} numberOfLines={1}>
+        {value}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  sheet: {
+    maxHeight: '92%',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 8,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#cbd5e1',
+    marginBottom: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  heading: { fontSize: 18, fontWeight: '700' },
+  close: { fontSize: 18, fontWeight: '600', padding: 4 },
+  body: { paddingHorizontal: 20, paddingBottom: 16, gap: 6 },
+  label: { fontSize: 13, fontWeight: '600', marginTop: 14, marginBottom: 6 },
+  input: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: Platform.OS === 'ios' ? 12 : 8,
+    fontSize: 15,
+  },
+  textArea: { height: 100, textAlignVertical: 'top' },
+  errorText: { fontSize: 12, marginTop: 4 },
+  context: {
+    marginTop: 18,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    gap: 6,
+  },
+  contextTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 4,
+  },
+  contextRow: { flexDirection: 'row', justifyContent: 'space-between', gap: 12 },
+  contextLabel: { fontSize: 12 },
+  contextValue: { fontSize: 12, flex: 1, textAlign: 'right' },
+  footer: {
+    padding: 16,
+    paddingBottom: Platform.OS === 'ios' ? 28 : 16,
+    borderTopWidth: 1,
+  },
+  submit: {
+    borderRadius: 12,
+    paddingVertical: 15,
+    alignItems: 'center',
+  },
+  submitBusy: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  submitText: { color: '#fff', fontSize: 16, fontWeight: '700' },
+});