@mindedsolutions/bug-reporter-sdk 0.1.2 → 0.3.1

package/dist/components/FeatureBoardLink.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle, TextStyle } from 'react-native';
+interface FeatureBoardLinkProps {
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    label?: string;
+}
+export declare function FeatureBoardLink({ style, textStyle, label }: FeatureBoardLinkProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/FeatureBoardLink.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureBoardLink = FeatureBoardLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const useFeatureBoard_1 = require("../hooks/useFeatureBoard");
+const useBugReporter_1 = require("../hooks/useBugReporter");
+function FeatureBoardLink({ style, textStyle, label }) {
+    const { boardUrl, openFeatureBoard } = (0, useFeatureBoard_1.useFeatureBoard)();
+    const { translations } = (0, useBugReporter_1.useBugReporter)();
+    if (!boardUrl)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: openFeatureBoard, style: [styles.button, style], activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.text, textStyle], children: label ?? translations.suggestFeature }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        backgroundColor: '#4f46e5',
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 10,
+        alignItems: 'center',
+    },
+    text: {
+        color: '#ffffff',
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});

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/useFeatureBoard.d.ts

@@ -0,0 +1,4 @@
+export declare function useFeatureBoard(): {
+    boardUrl: string | null;
+    openFeatureBoard: () => void;
+};

package/dist/hooks/useFeatureBoard.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeatureBoard = useFeatureBoard;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const useBugReporter_1 = require("./useBugReporter");
+function useFeatureBoard() {
+    const { config } = (0, useBugReporter_1.useBugReporter)();
+    const boardUrl = (0, react_1.useMemo)(() => {
+        if (!config.featureBoard)
+            return null;
+        const base = config.featureBoard.boardBaseUrl.replace(/\/$/, '');
+        const url = `${base}/${config.projectId}`;
+        return config.userId ? `${url}?voter_id=${encodeURIComponent(config.userId)}` : url;
+    }, [config.featureBoard, config.projectId, config.userId]);
+    const openFeatureBoard = (0, react_1.useCallback)(() => {
+        if (boardUrl) {
+            react_native_1.Linking.openURL(boardUrl);
+        }
+    }, [boardUrl]);
+    return { boardUrl, openFeatureBoard };
+}

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,72 @@ 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+/';
+    // Count padding from the original string before stripping
+    let padding = 0;
+    if (base64.endsWith('=='))
+        padding = 2;
+    else if (base64.endsWith('='))
+        padding = 1;
+    // Remove all non-base64 characters (including '=' padding)
+    const clean = base64.replace(/[^A-Za-z0-9+/]/g, '');
+    const len = clean.length;
+    // The byte length formula requires the padded base64 length (multiple of 4).
+    // Since clean has '=' stripped, we add padding back for the calculation.
+    const paddedLen = len + padding;
+    const byteLen = (paddedLen * 3) / 4 - padding;
+    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/dist/i18n/en.js

@@ -19,4 +19,6 @@ exports.en = {
     severityMedium: 'Medium',
     severityHigh: 'High',
     severityCritical: 'Critical',
+    featureBoard: 'Feature Board',
+    suggestFeature: 'Suggest a Feature',
 };

package/dist/i18n/fr.js

@@ -19,4 +19,6 @@ exports.fr = {
     severityMedium: 'Moyen',
     severityHigh: 'Élevé',
     severityCritical: 'Critique',
+    featureBoard: 'Tableau des fonctionnalités',
+    suggestFeature: 'Suggérer une fonctionnalité',
 };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { BugReporterProvider } from './context/BugReporterProvider';
 export { useBugReporter } from './hooks/useBugReporter';
+export { useFeatureBoard } from './hooks/useFeatureBoard';
 export { FloatingButton } from './components/FloatingButton';
-export type { BugReporterConfig, BugReportPayload, BugCategory, BugSeverity, BugStatus, SupportedLocale, DeviceInfo, AppInfo, NetworkInfo, Translations, } from './types';
+export { FeatureBoardLink } from './components/FeatureBoardLink';
+export type { BugReporterConfig, BugReportPayload, BugCategory, BugSeverity, BugStatus, SupportedLocale, DeviceInfo, AppInfo, NetworkInfo, Translations, FeatureCategory, FeatureStatus, FeatureBoardConfig, } from './types';

package/dist/index.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingButton = exports.useBugReporter = exports.BugReporterProvider = void 0;
+exports.FeatureBoardLink = exports.FloatingButton = exports.useFeatureBoard = exports.useBugReporter = exports.BugReporterProvider = void 0;
 var BugReporterProvider_1 = require("./context/BugReporterProvider");
 Object.defineProperty(exports, "BugReporterProvider", { enumerable: true, get: function () { return BugReporterProvider_1.BugReporterProvider; } });
 var useBugReporter_1 = require("./hooks/useBugReporter");
 Object.defineProperty(exports, "useBugReporter", { enumerable: true, get: function () { return useBugReporter_1.useBugReporter; } });
+var useFeatureBoard_1 = require("./hooks/useFeatureBoard");
+Object.defineProperty(exports, "useFeatureBoard", { enumerable: true, get: function () { return useFeatureBoard_1.useFeatureBoard; } });
 var FloatingButton_1 = require("./components/FloatingButton");
 Object.defineProperty(exports, "FloatingButton", { enumerable: true, get: function () { return FloatingButton_1.FloatingButton; } });
+var FeatureBoardLink_1 = require("./components/FeatureBoardLink");
+Object.defineProperty(exports, "FeatureBoardLink", { enumerable: true, get: function () { return FeatureBoardLink_1.FeatureBoardLink; } });

package/dist/types.d.ts

@@ -2,6 +2,11 @@ export type BugCategory = 'Bug' | 'Crash' | 'UI' | 'Performance' | 'Feature Requ
 export type BugSeverity = 'low' | 'medium' | 'high' | 'critical';
 export type BugStatus = 'open' | 'in_progress' | 'resolved' | 'closed';
 export type SupportedLocale = 'en' | 'fr';
+export type FeatureCategory = 'UI/UX' | 'Performance' | 'New Feature' | 'Integration' | 'Improvement' | 'Other';
+export type FeatureStatus = 'under_review' | 'planned' | 'in_progress' | 'completed' | 'declined';
+export interface FeatureBoardConfig {
+    boardBaseUrl: string;
+}
 export interface DeviceInfo {
     brand: string | null;
     model: string | null;
@@ -51,6 +56,7 @@ export interface BugReporterConfig {
     currentScreen?: string;
     userId?: string;
     customData?: Record<string, unknown>;
+    featureBoard?: FeatureBoardConfig;
 }
 export interface Translations {
     reportBug: string;
@@ -70,4 +76,6 @@ export interface Translations {
     severityMedium: string;
     severityHigh: string;
     severityCritical: string;
+    featureBoard: string;
+    suggestFeature: string;
 }

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.1",
+  "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",