@momo-kits/native-kits 0.162.30-debug → 0.162.31-debug

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

@@ -1,58 +1,93 @@
+//
+//  IconButtonDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - IconButtonDemo
+private let iconButtonSizeList: [PlaygroundOption] = [
+    .init("large", IconSize.large),
+    .init("medium", IconSize.medium),
+    .init("small", IconSize.small),
+]
+
+private let iconShapeList: [PlaygroundOption] = [
+    .init("circle", IconShape.circle),
+    .init("square", IconShape.square),
+]
 
 struct IconButtonDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                Group {
-                    Text("Source")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary)
-                        IconButton(icon: url2, onClick: onPress, type: .primary)
-                        IconButton(icon: url3, onClick: onPress, type: .primary)
-                        IconButton(icon: url4, onClick: onPress, type: .primary)
-                    }
-                }
-
-                Group {
-                    Text("Type")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary)
-                        IconButton(icon: url, onClick: onPress, type: .secondary)
-                        IconButton(icon: url, onClick: onPress, type: .tonal)
-                        IconButton(icon: url, onClick: onPress, type: .outline)
-                        IconButton(icon: url, onClick: onPress, type: .disabled)
-                        IconButton(icon: url, onClick: onPress, type: .danger)
-                    }
-                }
-
-                Group {
-                    Text("Size")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary, size: .large)
-                        IconButton(icon: url, onClick: onPress, type: .primary, size: .small)
-                    }
-                }
-            }
-            .padding(16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { IconButtonPreview() }, playground: { IconButtonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
-        .padding(.top)
     }
+}
+
+// MARK: - Preview
 
-    func onPress() {
-        print("IconButton")
+private struct IconButtonPreview: View {
+    private let icon = "travel_plane"
+
+    var body: some View {
+        BasicColumnBox("Source", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: "travel_plane", onClick: {})
+                IconButton(icon: "shopping_coupon", onClick: {})
+                IconButton(icon: "shopping_store", onClick: {})
+                IconButton(icon: "time_alarm_check", onClick: {})
+            }
+        }
+        BasicColumnBox("Type", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: icon, onClick: {}, type: .primary)
+                IconButton(icon: icon, onClick: {}, type: .secondary)
+                IconButton(icon: icon, onClick: {}, type: .tonal)
+                IconButton(icon: icon, onClick: {}, type: .outline)
+                IconButton(icon: icon, onClick: {}, type: .disabled)
+                IconButton(icon: icon, onClick: {}, type: .danger)
+            }
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: icon, onClick: {}, type: .primary, size: .large)
+                IconButton(icon: icon, onClick: {}, type: .primary, size: .small)
+            }
+        }
     }
+}
+
+// MARK: - Playground
 
-    // MARK: Private
+@available(iOS 16.0, *)
+private struct IconButtonPlayground: View {
+    @State private var icon: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var type: PlaygroundOption? = buttonTypeList.first { $0.key == "primary" }
+    @State private var size: PlaygroundOption? = iconButtonSizeList.first { $0.key == "small" }
+    @State private var shape: PlaygroundOption? = iconShapeList.first { $0.key == "circle" }
 
-    private let url = "travel_plane"
-    private let url2 = "shopping_coupon"
-    private let url3 = "shopping_store"
-    private let url4 = "time_alarm_check"
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                IconButton(
+                    icon: (icon?.value as? String) ?? "basic_home",
+                    onClick: {},
+                    type: (type?.value as? ButtonType) ?? .primary,
+                    size: (size?.value as? IconSize) ?? .small,
+                    shape: (shape?.value as? IconShape) ?? .circle
+                )
+            },
+            params: [
+                .option("Icon", playgroundIcons, $icon),
+                .radio("Type", buttonTypeList, $type),
+                .radio("Size", iconButtonSizeList, $size),
+                .radio("Shape", iconShapeList, $shape),
+            ]
+        )
+    }
 }

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

@@ -0,0 +1,81 @@
+//
+//  IconDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's IconUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct IconDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { IconPreview() }, playground: { IconPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct IconPreview: View {
+    var body: some View {
+        BasicColumnBox("Source", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 24)
+                Icon(source: "basic_flag", size: 24)
+                Icon(source: "basic_filter", size: 24)
+                Icon(source: "basic_delete", size: 24)
+            }
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 16)
+                Icon(source: "basic_flag", size: 20)
+                Icon(source: "basic_filter", size: 24)
+                Icon(source: "basic_delete", size: 28)
+            }
+        }
+        BasicColumnBox("Color", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 24, color: Colors.red03)
+                Icon(source: "basic_flag", size: 24, color: Colors.green04)
+                Icon(source: "basic_filter", size: 24, color: Colors.pink06)
+                Icon(source: "basic_delete", size: 24, color: Colors.yellow02)
+            }
+        }
+        BasicColumnBox("No theme icon", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "ic_round_momo_tiny", size: 24)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct IconPlayground: View {
+    @State private var source: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var color: PlaygroundOption? = playgroundColors.first { $0.key == "black17" }
+    @State private var size = "24"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Icon(
+                    source: (source?.value as? String) ?? "basic_home",
+                    size: CGFloat(Int(size) ?? 24),
+                    color: color?.value as? Color
+                )
+            },
+            params: [
+                .option("Source", playgroundIcons, $source),
+                .color("Color", playgroundColors, $color),
+                .number("Size (dp)", $size),
+            ]
+        )
+    }
+}

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

@@ -2,77 +2,64 @@
 //  ImageDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 2/12/24.
+//  Preview + Playground demo for ImageView.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct ImageDemo: View {
-    // MARK: - Properties
-    @State private var time = 1000
-    
-    // MARK: - Body
     var body: some View {
-        NavigationView {
-            ScrollView {
-                VStack(spacing: 16) { // Equivalent to Spacing.M
-                    HStack {
-                        ImageView("https://source.unsplash.com/random/\(time)")
-                            .frame(width: 100, height: 100)
-                        
-                        Spacer()
-                        
-                        ImageView("https://abc.com")
-                            .frame(width: 100, height: 100)
-                    }
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://images.unsplash.com/photo-1509395062183-67c5ad6faff9")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                }
-                .padding()
-            }
-        }
-        .onAppear {
-            startTimer()
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ImagePreview() }, playground: { ImagePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
-    
-    // MARK: - Methods
-    private func startTimer() {
-        Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { _ in
-            time = Int.random(in: 1...1000)
+}
+
+// MARK: - Preview
+
+private struct ImagePreview: View {
+    private let sample = "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9"
+
+    var body: some View {
+        BasicColumnBox("Fixed size", alignment: .leading) {
+            ImageView(sample).frame(width: 100, height: 100)
+        }
+        BasicColumnBox("Fill width", alignment: .leading) {
+            ImageView(sample)
+                .frame(maxWidth: .infinity)
+                .frame(height: 120)
+                .aspectRatio(contentMode: .fill)
+                .clipped()
+        }
+        BasicColumnBox("Invalid URL (fallback)", alignment: .leading) {
+            ImageView("https://abc.com").frame(width: 100, height: 100)
         }
     }
 }
 
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ImagePlayground: View {
+    @State private var url = "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9"
+    @State private var height: Double = 120
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                ImageView(url)
+                    .frame(maxWidth: .infinity)
+                    .frame(height: CGFloat(height))
+                    .aspectRatio(contentMode: .fill)
+                    .clipped()
+            },
+            params: [
+                .string("URL", $url),
+                .slider("Height", $height, min: 60, max: 240, step: 10),
+            ]
+        )
+    }
+}

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

@@ -2,137 +2,87 @@
 //  InformationDemo.swift
 //  Example
 //
-//  Created by product2 on 6/18/26.
+//  Preview + Playground demo (DemoScreen pattern).
 //
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - InformationDemo
+private let informationStateList: [PlaygroundOption] = [
+    .init("default", InformationState.default),
+    .init("warning", InformationState.warning),
+    .init("error", InformationState.error),
+]
 
 struct InformationDemo: View {
-    @State private var showDismissible = true
-
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                // MARK: - States
-
-                section("States") {
-                    Information(
-                        title: "Default",
-                        description: "This is a default information message.",
-                        showIconClose: true,
-                        onPressClose: {}
-                    )
-                    Information(
-                        title: "Warning",
-                        description: "This is a warning information message.",
-                        state: .warning
-                    )
-                    Information(
-                        title: "Error",
-                        description: "This is an error information message.",
-                        state: .error
-                    )
-                }
-
-                // MARK: - Without title
-
-                section("Description only") {
-                    Information(
-                        description: "Information without a title, only a description."
-                    )
-                    Information(
-                        description: "Warning without a title.",
-                        state: .warning
-                    )
-                }
-
-                // MARK: - With action
-
-                section("With action") {
-                    Information(
-                        title: "Update available",
-                        description: "A new version is ready to install.",
-                        onPressAction: { print("Action pressed") },
-                        action: "Update now"
-                    )
-                    Information(
-                        title: "Payment failed",
-                        description: "We couldn't process your payment.",
-                        state: .error,
-                        onPressAction: { print("Retry pressed") },
-                        action: "Retry"
-                    )
-                }
-
-                // MARK: - With close button
-
-                section("Dismissible") {
-                    if showDismissible {
-                        Information(
-                            title: "Dismissible",
-                            description: "Tap the close icon to dismiss this banner.",
-                            onPressClose: { showDismissible = false }
-                        )
-                    } else {
-                        Information(
-                            description: "Banner dismissed. Toggle to show again.",
-                            state: .warning,
-                            onPressAction: { showDismissible = true }, showIcon: true,
-                            action: "Show again"
-                            
-                        )
-                    }
-                }
-
-                // MARK: - With image
-
-                section("With image") {
-                    Information(
-                        title: "Custom image",
-                        description: "Uses a remote image instead of the state icon.",
-                        image: "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9",
-                        onPressClose: { print("Close pressed") }
-                    )
-                }
-
-                // MARK: - Without icon
-
-                section("Without icon") {
-                    Information(
-                        title: "No icon",
-                        description: "showIcon is set to false.",
-                        showIcon: false
-                    )
-                }
-            }
-            .padding(.vertical, 16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InformationPreview() }, playground: { InformationPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
+}
 
-    // MARK: - Helpers
+// MARK: - Preview
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(title)
-                .font(.headline)
-            content()
+private struct InformationPreview: View {
+    var body: some View {
+        BasicColumnBox("States", alignment: .leading) {
+            Information(title: "Default", description: "This is a default information message.",
+                        showIconClose: true, onPressClose: {})
+            Information(title: "Warning", description: "This is a warning information message.", state: .warning)
+            Information(title: "Error", description: "This is an error information message.", state: .error)
+        }
+        BasicColumnBox("Description only", alignment: .leading) {
+            Information(description: "Information without a title, only a description.")
+            Information(description: "Warning without a title.", state: .warning)
+        }
+        BasicColumnBox("With action", alignment: .leading) {
+            Information(title: "Update available", description: "A new version is ready to install.",
+                        onPressAction: {}, action: "Update now")
+            Information(title: "Payment failed", description: "We couldn't process your payment.",
+                        state: .error, onPressAction: {}, action: "Retry")
+        }
+        BasicColumnBox("Without icon", alignment: .leading) {
+            Information(title: "No icon", description: "showIcon is set to false.", showIcon: false)
         }
-        .padding(.horizontal, 16)
     }
 }
 
-#if DEBUG
-struct InformationDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        InformationDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InformationPlayground: View {
+    @State private var title = "Title"
+    @State private var description = "Information description."
+    @State private var state: PlaygroundOption? = informationStateList.first { $0.key == "default" }
+    @State private var showIcon = true
+    @State private var showIconClose = false
+    @State private var action = ""
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Information(
+                    title: title.isEmpty ? nil : title,
+                    description: description,
+                    state: (state?.value as? InformationState) ?? .default,
+                    onPressAction: {},
+                    showIcon: showIcon,
+                    action: action.isEmpty ? nil : action,
+                    showIconClose: showIconClose,
+                    onPressClose: {}
+                )
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $description),
+                .radio("State", informationStateList, $state),
+                .checkbox("ShowIcon", $showIcon),
+                .checkbox("ShowIconClose", $showIconClose),
+                .string("Action", $action),
+            ]
+        )
     }
 }
-#endif