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

package/ios/Layout/Section.swift

@@ -0,0 +1,134 @@
+import SwiftUI
+
+/// 12-column section container: horizontal margin, optional background image, and a
+/// wrapping row of children that read their span size from `\.gridContext`.
+/// Mirrors `vn.momo.kits.layout.Section`.
+public struct SectionView<Content: View>: View {
+    // MARK: Lifecycle
+
+    public init(
+        useMargin: Bool = true,
+        backgroundImage: String? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.useMargin = useMargin
+        self.backgroundImage = backgroundImage
+        self.content = content
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        flow
+            .environment(\.gridContext, grid)
+            .frame(maxWidth: .infinity, alignment: .topLeading)
+            .background(widthReader)
+            .background(background)
+            .padding(.horizontal, useMargin ? Spacing.M : 0)
+    }
+
+    // MARK: Private
+
+    private static var columns: Int { 12 }
+    private static var gutter: CGFloat { Spacing.M }
+
+    private let useMargin: Bool
+    private let backgroundImage: String?
+    private let content: () -> Content
+
+    /// Width available *inside* the horizontal margin — the Compose `BoxWithConstraints` equivalent.
+    @State private var availableWidth: CGFloat = 0
+
+    private var grid: GridContext {
+        let columns = CGFloat(Self.columns)
+        // The trailing `- 1 / columns` mirrors Compose: it absorbs rounding so 12 spans
+        // plus their gutters never overflow the row by a sub-point.
+        let sizePerSpan = (availableWidth - Self.gutter * (columns - 1)) / columns - 1 / columns
+        return GridContext(numberOfColumns: Self.columns, gutter: Self.gutter, sizePerSpan: max(0, sizePerSpan))
+    }
+
+    @ViewBuilder private var flow: some View {
+        if #available(iOS 16.0, *) {
+            FlowRowLayout(gutter: Self.gutter) { content() }
+        } else {
+            // No `Layout` protocol before iOS 16: children stack instead of wrapping.
+            // Full-width (span 12) items — the common case — look identical.
+            VStack(alignment: .leading, spacing: Self.gutter) { content() }
+        }
+    }
+
+    @ViewBuilder private var background: some View {
+        if let backgroundImage {
+            ImageView(backgroundImage, contentMode: .fill).clipped()
+        }
+    }
+
+    private var widthReader: some View {
+        GeometryReader { proxy in
+            Color.clear.preference(key: SectionWidthKey.self, value: proxy.size.width)
+        }
+        .onPreferenceChange(SectionWidthKey.self) { availableWidth = $0 }
+    }
+}
+
+private struct SectionWidthKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
+/// Wrapping row with equal horizontal/vertical spacing — the Compose `FlowRow` equivalent.
+@available(iOS 16.0, *)
+private struct FlowRowLayout: Layout {
+    struct Row {
+        var items: [(index: Int, size: CGSize)] = []
+        var width: CGFloat = 0
+        var height: CGFloat = 0
+    }
+
+    let gutter: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
+        let maxWidth = proposal.width ?? .infinity
+        let rows = rows(for: subviews, maxWidth: maxWidth)
+        let height = rows.reduce(0) { $0 + $1.height } + gutter * CGFloat(max(0, rows.count - 1))
+        return CGSize(width: proposal.width ?? rows.map(\.width).max() ?? 0, height: height)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
+        var y = bounds.minY
+        for row in rows(for: subviews, maxWidth: bounds.width) {
+            var x = bounds.minX
+            for item in row.items {
+                subviews[item.index].place(
+                    at: CGPoint(x: x, y: y),
+                    anchor: .topLeading,
+                    proposal: ProposedViewSize(item.size)
+                )
+                x += item.size.width + gutter
+            }
+            y += row.height + gutter
+        }
+    }
+
+    private func rows(for subviews: Subviews, maxWidth: CGFloat) -> [Row] {
+        var rows: [Row] = []
+        var current = Row()
+        for index in subviews.indices {
+            let size = subviews[index].sizeThatFits(ProposedViewSize(width: maxWidth, height: nil))
+            let widthIfAppended = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
+            if !current.items.isEmpty, widthIfAppended > maxWidth + 0.5 {
+                rows.append(current)
+                current = Row()
+            }
+            current.width = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            current.height = max(current.height, size.height)
+            current.items.append((index, size))
+        }
+        if !current.items.isEmpty { rows.append(current) }
+        return rows
+    }
+}

package/ios/Loader/Loader.swift

@@ -0,0 +1,113 @@
+import Foundation
+import SwiftUI
+
+/// Loader variants, mirroring Compose `LoaderType`.
+public enum LoaderType {
+    case dot
+    case spinner
+}
+
+/// Native SwiftUI port of the Compose `Loader` component.
+///
+/// Mirrors Compose `Loader(type:, tintColor:, modifier:)` which delegates to
+/// `DotLoader` / `SpinnerLoader`. Both variants render Lottie animations
+/// (`files/dot_loading` and `files/lottie_circle_loader`) and optionally tint
+/// the fill/stroke. The tint is reproduced here by masking a solid color rect
+/// with the (monochrome) Lottie animation.
+public struct Loader: View {
+    private let type: LoaderType
+    private let tintColor: Color?
+
+    public init(type: LoaderType = .dot, tintColor: Color? = nil) {
+        self.type = type
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        switch type {
+        case .dot:
+            DotLoader(tintColor: tintColor)
+        case .spinner:
+            SpinnerLoader(tintColor: tintColor)
+        }
+    }
+}
+
+/// Looping dot animation. Compose size: 52 x 18.
+public struct DotLoader: View {
+    private let tintColor: Color?
+
+    public init(tintColor: Color? = nil) {
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        TintedLottie(name: "dot_loading", tintColor: tintColor)
+            .frame(width: 52, height: 18)
+    }
+}
+
+/// Looping circular spinner. Compose size: 24 x 24.
+public struct SpinnerLoader: View {
+    private let tintColor: Color?
+
+    public init(tintColor: Color? = nil) {
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        TintedLottie(name: "lottie_circle_loader", tintColor: tintColor)
+            .frame(width: 24, height: 24)
+    }
+}
+
+/// Horizontal determinate progress bar.
+///
+/// Mirrors Compose `ProgressBar(percent:, color:, modifier:)`:
+/// - `percent` clamped to 0...100, animated with a 200ms ease.
+/// - track = theme background default (`0xFFF2F2F6`), fill = `color` or primary (pink_03).
+/// - height 4, corner radius `Radius.XXS`, fills max width.
+public struct ProgressBar: View {
+    @Environment(\.appTheme) private var theme
+
+    private let percent: CGFloat
+    private let color: Color?
+
+    public init(percent: CGFloat = 0, color: Color? = nil) {
+        self.percent = percent
+        self.color = color
+    }
+
+    private var clampedFraction: CGFloat {
+        min(max(percent, 0), 100) / 100
+    }
+
+    public var body: some View {
+        GeometryReader { proxy in
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: Radius.XXS)
+                    .fill(theme.colors.background.default)
+                RoundedRectangle(cornerRadius: Radius.XXS)
+                    .fill(color ?? theme.colors.primary)
+                    .frame(width: proxy.size.width * clampedFraction)
+            }
+        }
+        .frame(height: 4)
+        .animation(.easeInOut(duration: 0.2), value: clampedFraction)
+    }
+}
+
+/// Renders a looping Lottie animation, optionally recolored via a mask.
+private struct TintedLottie: View {
+    let name: String
+    let tintColor: Color?
+
+    var body: some View {
+        if let tintColor = tintColor {
+            tintColor
+                .mask(LottieView(name: name, loopMode: .loop))
+        } else {
+            LottieView(name: name, loopMode: .loop)
+        }
+    }
+}

package/ios/Lottie/LottieView.swift

@@ -0,0 +1,86 @@
+//
+//  LottieView.swift
+//  MoMoPlatform
+//
+//  Created by thanhdat on 16/01/2023.
+//  Copyright © 2023 Facebook. All rights reserved.
+//
+
+import SwiftUI
+import Lottie
+
+struct LottieView: UIViewRepresentable {
+  var name: String = ""
+  var url: String?
+  var loopMode: LottieLoopMode = .playOnce
+  var contentMode : UIView.ContentMode  = .scaleAspectFit
+  var onDone: (() -> Void)?
+
+  // Add static cache for animations
+  private static var animationCache = NSCache<NSString, LottieAnimation>()
+
+  func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
+    let view = UIView(frame: .zero)
+
+    // Configure Lottie with optimized settings
+    let configuration = LottieConfiguration(
+      renderingEngine: .coreAnimation,
+      decodingStrategy: .dictionaryBased
+    )
+
+    let animationView = LottieAnimationView(configuration: configuration)
+
+    if let url = url {
+      // Use cached animation if available
+      if let cachedAnimation = Self.animationCache.object(forKey: url as NSString) {
+        animationView.animation = cachedAnimation
+        setupAnimationView(animationView, view)
+      } else {
+        LottieAnimation.loadedFrom(url: URL(string: url)!, closure: { animation in
+          if let animation = animation {
+            Self.animationCache.setObject(animation, forKey: url as NSString)
+            animationView.animation = animation
+            setupAnimationView(animationView, view)
+          }
+        }, animationCache: nil)
+      }
+    } else {
+      // Use cached animation if available
+      if let cachedAnimation = Self.animationCache.object(forKey: name as NSString) {
+        animationView.animation = cachedAnimation
+        setupAnimationView(animationView, view)
+      } else if let animation = LottieAnimation.named(name) {
+        Self.animationCache.setObject(animation, forKey: name as NSString)
+        animationView.animation = animation
+        setupAnimationView(animationView, view)
+      }
+    }
+
+    return view
+  }
+
+  private func setupAnimationView(_ animationView: LottieAnimationView, _ containerView: UIView) {
+    animationView.contentMode = contentMode
+    animationView.loopMode = loopMode
+    animationView.backgroundBehavior = loopMode == .loop ? .pauseAndRestore : .pause
+
+    // Optimize rendering
+    animationView.shouldRasterizeWhenIdle = true
+
+    animationView.translatesAutoresizingMaskIntoConstraints = false
+    containerView.addSubview(animationView)
+
+    NSLayoutConstraint.activate([
+      animationView.widthAnchor.constraint(equalTo: containerView.widthAnchor),
+      animationView.heightAnchor.constraint(equalTo: containerView.heightAnchor)
+    ])
+
+    animationView.play { finished in
+      if finished {
+        onDone?()
+      }
+    }
+  }
+
+  func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {}
+}

package/ios/MoMoUIKits.podspec

@@ -0,0 +1,5 @@
+eval(
+  File.read(File.join(__dir__, 'native-kits.podspec')),
+  binding,
+  File.join(__dir__, 'native-kits.podspec')
+)

package/ios/OTPKeyboard/KeyboardButton.swift

@@ -8,9 +8,13 @@ typealias SwiftButton = SwiftUI.Button
 public struct KeyboardButton: View {
     // MARK: Lifecycle
 
-    public init(_ key: String, action: @escaping (_ key: String)->Void) {
+    public init(_ key: String, action: @escaping (_ key: String)->Void, width: CGFloat = .infinity, height: CGFloat = 48, color: Color = Colors.card, textColor: Color = Colors.text) {
         self.key = key
         self.action = action
+        self.width = width
+        self.height = height
+        self.color = color
+        self.textColor = textColor
     }
 
     // MARK: Public
@@ -18,10 +22,10 @@ public struct KeyboardButton: View {
     public var body: some View {
         SwiftUI.Button(action: { self.action(key) }) {
             HStack {
-                Text(key).font(.system(size: 24, weight: .bold))
-            }.frame(maxWidth: .infinity, minHeight: 48)
-                .background(Colors.card)
-                .foregroundColor(Colors.text)
+                Text(key).font(.system(size: 24, weight: .bold)).ignoreBoldTextSetting()
+            }.frame(maxWidth: CGFloat(width), minHeight: height)
+                .background(color)
+                .foregroundColor(textColor)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
         }
     }
@@ -30,4 +34,8 @@ public struct KeyboardButton: View {
 
     var key: String = ""
     var action: (_ key: String)->Void
+    var width: CGFloat
+    var height: CGFloat
+    var color: Color
+    var textColor: Color
 }

package/ios/Pagination/PaginationDot.swift

@@ -0,0 +1,61 @@
+//
+//  PaginationDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationDot.
+//  An active dot is a 12x4 pill in `activeColor`; inactive dots are 4x4
+//  rounded squares in the pressed-background token.
+//
+
+import SwiftUI
+
+// MARK: - Dot
+
+/// A single pagination dot, mirroring Compose's `Dot` composable.
+public struct PaginationDotItem: View {
+    @Environment(\.appTheme) private var theme
+
+    private let active: Bool
+    private let activeColor: Color
+
+    public init(active: Bool = false, activeColor: Color) {
+        self.active = active
+        self.activeColor = activeColor
+    }
+
+    public var body: some View {
+        if active {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(activeColor)
+                .frame(width: 12, height: 4)
+        } else {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(theme.colors.background.pressed)
+                .frame(width: 4, height: 4)
+        }
+    }
+}
+
+// MARK: - PaginationDot
+
+/// Mirrors Compose's `PaginationDot(activeIndex, dataLength)`.
+public struct PaginationDot: View {
+    @Environment(\.appTheme) private var theme
+
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: theme.colors.primary)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+    }
+}

package/ios/Pagination/PaginationNumber.swift

@@ -0,0 +1,35 @@
+//
+//  PaginationNumber.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationNumber.
+//  Renders "current/total" text on a translucent black rounded chip.
+//
+
+import SwiftUI
+
+// MARK: - PaginationNumber
+
+/// Mirrors Compose's `PaginationNumber(activeIndex, dataLength)`.
+public struct PaginationNumber: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 2) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        MomoText(
+            "\(1 + activeIndex)/\(dataLength)",
+            typography: .labelDefaultMedium,
+            color: Colors.black01
+        )
+        .padding(.horizontal, Spacing.S)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.L)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}

package/ios/Pagination/PaginationScroll.swift

@@ -0,0 +1,101 @@
+//
+//  PaginationScroll.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationScroll.
+//  Wraps arbitrary horizontally-scrollable content and renders a
+//  progress-bar style indicator whose position tracks the scroll offset.
+//
+
+import SwiftUI
+
+// MARK: - Constants
+
+private let INDICATOR_WIDTH: CGFloat = 24
+private let PROGRESS_WIDTH: CGFloat = 72
+
+/// Memoized offset calculation, mirroring Compose's `calculateOffset`.
+private func calculateOffset(currentPosition: CGFloat, maxBound: CGFloat) -> CGFloat {
+    guard maxBound > 0 else { return 0 }
+    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound)
+}
+
+// MARK: - PaginationScroll
+
+/// Mirrors Compose's `PaginationScroll(modifier, content)`.
+///
+/// The trailing-closure `content` is laid out in a horizontal scroll view and
+/// the indicator below reflects the current scroll progress.
+public struct PaginationScroll<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    private let content: Content
+
+    @State private var scrollOffset: CGFloat = 0
+    @State private var contentWidth: CGFloat = 0
+    @State private var viewportWidth: CGFloat = 0
+
+    public init(@ViewBuilder content: () -> Content) {
+        self.content = content()
+    }
+
+    private var maxBound: CGFloat {
+        max(contentWidth - viewportWidth, 0)
+    }
+
+    private var indicatorOffset: CGFloat {
+        calculateOffset(currentPosition: scrollOffset, maxBound: maxBound)
+    }
+
+    public var body: some View {
+        VStack(spacing: 0) {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 0) {
+                    content
+                }
+                .background(
+                    GeometryReader { proxy in
+                        Color.clear
+                            .preference(
+                                key: ScrollOffsetKey.self,
+                                value: -proxy.frame(in: .named("paginationScroll")).minX
+                            )
+                            .onAppear { contentWidth = proxy.size.width }
+                            .onChange(of: proxy.size.width) { contentWidth = $0 }
+                    }
+                )
+            }
+            .coordinateSpace(name: "paginationScroll")
+            .background(
+                GeometryReader { viewport in
+                    Color.clear
+                        .onAppear { viewportWidth = viewport.size.width }
+                        .onChange(of: viewport.size.width) { viewportWidth = $0 }
+                }
+            )
+            .onPreferenceChange(ScrollOffsetKey.self) { scrollOffset = max($0, 0) }
+            .padding(.bottom, Spacing.L)
+
+            // Progress indicator
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.background.pressed)
+                    .frame(width: PROGRESS_WIDTH, height: 4)
+
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.primary)
+                    .frame(width: INDICATOR_WIDTH, height: 4)
+                    .offset(x: indicatorOffset)
+            }
+        }
+    }
+}
+
+// MARK: - Preference key
+
+private struct ScrollOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}

package/ios/Pagination/PaginationWhiteDot.swift

@@ -0,0 +1,37 @@
+//
+//  PaginationWhiteDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationWhiteDot.
+//  Same dot layout as PaginationDot, but the active color is white
+//  (black_01) and the row sits on a translucent black rounded surface.
+//
+
+import SwiftUI
+
+// MARK: - PaginationWhiteDot
+
+/// Mirrors Compose's `PaginationWhiteDot(activeIndex, dataLength)`.
+public struct PaginationWhiteDot: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: Colors.black01)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+        .padding(Spacing.XS)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}