@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

package/Components/LinkHandler/LinkHandler.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   inflateString,
   objectToReadableString,
@@ -40,12 +39,8 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
 
-  const ScreenPlugin = findPluginByIdentifier(
-    WEBVIEW_SCREEN_IDENTIFIER,
-    plugins
-  );
+  const ScreenPlugin = getPluginByIdentifier(WEBVIEW_SCREEN_IDENTIFIER);
 
   const Component =
     R.path(["module", "Component"], ScreenPlugin) ||

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -57,6 +58,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -81,8 +83,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/ActionButtonController.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 type ActionDefinition = {
   identifier?: string;
@@ -61,6 +62,7 @@ export function ActionButtonController({
   const resolvedEntry = entry;
   const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
   const actionContext = useActions(resolvedIdentifier);
+  const component = useUIComponentContext();
 
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
@@ -128,20 +130,33 @@ export function ActionButtonController({
       return;
     }
 
+    const invokeOptions: InvokeArgsOptions = {
+      ...(component ? { component } : {}),
+    };
+
     if (supportsEntryState) {
       return actionContext.invokeAction?.(resolvedEntry, {
+        ...invokeOptions,
         updateState: setActionState,
       });
     }
 
+    if (typeof actionContext.invokeAction === "function") {
+      return actionContext.invokeAction(resolvedEntry, invokeOptions);
+    }
+
     const favouritesAction = legacySelected
       ? actionContext.removeFavourite
       : actionContext.addFavourite;
 
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(resolvedEntry);
-  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+    return favouritesAction?.(resolvedEntry);
+  }, [
+    actionContext,
+    supportsEntryState,
+    resolvedEntry,
+    legacySelected,
+    component,
+  ]);
 
   if (!actionContext || actionDisabled) {
     if (!actionContext) {

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/__tests__/ActionButtonController.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { UIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import { ActionButtonController } from "../ActionButtonController";
 
@@ -89,6 +90,47 @@ describe("ActionButtonController", () => {
     );
   });
 
+  it("passes the List UIComponentContext into invokeAction so the sheet can refresh it", () => {
+    const listComponent = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <UIComponentContext.Provider value={listComponent}>
+        <ActionButtonController
+          action={{ identifier: "open-modal-bottom-sheet-cell-action" }}
+          entry={entry}
+        >
+          {({ onPress }) => (
+            <Text testID="content" onPress={onPress}>
+              press
+            </Text>
+          )}
+        </ActionButtonController>
+      </UIComponentContext.Provider>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+        component: listComponent,
+      })
+    );
+  });
+
   it("updates state from addListener", () => {
     let listener;
 
@@ -328,7 +370,7 @@ describe("ActionButtonController", () => {
 
     fireEvent.press(getByTestId("content"));
 
-    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(invokeAction).toHaveBeenCalledWith(entry, {});
     expect(addFavourite).not.toHaveBeenCalled();
     expect(removeFavourite).not.toHaveBeenCalled();
   });

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -249,9 +249,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
 
   const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("stretches to the parent width so labels wrap using the cell width", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("stretch");
+  });
+});

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -3,7 +3,6 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import {
   getColorFromData,
   getKeyForLabel,
-  mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
@@ -23,7 +22,7 @@ export const CollapsibleTextContainer = ({
   return {
     type: "CollapsibleTextContainer", // Collapsible Text Container,
     style: {
-      alignSelf: mapSelfAlignment(getValue("text_alignment")),
+      alignSelf: "stretch",
       marginTop: toNumberWithDefaultZero(getValue("margin_top")),
       marginRight: toNumberWithDefaultZero(getValue("margin_right")),
       marginBottom: toNumberWithDefaultZero(getValue("margin_bottom")),

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -12,6 +12,7 @@ export type ActionButtonProps = {
   item: RegisteredAction;
   configuration: any;
   width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
 };
 
 type Props = ActionButtonProps & {
@@ -27,7 +28,7 @@ type Props = ActionButtonProps & {
  * (backed by the action's observable / `addListener`).
  */
 export function ActionButton(props: Props) {
-  const { item, entry, onPress: onItemPress } = props;
+  const { item, entry, onPress: onItemPress, component } = props;
 
   const action = item?.action;
 
@@ -38,9 +39,10 @@ export function ActionButton(props: Props) {
       invokeAction({
         context: "toast",
         dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
       });
     },
-    [invokeAction, item, onItemPress]
+    [invokeAction, item, onItemPress, component]
   );
 
   if (!isActionAvailableFor(action, entry as ZappEntry)) return null;

package/Components/ModalComponent/ActionsBottomSheet/__tests__/openActionsBottomSheet.test.ts

@@ -0,0 +1,38 @@
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { boundActionButton } from "../boundActionButton";
+import { openActionsBottomSheet } from "../openActionsBottomSheet";
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../boundActionButton", () => ({
+  boundActionButton: jest.fn(() => jest.fn()),
+}));
+
+describe("openActionsBottomSheet", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("binds the List component into the sheet row button", () => {
+    const entry = { id: "entry-1" } as ZappEntry;
+
+    const component = {
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actions = [
+      { identifier: "entry_action_0", action: { invokeAction: jest.fn() } },
+    ];
+
+    openActionsBottomSheet({
+      entry,
+      actions: actions as any,
+      component: component as any,
+    });
+
+    expect(boundActionButton).toHaveBeenCalledWith(entry, component);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -8,9 +8,12 @@ import { ActionButton, ActionButtonProps } from "./ActionButton";
  * `BottomSheetModalContent` renders `buttonComponent` per item and does not
  * know about entries, so the entry is closed over here instead.
  */
-export const boundActionButton = (entry: ZappEntry | ZappFeed) => {
+export const boundActionButton = (
+  entry: ZappEntry | ZappFeed,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
   const ActionButtonWithEntry = (props: ActionButtonProps) => (
-    <ActionButton {...props} entry={entry as ZappEntry} />
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
   );
 
   ActionButtonWithEntry.displayName = "ActionButtonWithEntry";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -17,6 +17,8 @@ export type OpenActionsBottomSheetArgs = {
   actions: RegisteredAction[];
   title?: string;
   summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
 };
 
 /**
@@ -32,6 +34,7 @@ export function openActionsBottomSheet({
   actions,
   title,
   summary,
+  component,
 }: OpenActionsBottomSheetArgs): void {
   if (!actions?.length) {
     // Every action resolved away - unavailable for this entry, or not
@@ -50,7 +53,7 @@ export function openActionsBottomSheet({
       //  BottomSheetModalContent still requires an onPress.
       onPress: noop,
       items: actions,
-      buttonComponent: boundActionButton(entry),
+      buttonComponent: boundActionButton(entry, component),
       title,
       summary,
     },

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -17,6 +17,9 @@ import {
   Text,
   View,
 } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const logger = createLogger({ category: "ModalComponent:AudioPlayerButton" });
 
 const styles = StyleSheet.create({
   container: {
@@ -130,6 +133,28 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Variant configurations
+// ---------------------------------------------------------------------------
+
+export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: DEFAULT_ICONS_CONFIGURATION,
+};
+
+export const VARIANT_WITH_ICON: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: {
+    ...DEFAULT_ICONS_CONFIGURATION,
+    leadingIcon: {
+      enabled: true,
+      actionType: "addToPlaylist",
+    },
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Data (runtime / localization — not styling config)
 // ---------------------------------------------------------------------------
@@ -140,30 +165,15 @@ export type ButtonData = {
 };
 
 export type AudioPlayerButtonProps = {
-  configuration: ButtonConfiguration;
-  data: ButtonData;
+  configuration?: ButtonConfiguration;
+  data?: ButtonData;
   disabled?: boolean;
   focused?: boolean;
   onPress?: () => void;
 };
 
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (black fields)
-// ---------------------------------------------------------------------------
-
-// Hardcoded: action type → icon asset mapping (base64 PNG)
-const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDCfxHw6MWjFpAvEGk4lELKLdgNJmOWkA7C0YBbQAAwiZvkR9eFgQAAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJklEQVR42mNgGAUjFvzHgmluATF4cFswGsmjkTwayaORPAqGLwAA6Jpxj9Ms9QMAAAAASUVORK5CYII=",
-  goToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALklEQVR42mNgGAWjYNiD/7Q2/D8tLflPiSX/ycQ0t+D/yLGAEkeMWjAKRgG9AQB4zlSshwSzWwAAAABJRU5ErkJggg==",
-  confirm:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
-  cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
-};
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
 
 function getTextTransformStyle(
   textTransform: TextTransform
@@ -276,13 +286,19 @@ type ButtonLeadingIconProps = {
   configuration: IconsConfiguration;
 };
 
-function ButtonLeadingIcon({
-  actionType,
-  configuration,
-}: ButtonLeadingIconProps) {
-  const asset =
-    configuration.leadingIcon.asset ||
-    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+function ButtonLeadingIcon({ configuration }: ButtonLeadingIconProps) {
+  const asset = configuration.leadingIcon.asset || PLACEHOLDER_RED_BOX;
+
+  React.useEffect(() => {
+    if (!configuration.leadingIcon.asset) {
+      logger.log_warning(
+        "AudioPlayerButton has leadingIcon enabled but no asset was provided. Falling back to placeholder red box. Ensure the relevant plugin (e.g. playlist-experience) provides leadingIcon.asset in styleOverrides.",
+        {
+          leadingIcon: configuration.leadingIcon,
+        }
+      );
+    }
+  }, [configuration.leadingIcon.asset]);
 
   if (!asset) {
     return null;
@@ -308,13 +324,14 @@ import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
 import { mergeButtonConfiguration } from "../utils/mergeStyles";
 
 export function AudioPlayerButton({
-  configuration,
-  data,
+  configuration = VARIANT_WITH_ICON,
+  data = { title: undefined },
   disabled,
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
   const modalBlocksStyle = useModalBlocksStyle();
+
   const buttonBlock = modalBlocksStyle?.button;
   const actionBlock = modalBlocksStyle?.action;
 
@@ -328,9 +345,21 @@ export function AudioPlayerButton({
     icons: iconsConfiguration,
   } = effectiveConfig;
 
-  const { title } = data;
+  const title = data?.title || buttonBlock?.title.default;
   const isDisabled = disabled ?? data.disabled ?? false;
 
+  React.useEffect(() => {
+    if (!title) {
+      logger.log_warning(
+        "Create New Playlist button rendering with empty title. Ensure data.title is set for AudioPlayerButton or styleOverrides providing button title.",
+        {
+          leadingIcon: iconsConfiguration.leadingIcon,
+          modalBlocksStyle: modalBlocksStyle,
+        }
+      );
+    }
+  }, [title]);
+
   const { leadingIcon } = iconsConfiguration;
   const showIcon = shouldShowLeadingIcon(leadingIcon);
 
@@ -361,47 +390,3 @@ export function AudioPlayerButton({
     </ButtonContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Snack demo — two Button variants from configuration only
-// ---------------------------------------------------------------------------
-
-export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_WITH_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToPlaylist",
-    },
-  },
-};
-
-export const VARIANT_UPPERCASE_TITLE: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: {
-    ...DEFAULT_TITLE_CONFIGURATION,
-    textTransform: "uppercase",
-  },
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_LARGE_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    width: 32,
-    height: 32,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToQueue",
-    },
-  },
-};