@mushi-mushi/react-native 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,14 @@
 // src/provider.tsx
-import { createContext, useContext, useEffect, useRef } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect as useEffect2,
+  useRef as useRef3,
+  useState as useState2,
+  useCallback as useCallback3,
+  useMemo
+} from "react";
+import { createApiClient, DEFAULT_API_ENDPOINT } from "@mushi-mushi/core";
 
 // src/capture/console-capture.ts
 function setupConsoleCapture(maxEntries = 100) {
@@ -174,60 +183,493 @@ var AsyncStorageQueue = class {
   }
 };
 
+// src/components/MushiBottomSheet.tsx
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback
+} from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Dimensions as Dimensions2,
+  Platform as Platform2,
+  KeyboardAvoidingView,
+  useColorScheme
+} from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { height: SCREEN_HEIGHT } = Dimensions2.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 = useColorScheme();
+  const dark = scheme === "dark";
+  const translateY = useRef(new Animated.Value(SHEET_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const [category, setCategory] = useState(null);
+  const [description, setDescription] = useState("");
+  const [phase, setPhase] = useState("form");
+  const resetForm = useCallback(() => {
+    setCategory(null);
+    setDescription("");
+    setPhase("form");
+  }, []);
+  const animateIn = useCallback(() => {
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 200
+      }),
+      Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [translateY, backdropOpacity]);
+  const animateOut = useCallback(
+    (cb) => {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: SHEET_HEIGHT,
+          duration: 220,
+          useNativeDriver: true
+        }),
+        Animated.timing(backdropOpacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start(() => {
+        resetForm();
+        cb?.();
+      });
+    },
+    [translateY, backdropOpacity, resetForm]
+  );
+  useEffect(() => {
+    if (visible) animateIn();
+  }, [visible, animateIn]);
+  const handleClose = useCallback(() => {
+    animateOut(onClose);
+  }, [animateOut, onClose]);
+  const panResponder = useRef(
+    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 {
+          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__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      style: s.flex,
+      behavior: Platform2.OS === "ios" ? "padding" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [s.backdrop, { backgroundColor: colors.backdrop, opacity: backdropOpacity }],
+            children: /* @__PURE__ */ jsx(TouchableOpacity, { style: s.flex, activeOpacity: 1, onPress: handleClose })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            style: [
+              s.sheet,
+              { backgroundColor: colors.bg, transform: [{ translateY }] }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ jsx(View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
+              phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
+                /* @__PURE__ */ jsx(Text, { style: [s.sentEmoji], children: "\u2705" }),
+                /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.text }], children: "Report sent!" })
+              ] }) : /* @__PURE__ */ jsxs(View, { style: s.body, children: [
+                /* @__PURE__ */ jsx(Text, { style: [s.title, { color: colors.text }], children: "Report an issue" }),
+                /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORIES.map((c) => {
+                  const active = category === c.key;
+                  return /* @__PURE__ */ jsxs(
+                    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__ */ jsx(Text, { style: s.catEmoji, children: c.emoji }),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            style: [
+                              s.catLabel,
+                              { color: active ? "#fff" : colors.text }
+                            ],
+                            children: c.label
+                          }
+                        )
+                      ]
+                    },
+                    c.key
+                  );
+                }) }),
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(
+                  TouchableOpacity,
+                  {
+                    onPress: handleSubmit,
+                    disabled: !canSubmit,
+                    activeOpacity: 0.8,
+                    style: [
+                      s.submitBtn,
+                      { backgroundColor: canSubmit ? colors.accent : colors.border }
+                    ],
+                    children: /* @__PURE__ */ jsx(Text, { style: s.submitText, children: phase === "sending" ? "Sending\u2026" : "Submit" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+var s = StyleSheet.create({
+  flex: { flex: 1 },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  sheet: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    minHeight: SHEET_HEIGHT,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: Platform2.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
+import { useRef as useRef2, useCallback as useCallback2 } from "react";
+import {
+  Animated as Animated2,
+  TouchableWithoutFeedback,
+  StyleSheet as StyleSheet2,
+  Platform as Platform3,
+  useColorScheme as useColorScheme2
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MushiFloatingButton = ({
+  onPress,
+  position = "bottom-right"
+}) => {
+  const scheme = useColorScheme2();
+  const dark = scheme === "dark";
+  const scale = useRef2(new Animated2.Value(1)).current;
+  const handlePressIn = useCallback2(() => {
+    Animated2.spring(scale, {
+      toValue: 0.85,
+      useNativeDriver: true,
+      damping: 15,
+      stiffness: 300
+    }).start();
+  }, [scale]);
+  const handlePressOut = useCallback2(() => {
+    Animated2.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      damping: 10,
+      stiffness: 250
+    }).start();
+  }, [scale]);
+  const positionStyle = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  return /* @__PURE__ */ jsx2(
+    TouchableWithoutFeedback,
+    {
+      onPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      children: /* @__PURE__ */ jsx2(
+        Animated2.View,
+        {
+          style: [
+            s2.fab,
+            positionStyle,
+            {
+              backgroundColor: dark ? "#0a84ff" : "#007aff",
+              transform: [{ scale }],
+              shadowColor: dark ? "#0a84ff" : "#000"
+            }
+          ],
+          children: /* @__PURE__ */ jsx2(Animated2.Text, { style: s2.emoji, children: "\u{1F41B}" })
+        }
+      )
+    }
+  );
+};
+var s2 = StyleSheet2.create({
+  fab: {
+    position: "absolute",
+    bottom: Platform3.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
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MushiContext = createContext(null);
 function MushiProvider({ children, ...config }) {
-  const consoleRef = useRef(null);
-  const networkRef = useRef(null);
-  const queueRef = useRef(null);
-  const apiEndpoint = config.endpoint ?? "https://api.mushimushi.dev";
-  useEffect(() => {
+  const consoleRef = useRef3(null);
+  const networkRef = useRef3(null);
+  const queueRef = useRef3(null);
+  const apiClientRef = useRef3(null);
+  const [sheetVisible, setSheetVisible] = useState2(false);
+  const apiEndpoint = config.endpoint ?? DEFAULT_API_ENDPOINT;
+  useEffect2(() => {
     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 = 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 = useCallback3(() => setSheetVisible(true), []);
+  const close = useCallback3(() => setSheetVisible(false), []);
+  const submitReport = useCallback3(
+    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__ */ jsx(MushiContext.Provider, { value: instance, children });
+    [config.projectId, config.apiKey, apiEndpoint]
+  );
+  const instance = 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__ */ jsxs2(MushiContext.Provider, { value: instance, children: [
+    children,
+    showFab && /* @__PURE__ */ jsx3(
+      MushiFloatingButton,
+      {
+        onPress: open,
+        position: config.widget?.buttonPosition
+      }
+    ),
+    /* @__PURE__ */ jsx3(MushiBottomSheet, { visible: sheetVisible, onClose: close })
+  ] });
 }
 function useMushiContext() {
   return useContext(MushiContext);
@@ -239,10 +681,10 @@ function useMushi() {
 }
 
 // src/hooks/useMushiReport.ts
-import { useCallback } from "react";
+import { useCallback as useCallback4 } from "react";
 function useMushiReport() {
   const mushi = useMushiContext();
-  const submitReport = useCallback(
+  const submitReport = useCallback4(
     async (data) => {
       if (!mushi) throw new Error("MushiProvider not found");
       await mushi.submitReport(data);
@@ -253,20 +695,20 @@ function useMushiReport() {
 }
 
 // src/hooks/useMushiWidget.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback5 } from "react";
 function useMushiWidget() {
   const mushi = useMushiContext();
   return {
-    open: useCallback2(() => mushi?.open(), [mushi]),
-    close: useCallback2(() => mushi?.close(), [mushi])
+    open: useCallback5(() => mushi?.open(), [mushi]),
+    close: useCallback5(() => mushi?.close(), [mushi])
   };
 }
 
 // src/capture/navigation-capture.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 function useNavigationCapture(navigationRef) {
-  const historyRef = useRef2([]);
-  useEffect2(() => {
+  const historyRef = useRef4([]);
+  useEffect3(() => {
     if (!navigationRef?.addListener || !navigationRef?.getCurrentRoute) return;
     const unsubscribe = navigationRef.addListener("state", () => {
       const route = navigationRef.getCurrentRoute?.();
@@ -281,6 +723,8 @@ function useNavigationCapture(navigationRef) {
 }
 export {
   AsyncStorageQueue,
+  MushiBottomSheet,
+  MushiFloatingButton,
   MushiProvider,
   getDeviceInfo,
   setupConsoleCapture,