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

package/ios/Navigation/StackTransition.swift

@@ -0,0 +1,400 @@
+//
+//  StackTransition.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/StackTransition.kt` (a 1:1 port of the RN kit's
+//  `forStackTransitionWithOverlay`) and of the NavHost it decorates. Every stack entry lives in
+//  its own UIHostingController, kept while the entry is on the stack and taken out of the window
+//  while covered, as UINavigationController does: a covered screen keeps its state, stops
+//  rendering and gets onDisappear / onAppear. The motion itself is drawn in SwiftUI, because an
+//  `offset` never moves the safe area the way a UIKit transform would.
+//
+
+import SwiftUI
+import UIKit
+
+let STACK_TRANSITION_DURATION: TimeInterval = 0.3
+
+private let PARALLAX_RATIO: CGFloat = 0.3
+private let SCRIM_MAX_ALPHA: CGFloat = 0.6
+private let EDGE_SHADOW_MAX_ALPHA: CGFloat = 0.3
+private let EDGE_SHADOW_WIDTH: CGFloat = 8
+
+// MARK: - Host
+
+/// The stack view behind `NavigationContainer`. `screen` builds an entry's content once;
+/// `decorate` re-applies the kit environment on every update.
+struct StackHost: UIViewControllerRepresentable {
+    let navigator: Navigator
+    let entries: [StackEntry]
+    let screen: (StackEntry) -> AnyView
+    let decorate: (AnyView) -> AnyView
+
+    func makeUIViewController(context: Context) -> StackController {
+        let controller = StackController()
+        navigator.stackController = controller
+        return controller
+    }
+
+    func updateUIViewController(_ controller: StackController, context: Context) {
+        controller.update(
+            entries: entries,
+            environment: context.environment,
+            screen: screen,
+            decorate: decorate
+        )
+    }
+}
+
+// MARK: - Controller
+
+final class StackController: UIViewController {
+    private final class Card {
+        let entry: StackEntry
+        let motion = CardMotion()
+        var host: UIHostingController<AnyView>!
+
+        init(entry: StackEntry) {
+            self.entry = entry
+        }
+    }
+
+    /// One push or pop between two cards. `coverage` is how far `top` covers `under`: 1 in place,
+    /// 0 gone. Push plays 0 → 1, pop 1 → 0; a host gesture sets it straight from the finger.
+    private final class Transition {
+        enum Kind { case slide, rise }
+
+        let kind: Kind
+        let top: Card
+        let under: Card
+        let isSeek: Bool
+        var coverage: CGFloat
+        var from: CGFloat = 0
+        var target: CGFloat = 0
+        var duration: TimeInterval = 0
+        var startTime: CFTimeInterval?
+        var isAnimating = false
+
+        init(kind: Kind, top: Card, under: Card, isSeek: Bool = false, coverage: CGFloat) {
+            self.kind = kind
+            self.top = top
+            self.under = under
+            self.isSeek = isSeek
+            self.coverage = coverage
+        }
+    }
+
+    private var entries: [StackEntry] = []
+    private var cards: [Int: Card] = [:]
+    private var transition: Transition?
+    private var displayLink: CADisplayLink?
+    private var environment = EnvironmentValues()
+    private var screen: (StackEntry) -> AnyView = { _ in AnyView(EmptyView()) }
+    private var decorate: (AnyView) -> AnyView = { $0 }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        view.backgroundColor = .clear
+        view.clipsToBounds = true
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        for subview in view.subviews { subview.frame = view.bounds }
+    }
+
+    override func viewDidDisappear(_ animated: Bool) {
+        super.viewDidDisappear(animated)
+        settle()
+    }
+
+    func update(
+        entries new: [StackEntry],
+        environment: EnvironmentValues,
+        screen: @escaping (StackEntry) -> AnyView,
+        decorate: @escaping (AnyView) -> AnyView
+    ) {
+        self.environment = environment
+        self.screen = screen
+        self.decorate = decorate
+        for card in cards.values { card.host.rootView = rootView(for: card) }
+        guard new != entries else { return }
+
+        settle()
+        let old = entries
+        let oldTop = old.last.flatMap { cards[$0.id] }
+        entries = new
+
+        let live = Set(new.map(\.id))
+        for (id, card) in cards where !live.contains(id) {
+            cards[id] = nil
+            // the old top may still have to animate out
+            if card !== oldTop { tearDown(card) }
+        }
+        for entry in new where cards[entry.id] == nil {
+            cards[entry.id] = makeCard(entry)
+        }
+        guard let newTop = new.last.flatMap({ cards[$0.id] }) else { return }
+        guard let oldTop, oldTop !== newTop else {
+            if oldTop == nil { attach(newTop) }
+            return
+        }
+
+        let isPush = !old.contains(newTop.entry)
+        guard view.window != nil, isPush || !live.contains(oldTop.entry.id) else {
+            attach(newTop)
+            leave(oldTop)
+            return
+        }
+        if isPush {
+            let kind: Transition.Kind = newTop.entry.isDialog ? .rise : .slide
+            play(Transition(kind: kind, top: newTop, under: oldTop, coverage: 0), to: 1)
+        } else {
+            // closing a presented flow slides it down whole, whatever was pushed inside it
+            let closesPresented = old.drop(while: { $0 != newTop.entry }).dropFirst().contains(where: \.isDialog)
+            play(Transition(kind: closesPresented ? .rise : .slide, top: oldTop, under: newTop, coverage: 1), to: 0)
+        }
+    }
+
+    // MARK: Host back gesture
+
+    func beginBackSeek() -> Bool {
+        settle()
+        guard view.window != nil, entries.count > 1,
+              let top = cards[entries[entries.count - 1].id], !top.entry.isDialog,
+              let under = cards[entries[entries.count - 2].id] else { return false }
+        let transition = Transition(kind: .slide, top: top, under: under, isSeek: true, coverage: 1)
+        self.transition = transition
+        view.isUserInteractionEnabled = false
+        attach(under, below: top)
+        apply(transition)
+        return true
+    }
+
+    func seekBack(to progress: CGFloat) {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return }
+        transition.coverage = 1 - progress
+        apply(transition)
+    }
+
+    /// Commits the pop here; the navigator drops the same entry right after.
+    func finishBackSeek() -> Bool {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return false }
+        entries.removeLast()
+        cards[transition.top.entry.id] = nil
+        animate(transition, to: 0)
+        return true
+    }
+
+    func cancelBackSeek() {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return }
+        animate(transition, to: 1)
+    }
+
+    // MARK: Transitions
+
+    private func play(_ transition: Transition, to target: CGFloat) {
+        self.transition = transition
+        view.isUserInteractionEnabled = false
+        if transition.top.host.view.superview !== view { attach(transition.top) }
+        attach(transition.under, below: transition.top)
+        apply(transition)
+        animate(transition, to: target)
+    }
+
+    /// The rest of the way plays at full-transition pace, so a released drag keeps its speed.
+    private func animate(_ transition: Transition, to target: CGFloat) {
+        transition.from = transition.coverage
+        transition.target = target
+        transition.duration = STACK_TRANSITION_DURATION * Double(abs(target - transition.coverage))
+        transition.startTime = nil
+        transition.isAnimating = true
+        guard transition.duration > 0 else {
+            finish(transition)
+            return
+        }
+        startDisplayLink()
+    }
+
+    @objc private func tick(_ link: CADisplayLink) {
+        guard let transition, transition.isAnimating else {
+            stopDisplayLink()
+            return
+        }
+        // the clock starts on the first frame, so a heavy first layout doesn't eat the motion
+        let start = transition.startTime ?? link.targetTimestamp
+        transition.startTime = start
+        let fraction = min(max((link.targetTimestamp - start) / transition.duration, 0), 1)
+        // linear for the stack: the gesture maps the finger straight onto this timeline
+        let eased = transition.kind == .rise ? fastOutSlowIn(CGFloat(fraction)) : CGFloat(fraction)
+        transition.coverage = fraction >= 1
+            ? transition.target
+            : transition.from + (transition.target - transition.from) * eased
+        apply(transition)
+        if fraction >= 1 { finish(transition) }
+    }
+
+    /// Jumps a running transition to its end; an unreleased drag snaps back.
+    private func settle() {
+        guard let transition else { return }
+        if transition.isSeek, !transition.isAnimating { transition.target = 1 }
+        transition.coverage = transition.target
+        apply(transition)
+        finish(transition)
+    }
+
+    private func finish(_ transition: Transition) {
+        transition.isAnimating = false
+        if self.transition === transition { self.transition = nil }
+        stopDisplayLink()
+        view.isUserInteractionEnabled = true
+        transition.top.motion.state = CardMotion.State()
+        transition.under.motion.state = CardMotion.State()
+        leave(transition.target >= 1 ? transition.under : transition.top)
+    }
+
+    private func apply(_ transition: Transition) {
+        let size = view.bounds.size
+        let coverage = transition.coverage
+        switch transition.kind {
+        case .slide:
+            transition.top.motion.state = CardMotion.State(
+                offset: CGSize(width: (1 - coverage) * size.width, height: 0),
+                shadow: EDGE_SHADOW_MAX_ALPHA * coverage
+            )
+            transition.under.motion.state = CardMotion.State(
+                offset: CGSize(width: -PARALLAX_RATIO * size.width * coverage, height: 0),
+                scrim: SCRIM_MAX_ALPHA * coverage
+            )
+        case .rise:
+            transition.top.motion.state = CardMotion.State(offset: CGSize(width: 0, height: (1 - coverage) * size.height))
+        }
+    }
+
+    private func startDisplayLink() {
+        guard displayLink == nil else { return }
+        let link = CADisplayLink(target: self, selector: #selector(tick))
+        link.preferredFrameRateRange = CAFrameRateRange(minimum: 60, maximum: 120, preferred: 120)
+        link.add(to: .main, forMode: .common)
+        displayLink = link
+    }
+
+    private func stopDisplayLink() {
+        displayLink?.invalidate()
+        displayLink = nil
+    }
+
+    // MARK: Cards
+
+    private func makeCard(_ entry: StackEntry) -> Card {
+        let card = Card(entry: entry)
+        let host = UIHostingController(rootView: rootView(for: card))
+        host.view.backgroundColor = .clear
+        addChild(host)
+        host.didMove(toParent: self)
+        card.host = host
+        return card
+    }
+
+    /// The card's own environment is the container's (host environment objects included), with
+    /// the kit's re-applied on top; the screen itself is built once and never re-run from here.
+    private func rootView(for card: Card) -> AnyView {
+        let entry = card.entry
+        let screen = screen
+        let content = StackCard(motion: card.motion) {
+            StackCardContent(id: entry.id) { screen(entry) }.equatable()
+        }
+        return AnyView(decorate(AnyView(content)).environment(\.self, environment))
+    }
+
+    private func attach(_ card: Card, below other: Card? = nil) {
+        let hostView: UIView = card.host.view
+        hostView.frame = view.bounds
+        if let other, other.host.view.superview === view {
+            view.insertSubview(hostView, belowSubview: other.host.view)
+        } else {
+            view.addSubview(hostView)
+        }
+    }
+
+    /// Off the window while covered, released once off the stack.
+    private func leave(_ card: Card) {
+        if cards[card.entry.id] === card {
+            card.host.view.removeFromSuperview()
+        } else {
+            tearDown(card)
+        }
+    }
+
+    private func tearDown(_ card: Card) {
+        card.host.willMove(toParent: nil)
+        card.host.view.removeFromSuperview()
+        card.host.removeFromParent()
+    }
+}
+
+// MARK: - Card
+
+final class CardMotion: ObservableObject {
+    struct State: Equatable {
+        var offset: CGSize = .zero
+        var scrim: CGFloat = 0
+        var shadow: CGFloat = 0
+    }
+
+    @Published var state = State()
+}
+
+/// Compose's `StackTransitionDecor`: the covered-screen scrim and the top card's left-edge shadow.
+private struct StackCard<Content: View>: View {
+    @ObservedObject var motion: CardMotion
+    let content: Content
+
+    init(motion: CardMotion, @ViewBuilder content: () -> Content) {
+        self.motion = motion
+        self.content = content()
+    }
+
+    var body: some View {
+        let state = motion.state
+        content
+            .overlay {
+                Colors.pink09.opacity(state.scrim)
+                    .ignoresSafeArea()
+                    .allowsHitTesting(false)
+            }
+            .background(alignment: .leading) {
+                LinearGradient(colors: [.clear, Colors.black20], startPoint: .leading, endPoint: .trailing)
+                    .frame(width: EDGE_SHADOW_WIDTH)
+                    .offset(x: -EDGE_SHADOW_WIDTH)
+                    .opacity(state.shadow)
+                    .ignoresSafeArea()
+                    .allowsHitTesting(false)
+            }
+            .offset(state.offset)
+    }
+}
+
+/// Equal by entry, so a motion frame or a root refresh never re-runs the screen body.
+private struct StackCardContent: View, Equatable {
+    let id: Int
+    let build: () -> AnyView
+
+    static func == (lhs: Self, rhs: Self) -> Bool { lhs.id == rhs.id }
+
+    var body: some View { build() }
+}
+
+/// Compose's `FastOutSlowInEasing`, cubic-bezier(0.4, 0, 0.2, 1).
+private func fastOutSlowIn(_ t: CGFloat) -> CGFloat {
+    func bezier(_ s: CGFloat, _ p1: CGFloat, _ p2: CGFloat) -> CGFloat {
+        3 * (1 - s) * (1 - s) * s * p1 + 3 * (1 - s) * s * s * p2 + s * s * s
+    }
+    var low: CGFloat = 0
+    var high: CGFloat = 1
+    for _ in 0..<20 {
+        let mid = (low + high) / 2
+        if bezier(mid, 0.4, 0.2) < t { low = mid } else { high = mid }
+    }
+    return bezier((low + high) / 2, 0, 1)
+}

package/ios/Navigation/SwipeBackHaptic.swift

@@ -0,0 +1,33 @@
+//
+//  SwipeBackHaptic.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/SwipeBackHaptic.kt`: one light tick when the host back
+//  gesture has dragged the screen 50pt, re-armed once it goes back under.
+//
+
+import UIKit
+
+struct SwipeBackHaptic {
+    // Unscaled, so the tick lands at the same physical distance on every device.
+    private static let threshold: CGFloat = 50
+
+    private var fired = false
+
+    mutating func update(travelled: CGFloat, maxApi: MaxApi?) {
+        if travelled >= Self.threshold, !fired {
+            fired = true
+            if let maxApi {
+                maxApi.triggerEventVibration("light")
+            } else {
+                UIImpactFeedbackGenerator(style: .light).impactOccurred()
+            }
+        } else if travelled < Self.threshold {
+            fired = false
+        }
+    }
+
+    mutating func reset() {
+        fired = false
+    }
+}

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.18",
+  "version": "0.167.1-duo.19-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")