@momo-kits/native-kits 0.162.2-beta.22 → 0.162.2-beta.23-debug

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

@@ -0,0 +1,167 @@
+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.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.const.Spacing
+import vn.momo.kits.modifier.conditional
+
+data class IconSpecs(
+    val width: Dp,
+    val height: Dp,
+    val radius: Dp,
+    val size: Dp
+)
+
+enum class IconSize(val value: IconSpecs) {
+    LARGE(
+        IconSpecs(
+            height = 48.dp,
+            radius = Radius.XL,
+            width = 48.dp,
+            size = 48.dp
+        )
+    ),
+    SMALL(
+        IconSpecs(
+            height = 40.dp,
+            radius = Radius.XL,
+            width = 40.dp,
+            size = 40.dp
+        )
+    )
+}
+
+enum class IconButtonShape {
+    CIRCLE,
+    SQUARE,
+    RECTANGLE
+}
+
+// Resolved footprint + corner radius for a (size, shape) pair.
+data class IconButtonGeometry(
+    val width: Dp,
+    val height: Dp,
+    val radius: Dp
+)
+
+// CIRCLE keeps the square footprint fully rounded (legacy default); SQUARE/RECTANGLE use the
+// standard button corner (Radius.S) and RECTANGLE widens the footprint so it reads horizontal.
+internal fun resolveIconButtonGeometry(size: IconSize, shape: IconButtonShape): IconButtonGeometry {
+    val base = size.value.height
+    return when (shape) {
+        IconButtonShape.CIRCLE -> IconButtonGeometry(base, base, size.value.radius)
+        IconButtonShape.SQUARE -> IconButtonGeometry(base, base, Radius.S)
+        IconButtonShape.RECTANGLE -> IconButtonGeometry(base + Spacing.S, base, Radius.S)
+    }
+}
+
+// Cache for icon sizes to avoid repeated calculations
+private val iconSizeMap = mapOf(
+    IconSize.SMALL to 16.dp,
+    IconSize.LARGE to 24.dp
+)
+
+@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: IconButtonShape = IconButtonShape.CIRCLE,
+    icon: String = "",
+) {
+    // Memoize icon size calculation
+    val iconSize = remember(size) {
+        iconSizeMap[size] ?: 16.dp
+    }
+
+    // Memoize enabled state
+    val isEnabled = remember(type) {
+        type != ButtonType.DISABLED
+    }
+
+    // Memoize footprint + corner shape for the requested shape
+    val geometry = remember(size, shape) {
+        resolveIconButtonGeometry(size, shape)
+    }
+    val cornerShape = remember(geometry.radius) {
+        RoundedCornerShape(geometry.radius)
+    }
+
+    Box(
+        modifier = Modifier
+            .size(width = geometry.width, height = geometry.height)
+            .then(getIconStyle(type, cornerShape))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .clip(cornerShape)
+            .clickable(enabled = isEnabled, onClick = onClick),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            source = icon,
+            color = getIconColor(type),
+            size = iconSize,
+        )
+    }
+}

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
+    }
+}
+
+private 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,112 @@
+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.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+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
+
+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,
+) {
+    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"
+    }
+
+    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)
+    ) {
+        Row {
+            if (image != null) {
+                Image(
+                    source = image,
+                    modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
+                        RoundedCornerShape(Radius.S)
+                    )
+                )
+            }
+            if (image == null && showIcon) {
+                Icon(
+                    source = iconSource,
+                    size = 16.dp,
+                    color = color,
+                    modifier = Modifier.padding(end = Spacing.S)
+                )
+            }
+            Column(modifier = Modifier.weight(1f)) {
+                if (title != null) {
+                    Text(title, style = Typography.labelDefaultMedium)
+                }
+                Text(description, style = Typography.descriptionDefaultRegular)
+            }
+            if (onPressClose != null && showIconClose) {
+                Icon(
+                    source = "navigation_close",
+                    size = 16.dp,
+                    modifier = Modifier.clickable(onClick = onPressClose)
+                )
+            }
+        }
+        if (action != null && onPressAction != null) {
+            Row(modifier = Modifier.padding(top = Spacing.S)) {
+                Text(
+                    action,
+                    modifier = Modifier.weight(1f).clickable(onClick = onPressAction),
+                    textAlign = TextAlign.End,
+                    style = Typography.actionXsBold,
+                    color = color
+                )
+            }
+        }
+    }
+
+}