@momo-kits/native-kits 0.163.2-beta.2 → 0.164.1-beta.1-debug

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),
+            ]
+        )
     }
 }

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

@@ -2,56 +2,86 @@
 //  InputTextAreaDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 2/12/24.
+//  Preview + Playground demo for InputTextArea.
 //
-import SwiftUI
+
 import MoMoUIKits
+import SwiftUI
 
 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()
-            }
-           
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TextAreaPreview() }, playground: { TextAreaPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
 }
 
-struct TextAreaPreview: View {
+// MARK: - Preview
+
+private struct TextAreaPreview: View {
     @State private var text = ""
-    let url = "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/momomain_momo.png"
-    
+    private 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)
+        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),
+            ]
+        )
+    }
+}

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

@@ -2,69 +2,72 @@
 //  LoaderDemo.swift
 //  Example
 //
-//  Mirrors sample/shared LoaderUsage.kt
+//  Preview + Playground demo for Loader / DotLoader / SpinnerLoader / ProgressBar.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
-struct LoaderDemo: View {
-    @State private var progress: CGFloat = 50
+private let loaderTypeList: [PlaygroundOption] = [
+    .init("dot", LoaderType.dot),
+    .init("spinner", LoaderType.spinner),
+]
 
+struct LoaderDemo: View {
     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()
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { LoaderPreview() }, playground: { LoaderPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    @ViewBuilder
-    private func row<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.subheadline)
-            content()
+// MARK: - Preview
+
+private struct LoaderPreview: View {
+    var body: some View {
+        BasicColumnBox("DotLoader", alignment: .leading) {
+            DotLoader()
+            DotLoader(tintColor: Colors.pink03)
+        }
+        BasicColumnBox("SpinnerLoader", alignment: .leading) {
+            SpinnerLoader()
+            SpinnerLoader(tintColor: Colors.pink03)
+        }
+        BasicColumnBox("ProgressBar", alignment: .leading) {
+            ProgressBar(percent: 0)
+            ProgressBar(percent: 40)
+            ProgressBar(percent: 100)
+            ProgressBar(percent: 65, color: Colors.pink03)
         }
     }
 }
 
-#Preview {
-    LoaderDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct LoaderPlayground: View {
+    @State private var type: PlaygroundOption? = loaderTypeList.first { $0.key == "dot" }
+    @State private var tint: PlaygroundOption? = playgroundColors.first { $0.key == "pink03" }
+    @State private var percent: Double = 65
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.L) {
+                    Loader(
+                        type: (type?.value as? LoaderType) ?? .dot,
+                        tintColor: tint?.value as? Color
+                    )
+                    ProgressBar(percent: CGFloat(percent), color: tint?.value as? Color)
+                }
+            },
+            params: [
+                .radio("Type", loaderTypeList, $type),
+                .color("TintColor", playgroundColors, $tint),
+                .slider("ProgressBar percent", $percent, min: 0, max: 100, step: 1),
+            ]
+        )
+    }
 }