@momo-kits/native-kits 0.162.2-debug → 0.162.2-sp.1-debug

package/ios/Uploader/Uploader.swift

@@ -0,0 +1,183 @@
+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/native-kits.podspec

@@ -1,21 +1,71 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '1.0.0'
+  s.version          = '0.162.2-sp.1'
   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.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.3'
+  s.dependency       'lottie-ios', '4.5.2'
   s.dependency  'SkeletonUI', '1.0.11'
 end
-
-

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -0,0 +1,18 @@
+Pod::Spec.new do |s|
+  s.name             = 'MoMoUIKitsDemo'
+  s.version          = '0.162.2-sp.1'
+  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.resources    = 'Resources/**/*'
+  s.frameworks   = 'SwiftUI', 'UIKit'
+  s.dependency 'MoMoUIKits'
+  s.dependency 'lottie-ios', '4.5.2'
+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
+```