@applicaster/zapp-react-native-ui-components 16.0.0-alpha.4004661200 → 16.0.0-alpha.4065452341

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -1,6 +1,11 @@
 import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  looksLikeSkipExpression,
+  parseSkipExpression,
+  evaluateSkipExpression,
+} from "./skipExpression";
 import { log_error, log_info } from "./logger";
 
 type ParseKey = { key: string; namespace?: string };
@@ -23,6 +28,12 @@ export const getKeyToSkipHook = async (key: string, namespace?: string) => {
   return await localStorage.getItem(key, namespace);
 };
 
+/**
+ * Decides whether the hook should be skipped, from the `skip_hook_storage_key`
+ * rule. The value is either a comma-separated key list — skip when ANY of them
+ * exists — or, packed into the same string, a JSON boolean expression over
+ * storage keys. See `skipExpression.ts` for the expression format.
+ */
 export const shouldSkipHook = async (
   skipHookIfKeysExist?: string
 ): Promise<boolean> => {
@@ -32,6 +43,13 @@ export const shouldSkipHook = async (
     return false;
   }
 
+  if (looksLikeSkipExpression(skipHookIfKeysExist)) {
+    return await evaluateSkipExpression(
+      parseSkipExpression(skipHookIfKeysExist),
+      getKeyToSkipHook
+    );
+  }
+
   const keyEntries = parseKeyEntries(skipHookIfKeysExist);
 
   if (keyEntries.length === 0) {

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") {
@@ -105,6 +108,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

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/Button.tsx

@@ -91,6 +91,7 @@ function ButtonComponent(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

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

@@ -81,6 +81,8 @@ export type LeadingIconConfiguration = {
   enabled: boolean;
   /** Decides which icon will be displayed when enabled */
   actionType?: ButtonActionType;
+  /** Optional Studio / modal-blocks asset URI (overrides actionType mapping) */
+  asset?: string;
 };
 
 export type IconsConfiguration = {
@@ -170,7 +172,9 @@ function getTextTransformStyle(
 }
 
 function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
-  return leadingIcon.enabled && !!leadingIcon.actionType;
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -268,7 +272,7 @@ function ButtonTitle({
 }
 
 type ButtonLeadingIconProps = {
-  actionType: ButtonActionType;
+  actionType?: ButtonActionType;
   configuration: IconsConfiguration;
 };
 
@@ -276,9 +280,17 @@ function ButtonLeadingIcon({
   actionType,
   configuration,
 }: ButtonLeadingIconProps) {
+  const asset =
+    configuration.leadingIcon.asset ||
+    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+
+  if (!asset) {
+    return null;
+  }
+
   return (
     <Image
-      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
+      source={{ uri: asset }}
       style={{
         width: configuration.width,
         height: configuration.height,
@@ -351,7 +363,7 @@ export function AudioPlayerButton({
 }
 
 // ---------------------------------------------------------------------------
-// Snack demo — two Button variants from configuration only
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
@@ -371,25 +383,3 @@ export const VARIANT_WITH_ICON: ButtonConfiguration = {
     },
   },
 };
-
-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",
-    },
-  },
-};

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -63,11 +63,7 @@ export type TextTransform =
 export type TitleAlignment = "left" | "center";
 
 /** Selects hardcoded container + action layout (white fields). */
-export type HeaderVariant =
-  | "singleLine"
-  | "headerWithActions"
-  | "headerWithActionsCancelOnly"
-  | "section";
+export type HeaderVariant = "singleLine" | "headerWithActions" | "section";
 
 export type TitleConfiguration = {
   fontColor: string;
@@ -198,13 +194,6 @@ const CONTAINER_SPEC: Record<HeaderVariant, ContainerSpec> = {
     paddingBottom: 8,
     paddingLeft: 20,
   },
-  headerWithActionsCancelOnly: {
-    horizontalGutter: 12,
-    paddingTop: 0,
-    paddingRight: 20,
-    paddingBottom: 8,
-    paddingLeft: 20,
-  },
   section: {
     horizontalGutter: 12,
     paddingTop: 0,
@@ -228,11 +217,6 @@ const ACTION_BUTTONS_BEHAVIOR: Record<
     leading: { enabled: true, actionType: "cancel" },
     trailing: { enabled: true, actionType: "done" },
   },
-  headerWithActionsCancelOnly: {
-    sectionEnabled: true,
-    leading: { enabled: true, actionType: "cancel" },
-    trailing: { enabled: false },
-  },
   section: {
     sectionEnabled: true,
     leading: { enabled: false },
@@ -725,25 +709,6 @@ export const VARIANT_HEADER_WITH_ACTIONS: HeaderConfiguration = {
   paddingTop: 16,
 };
 
-/** Variant 2 — single side action (layout rule demo) */
-export const VARIANT_HEADER_WITH_CANCEL_ONLY: HeaderConfiguration = {
-  variant: "headerWithActionsCancelOnly",
-  title: {
-    fontColor: "#FFFFFF",
-    iosFontFamily: "SFProText-Bold",
-    androidFontFamily: "Roboto-Bold",
-    fontSize: 22,
-    lineHeight: 28,
-    iosLetterSpacing: -0.6,
-    androidLetterSpacing: 0,
-    textTransform: "default",
-    alignment: "center",
-  },
-  closeButton: { enabled: false },
-  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
-  paddingTop: 16,
-};
-
 /** Variant 3 — Section Header */
 export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   variant: "section",

package/Components/ModalComponent/AudioPlayer/Components/Input.tsx

@@ -565,7 +565,7 @@ export function AudioPlayerInput({
 }
 
 // ---------------------------------------------------------------------------
-// Variant presets — collections of configuration keys (not a variant field)
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 /** Search pill — leading icon + clear button */
@@ -626,28 +626,3 @@ export const VARIANT_NAME_PLAYLIST_INPUT: InputConfiguration = {
     },
   },
 };
-
-/** Text only search pill — no leading icon */
-export const VARIANT_TEXT_ONLY_INPUT: InputConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  label: DEFAULT_LABEL_CONFIGURATION,
-  text: DEFAULT_TEXT_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: { enabled: false },
-  },
-};
-
-/** Search without clear button */
-export const VARIANT_SEARCH_WITHOUT_CLEAR: InputConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  label: DEFAULT_LABEL_CONFIGURATION,
-  text: DEFAULT_TEXT_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    trailingIcon: {
-      ...DEFAULT_ICONS_CONFIGURATION.trailingIcon,
-      enabled: false,
-    },
-  },
-};