@applicaster/zapp-react-native-utils 14.0.0-rc.60 → 14.0.0-rc.62

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

@@ -6,7 +6,8 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
-  "focusTopNavigation": [Function],
+  "focusOnSelectedTab": [Function],
+  "focusOnSelectedTopMenuItem": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -29,6 +30,7 @@ exports[`focusManager should be defined 1`] = `
   "isFocusOnContent": [Function],
   "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
+  "isTabsScreenContentFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/events.ts

@@ -9,3 +9,5 @@ export const WILL_LOSE_FOCUS = "willLoseFocus";
 export const BLUR = "blur";
 
 export const HAS_LOST_FOCUS = "hasLostFocus";
+
+export const RESET = "reset";

package/appUtils/focusManager/index.ts

@@ -3,6 +3,7 @@ import {
   isNilOrEmpty,
   isNotNil,
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { getFocusableId } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 import { Tree } from "./treeDataStructure/Tree";
 import {
@@ -15,9 +16,7 @@ import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
 import {
-  findSelectedTabId,
-  findSelectedMenuId,
-  isTabsScreenContentFocused,
+  isTabsScreenOnContentFocused,
   isCurrentFocusOnContent,
   isCurrentFocusOnMenu,
   isCurrentFocusOn,
@@ -300,37 +299,40 @@ export const focusManager = (function () {
     return isCurrentFocusOnMenu(currentFocusNode);
   }
 
-  // Move focus to appropriate top navigation tab with context
-  function focusTopNavigation(isTabsScreen: boolean, item: ZappEntry) {
-    const landFocusTo = (id) => {
-      if (id) {
-        // set focus on selected menu item
-        const direction = undefined;
+  function landFocusToWithoutScrolling(id) {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
 
-        const context: FocusManager.FocusContext = {
-          source: "back",
-          preserveScroll: true,
-        };
+      const context: FocusManager.FocusContext = {
+        source: "back",
+        preserveScroll: true,
+      };
 
-        logger.log({ message: "landFocusTo", data: { id } });
+      logger.log({ message: "landFocusTo", data: { id } });
 
-        blur(direction);
-        setFocus(id, direction, context);
-      }
-    };
+      blur(direction);
+      setFocus(id, direction, context);
+    }
+  }
 
-    if (isTabsScreen && isTabsScreenContentFocused(currentFocusNode)) {
-      const selectedTabId = findSelectedTabId(item);
+  function isTabsScreenContentFocused() {
+    return isTabsScreenOnContentFocused(currentFocusNode);
+  }
 
-      // Set focus with back button context to tabs-menu
-      landFocusTo(selectedTabId);
+  function focusOnSelectedTab(item: ZappEntry): void {
+    // Move focus to appropriate top navigation tab with context
+    const selectedTabId = getFocusableId(item.id);
 
-      return;
-    }
+    // Set focus with back button context to tabs-menu
+    landFocusToWithoutScrolling(selectedTabId);
+  }
 
-    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+  function focusOnSelectedTopMenuItem(
+    selectedMenuItemId: Option<string>
+  ): void {
     // Set focus with back button context to top-menu
-    landFocusTo(selectedMenuItemId);
+    landFocusToWithoutScrolling(selectedMenuItemId);
   }
 
   /**
@@ -643,9 +645,11 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
-    focusTopNavigation,
     isFocusOnContent,
     isFocusOnMenu,
     isFocusOn,
+    focusOnSelectedTopMenuItem,
+    focusOnSelectedTab,
+    isTabsScreenContentFocused,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -123,19 +123,7 @@ export const findSelectedTabId = (item: ZappEntry): string => {
   return selectedTabId;
 };
 
-export const findSelectedMenuId = (focusableTree) => {
-  // Set focus with back button context
-  const navbar = getNavbarNode(focusableTree);
-
-  const selectedMenuItemId = find(
-    (child) => child.component.props.selected,
-    navbar.children
-  )?.id;
-
-  return selectedMenuItemId;
-};
-
-export const isTabsScreenContentFocused = (node) => {
+export const isTabsScreenOnContentFocused = (node) => {
   if (isRoot(node)) {
     return false;
   }
@@ -152,7 +140,7 @@ export const isTabsScreenContentFocused = (node) => {
     return true;
   }
 
-  return isTabsScreenContentFocused(node.parent);
+  return isTabsScreenOnContentFocused(node.parent);
 };
 
 export const isCurrentFocusOnMenu = (node) => {

package/focusManager/FocusManager.ts

@@ -2,11 +2,24 @@ import { path } from "ramda";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
 import { logger } from "./logger";
 import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -221,7 +234,8 @@ class FocusManager {
 
   private setNextFocus(
     nextFocus: FocusManager.TouchableReactRef,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     if (nextFocus?.current?.props?.blockFocus) {
       return;
@@ -250,7 +264,7 @@ class FocusManager {
 
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
-      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
+      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {}, context);
     }
   }
 
@@ -291,7 +305,8 @@ class FocusManager {
 
   setFocus(
     newFocus: FocusManager.TouchableReactRef | string,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     // Checks if element is focusable
     const { isFocusable, error } = FocusManager.isFocusable(newFocus);
@@ -316,7 +331,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -351,6 +366,11 @@ class FocusManager {
       FocusManager.instance.focused.onBlur(FocusManager.instance.focused, {});
     }
 
+    // send reset event to some handler to reset their internal state, before real reset happens
+    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.RESET, {
+      focusedId: FocusManager.instance.focusedId,
+    });
+
     FocusManager.instance.setFocusLocal({ current: null });
   }
 
@@ -417,6 +437,60 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_NAVBAR
+    );
+  }
+
+  isFocusOnContent(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_CONTENT
+    );
+  }
+
+  private landFocusToWithoutScrolling = (id) => {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext =
+        contextWithoutScrolling("back");
+
+      logger.log({ message: "landFocusToWithoutScrolling", data: { id } });
+
+      this.setFocus(id, direction, context);
+    }
+  };
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTab(index: number): void {
+    const selectedTabId = findSelectedTabId(this.tree, index);
+
+    // Set focus with back button context to tabs-menu
+    this.landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTopMenuItem(index: number, sectionKey: string): void {
+    const selectedMenuItemId = findSelectedMenuId(this.tree, {
+      index,
+      sectionKey,
+    });
+
+    // Set focus with back button context to top-menu
+    this.landFocusToWithoutScrolling(selectedMenuItemId);
+  }
+
+  isTabsScreenContentFocused(): boolean {
+    return isTabsScreenContentFocused(
+      this.tree,
+      FocusManager.instance.focusedId
+    );
+  }
 }
 
 export const focusManager = FocusManager.getInstance();

package/focusManager/aux/index.ts

@@ -0,0 +1,98 @@
+import { isNil, pathOr } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_NAVBAR_SECTIONS,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => QUICK_BRICK_NAVBAR === node?.id;
+const isContent = (node) => QUICK_BRICK_CONTENT === node?.id;
+
+// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerSelectorContainerId;
+
+export const onRegisterScreenPickerSelectorContainer = (id) => {
+  screenPickerSelectorContainerId = id;
+};
+
+export const onUnregisterScreenPickerSelectorContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerSelectorContainerId === id) {
+    screenPickerSelectorContainerId = undefined;
+  }
+};
+// SCREEN_PICKER_SELECTOR_CONTAINER
+
+// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerContentContainerId;
+
+export const onRegisterScreenPickerContentContainer = (id) => {
+  screenPickerContentContainerId = id;
+};
+
+export const onUnregisterScreenPickerContentContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerContentContainerId === id) {
+    screenPickerContentContainerId = undefined;
+  }
+};
+
+const isScreenPickerContentContainer = (node) =>
+  screenPickerContentContainerId === node?.id;
+
+// SCREEN_PICKER_CONTENT_CONTAINER
+
+export const findSelectedMenuId = (
+  focusableTree,
+  { index, sectionKey }: { index: number; sectionKey: string }
+) => {
+  const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
+
+  return pathOr(
+    undefined,
+    ["children", index, "id"],
+    focusableTree.find(sectionName)
+  );
+};
+
+export const findSelectedTabId = (focusableTree, index: number): string => {
+  const screenSelectorContainerNode = focusableTree.find(
+    screenPickerSelectorContainerId
+  );
+
+  const selectedTabId = screenSelectorContainerNode.children[index]?.id;
+
+  return selectedTabId;
+};
+
+export const isTabsScreenContentFocused = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScreenPickerContentContainer(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(focusableTree, node.parentId);
+};
+
+export const contextWithoutScrolling = (
+  source: FocusManager.FocusContext["source"]
+): FocusManager.FocusContext => {
+  return {
+    source,
+    preserveScroll: true,
+  };
+};

package/focusManager/utils.ts

@@ -4,11 +4,11 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 export const getFocusableId = (ref) => ref?.current?.props.id;
 
-type Direction = "up" | "down" | "left" | "right";
-
 const normalizeDirection = (direction) => direction.toLowerCase();
 
-const checkDirection = (direction: Direction) => {
+const checkDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   invariant(!isNilOrEmpty(direction), "direction should not be empty");
 
   invariant(
@@ -17,19 +17,25 @@ const checkDirection = (direction: Direction) => {
   );
 };
 
-export const toFocusDirection = (direction: Direction) => {
+export const toFocusDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return `nextFocus${capitalize(normalizeDirection(direction))}`;
 };
 
-export const isHorizontalDirection = (direction: Direction) => {
+export const isHorizontalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["left", "right"].includes(normalizeDirection(direction));
 };
 
-export const isVerticalDirection = (direction: Direction) => {
+export const isVerticalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["up", "down"].includes(normalizeDirection(direction));

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -365,6 +365,86 @@ function getPlayerConfiguration({ platform, version }) {
           ],
         },
       ]),
+      fieldsGroup(
+        "Partial Player (Roku only)",
+        "This section allows you to configure width and height of video player in Partial Player",
+        [
+          {
+            key: "video_theater_width",
+            label: "Width of player",
+            type: "number_input",
+            initial_value: 1420,
+            placeholder: "1420",
+          },
+          {
+            key: "video_theater_height",
+            label: "Height of player",
+            type: "number_input",
+            initial_value: 900,
+            placeholder: "900",
+          },
+          {
+            key: "full_screen_button_offset_x",
+            label: "Fullscreen button X",
+            type: "number_input",
+            initial_value: 160,
+            placeholder: "160",
+          },
+          {
+            key: "full_screen_button_offset_y",
+            label: "Fullscreen button Y",
+            type: "number_input",
+            initial_value: 160,
+            placeholder: "160",
+          },
+          {
+            key: "full_screen_button_w",
+            label: "Fullscreen button width",
+            type: "number_input",
+            initial_value: 120,
+            placeholder: "120",
+          },
+          {
+            key: "full_screen_button_h",
+            label: "Fullscreen button height",
+            type: "number_input",
+            initial_value: 120,
+            placeholder: "120",
+          },
+          {
+            key: "full_screen_button_background_color",
+            type: "color_picker",
+            label: "Fullscreen Button background color",
+            initial_value: "#00000000",
+            placeholder: "color",
+            label_tooltip: "Pick Color",
+          },
+          {
+            key: "full_screen_button_background_url",
+            type: "text_input",
+            label: "Fullscreen Button background URL",
+            initial_value: "pkg:/images/tv_fullscreen.png",
+            placeholder: "",
+            label_tooltip: "",
+          },
+          {
+            key: "full_screen_button_highlighted_background_color",
+            type: "color_picker",
+            label: "Fullscreen Button highlighted background color",
+            initial_value: "#00000000",
+            placeholder: "color",
+            label_tooltip: "Pick Color",
+          },
+          {
+            key: "full_screen_button_highlighted_background_url",
+            type: "text_input",
+            label: "Fullscreen Button highlighted URL",
+            initial_value: "pkg:/images/tv_fullscreen.png",
+            placeholder: "",
+            label_tooltip: "",
+          },
+        ]
+      ),
       fieldsGroup(
         "Skip Button",
         "This section allows you to configure the skip button styles for tv",
@@ -496,6 +576,20 @@ function getPlayerConfiguration({ platform, version }) {
             key: "skip_button_style_text_android_font_size",
             initial_value: 24,
           },
+          {
+            type: "roku_font_selector",
+            label_tooltip: "",
+            label: "Roku Font Family",
+            key: "skip_button_style_text_roku_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label_tooltip: "",
+            label: "Roku Font Size",
+            key: "skip_button_style_text_roku_font_size",
+            initial_value: 24,
+          },
           {
             type: "select",
             options: [
@@ -2904,6 +2998,18 @@ function getPlayerConfiguration({ platform, version }) {
             key: "android_tv_audio_player_title_font_size",
             initial_value: 40,
           },
+          {
+            type: "roku_font_selector",
+            label: "Roku Font Family",
+            key: "roku_audio_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Roku Font Size",
+            key: "roku_audio_player_title_font_size",
+            initial_value: 40,
+          },
         ]
       ),
       // Audio Player Summary Font Family
@@ -2977,6 +3083,18 @@ function getPlayerConfiguration({ platform, version }) {
             key: "android_tv_audio_player_summary_font_size",
             initial_value: 22,
           },
+          {
+            type: "roku_font_selector",
+            label: "Roku Font Family",
+            key: "roku_audio_player_summary_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Roku Font Size",
+            key: "roku_audio_player_summary_font_size",
+            initial_value: 22,
+          },
         ]
       ),
       fieldsGroup(
@@ -3344,6 +3462,60 @@ function getPlayerConfiguration({ platform, version }) {
           },
         ]
       ),
+      fieldsGroup(
+        "Roku only",
+        "This section allows you to configure RAF - Roku Ad Framework settings",
+        [
+          {
+            key: "raf_enabled",
+            type: "switch",
+            initial_value: false,
+          },
+          {
+            key: "raf_url",
+            type: "text_input",
+            label: "Ad URL",
+            label_tooltip:
+              "Publisher's ad URL. The default is the Roku Ad Server with a single pre-roll placeholder, with revenue split ad sharing by default. TO GET PAID A URL MUST BE PASSED IN HERE. Note: If you are putting ads in child targetted content then your ad url will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
+          },
+          {
+            key: "genre",
+            type: "text_input",
+            label: "Roku Genre",
+            initial_value: "Entertainment",
+            label_tooltip:
+              "Choose value from Roku genre tags, from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md",
+          },
+          {
+            key: "nielsen_enabled",
+            type: "checkbox",
+            initial_value: false,
+            label_tooltip:
+              "Required only for apps launched in the US market, See developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md for details on configuration",
+          },
+          {
+            key: "nielsen_app_id",
+            type: "text_input",
+            initial_value: "",
+            label_tooltip:
+              "id of your app for nielsen leave blank if you don't have a specific id (that is almost always the case)",
+          },
+          {
+            key: "nielsen_genre",
+            type: "text_input",
+            initial_value: "General",
+            label_tooltip:
+              "genre from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md#nielsen-dar-genre-tags",
+          },
+          {
+            key: "is_kids_content",
+            type: "checkbox",
+            initial_value: false,
+            label_tooltip:
+              "If your content is directed at kids, this must be checked. See developer.roku.com/docs/developer-program/advertising/raf-api.md#setcontentgenregenres-as-string-kidscontent-as-boolean for more info. Also note your ad urls will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
+          },
+        ]
+      ),
       fieldsGroup(
         "Audio Tracks",
         "This section allows you to configure default audio track behavior for videos with multiple audio tracks",

package/manifestUtils/index.js

@@ -29,6 +29,9 @@ const {
   getUpdatedSecondaryImageKeys,
 } = require("./secondaryImage");
 
+const DEFAULT_GRADIENT_IMAGE =
+  "data:image/png;base64,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";
+
 module.exports = {
   fontKey,
   fontKeyTV,
@@ -47,5 +50,6 @@ module.exports = {
   tvProgressBar,
   secondaryImage,
   getUpdatedSecondaryImageKeys,
+  DEFAULT_GRADIENT_IMAGE,
   compact,
 };

package/manifestUtils/keys.js

@@ -485,6 +485,18 @@ const TV_MENU_LABEL_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "LG letter spacing",
   },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.roku,
+    suffix: "Roku font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "Roku font size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "Roku line height",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text transform",

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -424,6 +424,12 @@ const titleFields = [
     key: "vizio_font_family",
     initial_value: fontFamily,
   },
+  {
+    type: "roku_font_selector",
+    label: "Roku TV Font Family",
+    key: "roku_font_family",
+    initial_value: fontFamily,
+  },
   ...generateFontConfiguration(),
   // text transform
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-rc.60",
+  "version": "14.0.0-rc.62",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-rc.60",
+    "@applicaster/applicaster-types": "14.0.0-rc.62",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/getPlayerActionButtons.ts

@@ -13,5 +13,5 @@ export const getPlayerActionButtons = (configuration: any) => {
     return [];
   }
 
-  return take(map(buttonsString.split(","), trim), 2);
+  return take(2, map(buttonsString.split(","), trim));
 };

package/screenPickerUtils/index.ts

@@ -5,3 +5,9 @@ export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
 export const SCREEN_PICKER_CONTAINER = "ScreenPickerContainer";
 
 export const getScreenPickerId = (id) => `${SCREEN_PICKER_CONTAINER}.${id}`;
+
+export const getScreenPickerSelectorContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-selector`;
+
+export const getScreenPickerContentContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-container`;

package/utils/__tests__/endsWith.test.ts

@@ -0,0 +1,30 @@
+import { endsWith } from "../endsWith";
+
+describe("endsWith", () => {
+  it("returns false when str is null", () => {
+    expect(endsWith("a", null)).toBe(false);
+  });
+
+  it("returns false when str is undefined", () => {
+    expect(endsWith("a", undefined)).toBe(false);
+  });
+
+  it("returns true when string ends with target", () => {
+    expect(endsWith("lo", "hello")).toBe(true);
+    expect(endsWith("", "hello")).toBe(true); // empty target always matches
+  });
+
+  it("returns false when string does not end with target", () => {
+    expect(endsWith("yo", "hello")).toBe(false);
+  });
+
+  it("works with single character target", () => {
+    expect(endsWith("o", "hello")).toBe(true);
+    expect(endsWith("x", "hello")).toBe(false);
+  });
+
+  it("is case-sensitive", () => {
+    expect(endsWith("Lo", "hello")).toBe(false);
+    expect(endsWith("lo", "hello")).toBe(true);
+  });
+});

package/utils/__tests__/omit.test.ts

@@ -0,0 +1,19 @@
+import { omit } from "../omit";
+
+test("example 1", () => {
+  const path = ["a", "b", "c"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = {};
+
+  expect(omit(path, record)).toEqual(output);
+});
+
+test("example 2", () => {
+  const path = ["a", "b"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = { c: 3 };
+
+  expect(omit(path, record)).toEqual(output);
+});

package/utils/__tests__/path.test.ts

@@ -0,0 +1,33 @@
+import { path } from "../path";
+
+test("example 1", () => {
+  const route = ["a", "b", "c"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = 1;
+
+  expect(path(route, xs)).toEqual(output);
+});
+
+test("example 2", () => {
+  const route = ["a", "b"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = { c: 1 };
+
+  expect(path(route, xs)).toEqual(output);
+});
+
+test("example 3", () => {
+  const route = ["a", "b", "x"];
+  const xs = { a: { b: { c: 1 } } };
+
+  expect(path(route, xs)).toBeUndefined();
+});
+
+test("example 4", () => {
+  const route = ["a", "b", "c"];
+  const xs = undefined;
+
+  expect(path(route, xs)).toBeUndefined();
+});

package/utils/__tests__/take.test.ts

@@ -0,0 +1,40 @@
+import { take } from "../take";
+
+describe("take", () => {
+  it("takes n elements from the beginning", () => {
+    expect(take(2, [1, 2, 3])).toEqual([1, 2]);
+  });
+
+  it("returns the whole array if n is larger than length", () => {
+    expect(take(5, [1, 2, 3])).toEqual([1, 2, 3]);
+  });
+
+  it("returns empty array if n is 0", () => {
+    expect(take(0, [1, 2, 3])).toEqual([]);
+  });
+
+  it("returns empty array for empty input array", () => {
+    expect(take(2, [])).toEqual([]);
+  });
+
+  it("returns empty array if n is negative", () => {
+    expect(take(-1, [1, 2, 3])).toEqual([]);
+  });
+
+  it("works with strings in array", () => {
+    expect(take(2, ["a", "b", "c"])).toEqual(["a", "b"]);
+  });
+
+  it("works with objects in array", () => {
+    const arr = [{ id: 1 }, { id: 2 }];
+    expect(take(1, arr)).toEqual([{ id: 1 }]);
+  });
+
+  it("returns empty array if input is not an array", () => {
+    // @ts-expect-error testing non-array input
+    expect(take(2, null)).toEqual([]);
+
+    // @ts-expect-error testing non-array input
+    expect(take(2, undefined)).toEqual([]);
+  });
+});

package/utils/endsWith.ts

@@ -0,0 +1,9 @@
+import { isNil } from "lodash";
+
+export const endsWith = (target, str) => {
+  if (isNil(str)) {
+    return false;
+  }
+
+  return str.endsWith(target);
+};

package/utils/index.ts

@@ -8,6 +8,14 @@ export { find } from "./find";
 
 export { pathOr } from "./pathOr";
 
+export { path } from "./path";
+
+export { omit } from "./omit";
+
+export { endsWith } from "./endsWith";
+
+export { take } from "./take";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -19,10 +27,11 @@ export {
   has,
   flatMap,
   difference,
-  take,
   pick,
   map,
   trim,
   toString,
   last,
+  toLower,
+  isEqual as equals,
 } from "lodash";

package/utils/omit.ts

@@ -0,0 +1,5 @@
+import { omit as Lodash_omit } from "lodash";
+
+export const omit = (path, record) => {
+  return Lodash_omit(record, path);
+};

package/utils/path.ts

@@ -0,0 +1,5 @@
+import { get } from "lodash";
+
+export const path = (route, record) => {
+  return get(record, route, undefined);
+};

package/utils/take.ts

@@ -0,0 +1,5 @@
+import { take as Ltake } from "lodash";
+
+export function take<T>(n: number, xs: T[]): T[] {
+  return Ltake(xs, n);
+}