@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Input.kt

@@ -0,0 +1,475 @@
+package vn.momo.kits.components
+
+import vn.momo.kits.modifier.InternalApi
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.OffsetMapping
+import androidx.compose.ui.text.input.TransformedText
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+data class InputSizeDetail(
+    val borderWidth: Dp,
+    val borderRadius: Dp,
+    val height: Dp,
+)
+
+enum class InputSize(val values: InputSizeDetail) {
+    SMALL(
+        InputSizeDetail(
+            borderWidth = 1.dp,
+            borderRadius = Radius.S,
+            height = 48.dp
+        )
+    ),
+    LARGE(
+        InputSizeDetail(
+            borderWidth = 1.dp,
+            borderRadius = Radius.S,
+            height = 56.dp
+        )
+    )
+}
+
+enum class InputFontWeight(val value: FontWeight) {
+    REGULAR(
+        FontWeight(400)
+    ),
+    BOLD(
+        FontWeight(700)
+    )
+}
+
+data class InputState(
+    val isFocused: Boolean = false,
+    val passHidden: Boolean = false,
+    val hasBeenBlurred: Boolean = false
+)
+
+private class PasswordVisualTransformation(
+    private val fontFamily: FontFamily,
+    private val fontSize: TextUnit
+) : VisualTransformation {
+    private val mask: Char = '\u2022'
+
+    override fun filter(text: AnnotatedString): TransformedText {
+
+        val maskedText = AnnotatedString(
+            text = mask.toString().repeat(text.length),
+            spanStyles = listOf(
+                AnnotatedString.Range(
+                    SpanStyle(fontSize = fontSize, letterSpacing = 0.sp, fontFamily = fontFamily),
+                    0,
+                    text.length
+                )
+            )
+        )
+        return TransformedText(maskedText, OffsetMapping.Identity)
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is PasswordVisualTransformation) return false
+        return mask == other.mask && fontSize == other.fontSize
+    }
+
+    override fun hashCode(): Int {
+        return 31 * mask.hashCode() + fontSize.hashCode()
+    }
+}
+
+@Composable
+@InternalApi
+fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color {
+    val theme = AppTheme.current
+    return remember(isFocused, error, disabled, theme) {
+        when {
+            disabled -> theme.colors.border.disable
+            error.isNotEmpty() -> theme.colors.error.primary
+            isFocused -> theme.colors.primary
+            else -> theme.colors.border.default
+        }
+    }
+}
+
+@Composable
+@InternalApi
+fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    if (loading) {
+        Box {
+            CircularProgressIndicator(
+                modifier = Modifier.size(16.dp),
+                color = color,
+                trackColor = Color.Transparent,
+                strokeWidth = 2.dp
+            )
+        }
+    }
+    if (icon.isNotEmpty()) {
+        Icon(
+            source = icon,
+            color = color,
+            size = 24.dp,
+            modifier = modifier.clickable(
+                onClick = onClick,
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            )
+        )
+    }
+}
+
+@Composable
+@InternalApi
+fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
+    val theme = AppTheme.current
+    val errorColor = remember(theme) { theme.colors.error.primary }
+    val hintColor = remember(theme) { theme.colors.text.hint }
+    val hintTextDefault = remember(hintText) { hintText.ifEmpty { "Không thể chỉnh sửa" } }
+
+    if (errorMessage.isNotEmpty() || hintText.isNotEmpty()) {
+        val color = if (errorMessage.isNotEmpty()) errorColor else hintColor
+        Row(
+            Modifier.padding(top = Spacing.XS),
+            verticalAlignment = Alignment.Top
+        ) {
+            Icon(
+                size = 16.dp,
+                color = color,
+                source = "ic_error"
+            )
+            Text(
+                errorMessage.ifEmpty { hintTextDefault },
+                style = Typography.descriptionDefaultRegular,
+                modifier = Modifier.padding(start = Spacing.XS),
+                color = color,
+            )
+        }
+    } else if (errorSpacing) {
+        Spacer(Modifier.padding(top = Spacing.XS).height(18.dp))
+    }
+}
+
+@Composable
+fun Input(
+    text: MutableState<String> = remember { mutableStateOf("") },
+    floatingValue: String = "",
+    floatingValueColor: Color = AppTheme.current.colors.text.hint,
+    floatingIcon: String = "",
+    floatingIconColor: Color = AppTheme.current.colors.text.default,
+    placeholder: String = "",
+    size: InputSize = InputSize.SMALL,
+    onChangeText: (String) -> Unit = {},
+    hintText: String = "",
+    error: String = "",
+    errorSpacing: Boolean = false,
+    disabled: Boolean = false,
+    readOnly: Boolean = false,
+    secureTextEntry: Boolean = false,
+    icon: String = "",
+    iconColor: Color = AppTheme.current.colors.text.default,
+    onRightIconPressed: () -> Unit = {},
+    leadingIcon: String = "",
+    leadingIconColor: Color = AppTheme.current.colors.text.hint,
+    onFocus: () -> Unit = {},
+    onBlur: () -> Unit = {},
+    loading: Boolean = false,
+    required: Boolean = false,
+    maxLength: Int? = null,
+    fontWeight: InputFontWeight = InputFontWeight.REGULAR,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
+) {
+    // Consolidated state management
+    var inputState by remember { mutableStateOf(InputState()) }
+
+    // Memoized color calculations
+    val theme = AppTheme.current
+    val colors = remember(disabled, theme) {
+        if (disabled) {
+            val disabledColor = theme.colors.text.disable
+            Triple(disabledColor, disabledColor, disabledColor)
+        } else {
+            Triple(
+                theme.colors.text.default,      // textColor
+                theme.colors.text.hint,         // placeholderColor
+                iconColor                       // iconTintColor
+            )
+        }
+    }
+
+    val (textColor, placeholderColor, iconTintColor) = colors
+
+    val floatingTitleColor = remember(disabled, floatingValueColor, theme) {
+        if (disabled) theme.colors.text.disable else floatingValueColor
+    }
+
+    val floatingIconTintColor = remember(disabled, floatingIconColor, theme) {
+        if (disabled) theme.colors.text.disable else floatingIconColor
+    }
+
+    val fontSize = 14.sp
+    val lineHeight = 24.sp
+    val scaleFontSize = scaleSize(fontSize)
+    val scaleLineHeight = scaleSize(lineHeight)
+
+    val textStyle = remember(textColor, fontWeight) {
+        TextStyle(
+            color = textColor,
+            fontSize = scaleFontSize,
+            lineHeight = scaleLineHeight,
+            fontWeight = fontWeight.value
+        )
+    }
+
+    val placeholderStyle = remember(placeholderColor, fontWeight) {
+        TextStyle(
+            fontSize = fontSize,
+            lineHeight = lineHeight,
+            fontWeight = fontWeight.value,
+            textAlign = TextAlign.Center
+        )
+    }
+
+    val keyboardOptionsConfig = remember(secureTextEntry, keyboardType) {
+        KeyboardOptions.Default.copy(
+            keyboardType = keyboardType
+        )
+    }
+
+    val passwordFontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
+    val passwordFontSize = scaleSize(24.sp)
+    val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily) {
+        if (secureTextEntry && !inputState.passHidden)
+            PasswordVisualTransformation(fontFamily = passwordFontFamily, fontSize = passwordFontSize)
+        else
+            VisualTransformation.None
+    }
+
+    Column(modifier = modifier
+        .conditional(IsShowBaseLineDebug) {
+            border(1.dp, Colors.blue_03)
+        }) {
+        BasicTextField(
+            enabled = !disabled,
+            readOnly = readOnly,
+            singleLine = true,
+            value = text.value,
+            textStyle = textStyle,
+            visualTransformation = visualTransformation,
+            keyboardOptions = keyboardOptionsConfig,
+            modifier = inputModifier
+                .height(scaleSize(size.values.height.value).dp)
+                .onFocusChanged { focusState ->
+                    val wasFocused = inputState.isFocused
+                    inputState = inputState.copy(
+                        isFocused = focusState.isFocused,
+                        hasBeenBlurred = inputState.hasBeenBlurred || wasFocused
+                    )
+
+                    if (focusState.isFocused) {
+                        onFocus()
+                    } else if (inputState.hasBeenBlurred) {
+                        onBlur()
+                    }
+                },
+            onValueChange = { newText ->
+                val limitedText = maxLength?.let { newText.take(it) } ?: newText
+                onChangeText(limitedText)
+            },
+            decorationBox = { innerTextField ->
+                // Floating label
+                FloatingLabel(
+                    floatingValue = floatingValue,
+                    floatingIcon = floatingIcon,
+                    titleColor = floatingTitleColor,
+                    iconColor = floatingIconTintColor,
+                    offsetY = -size.values.height / 2,
+                    required = required,
+                )
+
+                // Input container
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(
+                            color = AppTheme.current.colors.background.surface,
+                            shape = RoundedCornerShape(size.values.borderRadius)
+                        )
+                        .border(
+                            1.dp,
+                            getBorderColor(inputState.isFocused, error, disabled),
+                            RoundedCornerShape(size.values.borderRadius)
+                        ),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    Row(
+                        modifier = Modifier.padding(horizontal = Spacing.M),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        // Leading icon
+                        if (leadingIcon.isNotEmpty()) {
+                            Icon(
+                                source = leadingIcon,
+                                modifier = Modifier.padding(end = Spacing.M),
+                                size = if (size == InputSize.SMALL) 24.dp else 32.dp,
+                                color = leadingIconColor
+                            )
+                        }
+
+                        Box(Modifier.weight(1f), contentAlignment = Alignment.CenterStart) {
+                            if (text.value.isEmpty()) {
+                                Text(
+                                    text = placeholder,
+                                    style = placeholderStyle,
+                                    color = placeholderColor
+                                )
+
+                            }
+                            innerTextField()
+                        }
+
+                        // Clear button
+                        if (inputState.isFocused && text.value.isNotEmpty()) {
+                            Row(Modifier.padding(horizontal = Spacing.XS)) {
+                                Icon(
+                                    source = "24_navigation_close_circle_full",
+                                    size = 16.dp,
+                                    color = theme.colors.text.hint,
+                                    modifier = Modifier.clickable(
+                                        onClick = {
+                                            text.value = ""
+                                            onChangeText.invoke("")
+                                        },
+                                        interactionSource = remember { MutableInteractionSource() },
+                                        indication = null
+                                    ).setAutomationId("ic_clear")
+                                )
+                            }
+                        }
+
+                        // Right icon (password toggle or custom icon)
+                        when {
+                            secureTextEntry && text.value.isNotEmpty() -> {
+                                val iconName = if (inputState.passHidden) "24_security_eye_open" else "24_security_eye_off"
+                                val togglePassword = {
+                                    onRightIconPressed()
+                                    inputState = inputState.copy(passHidden = !inputState.passHidden)
+                                }
+                                RenderRightIcon(
+                                    loading = loading,
+                                    icon = iconName,
+                                    color = iconTintColor,
+                                    onClick = togglePassword,
+                                    modifier = Modifier.setAutomationId("ic_show_hide"))
+                            }
+                            else -> {
+                                RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)
+                            }
+                        }
+                    }
+                }
+            },
+        )
+
+        // Error/hint display
+        ErrorView(error, errorSpacing, hintText)
+    }
+}
+
+internal data class InputColors(
+    val text: Color,
+    val placeholder: Color,
+    val iconTint: Color,
+    val floatingTitle: Color,
+    val floatingIcon: Color,
+)
+
+@Composable
+internal fun getInputColors(
+    disabled: Boolean,
+    iconColor: Color,
+    floatingValueColor: Color,
+    floatingIconColor: Color,
+): InputColors {
+    val theme = AppTheme.current
+    val disabledColor = theme.colors.text.disable
+    return InputColors(
+        text = if (disabled) disabledColor else theme.colors.text.default,
+        placeholder = if (disabled) disabledColor else theme.colors.text.hint,
+        iconTint = if (disabled) disabledColor else iconColor,
+        floatingTitle = if (disabled) disabledColor else floatingValueColor,
+        floatingIcon = if (disabled) disabledColor else floatingIconColor,
+    )
+}
+
+@Composable
+internal fun FloatingLabel(
+    floatingValue: String,
+    floatingIcon: String,
+    titleColor: Color,
+    iconColor: Color,
+    offsetY: Dp,
+    offsetX: Dp = Spacing.S,
+    required: Boolean = false,
+) {
+    if (floatingValue.isEmpty() && floatingIcon.isEmpty()) return
+    Box(
+        modifier = Modifier
+            .wrapContentSize()
+            .offset(y = offsetY, x = offsetX)
+            .background(AppTheme.current.colors.background.surface)
+            .zIndex(10f),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = Spacing.S),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(floatingValue, style = Typography.labelSMedium, color = titleColor)
+            if (required) {
+                Text(
+                    "*",
+                    style = Typography.labelSMedium,
+                    color = AppTheme.current.colors.error.primary,
+                )
+            }
+            if (floatingIcon.isNotEmpty()) {
+                Icon(
+                    source = floatingIcon,
+                    modifier = Modifier.padding(start = Spacing.XS),
+                    size = 16.dp,
+                    color = iconColor,
+                )
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputDropDown.kt

@@ -0,0 +1,114 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun InputDropDown(
+    value: MutableState<String> = remember { mutableStateOf("") },
+    floatingValue: String = "",
+    floatingValueColor: Color = AppTheme.current.colors.text.hint,
+    floatingIcon: String = "",
+    floatingIconColor: Color = AppTheme.current.colors.text.default,
+    placeholder: String = "",
+    size: InputSize = InputSize.SMALL,
+    onPress: () -> Unit = {},
+    hintText: String = "",
+    error: String = "",
+    errorSpacing: Boolean = false,
+    disabled: Boolean = false,
+    icon: String = "arrow_chevron_down_small",
+    iconColor: Color = AppTheme.current.colors.text.default,
+    onRightIconPressed: () -> Unit = {},
+    leadingIcon: String = "",
+    leadingIconColor: Color = AppTheme.current.colors.text.hint,
+    loading: Boolean = false,
+    required: Boolean = false,
+) {
+    val isFocused by remember { mutableStateOf(false) }
+
+    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
+        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
+
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
+
+    val fontSize = scaleSize(16.sp)
+    val lineHeight = scaleSize(24.sp)
+
+    Column(modifier = Modifier
+        .conditional(IsShowBaseLineDebug) {
+            border(1.dp, Colors.blue_03)
+        }
+        .clickable(enabled = !disabled, onClick = onPress)
+        .semantics {
+            contentDescription = floatingValue; testTag = testId
+        }) {
+        Box {
+            FloatingLabel(
+                floatingValue = floatingValue,
+                floatingIcon = floatingIcon,
+                titleColor = floatingTitleColor,
+                iconColor = floatingIconTintColor,
+                offsetY = -Spacing.S,
+                required = required,
+            )
+            Box(
+                modifier = Modifier.fillMaxWidth()
+                    .height(if (size == InputSize.SMALL) 48.dp else 56.dp)
+                    .border(
+                        1.dp,
+                        getBorderColor(isFocused, error, disabled),
+                        RoundedCornerShape(size.values.borderRadius)
+                    ),
+                contentAlignment = Alignment.CenterStart
+            ) {
+                Row(
+                    modifier = Modifier.padding(horizontal = Spacing.M),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    //leading icon
+                    if (leadingIcon.isNotEmpty()) {
+                        Icon(
+                            source = leadingIcon,
+                            modifier = Modifier.padding(end = Spacing.M),
+                            size = if (size.name == InputSize.SMALL.name) 24.dp else 32.dp,
+                            color = leadingIconColor
+                        )
+                    }
+                    Box(Modifier.weight(1f)) {
+                        Text(
+                            text = value.value.ifEmpty { placeholder },
+                            style = TextStyle(
+                                fontSize = fontSize,
+                                lineHeight = lineHeight
+                            ),
+                            color = if (value.value.isEmpty()) placeholderColor else textColor
+                        )
+                    }
+                    RenderRightIcon(
+                        loading, icon, iconTintColor,
+                        onRightIconPressed
+                    )
+                }
+            }
+        }
+        ErrorView(error, errorSpacing, hintText)
+    }
+}