@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
-
+import { StyleSheet, SafeAreaView as RNSafeAreaView } 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";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -23,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -44,14 +50,15 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View
+    <SafeAreaViewPlatform
+      edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-Container"
+      testID="BarView-safeAreaView"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaViewPlatform>
   );
 };
 

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

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Contexts/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,7 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
 import { useCallback, useMemo } from "react";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 
 type Dimensions = {
   width: Option<number>;
@@ -10,14 +11,17 @@ type Dimensions = {
 type DimensionsState = {
   dimensions: Record<string, Dimensions>;
   setCachedDimensions: (id: string, dimensions: Dimensions) => void;
+  ids: string[];
 };
 
 const dimensionsStore = create<DimensionsState>((set) => ({
   dimensions: {},
+  ids: [],
   setCachedDimensions: (id, dimensions) =>
     set(
       produce((draft) => {
         draft.dimensions[id] = dimensions;
+        draft.ids.push(id);
       })
     ),
 }));
@@ -28,7 +32,7 @@ const initialDimensions = () => ({
 });
 
 export const useCachedDimensions = (id: string) => {
-  const { dimensions, setCachedDimensions } = useStore(
+  const { dimensions, setCachedDimensions, ids } = useStore(
     dimensionsStore
   ) as DimensionsState;
 
@@ -40,11 +44,22 @@ export const useCachedDimensions = (id: string) => {
     setCachedDimensions(id, newDimensions);
   }, []);
 
+  const getLastCachedDimensions = useCallback(() => {
+    const previousId = last(ids);
+
+    if (!previousId) {
+      return undefined;
+    }
+
+    return dimensions[previousId];
+  }, [dimensions, ids]);
+
   return useMemo(
     () => ({
       getCachedDimensions,
       setCachedDimensions: handleSetCachedDimensions,
+      getLastCachedDimensions,
     }),
-    [getCachedDimensions, handleSetCachedDimensions]
+    [getCachedDimensions, handleSetCachedDimensions, getLastCachedDimensions]
   );
 };

package/Contexts/ModalNavigationContext/__tests__/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withModalNavigationContextProvider } from "../";
+
+describe("withModalNavigationContextProvider", () => {
+  it("does not re-render the wrapped component when props are unchanged", () => {
+    const Component = jest.fn(() => null);
+    const WrappedComponent = withModalNavigationContextProvider(Component);
+    const { rerender } = render(<WrappedComponent title="Modal" />);
+
+    rerender(<WrappedComponent title="Modal" />);
+
+    expect(Component).toHaveBeenCalledTimes(1);
+  });
+});

package/Contexts/ModalNavigationContext/index.tsx

@@ -6,11 +6,11 @@ export function useModalNavigationContext() {
 }
 
 export function withModalNavigationContextProvider(Component) {
-  return function WrappedWithModalNavigationContextProvider(props) {
+  return React.memo(function WrappedWithModalNavigationContextProvider(props) {
     return (
       <ModalNavigationContext.Provider value={true}>
         <Component {...props} />
       </ModalNavigationContext.Provider>
     );
-  };
+  });
 }

package/Decorators/ZappPipesDataConnector/__tests__/screenToolbox.test.ts

@@ -0,0 +1,347 @@
+import { renderHook } from "@testing-library/react-native";
+
+const mockRegister = jest.fn().mockResolvedValue(undefined);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+// Required after the toolbox API is in place: loading them can register the player toolbox.
+const {
+  modalStore,
+} = require("@applicaster/zapp-react-native-utils/modalState");
+
+const {
+  setXrayNavigator,
+} = require("@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator");
+
+const {
+  zappHookModalStore,
+} = require("@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext");
+
+const mockStore = {
+  rivers: { home: { name: "Home", type: "general_content" } },
+  plugins: [
+    { identifier: "quick-brick-epg-screen", name: "EPG" },
+    { identifier: "login-plugin", name: "Login" },
+  ],
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockStore[key] },
+}));
+
+const { useScreenToolboxRecord, getTopPathname } = require("../screenToolbox");
+
+const home = { id: "home", name: "Home", type: "general_content" };
+
+const stack = {
+  "/river/home": { screen: home },
+  "/river/epg": {
+    screen: { id: "epg", name: "Guide", type: "quick-brick-epg-screen" },
+  },
+  "/river/tabs": {
+    screen: { id: "tabs", name: "Tabs", type: "quick-brick-tabs" },
+    nested: { screen: { id: "t1", name: "Tab 1", type: "general_content" } },
+  },
+  "/river/home/hooks/login": {
+    screen: { identifier: "login-plugin", name: "Login" },
+    entry: { payload: { id: "e1", title: "One" } },
+  },
+};
+
+const navigate = (pathname: string, videoModalState = { visible: false }) =>
+  setXrayNavigator({
+    getPathname: () => pathname,
+    getStackForPathname: (route) =>
+      stack[route] ? { route, state: stack[route] } : undefined,
+    videoModalState,
+  } as unknown as QuickBrickAppNavigator);
+
+const mount = (
+  component,
+  index,
+  feed?,
+  parentId?,
+  pathname = "/river/home"
+) => {
+  const hook = renderHook(() =>
+    useScreenToolboxRecord(component, "home", index, parentId, pathname)
+  );
+
+  hook.result.current.feed = feed;
+
+  return hook;
+};
+
+const current = (args = {}) => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools.find((tool) => tool.name === "current").handler(args);
+};
+
+const presentHook = (overrides = {}) =>
+  zappHookModalStore.setState({
+    state: {
+      path: "/hooks/login",
+      screenData: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+    } as any,
+    isHooksExecutionInProgress: true,
+    isRunningInBackground: false,
+    ...overrides,
+  });
+
+describe("screenToolbox", () => {
+  // Registers the toolbox; the registration is kept for the whole module, as in the app.
+  beforeAll(() => mount({ id: "init" }, 0).unmount());
+
+  beforeEach(() => navigate("/river/home"));
+
+  afterEach(() => {
+    modalStore.getState().setModalState({ visible: false, screen: null });
+    zappHookModalStore.getState().resetState();
+    zappHookModalStore.getState().setIsHooksExecutionInProgress(false);
+  });
+
+  it("returns the top screen's mounted components in order, with feed and entries", () => {
+    const second = mount({ id: "c2", component_type: "grid" }, 1, {
+      url: "https://feed/2",
+      loading: true,
+    });
+
+    const first = mount({ id: "c1", component_type: "horizontal_list" }, 0, {
+      url: "https://feed/1",
+      loading: false,
+      data: {
+        entry: [
+          { id: "e1", title: "One" },
+          { id: "e2", title: "Two" },
+        ],
+      },
+    });
+
+    const third = mount({ id: "c3", component_type: "grid" }, 2, {
+      url: "https://feed/3",
+      error: new Error("404"),
+    });
+
+    expect(current({ limit: 1 })).toEqual({
+      pathname: "/river/home",
+      screen: {
+        kind: "river",
+        id: "home",
+        name: "Home",
+        type: "general_content",
+      },
+      entry: null,
+      rivers: [
+        {
+          id: "home",
+          name: "Home",
+          type: "general_content",
+          components: [
+            {
+              index: 0,
+              id: "c1",
+              type: "horizontal_list",
+              feed: { url: "https://feed/1", state: "loaded", count: 2 },
+              entries: [{ index: 0, id: "e1", title: "One" }],
+            },
+            {
+              index: 1,
+              id: "c2",
+              type: "grid",
+              feed: { url: "https://feed/2", state: "loading", count: 0 },
+              entries: [],
+            },
+            {
+              index: 2,
+              id: "c3",
+              type: "grid",
+              feed: {
+                url: "https://feed/3",
+                state: "error",
+                error: "404",
+                count: 0,
+              },
+              entries: [],
+            },
+          ],
+        },
+      ],
+      mounted: ["/river/home"],
+    });
+
+    [first, second, third].forEach((hook) => hook.unmount());
+
+    expect(current().rivers).toEqual([]);
+  });
+
+  it("nests a group's children under it", () => {
+    const group = mount({ id: "g", component_type: "group" }, 1);
+
+    const child = mount(
+      { id: "g0", component_type: "hero" },
+      0,
+      undefined,
+      "g"
+    );
+
+    const row = mount({ id: "r", component_type: "grid" }, 0);
+
+    expect(
+      current().rivers[0].components.map(({ id, children }) => ({
+        id,
+        children: children?.map((item) => item.id),
+      }))
+    ).toEqual([
+      { id: "r", children: undefined },
+      { id: "g", children: ["g0"] },
+    ]);
+
+    [group, child, row].forEach((hook) => hook.unmount());
+  });
+
+  it("reads another mounted screen by pathname", () => {
+    const other = mount({ id: "c" }, 0, undefined, undefined, "/river/epg");
+
+    expect(current({ pathname: "/river/epg" }).rivers[0].components).toEqual([
+      expect.objectContaining({ id: "c" }),
+    ]);
+
+    expect(current().mounted).toEqual(["/river/epg"]);
+
+    other.unmount();
+  });
+
+  it("names the plugin that renders a screen plugin", () => {
+    navigate("/river/epg");
+
+    expect(current().screen).toEqual({
+      kind: "plugin",
+      id: "epg",
+      name: "Guide",
+      type: "quick-brick-epg-screen",
+      plugin: { identifier: "quick-brick-epg-screen", name: "EPG" },
+    });
+  });
+
+  it("reports the nested tab screen", () => {
+    navigate("/river/tabs");
+
+    expect(current().nested).toEqual({
+      id: "t1",
+      name: "Tab 1",
+      type: "general_content",
+    });
+  });
+
+  it("unwraps the entry of a hook screen on the stack", () => {
+    navigate("/river/home/hooks/login");
+
+    expect(current()).toMatchObject({
+      screen: { kind: "hook", plugin: { identifier: "login-plugin" } },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("says when there is no screen yet", () => {
+    navigate("/");
+
+    expect(current().screen).toEqual({ kind: "none" });
+  });
+
+  it("reads a modal's screen from the modal store, its pathname as ModalProvider builds it", () => {
+    modalStore.getState().openModal({ item: home, props: { screenId: "m1" } });
+
+    expect(current()).toMatchObject({
+      pathname: "modal/m1",
+      screen: { kind: "river", id: "home" },
+    });
+  });
+
+  it("describes a modal hook by its plugin", () => {
+    modalStore.getState().openModal({
+      item: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+      props: { screenType: "hooks" },
+    } as any);
+
+    expect(current()).toMatchObject({
+      screen: {
+        kind: "hook",
+        plugin: { identifier: "login-plugin", name: "Login" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("describes a bottom sheet", () => {
+    modalStore.getState().openModal({
+      item: { modalBottomSheetContentProps: {} },
+    } as any);
+
+    expect(current().screen).toEqual({ kind: "bottomSheet" });
+  });
+
+  it("puts a modal over the video modal, and the video modal over the stack unless docked", () => {
+    const item = { id: "v1", title: "Video" };
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MAXIMIZED",
+      item,
+    } as any);
+
+    expect(current()).toMatchObject({
+      pathname: "video-modal/v1",
+      screen: { kind: "player" },
+      entry: { id: "v1", title: "Video" },
+    });
+
+    modalStore.getState().openModal({ item: home });
+
+    expect(getTopPathname()).toBe("modal/home");
+
+    modalStore.getState().setModalState({ visible: false, screen: null });
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MINIMIZED",
+      item,
+    } as any);
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("puts a presented hook screen on top, not one running in the background", () => {
+    presentHook();
+
+    expect(current()).toMatchObject({
+      pathname: "hooks-modal/Login",
+      screen: {
+        kind: "hook",
+        name: "Login",
+        plugin: { identifier: "login-plugin" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+
+    presentHook({ isRunningInBackground: true });
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("describes nothing for a modal pathname that is no longer presented", () => {
+    expect(current({ pathname: "modal/gone" }).screen).toEqual({
+      kind: "none",
+    });
+  });
+});