@truewatchtech/react-native-session-replay 0.4.1

package/lib/typescript/components/SessionReplayView/index.d.ts

@@ -0,0 +1,22 @@
+import { PrivacyView } from './PrivacyView';
+import { MaskAllView } from './MaskAllView';
+import { MaskNoneView } from './MaskNoneView';
+import { HideView } from './HideView';
+export declare const FTSessionReplayView: {
+    /**
+     * Privacy view component - Low-level configurable component for fine-grained privacy control
+     */
+    Privacy: typeof PrivacyView;
+    /**
+     * Mask all view component - Masks all text, inputs and images
+     */
+    MaskAll: typeof MaskAllView;
+    /**
+     * Mask none view component - Displays most content as-is
+     */
+    MaskNone: typeof MaskNoneView;
+    /**
+     * Hide view component - Completely hides the view and its content
+     */
+    Hide: typeof HideView;
+};

package/lib/typescript/ft_session_replay.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Privacy level for content masking in session replay. Deprecated, recommend using fine-grained privacy levels for settings
+ */
+export declare enum SessionReplayPrivacy {
+    MASK = 0,
+    ALLOW = 1,
+    MASK_USER_INPUT = 2
+}
+/**
+ * Available privacy levels for touch masking in session replay.
+ */
+export declare enum TouchPrivacyLevel {
+    SHOW = "SHOW",
+    HIDE = "HIDE"
+}
+/**
+ * Available privacy levels for image masking in session replay
+ */
+export declare enum ImagePrivacyLevel {
+    MASK_NON_BUNDLED_ONLY = "MASK_NON_BUNDLED_ONLY",
+    MASK_ALL = "MASK_ALL",
+    MASK_NONE = "MASK_NONE"
+}
+/**
+ * Available privacy levels for text and input masking in session replay
+ */
+export declare enum TextAndInputPrivacyLevel {
+    MASK_SENSITIVE_INPUTS = "MASK_SENSITIVE_INPUTS",
+    MASK_ALL_INPUTS = "MASK_ALL_INPUTS",
+    MASK_ALL = "MASK_ALL"
+}
+/**
+ * Set Session Replay configuration.
+ * @param sampleRate Sampling rate
+ * @param sessionReplayOnErrorSampleRate error session sampling rate. For sessions not sampled, if ERROR is hit, collect data 1 minute before the error occurs
+ * @param privacy Privacy level for content masking in session replay
+ * @param touchPrivacy Privacy level for touch masking in session replay
+ * @param textAndInputPrivacy Privacy level for text and input masking in session replay
+ * @param imagePrivacy Privacy level for image masking in session replay
+ * @param enableLinkRUMKeys Enable linking RUM data with session replay data. The value is an array of RUM global context keys. When the keys exist in RUM global context, the corresponding values will be linked to session replay data.
+ * @returns a Promise.
+ */
+export interface FTSessionReplayConfig {
+    sampleRate?: number;
+    sessionReplayOnErrorSampleRate?: number;
+    privacy?: SessionReplayPrivacy;
+    touchPrivacy?: TouchPrivacyLevel;
+    textAndInputPrivacy?: TextAndInputPrivacyLevel;
+    imagePrivacy?: ImagePrivacyLevel;
+    enableLinkRUMKeys?: string[];
+}
+type FTReactNativeSessionReplayType = {
+    /**
+     * Set Session Replay configuration and enable session replay
+     * @param config Session Replay configuration parameters.
+     * @returns a Promise.
+     */
+    sessionReplayConfig(config: FTSessionReplayConfig): Promise<void>;
+};
+export declare const FTReactNativeSessionReplay: FTReactNativeSessionReplayType;
+export {};

package/lib/typescript/index.d.ts

@@ -0,0 +1,3 @@
+import { FTSessionReplayConfig, SessionReplayPrivacy, FTReactNativeSessionReplay, TouchPrivacyLevel, TextAndInputPrivacyLevel, ImagePrivacyLevel } from './ft_session_replay';
+import { FTSessionReplayView } from './components/SessionReplayView';
+export { FTSessionReplayConfig, SessionReplayPrivacy, FTReactNativeSessionReplay, TouchPrivacyLevel, TextAndInputPrivacyLevel, ImagePrivacyLevel, FTSessionReplayView, };

package/lib/typescript/specs/FTPrivacyViewNative.d.ts

@@ -0,0 +1,2 @@
+declare const FTPrivacyViewNative: any;
+export default FTPrivacyViewNative;

package/lib/typescript/specs/FTPrivacyViewNativeComponent.d.ts

@@ -0,0 +1,10 @@
+import type { HostComponent, ViewProps } from 'react-native';
+export interface FTPrivacyViewNativeProps extends ViewProps {
+    textAndInputPrivacy?: string;
+    imagePrivacy?: string;
+    touchPrivacy?: string;
+    hide?: boolean;
+    nativeID?: string;
+}
+declare const _default: HostComponent<FTPrivacyViewNativeProps>;
+export default _default;

package/lib/typescript/specs/NativeFTReactNativeSessionReplay.d.ts

@@ -0,0 +1,11 @@
+import type { TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    /**
+     * Set Session Replay configuration and enable session replay
+     * @param config Session Replay configuration parameters.
+     * @returns a Promise.
+     */
+    sessionReplayConfig(config: Object): Promise<void>;
+}
+declare const _default: Spec | null;
+export default _default;

package/lib/typescript/types.d.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+export interface FTPrivacyViewNativeProps extends ViewProps {
+    textAndInputPrivacy?: string;
+    imagePrivacy?: string;
+    touchPrivacy?: string;
+    hide?: boolean;
+    nativeID?: string;
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@truewatchtech/react-native-session-replay",
+  "version": "0.4.1",
+  "description": "Session Replay package for TrueWatch React Native SDK",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "scripts/set-ios-rn-version.js",
+    "FTSessionReplayReactNative.podspec",
+    "!android/.project",
+    "!android/build",
+    "!android/.gradle",
+    "!android/.idea",
+    "!android/.settings",
+    "!ios/build",
+    "!ios/RCTVersion.h",
+    "!ios/**/xcuserdata",
+    "!ios/**/*.xcuserstate",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "typescript": "yarn run -T tsc --noEmit",
+    "lint": "yarn run -T eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "yarn run -T bob build",
+    "prepack": "yarn run -T check-version && yarn prepare",
+    "postinstall": "node scripts/set-ios-rn-version.js"
+  },
+  "keywords": [
+    "truewatch",
+    "react-native",
+    "session-replay",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TrueWatchTech/datakit-react-native.git"
+  },
+  "author": "Brandon <brandonfaustine@gmail.com> (https://github.com/Br4ndonZhang)",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/TrueWatchTech/datakit-react-native/issues"
+  },
+  "homepage": "https://github.com/TrueWatchTech/datakit-react-native.git#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=16.13.1",
+    "react-native": ">=0.63.4 <1.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "tsc": "../../node_modules/.bin/tsc"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "FTSessionReplayReactNative",
+    "type": "all",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.ft.sdk.reactnative.sessionreplay"
+    },
+    "ios": {
+      "componentProvider": {
+        "FTPrivacyView": "FTPrivacyViewFabric"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.5"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/scripts/set-ios-rn-version.js

@@ -0,0 +1,47 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+function getReactNativeVersion() {
+  try {
+    // eslint-disable-next-line global-require
+    return require('react-native/package.json').version;
+  } catch (error) {
+    throw new Error(
+      'Failed to find React Native. Ensure it is installed in your project.'
+    );
+  }
+}
+
+const rnVersion = getReactNativeVersion();
+
+const outputDir = path.resolve(__dirname, '../ios');
+const outputFile = path.join(outputDir, 'RCTVersion.h');
+
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+const [major, minor, patch] = rnVersion.split('.').map(Number);
+
+const headerContent = `#ifndef RCTVersion_h
+#define RCTVersion_h
+
+#define RCT_VERSION_MAJOR ${major || 0}
+#define RCT_VERSION_MINOR ${minor || 0}
+#define RCT_VERSION_PATCH ${patch || 0}
+
+#endif /* RCTVersion_h */
+`;
+
+try {
+  fs.writeFileSync(outputFile, headerContent, 'utf8');
+} catch (error) {
+  console.error(`Failed to write RCTVersion.h: ${error.message}`);
+  process.exit(1);
+}

package/src/components/SessionReplayView/HideView.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import { PrivacyView } from './PrivacyView';
+
+type HideViewProps = ViewProps & {
+  children?: React.ReactNode;
+};
+
+export function HideView({ children, ...props }: HideViewProps) {
+  return (
+    <PrivacyView {...props} hide={true}>
+      {children as any}
+    </PrivacyView>
+  );
+}

package/src/components/SessionReplayView/MaskAllView.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import { PrivacyView } from './PrivacyView';
+import {
+  ImagePrivacyLevel,
+  TextAndInputPrivacyLevel,
+  TouchPrivacyLevel,
+} from '../../ft_session_replay';
+
+type MaskAllViewProps = ViewProps & {
+  children?: React.ReactNode;
+  showTouch?: boolean;
+};
+
+export function MaskAllView({
+  children,
+  showTouch = false,
+  ...props
+}: MaskAllViewProps) {
+  const touchPrivacy = showTouch
+    ? TouchPrivacyLevel.SHOW
+    : TouchPrivacyLevel.HIDE;
+
+  return (
+    <PrivacyView
+      {...props}
+      textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_ALL}
+      imagePrivacy={ImagePrivacyLevel.MASK_ALL}
+      touchPrivacy={touchPrivacy}
+      hide={false}
+    >
+      {children as any}
+    </PrivacyView>
+  );
+}

package/src/components/SessionReplayView/MaskNoneView.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import { PrivacyView } from './PrivacyView';
+import {
+  ImagePrivacyLevel,
+  TextAndInputPrivacyLevel,
+  TouchPrivacyLevel,
+} from '../../ft_session_replay';
+
+type MaskNoneViewProps = ViewProps & {
+  children?: React.ReactNode;
+};
+
+export function MaskNoneView({ children, ...props }: MaskNoneViewProps) {
+  return (
+    <PrivacyView
+      {...props}
+      textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS}
+      imagePrivacy={ImagePrivacyLevel.MASK_NONE}
+      touchPrivacy={TouchPrivacyLevel.SHOW}
+      hide={false}
+    >
+      {children as any}
+    </PrivacyView>
+  );
+}

package/src/components/SessionReplayView/PrivacyView.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import FTPrivacyViewNative from '../../specs/FTPrivacyViewNative';
+import type { ViewProps } from 'react-native';
+import type {
+  ImagePrivacyLevel,
+  TextAndInputPrivacyLevel,
+  TouchPrivacyLevel,
+} from '../../ft_session_replay';
+
+export interface PrivacyViewProps extends ViewProps {
+  children?: React.ReactNode;
+  textAndInputPrivacy?: TextAndInputPrivacyLevel;
+  imagePrivacy?: ImagePrivacyLevel;
+  touchPrivacy?: TouchPrivacyLevel;
+  hide?: boolean;
+  nativeID?: string;
+}
+
+export function PrivacyView({
+  children,
+  textAndInputPrivacy,
+  imagePrivacy,
+  touchPrivacy,
+  nativeID,
+  hide,
+  ...props
+}: PrivacyViewProps) {
+  return (
+    <FTPrivacyViewNative
+      {...props}
+      textAndInputPrivacy={textAndInputPrivacy}
+      imagePrivacy={imagePrivacy}
+      touchPrivacy={touchPrivacy}
+      hide={hide}
+      nativeID={nativeID}
+    >
+      {children}
+    </FTPrivacyViewNative>
+  );
+}

package/src/components/SessionReplayView/index.ts

@@ -0,0 +1,26 @@
+import { PrivacyView } from './PrivacyView';
+import { MaskAllView } from './MaskAllView';
+import { MaskNoneView } from './MaskNoneView';
+import { HideView } from './HideView';
+
+export const FTSessionReplayView = {
+  /**
+   * Privacy view component - Low-level configurable component for fine-grained privacy control
+   */
+  Privacy: PrivacyView,
+
+  /**
+   * Mask all view component - Masks all text, inputs and images
+   */
+  MaskAll: MaskAllView,
+
+  /**
+   * Mask none view component - Displays most content as-is
+   */
+  MaskNone: MaskNoneView,
+
+  /**
+   * Hide view component - Completely hides the view and its content
+   */
+  Hide: HideView,
+};

package/src/ft_session_replay.tsx

@@ -0,0 +1,78 @@
+// import { NativeModules } from 'react-native';
+/**
+ * Privacy level for content masking in session replay. Deprecated, recommend using fine-grained privacy levels for settings
+ */
+export enum SessionReplayPrivacy {
+  MASK = 0,
+  ALLOW = 1,
+  MASK_USER_INPUT = 2,
+}
+
+/**
+ * Available privacy levels for touch masking in session replay.
+ */
+export enum TouchPrivacyLevel {
+  SHOW = 'SHOW',
+  HIDE = 'HIDE',
+}
+
+/**
+ * Available privacy levels for image masking in session replay
+ */
+export enum ImagePrivacyLevel {
+  MASK_NON_BUNDLED_ONLY = 'MASK_NON_BUNDLED_ONLY',
+  MASK_ALL = 'MASK_ALL',
+  MASK_NONE = 'MASK_NONE',
+}
+
+/**
+ * Available privacy levels for text and input masking in session replay
+ */
+export enum TextAndInputPrivacyLevel {
+  MASK_SENSITIVE_INPUTS = 'MASK_SENSITIVE_INPUTS',
+  MASK_ALL_INPUTS = 'MASK_ALL_INPUTS',
+  MASK_ALL = 'MASK_ALL',
+}
+/**
+ * Set Session Replay configuration.
+ * @param sampleRate Sampling rate
+ * @param sessionReplayOnErrorSampleRate error session sampling rate. For sessions not sampled, if ERROR is hit, collect data 1 minute before the error occurs
+ * @param privacy Privacy level for content masking in session replay
+ * @param touchPrivacy Privacy level for touch masking in session replay
+ * @param textAndInputPrivacy Privacy level for text and input masking in session replay
+ * @param imagePrivacy Privacy level for image masking in session replay
+ * @param enableLinkRUMKeys Enable linking RUM data with session replay data. The value is an array of RUM global context keys. When the keys exist in RUM global context, the corresponding values will be linked to session replay data.
+ * @returns a Promise.
+ */
+export interface FTSessionReplayConfig {
+  sampleRate?: number;
+  sessionReplayOnErrorSampleRate?: number;
+  privacy?: SessionReplayPrivacy;
+  touchPrivacy?: TouchPrivacyLevel;
+  textAndInputPrivacy?: TextAndInputPrivacyLevel;
+  imagePrivacy?: ImagePrivacyLevel;
+  enableLinkRUMKeys?: string[];
+}
+type FTReactNativeSessionReplayType = {
+  /**
+   * Set Session Replay configuration and enable session replay
+   * @param config Session Replay configuration parameters.
+   * @returns a Promise.
+   */
+  sessionReplayConfig(config: FTSessionReplayConfig): Promise<void>;
+};
+
+class FTReactNativeSessionReplayWrapper
+  implements FTReactNativeSessionReplayType
+{
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  private sessionReplay: FTReactNativeSessionReplayType =
+    require('./specs/NativeFTReactNativeSessionReplay').default;
+  /* eslint-enable @typescript-eslint/no-var-requires */
+
+  sessionReplayConfig(config: FTSessionReplayConfig): Promise<void> {
+    return this.sessionReplay.sessionReplayConfig(config);
+  }
+}
+export const FTReactNativeSessionReplay: FTReactNativeSessionReplayType =
+  new FTReactNativeSessionReplayWrapper();

package/src/index.tsx

@@ -0,0 +1,19 @@
+import {
+  FTSessionReplayConfig,
+  SessionReplayPrivacy,
+  FTReactNativeSessionReplay,
+  TouchPrivacyLevel,
+  TextAndInputPrivacyLevel,
+  ImagePrivacyLevel,
+} from './ft_session_replay';
+import { FTSessionReplayView } from './components/SessionReplayView';
+
+export {
+  FTSessionReplayConfig,
+  SessionReplayPrivacy,
+  FTReactNativeSessionReplay,
+  TouchPrivacyLevel,
+  TextAndInputPrivacyLevel,
+  ImagePrivacyLevel,
+  FTSessionReplayView,
+};

package/src/specs/FTPrivacyViewNative.ts

@@ -0,0 +1,32 @@
+import { UIManager } from 'react-native';
+import { requireNativeComponent } from 'react-native';
+import type { FTPrivacyViewNativeProps } from '../types';
+
+const isNewArchitectureEnabled = () => {
+  return UIManager.getViewManagerConfig?.('FTPrivacyView') === undefined;
+};
+
+const getNativeComponent = () => {
+  if (isNewArchitectureEnabled()) {
+    try {
+      /* eslint-disable @typescript-eslint/no-var-requires */
+      const NewArchComponent =
+        require('./FTPrivacyViewNativeComponent').default;
+      /* eslint-enable @typescript-eslint/no-var-requires */
+      if (NewArchComponent) {
+        return NewArchComponent;
+      }
+    } catch (error) {
+      console.debug(
+        'Fabric component not available, falling back to Paper:',
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  }
+
+  return requireNativeComponent<FTPrivacyViewNativeProps>('FTPrivacyView');
+};
+
+const FTPrivacyViewNative = getNativeComponent();
+
+export default FTPrivacyViewNative;

package/src/specs/FTPrivacyViewNativeComponent.ts

@@ -0,0 +1,14 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps } from 'react-native';
+
+export interface FTPrivacyViewNativeProps extends ViewProps {
+  textAndInputPrivacy?: string;
+  imagePrivacy?: string;
+  touchPrivacy?: string;
+  hide?: boolean;
+  nativeID?: string;
+}
+
+export default codegenNativeComponent<FTPrivacyViewNativeProps>(
+  'FTPrivacyView'
+) as HostComponent<FTPrivacyViewNativeProps>;

package/src/specs/NativeFTReactNativeSessionReplay.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  /**
+   * Set Session Replay configuration and enable session replay
+   * @param config Session Replay configuration parameters.
+   * @returns a Promise.
+   */
+  sessionReplayConfig(config: Object): Promise<void>;
+}
+export default TurboModuleRegistry.get<Spec>('FTReactNativeSessionReplay');

package/src/types.ts

@@ -0,0 +1,9 @@
+import type { ViewProps } from 'react-native';
+
+export interface FTPrivacyViewNativeProps extends ViewProps {
+  textAndInputPrivacy?: string;
+  imagePrivacy?: string;
+  touchPrivacy?: string;
+  hide?: boolean;
+  nativeID?: string;
+}