@applicaster/zapp-react-native-utils 15.1.10 → 15.1.11-alpha.7557142055

package/arrayUtils/index.ts

@@ -121,3 +121,82 @@ export const allTruthy = (xs: boolean[]) =>
   isFilledArray(xs) && xs.every(Boolean);
 
 export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);
+
+/**
+ * Reorders `items` based on an ordered array of IDs (`orderedIds`).
+ * Items whose IDs are in `orderedIds` appear first in that exact sequence.
+ * Any remaining items not present in `orderedIds` are appended at the end preserving their relative order.
+ */
+export function reorderByIds<T>(
+  items: T[],
+  orderedIds: string[],
+  getId: (item: T) => string | string[] = (item: any) => item?.id
+): T[] {
+  if (!items || items.length === 0) return [];
+  if (!orderedIds || orderedIds.length === 0) return [...items];
+
+  const itemMap = new Map<string, T>();
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    keys.forEach((key) => {
+      if (key !== undefined && key !== null && key !== "") {
+        itemMap.set(String(key), item);
+      }
+    });
+  });
+
+  const reorderedSubset: T[] = [];
+  const orderedIdsSet = new Set<string>();
+
+  orderedIds.forEach((id) => {
+    const strId = String(id);
+    const item = itemMap.get(strId);
+
+    if (item && !reorderedSubset.includes(item)) {
+      reorderedSubset.push(item);
+      const rawId = getId(item);
+      const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+      keys.forEach((k) => {
+        if (k !== undefined && k !== null && k !== "") {
+          orderedIdsSet.add(String(k));
+        }
+      });
+    }
+  });
+
+  if (reorderedSubset.length === 0) return [...items];
+
+  let subsetIdx = 0;
+  const result: T[] = [];
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    const isMatched = keys.some(
+      (k) =>
+        k !== undefined &&
+        k !== null &&
+        k !== "" &&
+        orderedIdsSet.has(String(k))
+    );
+
+    if (isMatched) {
+      if (subsetIdx < reorderedSubset.length) {
+        result.push(reorderedSubset[subsetIdx++]);
+      }
+    } else {
+      result.push(item);
+    }
+  });
+
+  while (subsetIdx < reorderedSubset.length) {
+    result.push(reorderedSubset[subsetIdx++]);
+  }
+
+  return result;
+}

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

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