@applicaster/zapp-react-native-ui-components 16.0.0-rc.8 → 16.0.0-rc.80

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,54 @@
+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;
+};
+
+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 } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+      });
+    },
+    [invokeAction, item, onItemPress]
+  );
+
+  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/boundActionButton.tsx

@@ -0,0 +1,21 @@
+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) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} />
+  );
+
+  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,58 @@
+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;
+};
+
+/**
+ * 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,
+}: 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),
+      title,
+      summary,
+    },
+  });
+}

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -0,0 +1,314 @@
+/**
+ * Modal Building Block — Action
+ *
+ * Single-file Expo Snack demo for the Action list item building block spec.
+ * Three forms (text only / leading icon + text / leading + text + trailing)
+ * are driven by data — no separate variants.
+ *
+ * Green (configurable): background, title, trailingIcon.chevronAsset
+ * White (hardcoded): container padding/gutter, icon size, leading icon assets,
+ *   leading/trailing visibility logic from data
+ */
+
+import React from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields from spec)
+// ---------------------------------------------------------------------------
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  cornerRadius: number;
+};
+
+export type TitleConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type TrailingIconConfiguration = {
+  chevronAsset?: string;
+};
+
+export type ActionConfiguration = {
+  background: BackgroundConfiguration;
+  title: TitleConfiguration;
+  trailingIcon: TrailingIconConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "transparent",
+  focusedColor: "rgba(62, 62, 62, 1)",
+  cornerRadius: 12,
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#FFFFFF",
+  focusedFontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Semibold",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
+  {};
+
+export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
+};
+
+// ---------------------------------------------------------------------------
+// Data (runtime — controls which elements are shown)
+// ---------------------------------------------------------------------------
+
+export type LeadingActionType =
+  | "addToQueue"
+  | "addToPlaylist"
+  | "favorite"
+  | "share"
+  | "sleepTimer"
+  | "playbackSpeed";
+
+export type ActionData = {
+  title: string;
+  /** When set, leading icon is shown (Enable: On). */
+  leadingActionType?: LeadingActionType;
+  /** When true, trailing chevron is shown (Enable: On). */
+  showTrailingChevron?: boolean;
+};
+
+export type AudioPlayerActionProps = {
+  configuration: ActionConfiguration;
+  data: ActionData;
+  focused?: boolean;
+  onPress?: () => void;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded spec values (white fields)
+// ---------------------------------------------------------------------------
+
+const CONTAINER_SPEC = {
+  paddingTop: 13,
+  paddingRight: 10,
+  paddingBottom: 13,
+  paddingLeft: 10,
+  horizontalGutter: 12,
+};
+
+const ICON_SPEC = {
+  width: 24,
+  height: 24,
+};
+
+const DEFAULT_CHEVRON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
+
+/** Hardcoded: action type → leading icon asset (base64 PNG). */
+const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
+  addToQueue:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
+  addToPlaylist:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
+  favorite:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
+  share:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+  sleepTimer:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
+  playbackSpeed:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
+  return !!leadingActionType;
+}
+
+function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
+  return !!showTrailingChevron;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type ActionContainerProps = {
+  configuration: BackgroundConfiguration;
+  focused: boolean;
+  children: React.ReactNode;
+  onPress?: () => void;
+};
+
+function ActionContainer({
+  configuration,
+  focused,
+  children,
+  onPress,
+}: ActionContainerProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor:
+          pressed || focused
+            ? configuration.focusedColor
+            : configuration.defaultColor,
+        borderRadius: configuration.cornerRadius,
+        paddingTop: CONTAINER_SPEC.paddingTop,
+        paddingRight: CONTAINER_SPEC.paddingRight,
+        paddingBottom: CONTAINER_SPEC.paddingBottom,
+        paddingLeft: CONTAINER_SPEC.paddingLeft,
+      })}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+type ActionTitleProps = {
+  title: string;
+  configuration: TitleConfiguration;
+  focused: boolean;
+};
+
+function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={{
+        flex: 1,
+        color: focused
+          ? configuration.focusedFontColor
+          : configuration.fontColor,
+        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 ActionLeadingIconProps = {
+  actionType: LeadingActionType;
+};
+
+function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
+  return (
+    <Image
+      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+type ActionTrailingIconProps = {
+  configuration: TrailingIconConfiguration;
+};
+
+function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
+  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AudioPlayerAction
+// ---------------------------------------------------------------------------
+
+export function AudioPlayerAction({
+  configuration,
+  data,
+  focused = false,
+  onPress,
+}: AudioPlayerActionProps) {
+  const { background, title, trailingIcon } = configuration;
+  const { title: label, leadingActionType, showTrailingChevron } = data;
+
+  const showLeading = shouldShowLeadingIcon(leadingActionType);
+  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
+
+  return (
+    <ActionContainer
+      configuration={background}
+      focused={focused}
+      onPress={onPress}
+    >
+      <View style={styles.row}>
+        {showLeading ? (
+          <>
+            <ActionLeadingIcon actionType={leadingActionType} />
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+          </>
+        ) : null}
+        <ActionTitle title={label} configuration={title} focused={focused} />
+        {showTrailing ? (
+          <>
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+            <ActionTrailingIcon configuration={trailingIcon} />
+          </>
+        ) : null}
+      </View>
+    </ActionContainer>
+  );
+}