@applicaster/zapp-react-dom-app 13.0.0-alpha.3244448100 → 13.0.0-alpha.3285365953

package/App/InteractionManager/index.tsx

@@ -31,7 +31,10 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import {
+  getXray,
+  createLogger,
+} from "@applicaster/zapp-react-native-utils/logger";
 
 import {
   confirmationDialogStore,
@@ -51,6 +54,11 @@ import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/k
 const { withXray } = getXray();
 const globalAny: any = global;
 
+const { log_debug, log_warning } = createLogger({
+  category: "InteractionManager",
+  subsystem: "zapp-react-dom-app",
+});
+
 const shouldUseOnScreenKeyboard = () =>
   isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
 
@@ -140,13 +148,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
     this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
 
+    this.handlePhysicalKeyboardDismiss =
+      this.handlePhysicalKeyboardDismiss.bind(this);
+
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
   }
 
   componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDownListener);
+    window.addEventListener("keydown", this.onKeyDownListener, true);
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -181,6 +192,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease.bind(this)
     );
+
+    document.addEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   componentWillUnmount() {
@@ -209,6 +225,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease
     );
+
+    document.removeEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   performExit() {
@@ -270,8 +291,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.handleWebOsBack();
       }
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn("Failed to execute platformBack", e);
+      log_warning("Failed to execute platformBack", e);
     }
   }
 
@@ -365,29 +385,109 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  onKeyDown(event) {
+  /**
+     When pressing escape or the Native "Back" button:
+     if on the transport controls: we show the player
+     if on the player : we show the UI
+     if on the UI : we exit the app
+     note: backspace affects the keyboard input, so it behaves differently
+     */
+  onBackPress(event) {
     const { displayState, setDisplayState, navigator } = this.props;
+    const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
-    const { isDialogVisible } = confirmationDialogStore.getState();
+    log_debug("onBackPress", {
+      eventCode: event.code,
+      displayState,
+      isDialogVisible,
+      isKeyboardVisible,
+    });
 
     if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
-      if (keyCode(event).matchesAny("Escape", "Back")) {
-        this.handleKeyboardDismiss();
-      }
-
+      this.handleKeyboardDismiss();
       event.preventDefault();
       event.stopPropagation();
 
       return;
     }
 
+    switch (displayState) {
+      case DISPLAY_STATES.DEFAULT:
+      case DISPLAY_STATES.PLAYER:
+        if (isDialogVisible) {
+          this.onConfirmDialogClose();
+        } else if (navigator.canGoBack()) {
+          navigator.goBack();
+        } else if (this.isHomeScreen()) {
+          this.platformBack();
+        } else if (navigator.currentRoute.includes("hook")) {
+          // If code reaches this block navigator cant go back, it is not home,
+          // and this is a login plugin that was pushed on top of the home
+          // Treat it like a home screen and run platformBack()
+          const entryData = navigator?.data?.entry;
+          const isHookInHomescreen = entryData?.payload?.home;
+
+          const isHookFlowBlocker =
+            typeof entryData?.hookPlugin?.module?.isFlowBlocker === "function"
+              ? entryData?.hookPlugin?.module?.isFlowBlocker()
+              : entryData?.hookPlugin?.module?.isFlowBlocker;
+
+          if (isHookInHomescreen && isHookFlowBlocker) {
+            this.platformBack();
+          } else {
+            navigator.goBack(false, true);
+          }
+        } else {
+          this.goToHome();
+        }
+
+        break;
+      case DISPLAY_STATES.HUD:
+        // IF transport controls are open, close them instead of closing player
+        setDisplayState(DISPLAY_STATES.PLAYER);
+        break;
+      default:
+        setDisplayState(DISPLAY_STATES.PLAYER);
+        break;
+    }
+  }
+
+  onBackspacePress(event) {
+    const isInputFocused =
+      document.activeElement instanceof HTMLInputElement ||
+      document.activeElement instanceof HTMLTextAreaElement;
+
+    // Don't handle backspace if input is focused
+    if (isInputFocused) {
+      return;
+    }
+
+    this.onBackPress(event);
+  }
+
+  onKeyDown(event) {
+    const { displayState, setDisplayState, navigator } = this.props;
+    const { isDialogVisible } = confirmationDialogStore.getState();
+
+    if (keyCode(event).matches("Backspace")) {
+      this.onBackspacePress(event);
+
+      return;
+    }
+
+    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
+      this.onBackPress(event);
+
+      return;
+    }
+
     if (this.keySupportsLongPress(event)) {
       this.longPressDetector.monitorKeyPress(event.code, event);
     }
 
-    // None of the logic below should be executed for repeated keys
-    if (event.repeat) return;
+    // Only handle repeat events for arrow keys
+    if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
@@ -447,60 +547,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       }
     }
 
-    /**
-     When pressing backspace or the Native "Back" button:
-     if on the transport controls: we show the player
-     if on the player : we show the UI
-     if on the UI : we exit the app
-     */
-
-    if (
-      keyCode(event).matchesAny(
-        KEYS.Back,
-        KEYS.Escape,
-        KEYS.EscapeDevice,
-        KEYS.Backspace
-      )
-    ) {
-      switch (displayState) {
-        case DISPLAY_STATES.DEFAULT:
-        case DISPLAY_STATES.PLAYER:
-          if (isDialogVisible) {
-            this.onConfirmDialogClose();
-          } else if (navigator.canGoBack()) {
-            navigator.goBack();
-          } else if (this.isHomeScreen()) {
-            this.platformBack();
-          } else if (navigator.currentRoute.includes("hook")) {
-            // If code reaches this block navigator cant go back, it is not home,
-            // and this is a login plugin that was pushed on top of the home
-            // Treat it like a home screen and run platformBack()
-            const entryData = navigator?.data?.entry;
-            const isHookInHomescreen = entryData?.payload?.home;
-
-            const isHookFlowBlocker =
-              entryData?.hookPlugin?.module?.isFlowBlocker();
-
-            if (isHookInHomescreen && isHookFlowBlocker) {
-              this.platformBack();
-            } else {
-              navigator.goBack(false, true);
-            }
-          } else {
-            this.goToHome();
-          }
-
-          break;
-        case DISPLAY_STATES.HUD:
-          // IF transport controls are open, close them instead of closing player
-          setDisplayState(DISPLAY_STATES.PLAYER);
-          break;
-        default:
-          setDisplayState(DISPLAY_STATES.PLAYER);
-          break;
-      }
-    }
-
     if (
       keyCode(event).matches(KEYS.Enter) ||
       (__DEV__ && keyCode(event).matches(KEYS.X))
@@ -508,6 +554,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
+        focusManager.pressIn();
         focusManager.press();
       }
 
@@ -524,10 +571,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.platformBack();
     }
 
-    if (
-      keyCode(event).matchesAny(...ARROW_KEYS) &&
-      !this.state.isKeyboardVisible
-    ) {
+    if (keyCode(event).matchesAny(...ARROW_KEYS)) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       }
@@ -621,6 +665,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     if (
       (target.tagName === "INPUT" && target.type === "text") ||
+      (target.tagName === "INPUT" && target.type === "password") ||
       target.tagName === "TEXTAREA"
     ) {
       this.setState({
@@ -649,7 +694,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  handleKeyboardDismiss = () => {
+  handleKeyboardDismiss() {
     this.isDismissing = true;
 
     this.setState(
@@ -660,9 +705,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
       },
       () => {
         this.isDismissing = false;
+        focusManager.recoverFocus();
       }
     );
-  };
+  }
 
   handleKeyboardInput = (value: string) => {
     const { activeInputRef } = this.state;
@@ -758,6 +804,35 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ].includes(event.code);
   }
 
+  handlePhysicalKeyboardDismiss(event: CustomEvent) {
+    const { value, position, inputElement } = event.detail;
+
+    this.isDismissing = true;
+
+    this.setState(
+      {
+        isKeyboardVisible: false,
+        keyboardInput: "",
+        activeInputRef: null,
+      },
+      () => {
+        if (inputElement) {
+          inputElement.value = value;
+          inputElement.focus();
+          inputElement.setSelectionRange(position, position);
+
+          const keyboardEvent = new CustomEvent("keyboardUpdate", {
+            detail: { value },
+          });
+
+          document.dispatchEvent(keyboardEvent);
+        }
+
+        this.isDismissing = false;
+      }
+    );
+  }
+
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (

package/App/Loader/__tests__/__snapshots__/loadDomPlugins.test.js.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loadDomPlugins when there are plugins requiring to write to the dom skips plugins without init method 1`] = `
-Array [
-  Array [
+[
+  [
     "could not initialize plugin Plugin with Dom node & no init method - it doesn't have an init method",
-    Object {
-      "plugin": Object {
-        "configuration": Object {
+    {
+      "plugin": {
+        "configuration": {
           "foo": "bar",
         },
-        "module": Object {
+        "module": {
           "requiresAppendingDomNode": true,
         },
         "name": "Plugin with Dom node & no init method",

package/App/Loader/loadLocale.js

@@ -3,11 +3,6 @@ import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils"
 import { QuickBrickCommunicationModule } from "../../Polyfills/QuickBrickCommunicationModule";
 import { loadLocaleImpl, getLanguageCode } from "./utils";
 
-type Locale = {
-  language: string,
-  country: string,
-};
-
 async function getBrowserLocale() {
   return navigator.language;
 }
@@ -19,7 +14,7 @@ async function getSamsungLocale() {
     }
 
     try {
-      tizen.systeminfo.getPropertyValue("LOCALE", (locale: Locale) => {
+      tizen.systeminfo.getPropertyValue("LOCALE", (locale) => {
         resolve(locale.language);
       });
     } catch (e) {

package/App/Loader/utils/platform.js

@@ -11,11 +11,28 @@ import {
   PLATFORMS,
 } from "./const";
 
+/**
+ * @typedef {"tv" | "web" | "other"} DeviceType
+ * @typedef {"samsung_tv" | "lg_tv" | unknown} CustomPlatformTypes
+ */
+
+/**
+ * Retrieves the user agent string from the browser or global navigator.
+ * @returns {string} The user agent string.
+ */
 export const getUserAgent = () =>
   window?.navigator?.userAgent || global?.navigator?.userAgent;
 
+/**
+ * Checks if the device is HD (1280 width).
+ * @returns {boolean} True if the device is HD, false otherwise.
+ */
 export const isHD = () => window.innerWidth === 1280;
 
+/**
+ * Checks if the platform is LG.
+ * @returns {boolean} True if the platform is LG, false otherwise.
+ */
 export const isLgPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -23,10 +40,13 @@ export const isLgPlatform = () => {
     return false;
   }
 
-  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
   return hasWebOS || userAgent.includes(PLATFORMS.webos);
 };
 
+/**
+ * Checks if the platform is Samsung.
+ * @returns {boolean} True if the platform is Samsung, false otherwise.
+ */
 export const isSamsungPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -42,42 +62,39 @@ export const isSamsungPlatform = () => {
 };
 
 /**
- * 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
+ * Checks if the platform is Vizio by using the user agent string.
+ * @returns {boolean} True if the platform is Vizio, false otherwise.
  */
 export const isVizioPlatform = () => {
   const userAgent = getUserAgent();
 
-  const isVizioAgent =
+  return (
     userAgent.includes(PLATFORMS.vizio) ||
     userAgent.includes(PLATFORMS.smartcast) ||
-    userAgent.includes(PLATFORMS.conjure);
-
-  return isVizioAgent;
+    userAgent.includes(PLATFORMS.conjure)
+  );
 };
 
 /**
- * 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
+ * Checks if the Vizio APIs are available.
+ * @returns {boolean} True if the Vizio APIs are available, false otherwise.
  */
 export const hasVizioAPIs = () => {
-  const hasAPIs =
+  return (
     typeof window.VIZIO !== "undefined" &&
-    window?.applicaster?.vizioLibraryDidLoad;
-
-  return hasAPIs;
+    window?.applicaster?.vizioLibraryDidLoad
+  );
 };
 
 /**
- * platformSelect can't be used, because Platform.OS is overriden
- * by overloadReactNativePlatform and don't support 'web' value
- * @returns {"tv" | "web" | "other"} value
+ * Determines the device type based on the platform.
+ * @returns {DeviceType} The device type ("tv", "web", or "other").
  */
 export const getDeviceType = () => {
-  switch (Platform.OS) {
+  /** @type {CustomPlatformTypes} */
+  const platformOS = Platform.OS;
+
+  switch (platformOS) {
     case "samsung_tv":
       return isSamsungPlatform() ? "tv" : "web";
     case "lg_tv":
@@ -88,14 +105,15 @@ export const getDeviceType = () => {
 };
 
 /**
- * This function is used to rename keys
- * @param {string} key - key you would like to rename
+ * Renames keys based on a predefined map.
+ * @param {string} key - The key to rename.
+ * @returns {string} The renamed key.
  */
 export const renameKeys = (key) => desiredKeysMap?.[key] || key;
 
 /**
- * This function is used to get the connection info from WebOS
- * TODO: move to connection hook
+ * Retrieves the connection info from WebOS.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
  */
 export const getWebOSConnectionInfo = () => {
   return new Promise((resolve, reject) => {
@@ -108,7 +126,6 @@ export const getWebOSConnectionInfo = () => {
     webOS.service.request("luna://com.palm.connectionmanager", {
       method: "getStatus",
       parameters: { subscribe: false },
-
       onSuccess: (args) => {
         const types = Object.keys(args)
           .filter((key) => args[key].state === "connected")
@@ -116,7 +133,6 @@ export const getWebOSConnectionInfo = () => {
 
         resolve({ networkType: types });
       },
-
       onFailure: (error) => {
         console.error(
           "getWebOSConnectionInfo: There was an error getting connection info",
@@ -129,6 +145,10 @@ export const getWebOSConnectionInfo = () => {
   });
 };
 
+/**
+ * Retrieves the connection info from Tizen.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
+ */
 export const getTizenConnectionInfo = () => {
   return new Promise((resolve, reject) => {
     if (!isSamsungPlatform) {

package/Polyfills/Storage/__tests__/__snapshots__/storage.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys 1`] = `
-Object {
+{
   "baz_::_foo": "baz",
   "baz_::_otherKey": "otherValue",
   "foo": "bar",
@@ -10,7 +10,7 @@ Object {
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys 2`] = `
-Object {
+{
   "baz_::_foo": "baz",
   "baz_::_otherKey": "otherValue",
   "foo": "bar",
@@ -19,43 +19,15 @@ Object {
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys in the namespace if provided 1`] = `
-Object {
+{
   "foo": "baz",
   "otherKey": "otherValue",
 }
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys in the namespace if provided 2`] = `
-Object {
+{
   "foo": "baz",
   "otherKey": "otherValue",
 }
 `;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage 1`] = `"bar"`;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage 2`] = `"bar"`;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage 3`] = `"bar"`;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage 4`] = `"bar"`;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage with a namespace 1`] = `"baz"`;
-
-exports[`storageObject when the requested storage exists getItem gets properties from the storage with a namespace 2`] = `"baz"`;
-
-exports[`storageObject when the requested storage exists getItem rejects if the property cannot be retrieved 1`] = `[Error: Could not retrieve item applicaster.v2_::_fail_key]`;
-
-exports[`storageObject when the requested storage exists getItem rejects if the property cannot be retrieved 2`] = `[Error: Could not retrieve item applicaster.v2_::_fail_key]`;
-
-exports[`storageObject when the requested storage exists removeItem removes an item 1`] = `true`;
-
-exports[`storageObject when the requested storage exists removeItem removes an item 2`] = `true`;
-
-exports[`storageObject when the requested storage exists removeItem removes an item 3`] = `true`;
-
-exports[`storageObject when the requested storage exists removeItem removes an item 4`] = `true`;
-
-exports[`storageObject when the requested storage exists setItem will reject a promise if it the setting of the data fails 1`] = `[Error: Could not set item applicaster.v2_::_fail_key]`;
-
-exports[`storageObject when the requested storage exists setItem will reject a promise if it the setting of the data fails 2`] = `[Error: Could not set item applicaster.v2_::_fail_key]`;

package/Polyfills/Storage/__tests__/storage.test.js

@@ -4,7 +4,8 @@ import {
   applyNamespaceToKeyName,
   STORAGE_TYPES,
   DEFAULT_NAMESPACE,
-} from "../index";
+} from "../";
+
 import { StorageMock } from "./StorageMocks";
 
 import * as functionUtils from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -26,14 +27,7 @@ function clearStorage() {
   R.forEach((storage) => global.window[storage].clear(), STORAGE_TYPES);
 }
 
-async function testStorage(expectations) {
-  await Promise.all(
-    R.map((storage) => {
-      const Storage = getStorageModule(storage);
-      expectations(Storage);
-    }, STORAGE_TYPES)
-  );
-}
+const storages = R.map((storage) => getStorageModule(storage), STORAGE_TYPES);
 
 describe("storageObject", () => {
   beforeEach(resetMocks);
@@ -48,143 +42,119 @@ describe("storageObject", () => {
 
     beforeEach(clearStorage);
 
-    it("returns an object with 3 methods", () => {
-      expect.assertions(6);
-
-      testStorage((Storage) => {
-        expect(Storage).toHaveProperty("setItem");
-        expect(Storage).toHaveProperty("getItem");
-        expect(Storage).toHaveProperty("getAllItems");
-      });
+    it.each(storages)("returns an object with 3 methods", (storage) => {
+      expect(storage).toHaveProperty("setItem");
+      expect(storage).toHaveProperty("getItem");
+      expect(storage).toHaveProperty("getAllItems");
     });
 
     describe("setItem", () => {
       beforeEach(clearStorage);
 
-      it("sets a property in the storage", async () => {
-        expect.assertions(4);
+      it.each(storages)("sets a property in the storage", async (storage) => {
+        const result = await storage.setItem(key, value, null);
 
-        await testStorage(async (Storage) => {
-          const result = await Storage.setItem(key, value, null);
+        const keyWithDefaultNameSpace = applyNamespaceToKeyName(
+          key,
+          DEFAULT_NAMESPACE
+        );
 
-          const keyWithDefaultNameSpace = applyNamespaceToKeyName(
-            key,
-            DEFAULT_NAMESPACE
-          );
+        expect(result).toBe(true);
 
-          expect(result).toBe(true);
-          expect(Storage[keyWithDefaultNameSpace]).toEqual(value);
-        });
+        expect(storage.getItem(keyWithDefaultNameSpace)).resolves.toEqual(
+          value
+        );
       });
 
-      it("sets a property in the storage with a namespace", async () => {
-        expect.assertions(4);
-
-        await testStorage(async (Storage) => {
-          const result = await Storage.setItem(key, namespaceValue, namespace);
+      it.each(storages)(
+        "sets a property in the storage with a namespace",
+        async (storage) => {
+          const result = await storage.setItem(key, namespaceValue, namespace);
 
           expect(result).toBe(true);
-          expect(Storage[keyName]).toEqual(namespaceValue);
-        });
-      });
 
-      it("will reject a promise if it the setting of the data fails", async () => {
-        expect.assertions(2);
+          expect(storage.getItem(keyName)).resolves.toEqual(namespaceValue);
+        }
+      );
 
-        await testStorage(async (Storage) => {
-          await expect(
-            Storage.setItem(failKey, value)
-          ).rejects.toMatchSnapshot();
-        });
-      });
+      it.each(storages)(
+        "will reject a promise if it the setting of the data fails",
+        async (storage) => {
+          await expect(storage.setItem(failKey, value)).rejects.toThrow(
+            "Could not set item applicaster.v2_::_fail_key"
+          );
+        }
+      );
     });
 
     describe("getItem", () => {
       beforeEach(async () => {
         clearStorage();
 
-        await testStorage(async (Storage) => {
+        storages.forEach((Storage) => {
           Storage.setItem(key, value, null);
           Storage.setItem(key, namespaceValue, namespace);
         });
       });
 
-      it("gets properties from the storage", async () => {
-        expect.assertions(8);
-
-        await testStorage(async (Storage) => {
-          await expect(Storage.getItem(key)).resolves.toEqual(value);
-          await expect(Storage.getItem(key)).resolves.toMatchSnapshot();
-          await expect(Storage.getItem(key, null)).resolves.toEqual(value);
-          await expect(Storage.getItem(key, null)).resolves.toMatchSnapshot();
-        });
+      it.each(storages)("gets properties from the storage", async (storage) => {
+        const result = await storage.getItem(key);
+        const resultWithNull = await storage.getItem(key, null);
+        expect(result).toEqual(value);
+        expect(resultWithNull).toEqual(value);
       });
 
-      it("gets properties from the storage with a namespace", async () => {
-        expect.assertions(4);
-
-        await testStorage(async (Storage) => {
-          await expect(Storage.getItem(key, namespace)).resolves.toEqual(
-            namespaceValue
+      it.each(storages)(
+        "gets properties from the storage with a namespace",
+        (storage) => {
+          expect(storage.getItem(key, namespace)).resolves.toEqual(
+            "namespaceValue"
           );
+        }
+      );
 
-          await expect(
-            Storage.getItem(key, namespace)
-          ).resolves.toMatchSnapshot();
-        });
-      });
-
-      it("rejects if the property cannot be retrieved", async () => {
-        expect.assertions(2);
-
-        await testStorage(async (Storage) => {
-          await expect(Storage.getItem(failKey)).rejects.toMatchSnapshot();
-        });
-      });
+      it.each(storages)(
+        "rejects if the property cannot be retrieved",
+        async (storage) => {
+          await expect(storage.getItem(failKey)).rejects.toThrow(
+            "Could not retrieve item applicaster.v2_::_fail_key"
+          );
+        }
+      );
     });
 
     describe("getAllItems", () => {
       beforeEach(async () => {
         clearStorage();
 
-        await testStorage(async (Storage) => {
-          await Storage.setItem(key, value);
-          await Storage.setItem(key, namespaceValue, namespace);
-          await Storage.setItem("otherKey", "otherValue");
-          await Storage.setItem("otherKey", "otherValue", namespace);
+        storages.forEach((Storage) => {
+          Storage.setItem(key, value);
+          Storage.setItem(key, namespaceValue, namespace);
+          Storage.setItem("otherKey", "otherValue");
+          Storage.setItem("otherKey", "otherValue", namespace);
         });
       });
 
-      it("returns all keys", async () => {
-        expect.assertions(2);
-
-        await testStorage(async (Storage) => {
-          await expect(Storage.getAllItems()).resolves.toMatchSnapshot();
-        });
+      it.each(storages)("returns all keys", async (Storage) => {
+        const res = await Storage.getAllItems();
+        expect(res).toMatchSnapshot();
       });
 
-      it("returns all keys in the namespace if provided", async () => {
-        expect.assertions(2);
-
-        await testStorage(async (Storage) => {
+      it.each(storages)(
+        "returns all keys in the namespace if provided",
+        async (Storage) => {
           await expect(
             Storage.getAllItems(namespace)
           ).resolves.toMatchSnapshot();
-        });
-      });
+        }
+      );
     });
 
     describe("removeItem", () => {
-      it("removes an item", async () => {
-        expect.assertions(4);
-
-        await testStorage(async (Storage) => {
-          await expect(Storage.removeItem(key)).resolves.toMatchSnapshot();
+      it.each(storages)("removes an item", async (Storage) => {
+        await expect(Storage.removeItem(key)).resolves.toBeTruthy();
 
-          await expect(
-            Storage.removeItem(key, namespace)
-          ).resolves.toMatchSnapshot();
-        });
+        await expect(Storage.removeItem(key, namespace)).resolves.toBeTruthy();
       });
     });
   });

package/index.js

@@ -1,13 +1,11 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
-import { useHistory, useLocation } from "react-router-dom";
 
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { ZappDomRouter } from "./App/Router";
 import { Layout } from "./App/Layout";
 import { SplashLoader } from "./App/Loader/SplashLoader";
 import { appLoader } from "./App/Loader";
@@ -24,11 +22,6 @@ const contextProviders = R.map(R.prop("withProvider"), R.values(Contexts));
 if (withXray) contextProviders.push(withXray);
 
 export const ZappApp = createQuickBrickApp({
-  navigations: {
-    Router: ZappDomRouter,
-    useLocation,
-    useHistory,
-  },
   QuickBrickManager,
   Layout,
   OfflineHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "13.0.0-alpha.3244448100",
+  "version": "13.0.0-alpha.3285365953",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,13 +22,12 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.3244448100",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.3244448100",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.3244448100",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3244448100",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3244448100",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.3285365953",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.3285365953",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.3285365953",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3285365953",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3285365953",
     "abortcontroller-polyfill": "^1.7.5",
-    "history": "^4.7.2",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -36,9 +35,18 @@
     "videojs-contrib-quality-levels": "3.0.0"
   },
   "peerDependencies": {
+    "@applicaster/zapp-pipes-v2-client": "*",
+    "@react-native-community/netinfo": "*",
     "core-js": "3.29.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native-web": "0.18.11"
+    "immer": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-web": "*",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   }
 }

package/App/Router/index.js

@@ -1,17 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import { Router } from "react-router";
-import { createMemoryHistory } from "history";
-
-const history = createMemoryHistory();
-
-export const ZappDomRouter = ({ children, ...otherProps }) => (
-  <Router history={history} {...otherProps}>
-    {children}
-  </Router>
-);
-
-ZappDomRouter.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/App/Splash/Spinner.js

@@ -1,30 +0,0 @@
-import React from "react";
-
-import "./spinner-styles.css";
-
-export const Spinner = (color) => {
-  const spinnerColor = {
-    background: color.color,
-  };
-
-  return (
-    <div>
-      <div id="progress">
-        <div className="spinner">
-          <div style={spinnerColor} className="bar1" />
-          <div style={spinnerColor} className="bar2" />
-          <div style={spinnerColor} className="bar3" />
-          <div style={spinnerColor} className="bar4" />
-          <div style={spinnerColor} className="bar5" />
-          <div style={spinnerColor} className="bar6" />
-          <div style={spinnerColor} className="bar7" />
-          <div style={spinnerColor} className="bar8" />
-          <div style={spinnerColor} className="bar9" />
-          <div style={spinnerColor} className="bar10" />
-          <div style={spinnerColor} className="bar11" />
-          <div style={spinnerColor} className="bar12" />
-        </div>
-      </div>
-    </div>
-  );
-};

package/App/Splash/spinner-styles.css

@@ -1,81 +0,0 @@
-div.spinner {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  display: inline-block;
-  top: 50%;
-  left: 50%;
-  margin: -60px 0 0 -70px;
-}
-
-div.spinner div {
-  width: 6%;
-  height: 16%;
-  position: absolute;
-  left: 49%;
-  top: 43%;
-  opacity: 0;
-  -webkit-border-radius: 50px;
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-animation: fade 1s linear infinite;
-}
-
-@-webkit-keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-
-div.spinner div.bar1 {
-  -webkit-transform: rotate(0deg) translate(0, -130%);
-  -webkit-animation-delay: 0s;
-}
-
-div.spinner div.bar2 {
-  -webkit-transform: rotate(30deg) translate(0, -130%);
-  -webkit-animation-delay: -0.9167s;
-}
-
-div.spinner div.bar3 {
-  -webkit-transform: rotate(60deg) translate(0, -130%);
-  -webkit-animation-delay: -0.833s;
-}
-div.spinner div.bar4 {
-  -webkit-transform: rotate(90deg) translate(0, -130%);
-  -webkit-animation-delay: -0.7497s;
-}
-div.spinner div.bar5 {
-  -webkit-transform: rotate(120deg) translate(0, -130%);
-  -webkit-animation-delay: -0.667s;
-}
-div.spinner div.bar6 {
-  -webkit-transform: rotate(150deg) translate(0, -130%);
-  -webkit-animation-delay: -0.5837s;
-}
-div.spinner div.bar7 {
-  -webkit-transform: rotate(180deg) translate(0, -130%);
-  -webkit-animation-delay: -0.5s;
-}
-div.spinner div.bar8 {
-  -webkit-transform: rotate(210deg) translate(0, -130%);
-  -webkit-animation-delay: -0.4167s;
-}
-div.spinner div.bar9 {
-  -webkit-transform: rotate(240deg) translate(0, -130%);
-  -webkit-animation-delay: -0.333s;
-}
-div.spinner div.bar10 {
-  -webkit-transform: rotate(270deg) translate(0, -130%);
-  -webkit-animation-delay: -0.2497s;
-}
-div.spinner div.bar11 {
-  -webkit-transform: rotate(300deg) translate(0, -130%);
-  -webkit-animation-delay: -0.167s;
-}
-div.spinner div.bar12 {
-  -webkit-transform: rotate(330deg) translate(0, -130%);
-  -webkit-animation-delay: -0.0833s;
-}