@momo-kits/native-kits 0.162.30 → 0.162.31

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

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

@@ -24,27 +24,72 @@ private let AppTranslations = LocalizationObject(
 )
 
 struct LocalizeDemo: View {
-    @EnvironmentObject private var localize: Localize
+    // AI-GENERATED START: observe the app language and drive it through the real platform API
+    @Environment(\.localize) private var localize
+    @Environment(\.applicationEnvironment) private var applicationEnvironment
+    // AI-GENERATED END: observe the app language and drive it through the real platform API
 
     private var isEnglish: Bool { localize.currentLanguage == Localize.EN }
 
+    // AI-GENERATED START: observe the app language and drive it through the real platform API
+    private var storedLanguage: String {
+        UserDefaults.standard.string(forKey: UserDefaultsLanguageSource.defaultKey) ?? "nil"
+    }
+
+    private func setLanguage(_ language: String) {
+        // Platform API -> KMP LanguageApi.SetLanguage -> LocalizationProvider.set, which also
+        // mirrors AppleLanguages. KVO then pushes the change back into Localize. The real wire.
+        if let composeApi = applicationEnvironment.composeApi {
+            _ = composeApi.request(funcName: "setLanguage", params: language)
+        } else {
+            localize.changeLanguage(language) // #Preview / sample app: no host bridge
+        }
+    }
+    // AI-GENERATED END: observe the app language and drive it through the real platform API
+
     var body: some View {
         ScrollView {
             VStack(alignment: .leading, spacing: 0) {
 
                 LocalizeSectionBox(title: "Đổi ngôn ngữ (toàn app)") {
                     MomoText(
-                        "localize.changeLanguage(...) đổi ngôn ngữ cho cả NavigationContainer — mọi màn hình đang đọc translate() sẽ cập nhật theo.",
+                        "Switch gọi platform API setLanguage — đổi ngôn ngữ THẬT của app. Localize observe lại "
+                            + "qua UserDefaults nên mọi màn hình đang đọc translate() đều cập nhật.",
                         typography: .descriptionDefaultRegular
                     )
                     Switch(
                         .constant(isEnglish),
-                        onChange: { _ in localize.changeLanguage(isEnglish ? Localize.VI : Localize.EN) },
+                        onChange: { _ in setLanguage(isEnglish ? Localize.VI : Localize.EN) },
                         title: "English"
                     )
                     MomoText("currentLanguage = \(localize.currentLanguage)", typography: .labelDefaultMedium)
                 }
 
+                // AI-GENERATED START: prove the observation loop, not kit-local state, drives updates
+                LocalizeSectionBox(title: "Nguồn thật: UserDefaults") {
+                    MomoText(
+                        "Ghi thẳng vào UserDefaults, bỏ qua mọi API của kit — màn hình vẫn đổi, chứng minh "
+                            + "Localize đang observe ngôn ngữ app.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: UserDefaultsLanguageSource.defaultKey, value: storedLanguage)
+                    Button(
+                        title: "Ghi thẳng UserDefaults = \"en\"",
+                        action: {
+                            // Quoted on purpose: proves normalize() strips the JSON quoting
+                            // RN and KMP persist.
+                            UserDefaults.standard.set(
+                                "\"en\"",
+                                forKey: UserDefaultsLanguageSource.defaultKey
+                            )
+                        },
+                        type: .outline,
+                        size: .medium,
+                        isFull: false
+                    )
+                }
+                // AI-GENERATED END: prove the observation loop, not kit-local state, drives updates
+
                 LocalizeSectionBox(title: "translate(key) — từ điển mặc định của kit") {
                     TranslationRow(key: "confirm", value: localize.translate("confirm"))
                     TranslationRow(key: "cancel", value: localize.translate("cancel"))
@@ -179,8 +224,10 @@ private struct TranslationRow: View {
 #Preview {
     if #available(iOS 16.0, *) {
         NavigationStack {
+            // AI-GENERATED START: preview needs the observing provider or the toggle will not update
             LocalizeDemo()
-                .environmentObject(Localize())
+                .momoLocalize(Localize())
+            // AI-GENERATED END: preview needs the observing provider or the toggle will not update
         }
     } else {
         // Fallback on earlier versions

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

@@ -101,9 +101,21 @@ private struct NavigationDemoContent: View {
 
                 Divider().padding(.vertical, 4)
 
+                row("Custom Back Handler") {
+                    // The screen owns back: the header button and the edge swipe both
+                    // run this instead of popping (mirrors Compose's onBackHandler).
+                    navigator.push(
+                        { DemoLeafScreen(title: "Back is intercepted — swipe from the edge", color: Colors.blue09) },
+                        options: NavigationOptions(
+                            title: "Custom Back",
+                            onBackHandler: { print("back intercepted") }
+                        )
+                    )
+                }
+
                 row("Prevent Back") {
-                    // Tapping the header back button shows a confirm popup before
-                    // leaving (mirrors Compose's headerBackProps.preventBack).
+                    // The header back button and the edge swipe both show a confirm popup
+                    // before leaving (mirrors Compose's headerBackProps.preventBack).
                     navigator.push(
                         { DemoLeafScreen(title: "Tap the header back button", color: Colors.pink09) },
                         options: NavigationOptions(

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

@@ -2,71 +2,67 @@
 //  PaginationDemo.swift
 //  Example
 //
-//  Combined demo for the four pagination variants.
-//  Mirrors shared PaginationUsage.kt: a configurable Data Length plus
-//  Prev/Next controls drive PaginationScroll, PaginationNumber,
-//  PaginationDot and PaginationWhiteDot.
+//  Preview + Playground demo for the pagination variants.
 //
 
 import MoMoUIKits
 import SwiftUI
 
 struct PaginationDemo: View {
-    @State private var dataLengthText: String = "3"
-    @State private var activeIndex: Int = 0
-
-    private var dataLength: Int {
-        let n = Int(dataLengthText) ?? 1
-        return max(n, 1)
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { PaginationPreview() }, playground: { PaginationPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
     }
+}
+
+// MARK: - Preview
 
+private struct PaginationPreview: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .center, spacing: Spacing.L) {
-                PaginationScroll {
-                    ForEach(0..<10, id: \.self) { i in
-                        MomoText("\(i)", typography: .bodyDefaultRegular)
-                            .frame(width: 120, height: 60)
-                            .background(Colors.blue08)
-                            .overlay(
-                                Rectangle().stroke(Colors.black06, lineWidth: 1)
-                            )
-                    }
+        BasicColumnBox("PaginationScroll", alignment: .leading) {
+            PaginationScroll {
+                ForEach(0..<10, id: \.self) { i in
+                    MomoText("\(i)", typography: .bodyDefaultRegular)
+                        .frame(width: 120, height: 60)
+                        .background(Colors.blue08)
+                        .overlay(Rectangle().stroke(Colors.black06, lineWidth: 1))
                 }
+            }
+        }
+        BasicColumnBox("Number / Dot", alignment: .leading) {
+            PaginationNumber(activeIndex: 1, dataLength: 3)
+            PaginationDot(activeIndex: 1, dataLength: 3)
+        }
+        BasicColumnBox("WhiteDot", alignment: .leading, background: Colors.black17) {
+            PaginationWhiteDot(activeIndex: 1, dataLength: 3)
+        }
+    }
+}
 
-                PaginationNumber(activeIndex: activeIndex, dataLength: dataLength)
-
-                PaginationDot(activeIndex: activeIndex, dataLength: dataLength)
-
-                PaginationWhiteDot(activeIndex: activeIndex, dataLength: dataLength)
-                    .padding(Spacing.S)
-                    .background(Colors.black17) // dark backdrop so white dots are visible
+// MARK: - Playground
 
-                MomoText("Data Length", typography: .labelSMedium, color: Colors.textSecondary)
-                TextField("Data Length", text: $dataLengthText)
-                    .keyboardType(.numberPad)
-                    .textFieldStyle(.roundedBorder)
-                    .onChange(of: dataLengthText) { _ in activeIndex = 0 }
-                    .frame(maxWidth: 200)
+@available(iOS 16.0, *)
+private struct PaginationPlayground: View {
+    @State private var dataLength = "5"
+    @State private var activeIndex: Double = 0
 
-                HStack {
-                    Button("Prev") {
-                        if activeIndex != 0 { activeIndex -= 1 }
-                    }
-                    .frame(maxWidth: .infinity)
+    private var length: Int { max(Int(dataLength) ?? 1, 1) }
 
-                    Button("Next") {
-                        if activeIndex != dataLength - 1 { activeIndex += 1 }
-                    }
-                    .frame(maxWidth: .infinity)
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.L) {
+                    PaginationNumber(activeIndex: Int(activeIndex), dataLength: length)
+                    PaginationDot(activeIndex: Int(activeIndex), dataLength: length)
                 }
-            }
-            .padding(Spacing.L)
-        }
-        .background(Colors.background)
+            },
+            params: [
+                .number("DataLength", $dataLength),
+                .slider("ActiveIndex", $activeIndex, min: 0, max: 9, step: 1),
+            ]
+        )
     }
 }
-
-#Preview {
-    PaginationDemo()
-}

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

@@ -0,0 +1,76 @@
+//
+//  PlaygroundData.swift
+//  Example
+//
+//  Swift equivalents of the option maps in Compose's DemoScreen.kt (buttonTypeList,
+//  sizeList, Icons, Colors.colorList, ...). Each list feeds an OPTION / RADIO / COLOR
+//  PlaygroundParams. Extend as more demos are converted.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - Enum option maps
+
+let buttonTypeList: [PlaygroundOption] = [
+    .init("primary", ButtonType.primary),
+    .init("secondary", ButtonType.secondary),
+    .init("tonal", ButtonType.tonal),
+    .init("outline", ButtonType.outline),
+    .init("danger", ButtonType.danger),
+    .init("text", ButtonType.text),
+    .init("disabled", ButtonType.disabled),
+]
+
+let buttonSizeList: [PlaygroundOption] = [
+    .init("large", ButtonSize.large),
+    .init("medium", ButtonSize.medium),
+    .init("small", ButtonSize.small),
+]
+
+let inputSizeList: [PlaygroundOption] = [
+    .init("large", InputSize.large),
+    .init("small", InputSize.small),
+]
+
+let inputFontWeightList: [PlaygroundOption] = [
+    .init("regular", InputFontWeight.regular),
+    .init("bold", InputFontWeight.bold),
+]
+
+let keyboardTypeList: [PlaygroundOption] = [
+    .init("default", UIKeyboardType.default),
+    .init("asciiCapable", UIKeyboardType.asciiCapable),
+    .init("numberPad", UIKeyboardType.numberPad),
+    .init("phonePad", UIKeyboardType.phonePad),
+    .init("URL", UIKeyboardType.URL),
+    .init("emailAddress", UIKeyboardType.emailAddress),
+    .init("decimalPad", UIKeyboardType.decimalPad),
+]
+
+// MARK: - Icons (curated from icon.json; Compose `Icons`)
+
+let playgroundIcons: [PlaygroundOption] = [
+    "basic_home", "basic_flag", "basic_filter", "basic_delete", "basic_copy",
+    "basic_account", "basic_chart", "basic_setting", "basic_sun", "basic_person",
+    "basic_person_add", "basic_person_group", "basic_options", "basic_sorting",
+    "arrow_chevron_down", "arrow_chevron_up", "arrow_chevron_left", "arrow_chevron_right",
+    "arrow_arrow_forward", "arrow_redo", "arrow_undo", "arrow_refresh_ccw",
+    "security_eye_open", "notifications_check_circle", "help_center", "pin_star",
+    "navigation_more_icon",
+].map { PlaygroundOption($0, $0) }
+
+// MARK: - Colors (Compose `Colors.colorList`)
+
+let playgroundColors: [PlaygroundOption] = [
+    .init("primary", Colors.primary),
+    .init("black17", Colors.black17),
+    .init("black13", Colors.black13),
+    .init("black10", Colors.black10),
+    .init("black05", Colors.black05),
+    .init("black01", Colors.black01),
+    .init("pink06", Colors.pink06),
+    .init("pink03", Colors.pink03),
+    .init("blue09", Colors.blue09),
+    .init("blue05", Colors.blue05),
+]