@momo-kits/native-kits 0.162.2-beta.1 → 0.162.2-sp.1-debug

package/ios/Application/Navigation/Overplay/BottomSheet.swift

@@ -0,0 +1,176 @@
+//
+//  BottomSheet.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomSheet` (navigation/BottomSheet.kt).
+//  A sheet that slides up from the bottom over a dimmed scrim, with a drag
+//  handle, a header (title or custom), a divider and the content body.
+//  Dragging down past a threshold (or tapping the scrim) dismisses it.
+//  Driven by `Navigator.showBottomSheet`.
+//
+
+import SwiftUI
+
+// MARK: - Header model
+
+/// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
+public struct BottomSheetHeader {
+    enum Style {
+        case title(String)
+        case custom(() -> AnyView)
+    }
+
+    let style: Style
+
+    /// Mirrors `BottomHeader.Title`.
+    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text))
+    }
+
+    /// Mirrors `BottomHeader.Custom`.
+    public static func custom<V: View>(@ViewBuilder _ content: @escaping () -> V) -> BottomSheetHeader {
+        BottomSheetHeader(style: .custom({ AnyView(content()) }))
+    }
+}
+
+// MARK: - Bottom sheet view
+
+@available(iOS 16.0, *)
+struct BottomSheetView<Content: View>: View {
+    let header: BottomSheetHeader
+    let isSurface: Bool
+    let barrierDismissible: Bool
+    let content: () -> Content
+
+    @EnvironmentObject private var navigator: Navigator
+
+    /// Vertical translation of the sheet; starts off-screen and animates to 0.
+    @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
+    @State private var scrimAlpha: CGFloat = 0
+    @State private var sheetHeight: CGFloat = 0
+    @State private var didAppear = false
+
+    /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
+    private let closeThreshold: CGFloat = 100
+
+    private var screenHeight: CGFloat { UIScreen.main.bounds.height }
+
+    private var backgroundColor: Color {
+        // Compose uses background.surface (white) for `isSurface`, otherwise
+        // background.default. Both resolve to white in the current iOS palette.
+        isSurface ? Colors.black01 : Colors.black01
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            // Dimmed scrim (max 0.3 alpha, mirrors Compose).
+            Color.black.opacity(scrimAlpha)
+                .ignoresSafeArea()
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if barrierDismissible { close() }
+                }
+
+            sheet
+                .offset(y: sheetOffset)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            navigator.registerOverplayDismiss { close() }
+            open()
+        }
+    }
+
+    private var sheet: some View {
+        VStack(spacing: 0) {
+            // Drag handle + header (the draggable region).
+            VStack(spacing: 0) {
+                Spacer().frame(height: 8)
+                Capsule()
+                    .fill(Colors.black06)
+                    .frame(width: 40, height: 4)
+                Spacer().frame(height: 4)
+                headerView
+                    .frame(height: 56)
+                    .padding(.horizontal, Spacing.M)
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: 72)
+            .contentShape(Rectangle())
+            .gesture(dragGesture)
+
+            Rectangle()
+                .fill(Colors.black04)
+                .frame(height: 1)
+
+            content()
+        }
+        .frame(maxWidth: .infinity)
+        .frame(maxHeight: screenHeight - safeAreaTopInset() - 90, alignment: .bottom)
+        .background(
+            GeometryReader { geo in
+                Color.clear.onAppear { sheetHeight = geo.size.height }
+            }
+        )
+        .background(backgroundColor)
+        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+    }
+
+    @ViewBuilder
+    private var headerView: some View {
+        switch header.style {
+        case .title(let text):
+            HStack(spacing: 0) {
+                Color.clear.frame(width: 24, height: 24)
+                MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
+                    .frame(maxWidth: .infinity, alignment: .center)
+                Icon(source: "navigation_close", size: 24, color: Colors.black17)
+                    .frame(width: 24, height: 24)
+                    .contentShape(Rectangle())
+                    .onTapGesture { close() }
+            }
+        case .custom(let builder):
+            builder()
+        }
+    }
+
+    // MARK: - Drag handling (mirrors Compose's detectDragGestures)
+
+    private var dragGesture: some Gesture {
+        DragGesture()
+            .onChanged { value in
+                let newOffset = max(value.translation.height, 0)
+                sheetOffset = newOffset
+            }
+            .onEnded { _ in
+                if sheetOffset > closeThreshold {
+                    close()
+                } else {
+                    withAnimation(.spring(response: 0.3, dampingFraction: 0.9)) {
+                        sheetOffset = 0
+                    }
+                }
+            }
+    }
+
+    // MARK: - Open / close animations
+
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.easeOut(duration: 0.1)) { scrimAlpha = 0.3 }
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.35)) { sheetOffset = 0 }
+        }
+    }
+
+    private func close() {
+        withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
+            sheetOffset = max(sheetHeight, screenHeight)
+            scrimAlpha = 0
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+}

package/ios/Application/Navigation/Overplay/ModalScreen.swift

@@ -0,0 +1,68 @@
+//
+//  ModalScreen.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `ModalScreen` (navigation/ModalScreen.kt).
+//  A centered overlay that fades + scales in over a dimmed scrim, and animates
+//  back out before the overplay is removed. Driven by `Navigator.showModal`.
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct ModalScreen<Content: View>: View {
+    let barrierDismissible: Bool
+    let content: () -> Content
+
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var scrimOpacity: CGFloat = 0
+    @State private var contentScale: CGFloat = 0.8
+    @State private var contentOpacity: CGFloat = 0
+    @State private var didAppear = false
+
+    var body: some View {
+        ZStack {
+            // Dimmed scrim (mirrors `Color.Black.copy(alpha = 0.6f * alpha)`).
+            Color.black.opacity(0.6 * scrimOpacity)
+                .ignoresSafeArea()
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if barrierDismissible { navigator.hideOverplay() }
+                }
+
+            content()
+                .scaleEffect(contentScale)
+                .opacity(contentOpacity)
+        }
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            navigator.registerOverplayDismiss { close() }
+            open()
+        }
+    }
+
+    // Mirrors Compose's `openEvent`: 250ms fade + scale to 1.
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.easeOut(duration: 0.25)) {
+                scrimOpacity = 1
+                contentScale = 1
+                contentOpacity = 1
+            }
+        }
+    }
+
+    // Mirrors Compose's `closeEvent`: 200ms fade + scale back to 0.8, then remove.
+    private func close() {
+        withAnimation(.easeIn(duration: 0.2)) {
+            scrimOpacity = 0
+            contentScale = 0.8
+            contentOpacity = 0
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+}

package/ios/Application/Navigation/Overplay/SnackBar.swift

@@ -0,0 +1,144 @@
+//
+//  SnackBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `SnackBar` (navigation/component/SnackBar.kt).
+//  A snack bar slides up from the bottom (just above the footer / home
+//  indicator), stays for `duration`, then slides back down and is removed.
+//  `Navigator.showSnackBar(_:)` drives it through the overplay host.
+//
+
+import Foundation
+import SwiftUI
+
+// MARK: - SnackBar model
+
+/// Mirrors Compose's `sealed class SnackBar` (Custom / Toast). A `nil` duration
+/// keeps the snack bar on screen until dismissed manually.
+public struct SnackBar {
+    public enum Style {
+        case custom
+        case toast
+    }
+
+    public let style: Style
+    public let duration: TimeInterval?
+    public let content: (() -> AnyView)?
+
+    private init(style: Style, duration: TimeInterval?, content: (() -> AnyView)?) {
+        self.style = style
+        self.duration = duration
+        self.content = content
+    }
+
+    /// Mirrors `SnackBar.Custom`: renders arbitrary content.
+    public static func custom<V: View>(
+        duration: TimeInterval? = 3.0,
+        @ViewBuilder content: @escaping () -> V
+    ) -> SnackBar {
+        SnackBar(style: .custom, duration: duration, content: { AnyView(content()) })
+    }
+
+    /// Mirrors `SnackBar.Toast`: a placeholder with no custom content (parity with
+    /// Compose where `Toast` currently renders nothing).
+    public static func toast(duration: TimeInterval? = 3.0) -> SnackBar {
+        SnackBar(style: .toast, duration: duration, content: nil)
+    }
+}
+
+// MARK: - SnackBar host view
+
+/// Self-animating container. Slides the content up on appear, schedules an
+/// auto-dismiss after `duration`, and animates out before removing the overplay.
+@available(iOS 16.0, *)
+struct SnackBarView: View {
+    let snackBar: SnackBar
+    /// Bottom inset so the bar sits above the footer / home indicator
+    /// (mirrors Compose's `footerHeight` offset).
+    let bottomInset: CGFloat
+
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var contentHeight: CGFloat = 0
+    @State private var offsetY: CGFloat = 0
+    @State private var didAppear = false
+    @State private var isClosing = false
+    @State private var autoDismissWorkItem: DispatchWorkItem?
+
+    var body: some View {
+        VStack(spacing: 0) {
+            Spacer(minLength: 0)
+            content
+                .background(
+                    GeometryReader { geo in
+                        Color.clear.onAppear { contentHeight = geo.size.height }
+                    }
+                )
+                .offset(y: offsetY)
+                .padding(.bottom, bottomInset)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            offsetY = max(contentHeight, 200) + bottomInset
+            open()
+            registerClose()
+            scheduleAutoDismiss()
+        }
+        .onDisappear {
+            autoDismissWorkItem?.cancel()
+            autoDismissWorkItem = nil
+        }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        switch snackBar.style {
+        case .custom:
+            snackBar.content?()
+        case .toast:
+            EmptyView()
+        }
+    }
+
+    // Mirrors Compose's `openEvent`: 350ms slide up.
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.easeOut(duration: 0.35)) {
+                offsetY = 0
+            }
+        }
+    }
+
+    // Animated slide down, then remove (mirrors Compose's `closeEvent`/`hideSnackBar`).
+    private func close() {
+        guard !isClosing else { return }
+        isClosing = true
+        autoDismissWorkItem?.cancel()
+        autoDismissWorkItem = nil
+
+        withAnimation(.easeIn(duration: 0.2)) {
+            offsetY = max(contentHeight, 200) + bottomInset
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+
+    private func registerClose() {
+        navigator.registerOverplayDismiss { close() }
+    }
+
+    private func scheduleAutoDismiss() {
+        guard let duration = snackBar.duration else { return }
+        let workItem = DispatchWorkItem {
+            // Only auto-dismiss if this snack bar is still the active overplay.
+            if navigator.overplay?.type == .snackBar {
+                navigator.hideSnackBar()
+            }
+        }
+        autoDismissWorkItem = workItem
+        DispatchQueue.main.asyncAfter(deadline: .now() + duration, execute: workItem)
+    }
+}

package/ios/Application/Navigation/component/Header.swift

@@ -0,0 +1,178 @@
+//
+//  Header.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `Header` (navigation/component/Header.kt).
+//  Renders the 52pt header bar: a circular back button (colors resolved via
+//  `getHeaderColor`), the title area (`HeaderContent` → plain title, user title
+//  or inline search), the header-right toolkit, and a scroll-triggered bottom
+//  shadow. The header band background itself is painted by `HeaderBackground`.
+//
+//  Named `NavigationHeader` to coexist with the legacy `Header` in
+//  `Components.swift` (kept as-is, used as a package elsewhere; to be marked
+//  deprecated later). Used by the new `StackScreen` navigation path.
+//
+
+import SwiftUI
+
+public struct NavigationHeader: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    /// Optional rich title (mirrors Compose's `HeaderTitle`); `.user` renders an
+    /// avatar group, `.default`/nil renders plain `title`.
+    var headerTitle: HeaderTitle?
+    var headerRight: (() -> any View)? = { HeaderRight() }
+    var goBack: (() -> Void)?
+    var opacity: CGFloat = 1
+    var animatedHeader: AnimatedHeader?
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps?
+    var tintColor: Color?
+    /// Title opacity; used by the animated search header to fade the title out on scroll.
+    var titleOpacity: CGFloat = 1
+
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerTitle: HeaderTitle? = nil,
+        headerRight: (() -> any View)? = { HeaderRight() },
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat = 1,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil,
+        titleOpacity: CGFloat = 1
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerTitle = headerTitle
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
+        self.titleOpacity = titleOpacity
+    }
+
+    private var isAnimated: Bool { animatedHeader != nil }
+    private var isSurface: Bool { animatedHeader?.isSurface ?? true }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(isAnimated: isAnimated, isSurface: isSurface, opacity: opacity, tintColor: tintColor)
+    }
+
+    /// Centered title needs a full-width overlay to stay screen-centered, not
+    /// boxed between the back button and the header-right (mirrors Compose).
+    private var centerTitle: Bool {
+        guard inputSearchProps == nil else { return false }
+        let isDefault = headerTitle == nil || headerTitle?.defaultTitle != nil
+        return titlePosition == .center && isDefault
+    }
+
+    public var body: some View {
+        if headerType != .none {
+            ZStack {
+                HStack(spacing: 0) {
+                    if let goBack {
+                        BackButton(color: headerColor, onBack: goBack)
+                        Spacer().frame(width: Spacing.S)
+                    }
+
+                    if centerTitle {
+                        Spacer()
+                    } else {
+                        titleArea(centered: false)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                    }
+
+                    if let headerRight {
+                        AnyView(headerRight())
+                            .background(
+                                GeometryReader { geo in
+                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                                }
+                            )
+                    }
+                }
+                .padding(.horizontal, Spacing.M)
+
+                if centerTitle {
+                    titleArea(centered: true)
+                        .padding(.horizontal, Spacing.M)
+                }
+            }
+            .frame(height: HEADER_HEIGHT)
+            .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
+        }
+    }
+
+    /// Mirrors Compose's `HeaderContent`: plain title, user title, or — when a
+    /// header search is active — the inline search field.
+    @ViewBuilder
+    private func titleArea(centered: Bool) -> some View {
+        if let inputSearchProps {
+            InputSearch(props: inputSearchProps)
+        } else if case let .user(userData)? = headerTitle {
+            if #available(iOS 16.0, *) {
+                HeaderUserView(userData)
+            }
+        } else {
+            MomoText(
+                headerTitle?.defaultTitle ?? title,
+                typography: .actionSBold,
+                color: headerColor.tintIconColor,
+                textAlign: centered ? .center : .leading,
+                maxLines: 1
+            )
+                .opacity(titleOpacity)
+                .truncationMode(.tail)
+                .frame(maxWidth: centered ? .infinity : nil, alignment: centered ? .center : .leading)
+        }
+    }
+}
+
+// MARK: - Back button
+
+/// Mirrors Compose's `BackButton`: a 28pt circular control with the back arrow.
+private struct BackButton: View {
+    let color: HeaderColor
+    let onBack: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onBack) {
+            Circle()
+                .fill(color.backgroundButton)
+                .overlay(Circle().stroke(color.borderColor, lineWidth: 0.2))
+                .frame(width: 28, height: 28)
+                .overlay(Icon(source: "arrow-back", size: 20, color: color.tintIconColor))
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+// MARK: - Vertical shadow
+
+/// Mirrors Compose's `VerticalShadow`: a 6pt drop shadow under the header that
+/// only appears once the header is fully opaque (scrolled).
+private struct VerticalShadow: View {
+    let opacity: CGFloat
+
+    var body: some View {
+        if opacity >= 1 {
+            LinearGradient(
+                gradient: Gradient(colors: [Color.black.opacity(0.05), .clear]),
+                startPoint: .top,
+                endPoint: .bottom
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: 6)
+        }
+    }
+}

package/ios/Application/Navigation/component/HeaderBackground.swift

@@ -0,0 +1,83 @@
+//
+//  HeaderBackground.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderBackground` (navigation/component/HeaderBackground.kt).
+//  Paints the header band behind the `Header`: a flat surface for `.default`,
+//  the taller pink gradient for `.extended`, fading out as the screen scrolls.
+//  Stays transparent when the header is transparent or the content is full-screen.
+//
+//  Named `NavigationHeaderBackground` to coexist with the legacy
+//  `HeaderBackground` in `Components.swift` (kept as-is, used as a package
+//  elsewhere; to be marked deprecated later). Used by the new `StackScreen`.
+//
+
+import SwiftUI
+
+public struct NavigationHeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+    }
+
+    private func pinkGradient(topColor: Color, bottomColor: Color) -> LinearGradient {
+        LinearGradient(
+            gradient: Gradient(colors: [
+                topColor,
+                bottomColor
+            ]),
+            startPoint: .top,
+            endPoint: .bottom
+        )
+    }
+
+    public var body: some View {
+        let statusBarHeight = safeAreaTopInset()
+        let opacity = max(0, 1 - scrollState / CGFloat(HEADER_HEIGHT))
+        let minHeight = fullScreenContent ? 0 : statusBarHeight + HEADER_HEIGHT
+        let maxHeight: CGFloat = 154
+        let backgroundColor = headerTransparent ? Color.clear : Colors.black01
+        let topColor = opacity == 0 ? backgroundColor : Color(hex: 0xFDCADE)
+
+        Group {
+            switch headerType {
+            case .default:
+                ZStack(alignment: .bottom) {
+                    backgroundColor
+                        .frame(height: minHeight)
+                    if !headerTransparent {
+                        pinkGradient(topColor: topColor, bottomColor: backgroundColor)
+                            .frame(height: maxHeight)
+                            .frame(height: minHeight, alignment: .top)
+                            .clipped()
+                    }
+                }
+
+            case .extended:
+                ZStack {
+                    if !headerTransparent {
+                        backgroundColor
+                            .frame(height: maxHeight)
+                        pinkGradient(topColor: topColor, bottomColor: backgroundColor)
+                            .frame(height: maxHeight)
+                    }
+                }
+
+            case .none:
+                EmptyView()
+            }
+        }
+    }
+}