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

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

@@ -1,334 +0,0 @@
-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}

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

@@ -1,345 +0,0 @@
-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.defaultMinSize
-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.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
-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.graphics.graphicsLayer
-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.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.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 = "", type: ButtonType) {
-    val style = remember(size) { getStyle(size) }
-    val color = TextColor.current
-    Text(
-        style = style,
-        text = title,
-        color = color,
-        overflow = TextOverflow.Ellipsis,
-        maxLines = 1
-    )
-}
-
-@Composable
-fun RenderIcon(
-    size: Size,
-    isIconLeft: Boolean,
-    useTintColor: Boolean = true,
-    icon: String = "",
-    forceLoading: Boolean = false
-) {
-    val bgColor = BackgroundColor.current
-    val iconSize = remember(size) { getIconSize(size) }
-    val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) TextColor.current else Color.Unspecified
-
-    val showLoading = forceLoading
-
-    val modifier = Modifier.padding(
-        start = if (isIconLeft) 0.dp else margin,
-        end = if (isIconLeft) margin else 0.dp
-    )
-
-    if (showLoading) {
-        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,
-): Modifier {
-    val theme = AppTheme.current
-    val bgColor = BackgroundColor.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))
-        }
-
-    CompositionLocalProvider(
-        IsLoading provides loading,
-        BackgroundColor provides getButtonBackgroundColor(loading, type),
-        TextColor provides getTextColor(loading, type)
-    ) {
-        Row(
-            modifier = clickableModifier
-                .padding(horizontal = animatedPadding)
-                .clip(RoundedCornerShape(radius))
-                .then(getTypeStyle(type, size = size))
-                .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
-            )
-            RenderTitle(size, title, type = type)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft
-            )
-        }
-    }
-}
-
-
-private val IsLoading = staticCompositionLocalOf<Boolean> { false }
-private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
-private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
-