@applicaster/zapp-react-native-utils 13.0.0-alpha.5281161050 → 13.0.0-alpha.5284645460

package/appUtils/HooksManager/types.ts

@@ -4,6 +4,8 @@ import { HOOKS_EVENTS } from "./constants";
 export interface HookConfiguration {}
 
 /* existing Hook Plugn props: sample */
+
+/*
 interface _HookModulePlugin {
   Component:
     | React.FC<HookPluginProps>
@@ -23,6 +25,7 @@ interface _HookModulePlugin {
     presentUI: (payload?: HookPluginProps["payload"]) => void
   ) => any;
 }
+*/
 
 //* Derived from usage */
 export interface HookModule {
@@ -100,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
   identifier: string;
   configuration: T["configuration"];
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     opts: {
       error?: typeof Error;
       route?: string;
@@ -109,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
     }
   );
   general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
     allow_screen_plugin_presentation: boolean;
     is_flow_blocker: boolean;
   };

package/appUtils/accessibilityManager/index.ts

@@ -6,6 +6,9 @@ import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
+  private headingTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 160;
+  private MINIMUM_PAUSE = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -20,6 +23,7 @@ export class AccessibilityManager {
 
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
+  private headingQueue: string[] = [];
 
   private constructor() {}
 
@@ -52,6 +56,28 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
+  /** Calculates the reading time for a given text
+   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
+   * @param text - The text to calculate the reading time for
+   * @returns The reading time in milliseconds
+   */
+  private calculateReadingTime(text: string): number {
+    const words = text.trim().split(/\s+/).length;
+
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
+    );
+  }
+
+  /**
+   * Adds a heading to the queue, headings will be read before the next text
+   * Each heading will be read once and removed from the queue
+   */
+  public addHeading(heading: string) {
+    this.headingQueue.push(heading);
+  }
+
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
@@ -85,7 +111,22 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    this.ttsManager && this.ttsManager.readText(textToRead);
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
+
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
+
+      const pauseTime = this.calculateReadingTime(heading);
+
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
+    } else {
+      this.ttsManager?.readText(textToRead);
+    }
 
     this.announcements$.next({
       message: textToRead,

package/appUtils/contextKeysManager/contextResolver.ts

@@ -0,0 +1,77 @@
+import { createLogger } from "../../logger";
+import { ContextKeysManager } from "./index";
+import * as R from "ramda";
+
+const { log_error } = createLogger({
+  subsystem: "contextResolver",
+  category: "General",
+});
+
+interface IResolver {
+  resolve: (string) => Promise<string | number | object>;
+}
+
+export class EntryResolver implements IResolver {
+  entry: ZappEntry;
+
+  constructor(entry: ZappEntry) {
+    this.entry = entry;
+  }
+
+  async resolve(key: string) {
+    if (!key || key.length === 0) {
+      return this.entry;
+    }
+
+    return R.view(R.lensPath(key.split(".")), this.entry);
+  }
+}
+
+export class ContextResolver implements IResolver {
+  resolve = async (compositeKey: string) =>
+    ContextKeysManager.instance.getKey(compositeKey);
+}
+
+export const resolveObjectValues = async (
+  data: Record<string, any>,
+  resolvers: Record<string, IResolver> = null
+) => {
+  const entries = Object.entries(data);
+
+  const exResolvers = { ctx: new ContextResolver(), ...resolvers };
+
+  const resolvedEntries = await Promise.all(
+    entries.map(async ([key, value]) => {
+      if (typeof value !== "string") {
+        return [key, value];
+      }
+
+      if (!value.startsWith("@")) {
+        return [key, value];
+      }
+
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
+      const match = (value as string).match(regex);
+
+      if (match) {
+        const contextResolverName = match[1];
+        const compositeKey = match[2];
+
+        const resolver = exResolvers[contextResolverName] || exResolvers.ctx;
+        const resolvedValue = await resolver.resolve(compositeKey);
+
+        return [key, resolvedValue];
+      }
+
+      log_error("resolveObjectValues: invalid context string", {
+        key,
+        value,
+      });
+
+      return [key, null];
+    })
+  );
+
+  return Object.fromEntries(resolvedEntries);
+};

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`focusManager should be defined 1`] = `
-Object {
+{
   "blur": [Function],
   "disableFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
-    "root": Object {
-      "children": Array [],
+    "root": {
+      "children": [],
       "component": null,
       "id": "root",
       "lastFocusedItem": null,
@@ -28,10 +28,12 @@ Object {
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
+  "resetFocus": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
   "unregister": [Function],
@@ -39,12 +41,12 @@ Object {
 `;
 
 exports[`focusManagerIOS should be defined 1`] = `
-Object {
+{
   "focus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
-    "root": Object {
-      "children": Array [],
+    "root": {
+      "children": [],
       "component": null,
       "id": "root",
       "lastFocusedItem": null,

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -1,5 +1,6 @@
 import { focusManager } from "../index.ts";
 import { focusManager as focusManagerIOS } from "../index.ios.ts";
+import { findFirstFocusableItem } from "../utils";
 
 describe("focusManagerIOS", () => {
   it("should be defined", () => {
@@ -8,6 +9,67 @@ describe("focusManagerIOS", () => {
   });
 });
 
+const focusableTree = {
+  root: {
+    children: [
+      {
+        children: [
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/1",
+          },
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/2/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: false,
+                },
+                id: "route/2/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/2",
+          },
+        ],
+        component: {
+          isGroup: true,
+        },
+        id: "/river/1234",
+      },
+    ],
+    component: null,
+    id: "root",
+  },
+};
+
 describe("focusManager", () => {
   it("should be defined", () => {
     expect(focusManager).toBeDefined();
@@ -45,4 +107,24 @@ describe("focusManager", () => {
   it("placeholder test", () => {
     expect(true).toBe(true);
   });
+
+  it("findFirstFocusableItem returns focusableItem", () => {
+    const expectedItemId =
+      focusableTree.root.children[0].children[1].children[1].id;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(
+      focusableItem !== undefined && expectedItemId === focusableItem.id
+    ).toBe(true);
+  });
+
+  it("findFirstFocusableItem does not return focusableItem", () => {
+    focusableTree.root.children[0].children[1].children[1].component.isGroup =
+      true;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(focusableItem === undefined).toBe(true);
+  });
 });

package/appUtils/focusManager/__tests__/index.test.ts

@@ -30,6 +30,7 @@ describe("focusManager", () => {
       "isGroupItemFocused",
       "recoverFocus",
       "isCurrentFocusOnTheTopScreen",
+      "resetFocus",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -11,8 +11,10 @@ import {
   haveSameParentBeforeRoot,
 } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
-import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
+import { ACTION } from "./utils/enums";
+import { findFirstFocusableItem } from "./utils";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -167,13 +169,82 @@ export const focusManager = (function () {
   }
 
   /**
-   * returns the current focusable's group
-   * @private
-   * @returns {React.Component} the current focus
+   * Computes the difference in parent groups between two nodes.
+   * It returns the IDs of parents that are present in the current node but not in the previous node,
+   * as well as the IDs of parents that are present in the previous node but not in the current node.
+   *
+   * @param {string} currentNodeID - The ID of the current node.
+   * @param {string} previousNodeID - The ID of the previous node.
+   * @returns {Object} An object containing the differences in parent IDs:
+   *   - {Array<string>} currentNodeParentsIDs: Parent IDs present in the current node but not in the previous node.
+   *   - {Array<string>} previousNodeParentsIDs: Parent IDs present in the previous node but not in the current node.
    */
-  function getCurrentGroup() {
-    return getGroupById(R.path(["props", "groupId"], getCurrentFocus()));
-  }
+  const getParentDiffs = (currentNodeID, previousNodeID) => {
+    const currentNodeParentsIDs =
+      focusableTree.getParentGroupIds(currentNodeID);
+
+    const previousNodeParentsIDs =
+      focusableTree.getParentGroupIds(previousNodeID);
+
+    return {
+      currentNodeParentsIDs: R.difference(
+        currentNodeParentsIDs,
+        previousNodeParentsIDs
+      ),
+      previousNodeParentsIDs: R.difference(
+        previousNodeParentsIDs,
+        currentNodeParentsIDs
+      ),
+    };
+  };
+
+  /**
+   * Updates the focus state of nodes identified by their IDs.
+   * For each ID, if `setFocus` is true, the node will receive focus;
+   * otherwise, it will lose focus.
+   *
+   * @param {Array<string>} ids - An array of node IDs to update.
+   * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
+   */
+  const updateNodeFocus = (ids, action) => {
+    if (!ids || ids.length === 0) {
+      return; // Nothing to do
+    }
+
+    const startNode = focusableTree.findInTree(ids[0]);
+
+    if (!startNode) {
+      return; // Start node not found
+    }
+
+    const endNodeId = ids[ids.length - 1]; // Get the ID of the end node
+
+    let currentNode = startNode;
+
+    // Function to apply the action (focus or blur)
+    const applyAction = (node) => {
+      if (node && node.component) {
+        if (action === "focus") {
+          node.component.setFocus();
+        } else if (action === "blur") {
+          node.component.setBlur();
+        }
+      }
+    };
+
+    // Apply action to the starting node
+    applyAction(currentNode);
+
+    // Traverse upwards
+    while (currentNode && currentNode.id !== endNodeId) {
+      currentNode = currentNode.parent;
+
+      if (currentNode) {
+        // check if current node exists, as parent might be root
+        applyAction(currentNode);
+      }
+    }
+  };
 
   /**
    * Sets the current focus to the provided id. If there is an existing focus, it will
@@ -181,34 +252,29 @@ export const focusManager = (function () {
    * @private
    * @param {String} id of the focusable to set as currentFocus
    * @param {Object} direction of the navigation, which led to this focus change
-   * @param {Object} options
-   * @param {Boolean} options.groupFocusedChanged tells wether the focus has moved
    * to another group or not. defaults to false
    */
-  function setFocus(
-    id: string,
-    direction?: FocusManager.Web.Direction,
-    options?: Partial<{ groupFocusedChanged: boolean }>
-  ) {
+  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
     if (focusDisabled) return false;
 
-    const { groupFocusedChanged = false } = options || {};
-
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
     // is called, so there will be no delays on tree search.
     // If currentFocusNode is null or undefined we still want it to findInTree
     if (currentFocusNode?.id !== id) {
+      const { currentNodeParentsIDs, previousNodeParentsIDs } = getParentDiffs(
+        id,
+        currentFocusNode?.id
+      );
+
+      // Set focus on current node parents and blur on previous node parents
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    const currentGroup = getCurrentGroup();
-
-    if (groupFocusedChanged && currentGroup) {
-      currentGroup.hasLostFocus(currentGroup, direction);
-    }
-
     focus(direction);
   }
 
@@ -251,6 +317,7 @@ export const focusManager = (function () {
       !focusableItem.isGroup &&
       isFocusEnabled(focusableItem)
     ) {
+      // TODO: Move this to setFocus method
       blur();
 
       logger.log({
@@ -260,8 +327,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -281,6 +346,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -412,7 +485,7 @@ export const focusManager = (function () {
   function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (routes.length <= 1) {
+    if (currentFocusNode && routes.length <= 1) {
       // there is only one or zero routes
       return true;
     }
@@ -420,20 +493,29 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  function recoverFocus() {
+  function resetFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
-      // We've failed to set focused node on the new screen => run focus recovery
+      // We've failed to set focused node on the new screen => run focus reset
       setInitialFocus();
     }
   }
 
+  /**
+   * sets the focus on first focusable item
+   * @public
+   */
+  function recoverFocus() {
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+    focusableItem && setFocus(focusableItem.id);
+  }
+
   /**
    * moves the focus in a provided direction
    * @public
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (!isCurrentFocusOnTheTopScreen()) {
+    if (!isCurrentFocusOnTheTopScreen() && currentFocusNode) {
       // We are opening new screen. We need to ignore movement of focus.
       return false;
     }
@@ -448,24 +530,16 @@ export const focusManager = (function () {
         const nextRect = nextFocusable.component.getRect();
 
         if (nextRect && nextRect.width > 0) {
-          nextFocusable.component.willReceiveFocus(
-            nextFocusable.component,
-            direction
-          );
-
+          // TODO: Move this to setFocus method
           blur(direction);
 
-          const groupChanged =
-            nextFocusable.component.props.groupId !==
-            currentFocusNode?.component?.props?.groupId;
-
-          setFocus(nextFocusable.id, direction, {
-            groupFocusedChanged: groupChanged,
-          });
+          setFocus(nextFocusable.id, direction);
         }
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
+    } else {
+      recoverFocus();
     }
   }
 
@@ -481,34 +555,6 @@ export const focusManager = (function () {
 
   const { on, invokeHandler, removeHandler } = eventHandler;
 
-  on(FOCUS_EVENTS.FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.onFocus(focusable.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.BLUR, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.onBlur(focusable.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.HAS_LOST_FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.hasLostFocus(parent.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.WILL_RECEIVE_FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.willReceiveFocus(focusable.component, direction);
-    }
-  });
-
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -526,6 +572,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,
@@ -537,5 +584,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    resetFocus,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -231,4 +231,27 @@ export class Tree {
 
     return retVal;
   }
+
+  /**
+   * Gets the IDs of all parent groups for a given node id.
+   * @public
+   * @param {String} nodeId - The id of the node to get parent IDs for.
+   * @returns {Array} An array of parent group IDs or an empty array if the node is not found.
+   */
+  getParentGroupIds(nodeId) {
+    const parentIds = [];
+    let currentNode = this.findInTree(nodeId);
+
+    if (!currentNode) {
+      return []; // Node not found, return an empty array
+    }
+
+    // Traverse up the tree, collecting parent IDs
+    while (currentNode.parent && currentNode.parent.id !== "root") {
+      parentIds.push(currentNode.parent.id);
+      currentNode = currentNode.parent;
+    }
+
+    return parentIds;
+  }
 }

package/appUtils/focusManager/utils/enums.ts

@@ -0,0 +1,4 @@
+export enum ACTION {
+  FOCUS = "focus",
+  BLUR = "blur",
+}