@momo-kits/native-kits 0.162.30 → 0.162.31

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

@@ -1,34 +1,86 @@
-import SwiftUI
+//
+//  TagDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's TagUsage.kt.
+//
+
 import MoMoUIKits
+import SwiftUI
+
+private let tagColorList: [PlaygroundOption] = [
+    .init("default", Tag.TagColor.default),
+    .init("orange", Tag.TagColor.orange),
+    .init("green", Tag.TagColor.green),
+    .init("red", Tag.TagColor.red),
+    .init("blue", Tag.TagColor.blue),
+    .init("grey", Tag.TagColor.grey),
+]
+
+private let tagSizeList: [PlaygroundOption] = [
+    .init("large", Tag.TagSize.large),
+    .init("medium", Tag.TagSize.medium),
+]
 
 struct TagDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                VStack(alignment: .leading, spacing: 8) {
-                    Text("Color").font(.headline)
-                    Tag()
-                    Tag(color: .red)
-                    Tag(color: .blue)
-                    Tag(color: .green)
-                    Tag(color: .orange)
-                    Tag(color: .grey)
-                }
-
-                VStack(alignment: .leading, spacing: 8) {
-                    Text("Size").font(.headline)
-                    Tag(size: .large)
-                    Tag(size: .medium)
-                }
-
-                VStack(alignment: .leading, spacing: 8) {
-                    Text("With Icon").font(.headline)
-                    Tag(icon: "ic_momo", color: .grey)
-                    Tag(icon: "ic_momo", color: .red, size: .medium)
-                    Tag(icon: "ic_momo", color: .blue, size: .medium)
-                }
-            }
-            .padding()
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TagPreview() }, playground: { TagPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
 }
+
+// MARK: - Preview
+
+private struct TagPreview: View {
+    var body: some View {
+        BasicColumnBox("Color", alignment: .leading) {
+            Tag()
+            Tag(color: .red)
+            Tag(color: .blue)
+            Tag(color: .green)
+            Tag(color: .orange)
+            Tag(color: .grey)
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            Tag(size: .large)
+            Tag(size: .medium)
+        }
+        BasicColumnBox("With Icon", alignment: .leading) {
+            Tag(icon: "ic_momo", color: .grey)
+            Tag(icon: "ic_momo", color: .red, size: .medium)
+            Tag(icon: "ic_momo", color: .blue, size: .medium)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TagPlayground: View {
+    @State private var label = "Label"
+    @State private var color: PlaygroundOption? = tagColorList.first { $0.key == "default" }
+    @State private var size: PlaygroundOption? = tagSizeList.first { $0.key == "large" }
+    @State private var icon: PlaygroundOption?
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Tag(
+                    label: label,
+                    icon: icon?.value as? String,
+                    color: (color?.value as? Tag.TagColor) ?? .default,
+                    size: (size?.value as? Tag.TagSize) ?? .large
+                )
+            },
+            params: [
+                .string("Label", $label),
+                .radio("Color", tagColorList, $color),
+                .radio("Size", tagSizeList, $size),
+                .option("Icon", playgroundIcons, $icon),
+            ]
+        )
+    }
+}

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

@@ -90,7 +90,6 @@ struct ThemeDemo: View {
                 Spacer(minLength: 32)
             }
         }
-        .navigationTitle("Theme")
         .background(isDarkMode ? Colors.black10.ignoresSafeArea() : theme.colors.background.default.ignoresSafeArea())
         .environment(\.appTheme, isDarkMode ? darkTheme : defaultTheme)
     }

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

@@ -2,108 +2,103 @@
 //  TitleDemo.swift
 //  Example
 //
-import SwiftUI
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
 import MoMoUIKits
+import SwiftUI
 
-struct TitleDemo: View {
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Section Type") {
-                    Title(
-                        title: "Section Small",
-                        type: .section,
-                        size: .small
-                    )
-                    Title(
-                        title: "Section Medium",
-                        type: .section,
-                        size: .medium,
-                        icon: "basic_home",
-                        description: "This is a medium section with icon."
-                    )
-                    Title(
-                        title: "Section Large",
-                        type: .section,
-                        size: .large,
-                        showTrailingAction: true,
-                        badgeLabel: "NEW",
-                        onPressTrailingAction: { }
-                    )
-                }
+private let titleTypeList: [PlaygroundOption] = [
+    .init("card", TitleType.card),
+    .init("section", TitleType.section),
+]
+
+private let titleSizeList: [PlaygroundOption] = [
+    .init("small", TitleSize.small),
+    .init("medium", TitleSize.medium),
+    .init("large", TitleSize.large),
+]
 
-                section("Card Type") {
-                    Title(
-                        title: "Card Small Text Only",
-                        type: .card,
-                        size: .small,
-                        textOnly: true
-                    )
-                    Title(
-                        title: "Card Medium with Right Action",
-                        type: .card,
-                        size: .medium,
-                        icon: "basic_home",
-                        showRightAction: true,
-                        buttonTitle: "Action",
-                        onPressRightAction: { }
-                    )
-                    Title(
-                        title: "Card Large Full",
-                        type: .card,
-                        size: .large,
-                        icon: "basic_home",
-                        showRightAction: true,
-                        badgeLabel: "99+",
-                        onPressRightAction: { },
-                        description: "A large card title with description, badge and right arrow."
-                    )
-                }
+private let iconAlignList: [PlaygroundOption] = [
+    .init("top", IconAlign.top),
+    .init("center", IconAlign.center),
+    .init("bottom", IconAlign.bottom),
+]
 
-                section("Icon Alignment") {
-                    Title(
-                        title: "Icon Top",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .top,
-                        description: "Icon aligned to top"
-                    )
-                    Title(
-                        title: "Icon Center",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .center,
-                        description: "Icon aligned to center"
-                    )
-                    Title(
-                        title: "Icon Bottom",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .bottom,
-                        description: "Icon aligned to bottom"
-                    )
-                }
-            }
-            .padding(16)
+struct TitleDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TitlePreview() }, playground: { TitlePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
+
+// MARK: - Preview
 
-    @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()
+private struct TitlePreview: View {
+    var body: some View {
+        BasicColumnBox("Section Type", alignment: .leading) {
+            Title(title: "Section Small", type: .section, size: .small)
+            Title(title: "Section Medium", type: .section, size: .medium, icon: "basic_home",
+                  description: "This is a medium section with icon.")
+            Title(title: "Section Large", type: .section, size: .large,
+                  showTrailingAction: true, badgeLabel: "NEW", onPressTrailingAction: {})
+        }
+        BasicColumnBox("Card Type", alignment: .leading) {
+            Title(title: "Card Small Text Only", type: .card, size: .small, textOnly: true)
+            Title(title: "Card Medium with Right Action", type: .card, size: .medium, icon: "basic_home",
+                  showRightAction: true, buttonTitle: "Action", onPressRightAction: {})
+        }
+        BasicColumnBox("Icon Alignment", alignment: .leading) {
+            Title(title: "Icon Top", type: .section, icon: "basic_home", iconAlign: .top, description: "Aligned top")
+            Title(title: "Icon Center", type: .section, icon: "basic_home", iconAlign: .center, description: "Aligned center")
         }
     }
 }
 
-struct TitleDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        NavigationView {
-            TitleDemo()
-        }
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TitlePlayground: View {
+    @State private var title = "Title"
+    @State private var type: PlaygroundOption? = titleTypeList.first { $0.key == "section" }
+    @State private var size: PlaygroundOption? = titleSizeList.first { $0.key == "medium" }
+    @State private var icon: PlaygroundOption?
+    @State private var iconAlign: PlaygroundOption? = iconAlignList.first { $0.key == "top" }
+    @State private var description = ""
+    @State private var badgeLabel = ""
+    @State private var showRightAction = false
+    @State private var textOnly = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Title(
+                    title: title,
+                    type: (type?.value as? TitleType) ?? .section,
+                    size: (size?.value as? TitleSize) ?? .medium,
+                    icon: (icon?.value as? String),
+                    iconAlign: (iconAlign?.value as? IconAlign) ?? .top,
+                    showRightAction: showRightAction,
+                    badgeLabel: badgeLabel.isEmpty ? nil : badgeLabel,
+                    onPressRightAction: {},
+                    textOnly: textOnly,
+                    description: description.isEmpty ? nil : description
+                )
+            },
+            params: [
+                .string("Title", $title),
+                .radio("Type", titleTypeList, $type),
+                .radio("Size", titleSizeList, $size),
+                .option("Icon", playgroundIcons, $icon),
+                .radio("IconAlign", iconAlignList, $iconAlign),
+                .string("Description", $description),
+                .string("BadgeLabel", $badgeLabel),
+                .checkbox("ShowRightAction", $showRightAction),
+                .checkbox("TextOnly", $textOnly),
+            ]
+        )
     }
 }

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

@@ -2,186 +2,117 @@
 //  TooltipDemo.swift
 //  Example
 //
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - TooltipDemo
-
 struct TooltipDemo: View {
-    // Placement
-    @StateObject private var topState = TooltipState()
-    @StateObject private var bottomState = TooltipState()
-    @StateObject private var leftState = TooltipState()
-    @StateObject private var rightState = TooltipState()
-
-    // Alignment
-    @StateObject private var startState = TooltipState()
-    @StateObject private var centerState = TooltipState()
-    @StateObject private var endState = TooltipState()
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TooltipPreview() }, playground: { TooltipPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-    // With Buttons
-    @StateObject private var singleBtnState = TooltipState()
-    @StateObject private var twoBtnState = TooltipState()
+// MARK: - Preview
 
-    // Description Only
+private struct TooltipPreview: View {
+    @StateObject private var topState = TooltipState()
+    @StateObject private var bottomState = TooltipState()
+    @StateObject private var btnState = TooltipState()
     @StateObject private var descState = TooltipState()
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 48) {
-                // MARK: - Placement
-
-                section("Placement") {
-                    Tooltip(
-                        state: topState,
-                        title: "Top",
-                        description: "Tooltip on top of the anchor.",
-                        placement: .top,
-                        onPressClose: { topState.hide() }
-                    ) {
-                        Button(title: "Top", action: { topState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: bottomState,
-                        title: "Bottom",
-                        description: "Tooltip below the anchor.",
-                        placement: .bottom,
-                        onPressClose: { bottomState.hide() }
-                    ) {
-                        Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    HStack {
-                        Tooltip(
-                            state: rightState,
-                            title: "Right",
-                            description: "Tooltip on the right.",
-                            placement: .right,
-                            onPressClose: { rightState.hide() }
-                        ) {
-                            Button(title: "Right", action: { rightState.toggle() }, size: .small, isFull: false)
-                        }
-                        Spacer().frame(width: 12)
-                        Tooltip(
-                            state: leftState,
-                            title: "Left",
-                            description: "Tooltip on the left.",
-                            placement: .left,
-                            onPressClose: { leftState.hide() }
-                        ) {
-                            Button(title: "Left", action: { leftState.toggle() }, size: .small, isFull: false)
-                        }
-                    }
-                }
-
-                // MARK: - Alignment
-
-                section("Alignment") {
-                    Tooltip(
-                        state: startState,
-                        title: "Start",
-                        description: "Aligned to start.",
-                        placement: .bottom,
-                        align: .start,
-                        onPressClose: { startState.hide() }
-                    ) {
-                        Button(title: "Start", action: { startState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: centerState,
-                        title: "Center",
-                        description: "Aligned to center.",
-                        placement: .bottom,
-                        align: .center,
-                        onPressClose: { centerState.hide() }
-                    ) {
-                        Button(title: "Center", action: { centerState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: endState,
-                        title: "End",
-                        description: "Aligned to end.",
-                        placement: .bottom,
-                        align: .end,
-                        onPressClose: { endState.hide() }
-                    ) {
-                        Button(title: "End", action: { endState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - With Buttons
-
-                section("With Buttons") {
-                    Tooltip(
-                        state: singleBtnState,
-                        title: "Single Button",
-                        description: "Tooltip with one action button.",
-                        buttons: [
-                            TooltipButton(title: "Got it", onPress: { singleBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { singleBtnState.hide() }
-                    ) {
-                        Button(title: "1 Button", action: { singleBtnState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: twoBtnState,
-                        title: "Two Buttons",
-                        description: "Tooltip with primary and secondary actions.",
-                        buttons: [
-                            TooltipButton(title: "Confirm", onPress: { twoBtnState.hide() }),
-                            TooltipButton(title: "Cancel", onPress: { twoBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { twoBtnState.hide() }
-                    ) {
-                        Button(title: "2 Buttons", action: { twoBtnState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - Description Only
-
-                section("Description Only") {
-                    Tooltip(
-                        state: descState,
-                        description: "This tooltip has no title, just a description.",
-                        placement: .top,
-                        onPressClose: { descState.hide() }
-                    ) {
-                        Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
-                    }
-                }
+        BasicColumnBox("Placement", alignment: .leading) {
+            Tooltip(state: topState, title: "Top", description: "Tooltip on top of the anchor.",
+                    placement: .top, onPressClose: { topState.hide() }) {
+                MoMoUIKits.Button(title: "Top", action: { topState.toggle() }, size: .small, isFull: false)
+            }
+            Tooltip(state: bottomState, title: "Bottom", description: "Tooltip below the anchor.",
+                    placement: .bottom, onPressClose: { bottomState.hide() }) {
+                MoMoUIKits.Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("With Buttons", alignment: .leading) {
+            Tooltip(state: btnState, title: "Two Buttons",
+                    description: "Tooltip with primary and secondary actions.",
+                    buttons: [
+                        TooltipButton(title: "Confirm", onPress: { btnState.hide() }),
+                        TooltipButton(title: "Cancel", onPress: { btnState.hide() }),
+                    ],
+                    placement: .bottom, onPressClose: { btnState.hide() }) {
+                MoMoUIKits.Button(title: "2 Buttons", action: { btnState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("Description Only", alignment: .leading) {
+            Tooltip(state: descState, description: "This tooltip has no title, just a description.",
+                    placement: .top, onPressClose: { descState.hide() }) {
+                MoMoUIKits.Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
             }
-            .padding(.vertical, 48)
-            .padding(.horizontal, 16)
         }
     }
+}
 
-    // MARK: - Helpers
+// MARK: - Playground
+
+// String-keyed so the demo doesn't depend on the exact enum type name;
+// the literal cases below are resolved against Tooltip's own parameter types.
+private let tooltipPlacementList: [PlaygroundOption] = [
+    .init("top", "top"), .init("bottom", "bottom"), .init("left", "left"), .init("right", "right"),
+]
+private let tooltipAlignList: [PlaygroundOption] = [
+    .init("start", "start"), .init("center", "center"), .init("end", "end"),
+]
+
+@available(iOS 16.0, *)
+private struct TooltipPlayground: View {
+    @StateObject private var state = TooltipState()
+    @State private var title = "Tooltip"
+    @State private var desc = "This is a tooltip description."
+    @State private var placement: PlaygroundOption? = tooltipPlacementList.first { $0.key == "bottom" }
+    @State private var align: PlaygroundOption? = tooltipAlignList.first { $0.key == "center" }
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 24) {
-            Text(title)
-                .font(.headline)
-            content()
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Tooltip(
+                    state: state,
+                    title: title,
+                    description: desc,
+                    placement: placementCase,
+                    align: alignCase,
+                    onPressClose: { state.hide() }
+                ) {
+                    MoMoUIKits.Button(title: "Show tooltip", action: { state.toggle() }, size: .small, isFull: false)
+                }
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $desc),
+                .radio("Placement", tooltipPlacementList, $placement),
+                .radio("Align", tooltipAlignList, $align),
+            ]
+        )
+    }
+
+    private var placementCase: TooltipPlacement {
+        switch placement?.key {
+        case "top": return .top
+        case "left": return .left
+        case "right": return .right
+        default: return .bottom
         }
     }
-}
 
-#if DEBUG
-struct TooltipDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        TooltipDemo()
+    private var alignCase: TooltipAlign {
+        switch align?.key {
+        case "start": return .start
+        case "end": return .end
+        default: return .center
+        }
     }
 }
-#endif