@momo-kits/native-kits 0.167.1-beta.16-debug → 0.167.1-beta.17

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

@@ -1,125 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-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.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
-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.modifier.conditional
-
-data class IconSpecs(
-    val box: Dp,
-    val icon: Dp,
-)
-
-enum class IconSize(val value: IconSpecs) {
-    LARGE(IconSpecs(box = 48.dp, icon = 24.dp)),
-    MEDIUM(IconSpecs(box = 36.dp, icon = 16.dp)),
-    SMALL(IconSpecs(box = 28.dp, icon = 16.dp)),
-}
-
-enum class IconShape {
-    CIRCLE,
-    SQUARE,
-}
-
-// Square keeps an 8dp rounded corner; circle is fully rounded regardless of size.
-private val squareShape = RoundedCornerShape(Radius.S)
-
-private fun IconShape.toShape(): Shape = when (this) {
-    IconShape.CIRCLE -> CircleShape
-    IconShape.SQUARE -> squareShape
-}
-
-@Composable
-internal fun getIconStyle(type: ButtonType, shape: Shape, color: Color? = null): Modifier {
-    val theme = AppTheme.current
-
-    return remember(type, shape, color, theme) {
-        when (type) {
-            ButtonType.DISABLED -> Modifier
-                .background(theme.colors.background.disable, shape)
-                .border(0.dp, Color.Unspecified, shape)
-
-            ButtonType.PRIMARY -> Modifier
-                .background(theme.colors.primary, shape)
-                .border(0.dp, Color.Unspecified, shape)
-
-            ButtonType.SECONDARY -> Modifier
-                .background(theme.colors.background.surface, shape)
-                .border(1.dp, theme.colors.border.default, shape)
-
-            ButtonType.OUTLINE -> Modifier
-                .background(theme.colors.background.surface, shape)
-                .border(1.dp, color ?: theme.colors.primary, shape)
-
-            ButtonType.TONAL -> Modifier
-                .background(theme.colors.background.tonal, shape)
-                .border(0.dp, Color.Unspecified, shape)
-
-            ButtonType.DANGER -> Modifier
-                .background(theme.colors.error.primary, shape)
-                .border(0.dp, Color.Unspecified, shape)
-
-            ButtonType.TEXT -> Modifier
-        }
-    }
-}
-
-@Composable
-internal fun getIconColor(type: ButtonType): Color {
-    val theme = AppTheme.current
-    return remember(type, theme) {
-        getButtonColor(type, theme)
-    }
-}
-
-@Composable
-fun IconButton(
-    onClick: () -> Unit,
-    type: ButtonType = ButtonType.PRIMARY,
-    size: IconSize = IconSize.SMALL,
-    shape: IconShape = IconShape.CIRCLE,
-    icon: String = "",
-) {
-    val specs = size.value
-
-    val isEnabled = remember(type) {
-        type != ButtonType.DISABLED
-    }
-
-    val boxShape = remember(shape) { shape.toShape() }
-
-    Box(
-        modifier = Modifier
-            .size(specs.box)
-            .then(getIconStyle(type, boxShape))
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .clip(boxShape)
-            .clickable(enabled = isEnabled, onClick = onClick),
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(
-            source = icon,
-            color = getIconColor(type),
-            size = specs.icon,
-        )
-    }
-}

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

@@ -1,231 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.DefaultAlpha
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage as CoilAsyncImage
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.gifimage.GifImage
-import vn.momo.kits.gifimage.GifImageState
-import vn.momo.kits.modifier.conditional
-
-data class Options(
-    val alignment: Alignment = Alignment.TopStart,
-    val contentScale: ContentScale = ContentScale.Crop,
-    val colorFilter: ColorFilter? = null,
-    val alpha: Float = DefaultAlpha,
-)
-
-enum class ImageState {
-    Loading, Success, Error
-}
-
-// Cached domain set for better performance
-private val supportedDomains = setOf(
-    "static.momocdn.net",
-    "img.mservice.com.vn",
-    "cdn.mservice.com.vn",
-    "img.mservice.io",
-    "image.momocdn.net"
-)
-
-// Pre-computed size chart for optimal image sizing
-private val sizeChart = mapOf(
-    64 to "XXS",
-    128 to "XS",
-    256 to "S",
-    512 to "M",
-    768 to "L",
-    1024 to "XL",
-    2048 to "XXL"
-)
-
-// Optimized size selection using binary search approach
-private fun closestSizeForWidth(width: Float): String {
-    val targetWidth = width.toInt()
-    return sizeChart.entries
-        .minByOrNull { kotlin.math.abs(it.key - targetWidth) }
-        ?.value ?: "M"
-}
-
-// Cached regex for better URL parsing performance
-private val urlHostRegex = Regex("^(?:https?://)?([^:/\\s]+)")
-
-private fun getHostFromUrl(url: String): String? {
-    return try {
-        urlHostRegex.find(url)?.groupValues?.get(1)
-    } catch (_: Exception) {
-        null
-    }
-}
-
-internal fun isGifUrl(url: String): Boolean {
-    val path = url.substringBefore('#').substringBefore('?')
-    return path.endsWith(".gif", ignoreCase = true)
-}
-
-private fun GifImageState.toImageState(): ImageState {
-    return when (this) {
-        GifImageState.Success -> ImageState.Success
-        GifImageState.Error -> ImageState.Error
-        GifImageState.Loading -> ImageState.Loading
-    }
-}
-
-// Optimized query parameter appending
-private fun appendSizeQueryParam(url: String, value: String): String {
-    val fragmentIndex = url.indexOf('#')
-    val (baseUrl, fragment) = if (fragmentIndex != -1) {
-        url.take(fragmentIndex) to url.substring(fragmentIndex)
-    } else {
-        url to ""
-    }
-
-    val separator = if (baseUrl.contains('?')) "&" else "?"
-    return "${baseUrl}${separator}size=$value$fragment"
-}
-
-// Cache for processed URLs to avoid repeated calculations
-private val urlCache = mutableMapOf<String, String>()
-
-@Composable
-fun Image(
-    source: Any,
-    modifier: Modifier = Modifier,
-    options: Options? = null,
-    loading: Boolean = true,
-    onStateChanged: (ImageState) -> Unit = {},
-) {
-    val imageOptions = remember(options) {
-        options ?: Options()
-    }
-
-    val density = LocalDensity.current
-
-    BoxWithConstraints(
-        modifier = modifier
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .semantics { contentDescription = "img|$source" },
-    ) {
-        val urlToLoad = remember(source, maxWidth, maxHeight, density) {
-            when (source) {
-                is String -> {
-                    // Check cache first
-                    val cacheKey = "$source|${maxWidth}|${density.density}"
-                    urlCache[cacheKey] ?: run {
-                        val processedUrl = processImageUrl(source, maxWidth, density)
-                        urlCache[cacheKey] = processedUrl
-                        processedUrl
-                    }
-                }
-                else -> source.toString()
-            }
-        }
-
-        var imageState by remember(urlToLoad) { mutableStateOf(ImageState.Loading) }
-        fun updateImageState(state: ImageState) {
-            imageState = state
-            onStateChanged(state)
-        }
-
-        if (isGifUrl(urlToLoad)) {
-            GifImage(
-                modifier = Modifier.matchParentSize(),
-                url = urlToLoad,
-                contentDescription = null,
-                contentScale = imageOptions.contentScale,
-                alignment = imageOptions.alignment,
-                colorFilter = imageOptions.colorFilter,
-                alpha = imageOptions.alpha,
-                onStateChanged = { updateImageState(it.toImageState()) },
-            )
-        } else {
-            CoilAsyncImage(
-                modifier = Modifier.matchParentSize(),
-                model = urlToLoad,
-                contentDescription = null,
-                contentScale = imageOptions.contentScale,
-                alignment = imageOptions.alignment,
-                colorFilter = imageOptions.colorFilter,
-                alpha = imageOptions.alpha,
-                onLoading = { updateImageState(ImageState.Loading) },
-                onSuccess = { updateImageState(ImageState.Success) },
-                onError = { updateImageState(ImageState.Error) },
-            )
-        }
-
-        when (imageState) {
-            ImageState.Success -> {}
-            ImageState.Error -> ImageError()
-            ImageState.Loading -> if (loading) Skeleton()
-        }
-    }
-}
-
-// Extracted URL processing logic for better performance
-private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp, density: androidx.compose.ui.unit.Density): String {
-    val host = getHostFromUrl(url)
-    return if (!isGifUrl(url) && host != null && supportedDomains.contains(host)) {
-        val widthPx = with(density) { maxWidth.roundToPx() }
-        val pixelRatio = density.density
-        val pixelFitForWidth = widthPx * pixelRatio
-        val sizeKey = closestSizeForWidth(pixelFitForWidth)
-        appendSizeQueryParam(url, sizeKey)
-    } else {
-        url
-    }
-}
-
-@Composable
-private fun ImageError() {
-    val theme = AppTheme.current
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(
-            source = "media_fail",
-            color = theme.colors.text.disable,
-        )
-    }
-}
-
-@Composable
-fun Image(
-    source: Painter,
-    modifier: Modifier = Modifier,
-    colorFilter: ColorFilter? = null,
-    alpha: Float = DefaultAlpha,
-    contentScale: ContentScale = ContentScale.Crop,
-    alignment: Alignment = Alignment.Center,
-) {
-    androidx.compose.foundation.Image(
-        modifier = modifier,
-        painter = source,
-        contentDescription = null,
-        contentScale = contentScale,
-        alignment = alignment,
-        colorFilter = colorFilter,
-        alpha = alpha,
-    )
-}

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

@@ -1,189 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontSynthesis
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.withStyle
-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.const.getFontFamily
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-
-enum class InformationState {
-    DEFAULT,
-    WARNING,
-    ERROR
-}
-
-@Composable
-fun Information(
-    title: String? = null,
-    description: String = "Description",
-    state: InformationState = InformationState.DEFAULT,
-    image: String? = null,
-    onPressAction: (() -> Unit)? = null,
-    showIcon: Boolean = true,
-    action: String? = null,
-    showIconClose: Boolean = true,
-    onPressClose: (() -> Unit)? = null,
-    accessibilityLabel: String? = null,
-    highlightText: List<String> = emptyList(),
-) {
-    val automationId = remember(accessibilityLabel, title) {
-        accessibilityLabel ?: "Information${if (title != null) "/$title" else ""}"
-    }
-
-    var borderColor = Colors.blue_07
-    var backgroundColor = Colors.blue_10
-    var color = Colors.blue_03
-    var iconSource = "notifications_info"
-
-    if (state === InformationState.WARNING) {
-        borderColor = Colors.yellow_06
-        backgroundColor = Colors.yellow_09
-        color = Colors.orange_03
-        iconSource = "24_notifications_alert_triangle"
-    }
-
-    if (state === InformationState.ERROR) {
-        borderColor = Colors.red_07
-        backgroundColor = Colors.red_10
-        color = Colors.red_03
-        iconSource = "24_notifications_alert_octagon"
-    }
-
-    // Host fonts are one file per weight: swap fontFamily and disable synthesis so the SemiBold file isn't
-    // faux-bolded again; fontWeight still applies when no host font is bundled and the system font is used.
-    val highlightWeight = Typography.headerXsSemibold.fontWeight
-    val highlightFontFamily = getFontFamily(AppTheme.current.font, highlightWeight)
-    val annotatedDescription = remember(description, highlightText, highlightFontFamily) {
-        highlightDescription(
-            description,
-            highlightText,
-            SpanStyle(
-                fontFamily = highlightFontFamily,
-                fontWeight = highlightWeight,
-                fontSynthesis = FontSynthesis.None,
-            ),
-        )
-    }
-
-    Column(
-        modifier = Modifier.border(
-            width = 0.5.dp,
-            shape = RoundedCornerShape(Radius.S),
-            color = borderColor
-        ).background(color = backgroundColor)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(Spacing.M)
-            .setAutomationId(automationId)
-    ) {
-        Row {
-            if (image != null) {
-                Image(
-                    source = image,
-                    modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
-                        RoundedCornerShape(Radius.S)
-                    ).setAutomationId("$automationId|img")
-                )
-            }
-            if (image == null && showIcon) {
-                Icon(
-                    source = iconSource,
-                    size = 16.dp,
-                    color = color,
-                    modifier = Modifier.padding(end = Spacing.S)
-                        .setAutomationId("$automationId|icon")
-                )
-            }
-            Column(modifier = Modifier.weight(1f)) {
-                if (title != null) {
-                    Text(
-                        title,
-                        style = Typography.labelDefaultMedium,
-                        accessibilityId = "$automationId|title-text"
-                    )
-                }
-                Text(
-                    annotatedDescription,
-                    style = Typography.descriptionDefaultRegular,
-                    accessibilityId = "$automationId|description-text"
-                )
-            }
-            if (onPressClose != null && showIconClose) {
-                Icon(
-                    source = "navigation_close",
-                    size = 16.dp,
-                    modifier = Modifier.clickable(onClick = onPressClose)
-                        .setAutomationId("$automationId|close-icon-touch")
-                )
-            }
-        }
-        if (action != null && onPressAction != null) {
-            Row(
-                modifier = Modifier.padding(top = Spacing.S)
-                    .setAutomationId("$automationId|cta-touch")
-            ) {
-                Text(
-                    action,
-                    modifier = Modifier.weight(1f).clickable(onClick = onPressAction),
-                    textAlign = TextAlign.End,
-                    style = Typography.actionXsBold,
-                    color = color,
-                    accessibilityId = "$automationId|cta-text"
-                )
-            }
-        }
-    }
-
-}
-
-// Whole-word matches only; the longest keyword wins when keywords overlap (RN parity).
-private fun highlightDescription(
-    description: String,
-    highlightText: List<String>,
-    style: SpanStyle,
-): AnnotatedString {
-    val keywords = highlightText.filter { it.isNotEmpty() }
-    if (keywords.isEmpty()) return AnnotatedString(description)
-    val regex = Regex(keywords.sortedByDescending { it.length }.joinToString("|") { Regex.escape(it) })
-    fun isWordChar(index: Int) = description.getOrNull(index)?.let { it.isLetterOrDigit() || it == '_' } == true
-
-    return buildAnnotatedString {
-        var lastIndex = 0
-        var searchFrom = 0
-        while (true) {
-            val match = regex.find(description, searchFrom) ?: break
-            val start = match.range.first
-            val end = match.range.last + 1
-            if (isWordChar(start - 1) || isWordChar(end)) {
-                searchFrom = start + 1
-                continue
-            }
-            append(description.substring(lastIndex, start))
-            withStyle(style) { append(match.value) }
-            lastIndex = end
-            searchFrom = end
-        }
-        append(description.substring(lastIndex))
-    }
-}