@applicaster/zapp-react-native-utils 16.0.0-alpha.2529997432 → 16.0.0-alpha.2554311249

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;
+};

package/entryActions/__tests__/buildEntryActions.test.ts

@@ -0,0 +1,195 @@
+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",
+    });
+  });
+});
+
+describe("buildEntryActions - invokeAction execution context", () => {
+  it("forwards the List component from invoke options into handleActions", async () => {
+    const handleActions = jest.fn();
+
+    const component = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const deps = {
+      actionExecutor: { handleActions } as any,
+      actionContext: { screenData: { id: "playlist-screen" } },
+    };
+
+    const entry = {
+      id: "entry-1",
+      extensions: {
+        entry_action: [
+          {
+            button: { title: "Edit Name" },
+            actions: [{ type: "refreshComponent" }],
+          },
+        ],
+      },
+    };
+
+    const [action] = buildEntryActions(entry as any, deps);
+
+    await action.action.invokeAction(entry as any, { component });
+
+    expect(handleActions).toHaveBeenCalledWith([{ type: "refreshComponent" }], {
+      entry,
+      entryContext: entry,
+      screenData: { id: "playlist-screen" },
+      component,
+    });
+  });
+});