@applicaster/zapp-react-native-utils 12.0.0-rc.14 → 12.0.0-rc.140

package/reactHooks/useListenEventBusEvent.ts

@@ -13,10 +13,7 @@ export const useListenEventBusEvent = (
     // TODO: remove after implementing ReactNativeEventBusBridge on iOS
     if (Platform.OS === "android") {
       // subscribe to DeviceEventEmitter using subsciption ID
-      const sub = DeviceEventEmitter.addListener(
-        subscriptionID,
-        handler
-      );
+      const sub = DeviceEventEmitter.addListener(subscriptionID, handler);
 
       // ask native to start routing these events to RN
       ReactNativeEventBusBridge.subscribe(subscriptionID, { [source]: events });

package/reactHooks/videoModal/hooks/useVideoModalScreenData.tsx

@@ -1,8 +1,7 @@
-import {
-  useContentTypes,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import React from "react";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRivers } from "../../state";
 
 export const useVideoModalScreenData = ():
   | (ZappEntry & { targetScreen: any }) // TODO: fix ZappEntry type ( was ZappRiver but conflict )
@@ -12,11 +11,13 @@ export const useVideoModalScreenData = ():
   } = useNavigation();
 
   const contentTypes = useContentTypes();
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
 
-  if (item?.type?.value) {
-    const screenId = contentTypes[item?.type?.value].screen_id;
+  return React.useMemo(() => {
+    if (item?.type?.value) {
+      const screenId = contentTypes[item?.type?.value].screen_id;
 
-    return { ...item, targetScreen: rivers?.[screenId] };
-  }
+      return { ...item, targetScreen: rivers?.[screenId] };
+    }
+  }, [item]);
 };

package/reactUtils/index.ts

@@ -108,3 +108,107 @@ export const isAndroidPlatform = () => Platform.OS === "android";
 export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
+
+declare global {
+  interface Window {
+    VIZIO?: {
+      Chromevox: {
+        play: (text: string) => void;
+      };
+      exitApplication: () => void;
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};
+
+/**
+ * Simple way of identifying if we have access to the tizen APIs
+ */
+export const hasTizen = typeof window?.tizen !== "undefined";
+
+/**
+ * Simple way of identifying if we have access to the webOS APIs
+ */
+export const hasWebOS = typeof window?.webOS !== "undefined";
+
+export const getUserAgent = () => window?.navigator?.userAgent;
+
+export const isLgPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
+  return hasWebOS || userAgent.includes(PLATFORMS.webos);
+};
+
+export const isSamsungPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  return (
+    hasTizen ||
+    userAgent.includes(PLATFORMS.samsung) ||
+    userAgent.includes(PLATFORMS.tizen)
+  );
+};
+
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};

package/riverComponetsMeasurementProvider/index.tsx

@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import { isApplePlatform, isWeb } from "../reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useRivers } from "../reactHooks/state";
 
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
@@ -58,7 +58,7 @@ export const ScreenLoadingMeasurements = ({
   numberOfComponents,
   riverId,
 }: Props) => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenData = rivers?.[riverId];
 
   const [itemsLayout, dispatchItemLayout] = React.useReducer(

package/services/localStorageServiceSync.web.ts

@@ -0,0 +1,48 @@
+import {
+  DEFAULT_STORAGE_NAMESPACE,
+  getWebStorageKey,
+  NAMESPACE_STORAGE_SEPARATOR_WEB,
+} from "./storageWebUtils.web";
+
+export function saveSync(
+  key: string,
+  value: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.setItem(storageWebKey, value);
+}
+
+export function getSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.getItem(storageWebKey);
+}
+
+export function getAllSync(namespace: string = DEFAULT_STORAGE_NAMESPACE) {
+  const allItems = {};
+
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+
+    if (key && key.startsWith(namespace + NAMESPACE_STORAGE_SEPARATOR_WEB)) {
+      const itemKey = key.split(NAMESPACE_STORAGE_SEPARATOR_WEB)[1];
+      allItems[itemKey] = localStorage.getItem(key);
+    }
+  }
+
+  return allItems;
+}
+
+export function removeSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.removeItem(storageWebKey);
+}

package/services/sessionStorageServiceSync.web.ts

@@ -0,0 +1,32 @@
+import {
+  DEFAULT_STORAGE_NAMESPACE,
+  getWebStorageKey,
+} from "./storageWebUtils.web";
+
+export function saveSync(
+  key: string,
+  value: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return sessionStorage.setItem(storageWebKey, value);
+}
+
+export function getSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return sessionStorage.getItem(storageWebKey);
+}
+
+export function removeSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return sessionStorage.removeItem(storageWebKey);
+}

package/services/storageServiceSync.web.ts

@@ -0,0 +1,24 @@
+import { DEFAULT_STORAGE_NAMESPACE } from "./storageWebUtils.web";
+import { getSync as getLocalStorage } from "./localStorageServiceSync.web";
+import { getSync as getSessionStorage } from "./sessionStorageServiceSync.web";
+
+export const getFromSessionOrLocalStorage = (
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) => getSessionStorage(key, namespace) || getLocalStorage(key, namespace);
+
+export const resolveStorageContextKey = (storageKey: string) => {
+  if (!storageKey) {
+    return;
+  }
+
+  const splitKey = storageKey.split(".");
+  const namespaceOrKey = splitKey[0];
+  const key = splitKey[1];
+
+  if (!key) {
+    return getFromSessionOrLocalStorage(key);
+  } else {
+    return getFromSessionOrLocalStorage(key, namespaceOrKey);
+  }
+};

package/services/storageWebUtils.web.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_STORAGE_NAMESPACE = "applicaster.v2";
+
+export const NAMESPACE_STORAGE_SEPARATOR_WEB = "_::_";
+
+export const getWebStorageKey = (
+  key: String,
+  namespace: String = DEFAULT_STORAGE_NAMESPACE
+) => {
+  return `${namespace}${NAMESPACE_STORAGE_SEPARATOR_WEB}${key}`;
+};

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,13 +1,19 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 import { render } from "@testing-library/react-native";
+import { AnalyticsProvider } from "../analyticsUtils";
+import { ThemeContext } from "../theme";
+
+export { getByTestId } from "./getByTestId";
 
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
@@ -19,17 +25,6 @@ import { render } from "@testing-library/react-native";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -45,11 +40,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -62,16 +57,65 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  pluginConfigurations: {},
+  appData: { layoutVersion: "v1" },
+  zappPipes: {},
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepRight(initialState, { ...storeObj })
+  );
+
+  appStore.set(_store);
 
-  return <Provider store={_store}>{children}</Provider>;
+  return (
+    <ThemeContext.Provider
+      value={{
+        themes: {
+          light: {
+            component_margin_top: 0,
+            component_margin_bottom: 0,
+            component_margin_left: 0,
+            component_margin_right: 0,
+            component_padding_top: 0,
+            component_padding_bottom: 0,
+            component_padding_left: 0,
+            component_padding_right: 0,
+            component_gutter_vertical: 0,
+            component_gutter_horizontal: 0,
+            component_corner_radius: 0,
+            app_background_color: "rgba(0,0,0,0)",
+            screen_margin_top: 0,
+            screen_margin_bottom: 0,
+            component_anchor_point_y: 0,
+            assets: "",
+          },
+        },
+        selectedThemeId: "light",
+        setSelectedThemeId: () => {},
+      }}
+    >
+      <SafeAreaProvider
+        initialMetrics={{
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+        }}
+      >
+        <Provider store={_store}>
+          <AnalyticsProvider>{children}</AnalyticsProvider>
+        </Provider>
+      </SafeAreaProvider>
+    </ThemeContext.Provider>
+  );
 };
 
 /**
@@ -80,8 +124,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };

package/types.ts

@@ -5,3 +5,7 @@ export type ManifestField<T> = {
   group?: boolean;
   fields?: ManifestField<any>[];
 };
+
+export enum ENDPOINT_TAGS {
+  allow_missing_keys = "allow_missing_keys",
+}

package/appUtils/focusManager/FocusableEvents.ts

@@ -1,8 +0,0 @@
-export const FOCUSABLE_EVENTS = {
-  IS_REGISTERED: "isRegistered",
-  WILL_RECEIVE_FOCUS: "willReceiveFocus",
-  HAS_RECEIVED_FOCUS: "hasReceivedFocus",
-  WILL_LOSE_FOCUS: "willLoseFocus",
-  HAS_LOST_FOCUS: "hasLostFocus",
-  WILL_UNREGISTER: "willUnregister",
-};