@applicaster/zapp-react-native-utils 15.0.0-alpha.5412418016 → 15.0.0-alpha.5485312433

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

package/reactHooks/screen/__tests__/useScreenBackgroundColor.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",

package/reactHooks/screen/__tests__/useScreenData.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

package/reactHooks/screen/__tests__/useTargetScreenData.test.tsx

@@ -1,16 +1,24 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 
 import { useTargetScreenData } from "../useTargetScreenData";
 
 describe("useTargetScreenData", function () {
-  const river_id_2 = {};
-  const river_id_1 = {};
+  const river_id_2 = {
+    id: "river_id_2",
+    type: "any",
+  };
+
+  const river_id_1 = {
+    id: "river_id_1",
+    type: "any",
+  };
+
   const screenId = "river_id_2";
   const entry = { id: "test", type: { value: "video" } };
 

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { useRivers } from "../state";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -43,7 +44,8 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
 }
 
 export const useTargetScreenData = (entry: ZappEntry) => {
-  const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   return React.useMemo(
     () => getTargetScreenData(entry, rivers, contentTypes),

package/reactHooks/state/useRefWithInitialValue.ts

@@ -1,5 +1,9 @@
 import React from "react";
 
+type WithOptionalCleanup = {
+  cleanup?: () => void;
+};
+
 /**
  * returns a ref with an initial value that is lazily evaluated once
  * */
@@ -10,5 +14,11 @@ export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
     ref.current = initialValueGetter();
   }
 
+  React.useEffect(() => {
+    return () => {
+      (ref.current as unknown as WithOptionalCleanup)?.cleanup?.();
+    };
+  }, []);
+
   return ref;
 };

package/reactHooks/state/useRivers.ts

@@ -3,6 +3,6 @@ import {
   selectRivers,
 } from "@applicaster/zapp-react-native-redux";
 
-export function useRivers(): Record<string, ZappRiver> {
+export function useRivers() {
   return useAppSelector(selectRivers);
 }

package/reactHooks/usePluginConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { useMemo } from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
@@ -25,7 +25,7 @@ export function parsePluginConfiguration(plugin, manifest) {
 }
 
 export function usePluginConfiguration<T, S>(identifier, manifest) {
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   const plugin = useMemo(
     () => R.find(R.propEq("identifier", identifier), plugins),

package/reactHooks/utils/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 
 describe("usePrevious", () => {
   it("renders", () => {

package/screenState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { useScreenState } from "../index";
 
 describe("useScreenState", () => {

package/searchUtils/const.ts

@@ -0,0 +1,7 @@
+export const FOCUSABLE_GROUP_ID = "search-screen";
+
+export const FOCUSABLE_RESULTS_ID = "search-screen-results";
+
+export const SEARCH_BOX_GROUP_ID = "search_box_group_id";
+
+export const SEARCH_INPUT_FOCUSABLE_ID = "search_input_group_id";

package/searchUtils/index.ts

@@ -0,0 +1,3 @@
+import { SEARCH_INPUT_FOCUSABLE_ID } from "./const";
+
+export const isSearchInputId = (id) => id === SEARCH_INPUT_FOCUSABLE_ID;

package/services/storageServiceSync.web.ts

@@ -17,7 +17,7 @@ export const resolveStorageContextKey = (storageKey: string) => {
   const key = splitKey[1];
 
   if (!key) {
-    return getFromSessionOrLocalStorage(key);
+    return getFromSessionOrLocalStorage(namespaceOrKey);
   } else {
     return getFromSessionOrLocalStorage(key, namespaceOrKey);
   }

package/stringUtils/index.ts

@@ -4,7 +4,7 @@ declare const global;
 import * as R from "ramda";
 import camelize from "camelize";
 // @ts-ignore
-import Handlebars from "react-native-handlebars";
+import Handlebars from "handlebars";
 
 global.Buffer = global.Buffer || require("buffer").Buffer;
 

package/testUtils/index.tsx

@@ -4,7 +4,7 @@ import React, { PropsWithChildren } from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { View } from "react-native";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 import * as R from "ramda";
 
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
@@ -56,9 +56,29 @@ const initialState = {
   contentTypes: null,
 };
 
+const themeObjDefault = {
+  component_margin_top: 0,
+  component_margin_bottom: 0,
+  component_margin_left: 0,
+  component_margin_right: 0,
+  component_padding_top: 0,
+  component_padding_bottom: 0,
+  component_padding_left: 0,
+  component_padding_right: 0,
+  component_gutter_vertical: 0,
+  component_gutter_horizontal: 0,
+  component_corner_radius: 0,
+  app_background_color: "rgba(0,0,0,0)",
+  screen_margin_top: 0,
+  screen_margin_bottom: 0,
+  component_anchor_point_y: 0,
+  assets: "",
+};
+
 export const WrappedWithProviders = ({
   children,
   store: storeObj = {},
+  theme: themeObj = themeObjDefault,
 }: any) => {
   const _store = configureStore([thunk])(
     R.mergeDeepRight(initialState, { ...storeObj })
@@ -70,24 +90,7 @@ export const WrappedWithProviders = ({
     <ThemeContext.Provider
       value={{
         themes: {
-          light: {
-            component_margin_top: 0,
-            component_margin_bottom: 0,
-            component_margin_left: 0,
-            component_margin_right: 0,
-            component_padding_top: 0,
-            component_padding_bottom: 0,
-            component_padding_left: 0,
-            component_padding_right: 0,
-            component_gutter_vertical: 0,
-            component_gutter_horizontal: 0,
-            component_corner_radius: 0,
-            app_background_color: "rgba(0,0,0,0)",
-            screen_margin_top: 0,
-            screen_margin_bottom: 0,
-            component_anchor_point_y: 0,
-            assets: "",
-          },
+          light: themeObj,
         },
         selectedThemeId: "light",
         setSelectedThemeId: () => {},
@@ -113,11 +116,17 @@ export const WrappedWithProviders = ({
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, storeObj?: unknown) => {
+export const renderWithProviders = (
+  component,
+  storeObj?: unknown,
+  themeObj?: unknown
+) => {
   return render(component, {
     wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
       return (
-        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+        <WrappedWithProviders store={storeObj} theme={themeObj}>
+          {children}
+        </WrappedWithProviders>
       );
     },
   });

package/utils/__tests__/mapAccum.test.ts

@@ -0,0 +1,73 @@
+import { mapAccum } from "../mapAccum";
+
+describe("mapAccum", () => {
+  it("using standard ramda test", () => {
+    const digits = ["1", "2", "3", "4"];
+    const appender = (a, b) => [a + b, a + b];
+
+    const [acc, result] = mapAccum(appender, 0, digits); //= > ['01234', ['01', '012', '0123', '01234']]
+    expect(acc).toBe("01234");
+    expect(result).toEqual(["01", "012", "0123", "01234"]);
+  });
+
+  it("maps and accumulates over an array", () => {
+    const fn = (acc, x) => [acc + x, x * 2];
+    const [acc, result] = mapAccum(fn, 0, [1, 2, 3]);
+
+    expect(acc).toBe(6); // final accumulator (0 + 1 + 2 + 3)
+    expect(result).toEqual([2, 4, 6]); // mapped values (acc + x*2 at each step)
+  });
+
+  it("returns initial accumulator for empty array", () => {
+    const fn = (acc, x) => [acc + x, acc * x];
+    const [acc, result] = mapAccum(fn, 10, []);
+
+    expect(acc).toBe(10);
+    expect(result).toEqual([]);
+  });
+
+  it("accumulates strings correctly", () => {
+    const fn = (acc, x) => [acc + x, acc + x];
+    const [acc, result] = mapAccum(fn, "A", ["B", "C", "D"]);
+
+    expect(acc).toBe("ABCD");
+    expect(result).toEqual(["AB", "ABC", "ABCD"]);
+  });
+
+  it("works with objects as accumulator", () => {
+    const fn = (acc, x) => {
+      const newAcc = { sum: acc.sum + x };
+
+      return [newAcc, newAcc.sum];
+    };
+
+    const [acc, result] = mapAccum(fn, { sum: 0 }, [1, 2, 3]);
+
+    expect(acc).toEqual({ sum: 6 });
+    expect(result).toEqual([1, 3, 6]);
+  });
+
+  it("is curried", () => {
+    const fn = (acc, x) => [acc + x, x * 2];
+    const mapWithFn = mapAccum(fn);
+    const withInit = mapWithFn(2);
+    const [acc, result] = withInit([1, 2, 3]);
+
+    expect(acc).toBe(8);
+    expect(result).toEqual([2, 4, 6]);
+  });
+
+  it("does not mutate the original array", () => {
+    const arr = [1, 2, 3];
+    mapAccum((acc, x) => [acc + x, acc + x], 0, arr);
+    expect(arr).toEqual([1, 2, 3]);
+  });
+
+  it("handles mixed types in accumulator and result", () => {
+    const fn = (acc, x) => [acc + x.length, acc + "-" + x];
+    const [acc, result] = mapAccum(fn, 0, ["a", "bb", "ccc"]);
+
+    expect(acc).toBe(6);
+    expect(result).toEqual(["0-a", "1-bb", "3-ccc"]);
+  });
+});

package/utils/__tests__/mergeRight.test.ts

@@ -0,0 +1,48 @@
+import { mergeRight } from "../mergeRight";
+
+describe("mergeRight", () => {
+  test("merges two objects with no overlapping keys", () => {
+    const a = { x: 1, y: 2 };
+    const b = { z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 2, z: 3 });
+  });
+
+  test("overwrites keys from the second object", () => {
+    const a = { x: 1, y: 2 };
+    const b = { y: 10, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 10, z: 3 });
+  });
+
+  test("does not mutate the original objects", () => {
+    const a = { x: 1 };
+    const b = { y: 2 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).not.toBe(a);
+    expect(result).not.toBe(b);
+    expect(a).toEqual({ x: 1 });
+    expect(b).toEqual({ y: 2 });
+  });
+
+  test("works with empty objects", () => {
+    expect(mergeRight({}, { a: 1 })).toEqual({ a: 1 });
+    expect(mergeRight({ a: 1 }, {})).toEqual({ a: 1 });
+    expect(mergeRight({}, {})).toEqual({});
+  });
+
+  test("works with nested objects (shallow merge only)", () => {
+    const a = { x: { nested: 1 }, y: 2 };
+    const b = { x: { nested: 10 }, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: { nested: 10 }, y: 2, z: 3 });
+  });
+});

package/utils/__tests__/selectors.test.ts

@@ -0,0 +1,124 @@
+import {
+  createPluginsByPathSelector,
+  createPluginsByModuleSelector,
+  combinePluginSelectors,
+} from "../selectors";
+
+describe("Plugin Selectors", () => {
+  const mockPlugins = [
+    {
+      identifier: "plugin1",
+      module: {
+        urlScheme: { host: "test" },
+        player: { type: "default" },
+      },
+      customField: true,
+    },
+    {
+      identifier: "plugin2",
+      module: {
+        urlScheme: { host: "other" },
+      },
+    },
+    {
+      identifier: "plugin3",
+      module: {
+        player: { type: "custom" },
+      },
+    },
+  ];
+
+  const mockState = {
+    plugins: mockPlugins,
+  };
+
+  describe("createPluginsByPathSelector", () => {
+    it("filters plugins by string path", () => {
+      const selector = createPluginsByPathSelector("customField");
+      const result = selector(mockState);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].identifier).toBe("plugin1");
+    });
+
+    it("filters plugins by array path", () => {
+      const selector = createPluginsByPathSelector(["module", "urlScheme"]);
+      const result = selector(mockState);
+
+      expect(result).toHaveLength(2);
+      expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin2"]);
+    });
+
+    it("handles missing plugins array", () => {
+      const selector = createPluginsByPathSelector("customField");
+      const result = selector({});
+
+      expect(result).toEqual([]);
+    });
+
+    it("handles non-existent path", () => {
+      const selector = createPluginsByPathSelector("nonexistent");
+      const result = selector(mockState);
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe("createPluginsByModuleSelector", () => {
+    it("filters plugins by module path", () => {
+      const selector = createPluginsByModuleSelector("player");
+      const result = selector(mockState);
+
+      expect(result).toHaveLength(2);
+      expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin3"]);
+    });
+
+    it("handles non-existent module", () => {
+      const selector = createPluginsByModuleSelector("nonexistent");
+      const result = selector(mockState);
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe("combinePluginSelectors", () => {
+    it("combines multiple selectors with AND logic", () => {
+      const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
+      const playerSelector = createPluginsByModuleSelector("player");
+
+      const combinedSelector = combinePluginSelectors(
+        urlSchemeSelector,
+        playerSelector
+      );
+
+      const result = combinedSelector(mockState);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].identifier).toBe("plugin1");
+    });
+
+    it("returns empty array when no plugins match all conditions", () => {
+      const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
+      const customSelector = createPluginsByPathSelector("nonexistent");
+
+      const combinedSelector = combinePluginSelectors(
+        urlSchemeSelector,
+        customSelector
+      );
+
+      const result = combinedSelector(mockState);
+
+      expect(result).toEqual([]);
+    });
+
+    it("handles empty state", () => {
+      const selector = combinePluginSelectors(
+        createPluginsByModuleSelector("urlScheme")
+      );
+
+      const result = selector({});
+
+      expect(result).toEqual([]);
+    });
+  });
+});

package/utils/index.ts

@@ -16,6 +16,10 @@ export { endsWith } from "./endsWith";
 
 export { take } from "./take";
 
+export { mapAccum } from "./mapAccum";
+
+export { mergeRight } from "./mergeRight";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -37,4 +41,17 @@ export {
   uniq,
   uniqWith,
   flowRight as compose,
+  partial,
+  clamp,
+  reverse,
+  takeRight,
+  fromPairs,
+  sortBy,
+  merge,
+  values,
+  head,
+  findIndex,
+  set,
+  compact,
+  identity,
 } from "lodash";

package/utils/mapAccum.ts

@@ -0,0 +1,23 @@
+import { curry } from "lodash";
+
+/**
+ * A native reimplementation of Ramda's mapAccum.
+ *
+ * @template A, B, C
+ * @param {(acc: A, value: B) => [A, C]} fn - Function returning [newAcc, mappedValue]
+ * @param {A} acc - Initial accumulator
+ * @param {B[]} list - List to process
+ * @returns {[A, C[]]} - Tuple of [final accumulator, mapped array]
+ */
+export const mapAccum = curry((fn, acc, list) => {
+  const result = [];
+  let currentAcc = acc;
+
+  for (let i = 0; i < list.length; i++) {
+    const [nextAcc, mapped] = fn(currentAcc, list[i]);
+    currentAcc = nextAcc;
+    result.push(mapped);
+  }
+
+  return [currentAcc, result];
+});

package/utils/mergeRight.ts

@@ -0,0 +1,5 @@
+import { assign } from "lodash";
+
+export const mergeRight = (a, b) => {
+  return assign({}, a, b);
+};

package/utils/path.ts

@@ -1,5 +1,8 @@
-import { get } from "lodash";
+import { pathOr } from "./pathOr";
 
-export const path = (route, record) => {
-  return get(record, route, undefined);
+export const path = <T = any>(
+  route: (string | number) | (string | number)[],
+  record: any
+) => {
+  return pathOr<T>(undefined, route, record);
 };

package/utils/pathOr.ts

@@ -1,5 +1,9 @@
 import { get } from "lodash";
 
-export const pathOr = (defaultValue, path, record) => {
+export const pathOr = <T = any>(
+  defaultValue: T,
+  path: (number | string) | (number | string)[],
+  record: any
+): T => {
   return get(record, path, defaultValue);
 };

package/utils/selectors.ts

@@ -0,0 +1,46 @@
+import { get } from "lodash";
+
+export type Selector<T> = (state: any) => T;
+
+/**
+ * Creates a selector for filtering plugins by path
+ * @param path - Path to check in plugin. Can be a dot notation string or array
+ * @returns A selector function that returns matching plugins
+ */
+export const createPluginsByPathSelector = (
+  path: string | string[]
+): Selector<any[]> => {
+  return (state: any) => {
+    const plugins = state.plugins || [];
+
+    return plugins.filter((plugin: any) => get(plugin, path));
+  };
+};
+
+/**
+ * Creates a selector for filtering plugins by module path
+ * @param modulePath - Module path to check in plugin (e.g., "urlScheme", "player")
+ * @returns A selector function that returns plugins with specified module
+ */
+export const createPluginsByModuleSelector = (
+  modulePath: string
+): Selector<any[]> => {
+  return createPluginsByPathSelector(["module", modulePath]);
+};
+
+/**
+ * Creates a selector that combines multiple plugin selectors
+ * @param selectors - Array of plugin selectors to combine
+ * @returns A selector function that returns plugins matching all conditions
+ */
+export const combinePluginSelectors = (
+  ...selectors: Selector<any[]>[]
+): Selector<any[]> => {
+  return (state: any) => {
+    return selectors.reduce((filtered, selector) => {
+      const selected = selector(state);
+
+      return filtered.filter((plugin) => selected.includes(plugin));
+    }, state.plugins || []);
+  };
+};