@applicaster/zapp-react-native-ui-components 16.0.0-alpha.7845362739 → 16.0.0-alpha.8101951023

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

@@ -1,15 +1,15 @@
 /**
  * Modal Building Block — Header
  *
- * Single-file Expo Snack demo for the Header building block spec.
- *
  * Green (configurable): title, closeButton (enable + asset), actionButtons styling
- * White (hardcoded): container, action button layout/enable/actions, close dimensions,
- *   action button padding/radius, action labels
+ *   (incl. Clear padding/radius for Variant 3 / section_header Studio keys)
+ * White (hardcoded): container gutters, action button slot enablement/actions,
+ *   close dimensions, default action labels (overridable via HeaderData.clearLabel)
  */
 
 import React, { useCallback, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const styles = StyleSheet.create({
   row: {
@@ -45,29 +45,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 0,
-    gap: 24,
-  },
-  demoBlock: {
-    gap: 8,
-    paddingHorizontal: 0,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-    paddingHorizontal: 24,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    paddingHorizontal: 24,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -85,11 +62,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;
@@ -120,10 +93,16 @@ export type ActionButtonsStyleConfiguration = {
   iosLetterSpacing: number;
   androidLetterSpacing: number;
   textTransform: TextTransform;
+  /** Green Variant 3 fields — defaults match ACTION_BUTTON_LAYOUT_SPEC. */
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  cornerRadius?: number;
 };
 
 export type HeaderConfiguration = {
-  paddingTop: undefined;
+  paddingTop?: number;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;
@@ -159,6 +138,11 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
     iosLetterSpacing: 0,
     androidLetterSpacing: 0,
     textTransform: "default",
+    paddingTop: 6,
+    paddingRight: 10,
+    paddingBottom: 6,
+    paddingLeft: 10,
+    cornerRadius: 16,
   };
 
 // ---------------------------------------------------------------------------
@@ -167,6 +151,8 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
 
 export type HeaderData = {
   title: string;
+  /** Localization override for Clear; falls back to ACTION_LABELS.clear. */
+  clearLabel?: string;
 };
 
 export type AudioPlayerHeaderProps = {
@@ -220,13 +206,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,
@@ -250,11 +229,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 },
@@ -305,6 +279,8 @@ type HeaderContainerProps = {
   children: React.ReactNode;
 };
 
+const TRANSPARENT = "transparent";
+
 function HeaderContainer({
   variant,
   configuration,
@@ -317,6 +293,8 @@ function HeaderContainer({
       ? configuration.paddingTop
       : container.paddingTop;
 
+  const backgroundColor = (configuration as any).backgroundColor || TRANSPARENT;
+
   return (
     <View
       style={{
@@ -324,6 +302,7 @@ function HeaderContainer({
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
+        backgroundColor: backgroundColor,
       }}
     >
       {children}
@@ -338,17 +317,18 @@ type HeaderTitleProps = {
 };
 
 function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
+  const { fontColor, fontSize } = configuration;
+
+  const letterSpacing = isApplePlatform()
+    ? configuration.iosLetterSpacing
+    : configuration.androidLetterSpacing;
 
   return (
     <Text
       style={{
         flex: centered ? undefined : 1,
-        color: configuration.fontColor,
-        fontSize: configuration.fontSize,
+        color: fontColor,
+        fontSize: fontSize,
         lineHeight: configuration.lineHeight,
         letterSpacing,
         fontFamily: Platform.select({
@@ -469,6 +449,7 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
+  label?: string;
   onPress?: () => void;
 };
 
@@ -476,8 +457,24 @@ function HeaderActionButton({
   actionType,
   configuration,
   focused = false,
+  label,
   onPress,
 }: HeaderActionButtonProps) {
+  const paddingTop =
+    configuration.paddingTop ?? ACTION_BUTTON_LAYOUT_SPEC.paddingTop;
+
+  const paddingRight =
+    configuration.paddingRight ?? ACTION_BUTTON_LAYOUT_SPEC.paddingRight;
+
+  const paddingBottom =
+    configuration.paddingBottom ?? ACTION_BUTTON_LAYOUT_SPEC.paddingBottom;
+
+  const paddingLeft =
+    configuration.paddingLeft ?? ACTION_BUTTON_LAYOUT_SPEC.paddingLeft;
+
+  const cornerRadius =
+    configuration.cornerRadius ?? ACTION_BUTTON_LAYOUT_SPEC.cornerRadius;
+
   return (
     <Pressable
       onPress={onPress}
@@ -486,11 +483,11 @@ function HeaderActionButton({
           pressed || focused
             ? configuration.focusedBackgroundColor
             : configuration.defaultBackgroundColor,
-        borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
-        paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
-        paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
-        paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
-        paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
+        borderRadius: cornerRadius,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
       })}
     >
       <Text
@@ -513,7 +510,7 @@ function HeaderActionButton({
         }}
         numberOfLines={1}
       >
-        {ACTION_LABELS[actionType]}
+        {label || ACTION_LABELS[actionType]}
       </Text>
     </Pressable>
   );
@@ -610,6 +607,9 @@ function CenterAlignedHeaderLayout({
 // AudioPlayerHeader
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeHeaderConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerHeader({
   configuration,
   data,
@@ -622,8 +622,21 @@ export function AudioPlayerHeader({
   onDone,
   onClear,
 }: AudioPlayerHeaderProps) {
-  const { variant, title, closeButton, actionButtons } = configuration;
-  const { title: titleText } = data;
+  const modalBlocksStyle = useModalBlocksStyle();
+
+  // Next Up section header uses sectionHeader — never Theme modal `header`,
+  // so the Queue title styles do not collide with the section title.
+  const styleBlock =
+    configuration.variant === "section"
+      ? modalBlocksStyle?.sectionHeader
+      : modalBlocksStyle?.header;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeHeaderConfiguration(configuration, styleBlock);
+  }, [configuration, styleBlock]);
+
+  const { variant, title, closeButton, actionButtons } = effectiveConfig;
+  const { title: titleText, clearLabel } = data;
 
   const container = CONTAINER_SPEC[variant];
   const behavior = ACTION_BUTTONS_BEHAVIOR[variant];
@@ -634,16 +647,24 @@ export function AudioPlayerHeader({
     behavior.sectionEnabled
   );
 
-  const showTrailingAction = shouldShowActionSlot(
-    behavior.trailing,
-    behavior.sectionEnabled
-  );
+  const showTrailingAction =
+    shouldShowActionSlot(behavior.trailing, behavior.sectionEnabled) &&
+    (behavior.trailing.actionType !== "clear" || !!onClear);
+
+  const actionLabelFor = (actionType?: HeaderActionType) => {
+    if (actionType === "clear" && clearLabel) {
+      return clearLabel;
+    }
+
+    return actionType ? ACTION_LABELS[actionType] : undefined;
+  };
 
   const leadingContent = showLeadingAction ? (
     <HeaderActionButton
-      actionType={behavior.leading.actionType}
+      actionType={behavior.leading.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedLeadingAction}
+      label={actionLabelFor(behavior.leading.actionType)}
       onPress={onCancel}
     />
   ) : onBack ? (
@@ -652,9 +673,10 @@ export function AudioPlayerHeader({
 
   const trailingContent = showTrailingAction ? (
     <HeaderActionButton
-      actionType={behavior.trailing.actionType}
+      actionType={behavior.trailing.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedTrailingAction}
+      label={actionLabelFor(behavior.trailing.actionType)}
       onPress={behavior.trailing.actionType === "done" ? onDone : onClear}
     />
   ) : closeButton.enabled && !isCenterAligned ? (
@@ -731,25 +753,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",
@@ -767,45 +770,3 @@ export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
 };
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Header Building Block</Text>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Single Line Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SINGLE_LINE_HEADER}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Header With Actions</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_ACTIONS}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>
-          Header With Actions — single side action
-        </Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Section Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SECTION_HEADER}
-          data={{ title: "Next in Queue" }}
-        />
-      </View>
-    </View>
-  );
-}

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

@@ -37,24 +37,6 @@ const styles = StyleSheet.create({
   underline: {
     alignSelf: "stretch",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 24,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -583,7 +565,7 @@ export function AudioPlayerInput({
 }
 
 // ---------------------------------------------------------------------------
-// Variant presets — collections of configuration keys (not a variant field)
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 /** Search pill — leading icon + clear button */
@@ -644,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,
-    },
-  },
-};