@mindedsolutions/bug-reporter-sdk 0.3.0 → 0.3.2

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

@@ -0,0 +1 @@
+export declare function FeatureBoardModal(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FeatureBoardModal.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureBoardModal = FeatureBoardModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const useBugReporter_1 = require("../hooks/useBugReporter");
+const useFeatureBoard_1 = require("../hooks/useFeatureBoard");
+// Cast to work around React 18/19 JSX type incompatibility
+const WebView = react_native_webview_1.WebView;
+function FeatureBoardModal() {
+    const { translations, isBoardVisible, closeBoard } = (0, useBugReporter_1.useBugReporter)();
+    const { boardUrl } = (0, useFeatureBoard_1.useFeatureBoard)();
+    if (!boardUrl)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: isBoardVisible, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: closeBoard, 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: closeBoard, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.closeText, children: translations.cancel }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: translations.featureBoard }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.placeholder })] }), (0, jsx_runtime_1.jsx)(WebView, { source: { uri: boardUrl }, style: styles.webview, startInLoadingState: true, renderLoading: () => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loading, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: "#6366f1" }) })) })] }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    safeTop: {
+        paddingTop: react_native_1.Platform.OS === 'android' ? react_native_1.StatusBar.currentHeight ?? 44 : 54,
+        backgroundColor: '#fff',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e5e7eb',
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: '#111827',
+    },
+    closeText: {
+        fontSize: 16,
+        color: '#6b7280',
+    },
+    placeholder: {
+        width: 50,
+    },
+    webview: {
+        flex: 1,
+    },
+    loading: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+    },
+});

package/dist/context/BugReporterContext.d.ts

@@ -7,6 +7,9 @@ export interface BugReporterContextValue {
     isModalVisible: boolean;
     openModal: () => void;
     closeModal: () => void;
+    isBoardVisible: boolean;
+    openBoard: () => void;
+    closeBoard: () => void;
     viewRef: RefObject<View>;
 }
 export declare const BugReporterContext: import("react").Context<BugReporterContextValue | null>;

package/dist/context/BugReporterProvider.js

@@ -6,22 +6,26 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const BugReporterContext_1 = require("./BugReporterContext");
 const ReportModal_1 = require("../components/ReportModal");
+const FeatureBoardModal_1 = require("../components/FeatureBoardModal");
 const FloatingButton_1 = require("../components/FloatingButton");
 const useShakeDetection_1 = require("../hooks/useShakeDetection");
 const i18n_1 = require("../i18n");
 function BugReporterProvider({ config, children }) {
     const [isModalVisible, setIsModalVisible] = (0, react_1.useState)(false);
+    const [isBoardVisible, setIsBoardVisible] = (0, react_1.useState)(false);
     const viewRef = (0, react_1.useRef)(null);
     const translations = (0, i18n_1.getTranslations)(config.locale);
     const openModal = (0, react_1.useCallback)(() => setIsModalVisible(true), []);
     const closeModal = (0, react_1.useCallback)(() => setIsModalVisible(false), []);
+    const openBoard = (0, react_1.useCallback)(() => setIsBoardVisible(true), []);
+    const closeBoard = (0, react_1.useCallback)(() => setIsBoardVisible(false), []);
     const shakeEnabled = config.enableShake ?? !__DEV__;
     (0, useShakeDetection_1.useShakeDetection)({
         enabled: shakeEnabled,
         threshold: config.shakeThreshold,
         onShake: openModal,
     });
-    return ((0, jsx_runtime_1.jsxs)(BugReporterContext_1.BugReporterContext.Provider, { value: { config, translations, isModalVisible, openModal, closeModal, viewRef }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: viewRef, collapsable: false, style: styles.container, children: children }), config.floatingButton !== false && (0, jsx_runtime_1.jsx)(FloatingButton_1.FloatingButton, { onPress: openModal }), (0, jsx_runtime_1.jsx)(ReportModal_1.ReportModal, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(BugReporterContext_1.BugReporterContext.Provider, { value: { config, translations, isModalVisible, openModal, closeModal, isBoardVisible, openBoard, closeBoard, viewRef }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: viewRef, collapsable: false, style: styles.container, children: children }), config.floatingButton !== false && (0, jsx_runtime_1.jsx)(FloatingButton_1.FloatingButton, { onPress: openModal }), (0, jsx_runtime_1.jsx)(ReportModal_1.ReportModal, {}), (0, jsx_runtime_1.jsx)(FeatureBoardModal_1.FeatureBoardModal, {})] }));
 }
 const styles = react_native_1.StyleSheet.create({
     container: { flex: 1 },

package/dist/hooks/useFeatureBoard.d.ts

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

package/dist/hooks/useFeatureBoard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeatureBoard = useFeatureBoard;
+const react_1 = require("react");
+const useBugReporter_1 = require("./useBugReporter");
+function useFeatureBoard() {
+    const { config, openBoard, closeBoard, isBoardVisible } = (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]);
+    return { boardUrl, openFeatureBoard: openBoard, closeFeatureBoard: closeBoard, isBoardVisible };
+}

package/dist/hooks/useScreenCapture.js

@@ -8,9 +8,19 @@ 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;
-    const byteLen = (len * 3) / 4 - (base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0);
+    // 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;

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,6 +1,6 @@
 {
   "name": "@mindedsolutions/bug-reporter-sdk",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",
@@ -21,13 +21,14 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
+    "expo-application": ">=5",
+    "expo-device": ">=6",
+    "expo-network": ">=6",
+    "expo-sensors": ">=13",
     "react": ">=18",
     "react-native": ">=0.72",
-    "expo-sensors": ">=13",
     "react-native-view-shot": ">=3",
-    "expo-device": ">=6",
-    "expo-application": ">=5",
-    "expo-network": ">=6"
+    "react-native-webview": ">=13"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.49.0"
@@ -35,6 +36,7 @@
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-native": "^0.72",
+    "react-native-webview": "^13.16.1",
     "typescript": "^5.5.0"
   }
 }