@applicaster/zapp-react-native-ui-components 16.0.0-rc.9 → 16.0.0-rc.91

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  isActionAvailableFor,
+  RegisteredAction,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { Button } from "../Button";
+
+export type ActionButtonProps = {
+  entry: ZappEntry;
+  item: RegisteredAction;
+  configuration: any;
+  width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+type Props = ActionButtonProps & {
+  onPress?: (item: any) => void;
+};
+
+/**
+ * Unified action button for the modal bottom sheet.
+ *
+ * Every item is a `RegisteredAction` resolved from the registry (entry actions,
+ * registry actions and legacy context-provider actions alike), so the button
+ * simply reads `item.action` and drives it through `useEntryActionState`
+ * (backed by the action's observable / `addListener`).
+ */
+export function ActionButton(props: Props) {
+  const { item, entry, onPress: onItemPress, component } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
+      });
+    },
+    [invokeAction, item, onItemPress, component]
+  );
+
+  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
+
+  return (
+    <Button {...props} item={state} onPress={onPress} label={state?.label} />
+  );
+}
+
+// Explicitly set display name for the component
+ActionButton.displayName = "ActionButton";

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

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ActionButton, ActionButtonProps } from "./ActionButton";
+
+/**
+ * Binds an entry to the sheet's row button.
+ *
+ * `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,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
+  );
+
+  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
+
+  return ActionButtonWithEntry;
+};
+
+boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -0,0 +1,9 @@
+export { ActionButton } from "./ActionButton";
+
+export type { ActionButtonProps } from "./ActionButton";
+
+export { boundActionButton } from "./boundActionButton";
+
+export { openActionsBottomSheet } from "./openActionsBottomSheet";
+
+export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -0,0 +1,61 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { boundActionButton } from "./boundActionButton";
+
+const { log_warning } = createLogger({
+  subsystem: "ActionsBottomSheet",
+  category: "Presentation",
+});
+
+export type OpenActionsBottomSheetArgs = {
+  /** Entry the actions act on; bound into every row button. */
+  entry: ZappEntry | ZappFeed;
+  /** Already resolved and merged actions, in the order they should appear. */
+  actions: RegisteredAction[];
+  title?: string;
+  summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+/**
+ * Presents a list of resolved actions in the shared bottom sheet.
+ *
+ * This is the core entry point for "show these actions in a sheet": the
+ * open-modal-bottom-sheet plugin uses it for its configured list, and the
+ * player overflow uses it for the actions that did not fit on the overlay.
+ * Neither has to know about the other, and neither needs the plugin installed.
+ */
+export function openActionsBottomSheet({
+  entry,
+  actions,
+  title,
+  summary,
+  component,
+}: OpenActionsBottomSheetArgs): void {
+  if (!actions?.length) {
+    // Every action resolved away - unavailable for this entry, or not
+    // invokable. An empty sheet looks broken, so say why and stay put.
+    log_warning(
+      "openActionsBottomSheet: nothing to present - not opening the sheet",
+      { entryId: (entry as ZappEntry)?.id }
+    );
+
+    return;
+  }
+
+  openBottomSheetModal({
+    modalBottomSheetContentProps: {
+      // TODO: should be optional - the button handles its own tap, but
+      //  BottomSheetModalContent still requires an onPress.
+      onPress: noop,
+      items: actions,
+      buttonComponent: boundActionButton(entry, component),
+      title,
+      summary,
+    },
+  });
+}

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

@@ -0,0 +1,392 @@
+/**
+ * Modal Building Block — Button
+ *
+ * Single-file Expo Snack demo for the Button building block spec.
+ * Two variants (with / without leading icon) are driven only by configuration + data.
+ *
+ * Green (configurable): background, title, icons (size + leading icon enable/action type)
+ * Black (hardcoded): action type → icon asset mapping
+ */
+
+import React from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  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: {
+    alignSelf: "stretch",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  contentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    textAlign: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields from spec)
+// ---------------------------------------------------------------------------
+
+export type ButtonActionType =
+  | "addToQueue"
+  | "addToPlaylist"
+  | "goToPlaylist"
+  | "confirm"
+  | "cancel";
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  inactiveColor: string;
+  cornerRadius: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  horizontalGutter: number;
+};
+
+export type TitleConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  inactiveFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type LeadingIconConfiguration = {
+  /** Enable: On / Off */
+  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 = {
+  width: number;
+  height: number;
+  leadingIcon: LeadingIconConfiguration;
+};
+
+export type ButtonConfiguration = {
+  background: BackgroundConfiguration;
+  title: TitleConfiguration;
+  icons: IconsConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "#FFFFFF",
+  focusedColor: "#E0E0E0",
+  inactiveColor: "#999999",
+  cornerRadius: 12,
+  paddingTop: 12,
+  paddingRight: 12,
+  paddingBottom: 12,
+  paddingLeft: 12,
+  horizontalGutter: 6,
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#000000",
+  focusedFontColor: "#000000",
+  inactiveFontColor: "#000000",
+  iosFontFamily: "SFProText-Bold",
+  androidFontFamily: "Roboto-Bold",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
+  width: 24,
+  height: 24,
+  leadingIcon: {
+    enabled: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 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)
+// ---------------------------------------------------------------------------
+
+export type ButtonData = {
+  title: string;
+  disabled?: boolean;
+};
+
+export type AudioPlayerButtonProps = {
+  configuration?: ButtonConfiguration;
+  data?: ButtonData;
+  disabled?: boolean;
+  focused?: boolean;
+  onPress?: () => void;
+};
+
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inner components (hardcoded styling lives here)
+// ---------------------------------------------------------------------------
+
+type ButtonContainerProps = {
+  focused: boolean;
+  disabled: boolean;
+  configuration: BackgroundConfiguration;
+  children: React.ReactNode;
+  onPress?: () => void;
+};
+
+function ButtonContainer({
+  focused,
+  disabled,
+  configuration,
+  children,
+  onPress,
+}: ButtonContainerProps) {
+  const defaultBgColor = disabled
+    ? configuration.inactiveColor
+    : focused
+      ? configuration.focusedColor
+      : configuration.defaultColor;
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      style={({ pressed }) => [
+        styles.container,
+        {
+          backgroundColor:
+            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
+          borderRadius: configuration.cornerRadius,
+          paddingTop: configuration.paddingTop,
+          paddingRight: configuration.paddingRight,
+          paddingBottom: configuration.paddingBottom,
+          paddingLeft: configuration.paddingLeft,
+        },
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+type ButtonTitleProps = {
+  title: string;
+  focused: boolean;
+  disabled: boolean;
+  configuration: TitleConfiguration;
+};
+
+function ButtonTitle({
+  title,
+  focused,
+  disabled,
+  configuration,
+}: ButtonTitleProps) {
+  const color = disabled
+    ? configuration.inactiveFontColor
+    : focused
+      ? configuration.focusedFontColor
+      : configuration.fontColor;
+
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={[
+        styles.title,
+        {
+          color,
+          fontSize: configuration.fontSize,
+          lineHeight: configuration.lineHeight,
+          letterSpacing,
+          fontFamily: Platform.select({
+            ios: configuration.iosFontFamily,
+            android: configuration.androidFontFamily,
+            default: configuration.androidFontFamily,
+          }),
+          textTransform: getTextTransformStyle(configuration.textTransform),
+        },
+      ]}
+      numberOfLines={1}
+    >
+      {title}
+    </Text>
+  );
+}
+
+type ButtonLeadingIconProps = {
+  actionType?: ButtonActionType;
+  configuration: IconsConfiguration;
+};
+
+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;
+  }
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{
+        width: configuration.width,
+        height: configuration.height,
+      }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AudioPlayerButton — single building block driven by configuration + data
+// ---------------------------------------------------------------------------
+
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
+export function AudioPlayerButton({
+  configuration = VARIANT_WITH_ICON,
+  data = { title: undefined },
+  disabled,
+  focused = false,
+  onPress,
+}: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
+  const {
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
+    icons: iconsConfiguration,
+  } = effectiveConfig;
+
+  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);
+
+  return (
+    <ButtonContainer
+      focused={focused}
+      disabled={isDisabled}
+      configuration={effectiveBgConfig}
+      onPress={onPress}
+    >
+      <View style={styles.contentRow}>
+        {showIcon ? (
+          <>
+            <ButtonLeadingIcon
+              actionType={leadingIcon.actionType}
+              configuration={iconsConfiguration}
+            />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
+          </>
+        ) : null}
+        <ButtonTitle
+          title={title}
+          focused={focused}
+          disabled={isDisabled}
+          configuration={effectiveTitleConfig}
+        />
+      </View>
+    </ButtonContainer>
+  );
+}