@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.2239032089

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -1,19 +1,18 @@
 import React, { Dispatch, useEffect, useState } from "react";
-import {
-  act,
-  create,
-  ReactTestRenderer,
-  ReactTestRendererJSON,
-} from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
+import { View } from "react-native";
 import { FreezeWithCallback } from "../index";
 
-const SimpleContent = () => <div />;
+const SimpleContent = () => <View testID="simple-content" />;
 
 interface InnerProps {
   value: number;
 }
+
 // eslint-disable-next-line unused-imports/no-unused-vars
-const Inner = ({ value }: InnerProps) => <div />;
+const Inner = ({ value }: InnerProps) => (
+  <View testID="inner-component" data-value={value} />
+);
 
 interface TestSubscriber {
   renderCount: number;
@@ -51,24 +50,20 @@ const Container = ({ freeze, children }: ContainerProps) => (
 );
 
 function setupTest(initialFreeze: boolean = false) {
-  let testRenderer: ReactTestRenderer | undefined;
   const [Subscriber, subscriberState] = createSubscriberComponent();
 
-  act(() => {
-    testRenderer = create(
-      <Container freeze={initialFreeze}>
-        <Subscriber />
-      </Container>
-    );
-  });
+  const renderResult = render(
+    <Container freeze={initialFreeze}>
+      <Subscriber />
+    </Container>
+  );
 
   return {
-    testRenderer,
-    testInstance: testRenderer?.root,
+    renderResult,
     subscriberState,
     updateFreeze: (freeze: boolean) => {
       act(() =>
-        testRenderer?.update(
+        renderResult.rerender(
           <Container freeze={freeze}>
             <Subscriber />
           </Container>
@@ -80,91 +75,120 @@ function setupTest(initialFreeze: boolean = false) {
 
 describe("FreezeWithCallback", () => {
   test("Renders stuff not frozen", () => {
-    const testRenderer = create(
+    const { getByTestId } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
   });
 
   test("Does not render stuff when frozen", () => {
-    const testRenderer = create(
+    const { queryByTestId } = render(
       <Container freeze>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+    expect(queryByTestId("simple-content")).toBe(null);
   });
 
   test("Stuff is gone after freeze", () => {
-    const testRenderer = create(
+    const { toJSON, getByTestId, rerender } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
 
     act(() =>
-      testRenderer.update(
+      rerender(
         <Container freeze>
           <SimpleContent />
         </Container>
       )
     );
 
-    expect(testRenderer.toJSON()).toBe(null);
+    expect(toJSON()).toBe(null);
   });
 
   test("Updates work when not frozen", () => {
-    const { testInstance, subscriberState } = setupTest();
+    const { renderResult, subscriberState } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 
   test("Updates does not propagate when frozen", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
+
     expect(subscriberState.renderCount).toBe(1);
   });
 
   test("State persists after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze, testRenderer } =
-      setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
 
     updateFreeze(true);
-    expect(testRenderer?.toJSON()).toBe(null);
+    expect(renderResult.toJSON()).toBe(null);
 
     updateFreeze(false);
-    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(renderResult.getByTestId("inner-component")).toBeTruthy();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
   });
 
   test("Update propagate after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
 
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
     act(() => subscriberState.subscription(2));
     act(() => subscriberState.subscription(3));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
     updateFreeze(false);
-    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(3);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 });

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -8,13 +8,10 @@ import {
   useCurationAPI,
 } from "../useCurationAPI";
 import * as redux from "react-redux";
-import * as layoutPresets from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import * as pipesFeeds from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
@@ -42,19 +39,20 @@ const mainStackNavigator = {
   },
 };
 
-const store = configureStore()({});
-
-const wrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
-    >
-      <PathnameContext.Provider value={homeStack.route}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
+const getWrapper =
+  (store) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => (
+    <WrappedWithProviders store={store}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
+      >
+        <PathnameContext.Provider value={homeStack.route}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </WrappedWithProviders>
+  );
 
 describe("getTransformedPreset should return the passed components if smartComponents is empty", () => {
   describe("getTransformedPreset function", () => {
@@ -312,19 +310,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
         { id: "02", component_type: "not_smart_another" },
       ];
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue({});
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue({});
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: {},
+        }),
       });
 
       // if there are no smart components, it should return the original array
@@ -366,18 +355,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         "http://curation": { loading: false, data: { entry: mockPresetEntry } },
       };
 
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -437,19 +423,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         },
       };
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -495,14 +477,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
       "http://curation": { loading: false, data: { entry: mockPresetEntry } },
     };
 
-    // mock the hooks
-    const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-    mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-    const mockUseLayoutPresets = jest.spyOn(layoutPresets, "useLayoutPresets");
-    mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
     const { result } = renderHook(() => useCurationAPI(mockComponents), {
-      wrapper,
+      wrapper: getWrapper({
+        zappPipes: mockFeeds,
+        presetsMapping: {
+          presets_mappings: {
+            ...mockLayoutPresets,
+          },
+        },
+      }),
     });
 
     expect(result.current).toEqual(mockTransformedComponents);

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,17 +1,16 @@
 import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import {
   useLayoutPresets,
-  useZappPipesFeeds,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+
 import {
   ZappPipesEntryContext,
   ZappPipesScreenContext,
@@ -24,9 +23,13 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 import { produce } from "immer";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 // types reference
 
-declare type CurationEntry = { preset_name: string; feed_url: string };
+declare interface CurationEntry {
+  preset_name: string;
+  feed_url: string;
+}
 
 type Feeds = Record<string, ZappPipesData>;
 
@@ -122,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -159,19 +160,21 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(loadPipesData(url, { clearCache: false }));
+        loadPipesDataDispatcher(url, { clearCache: false });
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
         });
       }
     });
-  }, [urls]);
+  }, [urls, loadPipesDataDispatcher]);
 
-  const feeds = useZappPipesFeeds(urls);
+  const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();
 
   const enrichedComponents = useMemo(() => {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -7,12 +7,15 @@ import {
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
+  useIsTablet as isTablet,
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { ViewStyle } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   item: ZappEntry;
@@ -83,6 +86,13 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
+});
+
 export function HandlePlayable({
   item,
   isModal,
@@ -135,19 +145,25 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
 
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () => ({
-      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal
-        ? modalSize.height
-        : mode === "PIP"
-          ? "100%"
-          : screenHeight,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,17 +6,20 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { PresentationType } from "../ScreenResolver";
 
 type Props = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   screenData: HookPluginProps;
+  callback: hookCallback;
 };
 
 export const HookRenderer = (props: Props) => {
   const {
     focused,
-    screenData: { callback, payload, hookPlugin },
+    screenData: { payload, hookPlugin },
+    callback,
   } = props;
 
   const { setVisible: showNavBar } = useSetNavbarState();
@@ -60,6 +63,7 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
+        presentationType: PresentationType.Hook,
       }}
     />
   );

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -7,7 +7,6 @@ import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/
 import configureStore from "redux-mock-store";
 import Layout from "../index.web";
 
-// mock useTheme to provide app_background_color
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({
     app_background_color: "#000000",

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -23,6 +23,7 @@ type Props = {
   style: ViewStyle;
   testID?: string;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   cellUUID?: string;
   extraProps?: Record<string, any>;
 };
@@ -48,7 +49,9 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
   return asset.src || fallbackAsset;
 }
 
-export function ActionButton(props: Props) {
+export const ActionButton = React.memo(function ActionButtonComponent(
+  props: Props
+) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
@@ -98,6 +101,7 @@ export function ActionButton(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >
@@ -118,4 +122,4 @@ export function ActionButton(props: Props) {
       )}
     </TouchableOpacity>
   );
-}
+});

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { TouchableOpacity } from "react-native";
 // import { SvgUri } from "react-native-svg";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -2,10 +2,8 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -45,11 +43,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
-  const accessibilityManager = useAccessibilityManager({});
-
-  const { ttsLabel = "" } =
-    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
-
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -67,39 +60,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
-
-    if (ttsLabel) {
-      accessibilityManager.readText({
-        text: ttsLabel,
-      });
-    }
   };
 
   const handleBlur = (_focusable, _direction) => {

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -20,7 +20,7 @@ const withAppliedDimensions = (style: Style) => (source: Source) => ({
 });
 
 export const withDimensionsHOC = (Component) => {
-  return function WithDimensions(props: { style: any }) {
+  return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
     const useDownScalingImages = toBooleanWithDefaultFalse(

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -13,7 +13,7 @@ export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
 
   const Component =
-    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
+    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };