@momo-kits/native-kits 0.163.2-beta.2 → 0.164.1-beta.1-debug

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

@@ -1,93 +1,102 @@
-import SwiftUI
+//
+//  CollapseDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
 import MoMoUIKits
+import SwiftUI
+
+private let collapseTitleSizeList: [PlaygroundOption] = [
+    .init("small", CollapseTitleSize.small),
+    .init("medium", CollapseTitleSize.medium),
+    .init("large", CollapseTitleSize.large),
+]
 
 struct CollapseDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Default") {
-                    Collapse(title: "Default collapse") {
-                        MomoText("This is the expanded content.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
-
-                section("With Border") {
-                    Collapse(title: "With border", showBorder: true) {
-                        MomoText("Content inside a bordered collapse.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
-
-                section("Expanded by Default") {
-                    Collapse(title: "Pre-expanded", expandDefault: true) {
-                        MomoText("This collapse starts expanded.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
-
-                section("With Description") {
-                    Collapse(
-                        title: "Collapse with description",
-                        description: "A brief description below the title."
-                    ) {
-                        MomoText("Detailed content.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
-
-                section("Title Sizes") {
-                    Collapse(title: "Small title", titleSize: .small) {
-                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
-                    }
-                    Collapse(title: "Medium title", titleSize: .medium) {
-                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
-                    }
-                    Collapse(title: "Large title", titleSize: .large) {
-                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
-                    }
-                }
-
-                section("With SubTitle") {
-                    Collapse(title: "Collapse with subTitle", subTitle: "Sub") {
-                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
-                    }
-                }
-
-                section("With Tag") {
-                    Collapse(title: "Collapse with tag", tagLabel: "New", tagColor: .red) {
-                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
-                    }
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CollapsePreview() }, playground: { CollapsePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("Background Collapse Button") {
-                    Collapse(title: "Tonal chevron button", useBackgroundCollapseButton: true) {
-                        MomoText("Chevron has tonal background.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
+// MARK: - Preview
 
-                section("With Image") {
-                    Collapse(
-                        title: "Collapse with image",
-                        image: "https://static.momocdn.net/img/momo_icon.png",
-                        imageSize: 40,
-                        showBorder: true
-                    ) {
-                        MomoText("Content with leading image.", typography: .bodyDefaultRegular)
-                            .padding(Spacing.M)
-                    }
-                }
+private struct CollapsePreview: View {
+    var body: some View {
+        BasicColumnBox("Default", alignment: .leading) {
+            Collapse(title: "Default collapse") {
+                MomoText("This is the expanded content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Border", alignment: .leading) {
+            Collapse(title: "With border", showBorder: true) {
+                MomoText("Content inside a bordered collapse.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("Expanded by Default", alignment: .leading) {
+            Collapse(title: "Pre-expanded", expandDefault: true) {
+                MomoText("This collapse starts expanded.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Description", alignment: .leading) {
+            Collapse(title: "Collapse with description", description: "A brief description below the title.") {
+                MomoText("Detailed content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("Title Sizes", alignment: .leading) {
+            Collapse(title: "Small title", titleSize: .small) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+            Collapse(title: "Large title", titleSize: .large) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Tag", alignment: .leading) {
+            Collapse(title: "Collapse with tag", tagLabel: "New", tagColor: .red) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
             }
-            .padding()
         }
     }
+}
 
-    @ViewBuilder
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title).font(.headline)
-            content()
-        }
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CollapsePlayground: View {
+    @State private var title = "Collapse title"
+    @State private var description = ""
+    @State private var showBorder = false
+    @State private var expandDefault = false
+    @State private var titleSize: PlaygroundOption? = collapseTitleSizeList.first { $0.key == "medium" }
+    @State private var useBackgroundCollapseButton = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Collapse(
+                    title: title,
+                    description: description.isEmpty ? nil : description,
+                    showBorder: showBorder,
+                    expandDefault: expandDefault,
+                    titleSize: (titleSize?.value as? CollapseTitleSize) ?? .medium,
+                    useBackgroundCollapseButton: useBackgroundCollapseButton
+                ) {
+                    MomoText("Expanded content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+                }
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $description),
+                .checkbox("ShowBorder", $showBorder),
+                .checkbox("ExpandDefault", $expandDefault),
+                .radio("TitleSize", collapseTitleSizeList, $titleSize),
+                .checkbox("BackgroundCollapseButton", $useBackgroundCollapseButton),
+            ]
+        )
     }
 }

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

@@ -2,123 +2,99 @@
 //  DateTimePickerDemo.swift
 //  Example
 //
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - DateTimePickerDemo
-
 struct DateTimePickerDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { DateTimePickerPreview() }, playground: { DateTimePickerPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct DateTimePickerPreview: View {
     @State private var selected1: Date?
     @State private var selected2: Date?
     @State private var selected3: Date?
     @State private var selected4: Date?
-    @State private var selected5: Date?
-    @State private var selected6: Date?
-    @State private var selected7: Date? = DateTimePickerUtils.getCurrentDateTime()
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Format: DD-MM-YYYY") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY",
-                        onChange: { selected1 = $0 }
-                    )
-                    selectedLabel(selected1, format: "dd-MM-yyyy")
-                }
-
-                section("Format: DD-MM-YYYY HH:mm") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY HH:mm",
-                        onChange: { selected2 = $0 }
-                    )
-                    selectedLabel(selected2, format: "yyyy-MM-dd HH:mm")
-                }
-
-                section("Format: HH:mm") {
-                    DateTimePicker(
-                        format: "HH:mm",
-                        onChange: { selected3 = $0 }
-                    )
-                    selectedLabel(selected3, format: "HH:mm")
-                }
-
-                section("With minute interval (5 minutes)") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY HH:mm",
-                        minuteInterval: 5,
-                        onChange: { selected4 = $0 }
-                    )
-                    selectedLabel(selected4, format: "yyyy-MM-dd HH:mm")
-                }
-
-                section("With min/max date") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY",
-                        selectedValue: nil,
-                        minDate: DateTimePickerUtils.createRelativeDate(years: -1),
-                        maxDate: DateTimePickerUtils.createRelativeDate(years: 1),
-                        onChange: { selected5 = $0 }
-                    )
-                    selectedLabel(selected5, format: "dd-MM-yyyy")
-                }
-
-                section("With labels") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY HH:mm",
-                        arrayLabelTime: ["Day", "Month", "Year", "Hour", "Min"],
-                        onChange: { selected6 = $0 }
-                    )
-                    selectedLabel(selected6, format: "yyyy-MM-dd HH:mm")
-                }
-
-                section("With selected value") {
-                    DateTimePicker(
-                        format: "DD-MM-YYYY HH:mm",
-                        selectedValue: selected7,
-                        onChange: { selected7 = $0 }
-                    )
-                    selectedLabel(selected7, format: "yyyy-MM-dd HH:mm")
-                }
-            }
-            .padding(.vertical, 16)
+        BasicColumnBox("Format: DD-MM-YYYY", alignment: .leading) {
+            DateTimePicker(format: "DD-MM-YYYY", onChange: { selected1 = $0 })
+            selectedLabel(selected1, format: "dd-MM-yyyy")
         }
-    }
-
-    // MARK: - Helpers
-
-    @ViewBuilder
-    private func selectedLabel(_ date: Date?, format: String) -> some View {
-        if let date = date {
-            MomoText(
-                "Selected: \(DateTimePickerUtils.formatDate(date, format: format))",
-                typography: .descriptionDefaultRegular,
-                color: Colors.textSecondary
+        BasicColumnBox("Format: DD-MM-YYYY HH:mm", alignment: .leading) {
+            DateTimePicker(format: "DD-MM-YYYY HH:mm", onChange: { selected2 = $0 })
+            selectedLabel(selected2, format: "yyyy-MM-dd HH:mm")
+        }
+        BasicColumnBox("Format: HH:mm", alignment: .leading) {
+            DateTimePicker(format: "HH:mm", onChange: { selected3 = $0 })
+            selectedLabel(selected3, format: "HH:mm")
+        }
+        BasicColumnBox("With min/max date (±1 year)", alignment: .leading) {
+            DateTimePicker(
+                format: "DD-MM-YYYY",
+                selectedValue: nil,
+                minDate: DateTimePickerUtils.createRelativeDate(years: -1),
+                maxDate: DateTimePickerUtils.createRelativeDate(years: 1),
+                onChange: { selected4 = $0 }
             )
-            .padding(.top, 8)
+            selectedLabel(selected4, format: "dd-MM-yyyy")
         }
     }
 
     @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+    private func selectedLabel(_ date: Date?, format: String) -> some View {
+        if let date = date {
+            MomoText("Selected: \(DateTimePickerUtils.formatDate(date, format: format))",
+                     typography: .descriptionDefaultRegular, color: Colors.textSecondary)
+                .padding(.top, Spacing.S)
         }
-        .padding(.horizontal, 16)
     }
 }
 
-#if DEBUG
-struct DateTimePickerDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        DateTimePickerDemo()
+// MARK: - Playground
+
+private let dateFormatList: [PlaygroundOption] = [
+    .init("DD-MM-YYYY", "DD-MM-YYYY"),
+    .init("DD-MM-YYYY HH:mm", "DD-MM-YYYY HH:mm"),
+    .init("HH:mm", "HH:mm"),
+]
+
+@available(iOS 16.0, *)
+private struct DateTimePickerPlayground: View {
+    @State private var format: PlaygroundOption? = dateFormatList.first { $0.key == "DD-MM-YYYY HH:mm" }
+    @State private var minuteInterval = 1.0
+    @State private var selected: Date?
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    DateTimePicker(
+                        format: (format?.value as? String) ?? "DD-MM-YYYY HH:mm",
+                        minuteInterval: Int(minuteInterval),
+                        onChange: { selected = $0 }
+                    )
+                    .id("\(format?.key ?? "")-\(Int(minuteInterval))")
+                    if let selected {
+                        MomoText("Selected: \(DateTimePickerUtils.formatDate(selected, format: "yyyy-MM-dd HH:mm"))",
+                                 typography: .descriptionDefaultRegular, color: Colors.textSecondary)
+                    }
+                }
+            },
+            params: [
+                .radio("Format", dateFormatList, $format),
+                .slider("MinuteInterval", $minuteInterval, min: 1, max: 30, step: 1),
+            ]
+        )
     }
 }
-#endif