@applicaster/zapp-react-native-utils 16.0.0-alpha.2663208063 → 16.0.0-alpha.2710214351

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -1,4 +1,7 @@
-import { parseModalBlocksConfiguration } from "../modalBlocksParser";
+import {
+  getEmptyModalBlocksStructure,
+  parseModalBlocksConfiguration,
+} from "../modalBlocksParser";
 
 // Mock the platform selection logic so it's consistent
 jest.mock("../../reactUtils", () => ({
@@ -104,4 +107,297 @@ describe("parseModalBlocksConfiguration", () => {
     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();
+  });
+
+  it("parses the generic button leading icon asset", () => {
+    const result = parseModalBlocksConfiguration(
+      { "button.leading_icon.asset": "https://example.com/add.png" },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBe(
+      "https://example.com/add.png"
+    );
+  });
+});
+
+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" },
+      })
+    );
+  });
 });

package/configurationUtils/manifestKeyParser.ts

@@ -11,11 +11,17 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
+// Do not change the order: focused_selected must be first, and "focus" must
+// come *after* "focused". Matching uses startsWith(state + "_"), so putting
+// "focus" first would steal focused_* / focused_selected_* keys. Adding
+// "focus" here affects every getAllSpecificStyles consumer (not only modals);
+// property names that themselves start with focus_ (e.g. focus_font_color as
+// a non-state style) would also be classified as the focus state.
 const states = [
   "focused_selected",
   "pressed",
   "focused",
+  "focus",
   "selected",
   "default",
 ];
@@ -112,6 +118,11 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
+    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
+    if (state === "focus") {
+      state = "focused";
+    }
+
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);

package/configurationUtils/modalBlocksParser.ts

@@ -7,6 +7,14 @@ export type ModalBlocksConfig = {
     closeButton: Record<string, any>;
     actionButtons: Record<string, any>;
   };
+  /**
+   * Queue Section Header (BB Variant 3) — shared by Next in Queue / Next Up.
+   * Separate from Theme modal `header` so top-title styles do not collide.
+   */
+  sectionHeader: {
+    title: Record<string, any>;
+    actionButtons: Record<string, any>;
+  };
   action: {
     background: Record<string, any>;
     title: Record<string, any>;
@@ -25,6 +33,10 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    /** Studio item.checkbox_asset / item.checked_checkbox_asset */
+    checkbox?: Record<string, any>;
+    /** Studio reorder/remove icons for Edit Order rows */
+    actionButtons?: Record<string, any>;
   };
   nowPlayingItem?: {
     background: Record<string, any>;
@@ -37,6 +49,8 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    checkbox?: Record<string, any>;
+    actionButtons?: Record<string, any>;
   };
   button: {
     background: Record<string, any>;
@@ -46,10 +60,7 @@ export type ModalBlocksConfig = {
   };
 };
 
-export const parseModalBlocksConfiguration = (
-  configuration: Record<string, any>,
-  componentName: string
-): ModalBlocksConfig => {
+export const getEmptyModalBlocksStructure = (): ModalBlocksConfig => {
   const result: ModalBlocksConfig = {
     header: {
       container: {},
@@ -57,6 +68,10 @@ export const parseModalBlocksConfiguration = (
       closeButton: {},
       actionButtons: {},
     },
+    sectionHeader: {
+      title: {},
+      actionButtons: {},
+    },
     action: {
       background: {},
       title: {},
@@ -75,6 +90,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     nowPlayingItem: {
       background: {},
@@ -87,6 +104,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     button: {
       background: {},
@@ -96,6 +115,15 @@ export const parseModalBlocksConfiguration = (
     },
   };
 
+  return result;
+};
+
+export const parseModalBlocksConfiguration = (
+  configuration: Record<string, any>,
+  componentName: string
+): ModalBlocksConfig => {
+  const result = getEmptyModalBlocksStructure();
+
   if (!configuration || !componentName) {
     return result;
   }
@@ -138,6 +166,8 @@ export const parseModalBlocksConfiguration = (
     "action_buttons",
   ]);
 
+  parseBlock("section_header", ["title", "action_buttons"]);
+
   parseBlock("action", [
     "background",
     "title",
@@ -152,8 +182,12 @@ export const parseModalBlocksConfiguration = (
     "now_playing_container",
     "now_playing_asset",
     "now_playing_label",
+    // Underscored form (QB convention) and Studio/manifest-generator form
+    // without the underscore before the digit (text_label1).
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -167,6 +201,8 @@ export const parseModalBlocksConfiguration = (
     "now_playing_label",
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -174,5 +210,43 @@ export const parseModalBlocksConfiguration = (
 
   parseBlock("button", ["background", "title", "icons", "leading_icon"]);
 
+  // Leaf uploader keys. They are not `<block>_<sub>_<prop>` styles, so
+  // getAllSpecificStyles never sees them.
+  const assignLeafAsset = (
+    block: ModalBlocksConfig["item"] | undefined,
+    key: string,
+    prop: "playAsset" | "pauseAsset" | "removeAsset" | "dragAsset"
+  ) => {
+    if (!block) return;
+
+    const value = configuration[key];
+
+    if (typeof value !== "string" || !value.trim()) return;
+
+    block.actionButtons = {
+      ...block.actionButtons,
+      default: {
+        ...(block.actionButtons?.default || {}),
+        [prop]: value,
+      },
+    };
+  };
+
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.play_asset",
+    "playAsset"
+  );
+
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.pause_asset",
+    "pauseAsset"
+  );
+
+  assignLeafAsset(result.item, "item.remove_asset", "removeAsset");
+
+  assignLeafAsset(result.item, "item.reorder_handle_asset", "dragAsset");
+
   return result;
 };