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

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

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