@applicaster/zapp-react-native-ui-components 15.0.0-rc.143 → 15.0.0-rc.145

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/__tests__/renderedTree.test.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+import { Text as RNText, View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { configInflater } from "../../../../dataAdapter";
+import { elementMapper } from "../../../../elementMapper";
+import { defaultComponents } from "../../../index";
+import { TvActionButtons } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsScreenActive: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({}),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: jest.fn(() => false),
+  applyRTLStylesIfNeeded: jest.fn((style) => style),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Focusable",
+  () => ({
+    Focusable: ({ children, ...props }) => {
+      const { View: MockView } = require("react-native");
+
+      return (
+        <MockView testID="tv-focusable" {...props}>
+          {typeof children === "function" ? children(false) : children}
+        </MockView>
+      );
+    },
+  })
+);
+
+const mockUseActions = useActions as jest.Mock;
+
+const item = {
+  id: "entry-1",
+} as ZappEntry;
+
+const buildActionContext = (entryState = {}) => ({
+  initialEntryState: jest.fn(() => ({
+    label: {
+      label_1: "Play",
+    },
+    ...entryState,
+  })),
+  invokeAction: jest.fn(),
+  addListener: jest.fn(() => jest.fn()),
+  addListeners: jest.fn(() => jest.fn()),
+});
+
+const tvConfiguration = {
+  tv_buttons_container_buttons_enabled: true,
+  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_horizontal_gutter: 10,
+  tv_buttons_container_independent_styles: true,
+  tv_buttons_button_1_button_enabled: true,
+  tv_buttons_button_1_assign_action: "navigation_action",
+  tv_buttons_button_1_background_padding_top: 11,
+  tv_buttons_button_1_background_padding_right: 12,
+  tv_buttons_button_1_background_padding_bottom: 13,
+  tv_buttons_button_1_background_padding_left: 14,
+  tv_buttons_button_1_background_color: "rgba(1,1,1,1)",
+  tv_buttons_button_1_background_border_color: "rgba(2,2,2,1)",
+  tv_buttons_button_1_background_border_thickness: 1,
+  tv_buttons_button_1_background_corner_radius: 8,
+  tv_buttons_button_1_focused_background_color: "rgba(3,3,3,1)",
+  tv_buttons_button_1_focused_background_border_color: "rgba(4,4,4,1)",
+  tv_buttons_button_1_display_mode: "dynamic",
+  tv_buttons_button_1_asset_enabled: true,
+  tv_buttons_button_1_asset_width: 40,
+  tv_buttons_button_1_asset_height: 40,
+  tv_buttons_button_1_asset_margin_top: 0,
+  tv_buttons_button_1_asset_margin_right: 0,
+  tv_buttons_button_1_asset_margin_bottom: 0,
+  tv_buttons_button_1_asset_margin_left: 0,
+  tv_buttons_button_1_asset_alignment: "left",
+  tv_buttons_button_1_label_1_toggle: true,
+  tv_buttons_button_1_label_1_margin_top: 0,
+  tv_buttons_button_1_label_1_margin_right: 0,
+  tv_buttons_button_1_label_1_margin_bottom: 0,
+  tv_buttons_button_1_label_1_margin_left: 0,
+  tv_buttons_button_1_label_1_padding_top: 0,
+  tv_buttons_button_1_label_1_padding_right: 0,
+  tv_buttons_button_1_label_1_padding_bottom: 0,
+  tv_buttons_button_1_label_1_padding_left: 0,
+  tv_buttons_button_1_label_1_text_alignment: "left",
+  tv_buttons_button_1_label_1_text_transform: "default",
+  tv_buttons_button_1_label_1_font_color: "rgba(10,10,10,1)",
+  tv_buttons_button_1_label_1_focused_font_color: "rgba(20,20,20,1)",
+  tv_buttons_button_1_label_1_font_size: 18,
+  tv_buttons_button_1_label_1_line_height: 24,
+  tv_buttons_button_1_label_1_font_family: "Ubuntu-Bold",
+  tv_buttons_button_1_label_1_letter_spacing: -0.2,
+};
+
+const mergeStyle = (style) =>
+  (Array.isArray(style) ? style : [style]).reduce(
+    (acc, part) => ({ ...acc, ...(part || {}) }),
+    {}
+  );
+
+describe("TvActionButtons rendered tree", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("preserves the rendered primitive tree when the tv builder is wrapped with DataProvider", () => {
+    mockUseActions.mockImplementation((identifier) => {
+      if (identifier === "") {
+        return {
+          actions: {
+            navigation_action: {
+              module: {
+                context: {
+                  _currentValue: {
+                    isActionAvailable: jest.fn(() => true),
+                  },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      return buildActionContext();
+    });
+
+    const node = configInflater(
+      item,
+      TvActionButtons({
+        value: (key) => tvConfiguration[key],
+        platformValue: (key) => tvConfiguration[key],
+        configuration: tvConfiguration,
+        state: "focused",
+        skipButtons: false,
+      })
+    );
+
+    const { UNSAFE_getAllByType, getByText } = render(
+      <React.Fragment>
+        {elementMapper(defaultComponents)(node as never)}
+      </React.Fragment>
+    );
+
+    const views = UNSAFE_getAllByType(View);
+    const text = getByText("Play");
+
+    const labelContainer = views.find(
+      (view) => mergeStyle(view.props.style).flexDirection === "column"
+    );
+
+    const buttonView = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.display === "flex" && style.alignItems === "center";
+    });
+
+    const outerContainer = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.flexDirection === "row" && style.justifyContent === "center";
+    });
+
+    expect(mergeStyle(outerContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "row",
+        justifyContent: "center",
+        marginTop: 1,
+        marginRight: 2,
+        marginBottom: 3,
+        marginLeft: 4,
+      })
+    );
+
+    expect(mergeStyle(buttonView?.props.style)).toEqual(
+      expect.objectContaining({
+        display: "flex",
+        alignItems: "center",
+        paddingTop: 11,
+        paddingRight: 12,
+        paddingBottom: 13,
+        paddingLeft: 14,
+        backgroundColor: "rgba(1,1,1,1)",
+        borderColor: "rgba(2,2,2,1)",
+        borderWidth: 1,
+        borderRadius: 8,
+      })
+    );
+
+    expect(mergeStyle(labelContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "column",
+      })
+    );
+
+    expect(UNSAFE_getAllByType(RNText)).toHaveLength(1);
+
+    expect(mergeStyle(text.props.style)).toEqual(
+      expect.objectContaining({
+        fontSize: 18,
+        lineHeight: 24,
+        letterSpacing: -0.2,
+        fontFamily: "Ubuntu-Bold",
+        color: "rgba(10,10,10,1)",
+      })
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -58,18 +58,30 @@ export const TvActionButtons = ({
     elements: compact(
       model.buttons.map(
         ({ slot, renderIndex, specificPrefix, stylePrefix }) => {
-          return Button({
-            prefix: stylePrefix,
-            value,
-            platformValue,
-            pluginIdentifier: memoizedGetPluginIdentifier(
-              configuration,
-              PREFIX,
-              slot
-            ) as string,
-            suffixId: specificPrefix,
-            preferredFocus: renderIndex === 0,
-          });
+          return {
+            type: "DataProvider",
+            data: [
+              {
+                func: "identity",
+                args: [],
+                propName: "entry",
+              },
+            ],
+            elements: [
+              Button({
+                prefix: stylePrefix,
+                value,
+                platformValue,
+                pluginIdentifier: memoizedGetPluginIdentifier(
+                  configuration,
+                  PREFIX,
+                  slot
+                ) as string,
+                suffixId: specificPrefix,
+                preferredFocus: renderIndex === 0,
+              }),
+            ],
+          };
         }
       )
     ),

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -1,5 +1,9 @@
 import memoizee from "memoizee";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { getEnabledButtonSlots } from "../../../ActionButtonsCore/selectors";
 import {
   insertBetweenLabelContainers,
@@ -83,3 +87,61 @@ export const withAntialiasing = () => {
 
   return {};
 };
+
+export const getMarginStyles = (value) => ({
+  marginTop: toNumberWithDefaultZero(value("margin_top")),
+  marginRight: toNumberWithDefaultZero(value("margin_right")),
+  marginBottom: toNumberWithDefaultZero(value("margin_bottom")),
+  marginLeft: toNumberWithDefaultZero(value("margin_left")),
+});
+
+export const getPaddingStyles = (value) => ({
+  paddingTop: toNumberWithDefaultZero(value("padding_top")),
+  paddingRight: toNumberWithDefaultZero(value("padding_right")),
+  paddingBottom: toNumberWithDefaultZero(value("padding_bottom")),
+  paddingLeft: toNumberWithDefaultZero(value("padding_left")),
+});
+
+export const getBorderStyles = (value) => ({
+  borderRadius: toNumberWithDefaultZero(value("corner_radius")),
+  borderWidth: toNumberWithDefaultZero(value("border_thickness")),
+  borderStyle: "solid",
+  borderColor: value("border_color"),
+});
+
+export const getAssetStyles = (value) => ({
+  ...getMarginStyles(value),
+  width: toNumberWithDefault(40, value("width")),
+  height: toNumberWithDefault(40, value("height")),
+});
+
+export const getTextLabelStyles = (value, platformValue) => ({
+  ...getMarginStyles(value),
+  ...getPaddingStyles(value),
+  borderRadius: toNumberWithDefaultZero(value("corner_radius")),
+  textAlign: value("text_alignment"),
+  textTransform: getTextTransform(value("text_transform")),
+  lineHeight: platformValue("line_height"),
+  letterSpacing: platformValue("letter_spacing"),
+  fontSize: platformValue("font_size"),
+  fontFamily: platformValue("font_family"),
+  ...withAntialiasing(),
+});
+
+export const getDisplayModeStyles = (value) => {
+  const mode = value("display_mode") || "dynamic";
+  const width = toNumberWithDefault(240, value("fixed_and_fixed_center_width"));
+
+  if (mode === "fixed") {
+    return { width };
+  }
+
+  if (mode === "fixed_center") {
+    return {
+      width,
+      justifyContent: "center",
+    };
+  }
+
+  return {};
+};

package/Components/MasterCell/MappingFunctions/index.js

@@ -1,7 +1,7 @@
-import * as R from "ramda";
 import { isDateValid } from "./Utils";
 import { masterCellLogger } from "../logger";
 import { imageSrcFromMediaItem as imageSrcFromMediaItemConfigUtils } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { pathOr, identity } from "@applicaster/zapp-react-native-utils/utils";
 
 export const imageSrcFromMediaItem = (...args) => {
   __DEV__ &&
@@ -34,11 +34,12 @@ export function stringifyDateFromPath(obj, path) {
  * @returns {any}       Found object or empty string
  */
 export function pathWithFallback(obj, path) {
-  return R.pathOr("", path)(obj);
+  return pathOr("", path, obj);
 }
 
 // prettier-ignore
 const functionsNames = {
+  "identity": identity,
   "path": pathWithFallback,
   "image_src_from_media_item": imageSrcFromMediaItemConfigUtils,
   "stringify_date_from_path": stringifyDateFromPath,

package/Components/MasterCell/README.md

@@ -1,5 +1,9 @@
 # MasterCell
 
+## Guides
+
+- [Config Builder -> React Component Migration](./CONFIG_BUILDER_TO_REACT_COMPONENT.md)
+
 ## How to use it
 
 ```javascript

package/Components/MasterCell/__tests__/__snapshots__/dataAdapter.test.js.snap

@@ -7,6 +7,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -23,6 +24,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -49,6 +51,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -76,6 +79,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -119,6 +123,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -135,6 +140,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -161,6 +167,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -188,6 +195,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -231,6 +239,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -247,6 +256,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -273,6 +283,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -300,6 +311,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -343,6 +355,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -359,6 +372,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -385,6 +399,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -412,6 +427,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -455,6 +471,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -471,6 +488,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -497,6 +515,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -524,6 +543,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -567,6 +587,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -583,6 +604,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -609,6 +631,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -636,6 +659,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {

package/Components/MasterCell/__tests__/configInflater.test.js

@@ -32,6 +32,7 @@ describe("configInflater", () => {
       },
       type: "testType",
       props: {
+        _dataKey: "uri",
         uri: {
           extensions: {
             color: "red",

package/Components/MasterCell/__tests__/elementMapper.test.js

@@ -30,4 +30,50 @@ describe("elementMapper", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("renders inline ReactComponent nodes", () => {
+    const InlineComponent = jest.fn(({ testID, children }) => (
+      <View testID={testID}>{children}</View>
+    ));
+
+    const node = {
+      type: "ReactComponent",
+      style: { marginTop: 8 },
+      props: {
+        component: InlineComponent,
+        testID: "inline-react-component",
+        requiresCellUUID: true,
+      },
+      elements: [
+        {
+          type: "View",
+          style: { width: 10 },
+          props: {
+            testID: "inline-react-child",
+          },
+        },
+      ],
+    };
+
+    const wrapper = render(
+      <View>
+        {elementMapper({ View }, { cellUUID: "cell-uuid-test" })(node)}
+      </View>
+    );
+
+    expect(wrapper.getByTestId("inline-react-component")).toBeTruthy();
+    expect(wrapper.getByTestId("inline-react-child")).toBeTruthy();
+
+    expect(InlineComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        testID: "inline-react-component",
+        style: { marginTop: 8 },
+        cellUUID: "cell-uuid-test",
+      }),
+      expect.anything()
+    );
+
+    expect(InlineComponent.mock.calls[0][0].component).toBeUndefined();
+    expect(InlineComponent.mock.calls[0][0].requiresCellUUID).toBeUndefined();
+  });
 });

package/Components/MasterCell/dataAdapter.ts

@@ -31,7 +31,9 @@ function retrieveData(entry, func, args) {
  * @param {String} masterCellConfig.type of the component
  * @param {Object} masterCellConfig.style default style object for the component
  * @param {?Object} masterCellConfig.data func/args/propName that indicates how to extract
- * the data from the entry and to which prop it should be injected after manipulation
+ * the data from the entry and to which prop it should be injected after manipulation.
+ * The last mapped propName is also stored as `_dataKey` so DataProvider can
+ * mirror the resolved value into both direct props and `dataProviderProps`.
  * @param {?[Object]} element.elements Optional array of nested elements to render within the current node
  * @returns {Object} inflated configuration, ready to be rendered by the master cell's element mapper
  */
@@ -54,6 +56,7 @@ export function configInflater(
 ) {
   const props = data.reduce(
     (acc, curr) => {
+      acc._dataKey = curr.propName;
       acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
 
       return acc;