@momo-kits/native-kits 0.0.1-beta.4 → 0.89.1-2

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -0,0 +1,197 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import cafe.adriel.voyager.core.screen.Screen
+import cafe.adriel.voyager.navigator.LocalNavigator
+import cafe.adriel.voyager.navigator.bottomSheet.BottomSheetNavigator
+import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
+import cafe.adriel.voyager.navigator.currentOrThrow
+import cafe.adriel.voyager.transitions.SlideTransition
+import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Theme
+import vn.momo.kits.const.defaultTheme
+
+val AppNavigator = staticCompositionLocalOf<Navigator> {
+    error("no navigator provided!")
+}
+
+class Navigator(
+    private val stack: cafe.adriel.voyager.navigator.Navigator,
+    private val sheet: BottomSheetNavigator,
+) {
+    fun push(content: @Composable () -> Unit) {
+        stack.push(StackScreen {
+            content()
+        })
+    }
+
+    fun present(content: @Composable () -> Unit) {
+
+    }
+
+    fun reset(content: @Composable () -> Unit) {
+
+    }
+
+    fun pop() {
+        if (sheet.isVisible) {
+            sheet.hide()
+        } else {
+            stack.pop()
+        }
+    }
+
+    fun replace(content: @Composable () -> Unit) {
+        stack.replace(StackScreen {
+            content()
+        })
+    }
+
+    fun popToTop() {
+        stack.popUntilRoot()
+    }
+
+    fun showModal(
+        onClose: () -> Unit = {},
+        canBackgroundClose: Boolean = true,
+        content: @Composable () -> Unit,
+    ) {
+        sheet.show(ModalScreen(onClose = onClose, barrierDismissible = canBackgroundClose) {
+            content()
+        })
+    }
+
+    fun showBottomSheet(content: @Composable () -> Unit) {
+        sheet.show(SheetScreen {
+            content()
+        })
+    }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun ApplicationContainer(
+    theme: Theme = defaultTheme,
+    statusBarHeight: Dp = WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
+    content: @Composable () -> Unit,
+) {
+    CompositionLocalProvider(
+        AppTheme provides theme,
+        AppStatusBar provides statusBarHeight,
+    ) {
+        BottomSheetNavigator(sheetBackgroundColor = Color.Transparent, sheetElevation = 0.dp) {
+            cafe.adriel.voyager.navigator.Navigator(MainScreen {
+                content()
+            }) {
+                SlideTransition(it)
+            }
+        }
+    }
+
+}
+
+class MainScreen(private val content: @Composable () -> Unit) : Screen {
+    @Composable
+    override fun Content() {
+        CompositionLocalProvider(
+            AppNavigator provides Navigator(
+                LocalNavigator.currentOrThrow,
+                LocalBottomSheetNavigator.current
+            ),
+        ) {
+            content()
+        }
+    }
+}
+
+class StackScreen(private val content: @Composable () -> Unit) : Screen {
+    @Composable
+    override fun Content() {
+        CompositionLocalProvider(
+            AppNavigator provides Navigator(
+                LocalNavigator.currentOrThrow,
+                LocalBottomSheetNavigator.current
+            ),
+        ) {
+            content()
+        }
+    }
+}
+
+class SheetScreen(private val content: @Composable () -> Unit) : Screen {
+    @Composable
+    override fun Content() {
+        CompositionLocalProvider(
+            AppNavigator provides Navigator(
+                LocalNavigator.currentOrThrow,
+                LocalBottomSheetNavigator.current
+            ),
+        ) {
+            content()
+        }
+    }
+}
+
+class ModalScreen(
+    private val onClose: () -> Unit,
+    private val barrierDismissible: Boolean = true,
+    private val content: @Composable () -> Unit,
+) :
+    Screen {
+    @Composable
+    override fun Content() {
+        val navigator = Navigator(
+            LocalNavigator.currentOrThrow,
+            LocalBottomSheetNavigator.current
+        )
+        CompositionLocalProvider(
+            AppNavigator provides navigator,
+        ) {
+            Box(
+                modifier = Modifier.fillMaxSize().padding(horizontal = Spacing.XL)
+                    .background(Color.Transparent)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = {
+                            if (barrierDismissible) {
+                                navigator.pop()
+                                onClose()
+                            }
+                        }
+                    ),
+                contentAlignment = Alignment.Center
+            ) {
+                Box(
+                    modifier = Modifier.clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    ) {},
+                    contentAlignment = Alignment.Center
+                ) {
+                    content()
+                }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt

@@ -0,0 +1,133 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.shadow
+
+enum class HeaderType {
+    DEFAULT,
+    SURFACE,
+    EXTENDED,
+    NONE
+}
+
+@Composable
+fun Screen(
+    backgroundColor: Color = Color.Unspecified,
+    headerBackground: String? = null,
+    isBack: Boolean = true,
+    headerType: HeaderType = HeaderType.DEFAULT,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    title: String = "Stack",
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    goBack: (() -> Unit) = { },
+    footer: @Composable (() -> Unit)? = null,
+    headerRight: @Composable (() -> Unit)? = null,
+    content: @Composable () -> Unit,
+) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val keyboardHeight = WindowInsets.ime.asPaddingValues().calculateBottomPadding()
+    val avoidKeyboard = when {
+        keyboardHeight > 100.dp && footer == null -> keyboardHeight
+        keyboardHeight > 100.dp && footer != null -> keyboardHeight - 21.dp
+        else -> 0.dp
+    }
+
+    Box(
+        Modifier.fillMaxSize().background(AppTheme.current.colors.background.default)
+    ) {
+        HeaderImage(headerType, headerBackground ?: AppTheme.current.assets.headerBackground)
+        Column(
+            modifier = Modifier.fillMaxSize().pointerInput(Unit) {
+                detectTapGestures(onTap = {
+                    keyboardController?.hide()
+                })
+            },
+        ) {
+            Header(
+                headerType = headerType,
+                title = title,
+                titlePosition = titlePosition,
+                backgroundColor = backgroundColor,
+                headerRight = headerRight,
+                isBack = isBack,
+                goBack = goBack,
+            )
+
+            Column(
+                Modifier.weight(1f).padding(bottom = avoidKeyboard)
+                    .verticalScroll(rememberScrollState()),
+                verticalArrangement = verticalArrangement,
+                horizontalAlignment = horizontalAlignment
+            ) {
+                content()
+            }
+
+            footer?.let {
+                Footer(footer)
+            }
+        }
+    }
+}
+
+@Composable
+fun Footer(footer: @Composable (() -> Unit)? = null) {
+    val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+    val keyboardHeight = WindowInsets.ime.asPaddingValues().calculateBottomPadding()
+    Box(
+        Modifier
+            .offset(y = if (keyboardHeight > 150.dp) -keyboardHeight + 21.dp else 0.dp)
+            .padding(bottom = min(indicator, 21.dp))
+            .shadow(
+                Colors.black_20.copy(alpha = 0.1f),
+                borderRadius = 0.dp,
+                10f,
+                offsetX = 0.dp,
+                offsetY = (-2).dp,
+                spread = 1.dp
+            )
+            .background(AppTheme.current.colors.background.surface)
+    ) {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .padding(vertical = Spacing.S, horizontal = Spacing.M)
+        )
+        {
+            footer?.invoke()
+        }
+    }
+}
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,62 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+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.const.scaleSize
+import vn.momo.kits.utils.primaryColors
+
+@Composable
+fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+
+    fun formatTitle(label: String): String {
+        if (isNumber(label) && label.toInt() > 99) {
+            return "99+"
+        }
+        return label
+    }
+
+    var badgeColor =
+        if (isNumber(label)) {
+            AppTheme.current.colors.error.primary
+        } else {
+            AppTheme.current.colors.warning.primary
+        }
+
+    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
+        badgeColor = backgroundColor
+    }
+
+    Box(
+        modifier = Modifier
+            .height(scaleSize(16.toFloat()).dp)
+            .widthIn(min = scaleSize(16.toFloat()).dp)
+            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+            .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = formatTitle(label),
+            color = Colors.black_01,
+            style = Typography.actionXxs
+        )
+    }
+}

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

@@ -0,0 +1,27 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+
+enum class DotSize(val size: Int) {
+    Small(10),
+    Large(16)
+}
+
+@Composable
+fun BadgeDot(size: DotSize = DotSize.Large) {
+    Box(
+        modifier = Modifier
+            .size(size.size.dp)
+            .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
+            .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))
+    )
+}

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

@@ -0,0 +1,288 @@
+package vn.momo.kits.components
+
+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.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.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.CircularProgressIndicator
+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.text.TextStyle
+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
+
+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 = 6.dp,
+            padding = Spacing.S,
+            width = 60.dp
+        )
+    )
+}
+
+fun getStyle(size: Size): TextStyle {
+    return when (size.name) {
+        Size.LARGE.name -> Typography.actionDefault
+        Size.MEDIUM.name -> Typography.actionS
+        Size.SMALL.name -> Typography.actionXs
+        else -> Typography.actionDefault
+    }
+}
+
+fun getIconSize(size: Size): Dp {
+    return when (size.name) {
+        Size.LARGE.name -> 24.dp
+        Size.MEDIUM.name -> 16.dp
+        Size.SMALL.name -> 16.dp
+        else -> 24.dp
+    }
+}
+
+fun getIconSpace(size: Size): Dp {
+    return when (size.name) {
+        Size.SMALL.name -> Spacing.XS
+        else -> Spacing.S
+    }
+}
+
+@Composable
+fun getTextColor(type: ButtonType): Color {
+    return when (type) {
+        ButtonType.DISABLED -> AppTheme.current.colors.text.disable
+        ButtonType.PRIMARY -> Colors.black_01
+        ButtonType.SECONDARY -> AppTheme.current.colors.text.default
+        ButtonType.OUTLINE -> AppTheme.current.colors.primary
+        ButtonType.TONAL -> AppTheme.current.colors.primary
+        ButtonType.DANGER -> Colors.black_01
+        ButtonType.TEXT -> AppTheme.current.colors.primary
+    }
+}
+
+@Composable
+fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
+    val style = getStyle(size)
+    val color = getTextColor(type)
+    Text(style = style, text = title, color = color)
+}
+
+@Composable
+fun RenderLeading(
+    loading: Boolean,
+    size: Size,
+    useTintColor: Boolean = true,
+    type: ButtonType,
+    iconLeft: String = "",
+) {
+    val iconSize = getIconSize(size)
+    val marginRight = getIconSpace(size)
+    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center
+    ) {
+        if (loading) {
+            Box(Modifier.padding(end = marginRight)) {
+                CircularProgressIndicator(
+                    modifier = Modifier.size(iconSize - 4.dp),
+                    color = color,
+                    trackColor = Color.Transparent,
+                    strokeWidth = 2.dp
+                )
+            }
+
+        }
+        if (iconLeft.isNotEmpty()) {
+            Icon(
+                source = iconLeft,
+                color = color,
+                size = iconSize,
+                modifier = Modifier.padding(end = marginRight)
+            )
+        }
+    }
+}
+
+@Composable
+fun RenderTrailing(
+    iconRight: String,
+    size: Size,
+    useTintColor: Boolean,
+    type: ButtonType,
+) {
+    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    val marginLeft = getIconSpace(size)
+    if (iconRight.isNotEmpty()) {
+        val iconSize = getIconSize(size)
+        Icon(
+            source = iconRight,
+            color = color,
+            size = iconSize,
+            modifier = Modifier.padding(start = marginLeft)
+        )
+    }
+}
+
+@Composable
+fun getTypeStyle(
+    type: ButtonType,
+    color: Color? = AppTheme.current.colors.primary,
+    size: Size,
+): Modifier {
+    val theme = AppTheme.current
+
+    return when (type) {
+        ButtonType.DISABLED -> Modifier.background(theme.colors.background.disable)
+            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+
+        ButtonType.PRIMARY -> Modifier.background(theme.colors.primary)
+            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+
+        ButtonType.SECONDARY -> Modifier
+            .background(theme.colors.background.surface)
+            .border(1.dp, theme.colors.border.default, RoundedCornerShape(size.value.radius))
+
+        ButtonType.OUTLINE -> Modifier
+            .background(theme.colors.background.surface)
+            .border(
+                1.dp,
+                color ?: theme.colors.primary,
+                RoundedCornerShape(size.value.radius)
+            )
+
+        ButtonType.TONAL -> Modifier.background(theme.colors.background.tonal)
+            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+
+        ButtonType.DANGER -> Modifier.background(theme.colors.error.primary)
+            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+
+        ButtonType.TEXT -> Modifier
+    }
+}
+
+/**
+ * @param onClick called when this button is clicked
+ * @param type [ButtonType] that define the type of button.
+ * @param iconRight [String] the icon at the right of title
+ * @param iconLeft [String] the icon at the left of title
+ * @param title [String] title of button
+ * @param loading [Boolean] used when you want to use loading animation
+ * @param enabled controls the enabled state of this button. When `false`,
+ *     this component will not respond to user input, and it will appear
+ *     visually disabled and disabled to accessibility services.
+ * @param isRipple [Boolean] controls the ripple animation of button. When
+ *     `false`, the button won't have ripple animation.
+ * @param useTintColor [Boolean] controls color of the icon.
+ */
+@Composable
+fun Button(
+    onClick: () -> Unit,
+    type: ButtonType = ButtonType.PRIMARY,
+    size: Size = Size.LARGE,
+    iconRight: String = "",
+    iconLeft: String = "",
+    title: String = "Button",
+    loading: Boolean = false,
+    enabled: Boolean = true,
+    isRipple: Boolean = true,
+    useTintColor: Boolean = true,
+    isFull: Boolean = true,
+) {
+    val customModifier = if (isFull) {
+        Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(size.value.radius)).clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = if (isRipple) rememberRipple() else null,
+                enabled = enabled,
+                onClick = onClick
+            )
+
+    } else {
+        Modifier
+            .clip(RoundedCornerShape(size.value.radius)).clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = if (isRipple) rememberRipple() else null,
+                enabled = enabled,
+                onClick = onClick
+            )
+    }
+
+    Row(
+        modifier = customModifier.then(getTypeStyle(type, size = size))
+            .padding(horizontal = size.value.padding)
+            .defaultMinSize(
+                minWidth = size.value.width
+            ).height(size.value.height),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        RenderLeading(
+            loading,
+            size,
+            useTintColor,
+            type,
+            iconLeft = iconLeft
+        )
+        RenderTitle(size, title, type = type)
+        RenderTrailing(
+            size = size,
+            useTintColor = useTintColor,
+            type = type,
+            iconRight = iconRight
+        )
+    }
+}