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

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

@@ -0,0 +1,117 @@
+//
+//  InputDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's InputUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputPreview() }, playground: { InputPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputPreview: View {
+    @State private var t1 = ""
+    @State private var t2 = ""
+    @State private var t3 = ""
+    @State private var t4 = ""
+    @State private var t5 = ""
+    @State private var t6 = ""
+    @State private var t7 = ""
+
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            Input(text: $t1, placeholder: "Small", size: .small)
+            Input(text: $t1, placeholder: "Large", size: .large)
+        }
+        BasicColumnBox("Floating Value", alignment: .leading) {
+            Input(text: $t2, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo")
+        }
+        BasicColumnBox("Secure Text Entry", alignment: .leading) {
+            Input(text: $t3, placeholder: "Enter here", floatingValue: "Momo", secureTextEntry: true)
+        }
+        BasicColumnBox("Hint", alignment: .leading) {
+            Input(text: $t4, placeholder: "Enter here", hintText: "Hint text")
+        }
+        BasicColumnBox("Error", alignment: .leading) {
+            Input(text: $t5, placeholder: "Enter here", error: "Error")
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Input(text: $t6, placeholder: "Enter here", disabled: true, leadingIcon: "01.MoMo")
+        }
+        BasicColumnBox("Loading", alignment: .leading) {
+            Input(text: $t7, placeholder: "Loading", floatingValue: "Loading", loading: true, required: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputPlayground: View {
+    @State private var text = ""
+    @State private var placeholder = "Placeholder"
+    @State private var floatingValue = ""
+    @State private var hintText = ""
+    @State private var error = ""
+    @State private var size: PlaygroundOption? = inputSizeList.first { $0.key == "small" }
+    @State private var fontWeight: PlaygroundOption? = inputFontWeightList.first { $0.key == "regular" }
+    @State private var keyboardType: PlaygroundOption? = keyboardTypeList.first { $0.key == "default" }
+    @State private var leadingIcon: PlaygroundOption?
+    @State private var rightIcon: PlaygroundOption?
+    @State private var maxLength = ""
+    @State private var disabled = false
+    @State private var secure = false
+    @State private var loading = false
+    @State private var required = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Input(
+                    text: $text,
+                    placeholder: placeholder,
+                    floatingValue: floatingValue,
+                    size: (size?.value as? InputSize) ?? .small,
+                    hintText: hintText,
+                    error: error,
+                    disabled: disabled,
+                    secureTextEntry: secure,
+                    rightIcon: (rightIcon?.value as? String) ?? "",
+                    leadingIcon: (leadingIcon?.value as? String) ?? "",
+                    loading: loading,
+                    required: required,
+                    maxLength: maxLength.isEmpty ? nil : Int(maxLength),
+                    fontWeight: (fontWeight?.value as? InputFontWeight) ?? .regular,
+                    keyboardType: (keyboardType?.value as? UIKeyboardType) ?? .default
+                )
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("FloatingValue", $floatingValue),
+                .string("HintText", $hintText),
+                .string("Error", $error),
+                .radio("Size", inputSizeList, $size),
+                .radio("FontWeight", inputFontWeightList, $fontWeight),
+                .radio("KeyboardType", keyboardTypeList, $keyboardType),
+                .option("LeadingIcon", playgroundIcons, $leadingIcon),
+                .option("RightIcon", playgroundIcons, $rightIcon),
+                .number("MaxLength", $maxLength),
+                .checkbox("Disabled", $disabled),
+                .checkbox("SecureTextEntry", $secure),
+                .checkbox("Loading", $loading),
+                .checkbox("Required", $required),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,94 @@
+//
+//  InputDropDownDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputDropDown.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputDropDownDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputDropDownPreview() }, playground: { InputDropDownPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputDropDownPreview: View {
+    @State private var empty = ""
+    @State private var errorValue = "Error input"
+
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            InputDropDown(value: $empty, placeholder: "Input small", size: .small)
+            InputDropDown(value: $empty, placeholder: "Input large", size: .large)
+        }
+        BasicColumnBox("Floating Value", alignment: .leading) {
+            InputDropDown(value: $empty, floatingValue: "Title", floatingIcon: "basic_home", placeholder: "Select options")
+        }
+        BasicColumnBox("Error message", alignment: .leading) {
+            InputDropDown(value: $errorValue, placeholder: "Error input", error: "Error message")
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            InputDropDown(value: $empty, floatingValue: "Title", floatingIcon: "basic_home", placeholder: "Disabled input", disabled: true)
+        }
+        BasicColumnBox("Leading Icon", alignment: .leading) {
+            InputDropDown(value: $empty, floatingValue: "Small input", placeholder: "Leading icon", leadingIcon: "basic_home")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputDropDownPlayground: View {
+    @State private var value = ""
+    @State private var placeholder = "Select options"
+    @State private var floatingValue = ""
+    @State private var hintText = ""
+    @State private var error = ""
+    @State private var size: PlaygroundOption? = inputSizeList.first { $0.key == "small" }
+    @State private var leadingIcon: PlaygroundOption?
+    @State private var disabled = false
+    @State private var errorSpacing = false
+    @State private var loading = false
+    @State private var required = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputDropDown(
+                    value: $value,
+                    floatingValue: floatingValue,
+                    placeholder: placeholder,
+                    size: (size?.value as? InputSize) ?? .small,
+                    hintText: hintText,
+                    error: error,
+                    errorSpacing: errorSpacing,
+                    disabled: disabled,
+                    leadingIcon: (leadingIcon?.value as? String) ?? "",
+                    loading: loading,
+                    required: required
+                )
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("FloatingValue", $floatingValue),
+                .string("HintText", $hintText),
+                .string("Error", $error),
+                .radio("Size", inputSizeList, $size),
+                .option("LeadingIcon", playgroundIcons, $leadingIcon),
+                .checkbox("Disabled", $disabled),
+                .checkbox("ErrorSpacing", $errorSpacing),
+                .checkbox("Loading", $loading),
+                .checkbox("Required", $required),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,94 @@
+//
+//  InputMoneyDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputMoney.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputMoneyDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputMoneyPreview() }, playground: { InputMoneyPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputMoneyPreview: View {
+    @State private var t1 = ""
+    @State private var t2 = ""
+    @State private var t3 = ""
+    @State private var t4 = ""
+
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            InputMoney(text: $t1, placeholder: "Small", size: .small, onChangeText: { t1 = $0 })
+            InputMoney(text: $t2, placeholder: "Large", size: .large, onChangeText: { t2 = $0 })
+        }
+        BasicColumnBox("Floating Value", alignment: .leading) {
+            InputMoney(text: $t3, floatingValue: "Amount", floatingIcon: "basic_home", floatingIconColor: Colors.pink03, placeholder: "Enter amount", onChangeText: { t3 = $0 })
+        }
+        BasicColumnBox("Error", alignment: .leading) {
+            InputMoney(text: $t4, placeholder: "Enter amount", error: "Invalid amount", onChangeText: { t4 = $0 })
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            InputMoney(text: .constant(""), placeholder: "Enter amount", disabled: true, icon: "basic_home")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputMoneyPlayground: View {
+    @State private var text = ""
+    @State private var placeholder = "0đ"
+    @State private var floatingValue = ""
+    @State private var error = ""
+    @State private var size: PlaygroundOption? = inputSizeList.first { $0.key == "small" }
+    @State private var fontWeight: PlaygroundOption? = inputFontWeightList.first { $0.key == "bold" }
+    @State private var icon: PlaygroundOption?
+    @State private var disabled = false
+    @State private var errorSpacing = false
+    @State private var loading = false
+    @State private var required = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputMoney(
+                    text: $text,
+                    floatingValue: floatingValue,
+                    placeholder: placeholder,
+                    size: (size?.value as? InputSize) ?? .small,
+                    error: error,
+                    errorSpacing: errorSpacing,
+                    disabled: disabled,
+                    icon: (icon?.value as? String) ?? "",
+                    loading: loading,
+                    required: required,
+                    fontWeight: (fontWeight?.value as? InputFontWeight) ?? .bold,
+                    onChangeText: { text = $0 }
+                )
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("FloatingValue", $floatingValue),
+                .string("Error", $error),
+                .radio("Size", inputSizeList, $size),
+                .radio("FontWeight", inputFontWeightList, $fontWeight),
+                .option("Icon", playgroundIcons, $icon),
+                .checkbox("Disabled", $disabled),
+                .checkbox("ErrorSpacing", $errorSpacing),
+                .checkbox("Loading", $loading),
+                .checkbox("Required", $required),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,88 @@
+//
+//  InputOTPDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputOTP.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// Component-specific option maps (mirror otpLengthList / otpDataTypeList in DemoScreen.kt).
+private let otpLengthList: [PlaygroundOption] = [
+    .init("2", 2), .init("4", 4), .init("6", 6), .init("8", 8), .init("10", 10),
+]
+private let otpDataTypeList: [PlaygroundOption] = [
+    .init("number", "number"), .init("string", "string"),
+]
+
+struct InputOTPDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputOTPPreview() }, playground: { InputOTPPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputOTPPreview: View {
+    @State private var v1 = ""
+    @State private var v2 = ""
+    @State private var v3 = ""
+    @State private var v4 = ""
+
+    var body: some View {
+        BasicColumnBox("Floating Value", alignment: .leading) {
+            InputOTP(value: $v1, floatingValue: "Nhập mã xác thực OTP")
+        }
+        BasicColumnBox("Placeholder", alignment: .leading) {
+            InputOTP(value: $v2, floatingValue: "", placeholder: "Placeholder text")
+        }
+        BasicColumnBox("Error Message", alignment: .leading) {
+            InputOTP(value: $v3, errorMessage: "Error", floatingValue: "")
+        }
+        BasicColumnBox("Length 6, number", alignment: .leading) {
+            InputOTP(value: $v4, length: 6, floatingValue: "", dataType: "number")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputOTPPlayground: View {
+    @State private var value = ""
+    @State private var floatingValue = "Label"
+    @State private var placeholder = ""
+    @State private var errorMessage = ""
+    @State private var length: PlaygroundOption? = otpLengthList.first { $0.key == "6" }
+    @State private var dataType: PlaygroundOption? = otpDataTypeList.first { $0.key == "number" }
+    @State private var errorSpacing = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputOTP(
+                    value: $value,
+                    length: length?.value as? Int,
+                    errorMessage: errorMessage,
+                    errorSpacing: errorSpacing,
+                    floatingValue: floatingValue,
+                    placeholder: placeholder,
+                    dataType: (dataType?.value as? String) ?? "number"
+                )
+            },
+            params: [
+                .string("FloatingValue", $floatingValue),
+                .string("Placeholder", $placeholder),
+                .string("ErrorMessage", $errorMessage),
+                .radio("Length", otpLengthList, $length),
+                .radio("DataType", otpDataTypeList, $dataType),
+                .checkbox("ErrorSpacing", $errorSpacing),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,120 @@
+//
+//  InputPhoneNumberDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputPhoneNumber.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+public struct InputPhoneNumberDemo: View {
+    public init() {}
+
+    public var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputPhoneNumberPreview() }, playground: { InputPhoneNumberPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputPhoneNumberPreview: View {
+    @State private var t1 = ""
+    @State private var t2 = ""
+    @State private var t3 = ""
+    @State private var t4 = ""
+    @State private var t5 = ""
+
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            InputPhoneNumber(text: $t1, placeholder: "Small", size: .small)
+            InputPhoneNumber(text: $t2, placeholder: "Large", size: .large)
+        }
+        BasicColumnBox("Hint text", alignment: .leading) {
+            InputPhoneNumber(text: $t3, placeholder: "Enter here", hintText: "Hint text")
+        }
+        BasicColumnBox("Error", alignment: .leading) {
+            InputPhoneNumber(text: $t4, placeholder: "Enter here", error: "error message")
+        }
+        BasicColumnBox("Trailing Icon", alignment: .leading) {
+            InputPhoneNumber(text: $t5, placeholder: "Phone", rightIcon: "24_ic_public", rightIconColor: Colors.pink03)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputPhoneNumberPlayground: View {
+    @State private var text = ""
+    @State private var placeholder = "0123456789"
+    @State private var hintText = ""
+    @State private var error = ""
+    @State private var size: PlaygroundOption? = inputSizeList.first { $0.key == "small" }
+    @State private var rightIcon: PlaygroundOption?
+    @State private var loading = false
+    @State private var required = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputPhoneNumber(
+                    text: $text,
+                    placeholder: placeholder,
+                    size: (size?.value as? InputSize) ?? .small,
+                    hintText: hintText,
+                    error: error,
+                    loading: loading,
+                    required: required,
+                    rightIcon: (rightIcon?.value as? String) ?? ""
+                )
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("HintText", $hintText),
+                .string("Error", $error),
+                .radio("Size", inputSizeList, $size),
+                .option("RightIcon", playgroundIcons, $rightIcon),
+                .checkbox("Loading", $loading),
+                .checkbox("Required", $required),
+            ]
+        )
+    }
+}
+
+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,85 @@
+//
+//  InputSearchDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputSearch.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+public struct InputSearchDemo: View {
+    public init() {}
+
+    public var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputSearchPreview() }, playground: { InputSearchPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InputSearchPreview: View {
+    @State private var t1 = ""
+    @State private var t2 = ""
+    @State private var t3 = ""
+
+    var body: some View {
+        BasicColumnBox("Default", alignment: .leading) {
+            InputSearch(text: $t1, placeholder: "Search")
+                .frame(height: 40)
+        }
+        BasicColumnBox("With cancel button", alignment: .leading) {
+            InputSearch(text: $t2, buttonText: "Huỷ", showButtonText: true, placeholder: "Search")
+                .frame(height: 40)
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            InputSearch(text: $t3, placeholder: "Search", disabled: true)
+                .frame(height: 40)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InputSearchPlayground: View {
+    @State private var text = ""
+    @State private var placeholder = "Search"
+    @State private var buttonText = "Huỷ"
+    @State private var error = ""
+    @State private var showButtonText = false
+    @State private var showBorder = true
+    @State private var disabled = false
+    @State private var loading = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputSearch(
+                    text: $text,
+                    buttonText: buttonText,
+                    showButtonText: showButtonText,
+                    showBorder: showBorder,
+                    placeholder: placeholder,
+                    error: error,
+                    disabled: disabled,
+                    loading: loading
+                )
+                .frame(height: 40)
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("ButtonText", $buttonText),
+                .string("Error", $error),
+                .checkbox("ShowButtonText", $showButtonText),
+                .checkbox("ShowBorder", $showBorder),
+                .checkbox("Disabled", $disabled),
+                .checkbox("Loading", $loading),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,87 @@
+//
+//  InputTextAreaDemo.swift
+//  Example
+//
+//  Preview + Playground demo for InputTextArea.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct InputTextAreaDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TextAreaPreview() }, playground: { TextAreaPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TextAreaPreview: View {
+    @State private var text = ""
+    private let url = "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/momomain_momo.png"
+
+    var body: some View {
+        BasicColumnBox("Floating Value", alignment: .leading) {
+            InputTextArea(text: $text, floatingValue: "Momo", floatingIcon: url, floatingIconColor: Colors.pink03)
+        }
+        BasicColumnBox("Error", alignment: .leading) {
+            InputTextArea(text: .constant("Error"), error: "Error")
+        }
+        BasicColumnBox("Error Spacing", alignment: .leading) {
+            InputTextArea(text: .constant("Error"), errorSpacing: true)
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            InputTextArea(text: .constant("Disabled"), disabled: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TextAreaPlayground: View {
+    @State private var text = ""
+    @State private var placeholder = "Enter text"
+    @State private var floatingValue = "Label"
+    @State private var error = ""
+    @State private var maxLength = "200"
+    @State private var height: Double = 120
+    @State private var disabled = false
+    @State private var errorSpacing = false
+    @State private var loading = false
+    @State private var required = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                InputTextArea(
+                    text: $text,
+                    maxLength: Int(maxLength) ?? 200,
+                    height: CGFloat(height),
+                    floatingValue: floatingValue,
+                    placeholder: placeholder,
+                    error: error,
+                    errorSpacing: errorSpacing,
+                    disabled: disabled,
+                    loading: loading,
+                    required: required
+                )
+            },
+            params: [
+                .string("Placeholder", $placeholder),
+                .string("FloatingValue", $floatingValue),
+                .string("Error", $error),
+                .number("MaxLength", $maxLength),
+                .slider("Height", $height, min: 60, max: 240, step: 10),
+                .checkbox("Disabled", $disabled),
+                .checkbox("ErrorSpacing", $errorSpacing),
+                .checkbox("Loading", $loading),
+                .checkbox("Required", $required),
+            ]
+        )
+    }
+}