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

package/ios/DateTimePicker/DateTimePickerUtils.swift

@@ -0,0 +1,167 @@
+import Foundation
+
+// MARK: - DateTimePickerUtils
+
+/// Pure helper functions mirroring Compose `DateTimePickerUtils.kt`.
+public enum DateTimePickerUtils {
+
+    /// Time mode list for 12-hour clock (only-hour format).
+    public static let timeMode: [String] = ["AM", "PM"]
+
+    /// Pad a number with a leading zero if it's less than 10.
+    public static func paddingNum(_ num: Int) -> String {
+        return num > 9 ? String(num) : "0\(num)"
+    }
+
+    /// Format a `Date` into a string, matching Compose `formatLocalDateTime`.
+    public static func formatDate(
+        _ date: Date,
+        format: String = "yyyy-MM-dd HH:mm",
+        calendar: Calendar = Calendar.current
+    ) -> String {
+        let c = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: date)
+        let year = c.year ?? 0
+        let month = c.month ?? 1
+        let day = c.day ?? 1
+        let hour = c.hour ?? 0
+        let minute = c.minute ?? 0
+
+        switch format {
+        case "yyyy-MM-dd HH:mm":
+            return "\(year)-\(paddingNum(month))-\(paddingNum(day)) \(paddingNum(hour)):\(paddingNum(minute))"
+        case "dd-MM-yyyy":
+            return "\(paddingNum(day))-\(paddingNum(month))-\(year)"
+        case "HH:mm":
+            return "\(paddingNum(hour)):\(paddingNum(minute))"
+        default:
+            return "\(year)-\(paddingNum(month))-\(paddingNum(day)) \(paddingNum(hour)):\(paddingNum(minute))"
+        }
+    }
+
+    /// Number of days in a given month/year.
+    private static func daysInMonth(year: Int, month: Int) -> Int {
+        switch month {
+        case 1, 3, 5, 7, 8, 10, 12: return 31
+        case 4, 6, 9, 11: return 30
+        case 2: return (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) ? 29 : 28
+        default: return 31
+        }
+    }
+
+    /// Get a list of day strings constrained by min/max date.
+    public static func getDaysInMonth(
+        year: Int,
+        month: Int,
+        minDate: DateComponents,
+        maxDate: DateComponents
+    ) -> [String] {
+        let maxDay = daysInMonth(year: year, month: month)
+        var startDay = 1
+        var endDay = maxDay
+
+        if year == minDate.year && month == minDate.month {
+            startDay = minDate.day ?? 1
+        }
+        if year == maxDate.year && month == maxDate.month {
+            endDay = maxDate.day ?? maxDay
+        }
+
+        guard startDay <= endDay else { return [paddingNum(startDay)] }
+        return (startDay...endDay).map { paddingNum($0) }
+    }
+
+    /// Get a list of month strings constrained by min/max date for a year.
+    public static func getMonths(
+        minDate: DateComponents,
+        maxDate: DateComponents,
+        currentYear: Int
+    ) -> [String] {
+        var startMonth = 1
+        var endMonth = 12
+
+        if currentYear == minDate.year {
+            startMonth = minDate.month ?? 1
+        }
+        if currentYear == maxDate.year {
+            endMonth = maxDate.month ?? 12
+        }
+
+        guard startMonth <= endMonth else { return [paddingNum(startMonth)] }
+        return (startMonth...endMonth).map { paddingNum($0) }
+    }
+
+    /// Get a list of year strings between min and max date.
+    public static func getYears(minDate: DateComponents, maxDate: DateComponents) -> [String] {
+        let startYear = minDate.year ?? 0
+        let endYear = maxDate.year ?? 0
+        guard startYear <= endYear else { return [String(startYear)] }
+        return (startYear...endYear).map { String($0) }
+    }
+
+    /// Get a list of hours for either a 12-hour or 24-hour clock.
+    public static func getHours(hourMode: Int) -> [String] {
+        var hours: [String] = []
+        for i in 0..<hourMode {
+            let hour = hourMode == 12 ? i + 1 : i
+            hours.append(paddingNum(hour))
+        }
+        return hours
+    }
+
+    /// Get a list of minutes stepped by `interval`.
+    public static func getMinutes(interval: Int) -> [String] {
+        let step = max(1, interval)
+        var minutes: [String] = []
+        var min = 0
+        while min < 60 {
+            minutes.append(paddingNum(min))
+            min += step
+        }
+        return minutes
+    }
+
+    /// Today's date.
+    public static func getCurrentDateTime() -> Date {
+        return Date()
+    }
+
+    /// Create a date a certain number of years before/after now.
+    public static func createRelativeDate(years: Int, calendar: Calendar = Calendar.current) -> Date {
+        let now = Date()
+        return calendar.date(byAdding: .year, value: years, to: now) ?? now
+    }
+
+    /// Resolve the wheel columns from a format string. Mirrors Compose `getDateComponents`.
+    public static func getDateComponents(
+        format: String,
+        currentData: DateTimePickerData,
+        minDate: DateComponents,
+        maxDate: DateComponents,
+        minuteInterval: Int
+    ) -> [DateTimePickerComponent] {
+        let formatParts = format.split(whereSeparator: { !$0.isLetter }).map { String($0) }
+        let isOnlyHour = formatParts.count == 1 && formatParts[0] == "HH"
+
+        let dayData = getDaysInMonth(year: currentData.year, month: currentData.month, minDate: minDate, maxDate: maxDate)
+        let monthData = getMonths(minDate: minDate, maxDate: maxDate, currentYear: currentData.year)
+        let yearData = getYears(minDate: minDate, maxDate: maxDate)
+        let hourData = getHours(hourMode: isOnlyHour ? 12 : 24)
+        let minData = getMinutes(interval: minuteInterval)
+
+        var components: [DateTimePickerComponent] = []
+        for part in formatParts {
+            switch part {
+            case "DD": components.append(DateTimePickerComponent(name: "day", data: dayData))
+            case "MM": components.append(DateTimePickerComponent(name: "month", data: monthData))
+            case "YYYY": components.append(DateTimePickerComponent(name: "year", data: yearData))
+            case "HH": components.append(DateTimePickerComponent(name: "hour", data: hourData))
+            case "mm": components.append(DateTimePickerComponent(name: "minute", data: minData))
+            default: break
+            }
+        }
+        if isOnlyHour {
+            components.append(DateTimePickerComponent(name: "timeMode", data: timeMode))
+        }
+        return components
+    }
+}

package/ios/DateTimePicker/WheelPicker.swift

@@ -0,0 +1,165 @@
+import SwiftUI
+
+// MARK: - Constants
+
+private let wheelItemHeight: CGFloat = 42
+private let wheelVisibleCount: Int = 5
+private let wheelPickerBorderWidth: CGFloat = 1
+
+// MARK: - WheelPicker
+
+/// A reusable single-column wheel picker, mirroring Compose `WheelPicker.kt`.
+///
+/// The data is padded with two empty rows at the top and bottom so the first/last
+/// real value can be centered. The currently centered row is reported back via
+/// `onChange(name, value)`.
+public struct WheelPicker: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        name: String,
+        data: [String],
+        selectedData: String,
+        onChange: @escaping (String, String) -> Void
+    ) {
+        self.name = name
+        self.data = data
+        self.selectedData = selectedData
+        self.onChange = onChange
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        let paddedData = ["", ""] + data + ["", ""]
+
+        return GeometryReader { geo in
+            let height = geo.size.height
+            ScrollViewReader { proxy in
+                ScrollView(.vertical, showsIndicators: false) {
+                    LazyVStack(spacing: 0) {
+                        ForEach(Array(paddedData.enumerated()), id: \.offset) { index, text in
+                            WheelPickerItem(
+                                text: text,
+                                isSelected: index == selectedIndex,
+                                index: index,
+                                scrollOffset: scrollOffset,
+                                viewportHeight: height
+                            )
+                            .frame(height: wheelItemHeight)
+                            .id(index)
+                        }
+                    }
+                    .background(
+                        GeometryReader { inner in
+                            Color.clear.preference(
+                                key: WheelOffsetKey.self,
+                                value: inner.frame(in: .named(scrollSpace)).minY
+                            )
+                        }
+                    )
+                }
+                .coordinateSpace(name: scrollSpace)
+                .onPreferenceChange(WheelOffsetKey.self) { value in
+                    scrollOffset = value
+                    updateSelection(paddedData: paddedData, viewportHeight: height)
+                }
+                .onAppear {
+                    let initial = max(paddedData.firstIndex(of: selectedData) ?? 2, 2)
+                    selectedIndex = initial
+                    DispatchQueue.main.async {
+                        proxy.scrollTo(initial, anchor: .center)
+                    }
+                }
+            }
+        }
+        .frame(height: wheelItemHeight * CGFloat(wheelVisibleCount))
+        .overlay(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .stroke(theme.colors.border.default, lineWidth: wheelPickerBorderWidth)
+        )
+        .background(theme.colors.background.surface.clipShape(RoundedRectangle(cornerRadius: Radius.S)))
+        .overlay(
+            // Centered translucent selection band.
+            Rectangle()
+                .fill(Colors.blue10)
+                .opacity(0.2)
+                .frame(height: wheelItemHeight)
+                .allowsHitTesting(false)
+        )
+        .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+    }
+
+    // MARK: Internal
+
+    let name: String
+    let data: [String]
+    let selectedData: String
+    let onChange: (String, String) -> Void
+
+    @State private var selectedIndex: Int = 0
+    @State private var scrollOffset: CGFloat = 0
+
+    private let scrollSpace = "wheelScroll"
+
+    /// Map the current scroll offset to the centered index and report changes.
+    private func updateSelection(paddedData: [String], viewportHeight: CGFloat) {
+        // `scrollOffset` is the top of the content relative to the viewport (<= 0 when scrolled).
+        let centerY = viewportHeight / 2
+        let contentCenter = -scrollOffset + centerY
+        let rawIndex = Int((contentCenter / wheelItemHeight).rounded()) - 1
+        let clamped = max(2, min(rawIndex, paddedData.count - 3))
+        guard clamped != selectedIndex else { return }
+        selectedIndex = clamped
+        let value = paddedData[clamped]
+        if !value.isEmpty {
+            onChange(name, value)
+        }
+    }
+}
+
+// MARK: - WheelPickerItem
+
+private struct WheelPickerItem: View {
+    @Environment(\.appTheme) private var theme
+
+    let text: String
+    let isSelected: Bool
+    let index: Int
+    let scrollOffset: CGFloat
+    let viewportHeight: CGFloat
+
+    var body: some View {
+        let itemCenterInContent = CGFloat(index) * wheelItemHeight + wheelItemHeight / 2
+        let itemCenterInViewport = itemCenterInContent + scrollOffset
+        let distanceFromCenter = abs(itemCenterInViewport - viewportHeight / 2) / wheelItemHeight
+
+        let alpha: Double
+        switch distanceFromCenter {
+        case ..<1: alpha = 1.0
+        case ..<2: alpha = 0.8
+        default: alpha = 0.4
+        }
+
+        let scale: CGFloat = isSelected ? 1.0 : 0.87
+
+        return ZStack {
+            MomoText(text, typography: .actionSBold, color: theme.colors.text.default)
+                .scaleEffect(scale)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: wheelItemHeight)
+        .opacity(alpha)
+    }
+}
+
+// MARK: - WheelOffsetKey
+
+private struct WheelOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}

package/ios/Divider/Divider.swift

@@ -0,0 +1,16 @@
+import Foundation
+import SwiftUI
+
+public struct MomoDivider: View {
+    @Environment(\.appTheme) private var theme
+
+    public init() {}
+
+    public var body: some View {
+        Rectangle()
+            .fill(theme.colors.border.default)
+            .frame(maxWidth: .infinity)
+            .frame(height: 1)
+            .padding(.vertical, Spacing.XS)
+    }
+}

package/ios/Extensions/ActiveOpacityButtonStyle.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+/// Mirrors Compose's `Modifier.activeOpacityClickable(activeOpacity:)` (modifier/Clickable.kt):
+/// fades the whole tappable subtree to `activeOpacity` while pressed, animated, instead of
+/// relying on a platform-default press indication.
+struct ActiveOpacityButtonStyle: ButtonStyle {
+    var activeOpacity: Double = 0.2
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .opacity(configuration.isPressed ? activeOpacity : 1)
+            .animation(.default, value: configuration.isPressed)
+    }
+}

package/ios/Extensions/Color++.swift

@@ -1,6 +1,38 @@
 import SwiftUI
+import Foundation
+
+private final class MoMoUIKitsBundleToken {}
+
+enum MoMoUIKitsResources {
+    static let bundle: Bundle = {
+        let bundleName = "MoMoUIKitsResources"
+        let tokenBundle = Bundle(for: MoMoUIKitsBundleToken.self)
+        let frameworkBundle = Bundle(identifier: "org.cocoapods.MoMoUIKits")
+        let candidates = [
+            Bundle.main.resourceURL,
+            tokenBundle.resourceURL,
+            tokenBundle.bundleURL,
+            frameworkBundle?.resourceURL,
+            frameworkBundle?.bundleURL
+        ]
+
+        for candidate in candidates {
+            guard let bundleURL = candidate?.appendingPathComponent("\(bundleName).bundle"),
+                  let bundle = Bundle(url: bundleURL) else {
+                continue
+            }
+            return bundle
+        }
+
+        return Bundle.main
+    }()
+}
 
 public extension Color {
+    static func momoAsset(_ name: String) -> Color {
+        Color(name, bundle: MoMoUIKitsResources.bundle)
+    }
+
     init(hex: UInt, alpha: Double = 1) {
         self.init(
             .sRGB,

package/ios/Icon/Icon.swift

@@ -0,0 +1,69 @@
+import SwiftUI
+
+struct IconSource: Codable {
+    let uri: String
+}
+
+func loadIconSources() -> [String: IconSource] {
+    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json") else {
+        print("Error: icon.json not found")
+        return [:]
+    }
+    
+    do {
+        let data = try Data(contentsOf: url)
+        let decoded = try JSONDecoder().decode([String: IconSource].self, from: data)
+        return decoded
+    } catch {
+        print("Error decoding icon.json: \(error)")
+        return [:]
+    }
+}
+
+// Load the JSON data into a global variable
+let iconSources: [String: IconSource] = loadIconSources()
+
+// Icons that must never be tinted (mirror Compose `noThemeIcons`)
+let noThemeIcons: [String] = ["ic_round_momo_tiny"]
+
+// Compose defaults `color` to the theme text color while `color = null` means "no tint".
+// Swift can't tell an omitted argument from an explicit `nil`, so the default is this
+// unrepresentable sentinel: omitted -> theme text color, `nil` -> untinted.
+public let iconThemeColor = Color(.sRGB, red: -1, green: -1, blue: -1, opacity: -1)
+
+// Icon ViewModel
+public struct Icon: View {
+    @Environment(\.appTheme) private var theme
+
+    var source: String
+    var size: CGFloat
+    var color: Color?
+    var accessibilityLabel: String?
+
+    public init(
+            source: String,
+            size: CGFloat = 24,
+            color: Color? = iconThemeColor,
+            accessibilityLabel: String? = nil
+        ) {
+            self.source = source
+            self.size = size
+            self.color = color
+            self.accessibilityLabel = accessibilityLabel
+        }
+
+    public var body: some View {
+        // Mirror Compose: an https source is used as-is, anything else is a key into icon.json
+        if let uri = source.contains("https") ? source : iconSources[source]?.uri {
+            let requestedColor = color == iconThemeColor ? theme.colors.text.default : color
+            // Mirror Compose: certain icons (e.g. branded glyphs) are never tinted
+            let resolvedColor = noThemeIcons.contains(source) ? nil : requestedColor
+            ImageView(uri, color: resolvedColor)
+                .frame(width: size, height: size)
+                // Mirrors Compose's auto-generated `contentDescription = "img|$iconUrl"`
+                // when no explicit label is provided.
+                .accessibilityLabel(accessibilityLabel ?? "img|\(uri)")
+        }
+    }
+}
+

package/ios/IconButton/IconButton.swift

@@ -0,0 +1,140 @@
+import Foundation
+import SwiftUI
+
+// MARK: - IconSize
+
+public enum IconSize {
+    case large
+    case medium
+    case small
+
+    /// Container width/height of the button.
+    var containerSize: CGFloat {
+        switch self {
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
+        }
+    }
+
+    /// Glyph size of the icon inside the button.
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .medium, .small: return 16
+        }
+    }
+}
+
+// MARK: - IconShape
+
+public enum IconShape {
+    case circle
+    case square
+}
+
+// MARK: - IconButton
+
+public struct IconButton: View {
+    @Environment(\.appTheme) private var theme
+
+    var icon: String
+    var onClick: () -> Void
+    var type: ButtonType
+    var size: IconSize
+    var shape: IconShape
+    var color: Color?
+
+    public init(
+        icon: String = "",
+        onClick: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: IconSize = .small,
+        shape: IconShape = .circle,
+        color: Color? = nil
+    ) {
+        self.icon = icon
+        self.onClick = onClick
+        self.type = type
+        self.size = size
+        self.shape = shape
+        self.color = color
+    }
+
+    private var isEnabled: Bool {
+        type != .disabled
+    }
+
+    public var body: some View {
+        let bg = backgroundColor
+        let fg = contentColor
+        // OUTLINE allows an override color for its border, mirroring Compose `color ?? theme.colors.primary`.
+        let border: Color? = type == .outline ? (color ?? theme.colors.primary) : borderColor
+        let borderWidth = type.borderWidth
+
+        SwiftUI.Button(action: {
+            if isEnabled {
+                onClick()
+            }
+        }) {
+            Icon(source: icon, size: size.iconSize, color: fg)
+                .frame(width: size.containerSize, height: size.containerSize)
+                .background(bg)
+                .clipShape(IconButtonShape(shape))
+                .overlay(
+                    IconButtonShape(shape)
+                        .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                )
+        }
+        .buttonStyle(.plain)
+        .disabled(!isEnabled)
+    }
+
+    private var backgroundColor: Color {
+        switch type {
+        case .disabled: return theme.colors.background.disable
+        case .primary: return theme.colors.primary
+        case .secondary, .outline: return theme.colors.background.surface
+        case .tonal: return theme.colors.background.tonal
+        case .danger: return theme.colors.error.primary
+        case .text: return .clear
+        }
+    }
+
+    private var contentColor: Color {
+        switch type {
+        case .disabled: return theme.colors.text.disable
+        case .primary, .danger: return Colors.black01
+        case .secondary: return theme.colors.text.default
+        case .outline, .tonal, .text: return theme.colors.primary
+        }
+    }
+
+    private var borderColor: Color? {
+        switch type {
+        case .secondary: return theme.colors.border.default
+        case .outline: return color ?? theme.colors.primary
+        default: return nil
+        }
+    }
+}
+
+/// Type-erased shape switch (`Circle` vs a fixed `Radius.S` rounded rect) — mirrors
+/// Compose's `IconShape.toShape()`. `AnyShape` needs iOS 17+, so this hand-rolls the same
+/// erasure at the deployment target's iOS 15 floor.
+private struct IconButtonShape: Shape {
+    let shape: IconShape
+
+    init(_ shape: IconShape) {
+        self.shape = shape
+    }
+
+    func path(in rect: CGRect) -> Path {
+        switch shape {
+        case .circle:
+            return Circle().path(in: rect)
+        case .square:
+            return RoundedRectangle(cornerRadius: Radius.S).path(in: rect)
+        }
+    }
+}