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

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

@@ -4,135 +4,79 @@ import SwiftUI
 struct SnackBarDemo: View {
     var body: some View {
         if #available(iOS 16.0, *) {
-            SnackBarDemoContent()
+            DemoScreen(preview: { SnackBarPreview() }, playground: { SnackBarPlayground() })
         } else {
-            MomoText("SnackBar demo requires iOS 16+")
-                .padding()
+            Text("Requires iOS 16+").padding()
         }
     }
 }
 
+// MARK: - Preview
+
 @available(iOS 16.0, *)
-private struct SnackBarDemoContent: View {
+private struct SnackBarPreview: View {
     @EnvironmentObject private var navigator: Navigator
 
-    @State private var duration = "1000"
-    @State private var undefinedDuration = false
-    @State private var showFooter = true
-
-    private var snackBarDuration: TimeInterval? {
-        if undefinedDuration {
-            return nil
-        }
-        guard let milliseconds = Double(duration) else {
-            return nil
+    var body: some View {
+        BasicColumnBox("SnackBar", alignment: .leading) {
+            MoMoUIKits.Button(title: "Show snack bar", action: { showSnack(1) }, size: .large)
+            MoMoUIKits.Button(title: "Show toast", action: { navigator.showSnackBar(.toast(duration: 1)) }, type: .secondary, size: .large)
+            MoMoUIKits.Button(title: "Hide snack bar", action: { navigator.hideSnackBar() }, type: .text, size: .large)
         }
-        return milliseconds / 1000
     }
 
-    var body: some View {
-        VStack(spacing: 0) {
-            ScrollView {
-                VStack(alignment: .leading, spacing: Spacing.M) {
-                    Input(
-                        text: $duration,
-                        placeholder: "Duration",
-                        floatingValue: "Duration",
-                        keyboardType: .numberPad
-                    )
-
-                    Checkbox(
-                        Binding(
-                            get: { undefinedDuration },
-                            set: { checked in
-                                undefinedDuration = checked
-                                if checked {
-                                    duration = ""
-                                } else if duration.isEmpty {
-                                    duration = "1000"
-                                }
-                            }
-                        ),
-                        title: "Undefined"
-                    )
+    private func showSnack(_ duration: TimeInterval?) {
+        navigator.showSnackBar(.custom(duration: duration) {
+            HStack {
+                MomoText("Snack bar !!!", color: Colors.black01)
+                Spacer()
+            }
+            .padding(.horizontal, 20)
+            .frame(height: 80)
+            .frame(maxWidth: .infinity)
+            .background(Colors.black17)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+            .padding(.horizontal, Spacing.M)
+        })
+    }
+}
 
-                    HStack(spacing: Spacing.M) {
-                        MoMoUIKits.Switch($showFooter)
-                        MomoText("Footer")
-                    }
+// MARK: - Playground
 
-                    MoMoUIKits.Button(
-                        title: "Show snack bar",
-                        action: showSnackBar,
-                        size: .large
-                    )
+@available(iOS 16.0, *)
+private struct SnackBarPlayground: View {
+    @EnvironmentObject private var navigator: Navigator
+    @State private var duration = "1000"
 
-                    MoMoUIKits.Button(
-                        title: "Show toast",
-                        action: { navigator.showSnackBar(.toast(duration: snackBarDuration)) },
-                        type: .secondary,
-                        size: .large
-                    )
+    private var seconds: TimeInterval? { Double(duration).map { $0 / 1000 } }
 
-                    MoMoUIKits.Button(
-                        title: "Hide snack bar",
-                        action: { navigator.hideSnackBar() },
-                        type: .text,
-                        size: .large
-                    )
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(spacing: Spacing.S) {
+                    MoMoUIKits.Button(title: "Show snack bar", action: { showSnack(seconds) }, size: .large)
+                    MoMoUIKits.Button(title: "Show toast", action: { navigator.showSnackBar(.toast(duration: seconds)) }, type: .secondary, size: .large)
+                    MoMoUIKits.Button(title: "Hide snack bar", action: { navigator.hideSnackBar() }, type: .text, size: .large)
                 }
-                .padding(Spacing.L)
-            }
-
-            if showFooter {
-                footer
-            }
-        }
-    }
-
-    private var footer: some View {
-        VStack(spacing: 0) {
-            MoMoUIKits.Button(
-                title: "Footer",
-                action: {},
-                size: .large
-            )
-            .padding(.vertical, Spacing.S)
-            .padding(.horizontal, Spacing.M)
-        }
-        .frame(maxWidth: .infinity)
-        .background(Colors.black01)
-        .overlay(
-            Rectangle()
-                .fill(Colors.black20.opacity(0.1))
-                .frame(height: 4)
-                .shadow(color: Colors.black20.opacity(0.2), radius: 10, y: -2),
-            alignment: .top
+            },
+            params: [
+                .number("Duration (ms)", $duration),
+            ]
         )
     }
 
-    private func showSnackBar() {
-        navigator.showSnackBar(
-            .custom(duration: snackBarDuration) {
-                HStack {
-                    MomoText("Snack bar !!!", color: Colors.black01)
-                    Spacer()
-                }
-                .padding(.horizontal, 20)
-                .frame(height: 80)
-                .frame(maxWidth: .infinity)
-                .background(Colors.black17)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.M))
-                .padding(.horizontal, Spacing.M)
+    private func showSnack(_ duration: TimeInterval?) {
+        navigator.showSnackBar(.custom(duration: duration) {
+            HStack {
+                MomoText("Snack bar !!!", color: Colors.black01)
+                Spacer()
             }
-        )
-    }
-}
-
-#if DEBUG
-struct SnackBarDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        SnackBarDemo()
+            .padding(.horizontal, 20)
+            .frame(height: 80)
+            .frame(maxWidth: .infinity)
+            .background(Colors.black17)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+            .padding(.horizontal, Spacing.M)
+        })
     }
 }
-#endif

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

@@ -2,102 +2,92 @@
 //  StepperDemo.swift
 //  Example
 //
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - StepperDemo
-
 struct StepperDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { StepperPreview() }, playground: { StepperPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct StepperPreview: View {
     @State private var sizeLarge = 5
     @State private var sizeSmall = 5
-
-    @State private var def0 = 0
     @State private var def50 = 50
-    @State private var def100 = 100
-
     @State private var customStep5 = 0
-    @State private var customStep10 = 10
-
-    @State private var editableLarge = 5
-    @State private var editableSmall = 5
-
-    @State private var disabledAllLarge = 5
-    @State private var disabledAllSmall = 5
-
+    @State private var editable = 5
+    @State private var disabledAll = 5
     @State private var disabledMinus = 5
     @State private var disabledPlus = 5
-
-    @State private var boundLow = 0
-    @State private var boundHigh = 10
+    @State private var bound = 0
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Size") {
-                    MomoStepper(value: $sizeLarge, size: .large)
-                    MomoStepper(value: $sizeSmall, size: .small)
-                }
-
-                section("Default (min=0, max=100, step=1)") {
-                    MomoStepper(value: $def0)
-                    MomoStepper(value: $def50)
-                    MomoStepper(value: $def100)
-                }
-
-                section("Custom step") {
-                    MomoStepper(value: $customStep5, min: 0, max: 50, step: 5)
-                    MomoStepper(value: $customStep10, min: 0, max: 100, step: 10)
-                }
-
-                section("Editable") {
-                    MomoStepper(value: $editableLarge, editable: true)
-                    MomoStepper(value: $editableSmall, size: .small, editable: true)
-                }
-
-                section("Disabled — all") {
-                    MomoStepper(value: $disabledAllLarge, disabled: true)
-                    MomoStepper(value: $disabledAllSmall, size: .small, disabled: true)
-                }
-
-                section("Disabled — minus only") {
-                    MomoStepper(value: $disabledMinus, disabled: StepperDisabled(minus: true, plus: false))
-                }
-
-                section("Disabled — plus only") {
-                    MomoStepper(value: $disabledPlus, disabled: StepperDisabled(minus: false, plus: true))
-                }
-
-                section("Auto-disabled at bounds") {
-                    MomoStepper(value: $boundLow, min: 0, max: 10)
-                    MomoStepper(value: $boundHigh, min: 0, max: 10)
-                }
-            }
-            .padding(.vertical, 16)
+        BasicColumnBox("Size", alignment: .leading) {
+            MomoStepper(value: $sizeLarge, size: .large)
+            MomoStepper(value: $sizeSmall, size: .small)
         }
-    }
-
-    // MARK: - Helpers
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+        BasicColumnBox("Default (min=0, max=100, step=1)", alignment: .leading) {
+            MomoStepper(value: $def50)
+        }
+        BasicColumnBox("Custom step (5)", alignment: .leading) {
+            MomoStepper(value: $customStep5, min: 0, max: 50, step: 5)
+        }
+        BasicColumnBox("Editable", alignment: .leading) {
+            MomoStepper(value: $editable, editable: true)
+        }
+        BasicColumnBox("Disabled — all", alignment: .leading) {
+            MomoStepper(value: $disabledAll, disabled: true)
+        }
+        BasicColumnBox("Disabled — minus / plus only", alignment: .leading) {
+            MomoStepper(value: $disabledMinus, disabled: StepperDisabled(minus: true, plus: false))
+            MomoStepper(value: $disabledPlus, disabled: StepperDisabled(minus: false, plus: true))
+        }
+        BasicColumnBox("Auto-disabled at bounds (0…10)", alignment: .leading) {
+            MomoStepper(value: $bound, min: 0, max: 10)
         }
-        .padding(.horizontal, 16)
     }
 }
 
-#if DEBUG
-struct StepperDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        StepperDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct StepperPlayground: View {
+    @State private var value = 5
+    @State private var small = false
+    @State private var editable = false
+    @State private var disabled = false
+    @State private var step = 1.0
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoStepper(
+                    value: $value,
+                    min: 0,
+                    max: 100,
+                    step: Int(step),
+                    size: small ? .small : .large,
+                    disabled: StepperDisabled(disabled),
+                    editable: editable
+                )
+                .id("\(small)-\(editable)-\(disabled)-\(Int(step))")
+            },
+            params: [
+                .checkbox("Small", $small),
+                .checkbox("Editable", $editable),
+                .checkbox("Disabled", $disabled),
+                .slider("Step", $step, min: 1, max: 10, step: 1),
+            ]
+        )
     }
 }
-#endif

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