@applicaster/zapp-react-native-utils 16.0.0-alpha.3502052160 → 16.0.0-alpha.3514589787

package/cellUtils/__tests__/getButtonsEnabled.test.ts

@@ -0,0 +1,28 @@
+import { getButtonsEnabled } from "..";
+
+describe("getButtonsEnabled", () => {
+  it("returns true when the buttons container is enabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: true })
+    ).toBe(true);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "true" })
+    ).toBe(true);
+  });
+
+  it("returns false when the buttons container is disabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: false })
+    ).toBe(false);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "false" })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getButtonsEnabled({})).toBe(false);
+    expect(getButtonsEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getCellNavigationEnabled.test.ts

@@ -0,0 +1,36 @@
+import { getCellNavigationEnabled } from "..";
+
+describe("getCellNavigationEnabled", () => {
+  it("returns true when cell navigation is enabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "true",
+      })
+    ).toBe(true);
+  });
+
+  it("returns false when cell navigation is disabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "false",
+      })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getCellNavigationEnabled({})).toBe(false);
+    expect(getCellNavigationEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getIsCellNavigationEnabled.test.ts

@@ -0,0 +1,35 @@
+import { getIsCellNavigationEnabled } from "..";
+
+describe("getIsCellNavigationEnabled", () => {
+  it("is disabled when buttons are enabled and cell navigation is off", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+  });
+
+  it("is enabled when buttons and cell navigation are both on", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when buttons are disabled", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: false,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when the keys or styles are missing", () => {
+    expect(getIsCellNavigationEnabled({})).toBe(true);
+    expect(getIsCellNavigationEnabled(undefined)).toBe(true);
+  });
+});

package/cellUtils/__tests__/isCellNavigationEnabled.test.ts

@@ -0,0 +1,21 @@
+import { isCellNavigationEnabled } from "..";
+
+describe("isCellNavigationEnabled", () => {
+  it("is enabled when buttons are disabled, regardless of the toggle", () => {
+    expect(isCellNavigationEnabled(false, false)).toBe(true);
+    expect(isCellNavigationEnabled(false, true)).toBe(true);
+    expect(isCellNavigationEnabled(undefined, undefined)).toBe(true);
+    expect(isCellNavigationEnabled("false", false)).toBe(true);
+  });
+
+  it("is disabled when buttons are enabled and the toggle is off or missing", () => {
+    expect(isCellNavigationEnabled(true, false)).toBe(false);
+    expect(isCellNavigationEnabled(true, undefined)).toBe(false);
+    expect(isCellNavigationEnabled("true", "false")).toBe(false);
+  });
+
+  it("is enabled when buttons and the toggle are both enabled", () => {
+    expect(isCellNavigationEnabled(true, true)).toBe(true);
+    expect(isCellNavigationEnabled("true", "true")).toBe(true);
+  });
+});

package/cellUtils/index.ts

@@ -12,6 +12,7 @@ import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
+import { isTrue } from "../booleanUtils";
 
 const CUSTOM_KEY = "other";
 
@@ -65,11 +66,38 @@ export const isEmptyOrNil = (value: any): boolean =>
  */
 export const getLabel = (dataKeyValue, customDataKeyValue) => (entry) => {
   const label = getKeyForLabel(dataKeyValue, customDataKeyValue);
-  const isPath = label && R.length(label) > 0;
-  const fallback = isEmptyOrNil(label) ? "" : R.head(label);
+  const isPath = label && label.length > 0;
+
+  // An unresolved key is rendered as-is, because a data key is allowed to be a
+  // literal label ("More") rather than a path. Fall back to the whole key
+  // instead of its first segment: "extensions.section" reads as an unresolved
+  // path, while "extensions" reads as a legitimate label and hides the problem.
+  const fallback = isEmptyOrNil(label) ? "" : label.join(".");
 
   try {
-    return isPath ? R.pathOr(fallback, label, entry) : fallback;
+    if (!isPath) {
+      return fallback;
+    }
+
+    const resolved = label.reduce(
+      (value, key) => (value == null ? undefined : value[key]),
+      entry
+    );
+
+    if (isNotNil(resolved)) {
+      return resolved;
+    }
+
+    // A multi-segment key is unambiguously a path, so failing to resolve it is
+    // a misconfiguration rather than someone typing a literal label.
+    if (label.length > 1) {
+      cellUtilsLogger.warning({
+        message: `getLabel: data key "${fallback}" was not found on the entry, rendering the key itself`,
+        data: { dataKeyValue, customDataKeyValue, entryId: entry?.id },
+      });
+    }
+
+    return fallback;
   } catch (error) {
     cellUtilsLogger.warning({
       data: { error, dataKeyValue, customDataKeyValue },
@@ -545,3 +573,42 @@ export const hasTextLabelsEnabled = (
     return Boolean(value);
   });
 };
+
+/**
+ * Reads the mobile buttons container "buttons enabled" switch from cell styles.
+ */
+export const getButtonsEnabled = (styles?: Record<string, any>): boolean => {
+  return isTrue(styles?.mobile_buttons_container_buttons_enabled);
+};
+
+/**
+ * Reads the mobile buttons container "cell navigation enabled" switch from cell styles.
+ */
+export const getCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean => {
+  return isTrue(styles?.mobile_buttons_container_cell_navigation_enabled);
+};
+
+/**
+ * Whether tapping a cell outside its action buttons triggers the cell's navigation.
+ * Always true when the buttons are disabled.
+ * @param buttonsEnabled the cell's "buttons enabled" switch value
+ * @param cellNavigationEnabled the cell's "cell navigation enabled" switch value
+ */
+export const isCellNavigationEnabled = (
+  buttonsEnabled: unknown,
+  cellNavigationEnabled: unknown
+): boolean => !isTrue(buttonsEnabled) || isTrue(cellNavigationEnabled);
+
+/**
+ * Whether tapping a mobile cell outside its action buttons triggers the cell's navigation,
+ * read from the cell styles.
+ */
+export const getIsCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean =>
+  isCellNavigationEnabled(
+    getButtonsEnabled(styles),
+    getCellNavigationEnabled(styles)
+  );

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -176,6 +176,27 @@ describe("getAllSpecificStyles", () => {
       });
     });
 
+    it("should normalize Studio focus alias onto focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focus_background_color: "#FF3B30",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles.focused).toEqual({
+        backgroundColor: "#FF3B30",
+      });
+
+      expect(outStyles.focus).toBeUndefined();
+    });
+
     it("should handle selected state", () => {
       const outStyles = {};
 

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -0,0 +1,392 @@
+import {
+  getEmptyModalBlocksStructure,
+  parseModalBlocksConfiguration,
+} from "../modalBlocksParser";
+
+// Mock the platform selection logic so it's consistent
+jest.mock("../../reactUtils", () => ({
+  platformSelect: jest.fn().mockReturnValue("ios"),
+}));
+
+describe("parseModalBlocksConfiguration", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return empty structures for missing config or componentName", () => {
+    const result1 = parseModalBlocksConfiguration(
+      undefined as any,
+      "queue_action"
+    );
+
+    expect(result1.header.container).toEqual({});
+
+    const result2 = parseModalBlocksConfiguration({ foo: "bar" }, "");
+    expect(result2.item.background).toEqual({});
+  });
+
+  it("should correctly parse the specified flat keys into nested objects", () => {
+    // The keys follow: <component_name>_style_<blockName>_<subComponent>_[platform_][state_]<styleName>
+    const config = {
+      // Header container - default platform, default state
+      queue_action_style_header_container_backgroundColor: "#000000",
+
+      // Header title - default platform, pressed state
+      queue_action_style_header_title_pressed_fontColor: "#ffffff",
+
+      // Item background - ios platform, default state
+      queue_action_style_item_background_ios_backgroundColor: "blue",
+
+      // Item textLabel1 - default platform, focused state
+      queue_action_style_item_text_label_1_focused_fontSize: 16,
+
+      // Ignored key (unrelated to building blocks or queue_action)
+      other_action_style_header_title_fontColor: "red",
+      some_random_key: "value",
+
+      // Ignored non-style data keys (should NEVER be parsed as styles)
+      item_data_source: "http://pipes.example.com",
+      item_url: "http://example.com",
+
+      // New dot notation from manifest-generator (without plugin prefix)
+      "item.text_label_2.fontColor": "green",
+      "action.background.pressed_backgroundColor": "black",
+
+      // New now_playing_item block
+      "now_playing_item.text_label_1.fontColor": "yellow",
+      "now_playing_item.now_playing_asset.asset": "equalizer.png",
+    };
+
+    const componentName = "queue_action";
+
+    const result = parseModalBlocksConfiguration(config, componentName);
+
+    // Assert header container default state
+    expect(result.header.container.default).toEqual({
+      backgroundColor: "#000000",
+    });
+
+    // Assert header title pressed state
+    // (pressed state will inherit default styles in getAllSpecificStyles if any,
+    // but here we just have pressed, so it has default empty from the parser)
+    expect(result.header.title.pressed).toEqual({
+      fontColor: "#ffffff",
+    });
+
+    // Assert item background ios default state
+    // (mocked platform is ios, so it should be accepted and assigned to default)
+    expect(result.item.background.default).toEqual({
+      backgroundColor: "blue",
+    });
+
+    // Assert item textLabel1 focused state
+    expect(result.item.textLabel1.focused).toEqual({
+      fontSize: 16,
+    });
+
+    // Assert dot notation textLabel2 default state
+    expect(result.item.textLabel2.default).toEqual({
+      fontColor: "green",
+    });
+
+    // Assert dot notation action background pressed state
+    expect(result.action.background.pressed).toEqual({
+      backgroundColor: "black",
+    });
+
+    // Assert nowPlayingItem states
+    expect(result.nowPlayingItem?.textLabel1.default).toEqual({
+      fontColor: "yellow",
+    });
+
+    expect(result.nowPlayingItem?.nowPlayingAsset.default).toEqual({
+      asset: "equalizer.png",
+    });
+
+    // Assert untouched properties remain empty default style objects
+    expect(result.button.title).toEqual({ default: {} });
+    expect(result.action.leadingIcon).toEqual({ default: {} });
+  });
+
+  it("should map Studio item.background.focus.* onto focused state", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.background.default.background_color": "transparent",
+        "item.background.focus.background_color": "#FF3B30",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.background.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "transparent",
+      })
+    );
+
+    expect(result.item.background.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "#FF3B30",
+      })
+    );
+  });
+
+  it("should accept Studio text_label1 keys without underscore before digit", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.font_color": "#00FF00",
+        "item.text_label1.font_size": 28,
+        "item.text_label2.font_color": "#00FFFF",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FF00",
+        fontSize: 28,
+      })
+    );
+
+    expect(result.item.textLabel2.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FFFF",
+      })
+    );
+  });
+
+  it("should ignore keys that do not map to a known block sub-component", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+});
+
+describe("getEmptyModalBlocksStructure", () => {
+  it("should return every block with empty containers and no state entries", () => {
+    const result = getEmptyModalBlocksStructure();
+
+    expect(result.header.container).toEqual({});
+    expect(result.item.background).toEqual({});
+    expect(result.button.background).toEqual({});
+    expect(result.action.background).toEqual({});
+
+    expect(result.button.leadingIcon.default).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+
+  it("should return a fresh object on every call", () => {
+    const first = getEmptyModalBlocksStructure();
+    const second = getEmptyModalBlocksStructure();
+
+    expect(first).not.toBe(second);
+    expect(first.header).not.toBe(second.header);
+    expect(first).toEqual(second);
+  });
+
+  it("should be what the parser returns when config or componentName is missing", () => {
+    expect(
+      parseModalBlocksConfiguration(undefined as any, "queue_action")
+    ).toEqual(getEmptyModalBlocksStructure());
+
+    expect(parseModalBlocksConfiguration({ foo: "bar" }, "")).toEqual(
+      getEmptyModalBlocksStructure()
+    );
+  });
+
+  it("should parse section_header title and action_buttons independently of header", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "section_header.title.font_color": "#ABCDEF",
+        "section_header.title.font_size": 13,
+        "section_header.title.ios.font_family": "SFProText-Bold",
+        "section_header.action_buttons.default.background_color":
+          "rgba(62, 62, 62, 1)",
+        "section_header.action_buttons.focus.background_color":
+          "rgba(78, 78, 78, 1)",
+        "section_header.action_buttons.default.font_color": "#FFFFFF",
+        "section_header.action_buttons.font_size": 14,
+        "section_header.action_buttons.border_radius": 16,
+        // Theme modal header — must not leak into sectionHeader
+        queue_action_style_header_title_default_fontColor: "#111111",
+        queue_action_style_header_title_default_fontSize: 22,
+      },
+      "queue_action"
+    );
+
+    expect(result.sectionHeader.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#ABCDEF",
+        fontSize: 13,
+        fontFamily: "SFProText-Bold",
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(62, 62, 62, 1)",
+        fontColor: "#FFFFFF",
+        fontSize: 14,
+        borderRadius: 16,
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(78, 78, 78, 1)",
+      })
+    );
+
+    expect(result.header.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#111111",
+        fontSize: 22,
+      })
+    );
+  });
+
+  it("maps text label and now playing font keys onto the label style", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.ios.font_family": "SFProText-Bold",
+        "item.text_label1.letter_spacing": -0.4,
+        "item.text_label1.text_transform": "uppercase",
+        "now_playing_item.now_playing_label.ios.font_family":
+          "SFProText-Semibold",
+        "now_playing_item.now_playing_label.font_size": 18,
+      },
+      "queue-action"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Bold",
+        letterSpacing: -0.4,
+        textTransform: "uppercase",
+      })
+    );
+
+    expect(result.nowPlayingItem?.nowPlayingLabel.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Semibold",
+        fontSize: 18,
+      })
+    );
+  });
+
+  it("maps queue remove and reorder assets onto item action buttons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.remove_asset": "https://example.com/remove.png",
+        "item.reorder_handle_asset": "https://example.com/reorder.png",
+      },
+      "queue-action"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://example.com/remove.png",
+        dragAsset: "https://example.com/reorder.png",
+      })
+    );
+  });
+
+  it("maps now playing play and pause assets onto action buttons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "now_playing_item.play_asset": "https://example.com/play.png",
+        "now_playing_item.pause_asset": "https://example.com/pause.png",
+      },
+      "queue-action"
+    );
+
+    expect(result.nowPlayingItem?.actionButtons.default).toEqual(
+      expect.objectContaining({
+        playAsset: "https://example.com/play.png",
+        pauseAsset: "https://example.com/pause.png",
+      })
+    );
+  });
+
+  it("should leave sectionHeader empty when keys are absent", () => {
+    const result = parseModalBlocksConfiguration(
+      { "item.text_label1.font_color": "#FFFFFF" },
+      "playlist-experience"
+    );
+
+    expect(result.sectionHeader.title).toEqual({ default: {} });
+    expect(result.sectionHeader.actionButtons).toEqual({ default: {} });
+  });
+
+  it("maps playlist button font family and the new green style keys", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.title.ios.font_family": "GreycliffCF-Bold",
+        "button.title.inactive_font_color": "#111111",
+        "button.title.focused_font_color": "#222222",
+        "button.title.text_transform": "uppercase",
+        "button.background.inactive_color": "#999999",
+        "button.background.horizontal_gutter": 6,
+        "button.icons.width": 24,
+        "button.icons.height": 24,
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.title.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "GreycliffCF-Bold",
+        inactiveFontColor: "#111111",
+        textTransform: "uppercase",
+      })
+    );
+
+    // "focused_" is a state prefix, so this key lands on the focused bucket.
+    expect(result.button.title.focused).toEqual(
+      expect.objectContaining({
+        fontColor: "#222222",
+      })
+    );
+
+    expect(result.button.background.default).toEqual(
+      expect.objectContaining({
+        inactiveColor: "#999999",
+        horizontalGutter: 6,
+      })
+    );
+
+    expect(result.button.icons.default).toEqual(
+      expect.objectContaining({
+        width: 24,
+        height: 24,
+      })
+    );
+  });
+
+  it("keeps a font-selector object on the button title", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.title.ios.font_family": { fontFamily: "GreycliffCF-Bold" },
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.title.default).toEqual(
+      expect.objectContaining({
+        fontFamily: { fontFamily: "GreycliffCF-Bold" },
+      })
+    );
+  });
+});