@momo-kits/native-kits 0.162.30-debug → 0.162.31-debug

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

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