@applicaster/zapp-react-native-utils 16.0.0-rc.9 → 16.0.0-rc.90

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -0,0 +1,260 @@
+import { 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 map button.create_new_playlist_asset onto leadingIcon.asset", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      })
+    );
+  });
+
+  it("should map item.checkbox_asset and checked_checkbox_asset onto item.checkbox", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "item.checked_checkbox_asset":
+          "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.checkbox.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      })
+    );
+  });
+
+  it("should map reorder/remove Studio assets onto item.actionButtons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "reorder_playlist_item.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor1 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor2 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor2.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should ignore playlist-only asset keys for other theme plugins", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "queue-action"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+  });
+});

package/configurationUtils/manifestKeyParser.ts

@@ -11,17 +11,30 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
-const states = ["focused_selected", "pressed", "focused", "selected"];
+// 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",
+];
 
 const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];
-type StateKey = (typeof states)[number] | "default";
+type StateKey = (typeof states)[number];
 
 export type GetAllSpecificStylesProps = {
   componentName: string;
   subComponentName: string;
   configuration: Record<string, any>;
   outStyles: Record<string, any>;
+  styleSeparator?: string;
 };
 
 /*
@@ -35,14 +48,23 @@ export const getAllSpecificStyles = ({
   componentName,
   subComponentName,
   outStyles,
+  styleSeparator = "_style_",
 }: GetAllSpecificStylesProps) => {
   if (!outStyles) throw new Error("outStyles is required");
   if (!componentName) throw new Error("componentName is required");
 
-  const prefix =
+  const prefixes =
     subComponentName?.length > 0
-      ? `${componentName}_style_${subComponentName}_`
-      : `${componentName}_style_`;
+      ? [
+          styleSeparator
+            ? `${componentName}${styleSeparator}${subComponentName}_`
+            : `${subComponentName}_`,
+          `${componentName}_style_${subComponentName}_`,
+        ]
+      : [
+          styleSeparator ? `${componentName}${styleSeparator}` : "",
+          `${componentName}_style_`,
+        ];
 
   const defaultKey = "default";
 
@@ -51,12 +73,24 @@ export const getAllSpecificStyles = ({
   const tmpGenericDict: Record<StateKey, Record<string, any>> = {};
   const tmpPlatformDict: Record<StateKey, Record<string, any>> = {};
 
-  const parseKey = (key: string, value: any) => {
-    if (!key.startsWith(prefix)) {
+  const parseKey = (key: string, originalKey: string, value: any) => {
+    const matchedPrefix = prefixes.find((p) => p && key.startsWith(p));
+
+    if (!matchedPrefix) {
+      return;
+    }
+
+    // Guard: for empty styleSeparator, if matching modern prefix, require dot in originalKey
+    if (
+      styleSeparator === "" &&
+      matchedPrefix === `${subComponentName}_` &&
+      !originalKey.includes(".")
+    ) {
       return;
     }
 
-    let styleName = key.slice(prefix.length);
+    let styleName = key.slice(matchedPrefix.length);
+
     if (!styleName || styleName.startsWith("_")) return;
 
     const platform = platformSuffixes.find((prefix) =>
@@ -84,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);
@@ -93,7 +132,8 @@ export const getAllSpecificStyles = ({
   };
 
   for (const [key, value] of Object.entries(configuration)) {
-    parseKey(key, value);
+    const formattedKey = key.replace(/\./g, "_");
+    parseKey(formattedKey, key, value);
   }
 
   const allStates = Array.from(

package/configurationUtils/modalBlocksParser.ts

@@ -0,0 +1,296 @@
+import { getAllSpecificStyles } from "./manifestKeyParser";
+
+export type ModalBlocksConfig = {
+  header: {
+    container: Record<string, any>;
+    title: Record<string, any>;
+    closeButton: Record<string, any>;
+    actionButtons: Record<string, any>;
+  };
+  action: {
+    background: Record<string, any>;
+    title: Record<string, any>;
+    icons: Record<string, any>;
+    leadingIcon: Record<string, any>;
+    trailingIcon: Record<string, any>;
+  };
+  item: {
+    background: Record<string, any>;
+    image: Record<string, any>;
+    nowPlayingContainer: Record<string, any>;
+    nowPlayingAsset: Record<string, any>;
+    nowPlayingLabel: Record<string, any>;
+    textLabel1: Record<string, any>;
+    textLabel2: Record<string, any>;
+    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>;
+    image: Record<string, any>;
+    nowPlayingContainer: Record<string, any>;
+    nowPlayingAsset: Record<string, any>;
+    nowPlayingLabel: Record<string, any>;
+    textLabel1: Record<string, any>;
+    textLabel2: Record<string, any>;
+    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>;
+    title: Record<string, any>;
+    icons: Record<string, any>;
+    leadingIcon: Record<string, any>;
+  };
+};
+
+export const parseModalBlocksConfiguration = (
+  configuration: Record<string, any>,
+  componentName: string
+): ModalBlocksConfig => {
+  const result: ModalBlocksConfig = {
+    header: {
+      container: {},
+      title: {},
+      closeButton: {},
+      actionButtons: {},
+    },
+    action: {
+      background: {},
+      title: {},
+      icons: {},
+      leadingIcon: {},
+      trailingIcon: {},
+    },
+    item: {
+      background: {},
+      image: {},
+      nowPlayingContainer: {},
+      nowPlayingAsset: {},
+      nowPlayingLabel: {},
+      textLabel1: {},
+      textLabel2: {},
+      buttonsContainer: {},
+      button1: {},
+      button2: {},
+      checkbox: {},
+      actionButtons: {},
+    },
+    nowPlayingItem: {
+      background: {},
+      image: {},
+      nowPlayingContainer: {},
+      nowPlayingAsset: {},
+      nowPlayingLabel: {},
+      textLabel1: {},
+      textLabel2: {},
+      buttonsContainer: {},
+      button1: {},
+      button2: {},
+      checkbox: {},
+      actionButtons: {},
+    },
+    button: {
+      background: {},
+      title: {},
+      icons: {},
+      leadingIcon: {},
+    },
+  };
+
+  if (!configuration || !componentName) {
+    return result;
+  }
+
+  const normalizedComponentName = componentName.replace(/-/g, "_");
+
+  // Helper to parse sub-components for a block
+  const parseBlock = (blockName: string, subComponents: string[]) => {
+    subComponents.forEach((subComponent) => {
+      // e.g. header_container
+      const fullSubComponentName = `${blockName}_${subComponent}`;
+
+      // e.g. result.header.container
+      const camelSubComponent = subComponent.replace(/_([a-z0-9])/g, (g) =>
+        g[1].toUpperCase()
+      );
+
+      const camelBlockName = (blockName as string).replace(
+        /_([a-z0-9])/g,
+        (g) => g[1].toUpperCase()
+      ) as keyof ModalBlocksConfig;
+
+      getAllSpecificStyles({
+        configuration,
+        componentName: normalizedComponentName,
+        subComponentName: fullSubComponentName,
+        styleSeparator: "",
+        outStyles:
+          result[camelBlockName]![
+            camelSubComponent as keyof (typeof result)[typeof camelBlockName]
+          ],
+      });
+    });
+  };
+
+  parseBlock("header", [
+    "container",
+    "title",
+    "close_button",
+    "action_buttons",
+  ]);
+
+  parseBlock("action", [
+    "background",
+    "title",
+    "icons",
+    "leading_icon",
+    "trailing_icon",
+  ]);
+
+  parseBlock("item", [
+    "background",
+    "image",
+    "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",
+  ]);
+
+  parseBlock("now_playing_item", [
+    "background",
+    "image",
+    "now_playing_container",
+    "now_playing_asset",
+    "now_playing_label",
+    "text_label_1",
+    "text_label_2",
+    "text_label1",
+    "text_label2",
+    "buttons_container",
+    "button_1",
+    "button_2",
+  ]);
+
+  parseBlock("button", ["background", "title", "icons", "leading_icon"]);
+
+  // Playlist-experience Studio keys live in this shared parser because modal
+  // blocks are themed by themePluginId. Gate them so other plugins are not
+  // affected by playlist-only asset names.
+  const isPlaylistExperience =
+    normalizedComponentName === "playlist_experience";
+
+  // Studio uploads Create New icon as button.create_new_playlist_asset (not
+  // button.leading_icon.asset). Map it onto leadingIcon so AudioPlayerButton
+  // can override the hardcoded action-type asset.
+  const createNewPlaylistAsset = isPlaylistExperience
+    ? configuration["button.create_new_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_button_create_new_playlist_asset`
+      ]
+    : undefined;
+
+  if (createNewPlaylistAsset) {
+    if (!result.button.leadingIcon.default) {
+      result.button.leadingIcon.default = {};
+    }
+
+    result.button.leadingIcon.default.asset = createNewPlaylistAsset;
+  }
+
+  // Studio checkbox assets are top-level item.* keys (not a parseBlock
+  // sub-component). Map onto item.checkbox so multiSelect can render them.
+  const checkboxAsset =
+    configuration["item.checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checkbox_asset`];
+
+  const checkedCheckboxAsset =
+    configuration["item.checked_checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checked_checkbox_asset`];
+
+  if (checkboxAsset || checkedCheckboxAsset) {
+    if (!result.item.checkbox.default) {
+      result.item.checkbox.default = {};
+    }
+
+    if (checkboxAsset) {
+      result.item.checkbox.default.asset = checkboxAsset;
+    }
+
+    if (checkedCheckboxAsset) {
+      result.item.checkbox.default.checkedAsset = checkedCheckboxAsset;
+    }
+  }
+
+  // Edit Order row icons: prefer reorder_playlist_item.*, then flavor1, then
+  // flavor2 playlist_experience_assets_* (playlist-experience theme only).
+  const removeAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.remove_from_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_remove_from_playlist_asset`
+      ]
+    : undefined;
+
+  const dragAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.reorder_handle_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_reorder_handle_asset`
+      ]
+    : undefined;
+
+  if (removeAsset || dragAsset) {
+    if (!result.item.actionButtons.default) {
+      result.item.actionButtons.default = {};
+    }
+
+    if (removeAsset) {
+      result.item.actionButtons.default.removeAsset = removeAsset;
+    }
+
+    if (dragAsset) {
+      result.item.actionButtons.default.dragAsset = dragAsset;
+    }
+  }
+
+  return result;
+};