@momo-kits/native-kits 0.160.1-beta.2-debug → 0.160.1-beta.2

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

@@ -1,108 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-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.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.platform.LottieAnimation
-
-enum class LoaderType {
-    DOT, SPINNER
-}
-
-@Composable
-fun Loader(
-    type: LoaderType = LoaderType.DOT,
-    tintColor: Color? = null,
-    modifier: Modifier = Modifier
-) {
-    when (type) {
-        LoaderType.DOT -> DotLoader(tintColor = tintColor, modifier = modifier)
-        LoaderType.SPINNER -> SpinnerLoader(tintColor = tintColor, modifier = modifier)
-    }
-}
-
-@Composable
-fun DotLoader(
-    tintColor: Color? = null,
-    modifier: Modifier = Modifier
-) {
-    LottieAnimation(
-        path = "files/dot_loading",
-        tintColor = tintColor,
-        modifier = modifier
-            .size(width = 52.dp, height = 18.dp)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-    )
-}
-
-@Composable
-fun SpinnerLoader(
-    tintColor: Color? = null,
-    modifier: Modifier = Modifier
-) {
-    LottieAnimation(
-        path = "files/lottie_circle_loader",
-        tintColor = tintColor,
-        modifier = modifier
-            .size(24.dp)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-    )
-}
-
-@Composable
-fun ProgressBar(
-    percent: Float = 0f,
-    color: Color? = null,
-    modifier: Modifier = Modifier
-) {
-    val clampedPercent = percent.coerceIn(0f, 100f)
-    val animatedProgress by animateFloatAsState(
-        targetValue = clampedPercent / 100f,
-        animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
-        label = "progressAnimation"
-    )
-
-    val trackColor = AppTheme.current.colors.background.default
-    val fillColor = color ?: AppTheme.current.colors.primary
-
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .height(4.dp)
-            .clip(RoundedCornerShape(Radius.XXS))
-            .background(trackColor)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth(animatedProgress)
-                .height(4.dp)
-                .clip(RoundedCornerShape(Radius.XXS))
-                .background(fillColor)
-        )
-    }
-}

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

@@ -1,56 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-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.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-
-@Composable
-fun Dot(active: Boolean = false, activeColor: Color, modifier: Modifier = Modifier) {
-    return if (active) {
-        Box(
-            modifier = modifier.size(width = 12.dp, height = 4.dp).background(
-                color = activeColor,
-                shape = RoundedCornerShape(4.dp)
-            )
-        )
-    } else {
-        Box(
-            modifier = modifier.size(4.dp)
-                .background(
-                    color = AppTheme.current.colors.background.pressed,
-                    shape = RoundedCornerShape(4.dp)
-                )
-        )
-    }
-}
-
-@Composable
-fun PaginationDot(
-    activeIndex: Int = 0,
-    dataLength: Int = 3
-) {
-    Row(modifier = Modifier.conditional(IsShowBaseLineDebug) {
-        border(1.dp, Colors.blue_03)
-    }) {
-        for (i in 0 until dataLength) {
-            Dot(
-                i == activeIndex,
-                AppTheme.current.colors.primary,
-                modifier = Modifier.padding(end = if (i != dataLength - 1) Spacing.XS else 0.dp)
-            )
-        }
-    }
-}

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

@@ -1,41 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.conditional
-
-@Composable
-fun PaginationNumber(
-    activeIndex: Int = 0,
-    dataLength: Int = 2
-) {
-    BoxWithConstraints(
-        modifier = Modifier.background(
-            color = Color(0x33000000),
-            shape = RoundedCornerShape(Spacing.L)
-        )
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        },
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            modifier = Modifier.padding(horizontal = Spacing.S),
-            text = "${1 + activeIndex}/$dataLength",
-            color = Colors.black_01,
-            style = Typography.labelDefaultMedium
-        )
-    }
-}

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

@@ -1,92 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.horizontalScroll
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-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.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-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 androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-
-val INDICATOR_WIDTH = 24.dp
-val PROGRESS_WIDTH = 72.dp
-
-// Memoized offset calculation to avoid repeated computations during scroll
-private fun calculateOffset(currentPosition: Int, maxBound: Int): Dp {
-    return if (maxBound == 0) 0.dp else {
-        (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound.toFloat())
-    }
-}
-
-@Composable
-fun PaginationScroll(
-    modifier: Modifier = Modifier,
-    content: @Composable () -> Unit
-) {
-    val scrollState = rememberScrollState()
-    val theme = AppTheme.current
-
-    // Use derivedStateOf to optimize scroll position calculations
-    val indicatorOffset by remember {
-        derivedStateOf {
-            calculateOffset(scrollState.value, scrollState.maxValue)
-        }
-    }
-
-    // Cache theme colors to avoid repeated access
-    val (progressBackground, indicatorColor) = remember(theme) {
-        theme.colors.background.pressed to theme.colors.primary
-    }
-
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
-        Row(
-            modifier = modifier
-                .fillMaxWidth()
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(bottom = Spacing.L)
-                .horizontalScroll(scrollState)
-        ) {
-            content()
-        }
-
-        // Progress indicator
-        Box(
-            modifier = Modifier
-                .clip(RoundedCornerShape(Spacing.XS))
-                .width(PROGRESS_WIDTH)
-                .height(4.dp)
-                .background(color = progressBackground)
-        ) {
-            Box(
-                modifier = Modifier
-                    .offset(x = indicatorOffset)
-                    .clip(RoundedCornerShape(Spacing.XS))
-                    .width(INDICATOR_WIDTH)
-                    .height(4.dp)
-                    .background(color = indicatorColor)
-            )
-        }
-    }
-}

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

@@ -1,40 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-
-@Composable
-fun PaginationWhiteDot(
-    activeIndex: Int = 0,
-    dataLength: Int = 3
-) {
-    Row(
-        modifier = Modifier.background(
-            color = Color(0x33000000),
-            shape = RoundedCornerShape(Spacing.S)
-        )
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
-        .padding(Spacing.XS)
-    ) {
-        for (i in 0 until dataLength) {
-            Dot(
-                i == activeIndex,
-                Colors.black_01,
-                modifier = Modifier.padding(end = if (i != dataLength - 1) Spacing.XS else 0.dp)
-            )
-        }
-    }
-}

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

@@ -1,352 +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.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.Dp
-import vn.momo.kits.application.AppLanguage
-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
-}
-
-data class PopupNotifyProps(
-    val image: String = "",
-    val title: String = "Title",
-    val description: String = "Description",
-    val error: String = "",
-    val primary: PopupAction? = null,
-    val secondary: PopupAction? = null,
-    val buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
-    val onIconClose: () -> Unit,
-    val isShowCloseIcon: Boolean = true,
-)
-
-@Composable
-fun PopupNotify(
-    props: PopupNotifyProps,
-) {
-    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
-        }
-    }
-
-    val language = AppLanguage.current ?: "vi"
-    val errorCode: Map<String, String> = mapOf("vi" to "Mã lỗi: ", "en" to "Error code: ")
-
-    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 = props.description,
-                        onTextLayout = { layoutResult.value = it },
-                        style = Typography.bodyDefaultRegular
-                    )
-                }
-            }
-        }
-    } else {
-        { modifier ->
-            Box(modifier = modifier) {
-                Text(
-                    text = props.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)
-                )
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-        ) {
-            if(props.image.isNotEmpty()) {
-                Image(
-                    source = props.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 = props.title,
-                    modifier = Modifier.setAutomationId("title_popup_permission")
-                )
-                content(Modifier.padding(top = Spacing.S))
-                if (props.error.isNotEmpty()) {
-                    Text(
-                        text = errorCode[language] + props.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(props.primary, props.secondary, props.buttonDirection, onAction = { callback ->
-                    onClose(callback)
-                })
-            }
-        }
-
-        if(props.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 { props.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")
-                )
-            }
-        }
-    }
-}
-