@applicaster/zapp-react-native-utils 13.0.0-rc.99 → 14.0.0-alpha.1216545755

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,8 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
 
 /**
  * If onCellTap is defined execute the function and
@@ -42,10 +43,12 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +86,9 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
+          screenStateStore,
         });
       }
 
@@ -117,6 +123,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -138,6 +138,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -179,6 +184,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -228,6 +238,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
           clearCache: true,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -267,6 +282,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/useBatchLoading.ts

@@ -1,7 +1,7 @@
-import { isNil, complement, compose, map, min, prop, take, uniq } from "ramda";
+import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
 import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
+import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -9,6 +9,7 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useScreenContext } from "../screen/useScreenContext";
 
 type Options = {
@@ -46,9 +47,7 @@ const filterEmptyData = (data) => {
 };
 
 const getData = (rawData) =>
-  rawData.component_type === "gallery-qb"
-    ? rawData.ui_components[0].data
-    : rawData.data;
+  isGallery(rawData) ? rawData.ui_components[0].data : rawData.data;
 
 const extractData = compose(uniq, map(getData));
 
@@ -70,13 +69,12 @@ export const useBatchLoading = (
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
 
   // if first component is gallery-qb, take only one component for initial load
-  const takeSize =
-    componentsToRender?.[0]?.component_type === "gallery-qb"
-      ? 1
-      : min(
-          options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
-          componentsToRender.length
-        );
+  const takeSize = isGallery(componentsToRender?.[0])
+    ? 1
+    : min(
+        options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
+        componentsToRender.length
+      );
 
   const takeBatchSize = React.useCallback(take(takeSize), [takeSize]);
 
@@ -146,11 +144,11 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls]);
+  }, [feedUrls, feeds]);
 
   React.useEffect(() => {
     runBatchLoading();
-  }, []);
+  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/useFeedLoader.tsx

@@ -8,6 +8,7 @@ import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -51,6 +52,7 @@ export const useFeedLoader = ({
   const isInitialRender = useIsInitialRender();
   const dispatch = useDispatch();
   const { screenData } = useRoute();
+  const resolvers = useScreenResolvers();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -69,11 +71,12 @@ export const useFeedLoader = ({
             silentRefresh,
             callback,
             riverId,
+            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl]
+    [callableFeedUrl, resolvers]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -86,11 +89,12 @@ export const useFeedLoader = ({
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
+            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next]);
+  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
 
   useEffect(() => {
     if (
@@ -102,6 +106,7 @@ export const useFeedLoader = ({
             ...pipesOptions,
             clearCache: true,
             riverId,
+            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -126,14 +131,16 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, []);
+  }, [resolvers]);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        loadPipesData(callableFeedUrl, { ...pipesOptions, riverId, resolvers })
+      );
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, resolvers]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/navigation/{useGetTabBarHeight.ts → getTabBarHeight.ts}

@@ -3,7 +3,7 @@ import { platformSelect } from "../../reactUtils";
 const TAB_BAR_HEIGHT_IOS = 49;
 const TAB_BAR_HEIGHT_ANDROID = 56;
 
-export const useGetTabBarHeight = () =>
+export const getTabBarHeight = () =>
   platformSelect({
     ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,

package/reactHooks/navigation/useGetBottomTabBarHeight.ts

@@ -1,12 +1,19 @@
 import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
-import { useGetTabBarHeight } from "./useGetTabBarHeight";
+import { getTabBarHeight } from "./getTabBarHeight";
+import { useNavigation } from "./useNavigation";
 import { MenuTypes, useNavigationType } from "./useNavigationType";
+import { useNavigationPluginData } from "./useNavigationPluginData";
 
 export const useGetBottomTabBarHeight = (): number => {
+  const { activeRiver } = useNavigation();
+
+  const navigationPluginData = useNavigationPluginData(activeRiver);
+  const navigationType = useNavigationType(navigationPluginData);
+
   const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
+  const tabBarHeight = getTabBarHeight();
 
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+  const isBottomBarNavigation = navigationType === MenuTypes.bottomTabBar;
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -1,13 +1,17 @@
 import { useRoute } from "./useRoute";
 
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
+export const useNavigationPluginData = (
+  screenData?: LegacyNavigationScreenData | null
+): ZappNavigation | undefined => {
   const {
     screenData: useRouteScreenData,
   }: { screenData: QuickBrickNavigationData | null } = useRoute();
 
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
+  const activeScreenData = screenData ?? useRouteScreenData;
+
+  const navigations = activeScreenData?.targetScreen
+    ? (activeScreenData.targetScreen as ZappRiver).navigations
+    : (activeScreenData as ZappRiver).navigations;
 
   const navigationMenu = navigations?.find((nav) => nav.category === "menu");
 

package/reactHooks/navigation/useNavigationType.ts

@@ -5,8 +5,10 @@ export enum MenuTypes {
   bottomTabBar = "BOTTOM_TAB_BAR",
 }
 
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
+export const useNavigationType = (navigation?: ZappNavigation): MenuTypes => {
+  const navigationPluginData = useNavigationPluginData();
+
+  const navigationMenu = navigation ?? navigationPluginData;
 
   return !navigationMenu ||
     navigationMenu.navigation_type === "quick_brick_side_menu"

package/reactHooks/navigation/useRoute.ts

@@ -28,14 +28,19 @@ const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useRoute = (): {
+export const useRoute = (
+  useLegacy = true
+): {
   screenData: VariousScreenData;
   pathname: string;
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
+  const screenContext = useContext(ScreenDataContext);
 
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+  const screenDataContext = useLegacy
+    ? legacyScreenData(screenContext)
+    : screenContext;
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",

package/reactHooks/navigation/useScreenStateStore.ts

@@ -0,0 +1,11 @@
+import { useRoute } from "./useRoute";
+import { useMemo } from "react";
+
+export const useScreenStateStore = () => {
+  const route = useRoute(false);
+
+  return useMemo(
+    () => route.screenData?.screenStateStore,
+    [route.screenData?.screenStateStore]
+  );
+};

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

@@ -0,0 +1,69 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+const {
+  useScreenConfiguration,
+} = require("@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration");
+
+const { useScreenBackgroundColor } = require("../useScreenBackgroundColor");
+
+describe("useScreenBackgroundColor", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return the background color from screen configuration", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "#FF0000",
+    });
+
+    // Render the hook with a screen ID
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("#FF0000");
+
+    expect(useScreenConfiguration).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("should return 'transparent' when background color is empty", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "",
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is null", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: null,
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is undefined", () => {
+    useScreenConfiguration.mockReturnValue({});
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+});

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +1,11 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 
+const DEFAULT_BACKGROUND_FALLBACK = "transparent";
+
 export const useScreenBackgroundColor = (screenId: string): string => {
   const { backgroundColor: screenBackgroundColor } =
     useScreenConfiguration(screenId);
 
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  return backgroundColor;
+  return ifEmptyUseFallback(screenBackgroundColor, DEFAULT_BACKGROUND_FALLBACK);
 };

package/reactHooks/state/README.md

@@ -0,0 +1,79 @@
+# ZStoreProvider and useZStore
+
+This module provides a React context-based solution for managing Zustand stores with named access.
+
+## Usage
+
+### ZStoreProvider
+
+The `ZStoreProvider` component creates a Zustand store from the provided value and makes it available to child components.
+
+```tsx
+import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+
+// In your component
+<ZStoreProvider name="playerConfiguration" value={controller?.config}>
+  <YourComponent />
+</ZStoreProvider>
+```
+
+### useZStore
+
+The `useZStore` hook allows you to access a Zustand store by name from within a `ZStoreProvider`.
+
+```tsx
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// In your component
+const MyComponent = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state.someProperty);
+  
+  return <Text>{config}</Text>;
+};
+```
+
+## Example
+
+```tsx
+import React from "react";
+import { ZStoreProvider, useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// Component that uses the store
+const PlayerConfigDisplay = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state);
+  
+  return (
+    <View>
+      <Text>Player Config: {JSON.stringify(config)}</Text>
+    </View>
+  );
+};
+
+// Main component that provides the store
+const PlayerComponent = ({ controller }) => {
+  return (
+    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
+      <PlayerConfigDisplay />
+    </ZStoreProvider>
+  );
+};
+```
+
+## Features
+
+- **Named Stores**: Access stores by name instead of importing them directly
+- **Context-based**: Uses React Context for store management
+- **Zustand Integration**: Seamlessly works with existing Zustand stores
+- **Type Safety**: Full TypeScript support
+- **Error Handling**: Clear error messages when stores are not found or used outside providers
+
+## Error Handling
+
+The `useZStore` hook will throw errors in the following cases:
+
+1. **Used outside provider**: "useZStore must be used within a ZStoreProvider"
+2. **Store not found**: "Store with name 'storeName' not found. Make sure it's provided by a ZStoreProvider" 

package/reactHooks/state/ZStoreProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import { create, UseBoundStore } from "zustand";
+
+interface ZStoreContextType {
+  stores: Map<string, UseBoundStore<any>>;
+  registerStore: (name: string, store: UseBoundStore<any>) => void;
+  getStore: (name: string) => UseBoundStore<any> | undefined;
+}
+
+const ZStoreContext = createContext<ZStoreContextType | null>(null);
+
+interface ZStoreProviderProps {
+  children: ReactNode;
+  name: string;
+  value: any;
+}
+
+export const ZStoreProvider: React.FC<ZStoreProviderProps> = ({
+  children,
+  name,
+  value,
+}) => {
+  const parentContext = useContext(ZStoreContext);
+
+  const context = useMemo(() => {
+    if (parentContext) {
+      // If parent context exists, create a new store and register it
+      const store = create(() => value);
+      parentContext.registerStore(name, store);
+
+      return parentContext;
+    }
+
+    // Create a new context if none exists
+    const stores = new Map<string, UseBoundStore<any>>();
+
+    // Create a store from the provided value
+    const store = create(() => value);
+    stores.set(name, store);
+
+    return {
+      stores,
+      registerStore: (storeName: string, storeInstance: UseBoundStore<any>) => {
+        stores.set(storeName, storeInstance);
+      },
+      getStore: (storeName: string) => stores.get(storeName),
+    };
+  }, [parentContext, name, value]);
+
+  return (
+    <ZStoreContext.Provider value={context}>{children}</ZStoreContext.Provider>
+  );
+};
+
+export const useZStore = (name: string): UseBoundStore<any> => {
+  const context = useContext(ZStoreContext);
+
+  if (!context) {
+    throw new Error("useZStore must be used within a ZStoreProvider");
+  }
+
+  const store = context.getStore(name);
+
+  if (!store) {
+    throw new Error(
+      `Store with name "${name}" not found. Make sure it's provided by a ZStoreProvider.`
+    );
+  }
+
+  return store;
+};

package/reactHooks/state/__tests__/ZStoreProvider.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { ZStoreProvider, useZStore } from "../ZStoreProvider";
+import { useStore } from "zustand";
+
+interface TestState {
+  value: string;
+}
+
+// Test component that uses the store
+const TestComponent = ({ storeName }: { storeName: string }) => {
+  const store = useZStore(storeName);
+  const value = useStore(store, (state: any) => (state as TestState).value);
+
+  return <Text testID="test-value">{value}</Text>;
+};
+
+// Test component that provides a store
+const TestProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ZStoreProvider name="testStore" value={{ value: "test-value" }}>
+      {children}
+    </ZStoreProvider>
+  );
+};
+
+describe("ZStoreProvider and useZStore", () => {
+  it("should provide a store and allow access via useZStore", () => {
+    render(
+      <TestProvider>
+        <TestComponent storeName="testStore" />
+      </TestProvider>
+    );
+
+    expect(screen.getByTestId("test-value").props.children).toBe("test-value");
+  });
+
+  it("should throw error when useZStore is used outside provider", () => {
+    // Suppress console.error for this test
+    const originalError = console.error;
+    console.error = jest.fn();
+
+    expect(() => {
+      render(<TestComponent storeName="testStore" />);
+    }).toThrow("useZStore must be used within a ZStoreProvider");
+
+    console.error = originalError;
+  });
+
+  it("should throw error when store name is not found", () => {
+    // Suppress console.error for this test
+    const originalError = console.error;
+    console.error = jest.fn();
+
+    expect(() => {
+      render(
+        <TestProvider>
+          <TestComponent storeName="nonExistentStore" />
+        </TestProvider>
+      );
+    }).toThrow('Store with name "nonExistentStore" not found');
+
+    console.error = originalError;
+  });
+});

package/reactHooks/state/index.ts

@@ -1,3 +1,5 @@
 export { useRivers } from "./useRivers";
 
 export { useHomeRiver } from "./useHomeRiver";
+
+export { ZStoreProvider, useZStore } from "./ZStoreProvider";

package/reactHooks/useListenEventBusEvent.ts

@@ -23,5 +23,5 @@ export const useListenEventBusEvent = (
         sub.remove(); // stop listening to DeviceEventEmitter
       };
     }
-  }, []);
+  }, [handler, subscriptionID, source, events]);
 };

package/reactUtils/index.ts

@@ -187,3 +187,12 @@ export const hasVizioAPIs = () => {
 
   return hasAPIs;
 };
+
+/**
+ * Checks if the Android version is at least the expected version
+ * @param expectedVersion The version to compare against
+ * @returns True if the current Android version is at least the expected version, false otherwise
+ */
+export const isAndroidVersionAtLeast = (expectedVersion: number) => {
+  return parseFloat(Platform.Version.toString()) >= expectedVersion;
+};