@applicaster/zapp-react-native-utils 16.0.0-alpha.1740103407 → 16.0.0-alpha.1798567344

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/entryActions/__tests__/buildEntryActions.test.ts

@@ -0,0 +1,156 @@
+import { buildEntryActions } from "../buildEntryActions";
+
+describe("buildEntryActions - alias & label resolution", () => {
+  const mockDeps = {
+    actionExecutor: { handleActions: jest.fn() } as any,
+    actionContext: {},
+  };
+
+  const resolveEntryActions = (entry: ZappEntry) =>
+    buildEntryActions(entry, mockDeps);
+
+  it("resolves entry action with explicit button title", () => {
+    const entry = {
+      id: "entry-1",
+      extensions: {
+        entry_action: [
+          {
+            button: {
+              title: "Custom Action Title",
+              iconURL: "http://example.com/icon.png",
+            },
+            actions: [{ type: "test" }],
+            dismiss_on_action: true,
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
+
+    expect(actions).toHaveLength(1);
+    expect(actions[0].identifier).toBe("entry_action_0");
+
+    const state = actions[0].action.initialEntryState(entry as any);
+
+    expect(state).toEqual({
+      state: 0,
+      label: "Custom Action Title",
+      asset: "http://example.com/icon.png",
+    });
+  });
+
+  it("resolves entry action with button label property", () => {
+    const entry = {
+      id: "entry-2",
+      extensions: {
+        entry_action: [
+          {
+            button: { label: "Label Property Action" },
+            actions: [{ type: "test" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
+
+    expect(actions).toHaveLength(1);
+    const state = actions[0].action.initialEntryState(entry as any);
+    expect(state.label).toBe("Label Property Action");
+  });
+
+  it("resolves entry action with known backend button alias (e.g. add_all_to_queue)", () => {
+    const entry = {
+      id: "entry-3",
+      extensions: {
+        entry_action: [
+          {
+            button: { alias: "add_all_to_queue" },
+            actions: [{ type: "test" }],
+            dismiss_on_action: true,
+          },
+          {
+            button: { alias: "add_to_playlist" },
+            actions: [{ type: "test" }],
+          },
+          {
+            button: { alias: "delete_collection" },
+            actions: [{ type: "test" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
+
+    expect(actions).toHaveLength(3);
+
+    expect(actions[0].action.initialEntryState(entry as any)).toMatchObject({
+      state: 0,
+      label: "Add all to Queue",
+    });
+
+    expect(actions[1].action.initialEntryState(entry as any)).toMatchObject({
+      state: 0,
+      label: "Add to Playlist",
+    });
+
+    expect(actions[2].action.initialEntryState(entry as any)).toMatchObject({
+      state: 0,
+      label: "Delete collection",
+    });
+  });
+
+  it("formats unknown alias nicely as fallback", () => {
+    const entry = {
+      id: "entry-4",
+      extensions: {
+        entry_action: [
+          {
+            button: { alias: "custom_unknown_action" },
+            actions: [{ type: "test" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
+
+    expect(actions).toHaveLength(1);
+    const state = actions[0].action.initialEntryState(entry as any);
+    expect(state.label).toBe("Custom unknown action");
+  });
+
+  it("uses actionExecutor.getActionState for plugin-provided label and asset", () => {
+    mockDeps.actionExecutor.getActionState = jest.fn(() => ({
+      label: "From Plugin",
+      asset: "plugin_asset",
+    }));
+
+    const entry = {
+      id: "entry-plugin-state",
+      extensions: {
+        entry_action: [
+          {
+            button: { alias: "custom_plugin_action" },
+            actions: [{ type: "plugin-action" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
+    const state = actions[0].action.initialEntryState(entry as any);
+
+    expect(mockDeps.actionExecutor.getActionState).toHaveBeenCalledWith(
+      "plugin-action",
+      entry
+    );
+
+    expect(state).toMatchObject({
+      label: "From Plugin",
+      asset: "plugin_asset",
+    });
+  });
+});

package/entryActions/aliasPresentation.ts

@@ -0,0 +1,124 @@
+/**
+ * Presentation defaults for backend action aliases.
+ *
+ * Entries may declare an action by `alias` alone, without a label or an icon.
+ * These maps are the last-resort labels/icons for the aliases we know about; an
+ * unknown alias falls back to a humanized version of the alias itself.
+ *
+ * They are defaults, not a framework guarantee: an app that speaks a different
+ * alias vocabulary, needs other languages, or does not want to depend on these
+ * icon hosts passes its own through `EntryActionDeps.aliasPresentation`.
+ */
+
+import { EntryAction } from "./types";
+
+const ADD_TO_PLAYLIST_ICON =
+  "https://assets-secure.applicaster.com/zapp/assets/app_family/1710/906728572617/playlist_add_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.png";
+
+const REMOVE_ICON =
+  "https://assets-secure.applicaster.com/zapp/assets/app_family/1710/372097240191/remove_24dp_EA3323_FILL0_wght400_GRAD0_opsz24.png";
+
+const EDIT_ICON =
+  "https://upload.wikimedia.org/wikipedia/commons/b/b6/Edit-icon.png";
+
+/** Known backend action alias labels. */
+export const ALIAS_LABELS: Record<string, string> = {
+  add_to_playlist: "Add to Playlist",
+  add_to_queue: "Add to Queue",
+  add_all_to_queue: "Add all to Queue",
+  play_all: "Play All",
+  remove_item: "Remove item",
+  delete_collection: "Delete collection",
+  create_collection: "Create collection",
+  edit: "Edit",
+  edit_name: "Edit Name & Details",
+};
+
+/** Known backend action alias image assets. */
+export const ALIAS_ASSETS: Record<string, string> = {
+  add_to_playlist: ADD_TO_PLAYLIST_ICON,
+  add_to_queue: ADD_TO_PLAYLIST_ICON,
+  add_all_to_queue: ADD_TO_PLAYLIST_ICON,
+  play_all: ADD_TO_PLAYLIST_ICON,
+  remove_item: REMOVE_ICON,
+  delete_collection: REMOVE_ICON,
+  edit: EDIT_ICON,
+  edit_name: EDIT_ICON,
+};
+
+/** Per-app overrides for the maps above. */
+export type AliasPresentation = {
+  labels?: Record<string, string>;
+  assets?: Record<string, string>;
+};
+
+function formatAliasLabel(
+  alias: string,
+  overrides?: AliasPresentation
+): string {
+  const label = overrides?.labels?.[alias] ?? ALIAS_LABELS[alias];
+
+  if (label) {
+    return label;
+  }
+
+  const formatted = alias.replace(/_/g, " ");
+
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
+const nonEmptyString = (value: unknown): value is string =>
+  typeof value === "string" && value.length > 0;
+
+/**
+ * Label the backend stated outright, if any. Distinct from
+ * {@link resolveButtonLabel} because an explicit label outranks the executor's
+ * action state, while the alias fallback does not.
+ */
+export function resolveExplicitLabel(
+  button: EntryAction["button"]
+): string | undefined {
+  if (nonEmptyString(button?.title)) {
+    return button.title;
+  }
+
+  if (nonEmptyString(button?.label)) {
+    return button.label;
+  }
+
+  return undefined;
+}
+
+/** Label to show for an entry action: explicit title/label, else the alias. */
+export function resolveButtonLabel(
+  button: EntryAction["button"],
+  overrides?: AliasPresentation
+): string {
+  const explicit = resolveExplicitLabel(button);
+
+  if (explicit) {
+    return explicit;
+  }
+
+  if (nonEmptyString(button?.alias)) {
+    return formatAliasLabel(button.alias, overrides);
+  }
+
+  return "";
+}
+
+/** Icon to show for an entry action: explicit iconURL, else the alias default. */
+export function resolveButtonAsset(
+  button: EntryAction["button"],
+  overrides?: AliasPresentation
+): string | undefined {
+  if (button?.iconURL) {
+    return button.iconURL;
+  }
+
+  if (!button?.alias) {
+    return undefined;
+  }
+
+  return overrides?.assets?.[button.alias] ?? ALIAS_ASSETS[button.alias];
+}