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

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,25 +1,27 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
@@ -32,10 +34,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +46,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",

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

@@ -1,8 +1,7 @@
 import { renderHook } from "@testing-library/react-hooks";
-import * as reduxMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import React from "react";
-import * as ReactRedux from "react-redux";
+import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 jest.mock("../../navigation");
 
@@ -13,17 +12,18 @@ jest.mock(
   })
 );
 
-const useBatchLoading = require("../useBatchLoading").useBatchLoading;
-const allFeedsIsReady = require("../useBatchLoading").allFeedsIsReady;
-
-const mockStore = reduxMockStore.default([thunk]);
-
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <ReactRedux.Provider store={store}>{children}</ReactRedux.Provider>
-);
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
-  const useDispatchSpy = jest.spyOn(ReactRedux, "useDispatch");
+  const data = [
+    { data: { source: "url1" }, component_type: "any" },
+    { data: { source: "url2" }, component_type: "any" },
+    { data: { source: "url3" }, component_type: "any" },
+    { data: { source: "url4" }, component_type: "any" },
+    { data: { source: "url5" }, component_type: "any" },
+    { data: { source: "url6" }, component_type: "any" },
+    // ... more items
+  ];
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -34,7 +34,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,29 +53,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(2);
 
@@ -91,7 +79,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -110,31 +98,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
-    expect(useDispatchSpy).toBeCalledTimes(0);
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
 
@@ -145,38 +119,26 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData has been called when no data cached", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(3);
   });
 
   it("initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -194,19 +156,11 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-    ];
-
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
       { wrapper, initialProps: { store } }
@@ -216,12 +170,10 @@ describe("useBatchLoading", () => {
   });
 
   it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
@@ -231,11 +183,11 @@ describe("useBatchLoading", () => {
         component_type: "gallery-qb",
         ui_components: [{ data: { source: "url1" } }],
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
+      { data: { source: "url4" }, component_type: "any" },
+      { data: { source: "url5" }, component_type: "any" },
+      { data: { source: "url6" }, component_type: "any" },
       // ... more items
     ];
 
@@ -244,13 +196,13 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
   });
 
   it("gallery-qb: initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -258,20 +210,19 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
+    const data = [
       {
         component_type: "gallery-qb",
-        ui_components: [{ data: { source: "url1" } }],
+        data: {},
+        ui_components: [{ data: { source: "url1" } }] as any,
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
     ];
 
     const { result } = renderHook(

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/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/index.ts

@@ -127,10 +127,10 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", cb);
+    const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
-      BackHandler.removeEventListener("hardwareBackPress", cb);
+      unsubscribe.remove();
     };
   }, [cb]);
 };

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/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"