@applicaster/zapp-react-native-ui-components 15.1.13-alpha.1034774223 → 15.1.13

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -102,6 +102,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/Button.tsx

@@ -106,6 +106,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/AudioPlayer/Components/Action.tsx

@@ -11,20 +11,31 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
   },
+  demoScreen: {
+    flex: 1,
+    backgroundColor: "#1C1C1E",
+    paddingTop: 64,
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  demoHeading: {
+    color: "#FFFFFF",
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  demoLabel: {
+    color: "#999999",
+    fontSize: 13,
+    marginTop: 8,
+  },
 });
 
 // ---------------------------------------------------------------------------
@@ -112,11 +123,10 @@ export type ActionData = {
   showTrailingChevron?: boolean;
 };
 
-export type AudioPlayerActionProps = {
+export type ItemProps = {
   configuration: ActionConfiguration;
   data: ActionData;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -177,32 +187,28 @@ 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,
+    <View
+      style={{
+        backgroundColor: 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>
+    </View>
   );
 }
 
@@ -273,15 +279,10 @@ function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerAction
+// Item
 // ---------------------------------------------------------------------------
 
-export function AudioPlayerAction({
-  configuration,
-  data,
-  focused = false,
-  onPress,
-}: AudioPlayerActionProps) {
+export function Item({ configuration, data, focused = false }: ItemProps) {
   const { background, title, trailingIcon } = configuration;
   const { title: label, leadingActionType, showTrailingChevron } = data;
 
@@ -289,11 +290,7 @@ export function AudioPlayerAction({
   const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
 
   return (
-    <ActionContainer
-      configuration={background}
-      focused={focused}
-      onPress={onPress}
-    >
+    <ActionContainer configuration={background} focused={focused}>
       <View style={styles.row}>
         {showLeading ? (
           <>
@@ -312,3 +309,60 @@ export function AudioPlayerAction({
     </ActionContainer>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Demo
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text — Add To Queue (focused)
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
+        focused
+      />
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text + trailing chevron — Add To Playlist
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{
+          title: "Add To Playlist",
+          leadingActionType: "addToPlaylist",
+          showTrailingChevron: true,
+        }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Favorite", leadingActionType: "favorite" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Share", leadingActionType: "share" }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Artist" }}
+      />
+    </View>
+  );
+}

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

@@ -9,14 +9,7 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
@@ -32,6 +25,24 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
+  demoScreen: {
+    flex: 1,
+    backgroundColor: "#1C1C1E",
+    paddingTop: 64,
+    paddingHorizontal: 24,
+    gap: 12,
+  },
+  demoHeading: {
+    color: "#FFFFFF",
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  demoLabel: {
+    color: "#999999",
+    fontSize: 13,
+    marginTop: 8,
+  },
 });
 
 // ---------------------------------------------------------------------------
@@ -81,8 +92,6 @@ 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 = {
@@ -139,12 +148,11 @@ export type ButtonData = {
   disabled?: boolean;
 };
 
-export type AudioPlayerButtonProps = {
+export type ItemProps = {
   configuration: ButtonConfiguration;
   data: ButtonData;
   disabled?: boolean;
   focused?: boolean;
-  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -162,7 +170,7 @@ const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
   confirm:
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
   cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAUjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
 };
 
 function getTextTransformStyle(
@@ -172,9 +180,7 @@ function getTextTransformStyle(
 }
 
 function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
-  return (
-    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
-  );
+  return leadingIcon.enabled && !!leadingIcon.actionType;
 }
 
 // ---------------------------------------------------------------------------
@@ -186,7 +192,6 @@ type ButtonContainerProps = {
   disabled: boolean;
   configuration: BackgroundConfiguration;
   children: React.ReactNode;
-  onPress?: () => void;
 };
 
 function ButtonContainer({
@@ -194,22 +199,19 @@ function ButtonContainer({
   disabled,
   configuration,
   children,
-  onPress,
 }: ButtonContainerProps) {
-  const defaultBgColor = disabled
+  const backgroundColor = disabled
     ? configuration.inactiveColor
     : focused
       ? configuration.focusedColor
       : configuration.defaultColor;
 
   return (
-    <Pressable
-      onPress={disabled ? undefined : onPress}
-      style={({ pressed }) => [
+    <View
+      style={[
         styles.container,
         {
-          backgroundColor:
-            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
+          backgroundColor,
           borderRadius: configuration.cornerRadius,
           paddingTop: configuration.paddingTop,
           paddingRight: configuration.paddingRight,
@@ -219,7 +221,7 @@ function ButtonContainer({
       ]}
     >
       {children}
-    </Pressable>
+    </View>
   );
 }
 
@@ -272,7 +274,7 @@ function ButtonTitle({
 }
 
 type ButtonLeadingIconProps = {
-  actionType?: ButtonActionType;
+  actionType: ButtonActionType;
   configuration: IconsConfiguration;
 };
 
@@ -280,17 +282,9 @@ function ButtonLeadingIcon({
   actionType,
   configuration,
 }: ButtonLeadingIconProps) {
-  const asset =
-    configuration.leadingIcon.asset ||
-    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
-
-  if (!asset) {
-    return null;
-  }
-
   return (
     <Image
-      source={{ uri: asset }}
+      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
       style={{
         width: configuration.width,
         height: configuration.height,
@@ -301,32 +295,20 @@ function ButtonLeadingIcon({
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerButton — single building block driven by configuration + data
+// Item — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
-import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
-import { mergeButtonConfiguration } from "../utils/mergeStyles";
-
-export function AudioPlayerButton({
+export function Item({
   configuration,
   data,
   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]);
-
+}: ItemProps) {
   const {
-    background: effectiveBgConfig,
-    title: effectiveTitleConfig,
+    background: backgroundConfiguration,
+    title: titleConfiguration,
     icons: iconsConfiguration,
-  } = effectiveConfig;
+  } = configuration;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -338,8 +320,7 @@ export function AudioPlayerButton({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={effectiveBgConfig}
-      onPress={onPress}
+      configuration={backgroundConfiguration}
     >
       <View style={styles.contentRow}>
         {showIcon ? (
@@ -348,14 +329,14 @@ export function AudioPlayerButton({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
+            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={effectiveTitleConfig}
+          configuration={titleConfiguration}
         />
       </View>
     </ButtonContainer>
@@ -405,3 +386,39 @@ export const VARIANT_LARGE_ICON: ButtonConfiguration = {
     },
   },
 };
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Button Building Block</Text>
+
+      <Text style={styles.demoLabel}>Variant 1 — Text only (confirmation)</Text>
+      <Item configuration={VARIANT_TEXT_ONLY} data={{ title: "Confirm" }} />
+
+      <Text style={styles.demoLabel}>Variant 2 — Leading icon + text</Text>
+      <Item
+        configuration={VARIANT_WITH_ICON}
+        data={{ title: "Add To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Inactive state</Text>
+      <Item
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: "Unavailable" }}
+        disabled
+      />
+
+      <Text style={styles.demoLabel}>Custom title config — uppercase</Text>
+      <Item
+        configuration={VARIANT_UPPERCASE_TITLE}
+        data={{ title: "Save Changes" }}
+      />
+
+      <Text style={styles.demoLabel}>Custom icons config — 32×32</Text>
+      <Item
+        configuration={VARIANT_LARGE_ICON}
+        data={{ title: "Add To Queue" }}
+      />
+    </View>
+  );
+}