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

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputDropDownDemo.swift

@@ -0,0 +1,136 @@
+//
+//  InputDropDownDemo.swift
+//  Example
+//
+//  Showcases InputDropDown mirroring InputDropDownUsage.kt.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct InputDropDownDemo: View {
+    @State private var empty = ""
+    @State private var errorValue = "Error input"
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20) {
+                Text("InputDropDown Demo")
+                    .font(.title1)
+
+                Group {
+                    Text("Size").font(.headerText1)
+                    InputDropDown(value: $empty, placeholder: "Input small", size: .small)
+                    InputDropDown(value: $empty, placeholder: "Input large", size: .large)
+                }
+
+                Group {
+                    Text("Floating Value").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Title",
+                        floatingIcon: "basic_home",
+                        placeholder: "Select options"
+                    )
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Title",
+                        floatingIcon: "basic_home",
+                        floatingIconColor: Colors.pink03,
+                        placeholder: "Select options"
+                    )
+                }
+
+                Group {
+                    Text("Error message").font(.headerText1)
+                    InputDropDown(
+                        value: $errorValue,
+                        placeholder: "Error input",
+                        error: "Error message"
+                    )
+                }
+
+                Group {
+                    Text("Hint message").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        placeholder: "Error input",
+                        hintText: "Hint message"
+                    )
+                }
+
+                Group {
+                    Text("Disabled").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Title",
+                        floatingIcon: "basic_home",
+                        placeholder: "Disabled input",
+                        disabled: true
+                    )
+                }
+
+                Group {
+                    Text("Error spacing").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        placeholder: "",
+                        errorSpacing: true
+                    )
+                }
+
+                Group {
+                    Text("Leading Icon").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Small input",
+                        placeholder: "Leading icon",
+                        leadingIcon: "basic_home"
+                    )
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Large input",
+                        placeholder: "Leading icon",
+                        size: .large,
+                        leadingIcon: "basic_home"
+                    )
+                }
+
+                Group {
+                    Text("Icon").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        placeholder: "Right icon",
+                        icon: "arrow_chevron_down_small"
+                    )
+                    InputDropDown(
+                        value: $empty,
+                        placeholder: "Right icon",
+                        icon: "arrow_chevron_down_small",
+                        iconColor: Colors.pink03
+                    )
+                }
+
+                Group {
+                    Text("Required").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        floatingValue: "Title",
+                        placeholder: "Required field",
+                        required: true
+                    )
+                }
+
+                Group {
+                    Text("Loading").font(.headerText1)
+                    InputDropDown(
+                        value: $empty,
+                        placeholder: "Loading",
+                        loading: true
+                    )
+                }
+            }
+            .padding()
+        }
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputMoneyDemo.swift

@@ -0,0 +1,107 @@
+//
+//  InputMoneyDemo.swift
+//  Example
+//
+//  Usage demo for InputMoney. Mirrors Compose's InputMoneyUsage preview cases.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputMoneyDemo: View {
+    @State private var text1 = ""
+    @State private var text2 = ""
+    @State private var text3 = ""
+    @State private var text4 = ""
+    @State private var text5 = ""
+    @State private var text6 = ""
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section(title: "Size") {
+                    InputMoney(
+                        text: $text1,
+                        placeholder: "Small",
+                        size: .small,
+                        onChangeText: { text1 = $0 }
+                    )
+                    InputMoney(
+                        text: $text2,
+                        placeholder: "Large",
+                        size: .large,
+                        onChangeText: { text2 = $0 }
+                    )
+                }
+
+                section(title: "Floating Value") {
+                    InputMoney(
+                        text: $text3,
+                        floatingValue: "Amount",
+                        floatingIcon: "basic_home",
+                        floatingIconColor: Colors.pink03,
+                        placeholder: "Enter amount",
+                        onChangeText: { text3 = $0 }
+                    )
+                }
+
+                section(title: "Error") {
+                    InputMoney(
+                        text: $text4,
+                        placeholder: "Enter amount",
+                        error: "Invalid amount",
+                        onChangeText: { text4 = $0 }
+                    )
+                }
+
+                section(title: "Disabled") {
+                    InputMoney(
+                        text: .constant(""),
+                        placeholder: "Enter amount",
+                        disabled: true,
+                        icon: "basic_home"
+                    )
+                }
+
+                section(title: "Icon") {
+                    InputMoney(
+                        text: $text5,
+                        floatingValue: "Amount",
+                        placeholder: "With icon",
+                        icon: "basic_home",
+                        iconColor: Colors.pink03,
+                        onChangeText: { text5 = $0 }
+                    )
+                }
+
+                section(title: "Error spacing") {
+                    InputMoney(
+                        text: $text6,
+                        placeholder: "Enter amount",
+                        errorSpacing: true,
+                        onChangeText: { text6 = $0 }
+                    )
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(title)
+                .font(.headline)
+                .foregroundColor(.secondary)
+            content()
+        }
+    }
+}
+
+#if DEBUG
+struct InputMoneyDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        InputMoneyDemo()
+    }
+}
+#endif

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputOTPDemo.swift

@@ -0,0 +1,73 @@
+//
+//  InputOTPDemo.swift
+//  Example
+//
+//  Mirrors Compose `InputOTPUsage` (Preview cases): floating value, placeholder,
+//  error message, error spacing, and a fixed-length numeric variant.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputOTPDemo: View {
+    @State private var value1 = ""
+    @State private var value2 = ""
+    @State private var value3 = ""
+    @State private var value4 = ""
+    @State private var value5 = ""
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Floating Value") {
+                    InputOTP(
+                        value: $value1,
+                        floatingValue: "Nhập mã xác thực OTP"
+                    )
+                }
+
+                section("Placeholder") {
+                    InputOTP(
+                        value: $value2,
+                        floatingValue: "",
+                        placeholder: "Placeholder text"
+                    )
+                }
+
+                section("Error Message") {
+                    InputOTP(
+                        value: $value3,
+                        errorMessage: "Error",
+                        floatingValue: ""
+                    )
+                }
+
+                section("Error Spacing") {
+                    InputOTP(
+                        value: $value4,
+                        errorSpacing: true,
+                        floatingValue: ""
+                    )
+                }
+
+                section("Data Type (length 6, number)") {
+                    InputOTP(
+                        value: $value5,
+                        length: 6,
+                        floatingValue: "",
+                        dataType: "number"
+                    )
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            MomoText(title, typography: .headerSSemibold)
+            content()
+        }
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputPhoneNumberDemo.swift

@@ -0,0 +1,100 @@
+//
+//  InputPhoneNumberDemo.swift
+//  Example
+//
+//  Created by sophia on 20/10/25.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+public struct InputPhoneNumberDemo: View {
+    @State private var textValue1 = ""
+    @State private var textValue2 = ""
+    @State private var textValue3 = ""
+    @State private var textValue4 = ""
+    @State private var textValue5 = ""
+    @State private var textValue6 = ""
+    @State private var textValue7 = ""
+    @State private var textValue8 = ""
+    @State private var textValue9 = ""
+    
+    public var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20) {
+                Text("Input Phone Number Demo")
+                    .font(.title1)
+                
+                Group {
+                    Text("Size")
+                        .font(.headerText1)
+                    
+                    InputPhoneNumber(text: $textValue1, placeholder: "Small", size: .small, autofocus: true, accessibilityLabel: "ehjgfruweyg")
+                    InputPhoneNumber(text: $textValue2, placeholder: "Large", size: .large)
+                }
+                
+                Group {
+                    Text("Hint text")
+                        .font(.headerText1)
+                    
+                    InputPhoneNumber(text: $textValue3, placeholder: "Enter here", hintText: "Hint text")
+                }
+                
+                Group {
+                    Text("Error")
+                        .font(.headerText1)
+                    
+                    InputPhoneNumber(text: $textValue4, placeholder: "Enter here", error: "error message")
+                }
+                
+                Group {
+                    Text("Loading")
+                        .font(.headerText1)
+                    
+                    InputPhoneNumber(text: $textValue8, placeholder: "Loading", loading: true)
+                }
+                
+                Group {
+                    Text("Trailing Icon")
+                        .font(.headerText1)
+                    
+                    InputPhoneNumber(text: $textValue9, placeholder: "Font Weight", rightIcon: "24_ic_public", rightIconColor: Colors.pink03)
+                }
+            }
+            .padding()
+        }
+    }
+}
+
+public struct PhoneUtil {
+    public static func formatPhoneNumber(_ phone: String) -> String {
+        phone.filter { $0.isNumber }
+    }
+
+    @discardableResult
+    public static func checkValidPhoneNumber(_ phone: String) -> (formatted: String, isValid: Bool, message: String) {
+        var phoneNumber = phone
+        var message = ""
+        var isValid = false
+
+        if !phoneNumber.isEmpty,
+           let first = phoneNumber.first,
+           first != "0",
+           first.isNumber,
+           phoneNumber.count == 9 {
+            phoneNumber = "0" + phoneNumber
+        }
+
+        let formatted = formatPhoneNumber(phoneNumber)
+
+        if formatted.isEmpty {
+            message = "Vui lòng nhập số điện thoại"
+        } else if formatted.count < 9 || formatted.count > 11 {
+            message = "Số điện thoại không đúng"
+        } else {
+            isValid = true
+        }
+
+        return (formatted, isValid, message)
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputSearchDemo.swift

@@ -0,0 +1,32 @@
+//
+//  InputSearchDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 3/12/24.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+// Your imports remain the same
+
+public struct InputSearchDemo: View {
+    @State private var text = ""
+    
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Spacer().frame(height: 12)
+            
+            InputSearch(
+                text: $text,
+                buttonText: "Huỷ",
+                showButtonText: true,
+                placeholder: "Search",
+                onChangeText: { newText in
+                    text = newText
+                },
+                icon: "24_navigation_close_circle_full"
+            )
+        }.frame(height: 40).padding()
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputTextAreaDemo.swift

@@ -0,0 +1,57 @@
+//
+//  InputTextAreaDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 2/12/24.
+//
+import SwiftUI
+import MoMoUIKits
+
+struct InputTextAreaDemo: View {
+    var body: some View {
+        NavigationView {
+            ScrollView {
+                VStack(alignment: .leading, spacing: 16) {
+                    Text("Preview")
+                        .font(.headline)
+                    
+                    TextAreaPreview()
+                    
+//                    Text("Playground")
+//                        .font(.headline)
+                    
+//                    TextAreaPlayground()
+                }
+                .padding()
+            }
+           
+        }
+    }
+}
+
+struct TextAreaPreview: View {
+    @State private var text = ""
+    let url = "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/momomain_momo.png"
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text("Floating Value")
+            InputTextArea(text: $text,
+                          floatingValue: "Momo",
+                          floatingIcon: url, floatingIconColor: Colors.pink03)
+            
+            Text("Error")
+            InputTextArea(text: .constant("Error"),
+                          error: "Error")
+            
+            Text("Error Spacing")
+            InputTextArea(text: .constant("Error"),
+                          errorSpacing: true)
+            
+            Text("Disabled")
+            InputTextArea(text: .constant("Disabled"),
+                          disabled: true)
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/LoaderDemo.swift

@@ -0,0 +1,70 @@
+//
+//  LoaderDemo.swift
+//  Example
+//
+//  Mirrors sample/shared LoaderUsage.kt
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct LoaderDemo: View {
+    @State private var progress: CGFloat = 50
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                row("DotLoader (default)") {
+                    DotLoader()
+                }
+                row("DotLoader with tint") {
+                    DotLoader(tintColor: Colors.pink03)
+                }
+                row("SpinnerLoader (default)") {
+                    SpinnerLoader()
+                }
+                row("SpinnerLoader with tint") {
+                    SpinnerLoader(tintColor: Colors.pink03)
+                }
+                row("Loader(type: .dot)") {
+                    Loader(type: .dot)
+                }
+                row("Loader(type: .spinner)") {
+                    Loader(type: .spinner, tintColor: Colors.pink03)
+                }
+                row("ProgressBar 0%") {
+                    ProgressBar(percent: 0)
+                }
+                row("ProgressBar 40%") {
+                    ProgressBar(percent: 40)
+                }
+                row("ProgressBar 100%") {
+                    ProgressBar(percent: 100)
+                }
+                row("ProgressBar with tint (65%)") {
+                    ProgressBar(percent: 65, color: Colors.pink03)
+                }
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("ProgressBar (interactive: \(Int(progress))%)")
+                        .font(.subheadline)
+                    ProgressBar(percent: progress, color: Colors.pink03)
+                    Slider(value: $progress, in: 0...100)
+                }
+            }
+            .padding()
+        }
+    }
+
+    @ViewBuilder
+    private func row<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(title)
+                .font(.subheadline)
+            content()
+        }
+    }
+}
+
+#Preview {
+    LoaderDemo()
+}