@momo-kits/native-kits 0.117.1 → 0.117.2-beta.2

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

@@ -0,0 +1,208 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+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.layout.width
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+
+enum class TitleType { Card, Section }
+enum class TitleSize { Small, Medium, Large }
+enum class IconAlign { Top, Center, Bottom }
+enum class ButtonSize { Small, Large }
+
+@Composable
+fun Title(
+    title: String,
+    type: TitleType = TitleType.Section,
+    size: TitleSize = TitleSize.Medium,
+    icon: String? = null,
+    iconColor: Color? = null,
+    iconAlign: IconAlign = IconAlign.Top,
+    showRightAction: Boolean = false,
+    showTrailingAction: Boolean = false,
+    badgeLabel: String? = null,
+    buttonTitle: String? = null,
+    buttonSize: ButtonSize = ButtonSize.Small,
+    onPressRightAction: () -> Unit = {},
+    onPressTrailingAction: () -> Unit = {},
+    textOnly: Boolean = false,
+    description: String? = null,
+    modifier: Modifier = Modifier
+) {
+    val theme = AppTheme.current
+    val textStyle: TextStyle = when (type) {
+        TitleType.Card -> when (size) {
+            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
+        }
+
+        TitleType.Section -> when (size) {
+            TitleSize.Small -> TextStyle(
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Medium -> TextStyle(
+                fontSize = 18.sp,
+                lineHeight = 26.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Large -> TextStyle(
+                fontSize = 20.sp,
+                lineHeight = 28.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+    }
+
+    if (textOnly) {
+        Text(
+            text = title,
+            style = textStyle,
+            modifier = modifier
+        )
+        return
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        icon?.let {
+            Column(
+                modifier = Modifier.fillMaxHeight().padding(end = Spacing.S),
+                verticalArrangement = when (iconAlign) {
+                    IconAlign.Top -> Arrangement.Top
+                    IconAlign.Center -> Arrangement.Center
+                    IconAlign.Bottom -> Arrangement.Bottom
+                },
+            ) {
+                // Icon
+                Icon(
+                    source = it,
+                    color = iconColor ?: theme.colors.text.default,
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = if (showTrailingAction) Modifier else Modifier.weight(1f),
+                ) {
+                    Text(
+                        text = title,
+                        style = textStyle,
+                        maxLines = if (showTrailingAction || badgeLabel != null) 1 else 2,
+                    )
+
+                    // Badge
+                    badgeLabel?.let {
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Badge(
+                            label = it
+                        )
+                    }
+
+                }
+
+                // Trailing action (icon)
+                if (showTrailingAction && !showRightAction) {
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Box(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .background(
+                                color = if (type == TitleType.Section) Colors.black_06.copy(0.6f) else Colors.black_06.copy(
+                                    0.3f
+                                ),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .clickable { onPressTrailingAction() },
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            source = "arrow_chevron_right_small",
+                            size = 18.dp
+                        )
+                    }
+                }
+            }
+
+            // Description
+            description?.let {
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = it,
+                    style = Typography.descriptionDefaultRegular,
+                    color = theme.colors.text.secondary
+                )
+            }
+        }
+
+        // Right action (button or icon)
+        if (showRightAction && !showTrailingAction) {
+            Spacer(modifier = Modifier.width(8.dp))
+            if (buttonTitle != null) {
+                Text(
+                    text = buttonTitle,
+                    style = if (buttonSize === ButtonSize.Small) Typography.actionXsBold else Typography.actionSBold,
+                    color = theme.colors.primary,
+                    modifier = Modifier.clickable { onPressRightAction() }
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .background(
+                            color = Colors.pink_03.copy(alpha = 0.1f),
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                        .clickable { onPressRightAction() },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "arrow_chevron_right_small",
+                        modifier = Modifier.size(22.dp),
+                        color = theme.colors.primary
+                    )
+                }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -46,15 +46,15 @@ fun getFont(font: String): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.otf",
-        "SFProText-200" to "sfprotext_ultralight.otf",
+        "SFProText-100" to "sfprotext_thin.ttf",
+        "SFProText-200" to "sfprotext_ultralight.ttf",
         "SFProText-300" to "sfprotext_light.ttf",
         "SFProText-400" to "sfprotext_regular.ttf",
         "SFProText-500" to "sfprotext_medium.ttf",
         "SFProText-600" to "sfprotext_semibold.ttf",
         "SFProText-700" to "sfprotext_bold.ttf",
         "SFProText-800" to "sfprotext_heavy.ttf",
-        "SFProText-900" to "sfprotext_black.otf",
+        "SFProText-900" to "sfprotext_black.ttf",
 
         "MoMoSignature-100" to "momosignature.otf",
         "MoMoSignature-200" to "momosignature.otf",

package/ios/Application/Components.swift

@@ -45,13 +45,24 @@ func safeAreaTopInset() -> CGFloat {
 public struct HeaderBackground: View {
     var headerType: HeaderType = .default
     var scrollState: CGFloat
+    var isTransparent: Bool = false
+    
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        isTransparent: Bool = false
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        self.isTransparent = isTransparent
+    }
     
     public var body: some View {
         
         let statusBarHeight = safeAreaTopInset()
         
         let opacity = 1 - CGFloat(scrollState) / 200
-        let backgroundColor = scrollState == 0 ? Color.clear : Colors.black01
+        let backgroundColor = isTransparent ? Color.clear : Colors.black01
         
         Group {
             if headerType == .default {
@@ -62,7 +73,9 @@ public struct HeaderBackground: View {
                         .fill(backgroundColor)
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
-                        .overlay(Rectangle()
+                        .overlay(
+                            isTransparent ? nil :
+                            Rectangle()
                             .fill(LinearGradient(
                                 gradient: Gradient(colors: [
                                     Color(red: 1, green: 0.8, blue: 0.87),
@@ -72,7 +85,9 @@ public struct HeaderBackground: View {
                                 endPoint: .bottom))
                                 .opacity(opacity)
                                 .frame(height: height))
-                        .overlay(Rectangle()
+                        .overlay(
+                            isTransparent ? nil :
+                            Rectangle()
                             .fill(Colors.black04)
                             .frame(height: 1)
                             .frame(maxWidth: .infinity)
@@ -111,6 +126,7 @@ public struct Header: View {
     var animatedHeader: AnimatedHeader? = nil
     var scrollState: CGFloat = 0
     var inputSearchProps: InputSearchProps? = nil
+    var tintColor: Color? = nil
     
     @State private var colorFraction: CGFloat = 0
     
@@ -123,7 +139,8 @@ public struct Header: View {
         opacity: CGFloat? = nil,
         animatedHeader: AnimatedHeader? = nil,
         scrollState: CGFloat = 0,
-        inputSearchProps: InputSearchProps? = nil
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil
     ) {
         self.headerType = headerType
         self.titlePosition = titlePosition
@@ -134,12 +151,13 @@ public struct Header: View {
         self.animatedHeader = animatedHeader
         self.scrollState = scrollState
         self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
     }
     
     public var body: some View {
         
-        let tintIconColor = Colors.black17
-        let backgroundButton = Colors.black01.opacity(0.6)
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
 
         if headerType != .none {
             VStack(spacing: 0) {
@@ -148,11 +166,11 @@ public struct Header: View {
                             if let goBack = goBack {
                                 SwiftUI.Button(action: goBack) {
                                     Circle()
-                                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
-                                        .background(Circle().fill(backgroundButton))
+                                        .stroke(borderColor, lineWidth: 0.2)
+                                        .background(Circle().fill(backgroundButtonColor))
                                         .frame(width: 28, height: 28)
                                         .overlay(
-                                            Icon(source: "arrow-back", size: 20, color: Colors.black17)
+                                            Icon(source: "arrow-back", size: 20, color: tintColor)
                                         )
                                 }
                                 
@@ -196,8 +214,9 @@ public struct Header: View {
                                 }
                             } else {
                                 Text(title)
-                                    .font(Font.system(size: 17).weight(.bold))          .lineSpacing(22)
-                                    .foregroundColor(tintIconColor)
+                                    .font(Font.system(size: 17).weight(.bold))
+                                    .lineSpacing(22)
+                                    .foregroundColor(tintColor)
                                     .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
                                     .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
                                     .lineLimit(1)

package/ios/Application/HeaderRight.swift

@@ -75,20 +75,23 @@ struct NavigationButtonConfig {
 
 // MARK: - Components
 public struct HeaderRight: View {
-    public init(headerRight: HeaderRightData? = nil) {
+    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
         self.headerRight = headerRight
+        self.tintColor = tintColor
     }
     var headerRight: HeaderRightData?
+    var tintColor: Color? = nil
     
     public var body: some View {
         HStack(alignment: .center) {
-            ToolkitHeaderRight(headerRight: headerRight)
+            ToolkitHeaderRight(headerRight: headerRight, tintColor: tintColor)
         }
     }
 }
 
 struct ToolkitHeaderRight: View {
     var headerRight: HeaderRightData?
+    var tintColor: Color?
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
     @EnvironmentObject private var environment: ApplicationEnvironment
@@ -176,44 +179,47 @@ struct ToolkitHeaderRight: View {
     }
     
     var body: some View {
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
         let navButtonConfig = getNavigationButtonConfig()
         let showBadge = headerRight?.tools.contains { group in
             group.items.contains { $0.showBadge }
         } ?? false
         
-        HStack(alignment: .center) {
+        HStack(alignment: .center, spacing: 0) {
             if headerRight?.useShortcut == true {
                 NavigationButton(
                     disabled: isLoading,
                     icon: navButtonConfig.icon,
                     showBadge: showBadge,
-                    onClick: navButtonConfig.onPress
+                    onClick: navButtonConfig.onPress,
+                    tintColor: tintColor
                 )
             }
             
             HStack(alignment: .center, spacing: 0) {
-                Icon(source: "help_center", size: 20)
+                Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressHelpCenter()
                     }
                 
                 Rectangle()
-                    .fill(Colors.black20)
+                    .fill(tintColor ?? Colors.black20)
                     .frame(width: 0.5, height: 12)
                 
-                Icon(source: "16_navigation_close_circle", size: 20, color: Colors.black17)
+                Icon(source: "16_navigation_close_circle", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressClose()
                     }
             }
             .frame(width: 65, height: 28)
-            .background(Color.white.opacity(0.6))
+            .background(backgroundButtonColor)
             .cornerRadius(14)
             .overlay(
                 RoundedRectangle(cornerRadius: 14)
-                    .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                    .stroke(borderColor, lineWidth: 0.2)
             )
             .padding(.leading, Spacing.S)
         }
@@ -225,17 +231,21 @@ struct NavigationButton: View {
     var icon: String
     var showBadge: Bool
     var onClick: () -> Void
+    var tintColor: Color?
     
     var body: some View {
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
+        
         ZStack {
             Circle()
-                .fill(Color.white.opacity(0.6))
+                .fill(backgroundButtonColor)
                 .overlay(
                     Circle()
-                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                        .stroke(borderColor, lineWidth: 0.2)
                 )
             
-            Icon(source: icon, size: 16)
+            Icon(source: icon, size: 16, color: tintColor)
             
             if showBadge {
                 BadgeDot(size: .small)

package/ios/Application/Screen.swift

@@ -9,6 +9,8 @@ import SwiftUI
 
 public struct Screen<Content: View>: View {
     var backgroundColor: Color?
+    var headerTransparent: Bool = false
+    var tintColor: Color? = Colors.black17
     var isBack: Bool
     var headerType: HeaderType
     var verticalAlignment: VerticalAlignment
@@ -29,6 +31,8 @@ public struct Screen<Content: View>: View {
 
     public init(
         backgroundColor: Color? = nil,
+        headerTransparent: Bool = false,
+        tintColor: Color = Colors.black17,
         isBack: Bool = true,
         headerType: HeaderType = .default,
         verticalAlignment: VerticalAlignment = .top,
@@ -48,6 +52,8 @@ public struct Screen<Content: View>: View {
         @ViewBuilder content: @escaping () -> Content
     ) {
         self.backgroundColor = backgroundColor
+        self.headerTransparent = headerTransparent
+        self.tintColor = tintColor
         self.isBack = isBack
         self.headerType = headerType
         self.verticalAlignment = verticalAlignment
@@ -70,6 +76,9 @@ public struct Screen<Content: View>: View {
     @State private var scrollOffset: CGFloat = 0
 
     public var body: some View {
+        
+        let headerRightInstance = {HeaderRight(tintColor: tintColor)}
+        
         GeometryReader { geometry in
             let topInset = geometry.safeAreaInsets.top
             let keyboardHeight: CGFloat = 0
@@ -79,7 +88,8 @@ public struct Screen<Content: View>: View {
             let screenHeight = height + topInset + bottomInset
 
             ZStack {
-                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
+                (backgroundColor ?? Color.white)
+                    .edgesIgnoringSafeArea(.top)
 
                 VStack(spacing: 0) {
                     ZStack(alignment: .top) {
@@ -95,14 +105,15 @@ public struct Screen<Content: View>: View {
                             headerType: headerType,
                             titlePosition: titlePosition,
                             title: title,
-                            headerRight: headerRight,
+                            headerRight: headerRight ?? headerRightInstance,
                             goBack: goBack,
                             opacity: min(scrollOffset / 114, 1),
                             animatedHeader: animatedHeader,
                             scrollState: scrollOffset,
-                            inputSearchProps: inputSearchProps
+                            inputSearchProps: inputSearchProps,
+                            tintColor: tintColor
                         )
-                        .background(HeaderBackground(headerType: headerType, scrollState: scrollOffset).edgesIgnoringSafeArea(.top))
+                        .background(HeaderBackground(headerType: headerType, scrollState: scrollOffset, isTransparent: headerTransparent).edgesIgnoringSafeArea(.top))
                         .offset(y: topInset)
 
                     }
@@ -174,6 +185,8 @@ struct Footer: View {
         VStack {
             footerView
         }
+        .padding(.vertical, Spacing.S)
+        .padding(.horizontal, Spacing.M)
         .padding(.bottom, keyboardSize)
         .background(Colors.black01)
     }

package/ios/Button/Button.swift

@@ -42,7 +42,7 @@ public struct Button: View {
         SwiftUI.Button(action: action) {
             HStack {
                 iconLeft
-                renderTitle(title: title, type: type, size: size)
+                renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
                 iconRight
             }
             .buttonSize(size)
@@ -123,15 +123,15 @@ private extension View {
         case .large:
             return self
                 .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.L)
         case .medium:
             return self
                 .frame(minWidth: 80, maxWidth: .infinity, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.M)
         case .small:
             return self
                 .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.S)
         }
     }
 }

package/ios/Image/Image.swift

@@ -27,7 +27,7 @@ public struct ImageView: View {
                 error = false
             }
             .resizable()
-            .renderingMode(.original)
+            .renderingMode(color != nil ? .template : .original)
             .placeholder {
                 Rectangle().foregroundColor(.gray)
                 VStack(alignment: .center, content: {
@@ -49,7 +49,7 @@ public struct ImageView: View {
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
-            .modifier(ColorMultiplyModifier(color: color))
+            .foregroundColor(color)
     }
 
     // MARK: Internal