@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5208030571 → 12.0.0-alpha.5230293331

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

@@ -1,14 +1,27 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
 
 const navigator_mock = {
   currentRoute: "/river/A1234",
   screenData: {},
+  activeRiver: {
+    navigations: {},
+    id: "A1234",
+    home: false,
+  },
 };
 
+jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
+  ...jest.requireActual<any>(
+    "@applicaster/zapp-react-native-utils/navigationUtils"
+  ),
+  findMenuPlugin: () => ({}),
+}));
+
 jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
@@ -17,13 +30,13 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: () => navigator_mock,
 }));
 
-jest.mock("../../../River/useScreenConfiguration.ts", () => ({
+jest.mock("../../../River/useScreenConfiguration", () => ({
   useScreenConfiguration: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({})),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData"
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({}),
@@ -44,42 +57,39 @@ describe("ScreenContainer", () => {
   const setScreenLayout = () => {};
 
   const wrapper = ({ children }) => (
-    <ScreenLayoutContext.Provider value={{ ...screenLayout, setScreenLayout }}>
-      {children}
-    </ScreenLayoutContext.Provider>
+    <WrappedWithProviders>
+      <ScreenLayoutContext.Provider
+        value={{ ...screenLayout, setScreenLayout }}
+      >
+        <ScreenContainer NavBar={View}>{children}</ScreenContainer>
+      </ScreenLayoutContext.Provider>
+    </WrappedWithProviders>
   );
 
   const TestComp = () => <View testID="test-component" />;
 
   it("renders", () => {
-    const { toJSON } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+    const { toJSON } = render(<TestComp />, { wrapper });
 
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders passed component", () => {
-    const { getByTestId } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+  it("renders passed component", async () => {
+    const { getByTestId } = render(<TestComp />, { wrapper });
+
+    await waitFor(() => {
+      return expect(getByTestId("screen-container")).toBeDefined();
+    });
 
     expect(getByTestId("test-component")).toBeDefined();
   });
 
-  it("sets margins provided by the theme", () => {
-    const { getByTestId } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+  it("sets margins provided by the theme", async () => {
+    const { getByTestId } = render(<TestComp />, { wrapper });
+
+    await waitFor(() => {
+      return expect(getByTestId("screen-container")).toBeDefined();
+    });
 
     const screen = getByTestId("screen-container");
     expect(screen.props.style).toMatchSnapshot();

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -1,28 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScreenContainer renders 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
         "flex": 1,
-        "height": "100%",
-        "width": "100%",
-      },
-      Object {
-        "backgroundColor": "transparent",
-        "marginBottom": 10,
-        "paddingBottom": 0,
-        "paddingTop": 0,
       },
+      undefined,
     ]
   }
-  testID="screen-container"
 >
   <View
-    testID="test-component"
-  />
-</View>
+    style={
+      Array [
+        Object {
+          "position": "absolute",
+          "top": 0,
+          "width": 1920,
+          "zIndex": 10,
+        },
+        Object {
+          "maxHeight": 10,
+        },
+      ]
+    }
+    testID="nav-bar-container"
+  >
+    <View
+      isVisible={true}
+      menuPlugin={Object {}}
+      navigationProps={null}
+    />
+  </View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ScreenContainer sets margins provided by the theme 1`] = `

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

@@ -2,58 +2,18 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  style={
-    Object {
-      "flex": 1,
-      "height": 1080,
-      "width": 1920,
-    }
-  }
-  testID="layout-container"
+  excludeFromFocusSearching={true}
+  id="/river/A1234"
+  preferredFocus={true}
 >
   <View
-    backgroundImageUrl="http://applicaster.com"
-    testID="background-component"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "position": "absolute",
-            "top": 0,
-            "width": 1920,
-            "zIndex": 10,
-          },
-          Object {
-            "maxHeight": 10,
-          },
-        ]
+    Components={
+      Object {
+        "Background": [Function],
+        "NavBar": [Function],
       }
-      testID="nav-bar-container"
-    >
-      <View
-        isVisible={true}
-        menuPlugin={
-          Object {
-            "module": [Function],
-            "name": "resolved-menu-plug",
-            "type": "menu",
-          }
-        }
-        navigationProps={
-          Object {
-            "assets": undefined,
-            "home": undefined,
-            "nav_items": undefined,
-            "rules": undefined,
-            "selected": undefined,
-            "styles": undefined,
-            "title": "",
-          }
-        }
-        testID="nav-bar-component"
-      />
-    </View>
-  </View>
+    }
+    route="/river/A1234"
+  />
 </View>
 `;

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

@@ -1,79 +1,49 @@
 import * as React from "react";
-import * as R from "ramda";
+import { omit } from "ramda";
 import { View } from "react-native";
 import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
-import { createStore } from "redux";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
+import configureStore from "redux-mock-store";
 
-import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+const withoutChildren = omit(["children"]);
 
-jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
-  useRiverInitialState: () => ({}),
+jest.mock("../../../Screen/TV/index.web", () => ({
+  Screen: View,
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
+const Layout = require("../index.web").default;
 
-const Layout = require("..").default;
-
-const ResolvedMenuPlug = () => <View testID="resolved-menu-plug" />;
-
-const plugins = [
-  {
-    module: ResolvedMenuPlug,
-    type: "menu",
-    name: "resolved-menu-plug",
-  },
-];
-
-const bgImage = "http://applicaster.com";
-const isNavBarVisible = true;
-
-const store = createStore(() => ({
+const mockStore = configureStore()({
   appState: { appReady: true },
-  remoteConfigurations: { sdkAssets: { bgImage } },
-  plugins,
-}));
+});
 
 describe("Layout TV", () => {
-  const themes = {
-    myTheme: { screen_margin_top: 10, screen_margin_bottom: 10 },
-  };
-
-  const selectedThemeId = "myTheme";
-
   const navigator = {
-    activeRiver: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    canGoBack: () => false,
     currentRoute: "/river/A1234",
-    screenData: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    isNavBarVisible: isNavBarVisible,
+    canGoBack: jest.fn(),
+    mainStack: [
+      {
+        route: "/river/A1234",
+        state: { screen: {} },
+      },
+    ],
   };
 
   const wrapper = ({ children }) => (
-    <Provider store={store}>
+    <Provider store={mockStore}>
       <NavigationContext.Provider value={navigator}>
-        <ThemeContext.Provider value={{ themes, selectedThemeId }}>
-          {children}
-        </ThemeContext.Provider>
+        {children}
       </NavigationContext.Provider>
     </Provider>
   );
 
-  const Screen = (props) => (
-    <View testID="screen-component" {...R.omit(["children"])(props)} />
-  );
-
   const NavBar = (props) => (
-    <View testID="nav-bar-component" {...R.omit(["children"])(props)} />
+    <View testID="nav-bar-component" {...withoutChildren(props)} />
   );
 
   const Background = (props: Record<any, any>) => (
-    <View testID="background-component" {...R.omit(["children"])(props)}>
+    <View testID="background-component" {...withoutChildren(props)}>
       {props.children}
     </View>
   );
@@ -84,33 +54,8 @@ describe("Layout TV", () => {
   };
 
   it("renders", () => {
-    const { toJSON } = render(
-      <Layout Components={Components}>
-        <Screen />
-      </Layout>,
-      { wrapper }
-    );
+    const { toJSON } = render(<Layout Components={Components} />, { wrapper });
 
     expect(toJSON()).toMatchSnapshot();
   });
-
-  describe("props passed to background component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            Background: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const bgComponent = getByTestId("background-component");
-      expect(bgComponent.props.backgroundImageUrl).toBe(bgImage);
-      expect(bgComponent.props.testProp).toBe(true);
-    });
-  });
 });

package/Components/Layout/TV/index.tsx

@@ -1,45 +1,17 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import {
-  getNavigationProps,
-  getPathAttributes,
-  resolveNavigationPlugin,
-  routeIsPlayerScreen,
-} from "@applicaster/zapp-react-native-utils/navigationUtils";
 
 import { getBackgroundImageUrl } from "../utils";
 import { LayoutContainer } from "./LayoutContainer";
-import { NavBarContainer } from "./NavBarContainer";
 import { ScreenContainer } from "./ScreenContainer";
-import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-
-import { FocusableGroup } from "../../FocusableGroup";
-import { Screen } from "../../Screen/TV/index.web";
-
-export const ScreenDataContext = React.createContext(null);
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    width: 1920,
-    height: 1080,
-    backgroundColor: "black",
-    // opacity: 0.5,
-
-    borderWidth: 4,
-    borderColor: "magenta",
-  },
-});
+import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -47,90 +19,22 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  NavBar?: Record<string, any>;
   Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  componentsExtraProps?: ComponentsExtraProps;
-};
-
-const StackNavigator = ({ Components }: Props) => {
-  // @ts-ignore
-  const { mainStack, currentRoute } = useNavigation();
-
-  // console.log("debug_2", "DEBUG", { mainStack });
-
-  const renderScreen = ({ route, action, key, state }, index) => {
-    const pathAttributes = getPathAttributes({ pathname: route });
-
-    if (R.isEmpty(pathAttributes)) {
-      return null;
-    }
-
-    // console.log("debug_2", "StackNavigator - renderScreen", {
-    //   index,
-    //   route,
-    //   state,
-    //   key,
-    //   action,
-    // });
-
-    const id = `${route}`;
-
-    return (
-      <FocusableGroup
-        id={id}
-        preferredFocus={route === currentRoute}
-        excludeFromFocusSearching
-        key={id}
-      >
-        <View style={styles.container}>
-          <ScreenDataContext.Provider value={state}>
-            <PathnameContext.Provider value={route}>
-              <Screen route={route} Components={Components} />
-            </PathnameContext.Provider>
-          </ScreenDataContext.Provider>
-        </View>
-      </FocusableGroup>
-    );
-  };
-
-  return mainStack.map(renderScreen);
-};
-
-const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
-  return (
-    <>
-      <ScreenLayoutContextProvider>
-        <StackNavigator
-          componentsExtraProps={componentsExtraProps}
-          Components={Components}
-        />
-      </ScreenLayoutContextProvider>
-    </>
-  );
+  ComponentsExtraProps?: ComponentsExtraProps;
+  children: React.ReactNode;
 };
 
-// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
-  const { title, visible } = useNavbarState();
-  const { activeRiver, currentRoute } = navigator;
-
-  const {
-    appState: { appReady = false } = {},
-    remoteConfigurations,
-    plugins = [],
-  } = usePickFromState(["appState", "remoteConfigurations", "plugins"]);
 
-  const navigationProps = getNavigationProps({
-    navigator,
-    title,
-    category: "menu",
-  });
+  const { appState: { appReady = false } = {}, remoteConfigurations } =
+    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
 
   const backgroundColor = React.useMemo(() => theme.app_background_color, []);
 
@@ -139,90 +43,34 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     [remoteConfigurations]
   );
 
-  const menuPlugin = React.useMemo(
-    () =>
-      resolveNavigationPlugin({
-        category: "menu",
-        navigations: activeRiver?.navigations,
-        plugins,
-      }) as QuickBrickPlugin,
-    []
-  );
-
-  const NavBar = React.useMemo(
-    () => Components.NavBar || (menuPlugin.module as React.ComponentType<any>),
-    []
-  );
-
-  const [navBarReady, setNavBarReady] = React.useState(false);
-
-  const navBarContainer = (
-    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
-      <NavBar
-        ref={ComponentsExtraProps?.NavBar?.ref}
-        isVisible={visible && !routeIsPlayerScreen(currentRoute)}
-        menuPlugin={menuPlugin}
-        navigationProps={navigationProps}
-        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-      />
-    </NavBarContainer>
-  );
-
-  const isTVOS = isApplePlatform();
-
   if (!appReady) {
     return null;
   }
 
   return (
-    // @ts-ignore
-    <TransitionerTV
-      componentsExtraProps={ComponentsExtraProps}
-      Components={Components}
-    >
-      <LayoutContainer>
-        <ScreenLayoutContextProvider>
-          <Components.Background
-            backgroundColor={backgroundColor}
-            backgroundImageUrl={backgroundImageUrl}
-            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-          >
-            {!isTVOS ? navBarContainer : null}
-            {navBarReady ? (
-              /**
-             Need to re-mount this component on each navigation event
-             It's a hack to work around the fact that we don't support
-             correct screen rendering in our navigator (shared currentRoute state)
-             **/
-              <PathnameContext.Provider value={navigator.currentRoute}>
-                <ScreenContainer>{children}</ScreenContainer>
-              </PathnameContext.Provider>
-            ) : null}
-            {/** Render NavBarContainer over ScreenContainer to let tvOS native
-          focus manager works correctly to focus nav bar items first **/}
-            {isTVOS ? navBarContainer : null}
-            <TransitionOverlay />
-          </Components.Background>
-        </ScreenLayoutContextProvider>
-      </LayoutContainer>
-    </TransitionerTV>
+    <LayoutContainer>
+      <ScreenLayoutContextProvider>
+        <Components.Background
+          backgroundColor={backgroundColor}
+          backgroundImageUrl={backgroundImageUrl}
+          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+        >
+          <ScreenDataContext.Provider value={navigator.data}>
+            <PathnameContext.Provider value={navigator.currentRoute}>
+              <ScreenContextProvider pathname={navigator.currentRoute}>
+                <ScreenContainer
+                  ComponentsExtraProps={ComponentsExtraProps}
+                  NavBar={Components.NavBar}
+                >
+                  {children}
+                </ScreenContainer>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 
 export default Layout;
-
-/// Transitioner:
-/*
-Component: Transitioner
-Responsibilities:
-- Transitione between screens.
-Tehere is no transition on Tv so no need for transitioner.
-
-Component: StackNavigator
-Responsibilities:
-- Render the screens in the stack.
-- Render the NavBar? I guess navbar should be part of the screen
-- Render the screen.
-
-Q
- */

package/Components/Layout/TV/index.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { pathOr } from "ramda";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { StackNavigator } from "../../Navigator";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+const Layout = ({ Components }: Props) => {
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
+
+  if (!appReady) {
+    return null;
+  }
+
+  return (
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
+  );
+};
+
+export default Layout;

package/Components/Layout/index.tsx

@@ -1,20 +1,24 @@
 import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import {
+  isTV,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import Mobile from "./Mobile";
-import TV from "./TV";
 
-export default function Layout(props) {
-  const { currentRoute: pathname } = useNavigation();
+import TVWeb from "./TV/index.web";
+import TVDefault from "./TV/index";
+
+const TV = platformSelect({
+  samsung_tv: TVWeb,
+  lg_tv: TVWeb,
+  web: TVWeb,
+  default: TVDefault,
+});
 
+export default function Layout(props) {
   if (isTV()) {
-    return (
-      <ScreenContextProvider pathname={pathname}>
-        <TV {...props} />
-      </ScreenContextProvider>
-    );
+    return <TV {...props} />;
   } else {
     return <Mobile {...props} />;
   }