@momo-kits/native-kits 0.167.1-duo.17 → 0.167.1-duo.18-debug

package/ios/Navigation/Component/Header.swift

@@ -13,6 +13,8 @@ public let HEADER_HEIGHT: CGFloat = 52
 
 /// Room the back button and toolkit take from the bar (Compose `HEADER_ACTIONS_WIDTH`).
 let headerActionsWidth: CGFloat = 172
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private let statusBarRowActionsExtra: CGFloat = 55
 
 public enum TitlePosition {
     case left, center
@@ -282,7 +284,9 @@ func headerSearchProps(_ props: InputSearchProps, scroll: CGFloat, layout: Scree
 
 /// Max title width: back button and toolkit share the bar unless the iPhone Duo side bar holds them.
 func headerTitleMaxWidth(_ layout: ScreenLayout) -> CGFloat {
-    layout.sideBar != nil ? layout.contentWidth - Spacing.M * 2 : layout.width - headerActionsWidth
+    let clearance = layout.statusBarClearance.map { $0.left + $0.right } ?? 0
+    if layout.sideBar != nil { return layout.contentWidth - Spacing.M * 2 - clearance }
+    return layout.width - headerActionsWidth - (layout.statusBarClearance != nil ? statusBarRowActionsExtra : 0) - clearance
 }
 
 // MARK: - Header
@@ -333,10 +337,22 @@ public struct NavigationHeader: View {
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
+    @State private var headerRightWidth: CGFloat = 0
 
     /// iPhone Duo side bar holds back and the toolkit; a custom header right stays in the bar.
     private var useSideBar: Bool { layout.sideBar != nil }
 
+    /// iPhone Duo inner portrait: the row sits on the status bar, between its clusters, with 48pt controls.
+    private var statusBarRow: Bool { layout.statusBarClearance != nil && !useSideBar }
+
+    /// Max centered title width; on the status bar row the clusters are lopsided, so both sides keep the wider one's room.
+    private var centerTitleMaxWidth: CGFloat {
+        guard let clearance = layout.statusBarClearance else { return (layout.contentWidth - Spacing.M * 2) / 2 }
+        let back = goBack == nil || useSideBar ? 0 : DuoMetrics.controlSize + Spacing.S
+        let inset = max(clearance.left + back, clearance.right + headerRightWidth) + Spacing.S
+        return max(layout.contentWidth - (Spacing.M + inset) * 2, 0)
+    }
+
     private var headerColor: HeaderColor {
         getHeaderColor(
             isAnimated: animatedHeader != nil,
@@ -357,7 +373,16 @@ public struct NavigationHeader: View {
             ZStack {
                 HStack(spacing: 0) {
                     if let goBack, !useSideBar {
-                        BackButton(color: headerColor, onBack: goBack)
+                        if statusBarRow {
+                            SideBarButton(
+                                icon: "arrow-back",
+                                headerColor: headerColor,
+                                accessibilityId: "btn_navigation_back",
+                                action: goBack
+                            )
+                        } else {
+                            BackButton(color: headerColor, onBack: goBack)
+                        }
                         Spacer().frame(width: Spacing.S)
                     }
 
@@ -369,24 +394,36 @@ public struct NavigationHeader: View {
                     }
 
                     if let headerRight, !(useSideBar && toolkitHeaderRight(headerRight) != nil) {
-                        AnyView(headerRight())
-                            .environment(\.headerColor, headerColor)
-                            .background(
-                                GeometryReader { geo in
-                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
-                                }
-                            )
+                        Group {
+                            if statusBarRow, let toolkit = toolkitHeaderRight(headerRight) {
+                                Toolkit(
+                                    headerRight: toolkit.data ?? HeaderRightData(),
+                                    tintColor: toolkit.tintColor,
+                                    layout: .sideBarRow
+                                )
+                            } else {
+                                AnyView(headerRight())
+                            }
+                        }
+                        .environment(\.headerColor, headerColor)
+                        .background(
+                            GeometryReader { geo in
+                                Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                            }
+                        )
                     }
                 }
-                .padding(.horizontal, Spacing.M)
+                .padding(.leading, Spacing.M + (layout.statusBarClearance?.left ?? 0))
+                .padding(.trailing, Spacing.M + (layout.statusBarClearance?.right ?? 0))
 
                 if centerTitle {
                     titleArea(centered: true)
                         // Compose caps a centered title at half the bar
-                        .frame(maxWidth: (layout.contentWidth - Spacing.M * 2) / 2)
+                        .frame(maxWidth: centerTitleMaxWidth)
                         .padding(.horizontal, Spacing.M)
                 }
             }
+            .onPreferenceChange(HeaderRightWidthKey.self) { headerRightWidth = $0 }
             .frame(height: layout.headerBarHeight)
             .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
             // the row starts headerStatusBarHeight below the window top: 0 with the status bar off

package/ios/Navigation/Component/HeaderRight.swift

@@ -158,11 +158,15 @@ private struct NavigationButtonConfig {
     let onPress: () -> Void
 }
 
+/// `sideBarColumn`: the iPhone Duo side bar; `sideBarRow`: the Duo header row on the status bar, same 48pt controls.
+enum ToolkitLayout {
+    case bar, sideBarColumn, sideBarRow
+}
+
 struct Toolkit: View {
     let headerRight: HeaderRightData
     var tintColor: Color?
-    /// iPhone Duo side bar column instead of the bar row.
-    var vertical: Bool = false
+    var layout: ToolkitLayout = .bar
 
     @State private var isFavorite = false
     @State private var isLoading = false
@@ -276,44 +280,46 @@ struct Toolkit: View {
 
     var body: some View {
         Group {
-            if vertical {
-                verticalBody
-            } else {
+            switch layout {
+            case .bar:
                 horizontalBody
+            case .sideBarColumn:
+                VStack(spacing: Spacing.M) { sideBarControls(horizontal: false) }
+            case .sideBarRow:
+                HStack(spacing: Spacing.M) { sideBarControls(horizontal: true) }
             }
         }
         .onAppear(perform: loadFavoriteState)
     }
 
-    private var verticalBody: some View {
+    @ViewBuilder
+    private func sideBarControls(horizontal: Bool) -> some View {
         let config = navigationButtonConfig
         let useHelpCenter = usesHelpCenter(context)
-        return VStack(spacing: Spacing.M) {
-            if showsShortcut(headerRight, context) {
-                SideBarButton(
-                    icon: config.icon,
-                    headerColor: headerColor,
-                    showBadge: headerRight.showBadge,
-                    disabled: isLoading,
-                    action: config.onPress
-                )
-            }
-            SideBarGroup(headerColor: headerColor, itemCount: useHelpCenter ? 2 : 1) {
-                if useHelpCenter {
-                    SideBarGroupItem(
-                        icon: "help_center",
-                        headerColor: headerColor,
-                        accessibilityId: "btn_navigation_help_center",
-                        action: onPressHelpCenter
-                    )
-                }
+        if showsShortcut(headerRight, context) {
+            SideBarButton(
+                icon: config.icon,
+                headerColor: headerColor,
+                showBadge: headerRight.showBadge,
+                disabled: isLoading,
+                action: config.onPress
+            )
+        }
+        SideBarGroup(headerColor: headerColor, itemCount: useHelpCenter ? 2 : 1, horizontal: horizontal) {
+            if useHelpCenter {
                 SideBarGroupItem(
-                    icon: headerRight.closeIcon,
+                    icon: "help_center",
                     headerColor: headerColor,
-                    accessibilityId: "btn_navigation_close",
-                    action: onPressClose
+                    accessibilityId: "btn_navigation_help_center",
+                    action: onPressHelpCenter
                 )
             }
+            SideBarGroupItem(
+                icon: headerRight.closeIcon,
+                headerColor: headerColor,
+                accessibilityId: "btn_navigation_close",
+                action: onPressClose
+            )
         }
     }
 

package/ios/Navigation/Component/SideBar.swift

@@ -70,7 +70,7 @@ struct HeaderSideBar: View {
                     Toolkit(
                         headerRight: toolkit.data ?? HeaderRightData(),
                         tintColor: toolkit.tintColor,
-                        vertical: true
+                        layout: .sideBarColumn
                     )
                     .environment(\.headerColor, headerColor)
                 }
@@ -142,19 +142,26 @@ struct SideBarButton: View {
     }
 }
 
-/// 48pt wide glass capsule grouping related controls, one item per 50pt.
+/// 48pt glass capsule grouping related controls, one item per 50pt: vertical in the side bar,
+/// horizontal on a header row.
 struct SideBarGroup<Content: View>: View {
     let headerColor: HeaderColor
     let itemCount: Int
+    var horizontal: Bool = false
     @ViewBuilder let content: () -> Content
 
     var body: some View {
-        VStack(spacing: 0) { content() }
-            .frame(
-                width: DuoMetrics.controlSize,
-                height: itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
-            )
-            .modifier(SideBarGlass(headerColor: headerColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
+        let length = itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
+        Group {
+            if horizontal {
+                HStack(spacing: 0) { content() }
+                    .frame(width: length, height: DuoMetrics.controlSize)
+            } else {
+                VStack(spacing: 0) { content() }
+                    .frame(width: DuoMetrics.controlSize, height: length)
+            }
+        }
+        .modifier(SideBarGlass(headerColor: headerColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
     }
 }
 

package/ios/Navigation/StackScreen.swift

@@ -618,24 +618,25 @@ private struct SearchAnimatedHeader: View {
         let minTop = rowTop + (layout.headerBarHeight - HEADER_HEIGHT) / 2
         let maxTop = layout.headerHeight - layout.insets.top
         let minSide = Spacing.M
-        let maxStart: CGFloat = hiddenBack || useSideBar ? Spacing.M : 48
-        let maxEnd: CGFloat = useSideBar && hasToolkit
+        // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+        let clearance = layout.statusBarClearance
+        let backWidth: CGFloat = clearance != nil && !useSideBar ? DuoMetrics.controlSize : 28
+        let maxStart = (clearance?.left ?? 0) + (hiddenBack || useSideBar ? Spacing.M : backWidth + Spacing.M + Spacing.S)
+        let maxEnd = (clearance?.right ?? 0) + (useSideBar && hasToolkit
             ? Spacing.M
-            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M)
+            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M))
 
         let top = min(max(maxTop - scroll, minTop), maxTop)
         let start = min(max(minSide + scroll, minSide), maxStart)
         let end = min(max(minSide + scroll, minSide), maxEnd)
 
-        VStack(spacing: 0) {
-            Spacer().frame(height: top)
-            InputSearch(props: headerSearchProps(props, scroll: scroll, layout: layout, theme: theme))
-                .frame(height: HEADER_HEIGHT)
-                .padding(.leading, start)
-                .padding(.trailing, end)
-            Spacer(minLength: 0)
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+        // padding, not a Spacer: on the iPhone Duo status bar row the collapsed top is above the safe area
+        InputSearch(props: headerSearchProps(props, scroll: scroll, layout: layout, theme: theme))
+            .frame(height: HEADER_HEIGHT)
+            .padding(.leading, start)
+            .padding(.trailing, end)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
     }
 }
 

package/ios-demo/README.md

@@ -0,0 +1,120 @@
+# MoMoUIKitsDemo
+
+SwiftUI demo browser for `MoMoUIKits`.
+
+The package can optionally host a Compose UIKits screen by receiving a
+`UIViewController` factory from the host app. It does not import the KMP
+`shared` module directly.
+
+SwiftUI mode reuses the full demo screen set from
+`sample/iosApp/iosApp/Demo`, including the sample `HomeView` registry and demo
+screens for all currently available components.
+
+## CocoaPods
+
+In the host app `Podfile`, include both local pods:
+
+```ruby
+pod 'MoMoUIKits', :path => '../momo-native-kits/ios/native-kits.podspec'
+pod 'MoMoUIKitsDemo', :path => '../momo-native-kits/ios-demo'
+```
+
+Adjust the relative paths to match the host app checkout.
+
+## Host App Usage
+
+```swift
+import MoMoUIKitsDemo
+import shared
+
+class UIKitsViewController: BaseComposeAppViewController {
+  override func getViewController() -> UIViewController? {
+    let params = self.application.data as? [String: Any]
+
+    return MoMoUIKitsDemoViewControllerFactory.make(
+      context: MoMoUIKitsDemoContext(
+        appId: params?["appId"] as? String ?? "",
+        appCode: params?["code"] as? String ?? "",
+        appName: params?["name"] as? String,
+        appIcon: params?["icon"] as? String ?? ""
+      ),
+      composeViewController: {
+        UIKitsScreenComposeViewControllerKt.UIKitsScreenComposeViewController(
+          params: params
+        )
+      }
+    )
+  }
+
+  override func viewDidDisappear(_ animated: Bool) {
+    super.viewDidDisappear(animated)
+    composeViewController = nil
+  }
+}
+```
+
+If the host does not pass `composeViewController`, the demo opens directly in
+SwiftUI mode.
+
+## Included SwiftUI Demos
+
+The pod includes the sample demo screens for:
+
+- Animated Header
+- Avatar
+- Badge
+- Baseline View
+- Bottom Tab
+- Button
+- Carousel
+- Checkbox
+- Chip
+- Collapse
+- DateTimePicker
+- Divider
+- Header User
+- Icon Button
+- Image
+- Information
+- Input
+- Input DropDown
+- Input Money
+- Input OTP
+- Input Phone Number
+- Input Search
+- Input TextArea
+- Loader
+- Navigation
+- Pagination
+- Popup Display
+- Popup Notify
+- Popup Promotion
+- Progress Info
+- Radio
+- Rating
+- Skeleton
+- Slider
+- SnackBar
+- Stepper
+- Steps
+- Suggest Action
+- Swipe
+- Switch
+- TabView
+- Tag
+- Theme
+- Title
+- Tooltip
+- Typography
+- Uploader
+
+## Validation Notes
+
+Validated locally with:
+
+```sh
+pod ipc spec ios/MoMoUIKits.podspec
+pod ipc spec ios-demo/MoMoUIKitsDemo.podspec
+pod lib lint ios/MoMoUIKits.podspec --allow-warnings --skip-import-validation
+pod lib lint ios-demo/MoMoUIKitsDemo.podspec --allow-warnings --skip-import-validation --include-podspecs=ios/MoMoUIKits.podspec
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.17",
+  "version": "0.167.1-duo.18-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/settings.gradle.kts

@@ -0,0 +1,64 @@
+import org.gradle.kotlin.dsl.maven
+
+rootProject.name = "momo-native-kits"
+enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
+
+pluginManagement {
+    repositories {
+        google {
+            mavenContent {
+                includeGroupAndSubgroups("androidx")
+                includeGroupAndSubgroups("com.android")
+                includeGroupAndSubgroups("com.google")
+            }
+        }
+        mavenCentral()
+        gradlePluginPortal()
+        maven {
+            url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
+            credentials {username = "download_packages"; password = "gldt-bjDqLpU_sPcHDuXau2ws" }
+        }
+        maven {
+            url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
+            credentials {
+                username = "viewer"
+                password = "viewer"
+            }
+            isAllowInsecureProtocol = true
+        }
+    }
+}
+
+dependencyResolutionManagement {
+    repositories {
+        google {
+            mavenContent {
+                includeGroupAndSubgroups("androidx")
+                includeGroupAndSubgroups("com.android")
+                includeGroupAndSubgroups("com.google")
+            }
+        }
+        mavenCentral()
+        maven { url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev") }
+        maven {
+            url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
+            credentials {
+                username = "download_packages";
+                password = "gldt-bjDqLpU_sPcHDuXau2ws"
+            }
+        }
+        maven {
+            url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
+            credentials {
+                username = "viewer"
+                password = "viewer"
+            }
+            isAllowInsecureProtocol = true
+        }
+    }
+}
+
+include(":compose")
+
+include(":sample:androidApp")
+include(":sample:shared")