@momo-kits/native-kits 0.110.1-beta.1 → 0.110.1-beta.5

package/compose/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
+    kotlin("plugin.serialization")
     id("maven-publish")
 }
 
@@ -39,6 +40,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.compose)
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
+                implementation(libs.jetbrains.serialization.json)
             }
         }
         val androidMain by getting {

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

@@ -73,11 +73,19 @@ fun HeaderBackground(
         targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
     )
 
+    val backgroundColor = if (scrollState == 0) {
+        Color.Transparent
+    } else {
+        AppTheme.current.colors.background.surface
+    }
+
+
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
             Box(
                 modifier = Modifier.fillMaxWidth().height(height)
+                    .background(backgroundColor)
                     .bottomBorder(
                         strokeWidth = 1.dp,
                         color = AppTheme.current.colors.border.default
@@ -101,6 +109,7 @@ fun HeaderBackground(
                 )
                 if (AppTheme.current.assets.headerBackground != null) {
                     Image(
+                        loading = false,
                         source = AppTheme.current.assets.headerBackground!!,
                         modifier = Modifier.fillMaxWidth().height(height),
                         options = Options(
@@ -113,6 +122,7 @@ fun HeaderBackground(
         }
 
         HeaderType.EXTENDED -> {
+
             Box(
                 modifier = Modifier.fillMaxWidth().height(154.dp)
                     .alpha(opacityAni)
@@ -128,13 +138,19 @@ fun HeaderBackground(
                     )
             ) {
                 if (AppTheme.current.assets.headerBackground != null) {
-                    Image(
-                        source = AppTheme.current.assets.headerBackground!!,
-                        modifier = Modifier.fillMaxWidth().height(154.dp),
-                        options = Options(
-                            contentScale = ContentScale.FillWidth
+                    Box(
+                        modifier = Modifier.fillMaxWidth()
+                            .background(backgroundColor)
+                    ) {
+                        Image(
+                            loading = false,
+                            source = AppTheme.current.assets.headerBackground!!,
+                            modifier = Modifier.fillMaxWidth().height(154.dp),
+                            options = Options(
+                                contentScale = ContentScale.FillWidth
+                            )
                         )
-                    )
+                    }
                 }
             }
         }
@@ -246,7 +262,7 @@ fun Header(
                 }
                 if (inputSearchProps != null) {
                     InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
-                } else{
+                } else {
                     Box(
                         Modifier.weight(1f).graphicsLayer {
                             alpha = if (animatedHeader !== null) opacity ?: 1f else 1f

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

@@ -1,64 +1,77 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import kotlinx.coroutines.launch
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
+import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
-
-class Navigator {
-    fun push(content: @Composable () -> Unit) {
-    }
-
-    fun present(content: @Composable () -> Unit) {
-
-    }
-
-    fun reset(content: @Composable () -> Unit) {
-
-    }
-
-    fun pop() {
-    }
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
 
-    fun replace(content: @Composable () -> Unit) {
-    }
-
-    fun popToTop() {
-    }
-
-    fun showModal(
-        onClose: () -> Unit = {},
-        canBackgroundClose: Boolean = true,
-        content: @Composable () -> Unit,
-    ) {
-    }
-
-    fun showBottomSheet(content: @Composable () -> Unit) {
-    }
+interface ComposeApi {
+    fun request(funcName: String, params: String?): String
+    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    fun removeCallback(id: String)
 }
 
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
-    content: @Composable () -> Unit,
+    composeApi: ComposeApi? = null,
+    statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
+    content: @Composable () -> Unit
 ) {
+    var appTheme by remember { mutableStateOf(theme) }
+    val coroutineScope = rememberCoroutineScope()
+
+    LaunchedEffect(Unit) {
+        try {
+            composeApi?.request("getConfig", "DESIGN_SYSTEM") {
+                val json = Json { ignoreUnknownKeys = true }
+                val response = json.parseToJsonElement(it).jsonObject["response"]
+                val headerBar = response
+                    ?.jsonObject
+                    ?.get("headerBar")
+                    ?.jsonPrimitive
+                    ?.content
+                if (headerBar != null && appTheme.assets.headerBackground == null) {
+                    coroutineScope.launch {
+                        appTheme = appTheme.copy(
+                            assets = ThemeAssets(
+                                headerBackground = headerBar
+                            )
+                        )
+                    }
+                }
+            }
+        }
+        catch (e: Exception) {
+            print("@@ == NavigationContainer fetch config error $e")
+        }
+    }
+
     disableOverscroll()
     CompositionLocalProvider(
-        AppTheme provides theme,
-        AppNavigator provides Navigator(),
-        AppStatusBar provides getStatusBarHeight(),
+        AppTheme provides appTheme,
+        PlatformApi provides composeApi,
+        AppStatusBar provides statusBarHeight,
     ) {
         content()
     }

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

@@ -87,7 +87,9 @@ fun Screen(
     )
 
     val headerAnimated =
-        @Composable { animatedHeader?.composable?.invoke(scrollState.value) }
+        @Composable {
+            animatedHeader?.composable?.invoke(scrollState.value)
+        }
 
     Box(
         Modifier.fillMaxSize()
@@ -95,7 +97,10 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderBackground(headerType = headerType, scrollState = scrollState.value)
+            HeaderBackground(
+                headerType = headerType,
+                scrollState = scrollState.value,
+            )
         } else {
             Box(
                 Modifier.zIndex(2f)
@@ -104,7 +109,7 @@ fun Screen(
             ) {
                 HeaderBackground(
                     headerType = headerType,
-                    scrollState = scrollState.value
+                    scrollState = scrollState.value,
                 )
             }
         }

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

@@ -98,6 +98,7 @@ data class InputSearchProps(
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
     val modifier: Modifier = Modifier,
     val iconModifier: Modifier = Modifier,
+    val onClearPress: () -> Unit = {}
 )
 
 @Composable
@@ -195,7 +196,10 @@ fun InputSearch(
                                         size = 16.dp,
                                         color = AppTheme.current.colors.text.hint,
                                         modifier = Modifier.clickable(
-                                            onClick = { inputSearchProps.text.value = "" },
+                                            onClick = {
+                                                inputSearchProps.text.value = ""
+                                                inputSearchProps.onClearPress.invoke()
+                                            },
                                             interactionSource = remember { MutableInteractionSource() },
                                             indication = null
                                         )

package/ios/Checkbox/Checkbox.swift

@@ -4,27 +4,26 @@ import SwiftUI
 public struct Checkbox: View{
     @Binding var checked: Bool
     var disabled: Bool
-    //    var onChange: ((Bool)->Void)?
-    var onCheckedChange: ((Bool) -> Void)?
+    var onChange: ((Bool)->Void)?
     var indeterminate: Bool
     var title: String
-    
-    
-    public init(_ checked: Binding<Bool>,disabled: Bool = false, onCheckedChange: ( (Bool) -> Void)?,
+
+
+    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ( (Bool) -> Void)?,
                 indeterminate: Bool = false,
                 title: String = ""){
         self._checked = checked
         self.disabled = disabled
-        self.onCheckedChange = onCheckedChange
+        self.onChange = onChange
         self.indeterminate = indeterminate
         self.title = title
     }
-    
+
     func onCheck(){
         checked.toggle()
-        onCheckedChange?(checked)
+        onChange?(checked)
     }
-    
+
     public var body: some View {
         HStack(spacing: Spacing.S) {
             // Checkbox
@@ -36,20 +35,20 @@ public struct Checkbox: View{
                         RoundedRectangle(cornerRadius: Radius.XS)
                             .stroke(borderColor, lineWidth: Spacing.XXS)
                     )
-                
+
                 if checked {
                     Image(systemName: indeterminate ? "minus" : "checkmark")
                         .resizable()
-                        .foregroundColor(Colors.black20)
+                        .foregroundColor(Colors.black01)
                         .frame(width: 12, height: 12)
                 }
             }
             .onTapGesture {
                 if !disabled {
-                    onCheckedChange?(checked)
+                    onChange?(checked)
                 }
             }
-            
+
             // Title
             if !title.isEmpty {
                 Text(title)
@@ -57,7 +56,7 @@ public struct Checkbox: View{
             }
         }
     }
-    
+
     private var borderColor: Color {
         if disabled {
             return Colors.black03
@@ -67,7 +66,7 @@ public struct Checkbox: View{
             return Colors.text
         }
     }
-    
+
     private var backgroundColor: Color {
         if disabled && checked {
             return Colors.pink08
@@ -77,25 +76,6 @@ public struct Checkbox: View{
             return Colors.black01
         }
     }
-    
 
-    
-//    public var body: some View{
-//        return SwiftUI.Button(action: onCheck) {
-//            HStack {
-//                if (checked) {
-//                    Image(systemName: "checkmark.square.fill")
-//                        .resizable()
-//                        .foregroundColor(disabled ? Colors.black07 : Colors.primary)
-//                        .frame(width: 24, height: 24)
-//                }
-//            }.frame(width: 24, height: 24)
-//                .overlay(RoundedRectangle(cornerRadius: 4).stroke(Colors.black20,lineWidth: checked ? 0 : 1))
-//            .background(Colors.black01)
-//                
-//        }
-//        .opacity(disabled ? 0.4 : 1)
-//        .disabled(disabled)
-//    }
-    
+
 }

package/ios/Icon/Icon.swift

@@ -0,0 +1,53 @@
+import SwiftUI
+
+struct IconSource: Codable {
+    let uri: String
+}
+
+func loadIconSources() -> [String: IconSource] {
+    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json") else {
+        print("Error: icon.json not found")
+        return [:]
+    }
+    
+    do {
+        let data = try Data(contentsOf: url)
+        let decoded = try JSONDecoder().decode([String: IconSource].self, from: data)
+        return decoded
+    } catch {
+        print("Error decoding icon.json: \(error)")
+        return [:]
+    }
+}
+
+// Load the JSON data into a global variable
+let iconSources: [String: IconSource] = loadIconSources()
+
+// Icon ViewModel
+public struct Icon: View {
+    var source: String
+    var size: CGFloat
+    var color: Color?
+    var accessibilityLabel: String?
+    
+    public init(
+            source: String,
+            size: CGFloat = 24,
+            color: Color? = nil,
+            accessibilityLabel: String? = nil
+        ) {
+            self.source = source
+            self.size = size
+            self.color = color
+            self.accessibilityLabel = accessibilityLabel
+        }
+
+    public var body: some View {
+        if let uri = iconSources[source]?.uri {
+            ImageView(uri)
+                .frame(width: size, height: size)
+                .foregroundColor(color)
+        }
+    }
+}
+

package/ios/Input/Input.swift

@@ -72,12 +72,12 @@ public struct Input: View {
     var onChange: ((String) -> Void)?
     var onBlur: (() -> Void)?
     var floatingIconURL: String?
-    var floatingIconColor: Color
+    var floatingIconColor: Color?
     var size: InputSize
     var fontWeight: InputFontWeight
     var disabled: Bool
     var leadingIcon: String?
-    var leadingIconColor: Color
+    var leadingIconColor: Color?
     var loading: Bool
     var required: Bool
     var hintText: String?
@@ -86,7 +86,7 @@ public struct Input: View {
         self.value.removeAll()
     }
     
-    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil, floatingIconURL: String? = nil, floatingIconColor: Color = Colors.pink03, size: InputSize = .small, fontWeight: InputFontWeight = .regular, disabled: Bool = false, leadingIcon: String? = nil, leadingIconColor: Color = Colors.pink03, loading: Bool = false, required: Bool = false, hintText: String? = nil){
+    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil, floatingIconURL: String? = nil, floatingIconColor: Color? = Colors.pink03, size: InputSize = .small, fontWeight: InputFontWeight = .regular, disabled: Bool = false, leadingIcon: String? = nil, leadingIconColor: Color? = Colors.pink03, loading: Bool = false, required: Bool = false, hintText: String? = nil){
         self.placeholder = placeholder
         self.floatingValue = floatingValue
         self.errorMessage = errorMessage
@@ -117,9 +117,7 @@ public struct Input: View {
                 ZStack(alignment: .topLeading) {
                     HStack(alignment: .center) {
                         if let leadingIcon = leadingIcon {
-                            ImageLoader(url: URL(string: leadingIcon)!)
-                                .frame(width: 20, height: 20)
-                                .foregroundColor(leadingIconColor)
+                            Icon(source: leadingIcon, size: 16, color: leadingIconColor)
                         }
                         
                         if !isSecure {
@@ -156,17 +154,18 @@ public struct Input: View {
                     if value.isEmpty {
                         Text(placeholder + (required ? " *" : ""))
                             .foregroundColor(Colors.black09)
-                            .padding(.horizontal, 12)
+                            .padding(.horizontal, leadingIcon == nil ? 12 : 32)
                             .padding(.top, 12)
                             .allowsHitTesting(false)
                     }
                     
                     if !floatingValue.isEmpty {
                         FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
-                            AnyView(ImageLoader(url: URL(string: url)!)
-                                        .frame(width: 20, height: 20)
-                                        .background(floatingIconColor))
+                            AnyView(
+                                Icon(source: url, size: 16, color: floatingIconColor)
+                                )
                         })
+                            
                     }
                 }
                 
@@ -183,27 +182,6 @@ public struct Input: View {
         }
 }
 
-struct ImageLoader: View {
-    @ObservedObject private var loader: ImageLoaderObject
-    
-    init(url: URL) {
-        loader = ImageLoaderObject(url: url)
-    }
-    
-    var body: some View {
-        Group {
-            if let image = loader.image {
-                Image(uiImage: image)
-                    .resizable()
-                    .aspectRatio(contentMode: .fit)
-            } else {
-                // Use UIActivityIndicatorView for earlier iOS versions
-                ActivityIndicator(isAnimating: .constant(true), style: .medium)
-            }
-        }
-    }
-}
-
 
 struct ActivityIndicator: UIViewRepresentable {
     @Binding var isAnimating: Bool
@@ -218,26 +196,6 @@ struct ActivityIndicator: UIViewRepresentable {
     }
 }
 
-class ImageLoaderObject: ObservableObject {
-    @Published var image: UIImage?
-    private let url: URL
-    
-    init(url: URL) {
-        self.url = url
-        loadImage()
-    }
-    
-    private func loadImage() {
-        URLSession.shared.dataTask(with: url) { data, _, _ in
-            if let data = data, let loadedImage = UIImage(data: data) {
-                DispatchQueue.main.async {
-                    self.image = loadedImage
-                }
-            }
-        }.resume()
-    }
-}
-
 public enum InputSize {
     case small
     case large

package/ios/Typography/Typography.swift

@@ -4,18 +4,61 @@ public extension Font {
     static func appFont(size: CGFloat) -> Font {
         return Font.custom("SFProText", size: size)
     }
-
-    static let h1 = appFont(size: 36).weight(.semibold)
+    
+    // New supported typography styles
+    static let headline_default_bold = appFont(size: 24).weight(.bold)
+    static let header_m_bold = appFont(size: 18).weight(.bold)
+    static let header_default_bold = appFont(size: 16).weight(.bold)
+    static let header_s_semibold = appFont(size: 14).weight(.semibold)
+    static let header_xs_semibold = appFont(size: 12).weight(.semibold)
+    static let body_default_regular = appFont(size: 14).weight(.regular)
+    static let description_default_regular = appFont(size: 12).weight(.regular)
+    static let description_xs_regular = appFont(size: 10).weight(.regular)
+    static let label_default_medium = appFont(size: 14).weight(.medium)
+    static let label_s_medium = appFont(size: 12).weight(.medium)
+    static let label_xs_medium = appFont(size: 10).weight(.medium)
+    static let action_default_bold = appFont(size: 16).weight(.bold)
+    static let action_s_bold = appFont(size: 14).weight(.bold)
+    static let action_xs_bold = appFont(size: 12).weight(.bold)
+    static let action_xxs_bold = appFont(size: 10).weight(.bold)
+    
+    // Legacy styles
+    static let headline_default = appFont(size: 28).weight(.semibold)
+    static let headline_s = appFont(size: 24).weight(.semibold)
+    static let headline_l = appFont(size: 32).weight(.semibold)
+    static let headline_xl = appFont(size: 36).weight(.semibold)
+    static let title_default = appFont(size: 20).weight(.bold)
+    static let title_xs = appFont(size: 16).weight(.bold)
+    static let title_s = appFont(size: 18).weight(.bold)
+    static let header_default = appFont(size: 15).weight(.semibold)
+    static let header_xs = appFont(size: 12).weight(.semibold)
+    static let header_s = appFont(size: 14).weight(.semibold)
+    static let paragraph_default = appFont(size: 15).weight(.regular)
+    static let paragraph_bold = appFont(size: 15).weight(.bold)
+    static let description_default = appFont(size: 14).weight(.regular)
+    static let description_xs = appFont(size: 10).weight(.regular)
+    static let description_s = appFont(size: 12).weight(.regular)
+    static let label_default = appFont(size: 14).weight(.medium)
+    static let label_xxs = appFont(size: 8).weight(.medium)
+    static let label_xs = appFont(size: 10).weight(.medium)
+    static let label_s = appFont(size: 12).weight(.medium)
+    static let action_default = appFont(size: 16).weight(.bold)
+    static let action_xxs = appFont(size: 10).weight(.bold)
+    static let action_xs = appFont(size: 12).weight(.bold)
+    static let action_s = appFont(size: 15).weight(.bold)
+    
+    // deprecated
+    static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)
     static let h3 = appFont(size: 28).weight(.semibold)
     static let h4 = appFont(size: 24).weight(.semibold)
     static let title1 = appFont(size: 20).weight(.bold)
     static let title2 = appFont(size: 18).weight(.bold)
     static let title3 = appFont(size: 16).weight(.bold)
-    static let headerText1 = appFont(size: 15).weight(.semibold)
+    static let headerText1 = appFont(size: 15).weight(.semibold) //header_default
     static let headerText2 = appFont(size: 14).weight(.semibold)
     static let headerText3 = appFont(size: 12).weight(.semibold)
-    static let paragraph = appFont(size: 15).weight(.regular)
+    static let paragraph = appFont(size: 15).weight(.regular) //paragraph_default
     static let description1 = appFont(size: 14).weight(.regular)
     static let description2 = appFont(size: 12).weight(.regular)
     static let description3 = appFont(size: 10).weight(.regular)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.110.1-beta.1",
+  "version": "0.110.1-beta.5",
   "private": false,
   "dependencies": {},
   "devDependencies": {},