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

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

@@ -2,92 +2,106 @@
 //  AvatarDemo.swift
 //  Example
 //
+//  Preview + Playground demo (DemoScreen pattern).
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct AvatarDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Size") {
-                    HStack(alignment: .center, spacing: 8) {
-                        Avatar(size: .size24)
-                        Avatar(size: .size32)
-                        Avatar(size: .size40)
-                        Avatar(size: .size48)
-                        Avatar(size: .size56)
-                        Avatar(size: .size72)
-                    }
-                }
-
-                section("Rounded vs Square") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, rounded: true)
-                        Avatar(size: .size40, rounded: false)
-                    }
-                }
-
-                section("Name (initials)") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, name: "Nguyen Van A")
-                        Avatar(size: .size40, name: "John Doe")
-                        Avatar(size: .size40, name: "MoMo")
-                    }
-                }
-
-                section("Image") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
-                        Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
-                    }
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { AvatarPreview() }, playground: { AvatarPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("showIconMomo") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconMomo: true)
-                        Avatar(size: .size48, name: "MN", showIconMomo: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=4", showIconMomo: true)
-                    }
-                }
+private let avatarSizeList: [PlaygroundOption] = [
+    .init("size24", AvatarSize.size24),
+    .init("size32", AvatarSize.size32),
+    .init("size40", AvatarSize.size40),
+    .init("size48", AvatarSize.size48),
+    .init("size56", AvatarSize.size56),
+    .init("size72", AvatarSize.size72),
+]
 
-                section("showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconSupport: true)
-                        Avatar(size: .size48, name: "CS", showIconSupport: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=5", showIconSupport: true)
-                    }
-                }
+// MARK: - Preview
 
-                section("showIconMomo + showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
-                        Avatar(size: .size72, name: "NV", showIconMomo: true, showIconSupport: true)
-                    }
-                }
+private struct AvatarPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.S) {
+                Avatar(size: .size24)
+                Avatar(size: .size32)
+                Avatar(size: .size40)
+                Avatar(size: .size48)
+                Avatar(size: .size56)
+                Avatar(size: .size72)
             }
-            .padding()
         }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.headline)
-            content()
+        BasicColumnBox("Rounded vs Square", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, rounded: true)
+                Avatar(size: .size40, rounded: false)
+            }
+        }
+        BasicColumnBox("Name (initials)", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, name: "Nguyen Van A")
+                Avatar(size: .size40, name: "John Doe")
+                Avatar(size: .size40, name: "MoMo")
+            }
+        }
+        BasicColumnBox("Image", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
+                Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
+                Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
+            }
+        }
+        BasicColumnBox("Icon badges", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size48, showIconMomo: true)
+                Avatar(size: .size48, showIconSupport: true)
+                Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
+            }
         }
     }
 }
 
-#if DEBUG
-struct AvatarDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        AvatarDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct AvatarPlayground: View {
+    @State private var size: PlaygroundOption? = avatarSizeList.first { $0.key == "size48" }
+    @State private var rounded = true
+    @State private var name = ""
+    @State private var image = ""
+    @State private var showIconMomo = false
+    @State private var showIconSupport = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Avatar(
+                    size: (size?.value as? AvatarSize) ?? .size48,
+                    rounded: rounded,
+                    name: name.isEmpty ? nil : name,
+                    image: image.isEmpty ? nil : image,
+                    showIconMomo: showIconMomo,
+                    showIconSupport: showIconSupport
+                )
+            },
+            params: [
+                .radio("Size", avatarSizeList, $size),
+                .checkbox("Rounded", $rounded),
+                .string("Name", $name),
+                .string("Image", $image),
+                .checkbox("ShowIconMomo", $showIconMomo),
+                .checkbox("ShowIconSupport", $showIconSupport),
+            ]
+        )
     }
 }
-#endif

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

@@ -2,268 +2,74 @@
 //  BadgeDemo.swift
 //  Example
 //
-//  Created by sophia on 12/5/25.
+//  Preview + Playground demo for Badge / BadgeDot / BadgeRibbon.
 //
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - BadgeDemo
-
 struct BadgeDemo: View {
-    // MARK: Internal
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { BadgePreview() }, playground: { BadgePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
+// MARK: - Preview
+
+private struct BadgePreview: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                // MARK: - Basic Badges
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Basic Badges")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge()
-                                Text("Default")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "9")
-                                Text("Single Digit")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "99")
-                                Text("Two Digits")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "999")
-                                Text("99+ Format")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge(label: "New")
-                                Text("Text Label")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "Hot", backgroundColor: Colors.pink03)
-                                Text("Custom Color")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "5", backgroundColor: Colors.green03)
-                                Text("Green Badge")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Dots
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Dots")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    HStack(spacing: 32) {
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .small)
-                            Text("Small")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                        
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .large)
-                            Text("Large")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Ribbons
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Ribbons")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 20) {
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomLeft, label: "Bottom Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomRight, label: "Bottom Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge in Context (Real Usage Examples)
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Real Usage Examples")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        // Notification with badge
-                        HStack {
-                            Image(systemName: "bell.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Notifications")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "23")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Message with badge
-                        HStack {
-                            Image(systemName: "message.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Messages")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "5")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Product card with ribbon
-                        ZStack(alignment: .topTrailing) {
-                            VStack(alignment: .leading, spacing: 8) {
-                                Rectangle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(height: 120)
-                                    .cornerRadius(8)
-                                
-                                Text("Product Name")
-                                    .font(.headline)
-                                
-                                Text("$99.99")
-                                    .font(.subheadline)
-                                    .foregroundColor(.gray)
-                            }
-                            .padding()
-                            .background(Color(.systemGray6))
-                            .cornerRadius(12)
-                            
-                            BadgeRibbon(position: .topRight, label: "NEW")
-                                .frame(width: 60, height: 40)
-                                .offset(x: 5, y: 0)
-                        }
-                        
-                        // Profile with dot indicator
-                        HStack {
-                            ZStack(alignment: .topTrailing) {
-                                Circle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(width: 50, height: 50)
-                                
-                                BadgeDot(size: .small)
-                                    .offset(x: 2, y: 2)
-                            }
-                            
-                            VStack(alignment: .leading) {
-                                Text("User Name")
-                                    .font(.headline)
-                                Text("Online")
-                                    .font(.caption)
-                                    .foregroundColor(Colors.green03)
-                            }
-                            
-                            Spacer()
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                    }
-                    .padding(.horizontal, 16)
-                }
+        BasicColumnBox("Basic Badges", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                Badge()
+                Badge(label: "9")
+                Badge(label: "99")
+                Badge(label: "999")
+            }
+            HStack(spacing: Spacing.L) {
+                Badge(label: "New")
+                Badge(label: "Hot", backgroundColor: Colors.pink03)
+                Badge(label: "5", backgroundColor: Colors.green03)
+            }
+        }
+
+        BasicColumnBox("Badge Dots", alignment: .leading) {
+            HStack(spacing: Spacing.XL) {
+                BadgeDot(size: .small)
+                BadgeDot(size: .large)
+            }
+        }
+
+        BasicColumnBox("Badge Ribbons", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
+                    .frame(width: 150, height: 30)
+                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
+                    .frame(width: 150, height: 30)
             }
-            .padding(.vertical, 16)
         }
     }
 }
 
-// MARK: - Preview
+// MARK: - Playground
 
-#if DEBUG
-struct BadgeDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        BadgeDemo()
+@available(iOS 16.0, *)
+private struct BadgePlayground: View {
+    @State private var label = "New"
+    @State private var color: PlaygroundOption? = playgroundColors.first { $0.key == "pink03" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Badge(label: label, backgroundColor: color?.value as? Color)
+            },
+            params: [
+                .string("Label", $label),
+                .color("BackgroundColor", playgroundColors, $color),
+            ]
+        )
     }
 }
-#endif