@momo-kits/native-kits 0.162.30 → 0.162.31

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

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