@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.140

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,11 +111,7 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const { plugins = [] } = usePickFromState([
-    "appState",
-    "remoteConfigurations",
-    "plugins",
-  ]);
+  const plugins = usePlugins();
 
   const navigationProps = getNavigationProps({
     navigator,

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

@@ -3,18 +3,13 @@
 exports[`NavBarContainer renders 1`] = `
 <View
   style={
-    [
-      {
-        "flex": 1,
-        "position": "absolute",
-        "top": 0,
-        "width": "100%",
-        "zIndex": 10,
-      },
-      {
-        "maxHeight": 1,
-      },
-    ]
+    {
+      "flex": 1,
+      "position": "absolute",
+      "top": 0,
+      "width": "100%",
+      "zIndex": 10,
+    }
   }
   testID="nav-bar-container"
 >

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

@@ -14,18 +14,13 @@ exports[`ScreenContainer renders 1`] = `
 >
   <View
     style={
-      [
-        {
-          "flex": 1,
-          "position": "absolute",
-          "top": 0,
-          "width": "100%",
-          "zIndex": 10,
-        },
-        {
-          "maxHeight": 1,
-        },
-      ]
+      {
+        "flex": 1,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+        "zIndex": 10,
+      }
     }
     testID="nav-bar-container"
   >

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -10,6 +10,7 @@ import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -29,9 +30,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const { appState: { appReady = false } = {} } = usePickFromState([
-    "appState",
-  ]);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

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

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

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const { plugins } = usePickFromState(["rivers", "plugins"]);
+  const plugins = usePlugins();
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/model.test.ts

@@ -0,0 +1,80 @@
+import { buildActionButtonsModel } from "../model";
+
+describe("buildActionButtonsModel", () => {
+  it("returns null when the container is disabled", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: false,
+      mobile_button_1_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toBeNull();
+  });
+
+  it("returns explicit enabled slots and semantic container data", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: true,
+      mobile_buttons_container_align: "right",
+      mobile_buttons_container_margin_top: 1,
+      mobile_buttons_container_margin_right: 2,
+      mobile_buttons_container_margin_bottom: 3,
+      mobile_buttons_container_margin_left: 4,
+      mobile_buttons_container_stacking: "vertical",
+      mobile_buttons_container_horizontal_gutter: 8,
+      mobile_buttons_container_vertical_gutter: 12,
+      mobile_buttons_container_independent_styles: false,
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toEqual({
+      enabledSlots: [1, 3],
+      buttonsCount: 2,
+      container: {
+        horizontalAlign: "flex-end",
+        margins: {
+          top: 1,
+          right: 2,
+          bottom: 3,
+          left: 4,
+        },
+        stacking: "vertical",
+        horizontalGutter: 8,
+        verticalGutter: 12,
+        independentStyles: false,
+      },
+      buttons: [
+        {
+          slot: 1,
+          renderIndex: 0,
+          specificPrefix: "mobile_button_1",
+          stylePrefix: "mobile_button_1",
+        },
+        {
+          slot: 3,
+          renderIndex: 1,
+          specificPrefix: "mobile_button_3",
+          stylePrefix: "mobile_button_1",
+        },
+      ],
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/placement.test.ts

@@ -0,0 +1,187 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../placement";
+
+describe("ActionButtonsCore placement", () => {
+  const buttons = { type: "View", name: "buttons" };
+
+  const above_labels = [
+    { name: "above_label_1" },
+    { name: "above_label_2" },
+    { name: "above_label_3" },
+  ];
+
+  const below_labels = [
+    { name: "below_label_1" },
+    { name: "below_label_2" },
+    { name: "below_label_3" },
+  ];
+
+  it("inserts buttons after the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
+    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+  });
+
+  it("inserts buttons before the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
+    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+  });
+
+  it("prepends buttons only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        below_labels
+      )
+    ).toEqual([buttons, ...below_labels]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: false },
+        buttons,
+        below_labels
+      )
+    ).toEqual(below_labels);
+  });
+
+  it("appends buttons when appendWhenMissing is enabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        below_labels
+      )
+    ).toEqual([...below_labels, buttons]);
+  });
+
+  it("returns labels unchanged when appendWhenMissing is disabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: false },
+        buttons,
+        below_labels
+      )
+    ).toEqual(below_labels);
+  });
+
+  const labelContainers = [
+    {
+      elements: [
+        {
+          elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+        },
+      ],
+    },
+    {
+      elements: [
+        {
+          elements: [{ name: "bottom_label_1" }],
+        },
+      ],
+    },
+  ];
+
+  it("inserts buttons after the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              { name: "top_label_2" },
+              buttons,
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("inserts buttons before the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "above_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              buttons,
+              { name: "top_label_2" },
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("prepends buttons into the first container only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [buttons, ...labelContainers[0].elements],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("appends buttons into the last container when configured", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      labelContainers[0],
+      {
+        elements: [...labelContainers[1].elements, buttons],
+      },
+    ]);
+  });
+
+  it("inserts buttons after a matching label in a direct two-level container", () => {
+    const directLabelContainers = [
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+      },
+      {
+        elements: [{ name: "bottom_label_1" }],
+      },
+    ];
+
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        directLabelContainers
+      )
+    ).toEqual([
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }, buttons],
+      },
+      directLabelContainers[1],
+    ]);
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/selectors.test.ts

@@ -0,0 +1,45 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "../selectors";
+
+describe("ActionButtonsCore selectors", () => {
+  it("returns explicit enabled button slots without collapsing sparse slots", () => {
+    const configuration = {
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    expect(getEnabledButtonSlots(configuration, "mobile_button")).toEqual([
+      1, 3,
+    ]);
+  });
+
+  it("returns slot-based prefixes", () => {
+    expect(getButtonSlotPrefix("tv_buttons_button", 3)).toBe(
+      "tv_buttons_button_3"
+    );
+  });
+
+  it("reuses button 1 styles when independent styles are disabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: false,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_1");
+  });
+
+  it("uses the explicit slot prefix when independent styles are enabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: true,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_3");
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/style.test.ts

@@ -0,0 +1,49 @@
+import { buildContainerLayout, getContainerMargins } from "../style";
+
+describe("ActionButtonsCore style helpers", () => {
+  it("returns numeric margins with zero defaults", () => {
+    const configuration = {
+      mobile_buttons_container_margin_top: "4",
+      mobile_buttons_container_margin_left: 6,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(getContainerMargins(value, "mobile_buttons_container")).toEqual({
+      top: 4,
+      right: 0,
+      bottom: 0,
+      left: 6,
+    });
+  });
+
+  it("returns semantic layout data using shared alignment mapping", () => {
+    const configuration = {
+      tv_buttons_container_align: "middle",
+      tv_buttons_container_margin_top: 1,
+      tv_buttons_container_margin_right: 2,
+      tv_buttons_container_margin_bottom: 3,
+      tv_buttons_container_margin_left: 4,
+      tv_buttons_container_stacking: "vertical",
+      tv_buttons_container_horizontal_gutter: 8,
+      tv_buttons_container_vertical_gutter: 12,
+      tv_buttons_container_independent_styles: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(buildContainerLayout(value, "tv_buttons_container")).toEqual({
+      horizontalAlign: "center",
+      margins: {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      },
+      stacking: "vertical",
+      horizontalGutter: 8,
+      verticalGutter: 12,
+      independentStyles: true,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/model.ts

@@ -0,0 +1,47 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "./selectors";
+import { buildContainerLayout } from "./style";
+import { ActionButtonsModel, BuildActionButtonsModelOptions } from "./types";
+
+export const buildActionButtonsModel = ({
+  configuration,
+  value,
+  containerPrefix,
+  buttonPrefix,
+  maxButtons = 3,
+}: BuildActionButtonsModelOptions): ActionButtonsModel | null => {
+  if (!value(`${containerPrefix}_buttons_enabled`)) {
+    return null;
+  }
+
+  const enabledSlots = getEnabledButtonSlots(
+    configuration,
+    buttonPrefix,
+    maxButtons
+  );
+
+  if (enabledSlots.length === 0) {
+    return null;
+  }
+
+  const container = buildContainerLayout(value, containerPrefix);
+
+  return {
+    enabledSlots,
+    buttonsCount: enabledSlots.length,
+    container,
+    buttons: enabledSlots.map((slot, renderIndex) => ({
+      slot,
+      renderIndex,
+      specificPrefix: getButtonSlotPrefix(buttonPrefix, slot),
+      stylePrefix: getStylePrefix({
+        slot,
+        independentStyles: container.independentStyles,
+        buttonPrefix,
+      }),
+    })),
+  };
+};