@momo-kits/native-kits 0.162.30 → 0.162.31

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

@@ -2,106 +2,93 @@
 //  InputMoneyDemo.swift
 //  Example
 //
-//  Usage demo for InputMoney. Mirrors Compose's InputMoneyUsage preview cases.
+//  Preview + Playground demo for InputMoney.
 //
 
 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 }
-                    )
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputMoneyPreview() }, playground: { InputMoneyPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section(title: "Disabled") {
-                    InputMoney(
-                        text: .constant(""),
-                        placeholder: "Enter amount",
-                        disabled: true,
-                        icon: "basic_home"
-                    )
-                }
+// MARK: - Preview
 
-                section(title: "Icon") {
-                    InputMoney(
-                        text: $text5,
-                        floatingValue: "Amount",
-                        placeholder: "With icon",
-                        icon: "basic_home",
-                        iconColor: Colors.pink03,
-                        onChangeText: { text5 = $0 }
-                    )
-                }
+private struct InputMoneyPreview: View {
+    @State private var t1 = ""
+    @State private var t2 = ""
+    @State private var t3 = ""
+    @State private var t4 = ""
 
-                section(title: "Error spacing") {
-                    InputMoney(
-                        text: $text6,
-                        placeholder: "Enter amount",
-                        errorSpacing: true,
-                        onChangeText: { text6 = $0 }
-                    )
-                }
-            }
-            .padding(16)
+    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 })
         }
-    }
-
-    @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()
+        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")
         }
     }
 }
 
-#if DEBUG
-struct InputMoneyDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        InputMoneyDemo()
+// 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),
+            ]
+        )
     }
 }
-#endif

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

@@ -2,72 +2,87 @@
 //  InputOTPDemo.swift
 //  Example
 //
-//  Mirrors Compose `InputOTPUsage` (Preview cases): floating value, placeholder,
-//  error message, error spacing, and a fixed-length numeric variant.
+//  Preview + Playground demo for InputOTP.
 //
 
 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 = ""
+// 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 {
-        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"
-                    )
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputOTPPreview() }, playground: { InputOTPPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("Error Message") {
-                    InputOTP(
-                        value: $value3,
-                        errorMessage: "Error",
-                        floatingValue: ""
-                    )
-                }
+// MARK: - Preview
 
-                section("Error Spacing") {
-                    InputOTP(
-                        value: $value4,
-                        errorSpacing: true,
-                        floatingValue: ""
-                    )
-                }
+private struct InputOTPPreview: View {
+    @State private var v1 = ""
+    @State private var v2 = ""
+    @State private var v3 = ""
+    @State private var v4 = ""
 
-                section("Data Type (length 6, number)") {
-                    InputOTP(
-                        value: $value5,
-                        length: 6,
-                        floatingValue: "",
-                        dataType: "number"
-                    )
-                }
-            }
-            .padding(16)
+    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")
         }
     }
+}
 
-    @ViewBuilder
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            MomoText(title, typography: .headerSSemibold)
-            content()
-        }
+// 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

@@ -2,67 +2,87 @@
 //  InputPhoneNumberDemo.swift
 //  Example
 //
-//  Created by sophia on 20/10/25.
+//  Preview + Playground demo for InputPhoneNumber.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 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 init() {}
+
     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()
+        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),
+            ]
+        )
     }
 }
 

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

@@ -2,31 +2,84 @@
 //  InputSearchDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 3/12/24.
+//  Preview + Playground demo for InputSearch.
 //
 
-import SwiftUI
 import MoMoUIKits
-
-// Your imports remain the same
+import SwiftUI
 
 public struct InputSearchDemo: View {
-    @State private var text = ""
-    
+    public init() {}
+
     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()
+        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),
+            ]
+        )
     }
 }