@momo-kits/native-kits 0.152.1-beta.2 → 0.152.2-beta.121

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

@@ -1,338 +0,0 @@
-package vn.momo.kits.components
-
-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.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.TextLayoutResult
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.setAutomationId
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.Dp
-import kotlin.math.min
-
-data class PopupAction(
-    val title: String,
-    val onPress: (() -> Unit)?,
-)
-
-enum class PopupActionDirection {
-    ROW,
-    COLUMN,
-    AUTO
-}
-
-private fun heightForLines(
-    layout: TextLayoutResult,
-    targetLines: Float
-): Float {
-    val clampedLines = targetLines.coerceAtLeast(1f)
-    val wholeLines = kotlin.math.floor(clampedLines).toInt()
-    val fractionalPart = clampedLines - wholeLines
-
-    val baseLineIndex = (wholeLines - 1)
-        .coerceAtLeast(0)
-        .coerceAtMost(layout.lineCount - 1)
-
-    var heightPx = layout.getLineBottom(baseLineIndex)
-
-    if (fractionalPart > 0f) {
-        val nextLineIndex = (baseLineIndex + 1)
-            .coerceAtMost(layout.lineCount - 1)
-        val nextBottomPx = layout.getLineBottom(nextLineIndex)
-        heightPx += (nextBottomPx - heightPx) * fractionalPart
-    }
-    return heightPx
-}
-
-@Composable
-fun PopupNotify(
-    image: String = "",
-    title: String = "Title",
-    description: String = "Description",
-    error: String = "",
-    primary: PopupAction? = null,
-    secondary: PopupAction? = null,
-    buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
-    onIconClose: () -> Unit,
-    isShowCloseIcon: Boolean = true,
-) {
-    var isScroll by remember { mutableStateOf(false) }
-    val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
-
-    val density = LocalDensity.current
-    var scrollHeight: Dp by remember { mutableStateOf(0.dp) }
-
-    LaunchedEffect(layoutResult.value) {
-        if ((layoutResult.value?.lineCount ?: 0) > 3) {
-            isScroll = true
-        }
-    }
-
-    LaunchedEffect(layoutResult.value) {
-        layoutResult.value?.let { v ->
-            // cap visible height at ~8.5 lines
-            val textPx = v.size.height.toFloat()
-            val capPx  = heightForLines(v, 8.5f)
-
-            isScroll = textPx >= capPx
-            scrollHeight = with(density) { min(textPx, capPx).toDp() }
-        }
-    }
-
-    val content: @Composable (Modifier) -> Unit = if (isScroll) {
-        { modifier ->
-            LazyColumn(
-                modifier = modifier.height(scrollHeight)
-            ) {
-                item {
-                    Text(
-                        text = description,
-                        onTextLayout = { layoutResult.value = it },
-                        style = Typography.bodyDefaultRegular
-                    )
-                }
-            }
-        }
-    } else {
-        { modifier ->
-            Box(modifier = modifier) {
-                Text(
-                    text = description,
-                    onTextLayout = { layoutResult.value = it },
-                    style = Typography.bodyDefaultRegular
-                )
-            }
-        }
-    }
-
-    fun onClose(callback: (() -> Unit)?) {
-        callback?.invoke()
-    }
-
-    Box(
-        Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
-    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(horizontal = 12.dp)
-                .clip(RoundedCornerShape(Radius.L))
-                .background(
-                    AppTheme.current.colors.background.surface,
-                    RoundedCornerShape(Radius.L)
-                )
-        ) {
-            if(image.isNotEmpty()) {
-                Image(
-                    source = image,
-                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment = Alignment.Center)
-                )
-            }
-
-            Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(
-                    style = Typography.headerDefaultBold,
-                    maxLines = 2,
-                    text = title,
-                    modifier = Modifier.setAutomationId("title_popup_permission")
-                )
-                content(Modifier.padding(top = Spacing.S))
-                if (error.isNotEmpty()) {
-                    Text(
-                        text = "Mã lỗi: " + error,
-                        style = Typography.descriptionXsRegular,
-                        color = AppTheme.current.colors.text.hint,
-                        maxLines = 1,
-                        modifier = Modifier.padding(top = Spacing.S)
-                    )
-                }
-            }
-
-            Box(
-                modifier = Modifier.padding(horizontal = Spacing.XL)
-                    .padding(bottom = Spacing.XL)
-            ) {
-                BuildAction(primary, secondary, buttonDirection, onAction = { callback ->
-                    onClose(callback)
-                })
-            }
-        }
-
-        if(isShowCloseIcon) {
-            Box(
-                Modifier
-                    .width(22.dp)
-                    .height(22.dp)
-                    .offset(x = -(1).dp, y = (-11).dp)
-                    .background(
-                        color = AppTheme.current.colors.text.default,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .border(
-                        width = 2.dp,
-                        color = AppTheme.current.colors.background.surface,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .clip(RoundedCornerShape(100))
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = { onClose { onIconClose() } }
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Icon(
-                    source = "navigation_close",
-                    color = AppTheme.current.colors.background.surface,
-                    size = 16.dp,
-                    modifier = Modifier.setAutomationId("ic_popup_close")
-                )
-            }
-        }
-    }
-}
-
-@Composable
-fun BuildAction(
-    primary: PopupAction?,
-    secondary: PopupAction?,
-    buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
-    onAction: (onPress: (() -> Unit)?) -> Unit,
-) {
-    val closeAction = remember { mutableStateOf("button_action") }
-    when (buttonDirection) {
-        PopupActionDirection.AUTO -> {
-            if (secondary != null && (secondary.title.length > 12 || primary?.title?.length!! > 12)) {
-                renderColumn(
-                    secondary = secondary,
-                    onAction = onAction,
-                    closeAction = closeAction,
-                    primary = primary
-                )
-            } else {
-                renderRow(
-                    secondary = secondary,
-                    onAction = onAction,
-                    closeAction = closeAction,
-                    primary = primary
-                )
-            }
-        }
-
-        PopupActionDirection.ROW -> renderRow(
-            secondary = secondary,
-            onAction = onAction,
-            closeAction = closeAction,
-            primary = primary
-        )
-
-        else -> renderColumn(
-            secondary = secondary,
-            onAction = onAction,
-            closeAction = closeAction,
-            primary = primary
-        )
-    }
-}
-
-@Composable
-fun renderRow(
-    secondary: PopupAction?,
-    closeAction: MutableState<String>,
-    primary: PopupAction?,
-    onAction: (onPress: (() -> Unit)?) -> Unit,
-) {
-    Row(horizontalArrangement = Arrangement.Center) {
-        secondary?.let {
-            Box(Modifier.weight(1f)) {
-                Button(
-                    size = Size.MEDIUM,
-                    onClick = {
-                        closeAction.value = "button_action"
-                        onAction(it.onPress)
-                    },
-                    title = it.title,
-                    type = ButtonType.TEXT,
-                    modifier = Modifier.setAutomationId("btn_popup_cancel")
-                )
-            }
-            Spacer(modifier = Modifier.width(Spacing.S))
-        }
-        Box(Modifier.weight(1f)) {
-            Button(
-                size = Size.MEDIUM,
-                onClick = {
-                    closeAction.value = "button_action"
-                    onAction(primary?.onPress)
-                },
-                title = primary?.title ?: "",
-                modifier = Modifier.setAutomationId("btn_popup_allow")
-            )
-        }
-    }
-}
-
-@Composable
-fun renderColumn(
-    secondary: PopupAction?,
-    closeAction: MutableState<String>,
-    primary: PopupAction?,
-    onAction: (onPress: (() -> Unit)?) -> Unit,
-) {
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
-        Button(
-            size = Size.MEDIUM,
-            onClick = {
-                closeAction.value = "button_action"
-                onAction(primary?.onPress)
-            },
-            title = primary?.title ?: "",
-            modifier = Modifier.setAutomationId("btn_popup_allow")
-        )
-        secondary?.let {
-            Spacer(modifier = Modifier.height(Spacing.S))
-            secondary.let {
-                Button(
-                    size = Size.MEDIUM,
-                    onClick = {
-                        closeAction.value = "button_action"
-                        onAction(it.onPress)
-                    },
-                    title = it.title,
-                    type = ButtonType.TEXT,
-                    modifier = Modifier.setAutomationId("btn_popup_cancel")
-                )
-            }
-        }
-    }
-}
-

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

@@ -1,95 +0,0 @@
-package vn.momo.kits.components
-
-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.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.utils.ifNotNull
-
-@Composable
-fun PopupPromotion(
-    source: String = "",
-    onPress: (() -> Unit) = {},
-    onClose: (() -> Unit) = {},
-) {
-    Column(Modifier.padding(horizontal = Spacing.M).setAutomationId("popup_notify")) {
-        source.ifNotNull(
-            Image(
-                source = source,
-                modifier = Modifier.fillMaxWidth()
-                    .aspectRatio(0.72f)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = onPress
-                    ),
-                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Crop)
-            ), null
-        )
-        Box(
-            modifier = Modifier
-                .padding(top = Spacing.S)
-                .fillMaxWidth()
-                .width(40.dp)
-                .height(40.dp),
-            contentAlignment = Alignment.Center
-        ) {
-            Box(
-                modifier = Modifier
-                    .width(40.dp)
-                    .height(40.dp)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = onClose
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    Modifier
-                        .width(22.dp)
-                        .height(22.dp)
-                        .background(
-                            color = AppTheme.current.colors.text.default,
-                            shape = RoundedCornerShape(Radius.M)
-                        )
-                        .border(
-                            width = 2.dp,
-                            color = AppTheme.current.colors.background.surface,
-                            shape = RoundedCornerShape(Radius.M)
-                        )
-                        .clip(RoundedCornerShape(100))
-                    ,
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        source = "navigation_close",
-                        color = AppTheme.current.colors.background.surface,
-                        size = 16.dp,
-                        modifier = Modifier.setAutomationId("ic_popup_close")
-                    )
-                }
-            }
-
-        }
-    }
-}

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

@@ -1,64 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.activeOpacityClickable
-
-@Composable
-fun Radio(
-    value: Any,
-    groupValue: Any,
-    disabled: Boolean = false,
-    onChange: () -> Unit = {},
-    label: String = "",
-    modifier: Modifier = Modifier,
-) {
-    val selected = value == groupValue
-    val borderColor = when {
-        disabled && selected -> AppTheme.current.colors.background.tonal
-        disabled -> AppTheme.current.colors.text.disable
-        selected -> AppTheme.current.colors.primary
-        else -> AppTheme.current.colors.text.default
-    }
-    val borderWidth = if (selected) 6.dp else 2.dp
-
-    Row(
-        modifier = modifier.activeOpacityClickable(
-            onClick = onChange,
-            enabled = !disabled,
-        ),
-        horizontalArrangement = Arrangement.Center,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Box(
-            modifier = modifier
-                .padding(end = if (label.isEmpty()) 0.dp else Spacing.XS)
-                .border(borderWidth, borderColor, RoundedCornerShape(Radius.M))
-                .clip(RoundedCornerShape(Radius.M))
-                .size(20.dp)
-        )
-        if (label.isNotEmpty()) {
-            Text(
-                style = Typography.descriptionDefaultRegular,
-                text = label,
-            )
-        }
-    }
-}

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

@@ -1,89 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.RepeatMode
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
-import vn.momo.kits.const.Colors
-
-// Pre-computed shimmer colors to avoid repeated list creation
-private val shimmerColors = listOf(
-    Colors.black_05,
-    Colors.black_03,
-    Colors.black_05,
-)
-
-// Constants for better performance
-private const val SHADOW_BRUSH_PERCENTAGE = 0.6f
-private const val DEFAULT_DURATION_MILLIS = 1000
-
-@Composable
-fun Skeleton() {
-    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
-        // Memoize width calculation
-        val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
-
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Colors.black_05)
-                .shimmerLoadingAnimation(maxWidth = maxWidthValue)
-        )
-    }
-}
-
-@Composable
-fun Modifier.shimmerLoadingAnimation(
-    maxWidth: Int,
-    angleOfAxisY: Float = 0f,
-    durationMillis: Int = DEFAULT_DURATION_MILLIS,
-): Modifier {
-    // Memoize calculations to avoid repeated computations
-    val widthOfShadowBrush = remember(maxWidth) {
-        (maxWidth * SHADOW_BRUSH_PERCENTAGE).toInt()
-    }
-
-    val animationTarget = remember(durationMillis, widthOfShadowBrush) {
-        (durationMillis + widthOfShadowBrush).toFloat()
-    }
-
-    val transition = rememberInfiniteTransition(label = "shimmer")
-    val translateAnimation = transition.animateFloat(
-        initialValue = 0f,
-        targetValue = animationTarget,
-        animationSpec = infiniteRepeatable(
-            animation = tween(
-                durationMillis = durationMillis,
-                easing = LinearEasing,
-            ),
-            repeatMode = RepeatMode.Restart,
-        ),
-        label = "shimmerTranslate"
-    )
-
-    return drawBehind {
-        // Memoize brush creation by using remember in the calling composable
-        val startX = translateAnimation.value - widthOfShadowBrush
-        val endX = translateAnimation.value
-
-        drawRect(
-            brush = Brush.linearGradient(
-                colors = shimmerColors,
-                start = Offset(x = startX, y = 0f),
-                end = Offset(x = endX, y = angleOfAxisY)
-            )
-        )
-    }
-}

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

@@ -1,91 +0,0 @@
-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.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.setAutomationId
-
-// Pre-computed shapes to avoid repeated creation
-private val switchShape = RoundedCornerShape(20.dp)
-private val circleShape = RoundedCornerShape(percent = 100)
-
-@Composable
-fun Switch(
-    value: Boolean = false,
-    onChange: (Boolean) -> Unit = {},
-    disabled: Boolean = false,
-    title: String? = "",
-    accessibilityId: String? = ""
-) {
-    // Memoize color calculations to avoid repeated conditional logic
-    val colors = remember(value, disabled) {
-        val circleColor = if (value) Colors.black_01 else Colors.black_03
-        val bgColor = when {
-            disabled && value -> Colors.green_09
-            disabled && !value -> Colors.black_05
-            value -> Colors.green_03
-            else -> Colors.black_07
-        }
-        circleColor to bgColor
-    }
-
-    val (circleBackgroundColor, backgroundColor) = colors
-
-    // Memoize automation ID to avoid string concatenation on every render
-    val automationIdValue = remember(accessibilityId, title, value) {
-        accessibilityId ?: "toggle_${title ?: "unknown"}_$value"
-    }
-
-    // Memoize alignment calculation
-    val contentAlignment = remember(value) {
-        if (value) Alignment.CenterEnd else Alignment.CenterStart
-    }
-
-    // Memoize click handler to avoid lambda recreation
-    val onClickHandler = remember(onChange, value) {
-        { onChange(!value) }
-    }
-
-    Box(modifier = Modifier.setAutomationId(automationIdValue)) {
-        Box(
-            modifier = Modifier
-                .width(38.dp)
-                .height(20.dp)
-                .border(0.dp, Color.Unspecified, switchShape)
-                .background(backgroundColor, switchShape)
-                .clip(switchShape)
-                .clickable(enabled = !disabled, onClick = onClickHandler)
-                .padding(horizontal = Spacing.XS),
-            contentAlignment = contentAlignment
-        ) {
-            Box(
-                modifier = Modifier
-                    .size(14.dp)
-                    .border(0.dp, Color.Unspecified, circleShape)
-                    .background(circleBackgroundColor, circleShape),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    Modifier
-                        .size(6.dp)
-                        .background(backgroundColor, circleShape)
-                )
-            }
-        }
-    }
-}