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

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

@@ -1,32 +1,64 @@
-import SwiftUI
+//
+//  RadioDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Radio.
+//
+
 import MoMoUIKits
+import SwiftUI
 
 struct RadioDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { RadioPreview() }, playground: { RadioPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct RadioPreview: View {
     @State private var group: AnyHashable = 1
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 24) {
-            // Value
-            VStack(alignment: .leading, spacing: 12) {
-                Text("Value").font(.description1)
-                Radio(value: 1, groupValue: $group)
-                Radio(value: 2, groupValue: $group)
-            }
-
-            // Disabled
-            VStack(alignment: .leading, spacing: 12) {
-                Text("Disabled").font(.description1)
-                Radio(value: 1, groupValue: .constant(1), disabled: true)
-                Radio(value: 2, groupValue: .constant(1), disabled: false)
-            }
-
-            // Label
-            VStack(alignment: .leading, spacing: 12) {
-                Text("Label").font(.description1)
-                Radio(value: 1, groupValue: .constant(1), label: "Label")
-                Radio(value: 2, groupValue: .constant(1), label: "Label")
-            }
+        BasicColumnBox("Value", alignment: .leading) {
+            Radio(value: 1, groupValue: $group)
+            Radio(value: 2, groupValue: $group)
         }
-        .padding()
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Radio(value: 1, groupValue: .constant(1), disabled: true)
+            Radio(value: 2, groupValue: .constant(1), disabled: false)
+        }
+        BasicColumnBox("Label", alignment: .leading) {
+            Radio(value: 1, groupValue: .constant(1), label: "Label")
+            Radio(value: 2, groupValue: .constant(1), label: "Label")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct RadioPlayground: View {
+    @State private var group: AnyHashable = 1
+    @State private var label = "Label"
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    Radio(value: 1, groupValue: $group, disabled: disabled, label: label)
+                    Radio(value: 2, groupValue: $group, disabled: disabled, label: label)
+                }
+            },
+            params: [
+                .string("Label", $label),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
     }
 }

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

@@ -1,56 +1,68 @@
-import SwiftUI
+//
+//  RatingDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Rating.
+//
+
 import MoMoUIKits
+import SwiftUI
 
-struct RatingDemo: View {
-    @State private var interactiveRating: Float = 3
+private let ratingSizeList: [PlaygroundOption] = [
+    .init("small", RatingSize.small),
+    .init("medium", RatingSize.medium),
+    .init("large", RatingSize.large),
+]
 
+struct RatingDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Size") {
-                    Rating(numOfStars: 5, rating: 3, size: .small)
-                    Rating(numOfStars: 5, rating: 3, size: .medium)
-                    Rating(numOfStars: 5, rating: 3, size: .large)
-                }
-
-                section("Half star") {
-                    Rating(numOfStars: 5, rating: 3.5)
-                }
-
-                section("Full") {
-                    Rating(numOfStars: 5, rating: 5)
-                }
-
-                section("Empty") {
-                    Rating(numOfStars: 5, rating: 0)
-                }
-
-                section("Read-only (no callback)") {
-                    Rating(numOfStars: 5, rating: 4)
-                }
-
-                section("Interactive") {
-                    Rating(
-                        numOfStars: 5,
-                        rating: interactiveRating,
-                        onRatingChange: { newRating in
-                            interactiveRating = Float(newRating)
-                        }
-                    )
-                }
-            }
-            .padding()
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { RatingPreview() }, playground: { RatingPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-            content()
+// MARK: - Preview
+
+private struct RatingPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            Rating(numOfStars: 5, rating: 3, size: .small)
+            Rating(numOfStars: 5, rating: 3, size: .medium)
+            Rating(numOfStars: 5, rating: 3, size: .large)
         }
+        BasicColumnBox("Values", alignment: .leading) {
+            Rating(numOfStars: 5, rating: 3.5)
+            Rating(numOfStars: 5, rating: 5)
+            Rating(numOfStars: 5, rating: 0)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct RatingPlayground: View {
+    @State private var stars: Double = 5
+    @State private var rating: Double = 3
+    @State private var size: PlaygroundOption? = ratingSizeList.first { $0.key == "large" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Rating(
+                    numOfStars: Int(stars),
+                    rating: Float(rating),
+                    size: (size?.value as? RatingSize) ?? .large
+                )
+            },
+            params: [
+                .slider("NumOfStars", $stars, min: 1, max: 10, step: 1),
+                .slider("Rating", $rating, min: 0, max: 10, step: 0.5),
+                .radio("Size", ratingSizeList, $size),
+            ]
+        )
     }
 }

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

@@ -1,93 +1,76 @@
-import SwiftUI
+//
+//  SectionDemo.swift
+//  Example
+//
+//  Preview + Playground demo for SectionView / ItemView (12-column grid).
+//
+
 import MoMoUIKits
+import SwiftUI
 
 struct SectionDemo: View {
     var body: some View {
-        ScrollView {
-            // No horizontal padding here — SectionView brings its own 12pt margin.
-            VStack(alignment: .leading, spacing: 24) {
-                block("Full width — span 12") {
-                    SectionView {
-                        SectionTile("12")
-                    }
-                }
-
-                block("Even splits") {
-                    SectionView {
-                        ItemView(widthSpan: 6) { SectionTile("6") }
-                        ItemView(widthSpan: 6) { SectionTile("6") }
-                        ItemView(widthSpan: 4) { SectionTile("4") }
-                        ItemView(widthSpan: 4) { SectionTile("4") }
-                        ItemView(widthSpan: 4) { SectionTile("4") }
-                        ItemView(widthSpan: 3) { SectionTile("3") }
-                        ItemView(widthSpan: 3) { SectionTile("3") }
-                        ItemView(widthSpan: 3) { SectionTile("3") }
-                        ItemView(widthSpan: 3) { SectionTile("3") }
-                    }
-                }
-
-                block("Wrapping — a row that overflows breaks to the next line") {
-                    SectionView {
-                        ItemView(widthSpan: 8) { SectionTile("8") }
-                        ItemView(widthSpan: 5) { SectionTile("5") }
-                        ItemView(widthSpan: 7) { SectionTile("7") }
-                    }
-                }
-
-                block("heightSpan — square tiles") {
-                    SectionView {
-                        ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
-                        ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
-                        ItemView(widthSpan: 6, heightSpan: 3) { SectionTile("6×3") }
-                    }
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SectionPreview() }, playground: { SectionPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                block("useMargin: false — edge to edge") {
-                    SectionView(useMargin: false) {
-                        ItemView(widthSpan: 6) { SectionTile("6") }
-                        ItemView(widthSpan: 6) { SectionTile("6") }
-                    }
-                }
+// MARK: - Preview
 
-                block("backgroundImage") {
-                    SectionView(backgroundImage: "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9") {
-                        ItemView(widthSpan: 6, heightSpan: 4) { SectionTile("6×4") }
-                        ItemView(widthSpan: 6, heightSpan: 4) { SectionTile("6×4") }
-                    }
-                }
-
-                block("Multiple children stack vertically inside one Item") {
-                    SectionView {
-                        ItemView(widthSpan: 6) {
-                            SectionTile("top")
-                            SectionTile("bottom")
-                        }
-                        ItemView(widthSpan: 6) { SectionTile("6") }
-                    }
-                }
+private struct SectionPreview: View {
+    var body: some View {
+        BasicColumnBox("Full width — span 12", alignment: .leading) {
+            SectionView { SectionTile("12") }
+        }
+        BasicColumnBox("Even splits", alignment: .leading) {
+            SectionView {
+                ItemView(widthSpan: 6) { SectionTile("6") }
+                ItemView(widthSpan: 6) { SectionTile("6") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+            }
+        }
+        BasicColumnBox("heightSpan — square tiles", alignment: .leading) {
+            SectionView {
+                ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
+                ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
+                ItemView(widthSpan: 6, heightSpan: 3) { SectionTile("6×3") }
             }
-            .padding(.vertical)
         }
     }
+}
 
-    @ViewBuilder
-    private func block<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.headline)
-                .padding(.horizontal, Spacing.M)
-            content()
-        }
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SectionPlayground: View {
+    @State private var span: Double = 6
+    @State private var useMargin = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                SectionView(useMargin: useMargin) {
+                    ItemView(widthSpan: Int(span)) { SectionTile("\(Int(span))") }
+                    ItemView(widthSpan: 12 - Int(span)) { SectionTile("\(12 - Int(span))") }
+                }
+            },
+            params: [
+                .slider("Left widthSpan", $span, min: 1, max: 11, step: 1),
+                .checkbox("useMargin", $useMargin),
+            ]
+        )
     }
 }
 
 /// Filled placeholder so span widths are visible.
 private struct SectionTile: View {
     let label: String
-
-    init(_ label: String) {
-        self.label = label
-    }
+    init(_ label: String) { self.label = label }
 
     var body: some View {
         Text(label)

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

@@ -2,31 +2,60 @@
 //  SkeletonDemo.swift
 //  Example
 //
+//  Preview + Playground demo (DemoScreen pattern).
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
-public struct SkeletonDemo: View {
-    public init() {}
+struct SkeletonDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SkeletonPreview() }, playground: { SkeletonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-    public var body: some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Spacer().frame(height: 12)
+// MARK: - Preview
 
-            // Square skeleton (Compose: fillMaxWidth().aspectRatio(1f)).
+private struct SkeletonPreview: View {
+    var body: some View {
+        BasicColumnBox("Square (aspect 1:1)", alignment: .leading) {
             Skeleton()
                 .aspectRatio(1, contentMode: .fit)
                 .frame(maxWidth: .infinity)
-
-            // Fixed-height skeleton (Compose: fillMaxWidth().height(32.dp)).
+        }
+        BasicColumnBox("Fixed height (32)", alignment: .leading) {
             Skeleton()
                 .frame(maxWidth: .infinity)
                 .frame(height: 32)
         }
-        .padding()
+        BasicColumnBox("Lines", alignment: .leading) {
+            Skeleton().frame(maxWidth: .infinity).frame(height: 16)
+            Skeleton().frame(maxWidth: .infinity).frame(height: 16)
+            Skeleton().frame(width: 160).frame(height: 16)
+        }
     }
 }
 
-#Preview {
-    SkeletonDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SkeletonPlayground: View {
+    @State private var height: Double = 32
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Skeleton()
+                    .frame(maxWidth: .infinity)
+                    .frame(height: CGFloat(height))
+            },
+            params: [
+                .slider("Height", $height, min: 16, max: 200, step: 4),
+            ]
+        )
+    }
 }

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

@@ -2,149 +2,89 @@
 //  SliderDemo.swift
 //  Example
 //
+//  Preview + Playground demo for MomoSlider.
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - SliderDemo
-
 struct SliderDemo: View {
-    // Playground state
-    @State private var pgLow: CGFloat = 20
-    @State private var pgHigh: CGFloat = 80
-    @State private var pgDisableRange = false
-    @State private var pgFloatingLabel = false
-    @State private var pgDisabled = false
-    @State private var pgMinRange = false
-    @State private var pgStepBig = false
-
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                preview
-                Divider()
-                playground
-            }
-            .padding(.vertical, 16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SliderPreview() }, playground: { SliderPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    // MARK: - Preview
-
-    private var preview: some View {
-        VStack(alignment: .leading, spacing: 24) {
-            section("Range Slider (default)") {
-                MomoSlider(min: 0, max: 100, step: 1)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Range Slider with initial values") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 20, high: 80)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Single-thumb Slider (disableRange)") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 40, disableRange: true)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Slider with step = 10") {
-                MomoSlider(min: 0, max: 100, step: 10, low: 20, high: 70)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Slider with minRange = 20") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 10, high: 90, minRange: 20)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Floating Label") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, floatingLabel: true)
-                    .padding(.horizontal, 8)
-            }
-
-            section("Disabled") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, disabled: true)
-                    .padding(.horizontal, 8)
-            }
+// MARK: - Preview
 
-            section("Disabled single-thumb") {
-                MomoSlider(min: 0, max: 100, step: 1, low: 50, disableRange: true, disabled: true)
-                    .padding(.horizontal, 8)
-            }
+private struct SliderPreview: View {
+    var body: some View {
+        BasicColumnBox("Range Slider (default)", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1)
         }
-    }
-
-    // MARK: - Playground
-
-    private var playground: some View {
-        section("Playground") {
-            toggle("Disable Range (single thumb)", $pgDisableRange)
-            toggle("Floating Label", $pgFloatingLabel)
-            toggle("Disabled", $pgDisabled)
-            toggle("Min Range = 20", $pgMinRange)
-            toggle("Step = 10 (instead of 1)", $pgStepBig)
-
-            MomoSlider(
-                min: 0,
-                max: 100,
-                step: pgStepBig ? 10 : 1,
-                low: pgLow,
-                high: pgHigh,
-                minRange: pgMinRange ? 20 : 0,
-                disableRange: pgDisableRange,
-                floatingLabel: pgFloatingLabel,
-                disabled: pgDisabled,
-                onValueChanged: { low, high, _ in
-                    pgLow = low
-                    pgHigh = high
-                }
-            )
-            .padding(.horizontal, 8)
-            // Re-create slider when structural params change so initial values apply.
-            .id("\(pgDisableRange)-\(pgMinRange)-\(pgStepBig)")
-
-            if pgDisableRange {
-                Text("Value: \(Int(pgLow))")
-                    .font(.subheadline)
-                    .padding(.top, 8)
-            } else {
-                Text("Low: \(Int(pgLow))  ·  High: \(Int(pgHigh))")
-                    .font(.subheadline)
-                    .padding(.top, 8)
-            }
+        BasicColumnBox("With initial values", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 20, high: 80)
         }
-    }
-
-    // MARK: - Helpers
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+        BasicColumnBox("Single-thumb (disableRange)", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 40, disableRange: true)
         }
-        .padding(.horizontal, 16)
-    }
-
-    @ViewBuilder
-    private func toggle(_ title: String, _ binding: Binding<Bool>) -> some View {
-        Toggle(isOn: binding) {
-            Text(title)
-                .font(.subheadline)
+        BasicColumnBox("Step = 10", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 10, low: 20, high: 70)
+        }
+        BasicColumnBox("Min range = 20", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 10, high: 90, minRange: 20)
+        }
+        BasicColumnBox("Floating Label", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, floatingLabel: true)
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, disabled: true)
         }
     }
 }
 
-#if DEBUG
-struct SliderDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        SliderDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SliderPlayground: View {
+    @State private var low: Double = 20
+    @State private var high: Double = 80
+    @State private var minRange: Double = 0
+    @State private var step: Double = 1
+    @State private var disableRange = false
+    @State private var floatingLabel = false
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoSlider(
+                    min: 0,
+                    max: 100,
+                    step: CGFloat(step),
+                    low: CGFloat(low),
+                    high: CGFloat(high),
+                    minRange: CGFloat(minRange),
+                    disableRange: disableRange,
+                    floatingLabel: floatingLabel,
+                    disabled: disabled,
+                    onValueChanged: { l, h, _ in low = Double(l); high = Double(h) }
+                )
+                // Re-seed when structural params change so initial values apply.
+                .id("\(disableRange)-\(minRange)-\(step)")
+            },
+            params: [
+                .checkbox("DisableRange", $disableRange),
+                .checkbox("FloatingLabel", $floatingLabel),
+                .checkbox("Disabled", $disabled),
+                .slider("Low", $low, min: 0, max: 100, step: 1),
+                .slider("High", $high, min: 0, max: 100, step: 1),
+                .slider("MinRange", $minRange, min: 0, max: 40, step: 5),
+                .slider("Step", $step, min: 1, max: 10, step: 1),
+            ]
+        )
     }
 }
-#endif