@applicaster/zapp-react-native-ui-components 13.0.0-alpha.8532113155 → 13.0.0-alpha.9103242840

package/Contexts/ScreenContext/index.tsx

@@ -99,9 +99,8 @@ export function ScreenContextProvider({
   const isNested = useNestedNavigationContext();
   const currentScreenScreenData = useCurrentScreenData();
 
-  const screenNavBarStateRef = useRef<null | ReturnType<typeof createStore>>(
-    null
-  );
+  const screenNavBarStateRef =
+    useRef<null | ReturnType<typeof createStore>>(null);
 
   const getScreenNavBarState = useCallback(() => {
     if (screenNavBarStateRef.current !== null) {

package/Decorators/ZappPipesDataConnector/__tests__/Hero.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { View } from "react-native";
 
 type Props = {
-  onLoadFinished: () => void;
+  onLoadFinished: () => void,
 };
 
 export function Hero(props: Props) {

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,12 +1,10 @@
 /// <reference types="@applicaster/applicaster-types" />
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React, { useEffect, useMemo } from "react";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-
 import * as R from "ramda";
 import { Platform } from "react-native";
 import Url from "url";
-import { ENDPOINT_TAGS } from "@applicaster/zapp-react-native-utils/types";
+
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -21,12 +19,6 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import {
-  findEndpointForURL,
-  HTTP_METHODS,
-} from "@applicaster/zapp-pipes-v2-client";
-import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
 
 type Props = {
   component: ZappUIComponent;
@@ -299,28 +291,6 @@ export function zappPipesDataConnector(
         if (addListener) {
           return addListener(reloadData);
         }
-      } else {
-        const pipesEndpoints = appStore.get("pipesEndpoints");
-
-        const endpointURL = findEndpointForURL(
-          dataSourceUrl,
-          pipesEndpoints,
-          HTTP_METHODS.GET
-        );
-
-        const endpoint = pipesEndpoints?.[endpointURL];
-
-        if (endpoint?.tags?.includes(ENDPOINT_TAGS.observe_storage)) {
-          const subscriptions: (() => void)[] = endpoint.context_obj.map(
-            (data: Record<string, any>) => {
-              const { namespace, key } = getNamespaceAndKey(data.key);
-
-              return localStorage.addListener({ key, namespace }, reloadData);
-            }
-          );
-
-          return () => subscriptions.forEach((listener) => listener());
-        }
       }
     }, [dataSourceUrl, reloadData]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.8532113155",
+  "version": "13.0.0-alpha.9103242840",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8532113155",
+    "@applicaster/applicaster-types": "13.0.0-alpha.9103242840",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.9103242840",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.9103242840",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.9103242840",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -1,126 +0,0 @@
-/** TODO: Remove this file when tvos FocusableGroup
- * behaviour is aligned to the web one
- * FocusableGroup should only send onFocus and onBlur events when
- * Focus enters and leaves the Focusables inside the branch
- */
-import * as React from "react";
-
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-import { isAppleTV } from "../../Helpers/Platform";
-import { useCellState } from "../MasterCell/utils";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
-
-type Props = {
-  item: ZappEntry;
-  CellRenderer: React.FunctionComponent<any>;
-  id: string;
-  groupId: string;
-  onFocus: Function;
-  index: number;
-  scrollTo: Function;
-  preferredFocus?: boolean;
-  skipFocusManagerRegistration?: boolean;
-  isFocusable?: boolean;
-  behavior: Behavior;
-  focused?: boolean;
-};
-
-export function CellWithFocusable(props: Props) {
-  const {
-    index,
-    item,
-    CellRenderer,
-    id,
-    groupId,
-    onFocus,
-    scrollTo = noop,
-    preferredFocus,
-    skipFocusManagerRegistration,
-    isFocusable,
-    behavior,
-    focused,
-  } = props;
-
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
-
-  const state = useCellState({
-    id: item.id,
-    behavior,
-    focused: isFocused || toBooleanWithDefaultFalse(focused),
-  });
-
-  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
-
-  // for horizontal scrolling
-  React.useEffect(() => {
-    if (focusedButtonId) {
-      scrollTo(index);
-    }
-  }, [focusedButtonId]);
-
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
-
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
-    }
-  };
-
-  return (
-    <CellRenderer
-      item={item}
-      groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
-      preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
-  );
-}

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,66 +0,0 @@
-import {
-  BorderContainerView,
-  getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
-} from "../index";
-import * as React from "react";
-import { render } from "@testing-library/react-native";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { View } from "react-native";
-
-jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
-  toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
-}));
-
-describe("BorderContainerView", () => {
-  describe("getBorderPadding", () => {
-    it("returns 0 for inside", () => {
-      expect(getBorderPadding("inside", 10)).toBe(0);
-    });
-
-    it("returns borderWidth / 2 for center", () => {
-      expect(getBorderPadding("center", 10)).toBe(5);
-    });
-
-    it("returns borderWidth for outside", () => {
-      expect(getBorderPadding("outside", 10)).toBe(10);
-    });
-
-    it("returns borderWidth for invalid position", () => {
-      // @ts-ignore
-      expect(getBorderPadding("other_value", 10)).toBe(10);
-    });
-  });
-
-  it("Border component renders null if no borderPosition", () => {
-    const style = { borderWidth: 5, borderRadius: 10, borderColor: "red" };
-
-    const padding = {
-      paddingTop: 2,
-      paddingRight: 3,
-      paddingBottom: 4,
-      paddingLeft: 5,
-    };
-
-    const borderPosition = null;
-
-    const { queryByTestId } = render(
-      <BorderContainerView
-        style={style}
-        testID="border-container"
-        borderPosition={borderPosition}
-        borderPaddingTop={toNumberWithDefaultZero(padding.paddingTop)}
-        borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
-        borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
-        borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
-      >
-        <View testID="child" />
-      </BorderContainerView>
-    );
-
-    const children = queryByTestId("border-container").children;
-
-    expect(children[1].props.testID).toBe("child");
-
-    expect(children[0].children.length).toBe(0);
-  });
-});

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/__tests__/index.test.ts

@@ -1,93 +0,0 @@
-import { ImageBorderContainer } from "../index";
-import { getImageContainerMarginStyles } from "@applicaster/zapp-react-native-utils/cellUtils";
-
-const mockValue = (key) => {
-  const values = {
-    cell_padding_top: 1,
-    cell_padding_left: 2,
-    cell_padding_right: 3,
-    cell_padding_bottom: 4,
-    image_border_size: 5,
-    image_focused_border_color: "red",
-    image_selected_border_color: "blue",
-    image_focused_selected_border_color: "green",
-    image_border_color: "black",
-    image_corner_radius: 10,
-    image_border_position: "outside",
-    image_border_padding_top: 6,
-    image_border_padding_right: 7,
-    image_border_padding_bottom: 8,
-    image_border_padding_left: 9,
-    image_margin_top: 11,
-    image_margin_left: 12,
-    image_margin_right: 13,
-    image_margin_bottom: 14,
-  };
-
-  return values[key] || 0;
-};
-
-describe("ImageBorderContainer", () => {
-  it("calculates style properties correctly", () => {
-    const marginStyles = getImageContainerMarginStyles({ value: mockValue });
-
-    expect(marginStyles.marginTop).toBe(11);
-    expect(marginStyles.marginLeft).toBe(12);
-    expect(marginStyles.marginRight).toBe(13);
-    expect(marginStyles.marginBottom).toBe(14);
-
-    const props = {
-      value: mockValue,
-      state: "default",
-      imageStyles: {},
-    };
-
-    const result = ImageBorderContainer(props);
-
-    expect(result.style.marginTop).toBe(12); // 11 + 1
-    expect(result.style.marginLeft).toBe(14); // 12 + 2
-    expect(result.style.marginRight).toBe(16); // 13 + 3
-    expect(result.style.marginBottom).toBe(18); // 14 + 4
-    expect(result.style.borderWidth).toBe(5);
-    expect(result.style.borderColor).toBe("black");
-    expect(result.style.borderRadius).toBe(10);
-    expect(result.additionalProps.borderPosition).toBe("outside");
-    expect(result.additionalProps.borderPaddingTop).toBe(6);
-    expect(result.additionalProps.borderPaddingRight).toBe(7);
-    expect(result.additionalProps.borderPaddingBottom).toBe(8);
-    expect(result.additionalProps.borderPaddingLeft).toBe(9);
-  });
-
-  it("handles focused state correctly", () => {
-    const props = {
-      value: mockValue,
-      state: "focused",
-      imageStyles: {},
-    };
-
-    const result = ImageBorderContainer(props);
-    expect(result.style.borderColor).toBe("red");
-  });
-
-  it("handles selected state correctly", () => {
-    const props = {
-      value: mockValue,
-      state: "selected",
-      imageStyles: {},
-    };
-
-    const result = ImageBorderContainer(props);
-    expect(result.style.borderColor).toBe("blue");
-  });
-
-  it("handles focused and selected state correctly", () => {
-    const props = {
-      value: mockValue,
-      state: "focused_selected",
-      imageStyles: {},
-    };
-
-    const result = ImageBorderContainer(props);
-    expect(result.style.borderColor).toBe("green");
-  });
-});

package/Components/Screen/hooks.ts

@@ -1,56 +0,0 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useGetScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-import {
-  useCurrentScreenData,
-  useDimensions,
-  useRoute,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useMemo, useEffect, useState } from "react";
-
-export const useWaitForValidOrientation = () => {
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
-    fullDimensions: true,
-    updateForInactiveScreens: false,
-  });
-
-  const currentScreenData = useCurrentScreenData();
-
-  const { screenData } = useRoute();
-
-  const [readyState, setReadyState] = useState(false);
-
-  const isTablet = deviceInfo?.isTablet;
-
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
-
-  const layoutData = useMemo(
-    () => ({ isTablet, isTabletPortrait, width: screenWidth, height }),
-    [isTablet, isTabletPortrait, screenWidth, height]
-  );
-
-  const targetScreenData =
-    currentScreenData || (screenData as any)?.targetScreen || screenData;
-
-  const orientation = useGetScreenOrientation(targetScreenData);
-
-  const isReadyForDisplay = isOrientationCompatible({
-    orientation,
-    layoutData,
-  });
-
-  useEffect(() => {
-    if (isReadyForDisplay && !readyState) {
-      setReadyState(true);
-    }
-  }, [readyState, orientation, layoutData]);
-
-  return readyState;
-};

package/Components/VideoModal/OpaqueLayer.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-import { Spinner } from "../Spinner";
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-export const OpaqueLayer = () => {
-  const theme = useTheme();
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // we assume that it's non-transparent and we could show spinner always until it will be covered by player
-          // this spinner hides all content under modal
-          backgroundColor: theme?.app_background_color,
-        },
-      ]}
-    >
-      <Spinner />
-    </View>
-  );
-};

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,89 +0,0 @@
-import { renderHook } from "@testing-library/react-hooks";
-import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-import { showDetails } from "../utils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-jest.mock("../utils", () => ({
-  showDetails: jest.fn(),
-}));
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useIsTablet: jest.fn(),
-}));
-
-describe("useDelayedPlayerDetails", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should return false initially", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-    });
-
-    const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
-    );
-
-    expect(result.current).toBe(false);
-  });
-
-  it("should return true if showDetails returns true", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(true);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
-    const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
-    );
-
-    expect(result.current).toBe(true);
-  });
-
-  it("should return false if showDetails returns false", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(false);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
-    const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
-    );
-
-    expect(result.current).toBe(false);
-  });
-
-  it("should unsubscribe on unmount", () => {
-    const unsubscribeMock = jest.fn();
-
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: unsubscribeMock }),
-    });
-
-    const { unmount } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
-    );
-
-    unmount();
-
-    expect(unsubscribeMock).toHaveBeenCalled();
-  });
-});

package/Components/VideoModal/hooks/index.ts

@@ -1,7 +0,0 @@
-export { useBackgroundColor } from "./useBackgroundColor";
-
-export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
-
-export { useInitialPlayerState } from "./useInitialPlayerState";
-
-export { useModalSize } from "./useModalSize";

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-
-import { showDetails } from "./utils";
-
-const TIMEOUT = 100; // ms
-
-type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
-
-/**
- * Custom hook to determine whether to show player details with a delay.
- *
- * @param {Object} params - The parameters object.
- * @param {boolean} params.isInline - Indicates if the player is inline.
- * @param {boolean} params.isDocked - Indicates if the player is docked.
- * @param {boolean} params.isPip - Indicates if the player is in PIP mode.
- * @returns {boolean} - Returns true if player details should be shown, otherwise false.
- */
-export const useDelayedPlayerDetails = ({
-  isInline,
-  isDocked,
-  isPip,
-}: Props): boolean => {
-  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
-
-  const isTablet = useIsTablet();
-
-  React.useEffect(() => {
-    const subscription = withTimeout$(TIMEOUT).subscribe({
-      next: () => {
-        setShouldShowDetails(() => {
-          return showDetails({
-            isMobile: !isTablet,
-            isInline,
-            isDocked,
-            isPip,
-          });
-        });
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [isDocked, isTablet, isInline, isPip]);
-
-  return shouldShowDetails;
-};