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

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

@@ -0,0 +1,340 @@
+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.Row
+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.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.RoundRect
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun BadgeRibbon(
+    position: RibbonPosition = RibbonPosition.TopRight,
+    label: String = "Label",
+    isRound: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+
+    val rotate = if (position == RibbonPosition.TopRight || position == RibbonPosition.BottomRight) 180f else 0f
+    val useUpTail = position == RibbonPosition.BottomLeft || position == RibbonPosition.TopRight
+    val verticalAlignment = when(position){
+        RibbonPosition.TopLeft, RibbonPosition.BottomRight -> Alignment.Top
+        RibbonPosition.BottomLeft, RibbonPosition.TopRight -> Alignment.Bottom
+    }
+
+    Row(
+        modifier = modifier
+            .height(ribbonHeight)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .graphicsLayer { rotationZ = rotate },
+        verticalAlignment = verticalAlignment
+    ) {
+        if (useUpTail) {
+            UpTail()
+        } else {
+            DownTail()
+        }
+
+        if (isRound) {
+            renderRoundContent(label, rotate, theme.colors.warning.primary)
+        } else {
+            renderSkewContent(label, rotate, theme.colors.warning.primary)
+        }
+    }
+}
+
+@Composable
+fun renderRoundContent(label: String, rotate: Float, backgroundColor: Color){
+    Box(
+        modifier = Modifier
+            .height(roundHeight)
+            .background(
+                color = backgroundColor,
+                shape = RoundedCornerShape(
+                    topEnd = roundRightRadius,
+                    bottomEnd = roundRightRadius,
+                )
+            )
+            .padding(end = roundPaddingEnd),
+        contentAlignment = Alignment.Center,
+    ) {
+        Label(label, rotate)
+    }
+}
+
+@Composable
+fun renderSkewContent(label: String, rotate: Float, backgroundColor: Color){
+    Box(
+        modifier = Modifier
+            .height(skewBodyHeight)
+            .background(backgroundColor),
+        contentAlignment = Alignment.Center
+    ) {
+        Label(label, rotate)
+    }
+    RightTail()
+}
+
+@Composable
+fun Label(label: String, rotate: Float){
+    Text(
+        text = label,
+        color = Colors.black_01,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
+        style = Typography.labelXsMedium,
+        modifier = Modifier.graphicsLayer { rotationZ = rotate }
+    )
+}
+
+@Composable
+fun UpTail() {
+    Image(
+        source = "https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png",
+        modifier = Modifier
+            .graphicsLayer { rotationZ = 180f }
+            .width(headTailWidth)
+            .height(headTailHeight),
+        options = Options(
+            contentScale = ContentScale.FillBounds,
+        )
+    )
+}
+
+@Composable
+fun DownTail() {
+    Image(
+        source = "https://static.momocdn.net/app/img/kits/utils/Head_4x.png",
+        modifier = Modifier
+            .width(headTailWidth)
+            .height(headTailHeight),
+        options = Options(
+            contentScale = ContentScale.FillBounds,
+        )
+    )
+}
+
+@Composable
+fun RightTail() {
+    Image(
+        source = "https://static.momocdn.net/app/img/kits/utils/Tail_4x.png",
+        modifier = Modifier
+            .width(skewTailWidth)
+            .height(skewTailHeight),
+        options = Options(
+            contentScale = ContentScale.FillBounds,
+        )
+    )
+}
+
+@Composable
+fun RoundedBadgeRibbon(
+    text: String = "Label",
+    position: RibbonPosition = RibbonPosition.TopLeft,
+    modifier: Modifier = Modifier
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    val style = Typography.labelXsMedium
+    val fontFamily = style.fontFamily
+
+    val scaledFontSize = scaleSize(style.fontSize.value).sp
+    val fontFamilyResult = getFontFamily(fontFamily?.toString() ?: theme.font, style.fontWeight)
+
+    val fontSize = remember(scaledFontSize) { scaledFontSize }
+    val font = remember(fontFamilyResult) { fontFamilyResult }
+    val textMeasurer = rememberTextMeasurer()
+
+    val textLayoutResult = remember(text, fontSize, font) {
+        textMeasurer.measure(
+            text = text,
+            style = style.copy(fontSize = fontSize, fontFamily = font)
+        )
+    }
+
+    val textWidth = with(density) { textLayoutResult.size.width.toDp() }
+    val textHeight = with(density) { textLayoutResult.size.height.toDp() }
+
+    val minRibbonHeight = (textHeight * 1.2f).coerceAtLeast(16.dp)
+    val paddingBottom = minRibbonHeight / 4f
+    val badgeHeight = minRibbonHeight + paddingBottom
+    val horizontalPadding = paddingBottom
+    val badgeWidth = (textWidth + horizontalPadding * 2).coerceAtLeast(28.dp)
+
+    val (rotateZ, scaleY, scaleX) = when (position) {
+        RibbonPosition.TopLeft -> Triple(0f, 1f, -1f)
+        RibbonPosition.TopRight -> Triple(0f, 1f, 1f)
+        RibbonPosition.BottomRight -> Triple(0f, -1f, 1f)
+        RibbonPosition.BottomLeft -> Triple(0f, -1f, -1f)
+    }
+
+    Box(
+        modifier = modifier
+            .size(width = badgeWidth, height = badgeHeight)
+            .graphicsLayer {
+                rotationZ = rotateZ
+                this.scaleY = scaleY
+                this.scaleX = scaleX
+            }
+    ) {
+        val roundedRect = (badgeHeight - paddingBottom) / 2f
+
+        Canvas(modifier = Modifier.matchParentSize()) {
+            val width = size.width
+            val height = size.height
+            val ribbonHeight = height - paddingBottom.toPx()
+            val cornerRadius = roundedRect.toPx()
+
+            val mainColor = Color(0xFFFA541C)
+            val tailColor = Color(0xFFC41B24)
+
+            val headWidth = 4.dp.toPx()
+            val leftSectionWidth = width * (9f / 28f)
+            val middleSectionWidth = width - leftSectionWidth - headWidth
+            val rightX = leftSectionWidth + middleSectionWidth
+
+            // 1. Tail + 2. BG
+            val leftMiddlePath = Path().apply {
+                addRoundRect(
+                    RoundRect(
+                        rect = Rect(
+                            left = 0f,
+                            top = 0f,
+                            right = rightX + 1f,
+                            bottom = ribbonHeight
+                        ),
+                        topLeft = CornerRadius(cornerRadius, cornerRadius),
+                        topRight = CornerRadius.Zero,
+                        bottomRight = CornerRadius.Zero,
+                        bottomLeft = CornerRadius(cornerRadius, cornerRadius)
+                    )
+                )
+            }
+            drawPath(
+                path = leftMiddlePath,
+                color = mainColor
+            )
+
+            // 3. Head
+            val headPath = Path().apply {
+                addRoundRect(
+                    RoundRect(
+                        rect = Rect(
+                            left = rightX,
+                            top = 0f,
+                            right = rightX + headWidth,
+                            bottom = ribbonHeight
+                        ),
+                        topLeft = CornerRadius.Zero,
+                        topRight = CornerRadius(cornerRadius, cornerRadius),
+                        bottomRight = CornerRadius.Zero,
+                        bottomLeft = CornerRadius.Zero
+                    )
+                )
+            }
+            drawPath(
+                path = headPath,
+                color = mainColor
+            )
+
+            // Draw bottom tail section
+            val tailY = ribbonHeight
+            val tailHeight = paddingBottom.toPx()
+            val halfHeadWidth = headWidth / 2f
+            val tailStartX = rightX + headWidth - halfHeadWidth
+
+            // Background square (main color)
+            drawRect(
+                color = mainColor,
+                topLeft = Offset(tailStartX, tailY),
+                size = Size(halfHeadWidth, halfHeadWidth)
+            )
+
+            val tailRoundRadius = tailHeight
+            val tailRightPath = Path().apply {
+                addRoundRect(
+                    RoundRect(
+                        rect = Rect(
+                            left = tailStartX,
+                            top = tailY,
+                            right = tailStartX + halfHeadWidth,
+                            bottom = tailY + tailHeight
+                        ),
+                        topLeft = CornerRadius.Zero,
+                        topRight = CornerRadius(tailRoundRadius, tailRoundRadius),
+                        bottomRight = CornerRadius(tailRoundRadius, tailRoundRadius),
+                        bottomLeft = CornerRadius.Zero
+                    )
+                )
+            }
+            drawPath(
+                path = tailRightPath,
+                color = tailColor
+            )
+        }
+
+        Text(
+            text = text,
+            modifier = Modifier
+                .padding(bottom = paddingBottom)
+                .padding(horizontal = paddingBottom / 2)
+                .align(Alignment.Center)
+                .graphicsLayer {
+                    rotationZ = rotateZ
+                    this.scaleY = scaleY
+                    this.scaleX = scaleX
+                },
+            textAlign = TextAlign.Center,
+            style = Typography.labelXsMedium,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            color = Colors.black_01
+        )
+    }
+}
+
+val ribbonHeight: Dp = 20.dp
+val roundHeight: Dp = 16.dp
+val skewBodyHeight: Dp = 16.dp
+val roundRightRadius: Dp = 12.dp
+val roundPaddingEnd: Dp = 6.dp
+val skewTailWidth: Dp = 8.dp
+val skewTailHeight: Dp = 16.dp
+val headTailWidth: Dp = 5.dp
+val headTailHeight: Dp = 20.dp
+
+enum class RibbonPosition {TopLeft, TopRight, BottomLeft, BottomRight}

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

@@ -0,0 +1,339 @@
+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.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
+                .then(if (isFull) Modifier.fillMaxWidth() else Modifier)
+                .clip(RoundedCornerShape(radius))
+                .clickable(
+                    enabled = isEnabled && !loading,
+                    interactionSource = interactionSource,
+                    indication = null,
+                    onClick = onClick
+                )
+                .alpha(alpha)
+        } else {
+            modifier
+                .then(if (isFull) Modifier.fillMaxWidth() else Modifier)
+                .clip(RoundedCornerShape(radius))
+        }
+
+    val bgColor = getButtonBackgroundColor(loading, type)
+    val textColor = getTextColor(loading, type)
+
+    Row(
+        modifier = clickableModifier
+            .padding(horizontal = animatedPadding)
+            .clip(RoundedCornerShape(radius))
+            .then(getTypeStyle(type, size = size, bgColor = bgColor))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .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
+        )
+    }
+}
+