@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

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

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

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

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