@momo-kits/native-kits 0.162.30 → 0.162.31

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

@@ -2,137 +2,87 @@
 //  InformationDemo.swift
 //  Example
 //
-//  Created by product2 on 6/18/26.
+//  Preview + Playground demo (DemoScreen pattern).
 //
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - InformationDemo
+private let informationStateList: [PlaygroundOption] = [
+    .init("default", InformationState.default),
+    .init("warning", InformationState.warning),
+    .init("error", InformationState.error),
+]
 
 struct InformationDemo: View {
-    @State private var showDismissible = true
-
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                // MARK: - States
-
-                section("States") {
-                    Information(
-                        title: "Default",
-                        description: "This is a default information message.",
-                        showIconClose: true,
-                        onPressClose: {}
-                    )
-                    Information(
-                        title: "Warning",
-                        description: "This is a warning information message.",
-                        state: .warning
-                    )
-                    Information(
-                        title: "Error",
-                        description: "This is an error information message.",
-                        state: .error
-                    )
-                }
-
-                // MARK: - Without title
-
-                section("Description only") {
-                    Information(
-                        description: "Information without a title, only a description."
-                    )
-                    Information(
-                        description: "Warning without a title.",
-                        state: .warning
-                    )
-                }
-
-                // MARK: - With action
-
-                section("With action") {
-                    Information(
-                        title: "Update available",
-                        description: "A new version is ready to install.",
-                        onPressAction: { print("Action pressed") },
-                        action: "Update now"
-                    )
-                    Information(
-                        title: "Payment failed",
-                        description: "We couldn't process your payment.",
-                        state: .error,
-                        onPressAction: { print("Retry pressed") },
-                        action: "Retry"
-                    )
-                }
-
-                // MARK: - With close button
-
-                section("Dismissible") {
-                    if showDismissible {
-                        Information(
-                            title: "Dismissible",
-                            description: "Tap the close icon to dismiss this banner.",
-                            onPressClose: { showDismissible = false }
-                        )
-                    } else {
-                        Information(
-                            description: "Banner dismissed. Toggle to show again.",
-                            state: .warning,
-                            onPressAction: { showDismissible = true }, showIcon: true,
-                            action: "Show again"
-                            
-                        )
-                    }
-                }
-
-                // MARK: - With image
-
-                section("With image") {
-                    Information(
-                        title: "Custom image",
-                        description: "Uses a remote image instead of the state icon.",
-                        image: "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9",
-                        onPressClose: { print("Close pressed") }
-                    )
-                }
-
-                // MARK: - Without icon
-
-                section("Without icon") {
-                    Information(
-                        title: "No icon",
-                        description: "showIcon is set to false.",
-                        showIcon: false
-                    )
-                }
-            }
-            .padding(.vertical, 16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InformationPreview() }, playground: { InformationPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    // MARK: - Helpers
+// MARK: - Preview
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+private struct InformationPreview: View {
+    var body: some View {
+        BasicColumnBox("States", alignment: .leading) {
+            Information(title: "Default", description: "This is a default information message.",
+                        showIconClose: true, onPressClose: {})
+            Information(title: "Warning", description: "This is a warning information message.", state: .warning)
+            Information(title: "Error", description: "This is an error information message.", state: .error)
+        }
+        BasicColumnBox("Description only", alignment: .leading) {
+            Information(description: "Information without a title, only a description.")
+            Information(description: "Warning without a title.", state: .warning)
+        }
+        BasicColumnBox("With action", alignment: .leading) {
+            Information(title: "Update available", description: "A new version is ready to install.",
+                        onPressAction: {}, action: "Update now")
+            Information(title: "Payment failed", description: "We couldn't process your payment.",
+                        state: .error, onPressAction: {}, action: "Retry")
+        }
+        BasicColumnBox("Without icon", alignment: .leading) {
+            Information(title: "No icon", description: "showIcon is set to false.", showIcon: false)
         }
-        .padding(.horizontal, 16)
     }
 }
 
-#if DEBUG
-struct InformationDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        InformationDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InformationPlayground: View {
+    @State private var title = "Title"
+    @State private var description = "Information description."
+    @State private var state: PlaygroundOption? = informationStateList.first { $0.key == "default" }
+    @State private var showIcon = true
+    @State private var showIconClose = false
+    @State private var action = ""
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Information(
+                    title: title.isEmpty ? nil : title,
+                    description: description,
+                    state: (state?.value as? InformationState) ?? .default,
+                    onPressAction: {},
+                    showIcon: showIcon,
+                    action: action.isEmpty ? nil : action,
+                    showIconClose: showIconClose,
+                    onPressClose: {}
+                )
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $description),
+                .radio("State", informationStateList, $state),
+                .checkbox("ShowIcon", $showIcon),
+                .checkbox("ShowIconClose", $showIconClose),
+                .string("Action", $action),
+            ]
+        )
     }
 }
-#endif

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

@@ -2,110 +2,116 @@
 //  InputDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 29/11/24.
+//  Preview + Playground demo, mirroring Compose's InputUsage.kt.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct InputDemo: 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 = ""
-    
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 20) {
-                Text("Input Demo")
-                    .font(.title1)
-                
-                Group {
-                    Text("Size")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue1, placeholder: "Small", size: .small, autofocus: true)
-                    Input(text: $textValue1, placeholder: "Large", size: .large)
-                }
-                
-                Group {
-                    Text("Secure Text Entry")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue2, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo", secureTextEntry: true,  autofocus: true)
-                    Input(text: $textValue2, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo", size: .large, secureTextEntry: true)
-                }
-                
-                Group {
-                    Text("Floating Value")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue3, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo")
-                        
-                }
-                
-                Group {
-                    Text("Hint")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue4, placeholder: "Enter here", hintText: textValue4.isEmpty ? "Hint text" : textValue4 )
-                }
-                
-                Group {
-                    Text("Error")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue4, placeholder: "Enter here", error: textValue4.isEmpty ? "Error" : textValue4 )
-                }
-                
-                Group {
-                    Text("Disabled")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue5, placeholder: "Enter here", disabled: true, leadingIcon: "01.MoMo"
-                    )
-                }
-                
-                Group {
-                    Text("Leading Icon")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue6, placeholder: "Leading Icon", floatingValue: "Small Input", leadingIcon: "01.MoMo"
-                    )
-                    
-                    Input(text: $textValue7, placeholder: "Leading Icon", floatingValue: "Large Input", size: .large, leadingIcon: "01.MoMo"
-                    )
-                }
-                
-                Group {
-                    Text("Trailing Icon")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue8, placeholder: "Trailing Icon", floatingValue: "Trailing", rightIcon: "01.MoMo")
-                }
-                
-                Group {
-                    Text("Loading")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue8, placeholder: "Loading", floatingValue: "Loading", loading: true, required: true)
-                }
-                
-                Group {
-                    Text("Font Weight")
-                        .font(.headerText1)
-                    
-                    Input(text: $textValue9, placeholder: "Font Weight", floatingValue: "Regular Font Weight", required: true, fontWeight: .regular)
-                    
-                    Input(text: $textValue9, placeholder: "Font Weight", floatingValue: "Bold Font Weight", required: true, fontWeight: .bold)
-                }
-            }
-            .padding()
+        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

@@ -2,135 +2,93 @@
 //  InputDropDownDemo.swift
 //  Example
 //
-//  Showcases InputDropDown mirroring InputDropDownUsage.kt.
+//  Preview + Playground demo for InputDropDown.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 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"
-                    )
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InputDropDownPreview() }, playground: { InputDropDownPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                Group {
-                    Text("Disabled").font(.headerText1)
-                    InputDropDown(
-                        value: $empty,
-                        floatingValue: "Title",
-                        floatingIcon: "basic_home",
-                        placeholder: "Disabled input",
-                        disabled: true
-                    )
-                }
+// MARK: - Preview
 
-                Group {
-                    Text("Error spacing").font(.headerText1)
-                    InputDropDown(
-                        value: $empty,
-                        placeholder: "",
-                        errorSpacing: true
-                    )
-                }
+private struct InputDropDownPreview: View {
+    @State private var empty = ""
+    @State private var errorValue = "Error input"
 
-                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"
-                    )
-                }
+    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")
+        }
+    }
+}
 
-                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
-                    )
-                }
+// MARK: - Playground
 
-                Group {
-                    Text("Required").font(.headerText1)
-                    InputDropDown(
-                        value: $empty,
-                        floatingValue: "Title",
-                        placeholder: "Required field",
-                        required: true
-                    )
-                }
+@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
 
-                Group {
-                    Text("Loading").font(.headerText1)
-                    InputDropDown(
-                        value: $empty,
-                        placeholder: "Loading",
-                        loading: true
-                    )
-                }
-            }
-            .padding()
-        }
+    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),
+            ]
+        )
     }
 }