@applicaster/zapp-react-native-ui-components 16.0.0-rc.4 → 16.0.0-rc.40

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

@@ -0,0 +1,671 @@
+/**
+ * Modal Building Block — Input
+ *
+ * Green (configurable): background, label, text, icons
+ * White (hardcoded): default search / clear icon assets, clear button circle layout
+ *
+ * Variants (VARIANT_*) are preset configuration bundles — not a config field.
+ */
+
+import React, { useRef } from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  column: {
+    alignItems: "center",
+    width: "100%",
+  },
+  textInput: {
+    padding: 0,
+    margin: 0,
+  },
+  textInputRow: {
+    flex: 1,
+  },
+  clearButton: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  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,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields)
+// ---------------------------------------------------------------------------
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type TextAlignment = "left" | "center";
+
+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;
+  paddingBottom: number;
+  paddingLeft: number;
+  horizontalGutter: number;
+  verticalGutter: number;
+  /** Fixed height for pill layout; 0 = hug content (name / underline layout) */
+  height: number;
+};
+
+export type LabelConfiguration = {
+  enabled: boolean;
+  fontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type TextConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  placeholderColor: string;
+  cursorColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+  alignment: TextAlignment;
+};
+
+export type LeadingIconConfiguration = {
+  enabled: boolean;
+  asset?: string;
+};
+
+export type TrailingIconConfiguration = {
+  enabled: boolean;
+  asset?: string;
+  backgroundColor: string;
+  focusedBackgroundColor: string;
+};
+
+export type IconsConfiguration = {
+  width: number;
+  height: number;
+  leadingIcon: LeadingIconConfiguration;
+  trailingIcon: TrailingIconConfiguration;
+};
+
+export type InputConfiguration = {
+  background: BackgroundConfiguration;
+  label: LabelConfiguration;
+  text: TextConfiguration;
+  icons: IconsConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "#000000",
+  focusedColor: "#000000",
+  borderColor: "rgba(255, 255, 255, 0.55)",
+  focusedBorderColor: "rgba(255, 255, 255, 0.85)",
+  borderWidth: 1,
+  underlineHeight: 0,
+  cornerRadius: 24,
+  paddingTop: 10,
+  paddingRight: 10,
+  paddingBottom: 10,
+  paddingLeft: 14,
+  horizontalGutter: 8,
+  verticalGutter: 0,
+  height: 44,
+};
+
+export const DEFAULT_LABEL_CONFIGURATION: LabelConfiguration = {
+  enabled: false,
+  fontColor: "rgba(142, 142, 147, 1)",
+  iosFontFamily: "SFProText-Regular",
+  androidFontFamily: "Roboto",
+  fontSize: 15,
+  lineHeight: 20,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_TEXT_CONFIGURATION: TextConfiguration = {
+  fontColor: "#FFFFFF",
+  focusedFontColor: "#FFFFFF",
+  placeholderColor: "rgba(142, 142, 147, 1)",
+  cursorColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Regular",
+  androidFontFamily: "Roboto",
+  fontSize: 15,
+  lineHeight: 20,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+  alignment: "left",
+};
+
+export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
+  width: 20,
+  height: 20,
+  leadingIcon: {
+    enabled: true,
+  },
+  trailingIcon: {
+    enabled: true,
+    backgroundColor: "rgba(58, 58, 60, 1)",
+    focusedBackgroundColor: "rgba(72, 72, 74, 1)",
+  },
+};
+
+export const DEFAULT_INPUT_CONFIGURATION: InputConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  label: DEFAULT_LABEL_CONFIGURATION,
+  text: DEFAULT_TEXT_CONFIGURATION,
+  icons: DEFAULT_ICONS_CONFIGURATION,
+};
+
+// ---------------------------------------------------------------------------
+// Data (runtime / localization)
+// ---------------------------------------------------------------------------
+
+export type InputData = {
+  placeholder: string;
+  /** Top instructional label (e.g. "Name your playlist") */
+  label?: string;
+};
+
+export type ItemProps = {
+  configuration: InputConfiguration;
+  data: InputData;
+  value?: string;
+  focused?: boolean;
+  focusedClearButton?: boolean;
+  onChangeText?: (text: string) => void;
+  onClearPress?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded (white fields)
+// ---------------------------------------------------------------------------
+
+const CLEAR_BUTTON_SPEC = {
+  width: 20,
+  height: 20,
+};
+
+const DEFAULT_SEARCH_ICON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAr0lEQVR42mNgGAXkgnXrNrEAcT4Q7wTiB1C8EyrGQqnhXlAD/0PxayiG8UFyXpQYDjOoG4hVkORUoGIweS9yggXm8kg86iKRfMJCigX5MJcToRbmk3xSLNgJ1aRChFoVqNqdpFgA8vJrEtSDIv7BoLKA5pHE80imbTIlI6M9AmJ9WhUVjyi1BG9hBzIUyZLHZFlChCP0oYbDLNEbspbooVnCQktLaGMBUsKgjeEDBgBwWWj4ea9s3wAAAABJRU5ErkJggg==";
+
+const DEFAULT_CLEAR_ICON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPklEQVR42mNgGAWjYGiD/0BATXVkaabIcEKGUMVwXIZR1XB0Q2liOE1dThcf0DQOaJqKaJoP6JKTR8EoIAgADw5TrVXxxAIAAAAASUVORK5CYII=";
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
+  return leadingIcon.enabled;
+}
+
+function shouldShowTrailingIcon(trailingIcon: TrailingIconConfiguration) {
+  return trailingIcon.enabled;
+}
+
+function shouldShowLabel(label: LabelConfiguration, labelText?: string) {
+  return label.enabled && !!labelText;
+}
+
+function isUnderlineLayout(configuration: InputConfiguration) {
+  return configuration.background.underlineHeight > 0;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type InputLabelProps = {
+  text: string;
+  configuration: LabelConfiguration;
+};
+
+function InputLabel({ text, configuration }: InputLabelProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={{
+        color: 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),
+        textAlign: "center",
+      }}
+      numberOfLines={1}
+    >
+      {text}
+    </Text>
+  );
+}
+
+type InputContainerProps = {
+  configuration: BackgroundConfiguration;
+  focused: boolean;
+  underlineLayout: boolean;
+  children: React.ReactNode;
+};
+
+function InputContainer({
+  configuration,
+  focused,
+  underlineLayout,
+  children,
+}: InputContainerProps) {
+  return (
+    <View
+      style={{
+        flexDirection: underlineLayout ? "column" : "row",
+        alignItems: "center",
+        alignSelf: "stretch",
+        height: configuration.height > 0 ? configuration.height : undefined,
+        backgroundColor: focused
+          ? configuration.focusedColor
+          : configuration.defaultColor,
+        borderColor: focused
+          ? configuration.focusedBorderColor
+          : configuration.borderColor,
+        borderWidth: configuration.borderWidth,
+        borderRadius: configuration.cornerRadius,
+        paddingTop: configuration.paddingTop,
+        paddingRight: configuration.paddingRight,
+        paddingBottom: configuration.paddingBottom,
+        paddingLeft: configuration.paddingLeft,
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+type InputUnderlineProps = {
+  configuration: BackgroundConfiguration;
+  focused: boolean;
+};
+
+function InputUnderline({ configuration, focused }: InputUnderlineProps) {
+  if (configuration.underlineHeight <= 0) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.underline,
+        {
+          height: configuration.underlineHeight,
+          backgroundColor: focused
+            ? configuration.focusedBorderColor
+            : configuration.borderColor,
+        },
+      ]}
+    />
+  );
+}
+
+type InputLeadingIconProps = {
+  icons: IconsConfiguration;
+  tintColor: string;
+};
+
+function InputLeadingIcon({ icons, tintColor }: InputLeadingIconProps) {
+  const asset = icons.leadingIcon.asset ?? DEFAULT_SEARCH_ICON_ASSET;
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{
+        width: icons.width,
+        height: icons.height,
+        tintColor,
+      }}
+      resizeMode="contain"
+    />
+  );
+}
+
+type TextInputRef = React.ElementRef<typeof TextInput>;
+
+type InputFieldProps = {
+  inputRef?: React.RefObject<TextInputRef>;
+  value: string;
+  placeholder: string;
+  configuration: TextConfiguration;
+  focused: boolean;
+  stretch: boolean;
+  onChangeText?: (text: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+};
+
+function InputField({
+  inputRef,
+  value,
+  placeholder,
+  configuration,
+  focused,
+  stretch,
+  onChangeText,
+  onFocus,
+  onBlur,
+}: InputFieldProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={value}
+      placeholder={placeholder}
+      placeholderTextColor={configuration.placeholderColor}
+      onChangeText={onChangeText}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      showSoftInputOnFocus
+      selectionColor={configuration.cursorColor}
+      cursorColor={configuration.cursorColor}
+      style={[
+        styles.textInput,
+        stretch ? styles.textInputRow : { alignSelf: "stretch", width: "100%" },
+        {
+          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),
+          textAlign: configuration.alignment,
+        },
+      ]}
+    />
+  );
+}
+
+type InputClearButtonProps = {
+  icons: IconsConfiguration;
+  focused?: boolean;
+};
+
+function InputClearButton({ icons, focused = false }: InputClearButtonProps) {
+  const { trailingIcon } = icons;
+  const asset = trailingIcon.asset ?? DEFAULT_CLEAR_ICON_ASSET;
+
+  return (
+    <View
+      style={[
+        styles.clearButton,
+        {
+          width: CLEAR_BUTTON_SPEC.width,
+          height: CLEAR_BUTTON_SPEC.height,
+          borderRadius: CLEAR_BUTTON_SPEC.width / 2,
+          backgroundColor: focused
+            ? trailingIcon.focusedBackgroundColor
+            : trailingIcon.backgroundColor,
+        },
+      ]}
+    >
+      <Image
+        source={{ uri: asset }}
+        style={{
+          width: CLEAR_BUTTON_SPEC.width * 0.55,
+          height: CLEAR_BUTTON_SPEC.height * 0.55,
+          tintColor: "#000000",
+        }}
+        resizeMode="contain"
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item
+// ---------------------------------------------------------------------------
+
+export function AudioPlayerInput({
+  configuration,
+  data,
+  value = "",
+  focused = false,
+  focusedClearButton = false,
+  onChangeText,
+  onClearPress,
+  onFocus,
+  onBlur,
+}: ItemProps) {
+  const { background, label, text, icons } = configuration;
+  const inputRef = useRef<TextInputRef>(null);
+  const underlineLayout = isUnderlineLayout(configuration);
+  const showLabel = shouldShowLabel(label, data.label);
+  const showLeading = shouldShowLeadingIcon(icons.leadingIcon);
+  const showTrailing = shouldShowTrailingIcon(icons.trailingIcon);
+
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+
+  const clearButton = showTrailing ? (
+    <InputClearButton icons={icons} focused={focusedClearButton} />
+  ) : null;
+
+  const field = (
+    <InputField
+      inputRef={inputRef}
+      value={value}
+      placeholder={data.placeholder}
+      configuration={text}
+      focused={focused}
+      stretch={!underlineLayout}
+      onChangeText={onChangeText}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    />
+  );
+
+  const inputRow = (
+    <Pressable onPress={focusInput} style={{ alignSelf: "stretch" }}>
+      <InputContainer
+        configuration={background}
+        focused={focused}
+        underlineLayout={underlineLayout}
+      >
+        {showLeading ? (
+          <>
+            <InputLeadingIcon icons={icons} tintColor={text.placeholderColor} />
+            <View style={{ width: background.horizontalGutter }} />
+          </>
+        ) : null}
+        {field}
+        {clearButton ? (
+          <>
+            <View style={{ width: background.horizontalGutter }} />
+            {onClearPress ? (
+              <Pressable
+                onPress={(event) => {
+                  event.stopPropagation?.();
+                  onClearPress();
+                }}
+              >
+                {clearButton}
+              </Pressable>
+            ) : (
+              clearButton
+            )}
+          </>
+        ) : null}
+        {underlineLayout ? (
+          <InputUnderline configuration={background} 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 }} />
+      {inputRow}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Variant presets — collections of configuration keys (not a variant field)
+// ---------------------------------------------------------------------------
+
+/** Search pill — leading icon + clear button */
+export const VARIANT_SEARCH_INPUT: InputConfiguration =
+  DEFAULT_INPUT_CONFIGURATION;
+
+/** Name playlist — centered title + label + underline (screenshot) */
+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)",
+    borderWidth: 0,
+    underlineHeight: 1,
+    cornerRadius: 0,
+    paddingTop: 0,
+    paddingRight: 0,
+    paddingBottom: 10,
+    paddingLeft: 0,
+    horizontalGutter: 0,
+    verticalGutter: 16,
+    height: 0,
+  },
+  label: {
+    enabled: true,
+    fontColor: "rgba(142, 142, 147, 1)",
+    iosFontFamily: "SFProText-Regular",
+    androidFontFamily: "Roboto",
+    fontSize: 15,
+    lineHeight: 20,
+    iosLetterSpacing: -0.2,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+  },
+  text: {
+    fontColor: "#FFFFFF",
+    focusedFontColor: "#FFFFFF",
+    placeholderColor: "rgba(142, 142, 147, 1)",
+    cursorColor: "#FFFFFF",
+    iosFontFamily: "SFProText-Bold",
+    androidFontFamily: "Roboto-Bold",
+    fontSize: 32,
+    lineHeight: 40,
+    iosLetterSpacing: -0.6,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+    alignment: "center",
+  },
+  icons: {
+    width: 20,
+    height: 20,
+    leadingIcon: { enabled: false },
+    trailingIcon: {
+      enabled: false,
+      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,
+    },
+  },
+};