@applicaster/zapp-react-native-utils 16.0.0-rc.57 → 16.0.0-rc.58

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -0,0 +1,107 @@
+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: {} });
+  });
+});

package/configurationUtils/manifestKeyParser.ts

@@ -12,16 +12,23 @@ const currentPlatform = platformSelect({
 });
 
 // Do not change the order, focused_selected should be first
-const states = ["focused_selected", "pressed", "focused", "selected"];
+const states = [
+  "focused_selected",
+  "pressed",
+  "focused",
+  "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 +42,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 +67,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;
     }
 
-    let styleName = key.slice(prefix.length);
+    // Guard: for empty styleSeparator, if matching modern prefix, require dot in originalKey
+    if (
+      styleSeparator === "" &&
+      matchedPrefix === `${subComponentName}_` &&
+      !originalKey.includes(".")
+    ) {
+      return;
+    }
+
+    let styleName = key.slice(matchedPrefix.length);
+
     if (!styleName || styleName.startsWith("_")) return;
 
     const platform = platformSuffixes.find((prefix) =>
@@ -93,7 +121,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,178 @@
+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>;
+  };
+  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>;
+  };
+  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: {},
+    },
+    nowPlayingItem: {
+      background: {},
+      image: {},
+      nowPlayingContainer: {},
+      nowPlayingAsset: {},
+      nowPlayingLabel: {},
+      textLabel1: {},
+      textLabel2: {},
+      buttonsContainer: {},
+      button1: {},
+      button2: {},
+    },
+    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",
+    "text_label_1",
+    "text_label_2",
+    "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",
+    "buttons_container",
+    "button_1",
+    "button_2",
+  ]);
+
+  parseBlock("button", ["background", "title", "icons", "leading_icon"]);
+
+  return result;
+};

package/manifestUtils/index.js

@@ -24,6 +24,7 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
+const { getModalBlockStyles, getModalLocalizations } = require("./modalBlocks");
 
 const {
   secondaryImage,
@@ -54,4 +55,6 @@ module.exports = {
   getUpdatedSecondaryImageKeys,
   DEFAULT_GRADIENT_IMAGE,
   compact,
+  getModalBlockStyles,
+  getModalLocalizations,
 };

package/manifestUtils/modalBlocks.js

@@ -0,0 +1,304 @@
+function getModalBlockStyles({ prefix }) {
+  return [
+    {
+      group: true,
+      label: "Header Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_backgroundColor`,
+          label: "Header Background Color",
+          initial_value: "rgba(30,30,30,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_borderBottomColor`,
+          label: "Header Border Bottom Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_container_default_borderBottomSize`,
+          label: "Header Border Bottom Size",
+          initial_value: 0,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_title_default_fontColor`,
+          label: "Header Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_fontSize`,
+          label: "Header Title Font Size",
+          initial_value: 18,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_lineHeight`,
+          label: "Header Title Line Height",
+          initial_value: 32,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_default_backgroundColor`,
+          label: "Close Button Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_hover_backgroundColor`,
+          label: "Close Button Hover Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_header_close_button_asset`,
+          label: "Close Button Icon Asset",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_backgroundColor`,
+          label: "Header Action Button Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_hover_backgroundColor`,
+          label: "Header Action Button Hover Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_fontColor`,
+          label: "Header Action Button Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_fontSize`,
+          label: "Header Action Button Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_borderRadius`,
+          label: "Header Action Button Radius",
+          initial_value: 16,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Item Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_default_backgroundColor`,
+          label: "Item Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_focus_backgroundColor`,
+          label: "Item Focus/Touch Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_borderRadius`,
+          label: "Item Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingTop`,
+          label: "Item Padding Top",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingBottom`,
+          label: "Item Padding Bottom",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingLeft`,
+          label: "Item Padding Left",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingRight`,
+          label: "Item Padding Right",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_width`,
+          label: "Item Image Width",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_height`,
+          label: "Item Image Height",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_borderRadius`,
+          label: "Item Image Radius",
+          initial_value: 6,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_1_default_fontColor`,
+          label: "Item Title Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_1_default_fontSize`,
+          label: "Item Title Font Size",
+          initial_value: 15,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_2_default_fontColor`,
+          label: "Item Subtitle Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_2_default_fontSize`,
+          label: "Item Subtitle Font Size",
+          initial_value: 13,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Action Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_default_backgroundColor`,
+          label: "Action Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_hover_backgroundColor`,
+          label: "Action Hover/Touch Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_borderRadius`,
+          label: "Action Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingTop`,
+          label: "Action Padding Top",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingBottom`,
+          label: "Action Padding Bottom",
+          initial_value: 14,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_title_default_fontColor`,
+          label: "Action Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_title_default_fontSize`,
+          label: "Action Title Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_action_trailing_icon_chevron_asset`,
+          label: "Action Chevron Asset",
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Button Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_default_backgroundColor`,
+          label: "Button Background Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_focus_backgroundColor`,
+          label: "Button Focus Color",
+          initial_value: "#E0E0E0",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_inactive_backgroundColor`,
+          label: "Button Inactive Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_background_default_borderRadius`,
+          label: "Button Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_title_default_fontColor`,
+          label: "Button Title Color",
+          initial_value: "#000000",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_title_default_fontSize`,
+          label: "Button Title Font Size",
+          initial_value: 15,
+        },
+      ],
+    },
+  ];
+}
+
+function getModalLocalizations({ prefix }) {
+  return [
+    {
+      type: "text_input",
+      label: "Queue Header Title",
+      key: `${prefix}_header_title`,
+      initial_value: "Queue",
+    },
+    {
+      type: "text_input",
+      label: "Go To Queue Action Label",
+      key: `${prefix}_label_go_to_queue`,
+      initial_value: "Go To Queue",
+    },
+  ];
+}
+
+module.exports = {
+  getModalBlockStyles,
+  getModalLocalizations,
+};