@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8419134002 → 14.0.0-alpha.8557119261

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {
@@ -141,8 +152,6 @@ const screenProps = {
 const { Screen } = require("..");
 
 describe("<Screen Component />", () => {
-  let wrapper;
-
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
@@ -150,26 +159,16 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    beforeEach(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      act(() => {
-        wrapper = create(<Screen {...screenProps} />);
-      });
-
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -0,0 +1,76 @@
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { once } from "ramda";
+
+const INITIAL_NUMBER_TO_LOAD = 3;
+
+// Infer the values of COMPONENT_LOADING_STATE as a type
+type ComponentLoadingState =
+  (typeof COMPONENT_LOADING_STATE)[keyof typeof COMPONENT_LOADING_STATE];
+
+export const COMPONENT_LOADING_STATE = {
+  UNKNOWN: "UNKNOWN",
+  LOADED_WITH_SUCCESS: "LOADED_WITH_SUCCESS",
+  LOADED_WITH_FAILURE: "LOADED_WITH_FAILURE",
+} as const;
+
+// Function to get the number of loaded components
+const getNumberOfLoaded = (states: ComponentLoadingState[]): number => {
+  return states.filter((value) => value !== COMPONENT_LOADING_STATE.UNKNOWN)
+    .length;
+};
+
+const getNumberOfComponentsWaitToLoadBeforePresent = (
+  componentsToRender: ZappUIComponent[]
+): number => {
+  // when Gallery is the first component, no need to wait the others
+  if (isFirstComponentGallery(componentsToRender)) {
+    return 1;
+  }
+
+  return Math.min(INITIAL_NUMBER_TO_LOAD, componentsToRender.length);
+};
+
+export class ScreenRevealManager {
+  public numberOfComponentsWaitToLoadBeforePresent: number;
+  private renderingState: Array<ComponentLoadingState>;
+  private callback: Callback;
+
+  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+    this.numberOfComponentsWaitToLoadBeforePresent =
+      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+
+    this.renderingState = makeListOf<ComponentLoadingState>(
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      this.numberOfComponentsWaitToLoadBeforePresent
+    );
+
+    this.callback = once(callback);
+  }
+
+  onLoadFinished = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  onLoadFailed = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  setIsReadyToShow = (): void => {
+    this.callback();
+  };
+}

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -0,0 +1,107 @@
+import {
+  ScreenRevealManager,
+  COMPONENT_LOADING_STATE,
+} from "../ScreenRevealManager";
+
+describe("ScreenRevealManager", () => {
+  const mockCallback = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with the correct number of components to wait for", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    expect(manager["numberOfComponentsWaitToLoadBeforePresent"]).toBe(3);
+
+    expect(manager["renderingState"]).toEqual([
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+    ]);
+  });
+
+  it("should call the callback when the required number of components are loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFinished(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when the required number of components fail to load", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFailed(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFailed(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call the callback if the required number of components are not loaded", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "gallery-qb" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/prop-types */
+
+import * as React from "react";
+import { render, screen, act } from "@testing-library/react-native";
+import { View } from "react-native";
+import {
+  withScreenRevealManager,
+  SHOWN,
+  TIMEOUT,
+} from "../withScreenRevealManager";
+
+// jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+const MockComponent = ({
+  initialNumberToLoad,
+  onLoadFinishedFromScreenRevealManager,
+  onLoadFailedFromScreenRevealManager,
+}) => {
+  React.useEffect(() => {
+    // Simulate loading components
+    for (let i = 0; i < initialNumberToLoad; i++) {
+      onLoadFinishedFromScreenRevealManager(i);
+    }
+  }, [initialNumberToLoad, onLoadFinishedFromScreenRevealManager]);
+
+  return (
+    <View
+      testID="mock-component"
+      initialNumberToLoad={initialNumberToLoad}
+      onLoadFinishedFromScreenRevealManager={
+        onLoadFinishedFromScreenRevealManager
+      }
+      onLoadFailedFromScreenRevealManager={onLoadFailedFromScreenRevealManager}
+    />
+  );
+};
+
+const WrappedComponent = withScreenRevealManager(MockComponent);
+
+describe.skip("withScreenRevealManager", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it("should render the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    expect(screen.getByTestId("mock-component")).toBeTruthy();
+  });
+
+  it("should animate opacity when ready to show", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const animatedView = screen.getByTestId("animated-component");
+
+    act(() => {
+      jest.advanceTimersByTime(TIMEOUT + 100);
+    });
+
+    expect(animatedView.props.style.opacity).toBe(SHOWN);
+  });
+
+  it("should pass initialNumberToLoad, onLoadFinishedFromScreenRevealManager, and onLoadFailedFromScreenRevealManager to the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const mockComponent = screen.getByTestId("mock-component");
+
+    expect(mockComponent.props.initialNumberToLoad).toBe(3);
+
+    expect(
+      mockComponent.props.onLoadFinishedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+
+    expect(
+      mockComponent.props.onLoadFailedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+  });
+});

package/Components/ScreenRevealManager/index.ts

@@ -0,0 +1 @@
+export { withScreenRevealManager } from "./withScreenRevealManager";

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Animated } from "react-native";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+import { ScreenRevealManager } from "./ScreenRevealManager";
+
+const flex = platformSelect({
+  tvos: 1,
+  android_tv: 1,
+  web: undefined,
+  samsung_tv: undefined,
+  lg_tv: undefined,
+  default: undefined,
+});
+
+export const TIMEOUT = 500; // 500 ms
+
+const HIDDEN = 0; // opacity = 0
+
+export const SHOWN = 1; // opacity = 1
+
+type Props = {
+  componentsToRender: ZappUIComponent[];
+};
+
+export const withScreenRevealManager = (Component) => {
+  return function WithScreenRevealManager(props: Props) {
+    const { componentsToRender } = props;
+
+    const [isReadyToShow, setIsReadyToShow] = React.useState(false);
+
+    const handleSetIsReadyToShow = React.useCallback(() => {
+      setIsReadyToShow(true);
+    }, []);
+
+    const managerRef = useRefWithInitialValue<ScreenRevealManager>(
+      () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
+    );
+
+    const opacityRef = useRefWithInitialValue<Animated.Value>(
+      () => new Animated.Value(HIDDEN)
+    );
+
+    React.useEffect(() => {
+      if (isReadyToShow) {
+        Animated.timing(opacityRef.current, {
+          toValue: SHOWN,
+          duration: TIMEOUT,
+          useNativeDriver: true,
+        }).start();
+      }
+    }, [isReadyToShow]);
+
+    if (isFirstComponentScreenPicker(componentsToRender)) {
+      // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
+      return <Component {...props} />;
+    }
+
+    return (
+      <Animated.View
+        style={{ opacity: opacityRef.current, flex }}
+        testID="animated-component"
+      >
+        <Component
+          {...props}
+          initialNumberToLoad={
+            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+          }
+          onLoadFinishedFromScreenRevealManager={
+            managerRef.current.onLoadFinished
+          }
+          onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
+        />
+      </Animated.View>
+    );
+  };
+};

package/Components/Tabs/TV/Tabs.android.tsx

@@ -7,7 +7,6 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import Tab from "./Tab";
 import { Gutter } from "../Gutter";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { ImageBackground, View } from "react-native";
 import { getStyles } from "./styles";
 import {
@@ -100,7 +99,6 @@ const TabsComponent = ({
         >
           <FocusableList
             horizontal
-            onScrollToIndexFailed={noop}
             onLayout={onLayoutChange}
             contentContainerStyle={tabsListContentContainer}
             ref={flatListRef}

package/Components/Tabs/Tabs.tsx

@@ -158,12 +158,11 @@ const TabsComponent = ({
 
   const renderItem = React.useCallback(
     ({ item, index, item: { id } }: RenderItemProps) => (
-      <>
+      <React.Fragment key={id}>
         <Tab
           ref={(ref) => {
             tabRefs.current[index] = ref;
           }}
-          key={id}
           {...{
             title: getTitle(item),
             id,
@@ -177,7 +176,7 @@ const TabsComponent = ({
         {display_mode === "fractional" &&
           index !== tabs?.length - 1 &&
           renderGutter()}
-      </>
+      </React.Fragment>
     ),
     [tabs, display_mode, configuration, onTabPress, getTitle, getSelectedItem]
   );

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,6 +3,23 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -29,6 +46,23 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={false}
   collapsable={false}
   focusable={true}

package/Components/Touchable/__tests__/touchable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { create, act } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { Touchable } from "..";
 
@@ -23,38 +23,31 @@ describe("<Touchable />", () => {
     });
 
     it("has accessible flag set to false", () => {
-      let wrapper;
+      const { toJSON, UNSAFE_getByType } = render(<Touchable {...props} />);
 
-      act(() => {
-        wrapper = create(<Touchable {...props} />);
-      });
-
-      const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
+      expect(toJSON()).toMatchSnapshot();
       expect(touchableWrapper.props).toHaveProperty("accessible", false);
     });
   });
 
   describe("when not running in automated tests environment", () => {
-    let wrapper;
-
-    act(() => {
-      wrapper = create(<Touchable {...props} />);
-    });
-
-    const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-
     beforeEach(props.onPress.mockClear);
 
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Touchable {...props} />);
+      expect(toJSON()).toMatchSnapshot();
     });
 
     it("has accessible flag set to true", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("accessible", true);
     });
 
     it("assigns testID and accessibilityLabel props correctly", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("testID", props.testID);
 
       expect(touchableWrapper.props).toHaveProperty(
@@ -64,6 +57,8 @@ describe("<Touchable />", () => {
     });
 
     it("calls the onPress event when it is pressed", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       touchableWrapper.props.onPress();
       expect(props.onPress).toHaveBeenCalledTimes(1);
     });

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -6,15 +6,21 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      {
-        "flex": 1,
-        "fontScale": 2,
-        "height": 1334,
-        "paddingBottom": 49,
-        "scale": 2,
-        "statusBarHeight": null,
-        "width": 750,
-      }
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 49,
+        },
+        {
+          "fontScale": 2,
+          "height": 1334,
+          "scale": 2,
+          "statusBarHeight": null,
+          "width": 750,
+        },
+      ]
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+  | Animated.AnimatedInterpolation<number>
+  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation =>
+): Animated.AnimatedInterpolation<number> =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],