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

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

@@ -2,9 +2,7 @@
 //  StepsDemo.swift
 //  Example
 //
-//  Usage demo for the Steps progress indicator. Mirrors Compose's `StepsUsage`
-//  preview cases: vertical/horizontal, sizes, error, use-number, alignments,
-//  disabled and time labels.
+//  Preview + Playground demo, mirroring Compose's StepsUsage.kt.
 //
 
 import MoMoUIKits
@@ -29,66 +27,88 @@ private let stepsWithError: [StepItem] = [
     StepItem(title: "Complete"),
 ]
 
+private let stepsSizeList: [PlaygroundOption] = [
+    .init("large", StepsSize.large),
+    .init("small", StepsSize.small),
+]
+
+private let stepsAlignList: [PlaygroundOption] = [
+    .init("center", StepsAlign.center),
+    .init("left", StepsAlign.left),
+    .init("right", StepsAlign.right),
+    .init("stretch", StepsAlign.stretch),
+]
+
 struct StepsDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Vertical — Large (default)") {
-                    Steps(steps: sampleSteps, activeIndex: 1)
-                }
-                section("Vertical — Small") {
-                    Steps(steps: sampleSteps, activeIndex: 2, size: .small)
-                }
-                section("Vertical — With error") {
-                    Steps(steps: stepsWithError, activeIndex: 1)
-                }
-                section("Vertical — Use number") {
-                    Steps(steps: shortSteps, activeIndex: 1, useNumber: true)
-                }
-                section("Vertical — Disabled") {
-                    Steps(steps: sampleSteps, activeIndex: 1, disabled: true)
-                }
-                section("Horizontal — Center (default)") {
-                    Steps(steps: shortSteps, activeIndex: 1, horizontal: true)
-                }
-                section("Horizontal — With time") {
-                    Steps(steps: sampleSteps, activeIndex: 2, horizontal: true)
-                }
-                section("Horizontal — Align Left") {
-                    Steps(steps: shortSteps, activeIndex: 0, horizontal: true, align: .left)
-                }
-                section("Horizontal — Align Right") {
-                    Steps(steps: shortSteps, activeIndex: 2, horizontal: true, align: .right)
-                }
-                section("Horizontal — Align Stretch") {
-                    Steps(steps: shortSteps, activeIndex: 1, horizontal: true, align: .stretch)
-                }
-                section("Horizontal — Small + Use number") {
-                    Steps(
-                        steps: shortSteps,
-                        activeIndex: 1,
-                        horizontal: true,
-                        size: .small,
-                        useNumber: true
-                    )
-                }
-                section("Horizontal — With error") {
-                    Steps(steps: stepsWithError, activeIndex: 1, horizontal: true)
-                }
-            }
-            .padding(16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { StepsPreview() }, playground: { StepsPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            MomoText(title, typography: .headerSSemibold, color: Colors.text)
-            content()
+// MARK: - Preview
+
+private struct StepsPreview: View {
+    var body: some View {
+        BasicColumnBox("Vertical — Large (default)", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 1)
+        }
+        BasicColumnBox("Vertical — Small", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 2, size: .small)
+        }
+        BasicColumnBox("Vertical — With error", alignment: .leading) {
+            Steps(steps: stepsWithError, activeIndex: 1)
+        }
+        BasicColumnBox("Vertical — Use number", alignment: .leading) {
+            Steps(steps: shortSteps, activeIndex: 1, useNumber: true)
         }
-        .frame(maxWidth: .infinity, alignment: .leading)
+        BasicColumnBox("Horizontal — Center", alignment: .leading) {
+            Steps(steps: shortSteps, activeIndex: 1, horizontal: true)
+        }
+        BasicColumnBox("Horizontal — With time", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 2, horizontal: true)
+        }
+        BasicColumnBox("Horizontal — With error", alignment: .leading) {
+            Steps(steps: stepsWithError, activeIndex: 1, horizontal: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct StepsPlayground: View {
+    @State private var activeIndex: Double = 1
+    @State private var size: PlaygroundOption? = stepsSizeList.first { $0.key == "large" }
+    @State private var align: PlaygroundOption? = stepsAlignList.first { $0.key == "center" }
+    @State private var horizontal = false
+    @State private var useNumber = false
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Steps(
+                    steps: sampleSteps,
+                    activeIndex: Int(activeIndex),
+                    horizontal: horizontal,
+                    size: (size?.value as? StepsSize) ?? .large,
+                    useNumber: useNumber,
+                    align: (align?.value as? StepsAlign) ?? .center,
+                    disabled: disabled
+                )
+            },
+            params: [
+                .slider("ActiveIndex", $activeIndex, min: 0, max: 3, step: 1),
+                .radio("Size", stepsSizeList, $size),
+                .radio("Align", stepsAlignList, $align),
+                .checkbox("Horizontal", $horizontal),
+                .checkbox("UseNumber", $useNumber),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
     }
 }

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

@@ -1,79 +1,90 @@
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct SuggestActionDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SuggestActionPreview() }, playground: { SuggestActionPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SuggestActionPreview: View {
     @State private var visible1 = true
     @State private var visible2 = true
     @State private var visible3 = true
-    @State private var visible4 = true
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Default") {
-                    SuggestAction(
-                        message: "You have a new suggestion available for you.",
-                        buttonTitle: "View",
-                        visible: visible1,
-                        onClose: { visible1 = false },
-                        onPressButton: { visible1 = false }
-                    )
-                }
-
-                section("With bold message") {
-                    SuggestAction(
-                        message: "You have a new suggestion available for you.",
-                        buttonTitle: "View",
-                        boldMessage: "new suggestion",
-                        visible: visible2,
-                        onClose: { visible2 = false },
-                        onPressButton: { visible2 = false }
-                    )
-                }
+        BasicColumnBox("Default", alignment: .leading) {
+            SuggestAction(
+                message: "You have a new suggestion available for you.",
+                buttonTitle: "View",
+                visible: visible1,
+                onClose: { visible1 = false },
+                onPressButton: { visible1 = false }
+            )
+        }
+        BasicColumnBox("With bold message", alignment: .leading) {
+            SuggestAction(
+                message: "You have a new suggestion available for you.",
+                buttonTitle: "View",
+                boldMessage: "new suggestion",
+                visible: visible2,
+                onClose: { visible2 = false },
+                onPressButton: { visible2 = false }
+            )
+        }
+        BasicColumnBox("With image", alignment: .leading) {
+            SuggestAction(
+                message: "Complete your profile to unlock more features.",
+                buttonTitle: "Go",
+                boldMessage: "Complete",
+                image: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
+                visible: visible3,
+                onClose: { visible3 = false },
+                onPressButton: { visible3 = false }
+            )
+        }
+        MoMoUIKits.Button(
+            title: "Reset all",
+            action: { visible1 = true; visible2 = true; visible3 = true },
+            type: .primary,
+            isFull: false
+        )
+    }
+}
 
-                section("With image") {
-                    SuggestAction(
-                        message: "Complete your profile to unlock more features.",
-                        buttonTitle: "Go",
-                        boldMessage: "Complete",
-                        image: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
-                        visible: visible3,
-                        onClose: { visible3 = false },
-                        onPressButton: { visible3 = false }
-                    )
-                }
+// MARK: - Playground
 
-                section("Short message") {
-                    SuggestAction(
-                        message: "Update available.",
-                        buttonTitle: "Update",
-                        visible: visible4,
-                        onClose: { visible4 = false },
-                        onPressButton: { visible4 = false }
-                    )
-                }
+@available(iOS 16.0, *)
+private struct SuggestActionPlayground: View {
+    @State private var message = "You have a new suggestion available for you."
+    @State private var buttonTitle = "View"
+    @State private var boldMessage = "suggestion"
+    @State private var visible = true
 
-                Button(
-                    title: "Reset all",
-                    action: {
-                        visible1 = true
-                        visible2 = true
-                        visible3 = true
-                        visible4 = true
-                    },
-                    type: .primary,
-                    isFull: false
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                SuggestAction(
+                    message: message,
+                    buttonTitle: buttonTitle,
+                    boldMessage: boldMessage,
+                    visible: visible,
+                    onClose: { visible = false },
+                    onPressButton: { visible = false }
                 )
-            }
-            .padding()
-        }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            MomoText(title, typography: .headerSSemibold, color: Colors.textSecondary)
-            content()
-        }
+            },
+            params: [
+                .string("Message", $message),
+                .string("ButtonTitle", $buttonTitle),
+                .string("BoldMessage", $boldMessage),
+                .checkbox("Visible", $visible),
+            ]
+        )
     }
 }

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

@@ -1,152 +1,107 @@
+//
+//  SwipeDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's SwipeUsage.kt.
+//
+
 import MoMoUIKits
 import SwiftUI
 
+private func swipeContent(_ text: String) -> some View {
+    HStack {
+        MomoText(text, typography: .bodyDefaultRegular, color: Colors.text)
+        Spacer(minLength: 0)
+    }
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+    .padding(.horizontal, Spacing.M)
+    .background(Colors.card)
+}
+
 struct SwipeDemo: View {
-    @State private var showLeftActions = true
-    @State private var showRightActions = true
-    @State private var heightValue: Double = 56
-    @State private var radiusValue: Double = 0
-    @State private var lastAction = "No action yet"
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SwipePreview() }, playground: { SwipePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
 
+private struct SwipePreview: View {
     private var editAction: SwipeAction {
-        SwipeAction(
-            label: "Edit",
-            icon: "24_basic_copy",
-            backgroundColor: Colors.blue03,
-            onPress: { lastAction = "Edit pressed" }
-        )
+        SwipeAction(label: "Edit", icon: "24_basic_copy", backgroundColor: Colors.blue03, onPress: {})
     }
-
     private var deleteAction: SwipeAction {
-        SwipeAction(
-            label: "Delete",
-            icon: "24_basic_delete",
-            backgroundColor: Colors.red03,
-            onPress: { lastAction = "Delete pressed" }
-        )
+        SwipeAction(label: "Delete", icon: "24_basic_delete", backgroundColor: Colors.red03, onPress: {})
     }
-
     private var archiveAction: SwipeAction {
-        SwipeAction(
-            label: "Archive",
-            icon: "24_basic_flag",
-            backgroundColor: Colors.orange03,
-            onPress: { lastAction = "Archive pressed" }
-        )
+        SwipeAction(label: "Archive", icon: "24_basic_flag", backgroundColor: Colors.orange03, onPress: {})
     }
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: Spacing.XL) {
-                preview
-                Divider()
-                playground
-            }
-            .padding(.vertical, Spacing.L)
+        BasicColumnBox("Right actions only", alignment: .leading) {
+            Swipe(rightActions: [deleteAction]) { swipeContent("Swipe left to delete") }
         }
-        .background(Colors.background)
-    }
-
-    private var preview: some View {
-        VStack(alignment: .leading, spacing: Spacing.XL) {
-            section("Right actions only") {
-                Swipe(rightActions: [deleteAction]) {
-                    swipeContent("Swipe left to delete")
-                }
-            }
-
-            section("Left actions only") {
-                Swipe(leftActions: [editAction, archiveAction]) {
-                    swipeContent("Swipe right for actions")
-                }
-            }
-
-            section("Both sides") {
-                Swipe(leftActions: [editAction], rightActions: [deleteAction]) {
-                    swipeContent("Swipe both directions")
-                }
-            }
-
-            section("Multiple right actions") {
-                Swipe(rightActions: [editAction, archiveAction, deleteAction]) {
-                    swipeContent("3 right actions")
-                }
-            }
-
-            section("With itemRadius") {
-                Swipe(rightActions: [deleteAction], itemRadius: Radius.S) {
-                    swipeContent("Rounded corners")
-                }
-            }
-
-            section("Custom height") {
-                Swipe(rightActions: [deleteAction], height: 80) {
-                    swipeContent("Taller row (80dp)")
-                }
-            }
+        BasicColumnBox("Left actions only", alignment: .leading) {
+            Swipe(leftActions: [editAction, archiveAction]) { swipeContent("Swipe right for actions") }
+        }
+        BasicColumnBox("Both sides", alignment: .leading) {
+            Swipe(leftActions: [editAction], rightActions: [deleteAction]) { swipeContent("Swipe both directions") }
+        }
+        BasicColumnBox("Multiple right actions", alignment: .leading) {
+            Swipe(rightActions: [editAction, archiveAction, deleteAction]) { swipeContent("3 right actions") }
+        }
+        BasicColumnBox("With itemRadius", alignment: .leading) {
+            Swipe(rightActions: [deleteAction], itemRadius: Radius.S) { swipeContent("Rounded corners") }
+        }
+        BasicColumnBox("Custom height", alignment: .leading) {
+            Swipe(rightActions: [deleteAction], height: 80) { swipeContent("Taller row (80dp)") }
         }
     }
+}
 
-    private var playground: some View {
-        section("Playground") {
-            Toggle(isOn: $showLeftActions) {
-                MomoText("Show Left Actions", typography: .labelSMedium, color: Colors.text)
-            }
-
-            Toggle(isOn: $showRightActions) {
-                MomoText("Show Right Actions", typography: .labelSMedium, color: Colors.text)
-            }
-
-            VStack(alignment: .leading, spacing: Spacing.XS) {
-                MomoText("Height: \(Int(heightValue))", typography: .labelSMedium, color: Colors.textSecondary)
-                Slider(value: $heightValue, in: 40...100, step: 1)
-            }
-
-            VStack(alignment: .leading, spacing: Spacing.XS) {
-                MomoText("Item Radius: \(Int(radiusValue))", typography: .labelSMedium, color: Colors.textSecondary)
-                Slider(value: $radiusValue, in: 0...24, step: 1)
-            }
+// MARK: - Playground
 
-            Swipe(
-                leftActions: showLeftActions ? [editAction, archiveAction] : [],
-                rightActions: showRightActions ? [deleteAction] : [],
-                height: CGFloat(heightValue),
-                itemRadius: CGFloat(radiusValue)
-            ) {
-                swipeContent("Swipe me!")
-            }
+@available(iOS 16.0, *)
+private struct SwipePlayground: View {
+    @State private var showLeftActions = true
+    @State private var showRightActions = true
+    @State private var heightValue: Double = 56
+    @State private var radiusValue: Double = 0
+    @State private var lastAction = "No action yet"
 
-            MomoText(lastAction, typography: .descriptionDefaultRegular, color: Colors.textSecondary)
-        }
+    private var editAction: SwipeAction {
+        SwipeAction(label: "Edit", icon: "24_basic_copy", backgroundColor: Colors.blue03, onPress: { lastAction = "Edit pressed" })
     }
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: Spacing.M) {
-            MomoText(title, typography: .headerSSemibold, color: Colors.text)
-            content()
-        }
-        .padding(.horizontal, Spacing.M)
+    private var deleteAction: SwipeAction {
+        SwipeAction(label: "Delete", icon: "24_basic_delete", backgroundColor: Colors.red03, onPress: { lastAction = "Delete pressed" })
     }
-
-    private func swipeContent(_ text: String) -> some View {
-        HStack {
-            MomoText(text, typography: .bodyDefaultRegular, color: Colors.text)
-            Spacer(minLength: 0)
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity)
-        .padding(.horizontal, Spacing.M)
-        .background(Colors.card)
+    private var archiveAction: SwipeAction {
+        SwipeAction(label: "Archive", icon: "24_basic_flag", backgroundColor: Colors.orange03, onPress: { lastAction = "Archive pressed" })
     }
-}
 
-#if DEBUG
-struct SwipeDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        SwipeDemo()
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    Swipe(
+                        leftActions: showLeftActions ? [editAction, archiveAction] : [],
+                        rightActions: showRightActions ? [deleteAction] : [],
+                        height: CGFloat(heightValue),
+                        itemRadius: CGFloat(radiusValue)
+                    ) { swipeContent("Swipe me!") }
+                    MomoText(lastAction, typography: .descriptionDefaultRegular, color: Colors.textSecondary)
+                }
+            },
+            params: [
+                .checkbox("ShowLeftActions", $showLeftActions),
+                .checkbox("ShowRightActions", $showRightActions),
+                .slider("Height", $heightValue, min: 40, max: 100, step: 1),
+                .slider("ItemRadius", $radiusValue, min: 0, max: 24, step: 1),
+            ]
+        )
     }
 }
-#endif

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

@@ -2,32 +2,57 @@
 //  SwitchDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 3/12/24.
+//  Preview + Playground demo for Switch.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct SwitchDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SwitchPreview() }, playground: { SwitchPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SwitchPreview: View {
     @State private var checked = false
-    
+
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text("Value")
-            Switch($checked, onChange: { newValue in
-                checked = newValue
-            })
-               
-            
-            Text("Disabled")
-            Switch( .constant(true), disabled: true, onChange: { _ in
-                checked = !checked
-            })
-                
-            Switch( .constant(false), disabled: true, onChange: { _ in
-                checked = !checked
-            })
+        BasicColumnBox("Value", alignment: .leading) {
+            Switch($checked, onChange: { checked = $0 })
         }
-        .padding()
+        BasicColumnBox("Disabled (on)", alignment: .leading) {
+            Switch(.constant(true), disabled: true)
+        }
+        BasicColumnBox("Disabled (off)", alignment: .leading) {
+            Switch(.constant(false), disabled: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SwitchPlayground: View {
+    @State private var value = false
+    @State private var title = ""
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Switch($value, disabled: disabled, onChange: { value = $0 }, title: title)
+            },
+            params: [
+                .string("Title", $title),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
     }
 }