@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

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

@@ -1,11 +1,10 @@
 /**
  * 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";
@@ -63,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;
@@ -98,6 +93,12 @@ 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 = {
@@ -137,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,
   };
 
 // ---------------------------------------------------------------------------
@@ -145,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 = {
@@ -198,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,
@@ -228,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 },
@@ -453,6 +449,7 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
+  label?: string;
   onPress?: () => void;
 };
 
@@ -460,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}
@@ -470,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
@@ -497,7 +510,7 @@ function HeaderActionButton({
         }}
         numberOfLines={1}
       >
-        {ACTION_LABELS[actionType]}
+        {label || ACTION_LABELS[actionType]}
       </Text>
     </Pressable>
   );
@@ -610,14 +623,20 @@ export function AudioPlayerHeader({
   onClear,
 }: AudioPlayerHeaderProps) {
   const modalBlocksStyle = useModalBlocksStyle();
-  const headerBlock = modalBlocksStyle?.header;
+
+  // 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, headerBlock);
-  }, [configuration, headerBlock]);
+    return mergeHeaderConfiguration(configuration, styleBlock);
+  }, [configuration, styleBlock]);
 
   const { variant, title, closeButton, actionButtons } = effectiveConfig;
-  const { title: titleText } = data;
+  const { title: titleText, clearLabel } = data;
 
   const container = CONTAINER_SPEC[variant];
   const behavior = ACTION_BUTTONS_BEHAVIOR[variant];
@@ -628,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 ? (
@@ -646,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 ? (
@@ -725,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",

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

@@ -18,11 +18,42 @@ import {
   View,
 } from "react-native";
 
+import { resolveDefaultAssetUri } from "@applicaster/zapp-react-native-utils/actionUtils";
+
 const styles = StyleSheet.create({
   column: {
     alignItems: "center",
     width: "100%",
   },
+  validationMessage: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "center",
+    overflow: "hidden",
+    backgroundColor: "rgba(229,30,37,1.00)",
+    borderRadius: 100,
+    marginTop: 16,
+    paddingLeft: 8,
+    paddingRight: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    gap: 8,
+  },
+  validationMessageIcon: {
+    width: 20,
+    height: 20,
+    alignSelf: "flex-start",
+  },
+  validationMessageText: {
+    color: "rgba(255,255,255,1.00)",
+    fontFamily: Platform.select({
+      ios: "GreycliffCF-Bold",
+      android: "Greycliff-Bold",
+      default: "Greycliff-Bold",
+    }),
+    fontSize: 13,
+    lineHeight: 20,
+  },
   textInput: {
     padding: 0,
     margin: 0,
@@ -51,14 +82,22 @@ export type TextTransform =
 
 export type TextAlignment = "left" | "center";
 
+export type UnderlineConfiguration = {
+  focusedBorderColor: string;
+  borderColor: string;
+  /** Bottom underline height; 0 = none (pill search uses borderWidth instead) */
+  underlineHeight: number;
+  underlineMarginTop: number;
+  /** Radius of the underline bar itself (bottom border style). */
+  underlineCornerRadius: number;
+};
+
 export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   borderColor: string;
   focusedBorderColor: string;
   borderWidth: number;
-  /** Bottom underline height; 0 = none (pill search uses borderWidth instead) */
-  underlineHeight: number;
   cornerRadius: number;
   paddingTop: number;
   paddingRight: number;
@@ -95,6 +134,9 @@ export type TextConfiguration = {
   androidLetterSpacing: number;
   textTransform: TextTransform;
   alignment: TextAlignment;
+  /** Vertical spacing around the input text; drives the gap above the underline. */
+  marginTop: number;
+  marginBottom: number;
 };
 
 export type LeadingIconConfiguration = {
@@ -117,6 +159,7 @@ export type IconsConfiguration = {
 };
 
 export type InputConfiguration = {
+  underline: UnderlineConfiguration;
   background: BackgroundConfiguration;
   label: LabelConfiguration;
   text: TextConfiguration;
@@ -129,7 +172,6 @@ export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
   borderColor: "rgba(255, 255, 255, 0.55)",
   focusedBorderColor: "rgba(255, 255, 255, 0.85)",
   borderWidth: 1,
-  underlineHeight: 0,
   cornerRadius: 24,
   paddingTop: 10,
   paddingRight: 10,
@@ -165,6 +207,8 @@ export const DEFAULT_TEXT_CONFIGURATION: TextConfiguration = {
   androidLetterSpacing: 0,
   textTransform: "default",
   alignment: "left",
+  marginTop: 0,
+  marginBottom: 0,
 };
 
 export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
@@ -180,8 +224,17 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+export const DEFAULT_UNDERLINE_CONFIGURATION: UnderlineConfiguration = {
+  borderColor: "rgba(255, 255, 255, 0.55)",
+  focusedBorderColor: "rgba(255, 255, 255, 0.85)",
+  underlineHeight: 0,
+  underlineMarginTop: 0,
+  underlineCornerRadius: 0,
+};
+
 export const DEFAULT_INPUT_CONFIGURATION: InputConfiguration = {
   background: DEFAULT_BACKGROUND_CONFIGURATION,
+  underline: DEFAULT_UNDERLINE_CONFIGURATION,
   label: DEFAULT_LABEL_CONFIGURATION,
   text: DEFAULT_TEXT_CONFIGURATION,
   icons: DEFAULT_ICONS_CONFIGURATION,
@@ -203,6 +256,7 @@ export type ItemProps = {
   value?: string;
   focused?: boolean;
   focusedClearButton?: boolean;
+  validationMessage?: string;
   onChangeText?: (text: string) => void;
   onClearPress?: () => void;
   onFocus?: () => void;
@@ -243,7 +297,7 @@ function shouldShowLabel(label: LabelConfiguration, labelText?: string) {
 }
 
 function isUnderlineLayout(configuration: InputConfiguration) {
-  return configuration.background.underlineHeight > 0;
+  return configuration.underline.underlineHeight > 0;
 }
 
 // ---------------------------------------------------------------------------
@@ -323,7 +377,7 @@ function InputContainer({
 }
 
 type InputUnderlineProps = {
-  configuration: BackgroundConfiguration;
+  configuration: UnderlineConfiguration;
   focused: boolean;
 };
 
@@ -337,7 +391,9 @@ function InputUnderline({ configuration, focused }: InputUnderlineProps) {
       style={[
         styles.underline,
         {
+          marginTop: configuration.underlineMarginTop,
           height: configuration.underlineHeight,
+          borderRadius: configuration.underlineCornerRadius,
           backgroundColor: focused
             ? configuration.focusedBorderColor
             : configuration.borderColor,
@@ -427,6 +483,8 @@ function InputField({
           }),
           textTransform: getTextTransformStyle(configuration.textTransform),
           textAlign: configuration.alignment,
+          marginTop: configuration.marginTop,
+          marginBottom: configuration.marginBottom,
         },
       ]}
     />
@@ -479,12 +537,13 @@ export function AudioPlayerInput({
   value = "",
   focused = false,
   focusedClearButton = false,
+  validationMessage,
   onChangeText,
   onClearPress,
   onFocus,
   onBlur,
 }: ItemProps) {
-  const { background, label, text, icons } = configuration;
+  const { background, label, text, icons, underline } = configuration;
   const inputRef = useRef<TextInputRef>(null);
   const underlineLayout = isUnderlineLayout(configuration);
   const showLabel = shouldShowLabel(label, data.label);
@@ -545,109 +604,125 @@ export function AudioPlayerInput({
           </>
         ) : null}
         {underlineLayout ? (
-          <InputUnderline configuration={background} focused={focused} />
+          <InputUnderline configuration={underline} focused={focused} />
         ) : null}
       </InputContainer>
     </Pressable>
   );
 
-  if (!showLabel || !data.label) {
-    return inputRow;
-  }
-
   return (
     <View style={styles.column}>
-      <InputLabel text={data.label} configuration={label} />
-      <View style={{ height: background.verticalGutter }} />
+      {showLabel && data.label ? (
+        <>
+          <InputLabel text={data.label} configuration={label} />
+          <View style={{ height: background.verticalGutter }} />
+        </>
+      ) : null}
       {inputRow}
+      {validationMessage ? (
+        <View style={styles.validationMessage} accessibilityRole="alert">
+          <Image
+            source={{
+              uri: resolveDefaultAssetUri(
+                require("../../../../assets/empty-Info.png")
+              ),
+            }}
+            style={styles.validationMessageIcon}
+          />
+          <Text
+            style={styles.validationMessageText}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {validationMessage}
+          </Text>
+        </View>
+      ) : null}
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Variant presets — collections of configuration keys (not a variant field)
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 /** Search pill — leading icon + clear button */
 export const VARIANT_SEARCH_INPUT: InputConfiguration =
   DEFAULT_INPUT_CONFIGURATION;
 
-/** Name playlist — centered title + label + underline (screenshot) */
+/**
+ * Name playlist — centered title + 32pt text over a rounded bottom underline.
+ *
+ * Values mirror the manifest configuration the
+ * `quick-brick-component-text-field` plugin renders from; the comment on each
+ * line names the reference key it comes from.
+ */
 export const VARIANT_NAME_PLAYLIST_INPUT: InputConfiguration = {
   background: {
-    defaultColor: "transparent",
-    focusedColor: "transparent",
-    borderColor: "rgba(255, 255, 255, 0.35)",
-    focusedBorderColor: "rgba(255, 255, 255, 0.55)",
+    // text_input_background_*_background_color
+    defaultColor: "rgba(30,30,30,0.00)",
+    focusedColor: "rgba(46,46,46,0.00)",
+    // text_input_style_border_*_border_color
+    borderColor: "rgba(255,255,255,0.25)",
+    focusedBorderColor: "rgba(255,255,255,1.00)",
+    // border_border_style is "bottom", so the box border is off and the
+    // underline below draws the border instead.
     borderWidth: 0,
-    underlineHeight: 1,
     cornerRadius: 0,
+    // text_input_style_input_padding_*
     paddingTop: 0,
     paddingRight: 0,
-    paddingBottom: 10,
+    paddingBottom: 0,
     paddingLeft: 0,
-    horizontalGutter: 0,
-    verticalGutter: 16,
-    height: 0,
+    horizontalGutter: 0, // text_input_style_input_horizontal_gutter
+    verticalGutter: 0, // component_style_vertical_gutter
+    height: 0, // hug content
+  },
+  underline: {
+    borderColor: "rgba(255,255,255,0.25)",
+    focusedBorderColor: "rgba(255,255,255,1.00)",
+    underlineHeight: 2, // text_input_style_border_border_size
+    // The gap above the bar comes from the text's marginBottom, matching how
+    // the plugin applies `text_label_margin_bottom` to the input itself.
+    underlineMarginTop: 0,
+    underlineCornerRadius: 4, // ..._border_bottom_border_corner_radius
   },
   label: {
-    enabled: true,
-    fontColor: "rgba(142, 142, 147, 1)",
-    iosFontFamily: "SFProText-Regular",
-    androidFontFamily: "Roboto",
-    fontSize: 15,
-    lineHeight: 20,
-    iosLetterSpacing: -0.2,
+    enabled: true, // title_enable
+    fontColor: "rgba(255,255,255,0.50)", // title_style_color
+    iosFontFamily: "GreycliffCF-Bold", // title_style_ios_font_family
+    androidFontFamily: "Greycliff-Bold", // title_style_android_font_family
+    fontSize: 14, // title_style_font_size
+    lineHeight: 32, // title_style_line_height
+    iosLetterSpacing: 0,
     androidLetterSpacing: 0,
-    textTransform: "default",
+    textTransform: "default", // title_style_text_transform: "none"
   },
   text: {
-    fontColor: "#FFFFFF",
-    focusedFontColor: "#FFFFFF",
-    placeholderColor: "rgba(142, 142, 147, 1)",
-    cursorColor: "#FFFFFF",
-    iosFontFamily: "SFProText-Bold",
-    androidFontFamily: "Roboto-Bold",
+    // text_input_style_text_label_*
+    fontColor: "rgba(255,255,255,1.00)", // active_label_color
+    focusedFontColor: "rgba(255,255,255,1.00)",
+    placeholderColor: "rgba(255,255,255,0.50)", // placeholder_label_color
+    cursorColor: "rgba(249,183,72,1.00)", // text_input_style_cursor_cursor_color
+    iosFontFamily: "GreycliffCF-Bold",
+    androidFontFamily: "Greycliff-Bold",
     fontSize: 32,
     lineHeight: 40,
-    iosLetterSpacing: -0.6,
+    iosLetterSpacing: 0,
     androidLetterSpacing: 0,
     textTransform: "default",
     alignment: "center",
+    marginTop: 20, // text_label_margin_top
+    marginBottom: 20, // text_label_margin_bottom
   },
   icons: {
     width: 20,
     height: 20,
     leadingIcon: { enabled: false },
     trailingIcon: {
-      enabled: false,
+      enabled: false, // clear_button_enable
       backgroundColor: "rgba(58, 58, 60, 1)",
       focusedBackgroundColor: "rgba(72, 72, 74, 1)",
     },
   },
 };
-
-/** 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,
-    },
-  },
-};