@mushi-mushi/react-native 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @mushi-mushi/react-native
 
-React Native SDK for Mushi Mushi. Shake-to-report, bottom sheet widget, offline queue.
+React Native SDK for Mushi Mushi — built-in bottom-sheet widget, floating bug button, offline queue.
 
 ## Usage
 
@@ -16,20 +16,39 @@ export default function App() {
 }
 ```
 
+The provider renders a floating 🐛 button and a slide-up bottom sheet by default. Control behavior via `widget.trigger`:
+
+| Value | Behavior |
+|-------|----------|
+| `'button'` (default) | Shows floating action button |
+| `'manual'` | No auto-UI — call `open()` programmatically |
+
 ### Hooks
 
 ```ts
-import { useMushi, useMushiReport } from '@mushi-mushi/react-native'
+import { useMushi, useMushiReport, useMushiWidget } from '@mushi-mushi/react-native'
 
 const { submitReport } = useMushiReport()
+const { open, close } = useMushiWidget()
+```
+
+### Standalone Components
+
+Use the widget components directly if you need custom integration:
+
+```tsx
+import { MushiBottomSheet, MushiFloatingButton } from '@mushi-mushi/react-native'
 ```
 
+- `MushiBottomSheet` — Conversational bug report modal (category → description → submit). Supports dark/light theme, drag-to-dismiss.
+- `MushiFloatingButton` — Positioned FAB with spring animation. Configurable via `buttonPosition`.
+
 ### Captures
 
 - Device info (platform, OS, screen dimensions)
 - Console logs (monkey-patched)
-- Network requests (fetch/XMLHttpRequest interceptor)
-- Navigation events (React Navigation integration, optional)
+- Network requests (fetch interceptor)
+- Navigation events (React Navigation, optional)
 - Offline queue via AsyncStorage
 
 ## Peer Dependencies

package/dist/index.cjs

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AsyncStorageQueue: () => AsyncStorageQueue,
+  MushiBottomSheet: () => MushiBottomSheet,
+  MushiFloatingButton: () => MushiFloatingButton,
   MushiProvider: () => MushiProvider,
   getDeviceInfo: () => getDeviceInfo,
   setupConsoleCapture: () => setupConsoleCapture,
@@ -43,7 +45,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var import_react = require("react");
+var import_react3 = require("react");
+var import_core = require("@mushi-mushi/core");
 
 // src/capture/console-capture.ts
 function setupConsoleCapture(maxEntries = 100) {
@@ -218,63 +221,472 @@ var AsyncStorageQueue = class {
   }
 };
 
-// src/provider.tsx
+// src/components/MushiBottomSheet.tsx
+var import_react = require("react");
+var import_react_native2 = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
-var MushiContext = (0, import_react.createContext)(null);
-function MushiProvider({ children, ...config }) {
-  const consoleRef = (0, import_react.useRef)(null);
-  const networkRef = (0, import_react.useRef)(null);
-  const queueRef = (0, import_react.useRef)(null);
-  const apiEndpoint = config.endpoint ?? "https://api.mushimushi.dev";
+var { height: SCREEN_HEIGHT } = import_react_native2.Dimensions.get("window");
+var SHEET_HEIGHT = SCREEN_HEIGHT * 0.55;
+var DISMISS_THRESHOLD = 80;
+var CATEGORIES = [
+  { key: "bug", emoji: "\u{1F41B}", label: "Bug" },
+  { key: "slow", emoji: "\u{1F422}", label: "Slow" },
+  { key: "visual", emoji: "\u{1F3A8}", label: "Visual" },
+  { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
+  { key: "other", emoji: "\u{1F4AC}", label: "Other" }
+];
+var MushiBottomSheet = ({ visible, onClose }) => {
+  const mushi = useMushiContext();
+  const scheme = (0, import_react_native2.useColorScheme)();
+  const dark = scheme === "dark";
+  const translateY = (0, import_react.useRef)(new import_react_native2.Animated.Value(SHEET_HEIGHT)).current;
+  const backdropOpacity = (0, import_react.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const [category, setCategory] = (0, import_react.useState)(null);
+  const [description, setDescription] = (0, import_react.useState)("");
+  const [phase, setPhase] = (0, import_react.useState)("form");
+  const resetForm = (0, import_react.useCallback)(() => {
+    setCategory(null);
+    setDescription("");
+    setPhase("form");
+  }, []);
+  const animateIn = (0, import_react.useCallback)(() => {
+    import_react_native2.Animated.parallel([
+      import_react_native2.Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 200
+      }),
+      import_react_native2.Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [translateY, backdropOpacity]);
+  const animateOut = (0, import_react.useCallback)(
+    (cb) => {
+      import_react_native2.Animated.parallel([
+        import_react_native2.Animated.timing(translateY, {
+          toValue: SHEET_HEIGHT,
+          duration: 220,
+          useNativeDriver: true
+        }),
+        import_react_native2.Animated.timing(backdropOpacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start(() => {
+        resetForm();
+        cb?.();
+      });
+    },
+    [translateY, backdropOpacity, resetForm]
+  );
   (0, import_react.useEffect)(() => {
+    if (visible) animateIn();
+  }, [visible, animateIn]);
+  const handleClose = (0, import_react.useCallback)(() => {
+    animateOut(onClose);
+  }, [animateOut, onClose]);
+  const panResponder = (0, import_react.useRef)(
+    import_react_native2.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 4,
+      onPanResponderMove: (_, g) => {
+        if (g.dy > 0) translateY.setValue(g.dy);
+      },
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > DISMISS_THRESHOLD) {
+          handleClose();
+        } else {
+          import_react_native2.Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            damping: 20,
+            stiffness: 200
+          }).start();
+        }
+      }
+    })
+  ).current;
+  const handleSubmit = async () => {
+    if (!category || !description.trim() || !mushi) return;
+    setPhase("sending");
+    try {
+      await mushi.submitReport({ category, description: description.trim() });
+      setPhase("sent");
+      setTimeout(handleClose, 1400);
+    } catch {
+      setPhase("form");
+    }
+  };
+  const colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)" };
+  const canSubmit = !!category && description.trim().length > 0 && phase === "form";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_native2.KeyboardAvoidingView,
+    {
+      style: s.flex,
+      behavior: import_react_native2.Platform.OS === "ios" ? "padding" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native2.Animated.View,
+          {
+            style: [s.backdrop, { backgroundColor: colors.backdrop, opacity: backdropOpacity }],
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TouchableOpacity, { style: s.flex, activeOpacity: 1, onPress: handleClose })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_react_native2.Animated.View,
+          {
+            style: [
+              s.sheet,
+              { backgroundColor: colors.bg, transform: [{ translateY }] }
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
+              phase === "sent" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.sentWrap, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.sentEmoji], children: "\u2705" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.sentText, { color: colors.text }], children: "Report sent!" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.body, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.title, { color: colors.text }], children: "Report an issue" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.catRow, children: CATEGORIES.map((c) => {
+                  const active = category === c.key;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_react_native2.TouchableOpacity,
+                    {
+                      onPress: () => setCategory(c.key),
+                      activeOpacity: 0.7,
+                      style: [
+                        s.catBtn,
+                        {
+                          backgroundColor: active ? colors.accent : colors.card,
+                          borderColor: active ? colors.accent : colors.border
+                        }
+                      ],
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.catEmoji, children: c.emoji }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react_native2.Text,
+                          {
+                            style: [
+                              s.catLabel,
+                              { color: active ? "#fff" : colors.text }
+                            ],
+                            children: c.label
+                          }
+                        )
+                      ]
+                    },
+                    c.key
+                  );
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_native2.TextInput,
+                  {
+                    style: [
+                      s.input,
+                      {
+                        backgroundColor: colors.card,
+                        color: colors.text,
+                        borderColor: colors.border
+                      }
+                    ],
+                    placeholder: "What happened?",
+                    placeholderTextColor: colors.sub,
+                    multiline: true,
+                    textAlignVertical: "top",
+                    value: description,
+                    onChangeText: setDescription,
+                    editable: phase === "form"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_native2.TouchableOpacity,
+                  {
+                    onPress: handleSubmit,
+                    disabled: !canSubmit,
+                    activeOpacity: 0.8,
+                    style: [
+                      s.submitBtn,
+                      { backgroundColor: canSubmit ? colors.accent : colors.border }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.submitText, children: phase === "sending" ? "Sending\u2026" : "Submit" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+var s = import_react_native2.StyleSheet.create({
+  flex: { flex: 1 },
+  backdrop: {
+    ...import_react_native2.StyleSheet.absoluteFillObject
+  },
+  sheet: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    minHeight: SHEET_HEIGHT,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: import_react_native2.Platform.OS === "ios" ? 34 : 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 24
+  },
+  handleArea: {
+    alignItems: "center",
+    paddingVertical: 10
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    opacity: 0.5
+  },
+  body: {
+    paddingHorizontal: 20,
+    paddingTop: 4
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    marginBottom: 16
+  },
+  catRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 16
+  },
+  catBtn: {
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+    borderRadius: 12,
+    borderWidth: 1,
+    flex: 1,
+    marginHorizontal: 3
+  },
+  catEmoji: {
+    fontSize: 22,
+    marginBottom: 4
+  },
+  catLabel: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 14,
+    fontSize: 15,
+    minHeight: 100,
+    marginBottom: 16
+  },
+  submitBtn: {
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: "center"
+  },
+  submitText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  sentWrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 60
+  },
+  sentEmoji: {
+    fontSize: 48,
+    marginBottom: 12
+  },
+  sentText: {
+    fontSize: 20,
+    fontWeight: "600"
+  }
+});
+
+// src/components/MushiFloatingButton.tsx
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MushiFloatingButton = ({
+  onPress,
+  position = "bottom-right"
+}) => {
+  const scheme = (0, import_react_native3.useColorScheme)();
+  const dark = scheme === "dark";
+  const scale = (0, import_react2.useRef)(new import_react_native3.Animated.Value(1)).current;
+  const handlePressIn = (0, import_react2.useCallback)(() => {
+    import_react_native3.Animated.spring(scale, {
+      toValue: 0.85,
+      useNativeDriver: true,
+      damping: 15,
+      stiffness: 300
+    }).start();
+  }, [scale]);
+  const handlePressOut = (0, import_react2.useCallback)(() => {
+    import_react_native3.Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      damping: 10,
+      stiffness: 250
+    }).start();
+  }, [scale]);
+  const positionStyle = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native3.TouchableWithoutFeedback,
+    {
+      onPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native3.Animated.View,
+        {
+          style: [
+            s2.fab,
+            positionStyle,
+            {
+              backgroundColor: dark ? "#0a84ff" : "#007aff",
+              transform: [{ scale }],
+              shadowColor: dark ? "#0a84ff" : "#000"
+            }
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Animated.Text, { style: s2.emoji, children: "\u{1F41B}" })
+        }
+      )
+    }
+  );
+};
+var s2 = import_react_native3.StyleSheet.create({
+  fab: {
+    position: "absolute",
+    bottom: import_react_native3.Platform.OS === "ios" ? 50 : 28,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    elevation: 8,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6
+  },
+  emoji: {
+    fontSize: 26
+  }
+});
+
+// src/provider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MushiContext = (0, import_react3.createContext)(null);
+function MushiProvider({ children, ...config }) {
+  const consoleRef = (0, import_react3.useRef)(null);
+  const networkRef = (0, import_react3.useRef)(null);
+  const queueRef = (0, import_react3.useRef)(null);
+  const apiClientRef = (0, import_react3.useRef)(null);
+  const [sheetVisible, setSheetVisible] = (0, import_react3.useState)(false);
+  const apiEndpoint = config.endpoint ?? import_core.DEFAULT_API_ENDPOINT;
+  (0, import_react3.useEffect)(() => {
     if (config.capture?.console !== false) {
       consoleRef.current = setupConsoleCapture(config.capture?.maxConsoleEntries);
     }
     if (config.capture?.network !== false) {
       networkRef.current = setupNetworkCapture(config.capture?.maxNetworkEntries, apiEndpoint);
     }
+    apiClientRef.current = (0, import_core.createApiClient)({
+      projectId: config.projectId,
+      apiKey: config.apiKey,
+      apiEndpoint
+    });
     queueRef.current = new AsyncStorageQueue({
       maxSize: config.storage?.maxQueueSize,
       apiEndpoint,
       apiKey: config.apiKey
     });
+    queueRef.current.flush().catch(() => {
+    });
     return () => {
       consoleRef.current?.restore();
       networkRef.current?.restore();
     };
   }, []);
-  const instance = {
-    open: () => {
-    },
-    close: () => {
-    },
-    submitReport: async (data) => {
+  const open = (0, import_react3.useCallback)(() => setSheetVisible(true), []);
+  const close = (0, import_react3.useCallback)(() => setSheetVisible(false), []);
+  const submitReport = (0, import_react3.useCallback)(
+    async (data) => {
+      const deviceInfo = getDeviceInfo();
       const report = {
+        id: `rn-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
         projectId: config.projectId,
-        ...data,
-        environment: getDeviceInfo(),
-        console_logs: consoleRef.current?.getEntries() ?? [],
-        network_logs: networkRef.current?.getEntries() ?? []
+        category: data.category,
+        description: data.description,
+        environment: {
+          userAgent: deviceInfo.systemName ?? "ReactNative",
+          platform: deviceInfo.platform ?? "mobile",
+          language: deviceInfo.locale ?? "en",
+          viewport: { width: deviceInfo.screenWidth ?? 0, height: deviceInfo.screenHeight ?? 0 },
+          url: "",
+          referrer: "",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          timezone: deviceInfo.timezone ?? "UTC"
+        },
+        consoleLogs: consoleRef.current?.getEntries() ?? [],
+        networkLogs: networkRef.current?.getEntries().map((entry) => ({
+          ...entry,
+          status: entry.status ?? 0
+        })) ?? [],
+        reporterToken: `rn-${config.projectId}-anon`,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
-      try {
-        const res = await fetch(`${apiEndpoint}/v1/reports`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json", "X-Mushi-Api-Key": config.apiKey },
-          body: JSON.stringify(report)
-        });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      } catch {
+      const client = apiClientRef.current;
+      if (!client) return;
+      const result = await client.submitReport(report);
+      if (!result.ok) {
         await queueRef.current?.enqueue(report);
       }
     },
-    getDeviceInfo,
-    getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
-    getNetworkEntries: () => networkRef.current?.getEntries() ?? []
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MushiContext.Provider, { value: instance, children });
+    [config.projectId, config.apiKey, apiEndpoint]
+  );
+  const instance = (0, import_react3.useMemo)(
+    () => ({
+      open,
+      close,
+      submitReport,
+      getDeviceInfo,
+      getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
+      getNetworkEntries: () => networkRef.current?.getEntries() ?? []
+    }),
+    [open, close, submitReport]
+  );
+  const trigger = config.widget?.trigger ?? "button";
+  const showFab = trigger === "button" || trigger === "both";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MushiContext.Provider, { value: instance, children: [
+    children,
+    showFab && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      MushiFloatingButton,
+      {
+        onPress: open,
+        position: config.widget?.buttonPosition
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MushiBottomSheet, { visible: sheetVisible, onClose: close })
+  ] });
 }
 function useMushiContext() {
-  return (0, import_react.useContext)(MushiContext);
+  return (0, import_react3.useContext)(MushiContext);
 }
 
 // src/hooks/useMushi.ts
@@ -283,10 +695,10 @@ function useMushi() {
 }
 
 // src/hooks/useMushiReport.ts
-var import_react2 = require("react");
+var import_react4 = require("react");
 function useMushiReport() {
   const mushi = useMushiContext();
-  const submitReport = (0, import_react2.useCallback)(
+  const submitReport = (0, import_react4.useCallback)(
     async (data) => {
       if (!mushi) throw new Error("MushiProvider not found");
       await mushi.submitReport(data);
@@ -297,20 +709,20 @@ function useMushiReport() {
 }
 
 // src/hooks/useMushiWidget.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 function useMushiWidget() {
   const mushi = useMushiContext();
   return {
-    open: (0, import_react3.useCallback)(() => mushi?.open(), [mushi]),
-    close: (0, import_react3.useCallback)(() => mushi?.close(), [mushi])
+    open: (0, import_react5.useCallback)(() => mushi?.open(), [mushi]),
+    close: (0, import_react5.useCallback)(() => mushi?.close(), [mushi])
   };
 }
 
 // src/capture/navigation-capture.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 function useNavigationCapture(navigationRef) {
-  const historyRef = (0, import_react4.useRef)([]);
-  (0, import_react4.useEffect)(() => {
+  const historyRef = (0, import_react6.useRef)([]);
+  (0, import_react6.useEffect)(() => {
     if (!navigationRef?.addListener || !navigationRef?.getCurrentRoute) return;
     const unsubscribe = navigationRef.addListener("state", () => {
       const route = navigationRef.getCurrentRoute?.();
@@ -326,6 +738,8 @@ function useNavigationCapture(navigationRef) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AsyncStorageQueue,
+  MushiBottomSheet,
+  MushiFloatingButton,
   MushiProvider,
   getDeviceInfo,
   setupConsoleCapture,