@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,53 +1,123 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
+  it("returns the requested slot action identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
         "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_3_assign_action:
+        "tv_buttons_button_3_assign_action_value",
     };
 
-    const index = 0;
+    const slot = 3;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns undefined for a disabled or missing slot", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value_1",
-      tv_buttons_button_1_assign_action:
-        "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_other: "value_2",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
     };
 
-    const index = 1;
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("returns undefined for empty string values", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: "",
+    };
+
+    const slot = 2;
+
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
-  it("get undefined if no assign_actions at all", () => {
-    const configuration = {};
+  it("returns undefined for negative slots", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
-    const index = 0;
+    const slot = -1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("handles non-string values by returning the configured slot value", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: true,
+    };
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBe(true);
+    expect(memoizedResult).toBe(true);
   });
 });
 
-describe("getPluginIdentifier - when configuration has same values for different keys", () => {
+describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -55,19 +125,35 @@ describe("getPluginIdentifier - when configuration has same values for different
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("get first plugin identifier", () => {
-    const index = 0;
+  it("returns the requested slot even when values are identical", () => {
+    expect.assertions(2);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const slot = 1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
-    const index = 1;
+  it("returns the second slot when values are identical", () => {
+    expect.assertions(2);
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/insertButtonsBetweenLabels.test.ts

@@ -3,18 +3,20 @@ import { insertButtonsBetweenLabels } from "..";
 describe("insertButtonsBetweenLabels - depthlevel 1", () => {
   const buttons = "buttons";
 
-  const labels = [
-    { name: "label_1" },
-    { name: "label_2" },
-    { name: "label_3" },
+  const slots = [
+    { name: "label_1", element: { id: "label_1" } },
+    { name: "label_2", element: { id: "label_2" } },
+    { name: "label_3", element: { id: "label_3" } },
   ];
 
+  const labels = slots.map((slot) => slot.element);
+
   it("put buttons on top", () => {
     const configuration = {
       tv_buttons_container_position: "on_top",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([buttons, ...labels]);
   });
@@ -24,7 +26,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "unknown_position",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([...labels, buttons]);
   });
@@ -34,7 +36,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_1",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
   });
@@ -44,7 +46,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_2",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
@@ -54,22 +56,52 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_3",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("put above label_2", () => {
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
+
+    expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "label_1", element: { id: "label_1" } },
+      { name: "label_2", element: null },
+      { name: "label_3", element: { id: "label_3" } },
+    ];
+
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(
+      configuration,
+      buttons,
+      slotsWithEmpty
+    );
+
+    expect(result).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+  });
+
+  it("appends buttons when the target is unknown", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("appends buttons when there are no slots", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
@@ -88,7 +120,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, null, labels);
+    const result = insertButtonsBetweenLabels(configuration, null, slots);
 
     expect(result).toEqual(labels);
   });

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

@@ -1,173 +1,72 @@
-import * as R from "ramda";
-
+import memoizee from "memoizee";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { getEnabledButtonSlots } from "../../../ActionButtonsCore/selectors";
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
   prefix: string
 ): number => {
-  const button1Key = `${prefix}_button_1_button_enabled`;
-  const button2Key = `${prefix}_button_2_button_enabled`;
-  const button3Key = `${prefix}_button_3_button_enabled`;
-
-  return R.toPairs(configuration).filter(
-    ([key, value]) =>
-      [button1Key, button2Key, button3Key].includes(key) && value
-  ).length;
+  return getEnabledButtonSlots(configuration, `${prefix}_button`).length;
 };
 
 export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
-  index: number
-): string => {
-  const match = `${prefix}_button_\\d_assign_action`;
-  const re = new RegExp(match);
-
-  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
-
-  return rejectNils(
-    R.toPairs(configuration)
-      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
-      .map(([key, value]) => {
-        const matched = key.match(re);
-
-        return matched ? value : undefined;
-      })
-  );
-};
-
-type Label = {
-  name: string;
-};
-
-type LabelContainer = {
-  elements: Array<Label>;
-};
-
-type LabelExtraContainer = {
-  elements: Array<LabelContainer>;
-};
-
-const withButtons = (labelName, buttons, labels) => {
-  return labels.reduce((acc, label) => {
-    if (label.name === labelName) {
-      return [...acc, label, buttons];
-    }
+  slot: number
+): string | undefined => {
+  const value = configuration[
+    `${prefix}_button_${slot}_assign_action`
+  ] as string;
 
-    return [...acc, label];
-  }, []);
+  return value == null || value === "" ? undefined : value;
 };
 
-const withButtonsInContainer = (labelName, buttons, views) => {
-  return views.map((view) => {
-    return {
-      ...view,
-      elements: view.elements.reduce((acc, label) => {
-        if (label.name === labelName) {
-          return [...acc, label, buttons];
-        }
-
-        return [...acc, label];
-      }, []),
-    };
-  });
-};
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels: Label[] = []
-) => {
-  if (R.isNil(buttons)) {
-    return labels;
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  slots = [] // { name, element } per canonical text label slot
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    slots
   );
 
-  if (position === "on_top") {
-    return [buttons, ...labels];
-  }
-
-  const labelsWithButtons = withButtons(position, buttons, labels);
-
-  if (R.equals(labelsWithButtons, labels)) {
-    // put buttons after all labels by default
-    return [...labels, buttons];
-  }
-
-  return labelsWithButtons;
-};
-
 export const insertButtonsBetweenLabelContainers = (
   configuration: Record<string, unknown>,
   buttons,
-  labelContainers: Array<LabelExtraContainer> = []
-) => {
-  if (R.isNil(buttons)) {
-    return labelContainers;
-  }
-
-  if (R.isEmpty(labelContainers)) {
-    return [buttons];
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers
   );
 
-  if (position === "on_top") {
-    const firstContainerLabels = R.lensPath([0, "elements"]);
-
-    return R.over(firstContainerLabels, R.prepend(buttons), labelContainers);
-  }
-
-  const labelContainersWithButtons = labelContainers.map((labelContainer) => {
-    return {
-      ...labelContainer,
-      elements: withButtonsInContainer(
-        position,
-        buttons,
-        labelContainer.elements
-      ),
-    };
-  });
-
-  if (R.equals(labelContainersWithButtons, labelContainers)) {
-    // put buttons in last container
-    const lastContainerLabels = R.lensPath([
-      labelContainers.length - 1,
-      "elements",
-    ]);
-
-    return R.over(lastContainerLabels, R.append(buttons), labelContainers);
-  }
-
-  return labelContainersWithButtons;
-};
-
-export const mapSelfAlignment = (horizontalPosition) => {
-  switch (horizontalPosition) {
-    case "left":
-      return "flex-start";
-    case "right":
-      return "flex-end";
-    case "center":
-      return "center";
-    default:
-      return "flex-start";
-  }
-};
-
 export const getTextTransform = (textTransform: string) => {
-  if (R.isNil(textTransform) || R.isEmpty(textTransform)) {
+  if (textTransform == null || textTransform === "") {
     return "none";
   }
 
@@ -188,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