@momo-kits/native-kits 0.162.2-beta.21 → 0.162.2-beta.22-debug

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

@@ -0,0 +1,383 @@
+package vn.momo.kits.components
+
+import vn.momo.kits.modifier.InternalApi
+
+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.*
+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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+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.*
+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
+)
+
+private fun getStyle(size: Size): TextStyle {
+    return styleCache[size] ?: Typography.actionDefaultBold
+}
+
+@InternalApi
+fun getIconSize(size: Size): Dp = iconSizeCache[size] ?: 24.dp
+private fun getIconSpace(size: Size): Dp = iconSpaceCache[size] ?: Spacing.S
+
+@InternalApi
+@Composable
+fun getTextColor(loading: Boolean, type: ButtonType): Color {
+    val theme = AppTheme.current
+
+    return remember(type, theme, loading) {
+        getButtonColor(type, theme).withLoading(loading)
+    }
+}
+
+internal fun getButtonColor(type: ButtonType, theme: Theme): Color {
+    return 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
+    }
+}
+
+
+@Composable
+internal 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
+@InternalApi
+fun RenderIcon(
+    size: Size,
+    isIconLeft: Boolean,
+    useTintColor: Boolean = true,
+    icon: String = "",
+    forceLoading: Boolean = false,
+    textColor: Color? = null,
+    iconOnly: Boolean = false,
+) {
+    val iconSize = remember(size) { getIconSize(size) }
+    val margin = remember(size, iconOnly) { if (iconOnly) 0.dp else 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 = null,
+                tintColor = color,
+                path = "files/lottie_circle_loader",
+                useCompose = true
+            )
+        }
+    } 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
+    }
+}
+
+@InternalApi
+@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
+        }
+    }
+}
+
+@InternalApi
+@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
+        }
+    }
+}
+
+private fun Color.withLoading(loading: Boolean): Color =
+    this.copy(alpha = if (loading) 0.75f else 1f)
+
+/**
+ * When [iconOnly] is true the label is hidden and the button collapses to a compact,
+ * icon-sized box (it ignores [isFull] and always wraps its content). [title] stays
+ * required and is exposed as the button's accessibility label. Supply the glyph via
+ * [iconLeft] (preferred) or [iconRight]; while [loading] the spinner replaces the icon.
+ */
+@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,
+    iconOnly: Boolean = false,
+    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 iconOnlyIcon = remember(iconLeft, iconRight) { iconLeft.ifEmpty { 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 && !iconOnly) {
+        Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+    } else {
+        Modifier
+    }
+
+    Box(
+        modifier = rootModifier
+            .then(clickableModifier)
+            .conditional(iconOnly) {
+                semantics(mergeDescendants = true) { contentDescription = title }
+            },
+        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,
+        ) {
+            if (iconOnly) {
+                RenderIcon(
+                    size = size,
+                    isIconLeft = true,
+                    useTintColor = useTintColor,
+                    icon = iconOnlyIcon,
+                    forceLoading = loading,
+                    textColor = textColor,
+                    iconOnly = true
+                )
+            } else {
+                RenderIcon(
+                    size = size,
+                    isIconLeft = true,
+                    useTintColor = useTintColor,
+                    icon = iconLeft,
+                    forceLoading = loading && loadingOnLeft,
+                    textColor = textColor
+                )
+                RenderTitle(size, title, textColor = textColor)
+                RenderIcon(
+                    size = size,
+                    isIconLeft = false,
+                    useTintColor = useTintColor,
+                    icon = iconRight,
+                    forceLoading = loading && !loadingOnLeft,
+                    textColor = textColor
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,113 @@
+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.*
+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
+import kotlin.time.Duration.Companion.milliseconds
+
+@Composable
+fun Carousel(
+    itemCount: Int,
+    modifier: Modifier = Modifier,
+    loop: Boolean = false,
+    autoplay: Boolean = false,
+    autoplayInterval: Long = 3000L,
+    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 }
+
+    val realIndex: (Int) -> Int = { page -> page % itemCount }
+
+    var isUserScrolling by remember { mutableStateOf(false) }
+
+    if (autoplay && itemCount > 1) {
+        LaunchedEffect(autoplayInterval, isUserScrolling) {
+            if (isUserScrolling) return@LaunchedEffect
+            while (isActive) {
+                delay(autoplayInterval.milliseconds)
+                if (!isUserScrolling) {
+                    val nextPage = pagerState.currentPage + 1
+                    if (nextPage < virtualPageCount) {
+                        pagerState.animateScrollToPage(nextPage)
+                    }
+                }
+            }
+        }
+    }
+
+    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)
+        }
+    }
+}

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

@@ -0,0 +1,89 @@
+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.Spacer
+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.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.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+private val checkboxShape = RoundedCornerShape(Radius.XS)
+
+@Composable
+fun CheckBox(
+    disabled: Boolean = false,
+    checked: Boolean = false,
+    onCheckedChange: (Boolean) -> Unit,
+    indeterminate: Boolean = false,
+    title: String = "",
+) {
+    val theme = AppTheme.current
+
+    val colors = remember(checked, disabled, theme) {
+        when {
+            disabled && checked -> Pair(theme.colors.background.tonal, theme.colors.background.tonal)
+            disabled -> Pair(theme.colors.border.disable, Color.Transparent)
+            checked -> Pair(theme.colors.primary, theme.colors.primary)
+            else -> Pair(theme.colors.text.default, Color.Transparent)
+        }
+    }
+
+    val (borderColor, backgroundColor) = colors
+
+    val iconSource = remember(indeterminate) {
+        if (indeterminate) "navigation_minus" else "ic_checked"
+    }
+
+    val onClickHandler = remember(onCheckedChange, checked) {
+        { onCheckedChange(!checked) }
+    }
+
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        Box(
+            modifier = Modifier
+                .size(20.dp)
+                .background(backgroundColor, checkboxShape)
+                .border(Spacing.XXS, borderColor, checkboxShape)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .activeOpacityClickable(
+                    activeOpacity = 0.8f,
+                    onClick = onClickHandler,
+                    enabled = !disabled,
+                ),
+        ) {
+            if (checked) {
+                Icon(
+                    source = iconSource,
+                    size = 20.dp,
+                    color = Colors.black_01
+                )
+            }
+        }
+
+        if (title.isNotEmpty()) {
+            Spacer(Modifier.size(Spacing.S))
+            Text(
+                style = Typography.descriptionDefaultRegular,
+                text = title,
+            )
+        }
+    }
+
+}

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

@@ -0,0 +1,128 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+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.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+@Composable
+fun Chip(
+    modifier: Modifier = Modifier,
+    label: String? = "Label",
+    iconLeft: String? = null,
+    iconRight: String? = null,
+    selected: Boolean = false,
+    onClick: () -> Unit = {},
+    size: ChipSize = ChipSize.LARGE,
+    iconLeftTint: Color? = null,
+    iconRightTint: Color? = null,
+    backgroundColor: Color? = null,
+    accessibilityLabel: String? = null,
+) {
+    val theme = AppTheme.current
+    val bg = when {
+        selected -> theme.colors.background.selected
+        backgroundColor != null -> backgroundColor
+        else -> Colors.black_03
+    }
+
+    val textColor = if (selected) theme.colors.primary else theme.colors.text.default
+    val leftTint =  if (selected) theme.colors.primary else iconLeftTint ?: theme.colors.text.default
+    val rightTint = if (selected) theme.colors.primary else iconRightTint ?: theme.colors.text.default
+
+    val dims = when (size) {
+        ChipSize.SMALL -> ChipDefaults.Small
+        ChipSize.LARGE -> ChipDefaults.Large
+    }
+
+    val (height, horizontal, iconSize, iconSpacing) =
+        listOf(scaleSize(dims.height), scaleSize(dims.horizontal), scaleSize(dims.iconSize), scaleSize(dims.iconSpacing))
+
+    val radius = scaleSize(Radius.L)
+
+    Row(
+        modifier
+            .wrapContentWidth()
+            .height(height.dp)
+            .clip(RoundedCornerShape(radius))
+            .background(bg)
+            .conditional(selected) {
+                Modifier.border(width = 2.dp, color = theme.colors.secondary, shape = RoundedCornerShape(radius))
+            }
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .activeOpacityClickable {
+                onClick()
+            }
+            .padding(horizontal = horizontal.dp)
+            .conditional(accessibilityLabel != null) {
+                setAutomationId(accessibilityLabel.toString())
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(iconSpacing.dp)
+    ) {
+        if (iconLeft != null) {
+            Icon(source = iconLeft, size = dims.iconSize.dp, color = leftTint)
+        }
+
+        if (!label.isNullOrEmpty()) {
+            Text(
+                text = label,
+                textAlign = TextAlign.Center,
+                color = textColor,
+                style = when (size) {
+                    ChipSize.SMALL -> Typography.labelSMedium
+                    ChipSize.LARGE -> Typography.labelDefaultMedium
+                },
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+        }
+
+        if (iconRight != null) {
+            Icon(source = iconRight, size = iconSize.dp, color = rightTint)
+        }
+    }
+}
+
+enum class ChipSize { SMALL, LARGE }
+
+private object ChipDefaults {
+    @Immutable
+    data class Dimensions(
+        val height: Float,
+        val horizontal: Float,
+        val iconSize: Float,
+        val iconSpacing: Float,
+    )
+
+    val Large = Dimensions(
+        height = 32f,
+        horizontal = 12f,
+        iconSize = 20f,
+        iconSpacing = 4f,
+    )
+
+    val Small = Dimensions(
+        height = 24f,
+        horizontal = 10f,
+        iconSize = 16f,
+        iconSpacing = 4f,
+    )
+}