@momo-kits/native-kits 0.163.1-beta.2-debug → 0.163.1-beta.20-debug

package/ios/Application/Navigation/BottomTab/CurvedContainer.swift

@@ -0,0 +1,65 @@
+//
+//  CurvedContainer.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `CurvedContainer` (navigation/bottomtab/CurvedContainer.kt).
+//  Draws the surface-colored notch that sits behind the center floating button,
+//  carving a circular cut-out into the tab bar's top edge.
+//
+
+import SwiftUI
+
+struct CurvedContainer: View {
+    var circleSize: CGFloat = 48
+    var tabBarItemIconSize: CGFloat = 28
+    var circleOverSize: CGFloat = 2
+    var width: CGFloat = 71
+    var height: CGFloat = 16
+    var color: Color = Colors.black01
+
+    var body: some View {
+        let circlePositionTop = circleSize - tabBarItemIconSize - 10
+        let circleOverTop = circlePositionTop + circleOverSize
+        let circleR = circleSize / 2
+        let circleOverR = circleR + circleOverSize
+        let centerX = width / 2
+
+        CurvedShape(circleOverTop: circleOverTop, centerX: centerX, circleOverR: circleOverR, width: width)
+            .fill(color)
+            .frame(width: width, height: height)
+            .offset(y: 24)
+            .zIndex(-1)
+    }
+}
+
+/// Mirrors Compose's `getPath`: a flat bar with a smooth circular dip in the
+/// middle, sized to cradle the floating button.
+private struct CurvedShape: Shape {
+    let circleOverTop: CGFloat
+    let centerX: CGFloat
+    let circleOverR: CGFloat
+    let width: CGFloat
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: circleOverTop))
+        path.addLine(to: CGPoint(x: centerX - circleOverR - 40, y: circleOverTop))
+
+        path.addCurve(
+            to: CGPoint(x: centerX, y: 0),
+            control1: CGPoint(x: centerX - circleOverR, y: circleOverTop),
+            control2: CGPoint(x: centerX - circleOverR, y: 0)
+        )
+        path.addCurve(
+            to: CGPoint(x: centerX + circleOverR + 40, y: circleOverTop),
+            control1: CGPoint(x: centerX + circleOverR, y: 0),
+            control2: CGPoint(x: centerX + circleOverR, y: circleOverTop)
+        )
+
+        path.addLine(to: CGPoint(x: width, y: circleOverTop))
+        path.addLine(to: CGPoint(x: width, y: 60))
+        path.addLine(to: CGPoint(x: 0, y: 60))
+        path.closeSubpath()
+        return path
+    }
+}

package/ios/Application/Navigation/HeaderBackProps.swift

@@ -0,0 +1,66 @@
+//
+//  HeaderBackProps.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderBackProps` + `PopupNotifyProps`/`PopupAction`.
+//  When `preventBack` is set, `Navigator.onBackSafe` shows a confirm popup
+//  before actually leaving the screen — same behavior as Compose.
+//
+
+import SwiftUI
+
+/// Mirrors Compose's `PopupAction` (a titled button with an optional handler).
+public struct PopupAction {
+    public let title: String
+    public let onPress: (() -> Void)?
+
+    public init(title: String, onPress: (() -> Void)? = nil) {
+        self.title = title
+        self.onPress = onPress
+    }
+}
+
+/// Mirrors Compose's `PopupNotifyProps` as consumed by `headerBackProps.preventBack`.
+public struct PreventBackProps {
+    public var image: String
+    public var title: String
+    public var description: String
+    public var error: String
+    public var primary: PopupAction?
+    public var secondary: PopupAction?
+    public var buttonDirection: PopupButtonDirection
+    public var isShowCloseIcon: Bool
+    public var onIconClose: (() -> Void)?
+
+    public init(
+        image: String = "",
+        title: String = "",
+        description: String = "",
+        error: String = "",
+        primary: PopupAction? = nil,
+        secondary: PopupAction? = nil,
+        buttonDirection: PopupButtonDirection = .row,
+        isShowCloseIcon: Bool = true,
+        onIconClose: (() -> Void)? = nil
+    ) {
+        self.image = image
+        self.title = title
+        self.description = description
+        self.error = error
+        self.primary = primary
+        self.secondary = secondary
+        self.buttonDirection = buttonDirection
+        self.isShowCloseIcon = isShowCloseIcon
+        self.onIconClose = onIconClose
+    }
+}
+
+/// Mirrors Compose's `HeaderBackProps`.
+public struct HeaderBackProps {
+    /// When non-nil, a confirm popup is shown before the back navigation runs.
+    public var preventBack: PreventBackProps?
+
+    public init(preventBack: PreventBackProps? = nil) {
+        self.preventBack = preventBack
+    }
+}

package/ios/Application/Navigation/HeaderTitle.swift

@@ -0,0 +1,57 @@
+//
+//  HeaderTitle.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `sealed class HeaderTitle` (navigation/component/Header.kt).
+//  The header can show either a plain title (`.default`) or a rich "user" title
+//  with an avatar group, subtitle, inline icons and a status dot (`.user`).
+//  (Compose's `Location`/`Journey` variants are not rendered yet, so they are
+//  omitted here for parity with the implemented `HeaderUser`.)
+//
+
+import SwiftUI
+
+/// Data backing a `.user` header title (mirrors `HeaderTitle.User`).
+public struct HeaderUserData {
+    public var title: String
+    public var subTitle: String?
+    public var image: [String]?
+    public var dotColor: Color?
+    public var tintColor: Color?
+    public var onPress: (() -> Void)?
+    public var icons: [String]
+    public var isLoading: Bool
+
+    public init(
+        title: String,
+        subTitle: String? = nil,
+        image: [String]? = nil,
+        dotColor: Color? = nil,
+        tintColor: Color? = nil,
+        onPress: (() -> Void)? = nil,
+        icons: [String] = [],
+        isLoading: Bool = false
+    ) {
+        self.title = title
+        self.subTitle = subTitle
+        self.image = image
+        self.dotColor = dotColor
+        self.tintColor = tintColor
+        self.onPress = onPress
+        self.icons = icons
+        self.isLoading = isLoading
+    }
+}
+
+/// Mirrors Compose's `HeaderTitle` sealed class.
+public enum HeaderTitle {
+    case `default`(String)
+    case user(HeaderUserData)
+
+    /// Plain title text, when this is a `.default` title (used by the legacy
+    /// string-based `Header`/`NavigationOptions` paths).
+    public var defaultTitle: String? {
+        if case let .default(text) = self { return text }
+        return nil
+    }
+}

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,203 @@
+//
+//  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)
+        .environment(\.localize, localize)
+        .fullScreenCover(item: $navigator.presented) { route in
+            screenView(forDialog: route)
+                .environmentObject(navigator)
+                .environmentObject(applicationEnvironment)
+                .environment(\.applicationEnvironment, applicationEnvironment)
+                .environmentObject(localize)
+                .environment(\.localize, localize)
+        }
+        .overlay {
+            if let item = navigator.overplay {
+                OverplayHost(item: item)
+                    .environmentObject(navigator)
+                    .environmentObject(applicationEnvironment)
+                    .environment(\.applicationEnvironment, applicationEnvironment)
+                    .environmentObject(localize)
+                    .environment(\.localize, 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
+}