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

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

@@ -1,100 +1,108 @@
 //
-//  Foundation.swift
+//  ButtonDemo.swift
 //  Example
 //
-//  Created by Wem on 13/12/2022.
+//  Preview + Playground demo, mirroring Compose's ButtonUsage.kt.
 //
 
-import Foundation
-import Lottie
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - ButtonDemo
-
 struct ButtonDemo: View {
-    // MARK: Internal
-
     var body: some View {
-        ScrollView {
-            VStack {
-                Toggle("Disabled", isOn: $disabled)
-
-                Group {
-                    Button(title: "Button", action: onPress, type: disabled ? .disabled : .primary, size: .large,
-                           iconRight: AnyView(Image(systemName: "checkmark.circle")))
-                    Button(title: "Button", action: onPress, size: .small)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .danger,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")))
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium)
-                    Button(title: "Button", action: onPress, type: .danger, size: .small)
-                }
-                
-                Group {
-                    Button(title: "Button", action: onPress, type: .danger, iconLeft: AnyView(Image(systemName: "checkmark.circle")), isFull: false)
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium, isFull: false)
-                    Button(title: "Button", action: onPress, type: .danger, size: .small, isFull: false)
-                }
-
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .tonal, size: .large)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .medium)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .small)
-                }
-
-                Group {
-                    Button(title: "Tinted icon", action: onPress, type: .primary,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: true)
-                    Button(title: "Original icon", action: onPress, type: .primary,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: false)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .secondary, size: .large)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .medium)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .small)
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ButtonPreview() }, playground: { ButtonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                Group {
-                    Button(title: "Button", action: onPress, type: .text, size: .large)
-                    Button(title: "Button", action: onPress, type: .text, size: .medium)
-                    Button(title: "Button", action: onPress, type: .text, size: .small)
-                }
+// MARK: - Preview
 
-                Group {
-                    Button(title: "Button", action: onPress, type: .outline, size: .large)
-                    Button(title: "Button", action: onPress, type: .outline, size: .medium)
-                    Button(title: "Button", action: onPress, type: .outline, size: .small)
-                }
+private struct ButtonPreview: View {
+    private let url = "https://static-00.iconduck.com/assets.00/external-link-icon-512x512-h2zzryfc.png"
 
-                Group {
-                    Button(title: "Button", action: onPress, type: .disabled, size: .large)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .medium)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .small)
-                }
-                Group {
-                    Button(title: "Button", action: onPress, type: .primary, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .medium, iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .outline, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .text, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .medium, loading: true)
-                }
-            }.padding(16)
-        }.padding(.top)
+    var body: some View {
+        BasicColumnBox("Title") {
+            MoMoUIKits.Button(title: "Open", action: {})
+        }
+
+        BasicColumnBox("Type") {
+            MoMoUIKits.Button(title: "PRIMARY", action: {}, type: .primary)
+            MoMoUIKits.Button(title: "DANGER", action: {}, type: .danger)
+            MoMoUIKits.Button(title: "SECONDARY", action: {}, type: .secondary)
+            MoMoUIKits.Button(title: "TONAL", action: {}, type: .tonal)
+            MoMoUIKits.Button(title: "OUTLINE", action: {}, type: .outline)
+            MoMoUIKits.Button(title: "TEXT", action: {}, type: .text)
+            MoMoUIKits.Button(title: "DISABLED", action: {}, type: .disabled)
+        }
+
+        BasicColumnBox("Size") {
+            MoMoUIKits.Button(title: "LARGE", action: {}, size: .large)
+            MoMoUIKits.Button(title: "MEDIUM", action: {}, size: .medium)
+            MoMoUIKits.Button(title: "SMALL", action: {}, size: .small)
+        }
+
+        BasicColumnBox("Loading") {
+            MoMoUIKits.Button(title: "PRIMARY", action: {}, type: .primary, loading: true)
+            MoMoUIKits.Button(title: "DANGER", action: {}, type: .danger, loading: true)
+            MoMoUIKits.Button(title: "SECONDARY", action: {}, type: .secondary, loading: true)
+            MoMoUIKits.Button(title: "TONAL", action: {}, type: .tonal, loading: true)
+            MoMoUIKits.Button(title: "OUTLINE", action: {}, type: .outline, loading: true)
+            MoMoUIKits.Button(title: "TEXT", action: {}, type: .text, loading: true)
+            MoMoUIKits.Button(title: "DISABLED", action: {}, type: .disabled, loading: true)
+        }
+
+        BasicColumnBox("Icon Right") {
+            MoMoUIKits.Button(title: "Icon", action: {}, iconRight: url)
+        }
+
+        BasicColumnBox("Icon Left") {
+            MoMoUIKits.Button(title: "Icon", action: {}, iconLeft: url)
+        }
     }
+}
 
-    func onPress() {
-        print("Button")
-    }
+// MARK: - Playground
 
-    // MARK: Private
+@available(iOS 16.0, *)
+private struct ButtonPlayground: View {
+    @State private var title = "Button"
+    @State private var type: PlaygroundOption? = buttonTypeList.first { $0.key == "primary" }
+    @State private var size: PlaygroundOption? = buttonSizeList.first { $0.key == "large" }
+    @State private var iconRight: PlaygroundOption?
+    // Seeded (Compose leaves both nil) so the UseTintColor toggle has an icon to act on.
+    @State private var iconLeft: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var full = true
+    @State private var loading = false
+    @State private var useTintColor = true
 
-    @State private var value: String = ""
-    @State private var disabled: Bool = false
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(
+                    title: title,
+                    action: {},
+                    type: (type?.value as? ButtonType) ?? .primary,
+                    size: (size?.value as? ButtonSize) ?? .large,
+                    iconLeft: (iconLeft?.value as? String) ?? "",
+                    iconRight: (iconRight?.value as? String) ?? "",
+                    isFull: full,
+                    loading: loading,
+                    useTintColor: useTintColor
+                )
+            },
+            params: [
+                .string("Children", $title),
+                .radio("Type", buttonTypeList, $type),
+                .radio("Size", buttonSizeList, $size),
+                .checkbox("Full", $full),
+                .option("IconRight", playgroundIcons, $iconRight),
+                .option("IconLeft", playgroundIcons, $iconLeft),
+                .checkbox("Loading", $loading),
+                .checkbox("UseTintColor", $useTintColor),
+            ]
+        )
+    }
 }

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