@applicaster/zapp-react-native-ui-components 12.0.0-rc.98 → 13.0.0-alpha.2322412833

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -27,8 +27,8 @@ exports[`PlayerWrapper renders inline 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -72,12 +72,35 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -110,8 +133,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": undefined,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -155,12 +178,35 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -254,12 +300,35 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -292,8 +361,8 @@ exports[`PlayerWrapper renders properly 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 750,
+          "width": 1334,
         },
         Object {},
       ]
@@ -336,13 +405,6 @@ exports[`PlayerWrapper renders properly 1`] = `
         }
         testID="test-player-container"
       />
-      <View
-        style={
-          Object {
-            "flex": 1,
-          }
-        }
-      />
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,11 +45,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View style={[style.view, isRTL ? style.rtlStyle : {}]}>
+    <SafeAreaView
+      style={[style.view, isRTL ? style.rtlStyle : {}]}
+      testID="BarView-safeAreaView"
+    >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/Buttons/BackButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type FloatingButtonProps = {
+type FloatingButtonProps = Testable & {
   onPress: () => void;
   screenStyles: any;
 };
 
-const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
+const BackButton = ({
+  onPress,
+  screenStyles,
+  testID = "backButton",
+}: FloatingButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.back_button_image}

package/Components/ZappFrameworkComponents/BarView/Buttons/CloseButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type CloseButtonProps = {
+type CloseButtonProps = Testable & {
   onPress: () => void;
   screenStyles?: any;
 };
 
-const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
+const CloseButton = ({
+  onPress,
+  screenStyles,
+  testID = "closeButton",
+}: CloseButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.close_button_image}

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { fireEvent } from "@testing-library/react-native";
+
+const mockUseIsRTL = jest.fn(() => true);
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const BarView = require("../BarView").default;
+
+describe("BarView", () => {
+  const screenStyles = {
+    title_font_color: "#000",
+    title_font_android: "Roboto",
+    title_font_ios: "San Francisco",
+    title_font_size: "16",
+    background_color: "#fff",
+  };
+
+  const barState = {
+    backHandler: jest.fn(),
+    closeHandler: jest.fn(),
+    title: "Test Title",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByText } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("applies RTL styles when isRTL is true", () => {
+    mockUseIsRTL.mockReturnValue(true);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("does not apply RTL styles when isRTL is false", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("calls closeHandler when CloseButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("closeButton-actionButton-touchable"));
+    expect(barState.closeHandler).toHaveBeenCalled();
+  });
+
+  it("calls backHandler when BackButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("backButton-actionButton-touchable"));
+    expect(barState.backHandler).toHaveBeenCalled();
+  });
+});

package/Components/ZappFrameworkComponents/Buttons/ActionButton.tsx

@@ -28,7 +28,7 @@ styles: {
 }
 */
 
-type ActionButtonProps = {
+type ActionButtonProps = Testable & {
   onPress: () => void;
   buttonStyles: any;
   imageUrl: string;
@@ -46,11 +46,16 @@ const ActionButton = ({
   buttonStyles,
   imageUrl,
   imageStyle = closeButtonStyle,
+  testID,
 }: ActionButtonProps) => {
   return (
-    <View style={buttonStyles}>
-      <TouchableOpacity onPress={onPress}>
-        <Image source={{ uri: imageUrl }} style={imageStyle} />
+    <View style={buttonStyles} testID={testID}>
+      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
+        <Image
+          source={{ uri: imageUrl }}
+          style={imageStyle}
+          testID={`${testID}-image`}
+        />
       </TouchableOpacity>
     </View>
   );

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,5 +1,6 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
+import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -31,16 +32,19 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = () => {
+  const getCachedDimensions = useCallback(() => {
     return dimensions[id] || initialDimensions();
-  };
+  }, [dimensions?.[id], id]);
 
-  const handleSetCachedDimensions = (newDimensions) => {
+  const handleSetCachedDimensions = useCallback((newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  };
-
-  return {
-    getCachedDimensions,
-    setCachedDimensions: handleSetCachedDimensions,
-  };
+  }, []);
+
+  return useMemo(
+    () => ({
+      getCachedDimensions,
+      setCachedDimensions: handleSetCachedDimensions,
+    }),
+    [getCachedDimensions, handleSetCachedDimensions]
+  );
 };

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/Contexts/ScreenContext/index.tsx

@@ -177,7 +177,12 @@ export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
     return (
       <ScreenContext.Consumer>
-        {(value) => <Component {...props} screenContext={value} />}
+        {useCallback(
+          (value) => (
+            <Component {...props} screenContext={value} />
+          ),
+          [Component, props]
+        )}
       </ScreenContext.Consumer>
     );
   };

package/Decorators/Analytics/{index.js → index.tsx}

@@ -5,18 +5,18 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
-    id: string,
-    rules: { item_limit: number, component_cells_selectable: boolean },
-    component_type: string,
+    id: string;
+    rules: { item_limit: number; component_cells_selectable: boolean };
+    component_type: string;
     styles: {
-      cell_style: string,
-      header: { visible: boolean },
-      component_cells_selectable: boolean,
-    },
-  },
-  zappPipesData: { url: string, data: { title: string } },
-  selected: boolean,
-  assets: { menu_button: string },
+      cell_style: string;
+      header: { visible: boolean };
+      component_cells_selectable: boolean;
+    };
+  };
+  zappPipesData: { url: string; data: { title: string } };
+  selected: boolean;
+  assets: { menu_button: string };
 };
 
 function withAnalytics(Component) {

package/README.md

@@ -78,17 +78,6 @@ export default MyAwesomeComponent;
 export { MyAwesomeComponent } from "./MyAwesomeComponent";
 ```
 
-We provide flow types for component props - please use it to make sure your component will be compliant
-
-```javascript
-import * as React from "react";
-import type { ZappComponentProps } from "../../flow-types"; // in the root of the project
-
-export class MyComponent extends React.Component<ZappComponentProps> {
-  /* ... */
-}
-```
-
 ## Connecting my component to Zapp Pipes
 
 Zapp App components rely on [Zapp-Pipes](https://github.com/applicaster/zapp-pipes) to load data.
@@ -100,10 +89,9 @@ In order to connect your component to ZappPipes, you simply need to use the `Zap
 import * as React from "react";
 import { View, Text } from "react-native";
 import { zappPipesDataConnector } from "../ZappPipesDataConnector";
-import type { ZappComponentProps } from "../../flow-types";
 
 @zappPipesDataConnector
-export class MyComponent extends React.Component<ZappComponentProps> {
+export class MyComponent extends React.Component {
   renderComponent = (data) => {
     return (
       <View>

package/const.ts

@@ -1,3 +1,5 @@
+import { ViewStyle } from "react-native";
+
 export const tvPluginsWithCellRenderer = [
   "group-qb",
   "gallery-qb",
@@ -5,3 +7,7 @@ export const tvPluginsWithCellRenderer = [
   "hero-qb",
   "list-qb",
 ];
+
+// Can't be used in StyleSheet.create, need to be inline/defined as a constant
+// https://github.com/necolas/react-native-web/issues/1427
+export const flatListOverflowStyle: ViewStyle = { overflow: "visible" };

package/index.js

@@ -1,3 +1,6 @@
 import * as QuickBrickComponents from "./Components";
+import { flatListOverflowStyle } from "./const";
+
+export { flatListOverflowStyle };
 
 export default QuickBrickComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.98",
+  "version": "13.0.0-alpha.2322412833",
   "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": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.98",
+    "@applicaster/applicaster-types": "13.0.0-alpha.2322412833",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.2322412833",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.2322412833",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2322412833",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};