@applicaster/zapp-react-native-utils 12.0.0-alpha.5040434238 → 12.0.0-alpha.5050333009

package/appUtils/HooksManager/types.ts

@@ -0,0 +1,116 @@
+import { SubscriberObj } from "../../functionUtils";
+import { HOOKS_EVENTS } from "./constants";
+
+export interface HookConfiguration {}
+
+/* existing Hook Plugn props: sample */
+interface _HookModulePlugin {
+  Component:
+    | React.FC<HookPluginProps>
+    | React.Component<HookPluginProps, any>
+    | React.ReactNode;
+  ModalContainer?: React.FC<ModalProps> | React.Component<ModalProps, any>;
+  skipHook?: (payload: ZappRiver | ZappEntry) => boolean;
+  presentFullScreen: boolean;
+  showNavBar?: boolean;
+  isFlowBlocker: (() => boolean) | boolean; // narrow this
+  hasPlayerHook?: boolean;
+  name: string;
+  runInBackground?: (
+    item: HookPluginProps["payload"],
+    callback: hookCallback,
+    hookPlugin: HookScreenData,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => any;
+}
+
+//* Derived from usage */
+export interface HookModule {
+  ModalContainer?: React.ComponentType<any>;
+  Component: React.ComponentType<any>;
+  presentFullScreen: boolean;
+  run?: (
+    arg0: unknown,
+    callback: () => void,
+    configuration: HookConfiguration
+  ) => void; // not sure about optional parameter
+  hasPlayerHook?: boolean;
+  configuration?: HookConfiguration;
+  isFlowBlocker: () => boolean;
+  skipHook?: (payload?: ZappRiver | ZappEntry) => boolean;
+  runInBackground?: (
+    arg0: unknown,
+    callback: () => void,
+    hookPlugin: Hook,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+  name: string;
+  showNavBar?: boolean; // unsure
+}
+
+export type HookManagerArgs = {
+  rivers: Record<string, ZappRiver>;
+  plugins: ZappPlugin[];
+  targetScreen: ZappRiver;
+  startUpHooksData?: {
+    startUpHooks?: unknown[] | "in_process";
+    setStartUpHooks?: (arg0: string) => void;
+  };
+};
+
+export interface HookManager {
+  subscriber: SubscriberObj;
+  presentScreenHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  executeHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  handleHooks: (payload: unknown) => void;
+  runInBackground: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+}
+
+export type HookIniObj = {
+  hook: HookModule & {
+    module: HookModule;
+    general: unknown;
+    screen_id?: string;
+    identifier?: string;
+    weight?: number | string;
+  };
+  hooks: Hook<any>[];
+  manager: HookManager;
+};
+
+export interface Hook<T extends HookModule = HookModule> {
+  manager: HookManager;
+  lastHook: boolean;
+  state: number;
+  module: T;
+  screen_id: string;
+  identifier: string;
+  configuration: T["configuration"];
+  setStateAndNotify(
+    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    opts: {
+      error?: typeof Error;
+      route?: string;
+      hookPlugin: Hook<T>;
+      payload: unknown;
+    }
+  );
+  general?: {
+    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    allow_screen_plugin_presentation: boolean;
+    is_flow_blocker: boolean;
+  };
+}

package/appUtils/RiverFocusManager/index.js

@@ -26,7 +26,7 @@ export const riverFocusManager = (function () {
   /**
    * Retrieve screen focus data by id
    *
-   * @param {String}  screenFocusableGroupId Id that was used to save screen data.
+   * @param {{screenFocusableGroupId: string}} screenFocusableGroupId Unique Id of the screen from layout.json
    *
    */
   function screenFocusableData({ screenFocusableGroupId }) {
@@ -36,8 +36,9 @@ export const riverFocusManager = (function () {
   /**
    * Clear screen data for specific screen
    *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function clearScreenData({ screenId, isInsideContainer }) {
@@ -60,9 +61,13 @@ export const riverFocusManager = (function () {
   /**
    * Focus on selected items
    *
-   * @param {String}  screenFocusableGroupId Top group id that was saved as screenn
-   * @param {String} screenFocusedOnItem focusable item to focus
-   * @param {object} history navigator history object
+   * @param {{
+   * screenFocusableGroupId: string,
+   * screenFocusedOnItem: () => void,
+   * previousAction: QuickBrickNavigationActionType,
+   * isDeepLink: boolean }} object contains data for focus
+   * - `screenFocusedOnItem` focusable item to focus
+   * - `previousActionhistory` navigator history object
    *
    */
   function focusOnSelectedItem({
@@ -115,15 +120,15 @@ export const riverFocusManager = (function () {
 
   /**
    * Create unique key that will be used for save focused group data inside specific screen
-   *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function screenFocusableGroupId({ screenId, isInsideContainer }) {
-    return R.isNil(isInsideContainer)
-      ? `RiverFocusableGroup-${screenId}`
-      : `RiverFocusableGroup-${screenId}-isInsideContainer`;
+    return `RiverFocusableGroup-${screenId}${
+      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
+    }`;
   }
 
   return {

package/appUtils/accessibilityManager/const.ts

@@ -0,0 +1,50 @@
+export const BUTTON_ACCESSIBILITY_KEYS = {
+  play: {
+    label: "accessibility_play_label",
+    hint: "accessibility_play_hint",
+    mini: {
+      label: "accessibility_play_mini_label",
+      hint: "accessibility_play_mini_hint",
+    },
+  },
+  pause: {
+    label: "accessibility_pause_label",
+    hint: "accessibility_pause_hint",
+    mini: {
+      label: "accessibility_pause_mini_label",
+      hint: "accessibility_pause_mini_hint",
+    },
+  },
+  rewind: {
+    label: "accessibility_rewind_label",
+    hint: "accessibility_rewind_hint",
+  },
+  forward: {
+    label: "accessibility_forward_label",
+    hint: "accessibility_forward_hint",
+  },
+  close: {
+    label: "accessibility_close_label",
+    hint: "accessibility_close_hint",
+    mini: {
+      label: "accessibility_close_mini_label",
+      hint: "accessibility_close_mini_hint",
+    },
+  },
+  maximize: {
+    label: "accessibility_maximize_label",
+    hint: "accessibility_maximize_hint",
+  },
+  subtitles: {
+    label: "accessibility_subtitle_label",
+    hint: "accessibility_subtitle_hint",
+  },
+  back: {
+    label: "accessibility_back_label",
+    hint: "accessibility_back_hint",
+  },
+  fullscreen: {
+    label: "accessibility_fullscreen_label",
+    hint: "accessibility_fullscreen_hint",
+  },
+} as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { AccessibilityManager } from "./index";
+
+export const useAccessibilityManager = () => {
+  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const { localizations } = remoteConfigurations;
+
+  const accessibilityManager = useMemo(() => {
+    return AccessibilityManager.getInstance();
+  }, []);
+
+  useEffect(() => {
+    accessibilityManager.updateLocalizations(localizations);
+  }, [localizations]);
+
+  useEffect(() => {
+    const subscription = accessibilityManager.getStateAsObservable().subscribe({
+      next: () => {
+        // TODO: handle accessibility states
+        // screenReaderEnabled: false
+        // reduceMotionEnabled: false
+        // boldTextEnabled: false
+      },
+    });
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return accessibilityManager;
+};

package/appUtils/accessibilityManager/index.ts

@@ -0,0 +1,150 @@
+import { BehaviorSubject } from "rxjs";
+import { accessibilityManagerLogger as logger } from "./logger";
+import { TTSManager } from "../platform/platformUtils";
+import { getLocalizations } from "../../localizationUtils";
+import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
+
+export interface AccessibilityState {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+}
+
+export interface AccessibilityProps {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+}
+
+export class AccessibilityManager {
+  private static _instance: AccessibilityManager | null = null;
+  private state$ = new BehaviorSubject<AccessibilityState>({
+    screenReaderEnabled: false,
+    reduceMotionEnabled: false,
+    boldTextEnabled: false,
+  });
+
+  private announcements$ = new BehaviorSubject<{
+    message: string;
+    localizedMessage?: string | undefined;
+    timestamp: number;
+  } | null>(null);
+
+  private ttsManager = TTSManager.getInstance();
+  private localizations: { [key: string]: string };
+
+  private constructor(localizations?: { [key: string]: string }) {
+    if (localizations) {
+      this.localizations = getLocalizations({ localizations });
+    }
+  }
+
+  public static getInstance(): AccessibilityManager {
+    if (!AccessibilityManager._instance) {
+      AccessibilityManager._instance = new AccessibilityManager();
+    }
+
+    return AccessibilityManager._instance;
+  }
+
+  public updateLocalizations(localizations: { [key: string]: string }) {
+    this.localizations = getLocalizations({ localizations });
+  }
+
+  public getState(): AccessibilityState {
+    return this.state$.getValue();
+  }
+
+  public getStateAsObservable() {
+    return this.state$.asObservable();
+  }
+
+  /**
+   * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
+   * keyOfLocalizedText is the key to the localized text
+   */
+  public readText({
+    text,
+    keyOfLocalizedText,
+  }: {
+    text: string;
+    keyOfLocalizedText?: string;
+  }) {
+    logger.debug("Reading text", { text, keyOfLocalizedText });
+
+    if (keyOfLocalizedText) {
+      if (!this.localizations) {
+        logger.error(
+          "Attempting to use localized key without initialized localizations"
+        );
+
+        return;
+      }
+
+      const localizedMessage = this.getLocalizedMessage(keyOfLocalizedText);
+
+      if (!localizedMessage) {
+        logger.warn(`No localization found for key: ${keyOfLocalizedText}`);
+
+        return;
+      }
+
+      text = localizedMessage;
+    }
+
+    if (this.ttsManager) {
+      this.ttsManager.readText(text);
+    }
+
+    this.announcements$.next({
+      message: text,
+      localizedMessage: keyOfLocalizedText ? text : undefined,
+      timestamp: Date.now(),
+    });
+  }
+
+  public getButtonAccessibilityProps(buttonName: string): AccessibilityProps {
+    const buttonConfig = BUTTON_ACCESSIBILITY_KEYS[buttonName];
+
+    if (!buttonConfig) {
+      return {
+        accessibilityLabel: buttonName,
+        accessibilityHint: `Press button to perform action on ${buttonName}`,
+        "aria-label": buttonName,
+        "aria-description": `Press button to perform action on ${buttonName}`,
+      };
+    }
+
+    const labelKey = buttonConfig.label;
+    const hintKey = buttonConfig.hint;
+
+    const label = this.getLocalizedMessage(labelKey) || buttonName;
+
+    const hint =
+      this.getLocalizedMessage(hintKey) ||
+      `Press button to perform action on ${buttonName}`;
+
+    return {
+      accessibilityLabel: label,
+      accessibilityHint: hint,
+      "aria-label": label,
+      "aria-description": hint,
+    };
+  }
+
+  public getLocalizedMessage(key: string): string | void {
+    if (!key) return;
+
+    if (!this.localizations) {
+      logger.error(
+        "Attempting to use localized key without initialized localizations",
+        { key }
+      );
+
+      return;
+    }
+
+    return this.localizations[key];
+  }
+}

package/appUtils/accessibilityManager/logger.ts

@@ -0,0 +1,5 @@
+import { utilsLogger } from "../../logger";
+
+export const accessibilityManagerLogger = utilsLogger.addSubsystem(
+  "accessibilityManager"
+);

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

@@ -3,9 +3,7 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
-  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
-  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -23,6 +21,7 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
+  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -30,11 +29,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
+  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
-  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

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

@@ -14,10 +14,8 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("enableAutomaticFocus should not block setting focus", () => {
+  it("manages to land initial focus", () => {
     const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -31,31 +29,13 @@ describe("focusManager", () => {
       },
     });
 
+    const { success } = focusManager.setInitialFocus();
+
+    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
-  it("enableAutomaticFocus should block setting focus", () => {
-    const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.disableAutomaticFocus();
-
-    focusManager.register({
-      id: "1",
-      component: {
-        setFocus: mockSetFocus,
-        willReceiveFocus: function () {},
-        isMounted: function () {
-          return true;
-        },
-        props: { groupId: "121" },
-      },
-    });
-
-    expect(mockSetFocus).toBeCalledTimes(0);
-    expect(mockSetFocus).not.toBeCalledWith(null);
-  });
-
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

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

@@ -18,7 +18,6 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
-      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -27,10 +26,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
-      "disableAutomaticFocus",
-      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
+      "recoverFocus",
+      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {