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

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,
@@ -37,24 +68,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,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -69,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;
@@ -113,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 = {
@@ -135,6 +159,7 @@ export type IconsConfiguration = {
 };
 
 export type InputConfiguration = {
+  underline: UnderlineConfiguration;
   background: BackgroundConfiguration;
   label: LabelConfiguration;
   text: TextConfiguration;
@@ -147,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,
@@ -183,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 = {
@@ -198,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,
@@ -221,6 +256,7 @@ export type ItemProps = {
   value?: string;
   focused?: boolean;
   focusedClearButton?: boolean;
+  validationMessage?: string;
   onChangeText?: (text: string) => void;
   onClearPress?: () => void;
   onFocus?: () => void;
@@ -261,7 +297,7 @@ function shouldShowLabel(label: LabelConfiguration, labelText?: string) {
 }
 
 function isUnderlineLayout(configuration: InputConfiguration) {
-  return configuration.background.underlineHeight > 0;
+  return configuration.underline.underlineHeight > 0;
 }
 
 // ---------------------------------------------------------------------------
@@ -341,7 +377,7 @@ function InputContainer({
 }
 
 type InputUnderlineProps = {
-  configuration: BackgroundConfiguration;
+  configuration: UnderlineConfiguration;
   focused: boolean;
 };
 
@@ -355,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,
@@ -445,6 +483,8 @@ function InputField({
           }),
           textTransform: getTextTransformStyle(configuration.textTransform),
           textAlign: configuration.alignment,
+          marginTop: configuration.marginTop,
+          marginBottom: configuration.marginBottom,
         },
       ]}
     />
@@ -497,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);
@@ -563,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,
-    },
-  },
-};