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

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Clickable.kt

@@ -0,0 +1,66 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.semantics.Role
+
+fun Modifier.noFeedbackClickable(
+    enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, onClick: () -> Unit
+): Modifier = composed {
+    clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null,
+        enabled,
+        onClickLabel,
+        role,
+        onClick
+    )
+}
+
+fun Modifier.activeOpacityClickable(
+    activeOpacity: Float = 0.2f,
+    enabled: Boolean = true,
+    onClickLabel: String? = null,
+    role: Role? = null,
+    onClick: () -> Unit
+): Modifier = composed {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val animatedAlpha by animateFloatAsState(
+        targetValue = if (isPressed) activeOpacity else 1f,
+        label = "ActiveOpacity"
+    )
+
+    this
+        .graphicsLayer { alpha = animatedAlpha }
+        .clickable(
+            interactionSource = interactionSource,
+            indication = null,
+            enabled,
+            onClickLabel,
+            role,
+            onClick
+        )
+}
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/DeprecatedModifier.kt

@@ -0,0 +1,104 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.clipRect
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.drawText
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+
+@Suppress("ExperimentalAnnotationRetention")
+@RequiresOptIn(
+    message = "This is internal API of native-kits, become internal in next sprint",
+    level = RequiresOptIn.Level.WARNING,
+)
+@Retention(AnnotationRetention.BINARY)
+@Target(
+    AnnotationTarget.CLASS,
+    AnnotationTarget.FUNCTION,
+    AnnotationTarget.PROPERTY,
+)
+annotation class InternalApi
+
+@Composable
+fun DeprecatedModifier(text: String = "Deprecated component"): Modifier = debugMarker(
+    label = text,
+    background = Colors.red_04.copy(alpha = 0.7f),
+    textColor = Colors.red_01,
+    animationLabel = "deprecatedMarquee",
+)
+
+@Composable
+private fun debugMarker(
+    label: String,
+    background: Color,
+    textColor: Color,
+    animationLabel: String,
+): Modifier {
+    if (!IsShowBaseLineDebug) return Modifier
+
+    val textMeasurer = rememberTextMeasurer()
+    val marquee = rememberInfiniteTransition(label = animationLabel)
+    val progress by marquee.animateFloat(
+        initialValue = 0f,
+        targetValue = 1f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 4000, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "${animationLabel}Progress",
+    )
+
+    return Modifier.drawWithContent {
+        drawContent()
+        drawRect(color = background)
+
+        if (size.width <= 0f || size.height <= 0f) return@drawWithContent
+
+        val fontPx = (size.width * 0.1f).coerceIn(12.sp.toPx(), 20.sp.toPx())
+        val style = TextStyle(
+            color = textColor,
+            fontSize = fontPx.toSp(),
+            fontWeight = FontWeight.Bold,
+        )
+
+        val intrinsic = textMeasurer.measure(
+            text = label,
+            style = style,
+            maxLines = 1,
+            softWrap = false,
+        )
+        val textW = intrinsic.size.width
+        val textH = intrinsic.size.height
+        val y = (size.height - textH) / 2f
+
+        if (textW <= size.width) {
+            drawText(
+                textLayoutResult = intrinsic,
+                topLeft = Offset((size.width - textW) / 2f, y),
+            )
+        } else {
+            clipRect(right = size.width, bottom = size.height) {
+                val gap = textW * 0.5f
+                val travel = textW + gap
+                val x = -progress * travel
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x, y))
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x + travel, y))
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Shadow.kt

@@ -0,0 +1,48 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.platform.setColor
+import vn.momo.kits.platform.setMaskFilter
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    borderRadius: Dp = 0.dp,
+    blurRadius: Float = 0f,
+    offsetY: Dp = 0.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0f.dp,
+    modifier: Modifier = Modifier
+) = this.then(
+    modifier.drawBehind {
+        this.drawIntoCanvas {
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            val spreadPixel = spread.toPx()
+            val leftPixel = (0f - spreadPixel) + offsetX.toPx()
+            val topPixel = (0f - spreadPixel) + offsetY.toPx()
+            val rightPixel = (this.size.width + spreadPixel)
+            val bottomPixel = (0f + spreadPixel) - offsetY.toPx()
+
+            if (blurRadius != 0f) {
+                frameworkPaint.setMaskFilter(blurRadius)
+            }
+
+            frameworkPaint.setColor(color)
+
+            it.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                radiusX = borderRadius.toPx(),
+                radiusY = borderRadius.toPx(),
+                paint
+            )
+        }
+    }
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Size.kt

@@ -0,0 +1,51 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.node.LayoutModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.IntOffset
+
+@Composable
+fun Modifier.dynamicSize(
+    widthState: State<Int>? = null,
+    heightState: State<Int>? = null,
+) = this then DynamicSizeElement(widthState, heightState)
+
+private data class DynamicSizeElement(
+    val widthState: State<Int>?,
+    val heightState: State<Int>?,
+) : ModifierNodeElement<DynamicSizeNode>() {
+    override fun create(): DynamicSizeNode {
+        return DynamicSizeNode(widthState, heightState)
+    }
+
+    override fun update(node: DynamicSizeNode) {
+        node.widthState = widthState
+        node.heightState = heightState
+    }
+
+}
+
+private class DynamicSizeNode(
+    var widthState: State<Int>?,
+    var heightState: State<Int>?,
+) : Modifier.Node(), LayoutModifierNode {
+    override fun MeasureScope.measure(
+        measurable: Measurable,
+        constraints: Constraints
+    ): MeasureResult {
+        val p = measurable.measure(constraints)
+        return layout(
+            width = widthState?.value ?: p.width,
+            height = heightState?.value ?: p.height,
+        ) {
+            p.place(IntOffset.Zero)
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -0,0 +1,299 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
+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.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Divider
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+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.application.LocalContext
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.Typography
+import vn.momo.kits.navigation.tracking.ScreenTracker
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.platform.getScreenHeight
+
+@Composable
+internal fun BottomSheet(
+    content: @Composable () -> Unit,
+    header: BottomHeader,
+    isSurface: Boolean = false,
+    barrierDismissible: Boolean = true,
+    draggable: Boolean = true,
+    useBottomInset: Boolean = true,
+    footerComponent: (@Composable () -> Unit)? = null,
+    onDismiss: (() -> Unit)?
+) {
+    val screenHeightDp = getScreenHeight()
+    val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
+    val sheetOffset = remember { Animatable(screenHeightPx) }
+
+    val backgroundAlpha = remember { Animatable(0f) }
+    val dynamicAlpha = ((1f - (sheetOffset.value / screenHeightPx)).coerceIn(0f, 1f)) * 0.3f
+    val alpha = backgroundAlpha.value + dynamicAlpha
+
+    val sheetCloseOffset = with(LocalDensity.current) { 100.dp.toPx() }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    val maxApi = LocalMaxApi.current
+    val context = LocalContext.current
+
+    DisposableEffect(Unit) {
+        ScreenTracker.trackPopupDisplayed(
+            maxApi = maxApi,
+            context = context,
+            parentScreenName = ScreenTracker.getLastScreenName()
+        )
+        onDispose { }
+    }
+
+    suspend fun openEvent(){
+        backgroundAlpha.animateTo(
+            targetValue = 0.3f,
+            animationSpec = tween(
+                durationMillis = 100,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+        sheetOffset.animateTo(
+            targetValue = 0f,
+            animationSpec = tween(
+                durationMillis = 350,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+    }
+
+    fun closeEvent(){
+        coroutineScope.launch {
+            sheetOffset.animateTo(
+                targetValue = screenHeightPx,
+                animationSpec = tween(
+                    durationMillis = 200,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            backgroundAlpha.animateTo(
+                targetValue = 0f,
+                animationSpec = tween(
+                    durationMillis = 100,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            OverplayComponentRegistry.hardClearAfterDismiss()
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        openEvent()
+    }
+
+    DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose { closeEvent() }
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    BackHandler(true){
+        closeEvent()
+    }
+
+    BoxWithConstraints(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = alpha))
+            .noFeedbackClickable {
+                if(barrierDismissible) closeEvent()
+            }
+    ) {
+        val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
+
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
+                .fillMaxWidth()
+                .heightIn(max = parentHeight - 90.dp)
+                .background(
+                    color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
+                    shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
+                )
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .noFeedbackClickable {  },
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            val bottomInset = if (useBottomInset) {
+                (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
+            } else 0.dp
+            Column(Modifier.padding(bottom = bottomInset)) {
+                Box(
+                    modifier = Modifier
+                        .height(72.dp)
+                        .fillMaxWidth()
+                        .conditional(draggable) {
+                            pointerInput(Unit) {
+                                detectDragGestures(
+                                    onDrag = { change, dragAmount ->
+                                        change.consume()
+                                        coroutineScope.launch {
+                                            val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
+                                            sheetOffset.snapTo(newOffset)
+                                        }
+                                    },
+                                    onDragEnd = {
+                                        coroutineScope.launch {
+                                            if (sheetOffset.value > sheetCloseOffset) {
+                                                closeEvent()
+                                            } else {
+                                                sheetOffset.animateTo(0f)
+                                            }
+                                        }
+                                    }
+                                )
+                            }
+                        }
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(horizontal = Spacing.M),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Spacer(Modifier.height(8.dp))
+                        Box(
+                            modifier = Modifier
+                                .height(4.dp)
+                                .width(40.dp)
+                                .background(
+                                    color = Colors.black_06,
+                                    shape = RoundedCornerShape(Radius.S)
+                                )
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Box(Modifier.fillMaxWidth().height(56.dp), contentAlignment = Alignment.Center){
+                            when (header) {
+                                is BottomHeader.Title -> {
+                                    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+                                        Box(Modifier.size(24.dp))
+                                        Box(Modifier.fillMaxHeight().weight(1f), contentAlignment = Alignment.Center){
+                                            Text(
+                                                text = header.data,
+                                                color = Colors.black_17,
+                                                style = Typography.headerDefaultBold
+                                            )
+                                        }
+                                        Box(Modifier
+                                            .size(24.dp)
+                                            .noFeedbackClickable {
+                                                closeEvent()
+                                            },
+                                            contentAlignment = Alignment.Center
+                                        ){
+                                            Icon(source = "navigation_close")
+                                        }
+                                    }
+                                }
+                                is BottomHeader.Custom -> {
+                                    header.content()
+                                }
+                            }
+                        }
+                    }
+                }
+                Divider()
+                if (footerComponent != null) {
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
+                    BottomSheetFooter(footerComponent)
+                } else {
+                    content()
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
+    val shadowBrush = remember {
+        Brush.verticalGradient(
+            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+        )
+    }
+
+    Box {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(vertical = Spacing.S)
+        ) {
+            footerComponent()
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(6.dp)
+                .offset(x = 0.dp, y = (-6).dp)
+                .background(shadowBrush)
+        )
+    }
+}
+
+sealed class BottomHeader {
+    data class Title(
+        val data: String = "Bottom Sheet Title",
+    ) : BottomHeader()
+
+    data class Custom(
+        val content: @Composable () -> Unit
+    ) : BottomHeader()
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/HostBackGestureBridge.kt

@@ -0,0 +1,58 @@
+package vn.momo.kits.navigation
+
+interface HostBackTarget {
+    fun canPop(): Boolean
+
+    fun onBack()
+
+    fun backStarted()
+    fun backProgressed(progress: Float)
+    fun backCompleted()
+    fun backCancelled()
+}
+
+object HostBackGestureBridge {
+    private val targets = mutableListOf<HostBackTarget>()
+    private var gestureTarget: HostBackTarget? = null
+
+    var shouldUseFloatingArrowBack: Boolean = false
+
+    fun checkCanPop(): Boolean = targets.isNotEmpty()
+
+    fun canPopInner(): Boolean = top()?.canPop() == true
+
+    fun pop() {
+        top()?.onBack()
+    }
+
+    fun started() {
+        val target = top() ?: return
+        gestureTarget = target
+        target.backStarted()
+    }
+
+    fun progressed(progress: Float) {
+        gestureTarget?.backProgressed(progress.coerceIn(0f, 1f))
+    }
+
+    fun completed() {
+        (gestureTarget ?: top())?.backCompleted()
+        gestureTarget = null
+    }
+
+    fun cancelled() {
+        gestureTarget?.backCancelled()
+        gestureTarget = null
+    }
+
+    fun attach(target: HostBackTarget) {
+        targets += target
+    }
+
+    fun detach(target: HostBackTarget) {
+        targets -= target
+        if (gestureTarget === target) gestureTarget = null
+    }
+
+    private fun top(): HostBackTarget? = targets.lastOrNull()
+}