@momo-kits/native-kits 0.163.1-beta.2 → 0.163.1-beta.20-debug

package/ios/Typography/Typography.swift

@@ -11,35 +11,33 @@ public extension View {
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
-        let config = FontScaleStore.shared.config
+        if !FontScaleStore.shared.useOSScaleRate {
+            return Font.system(size: size * FontScaleStore.shared.userScaleRate)
+        }
         let defaultScreenSize: CGFloat = 375
         let maxFontScale: CGFloat = 1.5
         let maxDeviceScale: CGFloat = 5
 
-        if !config.useOSFontScale {
-            let customRate = config.userScaleRate ?? 1
-            let scaled = customRate > 1 ? size * customRate : size
-            return Font.system(size: scaled)
-        }
-
-        let deviceScale = UIScreen.main.bounds.width / defaultScreenSize
+        let deviceWidth = UIScreen.main.bounds.width
+        let deviceScale = deviceWidth / defaultScreenSize
 
         let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
         let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
-        let osFontScale = scaledFont.pointSize / defaultFont.pointSize
+        let fontScale = scaledFont.pointSize / defaultFont.pointSize
 
         var fontSize = size
 
         if deviceScale > 1 {
             fontSize = min(fontSize * deviceScale, fontSize + maxDeviceScale)
         }
-        if osFontScale > 1 {
-            fontSize = min(fontSize * osFontScale, fontSize * maxFontScale)
+
+        if fontScale > 1 {
+            fontSize = min(fontSize * fontScale, fontSize * maxFontScale)
         }
 
         return Font.system(size: fontSize)
     }
-    
+
     // New supported typography styles
     static let headline_default_bold = appFont(size: 24).weight(.bold)
     static let header_m_bold = appFont(size: 18).weight(.bold)
@@ -57,7 +55,7 @@ public extension Font {
     static let action_s_bold = appFont(size: 14).weight(.bold)
     static let action_xs_bold = appFont(size: 12).weight(.bold)
     static let action_xxs_bold = appFont(size: 10).weight(.bold)
-    
+
     // Legacy styles
     static let headline_default = appFont(size: 28).weight(.semibold)
     static let headline_s = appFont(size: 24).weight(.semibold)
@@ -82,7 +80,7 @@ public extension Font {
     static let action_xxs = appFont(size: 10).weight(.bold)
     static let action_xs = appFont(size: 12).weight(.bold)
     static let action_s = appFont(size: 15).weight(.bold)
-    
+
     // deprecated
     static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)

package/ios/Uploader/Uploader.swift

@@ -0,0 +1,174 @@
+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())
+    }
+}

package/ios/native-kits.podspec

@@ -1,21 +1,74 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '1.0.0'
+  s.version          = '0.163.1-beta.20'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
-  s.license          = { :type => 'MIT', :file => 'LICENSE' }
+  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.module_name           = 'MoMoUIKits'
 
-  s.source_files       = "**/*.{swift,m,h}"
+  s.source_files       = [
+    "Application/**/*.{swift,m,h}",
+    "Avatar/**/*.{swift,m,h}",
+    "Badge/**/*.{swift,m,h}",
+    "BaselineView/**/*.{swift,m,h}",
+    "Button/**/*.{swift,m,h}",
+    "CalculatorKeyboard/**/*.{swift,m,h}",
+    "Carousel/**/*.{swift,m,h}",
+    "Checkbox/**/*.{swift,m,h}",
+    "Chip/**/*.{swift,m,h}",
+    "Collapse/**/*.{swift,m,h}",
+    "Colors+Radius+Spacing/**/*.{swift,m,h}",
+    "DateTimePicker/**/*.{swift,m,h}",
+    "Divider/**/*.{swift,m,h}",
+    "Extensions/**/*.{swift,m,h}",
+    "Icon/**/*.{swift,m,h}",
+    "IconButton/**/*.{swift,m,h}",
+    "Image/**/*.{swift,m,h}",
+    "Information/**/*.{swift,m,h}",
+    "Input/**/*.{swift,m,h}",
+    "InputDropDown/**/*.{swift,m,h}",
+    "InputMoney/**/*.{swift,m,h}",
+    "InputOTP/**/*.{swift,m,h}",
+    "Loader/**/*.{swift,m,h}",
+    "Lottie/**/*.{swift,m,h}",
+    "OTPKeyboard/**/*.{swift,m,h}",
+    "Pagination/**/*.{swift,m,h}",
+    "Popup/**/*.{swift,m,h}",
+    "PopupView/**/*.{swift,m,h}",
+    "ProgressInfo/**/*.{swift,m,h}",
+    "Radio/**/*.{swift,m,h}",
+    "Rating/**/*.{swift,m,h}",
+    "ScrollIndicator/**/*.{swift,m,h}",
+    "Skeleton/**/*.{swift,m,h}",
+    "Slider/**/*.{swift,m,h}",
+    "StatusBarTap/**/*.{swift,m,h}",
+    "Stepper/**/*.{swift,m,h}",
+    "Steps/**/*.{swift,m,h}",
+    "SuggestAction/**/*.{swift,m,h}",
+    "Swipeable/**/*.{swift,m,h}",
+    "Switch/**/*.{swift,m,h}",
+    "TabView/**/*.{swift,m,h}",
+    "Tag/**/*.{swift,m,h}",
+    "Template/**/*.{swift,m,h}",
+    "Title/**/*.{swift,m,h}",
+    "Tooltip/**/*.{swift,m,h}",
+    "Typography/**/*.{swift,m,h}",
+    "Uploader/**/*.{swift,m,h}"
+  ]
+  s.resource_bundles = {
+    'MoMoUIKitsResources' => ['Resources/**/*']
+  }
   s.public_header_files = "StatusBarTap/*.h"
-  s.framework             = 'SwiftUI', 'Combine'
-  s.dependency  'SDWebImageSwiftUI'
-  s.dependency       'lottie-ios'
+  s.frameworks             = 'SwiftUI', 'Combine'
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES'
+  }
+  s.dependency  'SDWebImageSwiftUI', '2.2.1'
+  s.dependency       'lottie-ios', '4.6.0'
   s.dependency  'SkeletonUI', '1.0.11'
 end
-
-

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -0,0 +1,20 @@
+Pod::Spec.new do |s|
+  s.name             = 'MoMoUIKitsDemo'
+  s.version          = '0.163.1-beta.20'
+  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

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
+```