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

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

@@ -2,189 +2,113 @@
 //  TabViewDemo.swift
 //  Example
 //
+//  Preview + Playground demo, mirroring Compose's TabViewUsage.kt.
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - TabViewDemo
-
-struct TabViewDemo: View {
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Default (2 tabs)") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Tab 1") { tabContent("Content 1", Colors.pink09) },
-                            TabViewItem(title: "Tab 2") { tabContent("Content 2", Colors.blue08) },
-                        ]
-                    )
-                    .frame(height: 160)
-                }
-
-                section("Default (3 tabs)") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Overview") { tabContent("Overview", Colors.pink09) },
-                            TabViewItem(title: "Activity") { tabContent("Activity", Colors.blue08) },
-                            TabViewItem(title: "Settings") { tabContent("Settings", Colors.green08) },
-                        ]
-                    )
-                    .frame(height: 160)
-                }
-
-                section("With badge & dot") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Inbox", badgeValue: "5") { tabContent("Inbox", Colors.orange08) },
-                            TabViewItem(title: "Alerts", showDot: true, dotSize: .small) { tabContent("Alerts", Colors.red08) },
-                            TabViewItem(title: "Done") { tabContent("Done", Colors.green08) },
-                        ]
-                    )
-                    .frame(height: 160)
-                }
-
-                section("Scrollable (many tabs)") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Monday") { tabContent("Monday", Colors.pink09) },
-                            TabViewItem(title: "Tuesday") { tabContent("Tuesday", Colors.blue08) },
-                            TabViewItem(title: "Wednesday") { tabContent("Wednesday", Colors.green08) },
-                            TabViewItem(title: "Thursday") { tabContent("Thursday", Colors.orange08) },
-                            TabViewItem(title: "Friday") { tabContent("Friday", Colors.mint08) },
-                            TabViewItem(title: "Saturday") { tabContent("Saturday", Colors.red08) },
-                            TabViewItem(title: "Sunday") { tabContent("Sunday", Colors.pink09) },
-                        ],
-                        scrollable: true,
-                        selectedColor: Colors.pink01,
-                        unselectedColor: Colors.blue07
-                    )
-                    .frame(height: 160)
-                }
-
-                section("Card type") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Personal") { tabContent("Personal", Colors.pink09) },
-                            TabViewItem(title: "Business") { tabContent("Business", Colors.blue08) },
-                            TabViewItem(title: "Savings") { tabContent("Savings", Colors.green08) },
-                        ],
-                        type: .card
-                    )
-                    .frame(height: 160)
-                }
-
-                section("Card type with icon") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Home", icon: "basic_home") { tabContent("Home", Colors.pink09) },
-                            TabViewItem(title: "Search", icon: "basic_search") { tabContent("Search", Colors.blue08) },
-                        ],
-                        type: .card
-                    )
-                    .frame(height: 160)
-                }
-
-                section("Column direction") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Home", icon: "basic_home") { tabContent("Home", Colors.pink09) },
-                            TabViewItem(title: "Search", icon: "basic_search") { tabContent("Search", Colors.blue08) },
-                            TabViewItem(title: "Profile", icon: "basic_user") { tabContent("Profile", Colors.green08) },
-                        ],
-                        direction: .column
-                    )
-                    .frame(height: 200)
-                }
-
-                section("Custom renderIcon") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(
-                                title: "Custom",
-                                renderIcon: { active in
-                                    AnyView(
-                                        RoundedRectangle(cornerRadius: 12)
-                                            .fill(active ? Colors.pink09 : Colors.black17)
-                                            .frame(width: 24, height: 24)
-                                    )
-                                }
-                            ) { tabContent("Custom Icon", Colors.pink09) },
-                            TabViewItem(title: "Normal", icon: "basic_search") { tabContent("Normal", Colors.blue08) },
-                        ]
-                    )
-                    .frame(height: 160)
-                }
+@ViewBuilder
+private func tvContent(_ label: String, _ background: Color) -> some View {
+    ZStack {
+        background
+        MomoText(label, typography: .headerSSemibold, color: Colors.text)
+    }
+    .frame(maxWidth: .infinity)
+    .frame(height: 120)
+}
 
-                section("Swipe enabled") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Swipe 1") { tabContent("Swipe left/right", Colors.pink09) },
-                            TabViewItem(title: "Swipe 2") { tabContent("Swipeable!", Colors.blue08) },
-                        ],
-                        userScrollEnabled: true
-                    )
-                    .frame(height: 160)
-                }
+private let tabViewTypeList: [PlaygroundOption] = [
+    .init("default", TabViewType.default),
+    .init("card", TabViewType.card),
+]
 
-                section("Column direction card type") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Personal", icon: "basic_home") { tabContent("Personal", Colors.pink09) },
-                            TabViewItem(title: "Business", icon: "basic_search") { tabContent("Business", Colors.blue08) },
-                        ],
-                        type: .card,
-                        direction: .column
-                    )
-                    .frame(height: 200)
-                }
+private let tabViewDirectionList: [PlaygroundOption] = [
+    .init("row", TabViewDirection.row),
+    .init("column", TabViewDirection.column),
+]
 
-                section("fitContent (no pager)") {
-                    MomoTabView(
-                        tabs: [
-                            TabViewItem(title: "Tab A") { tabContent("Tab A content", Colors.pink09) },
-                            TabViewItem(title: "Tab B") { tabContent("Tab B content", Colors.blue08) },
-                            TabViewItem(title: "Tab C") { tabContent("Tab C content", Colors.green08) },
-                        ],
-                        fitContent: true
-                    )
-                }
-            }
-            .padding(.vertical, 16)
+struct TabViewDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TabViewPreview() }, playground: { TabViewPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    // MARK: - Helpers
+// MARK: - Preview
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+private struct TabViewPreview: View {
+    var body: some View {
+        BasicColumnBox("Default (2 tabs)", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Tab 1") { tvContent("Content 1", Colors.pink09) },
+                TabViewItem(title: "Tab 2") { tvContent("Content 2", Colors.blue08) },
+            ])
+            .frame(height: 160)
         }
-        .padding(.horizontal, 16)
-    }
-
-    @ViewBuilder
-    private func tabContent(_ label: String, _ background: Color) -> some View {
-        ZStack {
-            background
-            MomoText(label, typography: .headerSSemibold, color: Colors.text)
+        BasicColumnBox("With badge & dot", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Inbox", badgeValue: "5") { tvContent("Inbox", Colors.orange08) },
+                TabViewItem(title: "Alerts", showDot: true, dotSize: .small) { tvContent("Alerts", Colors.red08) },
+                TabViewItem(title: "Done") { tvContent("Done", Colors.green08) },
+            ])
+            .frame(height: 160)
+        }
+        BasicColumnBox("Card type", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Personal") { tvContent("Personal", Colors.pink09) },
+                TabViewItem(title: "Business") { tvContent("Business", Colors.blue08) },
+            ], type: .card)
+            .frame(height: 160)
+        }
+        BasicColumnBox("Scrollable (many tabs)", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Monday") { tvContent("Monday", Colors.pink09) },
+                TabViewItem(title: "Tuesday") { tvContent("Tuesday", Colors.blue08) },
+                TabViewItem(title: "Wednesday") { tvContent("Wednesday", Colors.green08) },
+                TabViewItem(title: "Thursday") { tvContent("Thursday", Colors.orange08) },
+                TabViewItem(title: "Friday") { tvContent("Friday", Colors.mint08) },
+            ], scrollable: true)
+            .frame(height: 160)
         }
-        .frame(maxWidth: .infinity)
-        .frame(height: 120)
     }
 }
 
-#if DEBUG
-struct TabViewDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        TabViewDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TabViewPlayground: View {
+    @State private var type: PlaygroundOption? = tabViewTypeList.first { $0.key == "default" }
+    @State private var direction: PlaygroundOption? = tabViewDirectionList.first { $0.key == "row" }
+    @State private var scrollable = false
+    @State private var fitContent = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoTabView(
+                    tabs: [
+                        TabViewItem(title: "Home", icon: "basic_home") { tvContent("Home", Colors.pink09) },
+                        TabViewItem(title: "Search", icon: "basic_search") { tvContent("Search", Colors.blue08) },
+                        TabViewItem(title: "Profile") { tvContent("Profile", Colors.green08) },
+                    ],
+                    type: (type?.value as? TabViewType) ?? .default,
+                    scrollable: scrollable,
+                    fitContent: fitContent,
+                    direction: (direction?.value as? TabViewDirection) ?? .row
+                )
+                .frame(height: fitContent ? nil : 200)
+                .id("\(type?.key ?? "")-\(direction?.key ?? "")-\(scrollable)-\(fitContent)")
+            },
+            params: [
+                .radio("Type", tabViewTypeList, $type),
+                .radio("Direction", tabViewDirectionList, $direction),
+                .checkbox("Scrollable", $scrollable),
+                .checkbox("FitContent", $fitContent),
+            ]
+        )
     }
 }
-#endif

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