@momo-kits/native-kits 0.162.30 → 0.162.31

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

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

@@ -0,0 +1,420 @@
+//
+//  DemoScreen.swift
+//  Example
+//
+//  SwiftUI port of Compose's `sample/shared/.../screens/DemoScreen.kt`: the demo
+//  shell every component uses. `DemoScreen(preview:playground:)` renders a two-tab
+//  `BottomTab` — a static "Preview" showcase and an interactive, data-driven
+//  "Playground" props editor (BasicColumnBox / PlaygroundParams / PlaygroundView /
+//  PlaygroundTab). Must be pushed inside the `NavigationContainer` (BottomTab reads
+//  the Navigator) with `headerType: .none, scrollable: false`.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - DemoScreen shell
+
+@available(iOS 16.0, *)
+struct DemoScreen<Preview: View, Playground: View>: View {
+    @ViewBuilder let preview: () -> Preview
+    @ViewBuilder let playground: () -> Playground
+
+    var body: some View {
+        BottomTab(items: [
+            BottomTabItem(
+                name: "Preview",
+                label: "Preview",
+                icon: "security_eye_open",
+                options: NavigationOptions(headerTitle: .default("Preview"), scrollable: true),
+                // StackScreen provides the scroll when scrollable == true.
+                screen: {
+                    VStack(alignment: .leading, spacing: 0) { preview() }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+            ),
+            BottomTabItem(
+                name: "Playground",
+                label: "Playground",
+                icon: "24_basic_chart",
+                // Playground owns its own scroll (Props list), so disable the outer one.
+                options: NavigationOptions(headerTitle: .default("Playground"), scrollable: false),
+                screen: { playground() }
+            ),
+        ])
+    }
+}
+
+// MARK: - BasicColumnBox (titled surface card)
+
+struct BasicColumnBox<Content: View>: View {
+    let title: String
+    let alignment: HorizontalAlignment
+    let background: Color?
+    @ViewBuilder let content: () -> Content
+
+    init(
+        _ title: String = "",
+        alignment: HorizontalAlignment = .center,
+        background: Color? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.title = title
+        self.alignment = alignment
+        self.background = background
+        self.content = content
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.S) {
+            if !title.isEmpty {
+                MomoText(title, typography: .headerMBold)
+                    .padding(.top, Spacing.S)
+            }
+            VStack(alignment: alignment, spacing: Spacing.S) {
+                content()
+            }
+            .frame(maxWidth: .infinity, alignment: alignmentFrame)
+            .padding(Spacing.M)
+            .background(
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .fill(background ?? defaultTheme.colors.background.surface)
+            )
+        }
+        .padding(Spacing.M)
+    }
+
+    private var alignmentFrame: Alignment {
+        switch alignment {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+}
+
+// MARK: - Playground model (mirrors PlaygroundParams / PlaygroundDataType)
+
+enum PlaygroundDataType {
+    case string, number, option, color, radio, checkbox, slider
+}
+
+/// One selectable entry for OPTION / COLOR / RADIO params. Replaces Compose's
+/// `Map<String, Any>` + `Map.Entry`. Equality is by `key`.
+struct PlaygroundOption: Identifiable, Hashable {
+    var id: String { key }
+    let key: String
+    let value: AnyHashable
+
+    init(_ key: String, _ value: AnyHashable) {
+        self.key = key
+        self.value = value
+    }
+
+    static func == (lhs: PlaygroundOption, rhs: PlaygroundOption) -> Bool { lhs.key == rhs.key }
+    func hash(into hasher: inout Hasher) { hasher.combine(key) }
+}
+
+/// A single editable prop row. Build with the per-type factory methods so the
+/// call site stays type-safe (`.radio("Type", buttonTypeList, $type)`).
+struct PlaygroundParams: Identifiable {
+    // Identity is the title, never a fresh UUID: the array is rebuilt on every body
+    // pass, so a per-instance id would re-key the ForEach on each keystroke — tearing
+    // down the row (an editing TextField loses first responder) and wiping its @State.
+    var id: String { title }
+    let title: String
+    let type: PlaygroundDataType
+    let list: [PlaygroundOption]
+    let enable: Binding<Bool>
+    let required: Bool
+    let sliderMin: Double
+    let sliderMax: Double
+    let sliderStep: Double
+
+    // Only the binding matching `type` is non-nil.
+    let text: Binding<String>?
+    let selection: Binding<PlaygroundOption?>?
+    let flag: Binding<Bool>?
+    let number: Binding<Double>?
+
+    private init(
+        title: String,
+        type: PlaygroundDataType,
+        list: [PlaygroundOption] = [],
+        enable: Binding<Bool> = .constant(true),
+        required: Bool = false,
+        sliderMin: Double = 0,
+        sliderMax: Double = 100,
+        sliderStep: Double = 1,
+        text: Binding<String>? = nil,
+        selection: Binding<PlaygroundOption?>? = nil,
+        flag: Binding<Bool>? = nil,
+        number: Binding<Double>? = nil
+    ) {
+        self.title = title
+        self.type = type
+        self.list = list
+        self.enable = enable
+        self.required = required
+        self.sliderMin = sliderMin
+        self.sliderMax = sliderMax
+        self.sliderStep = sliderStep
+        self.text = text
+        self.selection = selection
+        self.flag = flag
+        self.number = number
+    }
+
+    static func string(_ title: String, _ text: Binding<String>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .string, enable: enable, required: required, text: text)
+    }
+
+    static func number(_ title: String, _ text: Binding<String>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .number, enable: enable, required: required, text: text)
+    }
+
+    static func option(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .option, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func color(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .color, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func radio(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .radio, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func checkbox(_ title: String, _ flag: Binding<Bool>, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .checkbox, enable: enable, flag: flag)
+    }
+
+    static func slider(_ title: String, _ number: Binding<Double>, min: Double = 0, max: Double = 100, step: Double = 1, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .slider, enable: enable, sliderMin: min, sliderMax: max, sliderStep: step, number: number)
+    }
+}
+
+// MARK: - PlaygroundTab (live component + scrollable props list)
+
+@available(iOS 16.0, *)
+struct PlaygroundTab<Component: View>: View {
+    @ViewBuilder let component: () -> Component
+    let params: [PlaygroundParams]
+    var isHideComponent: Bool = false
+
+    var body: some View {
+        VStack(spacing: 0) {
+            if !isHideComponent {
+                BasicColumnBox("Component", alignment: .leading) { component() }
+            }
+            ScrollView {
+                BasicColumnBox("Props", alignment: .leading) {
+                    ForEach(params) { param in
+                        MomoText(param.title, typography: .headerDefaultBold)
+                            .opacity(param.enable.wrappedValue ? 1 : 0.4)
+                        PlaygroundView(param: param)
+                        Spacer().frame(height: Spacing.L)
+                    }
+                }
+            }
+        }
+    }
+}
+
+// MARK: - PlaygroundView (per-type editor, mirrors PlayGroundView.kt)
+
+@available(iOS 16.0, *)
+struct PlaygroundView: View {
+    let param: PlaygroundParams
+    @EnvironmentObject private var navigator: Navigator
+    @State private var isUndefined = false
+    @State private var initialSelection: PlaygroundOption?
+    @State private var didCapture = false
+
+    var body: some View {
+        editor
+            .opacity(param.enable.wrappedValue ? 1 : 0.4)
+            .disabled(!param.enable.wrappedValue)
+            .allowsHitTesting(param.enable.wrappedValue)
+            .onAppear {
+                if !didCapture {
+                    initialSelection = param.selection?.wrappedValue
+                    didCapture = true
+                }
+            }
+    }
+
+    @ViewBuilder
+    private var editor: some View {
+        switch param.type {
+        case .string, .number: stringEditor
+        case .option, .color: optionEditor
+        case .radio: radioEditor
+        case .checkbox: checkboxEditor
+        case .slider: sliderEditor
+        }
+    }
+
+    // STRING / NUMBER
+    @ViewBuilder
+    private var stringEditor: some View {
+        if let text = param.text {
+            Input(
+                text: text,
+                keyboardType: param.type == .number ? .numberPad : .default,
+                onChangeText: { _ in isUndefined = false }
+            )
+            if !param.required {
+                undefinedCheckbox { text.wrappedValue = "" }
+            }
+        }
+    }
+
+    // OPTION / COLOR
+    @ViewBuilder
+    private var optionEditor: some View {
+        if let selection = param.selection {
+            HStack {
+                Spacer().frame(width: 30)
+                MomoText(selection.wrappedValue?.key ?? "", typography: .bodyDefaultRegular)
+                Spacer()
+                Icon(source: "arrow_chevron_down", size: 20)
+                    .padding(.trailing, Spacing.XS)
+            }
+            .frame(height: 40)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.XS)
+                    .stroke(defaultTheme.colors.border.default, lineWidth: 1)
+            )
+            .contentShape(Rectangle())
+            .onTapGesture { openPicker(selection: selection) }
+
+            if !param.required {
+                // An OPTION/COLOR prop is genuinely nullable, so "undefined" clears it
+                // outright rather than restoring the seeded default.
+                undefinedCheckbox { selection.wrappedValue = nil }
+            }
+        }
+    }
+
+    // RADIO
+    @ViewBuilder
+    private var radioEditor: some View {
+        if let selection = param.selection {
+            ForEach(param.list) { option in
+                Radio(
+                    value: option.key,
+                    groupValue: Binding(
+                        get: { AnyHashable(selection.wrappedValue?.key ?? "") },
+                        set: { _ in }
+                    ),
+                    onChange: { isUndefined = false; selection.wrappedValue = option },
+                    label: option.key
+                )
+            }
+            if !param.required {
+                undefinedCheckbox { selection.wrappedValue = initialSelection }
+            }
+        }
+    }
+
+    // CHECKBOX
+    @ViewBuilder
+    private var checkboxEditor: some View {
+        if let flag = param.flag {
+            Checkbox(flag, title: flag.wrappedValue.description)
+        }
+    }
+
+    // SLIDER
+    @ViewBuilder
+    private var sliderEditor: some View {
+        if let number = param.number {
+            MomoText(formatSlider(number.wrappedValue), typography: .headerDefaultBold)
+            MomoSlider(
+                min: param.sliderMin,
+                max: param.sliderMax,
+                step: param.sliderStep,
+                low: number.wrappedValue,
+                disableRange: true,
+                onValueChanged: { low, _, _ in number.wrappedValue = low }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+
+    // "is undefined" toggle for optional params. RADIO restores the value captured on
+    // first render (Compose's `remember { data.value }`) since its prop is never null.
+    @ViewBuilder
+    private func undefinedCheckbox(_ onUndefined: @escaping () -> Void) -> some View {
+        Checkbox($isUndefined, onChange: { if $0 { onUndefined() } }, title: "is undefined")
+    }
+
+    private func openPicker(selection: Binding<PlaygroundOption?>) {
+        let isColor = param.type == .color
+        navigator.showBottomSheet({
+            PlaygroundOptionPicker(list: param.list, isColor: isColor) { picked in
+                isUndefined = false
+                selection.wrappedValue = picked
+                navigator.hideOverplay()
+            }
+        }, header: .title("Choose option"))
+    }
+
+    private func formatSlider(_ v: Double) -> String {
+        v == v.rounded() ? String(Int(v)) : String(format: "%.1f", v)
+    }
+}
+
+// MARK: - Option picker (searchable bottom-sheet list)
+
+@available(iOS 16.0, *)
+private struct PlaygroundOptionPicker: View {
+    let list: [PlaygroundOption]
+    let isColor: Bool
+    let onSelect: (PlaygroundOption) -> Void
+
+    @State private var query = ""
+
+    private var filtered: [PlaygroundOption] {
+        query.isEmpty ? list : list.filter { $0.key.localizedCaseInsensitiveContains(query) }
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            InputSearch(props: InputSearchProps(
+                text: $query,
+                placeholder: "Search input",
+                onChangeText: { query = $0.replacingOccurrences(of: "\n", with: " ") }
+            ))
+            .padding(.horizontal, Spacing.L)
+
+            ScrollView {
+                LazyVStack(alignment: .leading, spacing: 0) {
+                    ForEach(filtered) { item in
+                        HStack(spacing: Spacing.S) {
+                            if isColor, let color = item.value.base as? Color {
+                                RoundedRectangle(cornerRadius: Radius.S)
+                                    .fill(color)
+                                    .frame(width: 36, height: 36)
+                                    .overlay(
+                                        RoundedRectangle(cornerRadius: Radius.S)
+                                            .stroke(defaultTheme.colors.border.default, lineWidth: 1)
+                                    )
+                            } else if let iconName = item.value.base as? String {
+                                Icon(source: iconName, size: 24)
+                            }
+                            MomoText(item.key, typography: .bodyDefaultRegular)
+                        }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.vertical, Spacing.XS)
+                        .contentShape(Rectangle())
+                        .onTapGesture { onSelect(item) }
+                    }
+                }
+                .padding(Spacing.L)
+            }
+        }
+        .frame(height: 600)
+    }
+}

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

@@ -1,14 +1,56 @@
-import SwiftUI
+//
+//  DividerDemo.swift
+//  Example
+//
+//  Preview + Playground demo for MomoDivider.
+//
+
 import MoMoUIKits
+import SwiftUI
 
 struct DividerDemo: View {
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { DividerPreview() }, playground: { DividerPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct DividerPreview: View {
+    var body: some View {
+        BasicColumnBox("Between items", alignment: .leading) {
             ForEach(0..<5, id: \.self) { index in
-                Text("Item\(index)")
+                MomoText("Item \(index)", typography: .bodyDefaultRegular)
                 MomoDivider()
             }
         }
-        .padding()
+    }
+}
+
+// MARK: - Playground
+
+// MomoDivider takes no props; the playground varies how many are rendered.
+@available(iOS 16.0, *)
+private struct DividerPlayground: View {
+    @State private var count: Double = 3
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    ForEach(0..<Int(count), id: \.self) { index in
+                        MomoText("Item \(index)", typography: .bodyDefaultRegular)
+                        MomoDivider()
+                    }
+                }
+            },
+            params: [
+                .slider("Count", $count, min: 1, max: 6, step: 1),
+            ]
+        )
     }
 }