@mindedsolutions/bug-reporter-sdk 0.1.2 → 0.3.0

package/dist/components/ReportModal.js

@@ -12,18 +12,24 @@ const ScreenshotPreview_1 = require("./ScreenshotPreview");
 const constants_1 = require("../constants");
 function ReportModal() {
     const { config, translations, isModalVisible, closeModal } = (0, useBugReporter_1.useBugReporter)();
-    const { captureScreenshot, uploadScreenshot } = (0, useScreenCapture_1.useScreenCapture)();
+    const { captureAndUpload } = (0, useScreenCapture_1.useScreenCapture)();
     const { getDeviceInfo, getAppInfo, getNetworkInfo } = (0, useDeviceInfo_1.useDeviceInfo)();
     const [description, setDescription] = (0, react_1.useState)('');
     const [category, setCategory] = (0, react_1.useState)(config.defaultCategory ?? 'Bug');
     const [severity, setSeverity] = (0, react_1.useState)();
     const [screenshotUri, setScreenshotUri] = (0, react_1.useState)(null);
+    const [screenshotUrl, setScreenshotUrl] = (0, react_1.useState)(null);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const categories = config.categories ?? constants_1.DEFAULT_CATEGORIES;
-    // Capture screenshot when modal opens
+    // Capture screenshot and upload when modal opens
     (0, react_1.useEffect)(() => {
         if (isModalVisible) {
-            captureScreenshot().then(setScreenshotUri);
+            captureAndUpload().then((result) => {
+                if (result) {
+                    setScreenshotUri(result.uri);
+                    setScreenshotUrl(result.url || null);
+                }
+            });
         }
         else {
             // Reset form when modal closes
@@ -31,6 +37,7 @@ function ReportModal() {
             setCategory(config.defaultCategory ?? 'Bug');
             setSeverity(undefined);
             setScreenshotUri(null);
+            setScreenshotUrl(null);
             setIsSubmitting(false);
         }
     }, [isModalVisible]);
@@ -42,17 +49,11 @@ function ReportModal() {
             const device = getDeviceInfo();
             const app = getAppInfo();
             const network = await getNetworkInfo();
-            let screenshotUrl;
-            if (screenshotUri) {
-                const url = await uploadScreenshot(screenshotUri);
-                if (url)
-                    screenshotUrl = url;
-            }
             const payload = {
                 description: description.trim(),
                 category,
                 severity,
-                screenshot_url: screenshotUrl,
+                screenshot_url: screenshotUrl || undefined,
                 device_brand: device.brand,
                 device_model: device.model,
                 device_os: device.os,
@@ -82,7 +83,7 @@ function ReportModal() {
         finally {
             setIsSubmitting(false);
         }
-    }, [description, category, severity, screenshotUri, config, translations, closeModal]);
+    }, [description, category, severity, screenshotUrl, config, translations, closeModal]);
     return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: isModalVisible, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: closeModal, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.safeTop }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: closeModal, disabled: isSubmitting, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cancelText, children: translations.cancel }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: translations.reportBug }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleSubmit, disabled: isSubmitting || !description.trim(), children: isSubmitting ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#6366f1" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.submitText, !description.trim() && styles.disabledText], children: translations.submit })) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.body, contentContainerStyle: styles.bodyContent, keyboardShouldPersistTaps: "handled", children: [screenshotUri && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: translations.screenshot }), (0, jsx_runtime_1.jsx)(ScreenshotPreview_1.ScreenshotPreview, { uri: screenshotUri, onRemove: () => setScreenshotUri(null), removeLabel: translations.removeScreenshot })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: translations.description }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.textInput, value: description, onChangeText: setDescription, placeholder: translations.descriptionPlaceholder, placeholderTextColor: "#9ca3af", multiline: true, numberOfLines: 4, textAlignVertical: "top" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: translations.category }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.chipRow, children: categories.map((cat) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.chip, category === cat && styles.chipActive], onPress: () => setCategory(cat), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.chipText, category === cat && styles.chipTextActive], children: cat }) }, cat))) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.label, children: [translations.severity, " ", (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.optional, children: ["(", translations.optional, ")"] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.chipRow, children: constants_1.SEVERITIES.map((sev) => {
                                         const labels = {
                                             low: translations.severityLow,

package/dist/hooks/useScreenCapture.d.ts

@@ -1,4 +1,6 @@
 export declare function useScreenCapture(): {
-    captureScreenshot: () => Promise<string | null>;
-    uploadScreenshot: (uri: string) => Promise<string | null>;
+    captureAndUpload: () => Promise<{
+        uri: string;
+        url: string;
+    } | null>;
 };

package/dist/hooks/useScreenCapture.js

@@ -6,45 +6,62 @@ const react_native_view_shot_1 = require("react-native-view-shot");
 const supabase_js_1 = require("@supabase/supabase-js");
 const useBugReporter_1 = require("./useBugReporter");
 const constants_1 = require("../constants");
+function base64ToArrayBuffer(base64) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    const clean = base64.replace(/[^A-Za-z0-9+/]/g, '');
+    const len = clean.length;
+    const byteLen = (len * 3) / 4 - (base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0);
+    const buffer = new ArrayBuffer(byteLen);
+    const bytes = new Uint8Array(buffer);
+    let p = 0;
+    for (let i = 0; i < len; i += 4) {
+        const a = chars.indexOf(clean[i]);
+        const b = chars.indexOf(clean[i + 1]);
+        const c = chars.indexOf(clean[i + 2]);
+        const d = chars.indexOf(clean[i + 3]);
+        const bits = (a << 18) | (b << 12) | (c << 6) | d;
+        bytes[p++] = (bits >> 16) & 0xff;
+        if (p < byteLen)
+            bytes[p++] = (bits >> 8) & 0xff;
+        if (p < byteLen)
+            bytes[p++] = bits & 0xff;
+    }
+    return buffer;
+}
 function useScreenCapture() {
     const { viewRef, config } = (0, useBugReporter_1.useBugReporter)();
-    const captureScreenshot = (0, react_1.useCallback)(async () => {
+    const captureAndUpload = (0, react_1.useCallback)(async () => {
         try {
             if (!viewRef.current)
                 return null;
+            // Capture as both URI (for preview) and base64 (for upload)
             const uri = await (0, react_native_view_shot_1.captureRef)(viewRef.current, {
                 format: constants_1.SCREENSHOT_FORMAT,
                 quality: constants_1.SCREENSHOT_QUALITY,
             });
-            return uri;
-        }
-        catch {
-            return null;
-        }
-    }, [viewRef, config]);
-    const uploadScreenshot = (0, react_1.useCallback)(async (uri) => {
-        try {
+            const base64 = await (0, react_native_view_shot_1.captureRef)(viewRef.current, {
+                format: constants_1.SCREENSHOT_FORMAT,
+                quality: constants_1.SCREENSHOT_QUALITY,
+                result: 'base64',
+            });
+            // Upload base64 decoded to Supabase Storage
             const supabase = (0, supabase_js_1.createClient)(config.supabaseUrl, config.supabaseAnonKey);
             const uniqueId = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
             const fileName = `${config.projectId}/${uniqueId}.jpg`;
-            // React Native: use FormData with file URI (fetch blob doesn't work reliably)
-            const formData = new FormData();
-            formData.append('', {
-                uri,
-                name: `${uniqueId}.jpg`,
-                type: 'image/jpeg',
-            });
+            const arrayBuffer = base64ToArrayBuffer(base64);
             const { error } = await supabase.storage
                 .from('screenshots')
-                .upload(fileName, formData, { contentType: 'multipart/form-data' });
-            if (error)
-                return null;
+                .upload(fileName, arrayBuffer, { contentType: 'image/jpeg' });
+            if (error) {
+                // Upload failed, still return URI for preview but no remote URL
+                return { uri, url: '' };
+            }
             const { data } = supabase.storage.from('screenshots').getPublicUrl(fileName);
-            return data.publicUrl;
+            return { uri, url: data.publicUrl };
         }
         catch {
             return null;
         }
-    }, [config]);
-    return { captureScreenshot, uploadScreenshot };
+    }, [viewRef, config]);
+    return { captureAndUpload };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mindedsolutions/bug-reporter-sdk",
-  "version": "0.1.2",
-  "description": "In-app bug reporting SDK for React Native/Expo with shake detection, screenshot capture, and Supabase integration",
+  "version": "0.3.0",
+  "description": "In-app bug reporting and feature request SDK for React Native/Expo with shake detection, screenshot capture, feature board, and Supabase integration",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",