@momo-kits/native-kits 0.158.1-beta.1 → 0.158.1-beta.2-debug

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

@@ -0,0 +1,198 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
+import io.ktor.util.Platform
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.getStatusBarHeight
+
+/**
+ * A debug overlay that draws danger/warning baseline guides on top of the screen.
+ *
+ * Highlights safe-area boundaries, header regions, and bottom navigation zones
+ * using colored solid or dotted lines and semi-transparent red zones.
+ *
+ * @param enabled When `false` the composable renders nothing. Pass `false` when
+ *                your QC automation flag is active to suppress the overlay.
+ */
+@Composable
+fun BaselineView(enabled: Boolean = true) {
+    if (!enabled) return
+
+    val bottomInsetHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+    val topInset = if (getPlatformName() == "Android") getStatusBarHeight() - 14.dp else getStatusBarHeight()
+    val bottomInset = if (getPlatformName() == "iOS") minOf(bottomInsetHeight, 21.dp) else bottomInsetHeight
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Danger zones
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(topInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.TopEnd)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.BottomCenter)
+        )
+
+        // Danger lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset)
+                .fillMaxWidth(),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 52.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 104.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 64.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(end = 12.dp)
+                .fillMaxHeight()
+                .align(Alignment.BottomEnd),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+
+        // Warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 26.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFFF7A00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 56.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 8.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+
+        // Header background warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 40.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 48.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+    }
+}
+
+enum class BaselineOrientation { Horizontal, Vertical }
+
+@Composable
+fun BaselineDottedLine(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Red,
+    orientation: BaselineOrientation = BaselineOrientation.Horizontal,
+    isDotted: Boolean = true
+) {
+    Canvas(modifier = modifier) {
+        val pathEffect = if (isDotted) PathEffect.dashPathEffect(floatArrayOf(8f, 8f)) else null
+        drawLine(
+            color = color,
+            start = if (orientation == BaselineOrientation.Horizontal) Offset(
+                0f,
+                size.height / 2
+            ) else Offset(size.width / 2, 0f),
+            end = if (orientation == BaselineOrientation.Horizontal) Offset(
+                size.width,
+                size.height / 2
+            ) else Offset(size.width / 2, size.height),
+            strokeWidth = 1.dp.toPx(),
+            pathEffect = pathEffect,
+            cap = StrokeCap.Round,
+        )
+    }
+}

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

@@ -0,0 +1,357 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateDpAsState
+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.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+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.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
+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.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.LottieAnimation
+
+enum class ButtonType {
+    PRIMARY,
+    SECONDARY,
+    TONAL,
+    OUTLINE,
+    DANGER,
+    TEXT,
+    DISABLED
+}
+
+data class ButtonSpecs(
+    val height: Dp,
+    val radius: Dp,
+    val padding: Dp,
+    val width: Dp,
+)
+
+enum class Size(val value: ButtonSpecs) {
+    LARGE(
+        ButtonSpecs(
+            height = 48.dp,
+            radius = Radius.S,
+            padding = Spacing.L,
+            width = 128.dp
+        )
+    ),
+    MEDIUM(
+        ButtonSpecs(
+            height = 36.dp,
+            radius = Radius.S,
+            padding = Spacing.M,
+            width = 80.dp
+        )
+    ),
+    SMALL(
+        ButtonSpecs(
+            height = 28.dp,
+            radius = Radius.S,
+            padding = Spacing.S,
+            width = 60.dp
+        )
+    )
+}
+
+private val styleCache = mapOf(
+    Size.LARGE to Typography.actionDefaultBold,
+    Size.MEDIUM to Typography.actionSBold,
+    Size.SMALL to Typography.actionXsBold
+)
+
+private val iconSizeCache = mapOf(
+    Size.LARGE to 24.dp,
+    Size.MEDIUM to 16.dp,
+    Size.SMALL to 16.dp
+)
+
+private val iconSpaceCache = mapOf(
+    Size.SMALL to Spacing.XS,
+    Size.MEDIUM to Spacing.S,
+    Size.LARGE to Spacing.S
+)
+
+fun getStyle(size: Size): TextStyle {
+    return styleCache[size] ?: Typography.actionDefaultBold
+}
+
+fun getIconSize(size: Size): Dp = iconSizeCache[size] ?: 24.dp
+fun getIconSpace(size: Size): Dp = iconSpaceCache[size] ?: Spacing.S
+
+@Composable
+fun getTextColor(loading: Boolean, type: ButtonType): Color {
+    val theme = AppTheme.current
+
+    return remember(type, theme, loading) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.text.disable
+            ButtonType.PRIMARY -> Colors.black_01
+            ButtonType.SECONDARY -> theme.colors.text.default
+            ButtonType.OUTLINE -> theme.colors.primary
+            ButtonType.TONAL -> theme.colors.primary
+            ButtonType.DANGER -> Colors.black_01
+            ButtonType.TEXT -> theme.colors.primary
+        }.withLoading(loading)
+    }
+}
+
+@Composable
+fun RenderTitle(size: Size, title: String = "", textColor: Color) {
+    val style = remember(size) { getStyle(size) }
+    Text(
+        style = style,
+        text = title,
+        color = textColor,
+        overflow = TextOverflow.Ellipsis,
+        maxLines = 1
+    )
+}
+
+@Composable
+fun RenderIcon(
+    size: Size,
+    isIconLeft: Boolean,
+    useTintColor: Boolean = true,
+    icon: String = "",
+    forceLoading: Boolean = false,
+    bgColor: Color? = null,
+    textColor: Color? = null,
+) {
+    val iconSize = remember(size) { getIconSize(size) }
+    val margin = remember(size) { getIconSpace(size) }
+    val color = if (useTintColor) textColor else Color.Unspecified
+
+    val modifier = Modifier.padding(
+        start = if (isIconLeft) 0.dp else margin,
+        end = if (isIconLeft) margin else 0.dp
+    )
+
+    if (forceLoading) {
+        Box(modifier) {
+            LottieAnimation(
+                modifier = Modifier.size(iconSize),
+                bgColor = bgColor,
+                tintColor = color,
+                path = "files/lottie_circle_loader"
+            )
+        }
+    } else if (icon.isNotEmpty()) {
+        Icon(
+            source = icon,
+            color = color,
+            size = iconSize,
+            modifier = modifier
+        )
+    }
+}
+
+private fun shouldLoadingOnLeft(iconLeft: String, iconRight: String): Boolean {
+    val hasLeft = iconLeft.isNotEmpty()
+    val hasRight = iconRight.isNotEmpty()
+    return when {
+        !hasLeft && !hasRight -> true
+        hasLeft && !hasRight -> true
+        !hasLeft && hasRight -> false
+        hasLeft && hasRight -> false
+        else -> true
+    }
+}
+
+@Composable
+fun getTypeStyle(
+    type: ButtonType,
+    color: Color? = AppTheme.current.colors.primary,
+    size: Size,
+    bgColor: Color,
+): Modifier {
+    val theme = AppTheme.current
+    val radius = remember(size) { size.value.radius }
+    val modifier = Modifier.background(bgColor)
+
+    return remember(type, color, theme, radius, bgColor) {
+        when (type) {
+            ButtonType.DISABLED -> modifier
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
+
+            ButtonType.PRIMARY -> modifier
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
+
+            ButtonType.SECONDARY -> modifier
+                .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
+
+            ButtonType.OUTLINE -> modifier
+                .border(1.dp, color ?: theme.colors.primary, RoundedCornerShape(radius))
+
+            ButtonType.TONAL -> modifier
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
+
+            ButtonType.DANGER -> modifier
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
+
+            ButtonType.TEXT -> modifier
+        }
+    }
+}
+
+@Composable
+fun getButtonBackgroundColor(
+    loading: Boolean,
+    type: ButtonType
+): Color {
+    val theme = AppTheme.current
+
+    return remember(loading, type, theme) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.background.disable.withLoading(loading)
+            ButtonType.PRIMARY -> theme.colors.primary.withLoading(loading)
+            ButtonType.SECONDARY -> theme.colors.background.surface.withLoading(loading)
+            ButtonType.OUTLINE -> theme.colors.background.surface.withLoading(loading)
+            ButtonType.TONAL -> theme.colors.background.tonal.withLoading(loading)
+            ButtonType.DANGER -> theme.colors.error.primary.withLoading(loading)
+            ButtonType.TEXT -> Color.Unspecified
+        }
+    }
+}
+
+fun Color.withLoading(loading: Boolean): Color =
+    this.copy(alpha = if (loading) 0.75f else 1f)
+
+@Composable
+fun Button(
+    onClick: () -> Unit,
+    type: ButtonType = ButtonType.PRIMARY,
+    size: Size = Size.LARGE,
+    iconRight: String = "",
+    iconLeft: String = "",
+    title: String = "Button",
+    loading: Boolean = false,
+    useTintColor: Boolean = true,
+    isFull: Boolean = true,
+    modifier: Modifier = Modifier,
+) {
+    val radius = remember(size) { size.value.radius }
+    val isEnabled = remember(type) { type != ButtonType.DISABLED }
+    val loadingOnLeft = remember(iconLeft, iconRight) {
+        shouldLoadingOnLeft(iconLeft, iconRight)
+    }
+
+    val sizeSpecs = remember(size) { size.value }
+
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
+    val animatedPadding by animateDpAsState(
+        targetValue = if (isPressed && isEnabled && !loading) 2.dp else 0.dp,
+        animationSpec = tween(100),
+        label = "pressPadding"
+    )
+
+    val targetAlpha = if (isPressed && isEnabled && !loading) 0.5f else 1f
+    val alpha by animateFloatAsState(
+        targetValue = targetAlpha,
+        animationSpec = tween(100),
+        label = "buttonPressAlpha"
+    )
+
+    val clickableModifier =
+        if (isEnabled && !loading) {
+            modifier
+                .clip(RoundedCornerShape(radius))
+                .clickable(
+                    enabled = isEnabled && !loading,
+                    interactionSource = interactionSource,
+                    indication = null,
+                    onClick = onClick
+                )
+                .alpha(alpha)
+        } else {
+            modifier
+                .clip(RoundedCornerShape(radius))
+        }
+
+    val bgColor = getButtonBackgroundColor(loading, type)
+    val textColor = getTextColor(loading, type)
+
+    val rootModifier = if (isFull) {
+        Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+    } else {
+        Modifier
+    }
+
+    Box(
+        modifier = rootModifier.then(clickableModifier),
+        contentAlignment = Alignment.Center
+    ) {
+        // Visual background (shrinks on press)
+        Box(
+            modifier = Modifier
+                .matchParentSize()
+                .padding(horizontal = animatedPadding)
+                .clip(RoundedCornerShape(radius))
+                .then(getTypeStyle(type, size = size, bgColor = bgColor))
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+        )
+
+        // Content
+        Row(
+            modifier = Modifier
+                .padding(horizontal = sizeSpecs.padding)
+                .height(sizeSpecs.height),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            RenderIcon(
+                size = size,
+                isIconLeft = true,
+                useTintColor = useTintColor,
+                icon = iconLeft,
+                forceLoading = loading && loadingOnLeft,
+                bgColor = bgColor,
+                textColor = textColor
+            )
+            RenderTitle(size, title, textColor = textColor)
+            RenderIcon(
+                size = size,
+                isIconLeft = false,
+                useTintColor = useTintColor,
+                icon = iconRight,
+                forceLoading = loading && !loadingOnLeft,
+                bgColor = bgColor,
+                textColor = textColor
+            )
+        }
+    }
+}

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

@@ -0,0 +1,123 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import kotlin.math.absoluteValue
+
+@Composable
+fun Carousel(
+    itemCount: Int,
+    modifier: Modifier = Modifier,
+    loop: Boolean = false,
+    autoplay: Boolean = false,
+    autoplayInterval: Long = 3000L,
+    enableSnap: Boolean = true,
+    scrollEnabled: Boolean = true,
+    inactiveSlideOpacity: Float = 1f,
+    inactiveSlideScale: Float = 1f,
+    contentPadding: PaddingValues = PaddingValues(0.dp),
+    onSnapToItem: (Int) -> Unit = {},
+    onScrollIndexChanged: (Int) -> Unit = {},
+    content: @Composable (index: Int) -> Unit,
+) {
+    if (itemCount <= 0) return
+
+    val virtualPageCount = if (loop) itemCount * 1000 else itemCount
+    val startPage = if (loop) (virtualPageCount / 2) - ((virtualPageCount / 2) % itemCount) else 0
+
+    val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
+
+    // Map virtual page to real index
+    val realIndex: (Int) -> Int = { page -> page % itemCount }
+
+    // Track user interaction for autoplay pause
+    var isUserScrolling by remember { mutableStateOf(false) }
+
+    // Autoplay
+    if (autoplay && itemCount > 1) {
+        LaunchedEffect(autoplayInterval, isUserScrolling) {
+            if (isUserScrolling) return@LaunchedEffect
+            while (isActive) {
+                delay(autoplayInterval)
+                if (!isUserScrolling) {
+                    val nextPage = pagerState.currentPage + 1
+                    if (nextPage < virtualPageCount) {
+                        pagerState.animateScrollToPage(nextPage)
+                    }
+                }
+            }
+        }
+    }
+
+    // Track scroll state for callbacks
+    LaunchedEffect(pagerState) {
+        snapshotFlow { pagerState.isScrollInProgress }.collect { scrolling ->
+            isUserScrolling = scrolling
+        }
+    }
+
+    LaunchedEffect(pagerState) {
+        snapshotFlow { pagerState.currentPage }.collect { page ->
+            val real = realIndex(page)
+            onSnapToItem(real)
+            onScrollIndexChanged(real)
+        }
+    }
+
+    HorizontalPager(
+        state = pagerState,
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        contentPadding = contentPadding,
+        userScrollEnabled = scrollEnabled,
+        beyondViewportPageCount = if (loop) 1 else 0,
+    ) { page ->
+        val real = realIndex(page)
+
+        val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
+
+        val scale by animateFloatAsState(
+            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideScale,
+            animationSpec = tween(150),
+            label = "carouselScale"
+        )
+        val alpha by animateFloatAsState(
+            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideOpacity,
+            animationSpec = tween(150),
+            label = "carouselAlpha"
+        )
+
+        Box(
+            modifier = Modifier
+                .graphicsLayer {
+                    scaleX = scale
+                    scaleY = scale
+                    this.alpha = alpha
+                }
+        ) {
+            content(real)
+        }
+    }
+}