@applicaster/zapp-react-native-utils 13.0.0-alpha.3013227535 → 13.0.0-alpha.3044917147

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -20,6 +20,7 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
+    skipLoading?: boolean;
   };
 };
 
@@ -55,7 +56,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {
@@ -93,7 +96,7 @@ export const useFeedLoader = ({
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
-      if (callableFeedUrl) {
+      if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
           loadPipesData(callableFeedUrl, {
             ...pipesOptions,
@@ -101,26 +104,33 @@ export const useFeedLoader = ({
             riverId,
           })
         );
-      } else {
+      } else if (!callableFeedUrl) {
         logger.info({
           message:
             "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
+      } else {
+        logger.info({
+          message:
+            "Loading skipped as per pipesOptions.skipLoading configuration.",
+          data: { url: callableFeedUrl },
+          jsOnly: true,
+        });
       }
     } else {
       logger.info({
         message:
-          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes
+  // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl) {
+    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -156,7 +166,6 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
-
     reloadData,
     loadNext,
   ]);

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

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

@@ -1,12 +1,10 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 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 + (useSafeAreaInsets().bottom ?? 0),
+    ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,
   }) as number;

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -106,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 
@@ -121,10 +125,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +160,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +258,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

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

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/navigation/useRoute.ts

@@ -7,12 +7,11 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
-
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
+import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
 
@@ -44,12 +43,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
+  const modalState = useModalStoreState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

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;
+};