@momo-kits/native-kits 0.163.1-sp.8-debug → 0.163.1-sp.9-debug

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

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

@@ -4,118 +4,92 @@ import SwiftUI
 struct PopupNotifyDemo: View {
     var body: some View {
         if #available(iOS 16.0, *) {
-            PopupNotifyDemoContent()
+            DemoScreen(preview: { PopupNotifyPreview() }, playground: { PopupNotifyPlayground() })
         } else {
-            MomoText("PopupNotify demo requires iOS 16+")
-                .padding()
+            Text("Requires iOS 16+").padding()
         }
     }
 }
 
+// MARK: - Preview
+
 @available(iOS 16.0, *)
-private struct PopupNotifyDemoContent: View {
+private struct PopupNotifyPreview: View {
     @EnvironmentObject private var navigator: Navigator
 
+    var body: some View {
+        BasicColumnBox("PopupNotify", alignment: .leading) {
+            MoMoUIKits.Button(title: "Show popup", action: { show() }, size: .large)
+        }
+    }
+
+    private func show() {
+        navigator.showModal {
+            PopupNotify(props: PopupNotifyProps(
+                image: "https://i.imgur.com/s70S9s9.png",
+                title: "Title",
+                description: "Check lại một nhịp auto chuyển sang dạng CTA.",
+                error: "9004",
+                primary: PopupAction(title: "Primary", onPress: { navigator.hideOverplay() }),
+                secondary: PopupAction(title: "Secondary", onPress: { navigator.hideOverplay() }),
+                onIconClose: { navigator.hideOverplay() },
+                isShowCloseIcon: true
+            ))
+        }
+    }
+}
+
+// MARK: - Playground
+
+private let popupDirectionList: [PlaygroundOption] = [
+    .init("auto", PopupActionDirection.auto),
+    .init("row", PopupActionDirection.row),
+    .init("column", PopupActionDirection.column),
+]
+
+@available(iOS 16.0, *)
+private struct PopupNotifyPlayground: View {
+    @EnvironmentObject private var navigator: Navigator
     @State private var image = "https://i.imgur.com/s70S9s9.png"
     @State private var title = "Title"
     @State private var description = "Check lại một nhịp auto chuyển sang dạng CTA."
     @State private var error = "9004"
-    @State private var buttonDirection: PopupActionDirection = .auto
     @State private var primaryTitle = "Primary"
     @State private var secondaryTitle = "Secondary"
-    @State private var showCloseButton = false
+    @State private var showClose = false
+    @State private var direction: PlaygroundOption? = popupDirectionList.first { $0.key == "auto" }
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: Spacing.M) {
-                HStack(alignment: .center, spacing: Spacing.S) {
-                    Input(
-                        text: $image,
-                        placeholder: "Image URL",
-                        floatingValue: "Image URL"
-                    )
-                    Checkbox(
-                        Binding(
-                            get: { image.isEmpty },
-                            set: { checked in
-                                image = checked ? "" : "https://i.imgur.com/s70S9s9.png"
-                            }
-                        ),
-                        title: "undefined"
-                    )
-                }
-
-                Input(text: $title, placeholder: "Title", floatingValue: "Title")
-                Input(text: $description, placeholder: "Description", floatingValue: "Description")
-
-                HStack(alignment: .center, spacing: Spacing.S) {
-                    Input(text: $error, placeholder: "Error", floatingValue: "Error")
-                    Checkbox(
-                        Binding(
-                            get: { error.isEmpty },
-                            set: { checked in error = checked ? "" : "9004" }
-                        ),
-                        title: "undefined"
-                    )
-                }
-
-                VStack(alignment: .leading, spacing: Spacing.XS) {
-                    MomoText("Button Direction", typography: .descriptionDefaultRegular, color: Colors.black12)
-                    Picker("Button Direction", selection: $buttonDirection) {
-                        Text("Auto").tag(PopupActionDirection.auto)
-                        Text("Row").tag(PopupActionDirection.row)
-                        Text("Column").tag(PopupActionDirection.column)
-                    }
-                    .pickerStyle(.segmented)
-                }
-
-                Input(
-                    text: $primaryTitle,
-                    placeholder: "Primary Button Title",
-                    floatingValue: "Primary Button Title"
-                )
-                Input(
-                    text: $secondaryTitle,
-                    placeholder: "Secondary Button Title",
-                    floatingValue: "Secondary Button Title"
-                )
-
-                Checkbox($showCloseButton, title: "Show Close Button")
-
-                MoMoUIKits.Button(
-                    title: "Show popup",
-                    action: showPopup,
-                    size: .large
-                )
-                .padding(.top, Spacing.XS)
-            }
-            .padding(Spacing.M * 2)
-        }
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(title: "Show popup", action: { show() }, size: .large)
+            },
+            params: [
+                .string("Image", $image),
+                .string("Title", $title),
+                .string("Description", $description),
+                .string("Error", $error),
+                .string("PrimaryTitle", $primaryTitle),
+                .string("SecondaryTitle", $secondaryTitle),
+                .radio("ButtonDirection", popupDirectionList, $direction),
+                .checkbox("ShowCloseButton", $showClose),
+            ]
+        )
     }
 
-    private func showPopup() {
+    private func show() {
         navigator.showModal {
-            PopupNotify(
-                props: PopupNotifyProps(
-                    image: image,
-                    title: title,
-                    description: description,
-                    error: error,
-                    primary: PopupAction(title: primaryTitle, onPress: { navigator.hideOverplay() }),
-                    secondary: PopupAction(title: secondaryTitle, onPress: { navigator.hideOverplay() }),
-                    buttonDirection: buttonDirection,
-                    onIconClose: { navigator.hideOverplay() },
-                    isShowCloseIcon: showCloseButton
-                )
-            )
+            PopupNotify(props: PopupNotifyProps(
+                image: image,
+                title: title,
+                description: description,
+                error: error,
+                primary: PopupAction(title: primaryTitle, onPress: { navigator.hideOverplay() }),
+                secondary: PopupAction(title: secondaryTitle, onPress: { navigator.hideOverplay() }),
+                buttonDirection: (direction?.value as? PopupActionDirection) ?? .auto,
+                onIconClose: { navigator.hideOverplay() },
+                isShowCloseIcon: showClose
+            ))
         }
     }
 }
-
-#if DEBUG
-struct PopupNotifyDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        PopupNotifyDemo()
-    }
-}
-#endif

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

@@ -2,75 +2,66 @@
 //  PopupPromotionDemo.swift
 //  Example
 //
-//  Usage demo for PopupPromotion component.
-//  Mirrors Compose's PromotionPopupUsage: an image-URL form whose action
-//  button presents the popup through `navigator.showModal`.
+//  Preview + Playground demo. PopupPromotion is presented via `navigator.showModal`.
 //
 
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - PopupPromotionDemo
-
 struct PopupPromotionDemo: View {
     var body: some View {
         if #available(iOS 16.0, *) {
-            PopupPromotionDemoContent()
+            DemoScreen(preview: { PopupPromotionPreview() }, playground: { PopupPromotionPlayground() })
         } else {
-            Text("PopupPromotion demo requires iOS 16+")
-                .padding()
+            Text("Requires iOS 16+").padding()
         }
     }
 }
 
-// MARK: - PopupPromotionDemoContent
+// MARK: - Preview
 
 @available(iOS 16.0, *)
-private struct PopupPromotionDemoContent: View {
+private struct PopupPromotionPreview: View {
     @EnvironmentObject private var navigator: Navigator
 
-    @State private var imageUrl = "https://static.momocdn.net/app/app/appx/ABC.png?size=M"
-
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 12) {
-                Input(
-                    text: $imageUrl,
-                    placeholder: "Image URL",
-                    floatingValue: "Image URL"
-                )
-
-                Button(
-                    title: "Show Popup",
-                    action: showPopup,
-                    type: .primary,
-                    size: .large
-                )
-                .padding(.top, 8)
-            }
-            .padding(Spacing.M * 2)
+        BasicColumnBox("PopupPromotion", alignment: .leading) {
+            MoMoUIKits.Button(
+                title: "Show Popup",
+                action: { show("https://static.momocdn.net/app/app/appx/ABC.png?size=M") },
+                size: .large
+            )
         }
     }
 
-    // MARK: - Helpers
-
-    private func showPopup() {
+    private func show(_ url: String) {
         navigator.showModal {
-            PopupPromotion(
-                imageUrl: imageUrl,
-                onIconClose: { navigator.hideOverplay() },
-                onAction: { navigator.hideOverplay() }
-            )
+            PopupPromotion(imageUrl: url, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
         }
     }
 }
 
-// MARK: - Preview
+// MARK: - Playground
 
-#if DEBUG
-struct PopupPromotionDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        PopupPromotionDemo()
+@available(iOS 16.0, *)
+private struct PopupPromotionPlayground: View {
+    @EnvironmentObject private var navigator: Navigator
+    @State private var imageUrl = "https://static.momocdn.net/app/app/appx/ABC.png?size=M"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(title: "Show Popup", action: { show() }, size: .large)
+            },
+            params: [
+                .string("ImageURL", $imageUrl),
+            ]
+        )
+    }
+
+    private func show() {
+        navigator.showModal {
+            PopupPromotion(imageUrl: imageUrl, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
+        }
     }
 }
-#endif

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

@@ -2,88 +2,100 @@
 //  ProgressInfoDemo.swift
 //  Example
 //
+//  Preview + Playground demo, mirroring Compose's ProgressInfoUsage.kt.
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
-// MARK: - ProgressInfoDemo
-
-struct ProgressInfoDemo: View {
-    private let sampleSteps = [
-        ProgressInfoItem(title: "Bước 1", description: "Mô tả bước đầu tiên"),
-        ProgressInfoItem(title: "Bước 2", description: "Mô tả bước thứ hai"),
-        ProgressInfoItem(title: "Bước 3", description: "Mô tả bước thứ ba"),
-    ]
-
-    private let sampleStepsNoDesc = [
-        ProgressInfoItem(title: "Đăng ký"),
-        ProgressInfoItem(title: "Xác minh"),
-        ProgressInfoItem(title: "Hoàn tất"),
-    ]
-
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Vertical (default)") {
-                    ProgressInfo(steps: sampleSteps)
-                }
-
-                section("Vertical – no description") {
-                    ProgressInfo(steps: sampleStepsNoDesc, showDescription: false)
-                }
-
-                section("Vertical – useNumber") {
-                    ProgressInfo(steps: sampleSteps, useNumber: true)
-                }
-
-                section("Vertical – Small size") {
-                    ProgressInfo(steps: sampleSteps, size: .small)
-                }
+private let piSteps = [
+    ProgressInfoItem(title: "Bước 1", description: "Mô tả bước đầu tiên"),
+    ProgressInfoItem(title: "Bước 2", description: "Mô tả bước thứ hai"),
+    ProgressInfoItem(title: "Bước 3", description: "Mô tả bước thứ ba"),
+]
 
-                section("Horizontal – Center (default)") {
-                    ProgressInfo(steps: sampleSteps, horizontal: true)
-                }
+private let piStepsNoDesc = [
+    ProgressInfoItem(title: "Đăng ký"),
+    ProgressInfoItem(title: "Xác minh"),
+    ProgressInfoItem(title: "Hoàn tất"),
+]
 
-                section("Horizontal – Left") {
-                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .left)
-                }
+private let progressInfoSizeList: [PlaygroundOption] = [
+    .init("large", ProgressInfoSize.large),
+    .init("small", ProgressInfoSize.small),
+]
 
-                section("Horizontal – Right") {
-                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .right)
-                }
+private let progressInfoAlignList: [PlaygroundOption] = [
+    .init("center", ProgressInfoAlign.center),
+    .init("left", ProgressInfoAlign.left),
+    .init("right", ProgressInfoAlign.right),
+    .init("stretch", ProgressInfoAlign.stretch),
+]
 
-                section("Horizontal – Stretch") {
-                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .stretch)
-                }
+struct ProgressInfoDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ProgressInfoPreview() }, playground: { ProgressInfoPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("Horizontal – useNumber") {
-                    ProgressInfo(steps: sampleSteps, horizontal: true, useNumber: true)
-                }
+// MARK: - Preview
 
-                section("Horizontal – Small size") {
-                    ProgressInfo(
-                        steps: sampleStepsNoDesc,
-                        horizontal: true,
-                        size: .small,
-                        showDescription: false
-                    )
-                }
-            }
-            .padding(16)
+private struct ProgressInfoPreview: View {
+    var body: some View {
+        BasicColumnBox("Vertical (default)", alignment: .leading) {
+            ProgressInfo(steps: piSteps)
+        }
+        BasicColumnBox("Vertical – no description", alignment: .leading) {
+            ProgressInfo(steps: piStepsNoDesc, showDescription: false)
+        }
+        BasicColumnBox("Vertical – useNumber", alignment: .leading) {
+            ProgressInfo(steps: piSteps, useNumber: true)
+        }
+        BasicColumnBox("Horizontal – Center", alignment: .leading) {
+            ProgressInfo(steps: piSteps, horizontal: true)
+        }
+        BasicColumnBox("Horizontal – useNumber", alignment: .leading) {
+            ProgressInfo(steps: piSteps, horizontal: true, useNumber: true)
         }
     }
+}
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.system(size: 14, weight: .semibold))
-                .foregroundColor(.secondary)
-            content()
-        }
-        .frame(maxWidth: .infinity, alignment: .leading)
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ProgressInfoPlayground: View {
+    @State private var size: PlaygroundOption? = progressInfoSizeList.first { $0.key == "large" }
+    @State private var align: PlaygroundOption? = progressInfoAlignList.first { $0.key == "center" }
+    @State private var horizontal = false
+    @State private var useNumber = false
+    @State private var showTitle = true
+    @State private var showDescription = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                ProgressInfo(
+                    steps: piSteps,
+                    horizontal: horizontal,
+                    size: (size?.value as? ProgressInfoSize) ?? .large,
+                    useNumber: useNumber,
+                    align: (align?.value as? ProgressInfoAlign) ?? .center,
+                    showTitle: showTitle,
+                    showDescription: showDescription
+                )
+            },
+            params: [
+                .radio("Size", progressInfoSizeList, $size),
+                .radio("Align", progressInfoAlignList, $align),
+                .checkbox("Horizontal", $horizontal),
+                .checkbox("UseNumber", $useNumber),
+                .checkbox("ShowTitle", $showTitle),
+                .checkbox("ShowDescription", $showDescription),
+            ]
+        )
     }
 }