@momo-kits/native-kits 0.152.4-beta.5 → 0.152.4-beta.7

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

@@ -0,0 +1,77 @@
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+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.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.const.scaleSize
+
+
+@Composable
+fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+    val primaryColors = listOf(
+        Color(0xFFF0F0F0),
+        Color(0xFFEB2F96),
+        Color(0xFF962AF0),
+        Color(0xFF4E4BFF),
+        Color(0xFF007AFF),
+        Color(0xFF13C2C2),
+        Color(0xFF34C759),
+        Color(0xFFA0D911),
+        Color(0xFFFFCC00),
+        Color(0xFFFA8C16),
+        Color(0xFFFA541C),
+        Color(0xFFF5222D)
+    )
+
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+
+    fun formatTitle(label: String): String {
+        if (isNumber(label) && label.toInt() > 99) {
+            return "99+"
+        }
+        return label
+    }
+
+    var badgeColor =
+        if (isNumber(label)) {
+            AppTheme.current.colors.error.primary
+        } else {
+            AppTheme.current.colors.warning.primary
+        }
+
+    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
+        badgeColor = backgroundColor
+    }
+
+    Box(
+        modifier = Modifier
+            .height(scaleSize(16.toFloat()).dp)
+            .widthIn(min = scaleSize(16.toFloat()).dp)
+            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+            .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = formatTitle(label),
+            color = Colors.black_01,
+            style = Typography.actionXxsBold
+        )
+    }
+}

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

@@ -0,0 +1,27 @@
+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.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+
+enum class DotSize(val size: Int) {
+    Small(10),
+    Large(16)
+}
+
+@Composable
+fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(size.size.dp)
+            .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
+            .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))
+    )
+}

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

@@ -0,0 +1,334 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+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.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
+
+@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)
+            .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}