@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Application/Navigation/HeaderUser.swift

@@ -0,0 +1,209 @@
+//
+//  HeaderUser.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderUser` (navigation/component/HeaderUser.kt).
+//  Renders a `HeaderTitle.User`: an avatar group (1..n avatars with overflow),
+//  a title with optional inline icons, and an optional subtitle. Shows a
+//  skeleton shimmer placeholder while `isLoading`.
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public struct HeaderUserView: View {
+    private let data: HeaderUserData
+
+    public init(_ data: HeaderUserData) {
+        self.data = data
+    }
+
+    private let avatarSize: CGFloat = Spacing.XXL // 32
+
+    private var maxWidth: CGFloat {
+        UIScreen.main.bounds.width - 172
+    }
+
+    public var body: some View {
+        if data.isLoading {
+            shimmer
+        } else {
+            content
+        }
+    }
+
+    private var content: some View {
+        HStack(spacing: 0) {
+            HStack(spacing: 0) {
+                ZStack(alignment: .bottomTrailing) {
+                    AvatarGroup(urls: data.image ?? [], title: data.title, size: avatarSize)
+                    if let dotColor = data.dotColor {
+                        Circle()
+                            .fill(dotColor)
+                            .frame(width: 10, height: 10)
+                    }
+                }
+                .frame(width: avatarSize, height: avatarSize)
+
+                Spacer().frame(width: 6)
+
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(spacing: 0) {
+                        MomoText(data.title, typography: .actionXsBold, color: data.tintColor ?? Colors.black17, maxLines: 1)
+                            .truncationMode(.tail)
+
+                        if !data.icons.isEmpty {
+                            Spacer().frame(width: 6)
+                            HStack(spacing: 0) {
+                                ForEach(Array(data.icons.enumerated()), id: \.offset) { _, icon in
+                                    ImageView(icon)
+                                        .frame(width: 16, height: 16)
+                                        .clipShape(RoundedRectangle(cornerRadius: 4))
+                                }
+                            }
+                        }
+                    }
+
+                    if let subTitle = data.subTitle, !subTitle.isEmpty {
+                        Spacer().frame(height: 2)
+                        MomoText(subTitle, typography: .descriptionXsRegular, color: data.tintColor ?? Colors.black17, maxLines: 1)
+                            .truncationMode(.tail)
+                    }
+                }
+            }
+            .frame(maxWidth: maxWidth, alignment: .leading)
+
+            Spacer(minLength: 0)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.vertical, Spacing.XS)
+        .contentShape(Rectangle())
+        .onTapGesture { data.onPress?() }
+        .allowsHitTesting(data.onPress != nil)
+    }
+
+    private var shimmer: some View {
+        HStack(spacing: Spacing.M / 2) {
+            Circle()
+                .fill(Colors.black05)
+                .frame(width: avatarSize, height: avatarSize)
+            VStack(alignment: .leading, spacing: Spacing.XXS) {
+                RoundedRectangle(cornerRadius: 8)
+                    .fill(Colors.black05)
+                    .frame(width: 120, height: 18)
+                RoundedRectangle(cornerRadius: 8)
+                    .fill(Colors.black05)
+                    .frame(width: 120, height: 12)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.vertical, Spacing.XS)
+    }
+}
+
+// MARK: - Avatar group
+
+/// Mirrors Compose's `AvatarGroup`: lays out 1..4 avatars in a fixed collage,
+/// falls back to initials when empty, and shows a "+n" overflow tile beyond 4.
+@available(iOS 16.0, *)
+private struct AvatarGroup: View {
+    let urls: [String]
+    let title: String
+    let size: CGFloat
+
+    private var child: CGFloat {
+        switch urls.count {
+        case 0, 1, 2: return 24
+        default: return 16
+        }
+    }
+
+    var body: some View {
+        switch urls.count {
+        case 0:
+            InitialsAvatar(name: title, size: size)
+        case 1:
+            avatar(urls[0]).frame(width: size, height: size)
+        case 2:
+            ZStack {
+                avatar(urls[0]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+                avatar(urls[1]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+            }
+            .frame(width: size, height: size)
+        case 3:
+            ZStack {
+                avatar(urls[0]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
+                avatar(urls[1]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+                avatar(urls[2]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+            }
+            .frame(width: size, height: size)
+            .padding(2)
+        case 4:
+            ZStack {
+                avatar(urls[0]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+                avatar(urls[1]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
+                avatar(urls[2]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+                avatar(urls[3]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+            }
+            .frame(width: size, height: size)
+            .padding(1)
+        default:
+            ZStack {
+                avatar(urls[0]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+                avatar(urls[1]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+                avatar(urls[2]).frame(width: child, height: child)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+                overflowTile(more: urls.count - 3)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
+            }
+            .frame(width: size, height: size)
+            .padding(1)
+        }
+    }
+
+    private func avatar(_ url: String) -> some View {
+        ImageView(url)
+            .aspectRatio(contentMode: .fill)
+            .clipShape(Circle())
+            .overlay(Circle().stroke(Colors.black05, lineWidth: 0.5))
+    }
+
+    private func overflowTile(more: Int) -> some View {
+        MomoText("+\(more)", typography: .descriptionXsRegular, color: Colors.pink03, textAlign: .center, maxLines: 1)
+            .frame(width: child, height: child)
+            .background(Colors.pink09)
+            .clipShape(Circle())
+    }
+}
+
+@available(iOS 16.0, *)
+private struct InitialsAvatar: View {
+    let name: String
+    let size: CGFloat
+
+    private var initials: String {
+        let words = name.trimmingCharacters(in: .whitespaces)
+            .split(whereSeparator: { $0.isWhitespace })
+            .suffix(2)
+        return words.compactMap { $0.first.map { String($0).uppercased() } }.joined()
+    }
+
+    var body: some View {
+        MomoText(initials, typography: .descriptionXsRegular, color: Colors.pink03, textAlign: .center, maxLines: 1)
+            .frame(width: size, height: size)
+            .background(Colors.pink09)
+            .clipShape(Circle())
+            .overlay(Circle().stroke(Colors.black05, lineWidth: 0.5))
+    }
+}

package/ios/Application/Navigation/NavigationContainer.swift

@@ -0,0 +1,200 @@
+//
+//  NavigationContainer.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's NavigationContainer.
+//  Wraps NavigationStack, injects Navigator into the environment, and renders
+//  every registered screen inside `Screen(options)` chrome — same auto-wrap
+//  behavior as Compose's StackScreen.
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public struct NavigationContainer<Initial: View>: View {
+    @StateObject private var navigator: Navigator
+    @StateObject private var applicationEnvironment: ApplicationEnvironment
+    @StateObject private var localize: Localize
+
+    private let setNavigator: ((Navigator) -> Void)?
+    private let composeApi: KitComposeApi?
+    private let maxApi: MaxApi?
+
+    public init(
+        initialScreenName: String = "",
+        @ViewBuilder initialScreen: @escaping () -> Initial,
+        options: NavigationOptions? = nil,
+        applicationContext: MiniAppContext? = nil,
+        composeApi: KitComposeApi? = nil,
+        config: KitConfig? = nil,
+        maxApi: MaxApi? = nil,
+        localize: Localize? = nil,
+        setNavigator: ((Navigator) -> Void)? = nil
+    ) {
+        let nav = Navigator(
+            initialScreenName: initialScreenName.isEmpty ? (options?.screenName ?? "") : initialScreenName,
+            initialContent: { AnyView(initialScreen()) },
+            options: options,
+            composeApi: composeApi
+        )
+        _navigator = StateObject(wrappedValue: nav)
+        _applicationEnvironment = StateObject(
+            wrappedValue: ApplicationEnvironment(
+                applicationContext: applicationContext,
+                composeApi: composeApi,
+                config: config,
+                maxApi: maxApi
+            )
+        )
+        _localize = StateObject(wrappedValue: localize ?? Localize())
+        self.composeApi = composeApi
+        self.maxApi = maxApi
+        self.setNavigator = setNavigator
+    }
+
+    public var body: some View {
+        NavigationStack(path: $navigator.path) {
+            screenView(for: navigator.rootRoute)
+                .navigationDestination(for: DynamicScreenRoute.self) { route in
+                    screenView(for: route)
+                }
+        }
+        .environmentObject(navigator)
+        .environmentObject(applicationEnvironment)
+        .environment(\.applicationEnvironment, applicationEnvironment)
+        .environmentObject(localize)
+        .fullScreenCover(item: $navigator.presented) { route in
+            screenView(forDialog: route)
+                .environmentObject(navigator)
+                .environmentObject(applicationEnvironment)
+                .environment(\.applicationEnvironment, applicationEnvironment)
+                .environmentObject(localize)
+        }
+        .overlay {
+            if let item = navigator.overplay {
+                OverplayHost(item: item)
+                    .environmentObject(navigator)
+                    .environmentObject(applicationEnvironment)
+                    .environment(\.applicationEnvironment, applicationEnvironment)
+                    .environmentObject(localize)
+            }
+        }
+        .onAppear {
+            if navigator.composeApi == nil {
+                navigator.composeApi = composeApi
+            }
+            setNavigator?(navigator)
+            // Mirrors Compose's LaunchedEffect(maxApi, resolvedLocalize): host-reported
+            // language wins over the default "vi" only when it resolves to English.
+            maxApi?.getLanguage { data in
+                if parseLanguage(data) == Localize.EN {
+                    localize.changeLanguage(Localize.EN)
+                }
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func screenView(for route: DynamicScreenRoute) -> some View {
+        if let screen = navigator.registry.getScreen(id: route.id) {
+            ScreenHost(screen: screen, navigator: navigator)
+                .navigationBarBackButtonHidden(true)
+        } else {
+            EmptyView()
+        }
+    }
+
+    @ViewBuilder
+    private func screenView(forDialog route: DynamicDialogRoute) -> some View {
+        if let screen = navigator.registry.getScreen(id: route.id) {
+            ScreenHost(screen: screen, navigator: navigator)
+        } else {
+            EmptyView()
+        }
+    }
+}
+
+// MARK: - ScreenHost
+
+@available(iOS 16.0, *)
+private struct ScreenHost: View {
+    let screen: DynamicScreen
+    let navigator: Navigator
+
+    var body: some View {
+        let options = screen.options ?? NavigationOptions()
+        StackScreen(
+            backgroundColor: options.backgroundColor,
+            headerTransparent: options.headerTransparent,
+            fullScreenContent: options.fullScreenContent,
+            tintColor: options.tintColor ?? Colors.black17,
+            isBack: !options.hiddenBack,
+            headerType: options.headerType,
+            useAnimated: options.useAnimated,
+            title: options.title,
+            headerTitle: options.headerTitle,
+            titlePosition: options.titlePosition,
+            goBack: options.hiddenBack ? nil : { navigator.onBackSafe() },
+            scrollable: options.scrollable,
+            scrollToTopCallback: options.scrollToTopCallback,
+            useAvoidKeyboard: options.useAvoidKeyboard,
+            keyboardShouldPersistTaps: options.keyboardShouldPersistTaps,
+            footer: options.footer,
+            headerRight: options.resolvedHeaderRight,
+            animatedHeader: options.animatedHeader,
+            layoutOffset: options.layoutOffset,
+            inputSearchProps: options.inputSearchProps,
+            fabProps: options.fabProps,
+            screenName: screen.name,
+            content: { screen.content() }
+        )
+    }
+}
+
+// MARK: - Overplay host
+
+@available(iOS 16.0, *)
+private struct OverplayHost: View {
+    let item: OverplayItem
+    @EnvironmentObject var navigator: Navigator
+
+    var body: some View {
+        // Each component self-animates on appear and drives its own exit through
+        // the Navigator before the item is removed (mirrors Compose's overplay).
+        switch item.type {
+        case .modal:
+            ModalScreen(barrierDismissible: item.barrierDismissible) {
+                item.content()
+            }
+            .id(item.id)
+        case .bottomSheet:
+            BottomSheetView(
+                header: item.header ?? .title(),
+                isSurface: item.isSurface,
+                barrierDismissible: item.barrierDismissible
+            ) {
+                item.content()
+            }
+            .id(item.id)
+        case .snackBar:
+            if let snackBar = item.snackBar {
+                SnackBarView(snackBar: snackBar, bottomInset: safeAreaBottomInset() + Spacing.S)
+                    .id(item.id)
+            }
+        }
+    }
+}
+
+/// Bottom safe-area inset (home indicator), used to lift the snack bar.
+@available(iOS 16.0, *)
+private func safeAreaBottomInset() -> CGFloat {
+    UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+}
+
+private func parseLanguage(_ raw: [String: Any?]?) -> String? {
+    guard let response = (raw?["response"] as? String)?.trimmingCharacters(in: .whitespaces).lowercased(),
+          !response.isEmpty else { return nil }
+    return response.hasPrefix(Localize.EN) ? Localize.EN : Localize.VI
+}

package/ios/Application/Navigation/NavigationOptions.swift

@@ -0,0 +1,109 @@
+//
+//  NavigationOptions.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's NavigationOptions.
+//  Each option lines up with a parameter on the existing `Screen` view,
+//  so NavigationContainer can auto-wrap a registered screen body in `Screen(options)`.
+//
+
+import SwiftUI
+
+public struct NavigationOptions {
+    public var screenName: String?
+    public var title: String
+    /// Rich header title (mirrors Compose's `headerTitle`). When set to `.user`
+    /// the header renders an avatar group instead of `title`; `.default` keeps
+    /// the plain `title` text.
+    public var headerTitle: HeaderTitle?
+    public var titlePosition: TitlePosition
+    public var headerType: HeaderType
+    /// Mirrors Compose's `HeaderType.Extended/Default(useAnimated = ...)`: when true
+    /// and `inputSearchProps` is set, the search bar animates into the header on scroll.
+    public var useAnimated: Bool
+    public var headerTransparent: Bool
+    public var fullScreenContent: Bool
+    public var hiddenBack: Bool
+    public var backgroundColor: Color?
+    public var tintColor: Color?
+    public var scrollable: Bool
+    /// Mirrors Compose's `ScrollData.scrollToTopCallback`: invoked when the
+    /// screen is asked to scroll to top (e.g. on a status-bar tap).
+    public var scrollToTopCallback: (() -> Void)?
+    public var useAvoidKeyboard: Bool
+    /// Mirrors Compose's `KeyboardOptions.keyboardShouldPersistTaps`: when true,
+    /// tapping anywhere on the screen dismisses the keyboard.
+    public var keyboardShouldPersistTaps: Bool
+    /// Mirrors Compose's `HeaderBackProps`: drives the prevent-back confirm popup.
+    public var headerBackProps: HeaderBackProps?
+    /// Typed toolkit data for the default header right control (mirrors
+    /// Compose's `HeaderRight.Toolkit`). Use `headerRight` for `.custom` and nil
+    /// for `.none`.
+    public var headerRightData: HeaderRightData?
+    public var headerRight: (() -> any View)?
+    public var footer: (() -> AnyView)?
+    public var animatedHeader: AnimatedHeader?
+    public var layoutOffset: CGFloat
+    public var inputSearchProps: InputSearchProps?
+    public var fabProps: FabProps?
+    public var onBackHandler: (() -> Void)?
+
+    public init(
+        screenName: String? = nil,
+        title: String = "Stack",
+        headerTitle: HeaderTitle? = nil,
+        titlePosition: TitlePosition = .left,
+        headerType: HeaderType = .default,
+        useAnimated: Bool = false,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false,
+        hiddenBack: Bool = false,
+        backgroundColor: Color? = nil,
+        tintColor: Color? = Colors.black17,
+        scrollable: Bool = true,
+        scrollToTopCallback: (() -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        keyboardShouldPersistTaps: Bool = false,
+        headerBackProps: HeaderBackProps? = nil,
+        headerRightData: HeaderRightData? = nil,
+        headerRight: (() -> any View)? = { HeaderRight() },
+        footer: (() -> AnyView)? = nil,
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        onBackHandler: (() -> Void)? = nil
+    ) {
+        self.screenName = screenName
+        self.title = title
+        self.headerTitle = headerTitle
+        self.titlePosition = titlePosition
+        self.headerType = headerType
+        self.useAnimated = useAnimated
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+        self.hiddenBack = hiddenBack
+        self.backgroundColor = backgroundColor
+        self.tintColor = tintColor
+        self.scrollable = scrollable
+        self.scrollToTopCallback = scrollToTopCallback
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.keyboardShouldPersistTaps = keyboardShouldPersistTaps
+        self.headerBackProps = headerBackProps
+        self.headerRightData = headerRightData
+        self.headerRight = headerRight
+        self.footer = footer
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.onBackHandler = onBackHandler
+    }
+}
+
+extension NavigationOptions {
+    var resolvedHeaderRight: (() -> any View)? {
+        guard let headerRightData else { return headerRight }
+        return { HeaderRight(headerRight: headerRightData, tintColor: tintColor) }
+    }
+}