@momo-kits/native-kits 0.162.2-beta.26 → 0.162.2-beta.27

package/ios/Tooltip/Tooltip.swift

@@ -1,482 +0,0 @@
-import SwiftUI
-
-// MARK: - Types
-
-/// Tooltip placement relative to the anchor element.
-public enum TooltipPlacement {
-    case top
-    case bottom
-    case left
-    case right
-}
-
-/// Cross-axis alignment of the tooltip relative to the anchor.
-public enum TooltipAlign {
-    case start
-    case center
-    case end
-}
-
-/// Describes a single action button displayed in the tooltip.
-public struct TooltipButton {
-    public let title: String?
-    public let icon: String?
-    public let onPress: (() -> Void)?
-
-    public init(
-        title: String? = nil,
-        icon: String? = nil,
-        onPress: (() -> Void)? = nil
-    ) {
-        self.title = title
-        self.icon = icon
-        self.onPress = onPress
-    }
-}
-
-/// State holder for controlling tooltip visibility imperatively.
-/// Mirrors the Compose `TooltipState` / `rememberTooltipState()` pattern.
-public final class TooltipState: ObservableObject {
-    @Published public private(set) var isVisible: Bool = false
-
-    public init() {}
-
-    /// Shows the tooltip.
-    public func show() {
-        isVisible = true
-    }
-
-    /// Hides the tooltip.
-    public func hide() {
-        isVisible = false
-    }
-
-    /// Toggles the tooltip visibility.
-    public func toggle() {
-        isVisible.toggle()
-    }
-}
-
-// MARK: - Constants
-
-private enum TooltipConst {
-    static let offset = Spacing.S          // TOOLTIP_OFFSET
-    static let arrowSize: CGFloat = 6      // ARROW_SIZE
-    static let maxWidth: CGFloat = 300
-    static let cornerRadius = Radius.S
-    static let arrowCornerRadius: CGFloat = 2
-    static let arrowEdgeMargin = Spacing.M
-    static let arrowOverlap: CGFloat = 1
-}
-
-// MARK: - Arrow Shape
-
-/// Triangular arrow pointing away from the anchor in the given placement direction.
-struct TooltipArrowShape: Shape {
-    let placement: TooltipPlacement
-
-    func path(in rect: CGRect) -> Path {
-        let w = rect.width
-        let h = rect.height
-        var path = Path()
-        switch placement {
-        case .top:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w / 2, y: h))
-        case .bottom:
-            path.move(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: w / 2, y: 0))
-        case .left:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h / 2))
-        case .right:
-            path.move(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: 0, y: h / 2))
-        }
-        path.closeSubpath()
-        return path
-    }
-}
-
-// MARK: - Anchor bounds preference
-
-private struct TooltipAnchorBoundsKey: PreferenceKey {
-    static var defaultValue: Anchor<CGRect>? = nil
-    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
-        value = nextValue() ?? value
-    }
-}
-
-// MARK: - Tooltip
-
-/// A tooltip component that wraps `content` (the anchor) and shows a positioned
-/// tooltip popup with title, description, close button, and action buttons.
-///
-/// Port of the Compose / React Native `Tooltip` component.
-public struct Tooltip<Content: View>: View {
-    @ObservedObject private var state: TooltipState
-    private let title: String?
-    private let description: String
-    private let buttons: [TooltipButton]
-    private let placement: TooltipPlacement
-    private let align: TooltipAlign
-    private let onVisibleChange: ((Bool) -> Void)?
-    private let onPressClose: (() -> Void)?
-    private let content: Content
-
-    public init(
-        state: TooltipState,
-        title: String? = nil,
-        description: String,
-        buttons: [TooltipButton] = [],
-        placement: TooltipPlacement = .top,
-        align: TooltipAlign = .center,
-        onVisibleChange: ((Bool) -> Void)? = nil,
-        onPressClose: (() -> Void)? = nil,
-        @ViewBuilder content: () -> Content
-    ) {
-        self.state = state
-        self.title = title
-        self.description = description
-        self.buttons = buttons
-        self.placement = placement
-        self.align = align
-        self.onVisibleChange = onVisibleChange
-        self.onPressClose = onPressClose
-        self.content = content()
-    }
-
-    public var body: some View {
-        content
-            .anchorPreference(key: TooltipAnchorBoundsKey.self, value: .bounds) { $0 }
-            .overlayPreferenceValue(TooltipAnchorBoundsKey.self) { anchor in
-                GeometryReader { proxy in
-                    if state.isVisible, let anchor = anchor {
-                        let anchorRect = proxy[anchor]
-                        TooltipPopupContent(
-                            title: title,
-                            description: description,
-                            buttons: buttons,
-                            placement: placement,
-                            align: align,
-                            onPressClose: onPressClose
-                        )
-                        .fixedSize()
-                        .modifier(
-                            TooltipPositionModifier(
-                                anchorRect: anchorRect,
-                                containerSize: proxy.size,
-                                placement: placement,
-                                align: align
-                            )
-                        )
-                    }
-                }
-            }
-            .onChange(of: state.isVisible) { newValue in
-                onVisibleChange?(newValue)
-            }
-    }
-}
-
-// MARK: - Positioning
-
-/// Positions the tooltip (already sized via `.fixedSize()`) relative to the anchor,
-/// mirroring `TooltipPositionProvider.calculatePosition`.
-private struct TooltipPositionModifier: ViewModifier {
-    let anchorRect: CGRect
-    let containerSize: CGSize
-    let placement: TooltipPlacement
-    let align: TooltipAlign
-
-    @State private var popupSize: CGSize = .zero
-
-    private var offsetPx: CGFloat {
-        TooltipConst.offset + TooltipConst.arrowSize
-    }
-
-    func body(content: Content) -> some View {
-        content
-            .background(
-                GeometryReader { p in
-                    Color.clear
-                        .onAppear { popupSize = p.size }
-                        .onChange(of: p.size) { popupSize = $0 }
-                }
-            )
-            .offset(x: originX, y: originY)
-    }
-
-    private var originX: CGFloat {
-        let popW = popupSize.width
-        switch placement {
-        case .top, .bottom:
-            return alignHorizontal(anchorRect.minX, anchorRect.width, popW)
-        case .left:
-            return anchorRect.minX - popW - offsetPx
-        case .right:
-            return anchorRect.maxX + offsetPx
-        }
-    }
-
-    private var originY: CGFloat {
-        let popH = popupSize.height
-        switch placement {
-        case .top:
-            return anchorRect.minY - popH - offsetPx
-        case .bottom:
-            return anchorRect.maxY + offsetPx
-        case .left, .right:
-            return alignVertical(anchorRect.minY, anchorRect.height, popH)
-        }
-    }
-
-    private func alignHorizontal(_ anchorX: CGFloat, _ anchorW: CGFloat, _ popW: CGFloat) -> CGFloat {
-        switch align {
-        case .start: return anchorX
-        case .end: return anchorX + anchorW - popW
-        case .center: return anchorX + (anchorW - popW) / 2
-        }
-    }
-
-    private func alignVertical(_ anchorY: CGFloat, _ anchorH: CGFloat, _ popH: CGFloat) -> CGFloat {
-        switch align {
-        case .start: return anchorY
-        case .end: return anchorY + anchorH - popH
-        case .center: return anchorY + (anchorH - popH) / 2
-        }
-    }
-}
-
-// MARK: - Popup content
-
-private struct TooltipPopupContent: View {
-    let title: String?
-    let description: String?
-    let buttons: [TooltipButton]
-    let placement: TooltipPlacement
-    let align: TooltipAlign
-    let onPressClose: (() -> Void)?
-
-    var body: some View {
-        ZStack {
-            VStack(alignment: .leading, spacing: 0) {
-                HStack(alignment: .top, spacing: 0) {
-                    VStack(alignment: .leading, spacing: 0) {
-                        if let title = title, !title.isEmpty {
-                            MomoText(title, typography: .headerSSemibold, color: Colors.black01)
-                                .lineLimit(1)
-                                .truncationMode(.tail)
-                                .padding(.bottom, Spacing.XS)
-                        }
-                        if let description = description, !description.isEmpty {
-                            MomoText(description, typography: .descriptionDefaultRegular, color: Colors.black01)
-                                .lineLimit(2)
-                                .truncationMode(.tail)
-                        }
-                    }
-                    .frame(maxWidth: .infinity, alignment: .leading)
-
-                    if let onPressClose = onPressClose {
-                        Spacer().frame(width: Spacing.M)
-                        SwiftUI.Button(action: onPressClose) {
-                            Icon(source: "navigation_close", size: 20, color: Colors.black01)
-                                .frame(width: 20, height: 20)
-                        }
-                        .buttonStyle(.plain)
-                    }
-                }
-
-                if !buttons.isEmpty {
-                    Spacer().frame(height: Spacing.M)
-                    TooltipButtons(buttons: buttons)
-                        .frame(maxWidth: .infinity, alignment: .trailing)
-                }
-            }
-            .padding(Spacing.M)
-            .frame(maxWidth: TooltipConst.maxWidth, alignment: .leading)
-            .background(Colors.black17)
-            .clipShape(RoundedRectangle(cornerRadius: TooltipConst.cornerRadius))
-        }
-        .overlay(arrow, alignment: arrowAlignment)
-    }
-
-    // MARK: Arrow
-
-    @ViewBuilder
-    private var arrow: some View {
-        let arrowWidth = TooltipConst.arrowSize * 2
-        let arrowHeight = TooltipConst.arrowSize
-        let isVertical = placement == .top || placement == .bottom
-        TooltipArrowShape(placement: placement)
-            .fill(Colors.black17)
-            .frame(
-                width: isVertical ? arrowWidth : arrowHeight,
-                height: isVertical ? arrowHeight : arrowWidth
-            )
-            .offset(x: arrowOffsetX, y: arrowOffsetY)
-    }
-
-    private var arrowAlignment: Alignment {
-        switch placement {
-        case .top:
-            switch align {
-            case .start: return .bottomLeading
-            case .center: return .bottom
-            case .end: return .bottomTrailing
-            }
-        case .bottom:
-            switch align {
-            case .start: return .topLeading
-            case .center: return .top
-            case .end: return .topTrailing
-            }
-        case .left:
-            switch align {
-            case .start: return .topTrailing
-            case .center: return .trailing
-            case .end: return .bottomTrailing
-            }
-        case .right:
-            switch align {
-            case .start: return .topLeading
-            case .center: return .leading
-            case .end: return .bottomLeading
-            }
-        }
-    }
-
-    private var arrowOffsetX: CGFloat {
-        let arrowHeight = TooltipConst.arrowSize
-        switch placement {
-        case .left: return arrowHeight - TooltipConst.arrowOverlap
-        case .right: return -arrowHeight + TooltipConst.arrowOverlap
-        default:
-            switch align {
-            case .start: return TooltipConst.arrowEdgeMargin
-            case .end: return -TooltipConst.arrowEdgeMargin
-            case .center: return 0
-            }
-        }
-    }
-
-    private var arrowOffsetY: CGFloat {
-        let arrowHeight = TooltipConst.arrowSize
-        switch placement {
-        case .top: return arrowHeight - TooltipConst.arrowOverlap
-        case .bottom: return -arrowHeight + TooltipConst.arrowOverlap
-        default:
-            switch align {
-            case .start: return TooltipConst.arrowEdgeMargin
-            case .end: return -TooltipConst.arrowEdgeMargin
-            case .center: return 0
-            }
-        }
-    }
-}
-
-// MARK: - Buttons row
-
-private struct TooltipButtons: View {
-    let buttons: [TooltipButton]
-
-    var body: some View {
-        HStack(spacing: 0) {
-            content
-        }
-    }
-
-    @ViewBuilder
-    private var content: some View {
-        if buttons.count == 1 {
-            TooltipSingleButton(btn: buttons[0])
-        } else if buttons.count == 2 {
-            let primary = buttons[0]
-            let secondary = buttons[1]
-            let bothIcons = primary.icon != nil && secondary.icon != nil
-            if bothIcons {
-                TooltipIconButton(icon: secondary.icon ?? "", onPress: secondary.onPress ?? {})
-                Spacer().frame(width: Spacing.S)
-                TooltipIconButton(icon: primary.icon ?? "", onPress: primary.onPress ?? {})
-            } else {
-                TooltipSecondaryButton(title: secondary.title ?? "", onPress: secondary.onPress ?? {})
-                Spacer().frame(width: Spacing.S)
-                TooltipPrimaryButton(title: primary.title ?? "", onPress: primary.onPress ?? {})
-            }
-        } else {
-            ForEach(Array(buttons.enumerated()), id: \.offset) { index, btn in
-                if index > 0 {
-                    Spacer().frame(width: Spacing.XXS)
-                }
-                TooltipSingleButton(btn: btn)
-            }
-        }
-    }
-}
-
-private func tooltipLimitWithEllipsis(_ value: String, max: Int = 16) -> String {
-    value.count > max ? String(value.prefix(max)) + "…" : value
-}
-
-private struct TooltipSingleButton: View {
-    let btn: TooltipButton
-
-    var body: some View {
-        if let icon = btn.icon {
-            TooltipIconButton(icon: icon, onPress: btn.onPress ?? {})
-        } else {
-            TooltipPrimaryButton(title: btn.title ?? "", onPress: btn.onPress ?? {})
-        }
-    }
-}
-
-private struct TooltipPrimaryButton: View {
-    let title: String
-    let onPress: () -> Void
-
-    var body: some View {
-        Button(
-            title: tooltipLimitWithEllipsis(title),
-            action: onPress,
-            type: .secondary,
-            size: .medium,
-            isFull: false
-        )
-    }
-}
-
-private struct TooltipSecondaryButton: View {
-    let title: String
-    let onPress: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: onPress) {
-            MomoText(tooltipLimitWithEllipsis(title), typography: .actionSBold, color: Colors.black01)
-                .lineLimit(1)
-                .truncationMode(.tail)
-                .padding(.horizontal, Spacing.M)
-                .padding(.vertical, Spacing.S)
-        }
-        .buttonStyle(.plain)
-    }
-}
-
-private struct TooltipIconButton: View {
-    let icon: String
-    let onPress: () -> Void
-
-    var body: some View {
-        let iconButtonSize = scaleSize(36)
-        SwiftUI.Button(action: onPress) {
-            Icon(source: icon, size: 24)
-                .frame(width: iconButtonSize, height: iconButtonSize)
-                .background(Colors.black01)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
-        }
-        .buttonStyle(.plain)
-    }
-}

package/ios/Typography/FontScaleStore.swift

@@ -1,19 +0,0 @@
-import CoreGraphics
-
-/// App-wide font-scale preference for the SwiftUI kit. An exported holder the host writes once at
-/// app startup (from the cache-backed `FontScaleProvider`); `scaleSize`/`appFont` read the snapshot.
-/// No realtime: the SwiftUI kit has no navigation container to scope reactive updates, so a startup
-/// snapshot is enough. When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the
-/// OS Dynamic Type factor.
-public final class FontScaleStore {
-    public static let shared = FontScaleStore()
-    private init() {}
-
-    public private(set) var userScaleRate: CGFloat = 1
-    public private(set) var useOSScaleRate: Bool = true
-
-    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
-        self.userScaleRate = userScaleRate
-        self.useOSScaleRate = useOSScaleRate
-    }
-}

package/ios/Uploader/Uploader.swift

@@ -1,183 +0,0 @@
-import SwiftUI
-
-/// Native SwiftUI port of the Compose `Uploader` component.
-///
-/// Renders a horizontal row with an optional dashed "add image" picker cell
-/// followed by a horizontally scrollable list of uploaded image thumbnails.
-/// Each thumbnail can show a loading shimmer overlay and an optional cancel
-/// button.
-///
-/// Mirrors the Compose surface in
-/// `compose/.../components/Uploader.kt`:
-/// - `images`, `numberOfImages`, `disabled`, `width`, `height`
-/// - callbacks `onAdd`, `onCancel`, `onPressImage`
-///
-/// Note: like Compose, this component does NOT perform any native photo-picker
-/// or file-system access. It exposes the `onAdd` callback so the host can
-/// present a picker and supply the resulting image data back via the `images`
-/// list (the demo passes mock image URLs).
-public struct UploadImage: Identifiable {
-    public let id = UUID()
-    public var uri: String?
-    public var loading: Bool
-
-    public init(uri: String? = nil, loading: Bool = false) {
-        self.uri = uri
-        self.loading = loading
-    }
-}
-
-public struct Uploader: View {
-    // MARK: Properties
-
-    private let images: [UploadImage]
-    private let numberOfImages: Int
-    private let disabled: Bool
-    private let width: CGFloat
-    private let height: CGFloat
-    private let onAdd: () -> Void
-    private let onCancel: ((UploadImage, Int) -> Void)?
-    private let onPressImage: (UploadImage, Int) -> Void
-
-    // MARK: Lifecycle
-
-    public init(
-        images: [UploadImage],
-        numberOfImages: Int = 1,
-        disabled: Bool = false,
-        width: CGFloat = 64,
-        height: CGFloat = 64,
-        onAdd: @escaping () -> Void = {},
-        onCancel: ((UploadImage, Int) -> Void)? = nil,
-        onPressImage: @escaping (UploadImage, Int) -> Void = { _, _ in }
-    ) {
-        self.images = images
-        self.numberOfImages = numberOfImages
-        self.disabled = disabled
-        self.width = width
-        self.height = height
-        self.onAdd = onAdd
-        self.onCancel = onCancel
-        self.onPressImage = onPressImage
-    }
-
-    // MARK: Body
-
-    private var shouldShowPicker: Bool {
-        images.count < numberOfImages
-    }
-
-    public var body: some View {
-        HStack(alignment: .top, spacing: Spacing.S) {
-            if shouldShowPicker {
-                UploaderPickerCell(
-                    disabled: disabled,
-                    width: width,
-                    height: height,
-                    onAdd: onAdd
-                )
-            }
-
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(alignment: .top, spacing: Spacing.S) {
-                    ForEach(Array(images.enumerated()), id: \.element.id) { index, image in
-                        UploaderImageItem(
-                            image: image,
-                            width: width,
-                            height: height,
-                            index: index,
-                            onCancel: onCancel,
-                            onPressImage: { onPressImage(image, index) }
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
-
-// MARK: - Picker cell
-
-private struct UploaderPickerCell: View {
-    @Environment(\.appTheme) private var theme
-
-    let disabled: Bool
-    let width: CGFloat
-    let height: CGFloat
-    let onAdd: () -> Void
-
-    // text.disable / text.hint and border.disable / border.default tokens.
-    private var mainColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.hint }
-    private var borderColor: Color { disabled ? theme.colors.border.disable : theme.colors.border.default }
-
-    var body: some View {
-        SwiftUI.Button(action: { if !disabled { onAdd() } }) {
-            VStack(spacing: Spacing.XXS) {
-                Icon(source: "16_navigation_plus", size: 16, color: mainColor)
-                MomoText("Thêm hình", typography: .descriptionXsRegular, color: mainColor)
-            }
-            .frame(width: width, height: height)
-            .background(
-                RoundedRectangle(cornerRadius: Radius.XS)
-                    .strokeBorder(
-                        borderColor,
-                        style: StrokeStyle(lineWidth: 1, dash: [10, 6])
-                    )
-            )
-            .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
-        }
-        .buttonStyle(ActiveOpacityButtonStyle())
-        .disabled(disabled)
-    }
-}
-
-// MARK: - Image item
-
-private struct UploaderImageItem: View {
-    let image: UploadImage
-    let width: CGFloat
-    let height: CGFloat
-    let index: Int
-    let onCancel: ((UploadImage, Int) -> Void)?
-    let onPressImage: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: onPressImage) {
-            ZStack(alignment: .topTrailing) {
-                ImageView(image.uri ?? "", contentMode: .fill)
-                    .frame(width: width, height: height)
-                    .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
-
-                if image.loading {
-                    Skeleton()
-                        .frame(width: width, height: height)
-                        .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
-                        .background(
-                            Color.white.opacity(0.4)
-                                .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
-                        )
-                }
-
-                if let onCancel, !image.loading {
-                    SwiftUI.Button(action: { onCancel(image, index) }) {
-                        Icon(source: "navigation_close_circle_full", size: 16, color: nil)
-                    }
-                    .buttonStyle(ActiveOpacityButtonStyle())
-                    .padding(.top, Spacing.XXS)
-                    .padding(.trailing, Spacing.XXS)
-                }
-            }
-            .frame(width: width, height: height)
-        }
-        .buttonStyle(ActiveOpacityButtonStyle())
-    }
-}
-
-// MARK: - Active opacity button style
-
-private struct ActiveOpacityButtonStyle: ButtonStyle {
-    func makeBody(configuration: Configuration) -> some View {
-        configuration.label
-            .opacity(configuration.isPressed ? 0.5 : 1)
-    }
-}

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,20 +0,0 @@
-Pod::Spec.new do |s|
-  s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.162.2-beta.26'
-  s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
-  s.homepage         = 'https://momo.vn'
-  s.license          = { :type => 'MIT' }
-  s.author           = { 'MoMo' => 'dev@momo.vn' }
-  s.source           = { :path => '.' }
-
-  s.ios.deployment_target = '15.0'
-  s.swift_version         = '5.0'
-
-  s.source_files = 'Sources/**/*.{swift}'
-  s.resource_bundles = {
-    'MoMoUIKitsDemoResources' => ['Resources/**/*']
-  }
-  s.frameworks   = 'SwiftUI', 'UIKit'
-  s.dependency 'MoMoUIKits'
-  s.dependency 'lottie-ios', '4.6.0'
-end