@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

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

@@ -0,0 +1,215 @@
+//
+//  BottomTabBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTabBar` (navigation/bottomtab/BottomTabBar.kt).
+//  Renders the row of tab items, an animated selection indicator, a top shadow,
+//  badges/dots, and an optional center floating button (with the curved notch).
+//
+
+import SwiftUI
+
+// MARK: - Models
+
+/// Mirrors Compose's `BottomTabItem`.
+public struct BottomTabItem: Identifiable {
+    public let id = UUID()
+    public let name: String
+    public let label: String
+    public let icon: String
+    public let showDot: Bool
+    public let badgeLabel: String?
+    public let options: NavigationOptions?
+    public let screen: () -> AnyView
+
+    public init(
+        name: String,
+        label: String,
+        icon: String,
+        showDot: Bool = false,
+        badgeLabel: String? = nil,
+        options: NavigationOptions? = nil,
+        @ViewBuilder screen: @escaping () -> some View
+    ) {
+        self.name = name
+        self.label = label
+        self.icon = icon
+        self.showDot = showDot
+        self.badgeLabel = badgeLabel
+        self.options = options
+        self.screen = { AnyView(screen()) }
+    }
+}
+
+/// Mirrors Compose's `BottomTabFloatingButton`.
+public struct BottomTabFloatingButton {
+    public let icon: String
+    public let label: String
+    public let onPress: () -> Void
+
+    public init(icon: String, label: String, onPress: @escaping () -> Void) {
+        self.icon = icon
+        self.label = label
+        self.onPress = onPress
+    }
+}
+
+let bottomTabFloatingButtonWidth: CGFloat = 75
+let BOTTOM_TAB_BAR_HEIGHT: CGFloat = 64
+
+// MARK: - Tab bar
+
+struct BottomTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    private var mid: Int { items.count / 2 }
+
+    private var tabWidth: CGFloat {
+        if floatingButton != nil {
+            return (screenWidth - bottomTabFloatingButtonWidth) / CGFloat(items.count)
+        }
+        return screenWidth / CGFloat(items.count)
+    }
+
+    private var indicatorOffset: CGFloat {
+        let adjust: CGFloat = (floatingButton != nil && selectedIndex >= mid) ? bottomTabFloatingButtonWidth : 0
+        return tabWidth * CGFloat(selectedIndex) + tabWidth / 2 - screenWidth / 2 + adjust
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            HStack(spacing: 0) {
+                if floatingButton == nil {
+                    tabItems(from: 0, to: items.count)
+                } else {
+                    tabItems(from: 0, to: mid)
+                    Spacer()
+                        .frame(width: bottomTabFloatingButtonWidth)
+                        .padding(.horizontal, Spacing.XXS)
+                    tabItems(from: mid, to: items.count)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: BOTTOM_TAB_BAR_HEIGHT)
+            .background(Colors.black01)
+
+            // Animated selection indicator.
+            RoundedRectangle(cornerRadius: 2)
+                .fill(Colors.primary)
+                .frame(width: 44, height: 2)
+                .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
+                .animation(.easeInOut(duration: 0.25), value: selectedIndex)
+
+            // Top shadow.
+            LinearGradient(
+                colors: [Color.black.opacity(0.05), .clear],
+                startPoint: .bottom,
+                endPoint: .top
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: -BOTTOM_TAB_BAR_HEIGHT)
+
+            if let floatingButton {
+                CenterFloatingButton(data: floatingButton)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func tabItems(from: Int, to: Int) -> some View {
+        ForEach(from..<to, id: \.self) { index in
+            TabBarItem(
+                item: items[index],
+                selected: index == selectedIndex,
+                onClick: { onTabSelected(index) }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+// MARK: - Tab item
+
+private struct TabBarItem: View {
+    let item: BottomTabItem
+    let selected: Bool
+    let onClick: () -> Void
+
+    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+
+    /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
+    private var badgeLabel: String? {
+        guard let label = item.badgeLabel else { return nil }
+        if let n = Int(label), n == 0 { return nil }
+        return label
+    }
+
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                Icon(source: item.icon, size: 28, color: tintColor)
+                    .padding(Spacing.XS)
+                MomoText(
+                    item.label,
+                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                    color: tintColor,
+                    textAlign: .center,
+                    maxLines: 1
+                )
+                    .truncationMode(.tail)
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .padding(.horizontal, Spacing.S)
+            .padding(.vertical, Spacing.S)
+
+            if let badgeLabel {
+                if badgeLabel.isEmpty {
+                    BadgeDot(size: .small)
+                        .offset(x: -Spacing.S, y: Spacing.XS)
+                } else {
+                    Badge(label: badgeLabel)
+                        .offset(x: -Spacing.XS, y: 0)
+                }
+            } else if item.showDot {
+                BadgeDot(size: .small)
+                    .offset(x: -Spacing.S, y: Spacing.XS)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.XXS)
+        .contentShape(Rectangle())
+        .onTapGesture { onClick() }
+    }
+}
+
+// MARK: - Center floating button
+
+private struct CenterFloatingButton: View {
+    let data: BottomTabFloatingButton
+
+    var body: some View {
+        VStack(spacing: 0) {
+            CurvedContainer()
+            Circle()
+                .fill(Colors.primary)
+                .frame(width: 48, height: 48)
+                .overlay(Icon(source: data.icon, size: 28, color: .white))
+            Spacer().frame(height: 4)
+            MomoText(data.label, typography: .labelXsMedium, color: Colors.black01, textAlign: .center, maxLines: 1)
+                .frame(maxWidth: .infinity)
+                .frame(height: 14)
+                .background(Colors.primary)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .frame(width: bottomTabFloatingButtonWidth)
+        .padding(.horizontal, Spacing.XXS)
+        .padding(.vertical, Spacing.S)
+        .contentShape(Rectangle())
+        .onTapGesture { data.onPress() }
+    }
+}

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))
+    }
+}