@getdevteam/analytics-react-native 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,3 +1,10 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/index.ts
 import {
   createClient
@@ -42,6 +49,57 @@ function collectReactNativeContext() {
   return context;
 }
 
+// src/feedback.ts
+import {
+  uuidV7
+} from "@getdevteam/analytics-core";
+var FEEDBACK_DEFAULT_COLORS = ["#f44336", "#4caf50", "#2196f3", "#ffeb3b"];
+var FEEDBACK_DEFAULT_ACCENT = "#5b9cf5";
+var MAX_TEXT_LENGTH = 1e4;
+var MAX_PAGE_URL_LENGTH = 2048;
+function createFeedbackSender(config) {
+  const url = `${String(config.host ?? "").replace(/\/+$/, "")}/v1/ingest/feedback`;
+  return async (input) => {
+    try {
+      const text = typeof input?.text === "string" ? input.text.trim() : "";
+      if (text.length === 0) {
+        config.onError(new Error("feedback text must be a non-empty string"));
+        return false;
+      }
+      const body = {
+        feedback_id: uuidV7(),
+        text: text.slice(0, MAX_TEXT_LENGTH)
+      };
+      if (typeof input.screenshot === "string" && input.screenshot.length > 0) {
+        body.screenshot = input.screenshot;
+        body.screenshot_content_type = input.screenshotContentType ?? "image/png";
+      }
+      const distinctId = config.getDistinctId();
+      if (distinctId) body.distinct_id = distinctId;
+      const sessionId = config.getSessionId();
+      if (sessionId) body.session_id = sessionId;
+      if (typeof input.pageUrl === "string" && input.pageUrl.length > 0) {
+        body.page_url = input.pageUrl.slice(0, MAX_PAGE_URL_LENGTH);
+      }
+      body.context = config.getContext();
+      if (!config.fetch) throw new Error("fetch is not available in this environment");
+      const response = await config.fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-DevTeam-Key": config.key },
+        body: JSON.stringify(body)
+      });
+      if (!response.ok) {
+        config.onError(new Error(`feedback ingest responded ${response.status}`));
+        return false;
+      }
+      return true;
+    } catch (error) {
+      config.onError(error);
+      return false;
+    }
+  };
+}
+
 // src/storage.ts
 import AsyncStorage from "@react-native-async-storage/async-storage";
 function createAsyncStorageAdapter() {
@@ -68,30 +126,556 @@ function createAsyncStorageAdapter() {
   };
 }
 
+// src/feedbackProvider.ts
+import {
+  createElement,
+  Fragment,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  Dimensions,
+  Image,
+  Modal,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from "react-native";
+
+// src/optionalPeers.ts
+var testLoaderOverride;
+function requireViewShot() {
+  if (typeof __require !== "function") return void 0;
+  try {
+    return __require("react-native-view-shot");
+  } catch {
+    return void 0;
+  }
+}
+function requireSvg() {
+  if (typeof __require !== "function") return void 0;
+  try {
+    return __require("react-native-svg");
+  } catch {
+    return void 0;
+  }
+}
+function loadOptionalModule(name, requirePeer) {
+  if (testLoaderOverride) {
+    try {
+      return testLoaderOverride(name);
+    } catch {
+      return void 0;
+    }
+  }
+  return requirePeer();
+}
+function loadViewShot() {
+  const loaded = loadOptionalModule("react-native-view-shot", requireViewShot);
+  const captureRef = loaded?.captureRef ?? loaded?.default?.captureRef;
+  if (typeof captureRef !== "function") return void 0;
+  return { captureRef };
+}
+function loadSvg() {
+  const loaded = loadOptionalModule("react-native-svg", requireSvg);
+  const svg = loaded?.Svg ?? loaded?.default;
+  const polyline = loaded?.Polyline;
+  if (svg == null || polyline == null) return void 0;
+  return {
+    Svg: svg,
+    Polyline: polyline
+  };
+}
+
+// src/feedbackProvider.ts
+var PEN_WIDTH = 5;
+var SUCCESS_CLOSE_DELAY_MS = 1600;
+function FeedbackProvider(props) {
+  const options = props.client.feedbackOptions ?? {};
+  const colors = options.colors && options.colors.length > 0 ? options.colors : FEEDBACK_DEFAULT_COLORS;
+  const firstColor = colors[0] ?? FEEDBACK_DEFAULT_COLORS[0];
+  const accent = options.accentColor ?? FEEDBACK_DEFAULT_ACCENT;
+  const [visible, setVisible] = useState(false);
+  const [screenshot, setScreenshot] = useState(void 0);
+  const [screenshotSize, setScreenshotSize] = useState(void 0);
+  const [comment, setComment] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(void 0);
+  const [activeColor, setActiveColor] = useState(firstColor);
+  const [, setStrokeVersion] = useState(0);
+  const contentRef = useRef(null);
+  const previewRef = useRef(null);
+  const strokesRef = useRef([]);
+  const activeStrokeRef = useRef(void 0);
+  const activeColorRef = useRef(firstColor);
+  const closeTimerRef = useRef(void 0);
+  const sessionRef = useRef(0);
+  useEffect(
+    () => () => {
+      if (closeTimerRef.current !== void 0) clearTimeout(closeTimerRef.current);
+    },
+    []
+  );
+  const bumpStrokes = useCallback(() => setStrokeVersion((version) => version + 1), []);
+  const panResponderRef = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (event) => {
+        const { locationX, locationY } = event.nativeEvent;
+        const stroke = {
+          points: [{ x: locationX, y: locationY }],
+          color: activeColorRef.current,
+          width: PEN_WIDTH
+        };
+        activeStrokeRef.current = stroke;
+        strokesRef.current.push(stroke);
+        bumpStrokes();
+      },
+      onPanResponderMove: (event) => {
+        const stroke = activeStrokeRef.current;
+        if (!stroke) return;
+        stroke.points.push({ x: event.nativeEvent.locationX, y: event.nativeEvent.locationY });
+        bumpStrokes();
+      },
+      onPanResponderRelease: () => {
+        activeStrokeRef.current = void 0;
+      },
+      onPanResponderTerminate: () => {
+        activeStrokeRef.current = void 0;
+      }
+    })
+  );
+  const close = useCallback(() => {
+    sessionRef.current += 1;
+    if (closeTimerRef.current !== void 0) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = void 0;
+    }
+    setVisible(false);
+    setScreenshot(void 0);
+    setScreenshotSize(void 0);
+    setComment("");
+    setSending(false);
+    setSent(false);
+    setErrorMessage(void 0);
+    strokesRef.current = [];
+    activeStrokeRef.current = void 0;
+  }, []);
+  const open = useCallback(async () => {
+    sessionRef.current += 1;
+    try {
+      strokesRef.current = [];
+      activeStrokeRef.current = void 0;
+      activeColorRef.current = firstColor;
+      setActiveColor(firstColor);
+      setComment("");
+      setSent(false);
+      setSending(false);
+      setErrorMessage(void 0);
+      let shot;
+      const viewShot = loadViewShot();
+      if (viewShot && contentRef.current) {
+        try {
+          shot = await viewShot.captureRef(contentRef.current, {
+            format: "png",
+            quality: 0.9,
+            result: "base64"
+          });
+        } catch (captureError) {
+          props.client.reportError(captureError);
+          shot = void 0;
+        }
+      }
+      setScreenshotSize(shot ? await capturedImageSize(shot) : void 0);
+      setScreenshot(shot);
+      setVisible(true);
+    } catch (openError) {
+      props.client.reportError(openError);
+      setScreenshotSize(void 0);
+      setScreenshot(void 0);
+      setVisible(true);
+    }
+  }, [firstColor, props.client]);
+  const submit = useCallback(async () => {
+    if (sending || sent) return;
+    const text = comment.trim();
+    if (text.length === 0) {
+      setErrorMessage("Please add a short comment before sending.");
+      return;
+    }
+    const session = sessionRef.current;
+    setSending(true);
+    setErrorMessage(void 0);
+    try {
+      let finalScreenshot = screenshot;
+      const viewShot = loadViewShot();
+      if (screenshot && strokesRef.current.length > 0 && viewShot && previewRef.current) {
+        try {
+          finalScreenshot = await viewShot.captureRef(previewRef.current, {
+            format: "png",
+            quality: 0.9,
+            result: "base64"
+          });
+        } catch (flattenError) {
+          props.client.reportError(flattenError);
+        }
+      }
+      const submission = { text };
+      if (finalScreenshot) {
+        submission.screenshot = finalScreenshot;
+        submission.screenshotContentType = "image/png";
+      }
+      const ok = await props.client.submitFeedback(submission);
+      if (sessionRef.current !== session) return;
+      if (ok) {
+        setSent(true);
+        closeTimerRef.current = setTimeout(close, SUCCESS_CLOSE_DELAY_MS);
+      } else {
+        setErrorMessage("Could not send feedback. Please try again.");
+      }
+    } catch {
+      if (sessionRef.current === session) {
+        setErrorMessage("Could not send feedback. Please try again.");
+      }
+    } finally {
+      if (sessionRef.current === session) {
+        setSending(false);
+      }
+    }
+  }, [close, comment, props.client, screenshot, sending, sent]);
+  const undo = useCallback(() => {
+    if (activeStrokeRef.current) return;
+    strokesRef.current.pop();
+    bumpStrokes();
+  }, [bumpStrokes]);
+  const clear = useCallback(() => {
+    if (activeStrokeRef.current) return;
+    strokesRef.current = [];
+    bumpStrokes();
+  }, [bumpStrokes]);
+  if (props.client.userFeedbackAllowed !== true || typeof props.client.submitFeedback !== "function") {
+    return createElement(Fragment, null, props.children);
+  }
+  const svg = loadSvg();
+  const window = Dimensions.get("window");
+  const previewAspectRatio = screenshotSize && screenshotSize.height > 0 ? screenshotSize.width / screenshotSize.height : window.height > 0 ? window.width / window.height : 1;
+  const positionStyle = options.position === "bottom-left" ? styles.fabLeft : styles.fabRight;
+  const preview = screenshot ? createElement(
+    View,
+    {
+      style: [styles.preview, { aspectRatio: previewAspectRatio }],
+      testID: "devteam-feedback-preview-frame"
+    },
+    createElement(
+      View,
+      { ref: previewRef, collapsable: false, style: styles.previewSurface },
+      createElement(Image, {
+        source: { uri: `data:image/png;base64,${screenshot}` },
+        style: styles.previewImage,
+        resizeMode: "stretch",
+        testID: "devteam-feedback-preview"
+      }),
+      svg ? createElement(
+        View,
+        { style: styles.drawLayer, ...panResponderRef.current.panHandlers },
+        createElement(
+          svg.Svg,
+          { width: "100%", height: "100%" },
+          ...strokesRef.current.map(
+            (stroke, index) => createElement(svg.Polyline, {
+              key: String(index),
+              points: stroke.points.map((point) => `${point.x},${point.y}`).join(" "),
+              fill: "none",
+              stroke: stroke.color,
+              strokeWidth: stroke.width,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            })
+          )
+        )
+      ) : null
+    )
+  ) : null;
+  const tools = screenshot && svg ? createElement(
+    View,
+    { style: styles.tools },
+    ...colors.map(
+      (color) => createElement(Pressable, {
+        key: color,
+        accessibilityRole: "button",
+        testID: `devteam-feedback-color-${color}`,
+        onPress: () => {
+          activeColorRef.current = color;
+          setActiveColor(color);
+        },
+        style: [
+          styles.swatch,
+          { backgroundColor: color },
+          activeColor === color ? styles.swatchActive : null
+        ]
+      })
+    ),
+    createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        testID: "devteam-feedback-undo",
+        onPress: undo,
+        style: styles.toolButton
+      },
+      createElement(Text, { style: styles.toolLabel }, "Undo")
+    ),
+    createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        testID: "devteam-feedback-clear",
+        onPress: clear,
+        style: styles.toolButton
+      },
+      createElement(Text, { style: styles.toolLabel }, "Clear")
+    )
+  ) : null;
+  const modal = createElement(
+    Modal,
+    { visible, transparent: true, animationType: "fade", onRequestClose: close },
+    createElement(
+      View,
+      { style: styles.backdrop },
+      createElement(
+        View,
+        { style: styles.panel },
+        createElement(Text, { style: styles.title }, options.title ?? "Send feedback"),
+        preview,
+        tools,
+        createElement(TextInput, {
+          multiline: true,
+          value: comment,
+          onChangeText: setComment,
+          placeholder: options.commentPlaceholder ?? "What went wrong, or what could be better?",
+          style: styles.input,
+          testID: "devteam-feedback-comment"
+        }),
+        errorMessage ? createElement(Text, { style: styles.error, testID: "devteam-feedback-error" }, errorMessage) : null,
+        sent ? createElement(
+          Text,
+          { style: styles.success, testID: "devteam-feedback-success" },
+          options.successMessage ?? "Thanks for the feedback!"
+        ) : null,
+        createElement(
+          View,
+          { style: styles.actions },
+          createElement(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              testID: "devteam-feedback-cancel",
+              onPress: close,
+              style: styles.cancelButton
+            },
+            createElement(Text, { style: styles.cancelLabel }, "Cancel")
+          ),
+          createElement(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              testID: "devteam-feedback-submit",
+              disabled: sending || sent,
+              onPress: () => {
+                void submit();
+              },
+              style: [styles.submitButton, { backgroundColor: accent }]
+            },
+            createElement(Text, { style: styles.submitLabel }, options.submitLabel ?? "Send")
+          )
+        )
+      )
+    )
+  );
+  return createElement(
+    View,
+    { style: styles.root },
+    createElement(
+      View,
+      { ref: contentRef, collapsable: false, style: styles.content },
+      props.children
+    ),
+    createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        testID: "devteam-feedback-button",
+        onPress: () => {
+          void open();
+        },
+        style: [styles.fab, positionStyle, { backgroundColor: accent }]
+      },
+      createElement(Text, { style: styles.fabLabel }, options.buttonLabel ?? "Feedback")
+    ),
+    modal
+  );
+}
+function capturedImageSize(base64) {
+  return new Promise((resolve) => {
+    try {
+      Image.getSize(
+        `data:image/png;base64,${base64}`,
+        (width, height) => resolve(width > 0 && height > 0 ? { width, height } : void 0),
+        () => resolve(void 0)
+      );
+    } catch {
+      resolve(void 0);
+    }
+  });
+}
+var styles = StyleSheet.create({
+  root: { flex: 1 },
+  content: { flex: 1 },
+  fab: {
+    position: "absolute",
+    bottom: 24,
+    borderRadius: 999,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    elevation: 4
+  },
+  fabRight: { right: 20 },
+  fabLeft: { left: 20 },
+  fabLabel: { color: "#ffffff", fontSize: 14, fontWeight: "600" },
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(15, 23, 42, 0.55)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  panel: {
+    width: "100%",
+    maxWidth: 560,
+    backgroundColor: "#ffffff",
+    borderRadius: 12,
+    padding: 16,
+    gap: 10
+  },
+  title: { fontSize: 16, fontWeight: "600", color: "#1f2933" },
+  preview: {
+    width: "100%",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#d3dce6",
+    overflow: "hidden"
+  },
+  previewSurface: { width: "100%", height: "100%" },
+  previewImage: { width: "100%", height: "100%" },
+  drawLayer: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
+  tools: { flexDirection: "row", alignItems: "center", gap: 8 },
+  swatch: { width: 24, height: 24, borderRadius: 12, borderWidth: 2, borderColor: "transparent" },
+  swatchActive: { borderColor: "#1f2933" },
+  toolButton: {
+    borderWidth: 1,
+    borderColor: "#d3dce6",
+    borderRadius: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 10
+  },
+  toolLabel: { fontSize: 13, color: "#1f2933" },
+  input: {
+    minHeight: 72,
+    borderWidth: 1,
+    borderColor: "#d3dce6",
+    borderRadius: 8,
+    padding: 10,
+    color: "#1f2933",
+    textAlignVertical: "top"
+  },
+  error: { color: "#b91c1c", fontSize: 13 },
+  success: { color: "#15803d", fontSize: 14, fontWeight: "600" },
+  actions: { flexDirection: "row", justifyContent: "flex-end", gap: 8 },
+  cancelButton: {
+    borderWidth: 1,
+    borderColor: "#d3dce6",
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 14
+  },
+  cancelLabel: { fontSize: 14, color: "#1f2933" },
+  submitButton: { borderRadius: 8, paddingVertical: 8, paddingHorizontal: 16 },
+  submitLabel: { fontSize: 14, fontWeight: "600", color: "#ffffff" }
+});
+
 // src/index.ts
 var REACT_NATIVE_SDK_NAME = "@getdevteam/analytics-react-native";
-var REACT_NATIVE_SDK_VERSION = "0.2.0";
+var REACT_NATIVE_SDK_VERSION = "0.3.0";
 function createAnalytics(config) {
   const client = createClient({
     ...config,
     storage: config.storage ?? createAsyncStorageAdapter()
   });
-  client.setContext({
+  const reactNativeContext = {
     sdk_name: REACT_NATIVE_SDK_NAME,
     sdk_version: REACT_NATIVE_SDK_VERSION,
     ...collectReactNativeContext(),
     ...config.context
-  });
+  };
+  client.setContext(reactNativeContext);
+  let currentContext = reactNativeContext;
+  const setContext = (partial) => {
+    client.setContext(partial);
+    try {
+      const next = { ...currentContext };
+      for (const [key, value] of Object.entries(partial)) {
+        if (value === void 0) {
+          delete next[key];
+        } else {
+          next[key] = value;
+        }
+      }
+      currentContext = next;
+    } catch {
+    }
+  };
   const removeAppStateFlush = installAppStateFlush(client);
+  const reportError = (error) => {
+    try {
+      config.onError?.(error);
+    } catch {
+    }
+  };
+  const submitFeedback = createFeedbackSender({
+    host: config.host,
+    key: config.key,
+    fetch: config.fetch ?? defaultReactNativeFetch(),
+    getDistinctId: () => client.getDistinctId(),
+    getSessionId: () => client.getSessionId(),
+    getContext: () => currentContext,
+    onError: reportError
+  });
   return {
     ...client,
+    setContext,
+    submitFeedback,
+    reportError,
+    userFeedbackAllowed: config.allowUserFeedback === true,
+    feedbackOptions: config.feedback ?? {},
     shutdown: async () => {
       removeAppStateFlush();
       await client.shutdown();
     }
   };
 }
+function defaultReactNativeFetch() {
+  if (typeof fetch !== "function") return void 0;
+  return (url, init) => fetch(url, init);
+}
 export {
+  FeedbackProvider,
   REACT_NATIVE_SDK_NAME,
   REACT_NATIVE_SDK_VERSION,
   collectReactNativeContext,