@userflow-tech/react-native 0.1.0

package/lib/module/anchors/useUserflowAnchor.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import * as React from 'react';
+import { anchorRegistry } from "./AnchorRegistry.js";
+
+/**
+ * Register a view as a manual Userflow tooltip / embed target.
+ *
+ * Prefer tagging with a plain `testID` (or `nativeID` / `accessibilityLabel`)
+ * on the target view — the SDK resolves those via a fiber-tree scan without a
+ * hook. Use this hook when you need an explicit override (e.g. a third-party
+ * component that does not forward `testID`, or when the same string appears on
+ * multiple views).
+ *
+ * Usage (override):
+ * ```tsx
+ * const anchorRef = useUserflowAnchor('invite-teammates');
+ * return <Pressable ref={anchorRef}>Invite</Pressable>;
+ * ```
+ *
+ * Preferred (no hook):
+ * ```tsx
+ * return <Pressable testID="invite-teammates">Invite</Pressable>;
+ * ```
+ *
+ * When the target can sit inside a scrollable screen, also register the parent
+ * {@link ScrollView} with {@link useUserflowScrollContainer} so off-screen
+ * anchors are scrolled into view before the tooltip places.
+ *
+ * Phase 3 resolves targets via `step.selector.css` (leading `#` stripped).
+ */
+export function useUserflowAnchor(id) {
+  const hostRef = React.useRef(null);
+  const idRef = React.useRef(id);
+  React.useEffect(() => {
+    const previousId = idRef.current;
+    const host = hostRef.current;
+    if (previousId !== id && host) {
+      anchorRegistry.unregister(previousId, host);
+      if (id) {
+        anchorRegistry.register(id, host);
+      }
+    }
+    idRef.current = id;
+  }, [id]);
+  React.useEffect(() => {
+    return () => {
+      const host = hostRef.current;
+      if (host) {
+        anchorRegistry.unregister(idRef.current, host);
+        hostRef.current = null;
+      }
+    };
+  }, []);
+  return React.useCallback(node => {
+    const previous = hostRef.current;
+    const currentId = idRef.current;
+    if (previous) {
+      anchorRegistry.unregister(currentId, previous);
+    }
+    if (!node) {
+      hostRef.current = null;
+      return;
+    }
+
+    // Wrap the view so we can add optional best-effort scrollIntoView (e.g. RN Web).
+    const host = {
+      measureInWindow: callback => {
+        node.measureInWindow(callback);
+      },
+      scrollIntoView: () => {
+        const scrollable = node;
+        if (typeof scrollable.scrollIntoView === 'function') {
+          scrollable.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest'
+          });
+        }
+      }
+    };
+    hostRef.current = host;
+    if (currentId) {
+      anchorRegistry.register(currentId, host);
+    }
+  }, []);
+}
+//# sourceMappingURL=useUserflowAnchor.js.map

package/lib/module/anchors/useUserflowAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","anchorRegistry","useUserflowAnchor","id","hostRef","useRef","idRef","useEffect","previousId","current","host","unregister","register","useCallback","node","previous","currentId","measureInWindow","callback","scrollIntoView","scrollable","block","inline"],"sourceRoot":"../../../src","sources":["anchors/useUserflowAnchor.ts"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,cAAc,QAAyB,qBAAkB;;AAElE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAACC,EAAU,EAA2B;EACrE,MAAMC,OAAO,GAAGJ,KAAK,CAACK,MAAM,CAAoB,IAAI,CAAC;EACrD,MAAMC,KAAK,GAAGN,KAAK,CAACK,MAAM,CAACF,EAAE,CAAC;EAE9BH,KAAK,CAACO,SAAS,CAAC,MAAM;IACpB,MAAMC,UAAU,GAAGF,KAAK,CAACG,OAAO;IAChC,MAAMC,IAAI,GAAGN,OAAO,CAACK,OAAO;IAC5B,IAAID,UAAU,KAAKL,EAAE,IAAIO,IAAI,EAAE;MAC7BT,cAAc,CAACU,UAAU,CAACH,UAAU,EAAEE,IAAI,CAAC;MAC3C,IAAIP,EAAE,EAAE;QACNF,cAAc,CAACW,QAAQ,CAACT,EAAE,EAAEO,IAAI,CAAC;MACnC;IACF;IACAJ,KAAK,CAACG,OAAO,GAAGN,EAAE;EACpB,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAERH,KAAK,CAACO,SAAS,CAAC,MAAM;IACpB,OAAO,MAAM;MACX,MAAMG,IAAI,GAAGN,OAAO,CAACK,OAAO;MAC5B,IAAIC,IAAI,EAAE;QACRT,cAAc,CAACU,UAAU,CAACL,KAAK,CAACG,OAAO,EAAEC,IAAI,CAAC;QAC9CN,OAAO,CAACK,OAAO,GAAG,IAAI;MACxB;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,KAAK,CAACa,WAAW,CAAEC,IAAiB,IAAK;IAC9C,MAAMC,QAAQ,GAAGX,OAAO,CAACK,OAAO;IAChC,MAAMO,SAAS,GAAGV,KAAK,CAACG,OAAO;IAC/B,IAAIM,QAAQ,EAAE;MACZd,cAAc,CAACU,UAAU,CAACK,SAAS,EAAED,QAAQ,CAAC;IAChD;IACA,IAAI,CAACD,IAAI,EAAE;MACTV,OAAO,CAACK,OAAO,GAAG,IAAI;MACtB;IACF;;IAEA;IACA,MAAMC,IAAgB,GAAG;MACvBO,eAAe,EAAGC,QAAQ,IAAK;QAC7BJ,IAAI,CAACG,eAAe,CAACC,QAAQ,CAAC;MAChC,CAAC;MACDC,cAAc,EAAEA,CAAA,KAAM;QACpB,MAAMC,UAAU,GAAGN,IAElB;QACD,IAAI,OAAOM,UAAU,CAACD,cAAc,KAAK,UAAU,EAAE;UACnDC,UAAU,CAACD,cAAc,CAAC;YAAEE,KAAK,EAAE,SAAS;YAAEC,MAAM,EAAE;UAAU,CAAC,CAAC;QACpE;MACF;IACF,CAAC;IACDlB,OAAO,CAACK,OAAO,GAAGC,IAAI;IACtB,IAAIM,SAAS,EAAE;MACbf,cAAc,CAACW,QAAQ,CAACI,SAAS,EAAEN,IAAI,CAAC;IAC1C;EACF,CAAC,EAAE,EAAE,CAAC;AACR","ignoreList":[]}

package/lib/module/anchors/useUserflowScrollContainer.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import * as React from 'react';
+import { createScrollContainerHost, scrollContainerRegistry } from "./ScrollContainerRegistry.js";
+/**
+ * Register a host {@link ScrollView} so tooltip anchors can be scrolled into view
+ * when their measured window rect is not fully visible.
+ *
+ * Usually unnecessary — the SDK discovers ScrollView / FlatList ancestors via
+ * the fiber walk for `testID` anchors. Use this hook as an explicit override
+ * for scroll libraries the walk cannot drive, or when the target is only
+ * registered via {@link useUserflowAnchor} without a discoverable fiber.
+ *
+ * Usage:
+ * ```tsx
+ * const scroll = useUserflowScrollContainer();
+ * return (
+ *   <ScrollView {...scroll}>
+ *     <Pressable testID="invite-teammates">Invite</Pressable>
+ *   </ScrollView>
+ * );
+ * ```
+ *
+ * Screen tracking ≠ scroll registration — only ScrollViews you pass through this
+ * hook participate in the registry override path.
+ */
+export function useUserflowScrollContainer(onScrollProp) {
+  const hostRef = React.useRef(null);
+  const nodeRef = React.useRef(null);
+  const offsetRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  React.useEffect(() => {
+    return () => {
+      const host = hostRef.current;
+      if (host) {
+        scrollContainerRegistry.unregister(host);
+        hostRef.current = null;
+      }
+    };
+  }, []);
+  const ref = React.useCallback(node => {
+    const previous = hostRef.current;
+    if (previous) {
+      scrollContainerRegistry.unregister(previous);
+      hostRef.current = null;
+    }
+    nodeRef.current = node;
+    if (!node) return;
+    const host = createScrollContainerHost(node, () => offsetRef.current);
+    hostRef.current = host;
+    scrollContainerRegistry.register(host);
+  }, []);
+  const onScroll = React.useCallback(event => {
+    const {
+      contentOffset
+    } = event.nativeEvent;
+    offsetRef.current = {
+      x: contentOffset.x,
+      y: contentOffset.y
+    };
+    onScrollProp?.(event);
+  }, [onScrollProp]);
+  return {
+    ref,
+    onScroll,
+    scrollEventThrottle: 16
+  };
+}
+//# sourceMappingURL=useUserflowScrollContainer.js.map

package/lib/module/anchors/useUserflowScrollContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createScrollContainerHost","scrollContainerRegistry","useUserflowScrollContainer","onScrollProp","hostRef","useRef","nodeRef","offsetRef","x","y","useEffect","host","current","unregister","ref","useCallback","node","previous","register","onScroll","event","contentOffset","nativeEvent","scrollEventThrottle"],"sourceRoot":"../../../src","sources":["anchors/useUserflowScrollContainer.ts"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SACEC,yBAAyB,EACzBC,uBAAuB,QAElB,8BAA2B;AAWlC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CACxCC,YAAuE,EACzC;EAC9B,MAAMC,OAAO,GAAGL,KAAK,CAACM,MAAM,CAA6B,IAAI,CAAC;EAC9D,MAAMC,OAAO,GAAGP,KAAK,CAACM,MAAM,CAAoB,IAAI,CAAC;EACrD,MAAME,SAAS,GAAGR,KAAK,CAACM,MAAM,CAAC;IAAEG,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAE9CV,KAAK,CAACW,SAAS,CAAC,MAAM;IACpB,OAAO,MAAM;MACX,MAAMC,IAAI,GAAGP,OAAO,CAACQ,OAAO;MAC5B,IAAID,IAAI,EAAE;QACRV,uBAAuB,CAACY,UAAU,CAACF,IAAI,CAAC;QACxCP,OAAO,CAACQ,OAAO,GAAG,IAAI;MACxB;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,GAAG,GAAGf,KAAK,CAACgB,WAAW,CAAEC,IAAuB,IAAK;IACzD,MAAMC,QAAQ,GAAGb,OAAO,CAACQ,OAAO;IAChC,IAAIK,QAAQ,EAAE;MACZhB,uBAAuB,CAACY,UAAU,CAACI,QAAQ,CAAC;MAC5Cb,OAAO,CAACQ,OAAO,GAAG,IAAI;IACxB;IACAN,OAAO,CAACM,OAAO,GAAGI,IAAI;IACtB,IAAI,CAACA,IAAI,EAAE;IAEX,MAAML,IAAI,GAAGX,yBAAyB,CAACgB,IAAI,EAAE,MAAMT,SAAS,CAACK,OAAO,CAAC;IACrER,OAAO,CAACQ,OAAO,GAAGD,IAAI;IACtBV,uBAAuB,CAACiB,QAAQ,CAACP,IAAI,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMQ,QAAQ,GAAGpB,KAAK,CAACgB,WAAW,CAC/BK,KAA8C,IAAK;IAClD,MAAM;MAAEC;IAAc,CAAC,GAAGD,KAAK,CAACE,WAAW;IAC3Cf,SAAS,CAACK,OAAO,GAAG;MAAEJ,CAAC,EAAEa,aAAa,CAACb,CAAC;MAAEC,CAAC,EAAEY,aAAa,CAACZ;IAAE,CAAC;IAC9DN,YAAY,GAAGiB,KAAK,CAAC;EACvB,CAAC,EACD,CAACjB,YAAY,CACf,CAAC;EAED,OAAO;IACLW,GAAG;IACHK,QAAQ;IACRI,mBAAmB,EAAE;EACvB,CAAC;AACH","ignoreList":[]}

package/lib/module/anonymousId.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { UserflowAuthError } from '@userflow-tech/core';
+
+/** Matches the web SDK's `userflow:anonymousId` localStorage key. */
+export const ANONYMOUS_ID_STORAGE_KEY = 'userflow:anonymousId';
+function uuid() {
+  const webcrypto = globalThis.crypto;
+  if (webcrypto?.randomUUID) return webcrypto.randomUUID();
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => {
+    const rand = Math.random() * 16 | 0;
+    const value = char === 'x' ? rand : rand & 0x3 | 0x8;
+    return value.toString(16);
+  });
+}
+export async function getOrCreateAnonymousId() {
+  try {
+    let externalId = await AsyncStorage.getItem(ANONYMOUS_ID_STORAGE_KEY);
+    if (!externalId) {
+      externalId = `anon-${uuid()}`;
+      await AsyncStorage.setItem(ANONYMOUS_ID_STORAGE_KEY, externalId);
+    }
+    return externalId;
+  } catch {
+    throw new UserflowAuthError('Userflow.identifyAnonymous() is not supported when persistent storage is unavailable.');
+  }
+}
+export async function clearAnonymousId() {
+  try {
+    await AsyncStorage.removeItem(ANONYMOUS_ID_STORAGE_KEY);
+  } catch {
+    // Best-effort clear, mirroring the web SDK when storage access is denied.
+  }
+}
+//# sourceMappingURL=anonymousId.js.map

package/lib/module/anonymousId.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AsyncStorage","UserflowAuthError","ANONYMOUS_ID_STORAGE_KEY","uuid","webcrypto","globalThis","crypto","randomUUID","replace","char","rand","Math","random","value","toString","getOrCreateAnonymousId","externalId","getItem","setItem","clearAnonymousId","removeItem"],"sourceRoot":"../../src","sources":["anonymousId.ts"],"mappings":";;AAAA,OAAOA,YAAY,MAAM,2CAA2C;AACpE,SAASC,iBAAiB,QAAQ,qBAAqB;;AAEvD;AACA,OAAO,MAAMC,wBAAwB,GAAG,sBAAsB;AAE9D,SAASC,IAAIA,CAAA,EAAW;EACtB,MAAMC,SAAS,GAAGC,UAAU,CAACC,MAAM;EACnC,IAAIF,SAAS,EAAEG,UAAU,EAAE,OAAOH,SAAS,CAACG,UAAU,CAAC,CAAC;EACxD,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAGC,IAAI,IAAK;IACvE,MAAMC,IAAI,GAAIC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAI,CAAC;IACrC,MAAMC,KAAK,GAAGJ,IAAI,KAAK,GAAG,GAAGC,IAAI,GAAIA,IAAI,GAAG,GAAG,GAAI,GAAG;IACtD,OAAOG,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;EAC3B,CAAC,CAAC;AACJ;AAEA,OAAO,eAAeC,sBAAsBA,CAAA,EAAoB;EAC9D,IAAI;IACF,IAAIC,UAAU,GAAG,MAAMhB,YAAY,CAACiB,OAAO,CAACf,wBAAwB,CAAC;IACrE,IAAI,CAACc,UAAU,EAAE;MACfA,UAAU,GAAG,QAAQb,IAAI,CAAC,CAAC,EAAE;MAC7B,MAAMH,YAAY,CAACkB,OAAO,CAAChB,wBAAwB,EAAEc,UAAU,CAAC;IAClE;IACA,OAAOA,UAAU;EACnB,CAAC,CAAC,MAAM;IACN,MAAM,IAAIf,iBAAiB,CACzB,uFACF,CAAC;EACH;AACF;AAEA,OAAO,eAAekB,gBAAgBA,CAAA,EAAkB;EACtD,IAAI;IACF,MAAMnB,YAAY,CAACoB,UAAU,CAAClB,wBAAwB,CAAC;EACzD,CAAC,CAAC,MAAM;IACN;EAAA;AAEJ","ignoreList":[]}