@momo-kits/native-kits 0.162.30 → 0.162.31

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

@@ -2,125 +2,95 @@
 //  CarouselDemo.swift
 //  Example
 //
+//  Preview + Playground demo (DemoScreen pattern).
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
-struct CarouselDemo: View {
-    // MARK: - Playground state
-    @State private var loop = false
-    @State private var autoplay = false
-    @State private var scrollEnabled = true
-    @State private var inactiveOpacity: Double = 1.0
-    @State private var inactiveScale: Double = 1.0
+private let slideColors: [Color] = [
+    Colors.pink09, Colors.blue08, Colors.green08, Colors.orange08, Colors.mint08,
+]
 
-    private let slideColors: [Color] = [
-        Colors.pink09,
-        Colors.blue08,
-        Colors.green08,
-        Colors.orange08,
-        Colors.mint08,
-    ]
+@ViewBuilder
+private func carouselSlide(_ index: Int) -> some View {
+    ZStack {
+        slideColors[index % slideColors.count]
+        Text("Slide \(index + 1)")
+            .font(.headline)
+            .foregroundColor(Colors.black01)
+    }
+    .frame(maxWidth: .infinity)
+    .frame(height: 160)
+    .cornerRadius(Radius.M)
+}
 
+struct CarouselDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: Spacing.XL) {
-                preview
-                Divider()
-                playground
-            }
-            .padding(Spacing.L)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CarouselPreview() }, playground: { CarouselPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    // MARK: - Preview cases (mirror CarouselUsage.kt)
-    private var preview: some View {
-        VStack(alignment: .leading, spacing: Spacing.XL) {
-            section("Basic (3 slides)") {
-                Carousel(itemCount: 3) { index in slide(index) }
-                    .frame(height: 160)
-            }
-
-            section("Loop enabled") {
-                Carousel(itemCount: 5, loop: true) { index in slide(index) }
-                    .frame(height: 160)
-            }
-
-            section("Autoplay (3s interval)") {
-                Carousel(
-                    itemCount: 5,
-                    loop: true,
-                    autoplay: true,
-                    autoplayInterval: 3.0
-                ) { index in slide(index) }
-                    .frame(height: 160)
-            }
-
-            section("Inactive slide effects (opacity=0.5, scale=0.9)") {
-                Carousel(
-                    itemCount: 5,
-                    loop: true,
-                    inactiveSlideOpacity: 0.5,
-                    inactiveSlideScale: 0.9,
-                    contentPadding: 32
-                ) { index in slide(index) }
-                    .frame(height: 160)
-            }
+// MARK: - Preview
 
-            section("Scroll disabled") {
-                Carousel(itemCount: 3, scrollEnabled: false) { index in slide(index) }
-                    .frame(height: 160)
-            }
+private struct CarouselPreview: View {
+    var body: some View {
+        BasicColumnBox("Basic (3 slides)", alignment: .leading) {
+            Carousel(itemCount: 3) { carouselSlide($0) }.frame(height: 160)
         }
-    }
-
-    // MARK: - Playground
-    private var playground: some View {
-        VStack(alignment: .leading, spacing: Spacing.M) {
-            Text("Playground").font(.headline)
-
-            Toggle("Loop", isOn: $loop)
-            Toggle("Autoplay", isOn: $autoplay)
-            Toggle("Scroll Enabled", isOn: $scrollEnabled)
-
-            VStack(alignment: .leading) {
-                Text("Inactive Opacity: \(String(format: "%.2f", inactiveOpacity))")
-                Slider(value: $inactiveOpacity, in: 0 ... 1)
-            }
-            VStack(alignment: .leading) {
-                Text("Inactive Scale: \(String(format: "%.2f", inactiveScale))")
-                Slider(value: $inactiveScale, in: 0.5 ... 1)
-            }
-
-            Carousel(
-                itemCount: 5,
-                loop: loop,
-                autoplay: autoplay,
-                scrollEnabled: scrollEnabled,
-                inactiveSlideOpacity: inactiveOpacity,
-                inactiveSlideScale: inactiveScale
-            ) { index in slide(index) }
+        BasicColumnBox("Loop enabled", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true) { carouselSlide($0) }.frame(height: 160)
+        }
+        BasicColumnBox("Autoplay (3s)", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true, autoplay: true, autoplayInterval: 3.0) { carouselSlide($0) }
                 .frame(height: 160)
         }
-    }
-
-    // MARK: - Helpers
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: Spacing.S) {
-            Text(title).font(.subheadline).bold()
-            content()
+        BasicColumnBox("Inactive effects", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true, inactiveSlideOpacity: 0.5, inactiveSlideScale: 0.9, contentPadding: 32) {
+                carouselSlide($0)
+            }
+            .frame(height: 160)
+        }
+        BasicColumnBox("Scroll disabled", alignment: .leading) {
+            Carousel(itemCount: 3, scrollEnabled: false) { carouselSlide($0) }.frame(height: 160)
         }
     }
+}
 
-    private func slide(_ index: Int) -> some View {
-        ZStack {
-            slideColors[index % slideColors.count]
-            Text("Slide \(index + 1)")
-                .font(.headline)
-                .foregroundColor(Colors.black01)
-        }
-        .frame(maxWidth: .infinity)
-        .frame(height: 160)
-        .cornerRadius(Radius.M)
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CarouselPlayground: View {
+    @State private var loop = false
+    @State private var autoplay = false
+    @State private var scrollEnabled = true
+    @State private var inactiveOpacity: Double = 1.0
+    @State private var inactiveScale: Double = 1.0
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Carousel(
+                    itemCount: 5,
+                    loop: loop,
+                    autoplay: autoplay,
+                    scrollEnabled: scrollEnabled,
+                    inactiveSlideOpacity: inactiveOpacity,
+                    inactiveSlideScale: inactiveScale
+                ) { carouselSlide($0) }
+                    .frame(height: 160)
+            },
+            params: [
+                .checkbox("Loop", $loop),
+                .checkbox("Autoplay", $autoplay),
+                .checkbox("ScrollEnabled", $scrollEnabled),
+                .slider("InactiveOpacity", $inactiveOpacity, min: 0, max: 1, step: 0.1),
+                .slider("InactiveScale", $inactiveScale, min: 0.5, max: 1, step: 0.1),
+            ]
+        )
     }
 }

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

@@ -1,63 +1,60 @@
 //
-//  CheckBoxDemo.swift
+//  CheckboxDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 2/12/24.
+//  Preview + Playground demo for Checkbox.
 //
-import SwiftUI
+
 import MoMoUIKits
+import SwiftUI
 
 struct CheckboxDemo: View {
-    @State private var checked = false
-    
     var body: some View {
-        VStack(alignment: .leading, spacing: 20) {
-            // Interactive checkbox
-            Checkbox(
-                $checked,
-                onChange: { _ in checked = !checked },
-                title: "Check Box"
-            )
-            
-            // Unchecked checkbox
-            Checkbox(.constant(false), onChange: { _ in }, title: "Check Box")
-            
-            // Indeterminate checkbox
-            Checkbox(
-                .constant(true),
-//                disabled: (({ _ in }) != 0),
-                onChange: { _ in },
-                indeterminate: true,
-                title: "Indeterminate"
-            )
-            
-            // Disabled checkbox
-            Checkbox(
-                .constant(true),
-                disabled: true,
-                onChange: { _ in },
-                title: "Disable"
-            )
-            
-            // Disabled indeterminate checkbox
-            Checkbox(
-                .constant(true),
-                disabled: true,
-                onChange: {_ in },
-                indeterminate: true,
-                title: "Disable checked"
-            )
-            
-            // Disabled unchecked checkbox
-            Checkbox(
-                .constant(false),
-                disabled: true,
-                onChange: { _ in },
-                title: "Disable"
-            )
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CheckboxPreview() }, playground: { CheckboxPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct CheckboxPreview: View {
+    var body: some View {
+        BasicColumnBox("States", alignment: .leading) {
+            Checkbox(.constant(true), onChange: { _ in }, title: "Checked")
+            Checkbox(.constant(false), onChange: { _ in }, title: "Unchecked")
+            Checkbox(.constant(true), onChange: { _ in }, indeterminate: true, title: "Indeterminate")
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Checkbox(.constant(true), disabled: true, onChange: { _ in }, title: "Disabled checked")
+            Checkbox(.constant(true), disabled: true, onChange: { _ in }, indeterminate: true, title: "Disabled indeterminate")
+            Checkbox(.constant(false), disabled: true, onChange: { _ in }, title: "Disabled unchecked")
         }
-        .padding()
     }
 }
 
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CheckboxPlayground: View {
+    @State private var checked = false
+    @State private var disabled = false
+    @State private var indeterminate = false
+    @State private var title = "Check Box"
 
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Checkbox($checked, disabled: disabled, indeterminate: indeterminate, title: title)
+            },
+            params: [
+                .checkbox("Checked", $checked),
+                .checkbox("Disabled", $disabled),
+                .checkbox("Indeterminate", $indeterminate),
+                .string("Title", $title),
+            ]
+        )
+    }
+}

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

@@ -1,20 +1,76 @@
+//
+//  ChipDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Chip.
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
+
+private let chipSizeList: [PlaygroundOption] = [
+    .init("large", Chip.ChipSize.large),
+    .init("small", Chip.ChipSize.small),
+]
 
 struct ChipDemo: View {
-    
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Chip(label: "Large", size: Chip.ChipSize.large)
-            Chip(label: "Small", size: Chip.ChipSize.small)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ChipPreview() }, playground: { ChipPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct ChipPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            Chip(label: "Large", size: .large)
+            Chip(label: "Small", size: .small)
+        }
+        BasicColumnBox("Icons", alignment: .leading) {
             Chip(label: "Apple", iconLeft: "basic_home")
             Chip(label: "Banana", iconRight: "basic_home")
+        }
+        BasicColumnBox("State", alignment: .leading) {
             Chip(label: "Orange", backgroundColor: Colors.black01)
             Chip(label: "Grape", selected: true)
             Chip(label: "Grape", iconRight: "basic_home", selected: true, iconRightTint: Colors.black05)
-            Chip(label: "Tagged", accessibilityLabel: "chip_tagged")
         }
-        .padding()
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ChipPlayground: View {
+    @State private var label = "Chip"
+    @State private var size: PlaygroundOption? = chipSizeList.first { $0.key == "large" }
+    @State private var selected = false
+    @State private var iconLeft: PlaygroundOption?
+    @State private var iconRight: PlaygroundOption?
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Chip(
+                    label: label,
+                    iconLeft: iconLeft?.value as? String,
+                    iconRight: iconRight?.value as? String,
+                    selected: selected,
+                    size: (size?.value as? Chip.ChipSize) ?? .large
+                )
+            },
+            params: [
+                .string("Label", $label),
+                .radio("Size", chipSizeList, $size),
+                .checkbox("Selected", $selected),
+                .option("IconLeft", playgroundIcons, $iconLeft),
+                .option("IconRight", playgroundIcons, $iconRight),
+            ]
+        )
     }
 }

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