@momo-kits/native-kits 0.163.1-beta.15-debug → 0.163.1-beta.16-debug

package/.claude/settings.local.json

@@ -78,7 +78,8 @@
       "Bash(xcodebuild -workspace MoMoPlatform.xcworkspace -list)",
       "Bash(git --no-pager diff --stat ios/Application/Localize.swift ios/Application/Navigation/NavigationContainer.swift ios/Popup/PopupDisplay.swift ios/Popup/PopupNotify.swift ios/Template/TrustBanner/TrustBanner.swift)",
       "Bash(git rm *)",
-      "Bash(echo \"EXIT=$?\")"
+      "Bash(echo \"EXIT=$?\")",
+      "Bash(git -C /Users/sophia/Workspace/momo/momo-native-kits diff sample/iosApp/iosApp/Demo/ButtonDemo.swift)"
     ]
   }
 }

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.15-debug"
+        version = "0.163.1-beta.16-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.163.1-beta.15-debug'
+    spec.version                  = '0.163.1-beta.16-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.163.1-beta.15
+version=0.163.1-beta.16
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Button/Button.swift

@@ -281,25 +281,19 @@ private struct ButtonPressFeedbackStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         let pressed = configuration.isPressed && isEnabled
 
-        ZStack {
-            RoundedRectangle(cornerRadius: radius)
-                .fill(background)
-                .overlay(
-                    RoundedRectangle(cornerRadius: radius)
-                        .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
-                )
-                .padding(.horizontal, pressed ? 2 : 0)
-
-            configuration.label
-                .opacity(pressed ? 0.5 : 1)
-        }
-        // Pin the whole button to its intended height explicitly: the bare
-        // RoundedRectangle background has no intrinsic size of its own, so left
-        // unconstrained in a ZStack inside a non-height-constraining container
-        // (e.g. a footer VStack) it can report an oversized ideal height and
-        // stretch the button — and its container — far taller than intended.
-        .frame(height: height)
-        .clipShape(RoundedRectangle(cornerRadius: radius))
-        .animation(.easeInOut(duration: 0.1), value: pressed)
+        configuration.label
+            .opacity(pressed ? 0.5 : 1)
+            .background(
+                RoundedRectangle(cornerRadius: radius)
+                    .fill(background)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: radius)
+                            .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                    )
+                    .padding(.horizontal, pressed ? 2 : 0)
+            )
+            .frame(height: height)
+            .clipShape(RoundedRectangle(cornerRadius: radius))
+            .animation(.easeInOut(duration: 0.1), value: pressed)
     }
 }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.163.1-beta.15'
+  s.version          = '0.163.1-beta.16'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.163.1-beta.15'
+  s.version          = '0.163.1-beta.16'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

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

@@ -1,100 +1,245 @@
 //
-//  Foundation.swift
-//  Example
+//  ButtonDemo.swift
+//  MoMoUIKitsDemo
 //
-//  Created by Wem on 13/12/2022.
+//  SwiftUI port of the Compose demo `sample/shared/.../screens/ButtonUsage.kt`:
+//  Preview tab mirrors `PreviewButton`, Playground tab mirrors `PlaygroundButton`.
 //
 
 import Foundation
-import Lottie
 import MoMoUIKits
 import SwiftUI
 
+// Mirror the option lists in Compose `DemoScreen.kt`.
+private let buttonTypeList: [(key: String, value: ButtonType)] = [
+    ("primary", .primary),
+    ("secondary", .secondary),
+    ("tonal", .tonal),
+    ("outline", .outline),
+    ("danger", .danger),
+    ("text", .text),
+    ("disabled", .disabled),
+]
+
+private let sizeList: [(key: String, value: ButtonSize)] = [
+    ("large", .large),
+    ("medium", .medium),
+    ("small", .small),
+]
+
+// Subset of the Compose `Icons` map — names resolved via `Icon(source:)` / icon.json.
+private let iconOptionList: [String] = [
+    "none",
+    "arrow_arrow-back",
+    "arrow_arrow-next",
+    "Phonebook",
+]
+
 // MARK: - ButtonDemo
 
 struct ButtonDemo: View {
-    // MARK: Internal
+    @State private var tab = 0
 
     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)
-                }
+        VStack(spacing: 0) {
+            // Stand-in for Compose `DemoScreen`'s Preview/Playground bottom tabs.
+            Picker("", selection: $tab) {
+                Text("Preview").tag(0)
+                Text("Playground").tag(1)
+            }
+            .pickerStyle(.segmented)
+            .padding(.horizontal, 12)
+            .padding(.top, 8)
+
+            if tab == 0 {
+                PreviewButton()
+            } else {
+                PlaygroundButton()
+            }
+        }
+    }
+}
 
-                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)
-                }
+// MARK: - PreviewButton
 
+private struct PreviewButton: View {
+    private let url = "https://static-00.iconduck.com/assets.00/external-link-icon-512x512-h2zzryfc.png"
 
-                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)
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 0) {
+                ButtonSectionBox(title: "Title") {
+                    Button(title: "Open", action: {})
                 }
 
-                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)
+                ButtonSectionBox(title: "Type") {
+                    Button(title: "PRIMARY", action: {}, type: .primary)
+                    Button(title: "DANGER", action: {}, type: .danger)
+                    Button(title: "SECONDARY", action: {}, type: .secondary)
+                    Button(title: "TONAL", action: {}, type: .tonal)
+                    Button(title: "OUTLINE", action: {}, type: .outline)
+                    Button(title: "TEXT", action: {}, type: .text)
+                    Button(title: "DISABLED", action: {}, type: .disabled)
                 }
 
-                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)
+                ButtonSectionBox(title: "Size") {
+                    Button(title: "LARGE", action: {}, size: .large)
+                    Button(title: "MEDIUM", action: {}, size: .medium)
+                    Button(title: "SMALL", action: {}, size: .small)
                 }
 
-                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)
+                ButtonSectionBox(title: "Loading") {
+                    Button(title: "PRIMARY", action: {}, type: .primary, loading: true)
+                    Button(title: "DANGER", action: {}, type: .danger, loading: true)
+                    Button(title: "SECONDARY", action: {}, type: .secondary, loading: true)
+                    Button(title: "TONAL", action: {}, type: .tonal, loading: true)
+                    Button(title: "OUTLINE", action: {}, type: .outline, loading: true)
+                    Button(title: "TEXT", action: {}, type: .text, loading: true)
+                    Button(title: "DISABLED", action: {}, type: .disabled, loading: true)
                 }
 
-                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)
+                ButtonSectionBox(title: "Icon Right") {
+                    Button(title: "Icon", action: {}, iconRight: AnyView(ImageView(url, loading: false)))
                 }
 
-                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)
+                ButtonSectionBox(title: "Icon Left") {
+                    Button(title: "Icon", action: {}, iconLeft: AnyView(ImageView(url, loading: false)))
                 }
-                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)
+            }
+        }
+    }
+}
+
+// MARK: - PlaygroundButton
+
+private struct PlaygroundButton: View {
+    @State private var title: String = "Button"
+    @State private var type: AnyHashable = "primary"
+    @State private var size: AnyHashable = "large"
+    @State private var iconRight: AnyHashable = "none"
+    @State private var iconLeft: AnyHashable = "none"
+    @State private var full = true
+    @State private var loading = false
+    @State private var useTintColor = true
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ButtonSectionBox(title: "Component", alignment: .leading) {
+                Button(
+                    title: title,
+                    action: {},
+                    type: buttonTypeList.first { $0.key == type }?.value ?? .primary,
+                    size: sizeList.first { $0.key == size }?.value ?? .large,
+                    iconLeft: iconView(iconLeft),
+                    iconRight: iconView(iconRight),
+                    isFull: full,
+                    loading: loading,
+                    useTintColor: useTintColor
+                )
+            }
+
+            ScrollView {
+                ButtonSectionBox(title: "Props", alignment: .leading) {
+                    PropTitle("Children")
+                    Input(text: $title)
+                    PropGap()
+
+                    PropTitle("Type")
+                    RadioGroup(options: buttonTypeList.map(\.key), selection: $type)
+                    PropGap()
+
+                    PropTitle("Size")
+                    RadioGroup(options: sizeList.map(\.key), selection: $size)
+                    PropGap()
+
+                    PropTitle("Full")
+                    Checkbox($full, title: "\(full)")
+                    PropGap()
+
+                    PropTitle("Iconright")
+                    RadioGroup(options: iconOptionList, selection: $iconRight)
+                    PropGap()
+
+                    PropTitle("Iconleft")
+                    RadioGroup(options: iconOptionList, selection: $iconLeft)
+                    PropGap()
+
+                    PropTitle("Loading")
+                    Checkbox($loading, title: "\(loading)")
+                    PropGap()
+
+                    PropTitle("Usetinecolor")
+                    Checkbox($useTintColor, title: "\(useTintColor)")
                 }
-            }.padding(16)
-        }.padding(.top)
+            }
+        }
     }
 
-    func onPress() {
-        print("Button")
+    private func iconView(_ selection: AnyHashable) -> AnyView? {
+        guard let name = selection as? String, name != "none" else { return nil }
+        return AnyView(Icon(source: name))
     }
+}
+
+// MARK: - Playground helpers
+
+private struct PropTitle: View {
+    let title: String
+
+    init(_ title: String) { self.title = title }
+
+    var body: some View {
+        MomoText(title, typography: .headerDefaultBold)
+    }
+}
+
+private struct PropGap: View {
+    var body: some View {
+        Spacer().frame(height: Spacing.L)
+    }
+}
+
+private struct RadioGroup: View {
+    let options: [String]
+    @Binding var selection: AnyHashable
+
+    var body: some View {
+        ForEach(options, id: \.self) { key in
+            Radio(value: key, groupValue: $selection, label: key)
+        }
+    }
+}
+
+// MARK: - ButtonSectionBox
+
+/// Titled rounded-card section container, mirroring Compose's `BasicColumnBox`.
+private struct ButtonSectionBox<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+    let title: String
+    var alignment: HorizontalAlignment = .center
+    @ViewBuilder let content: () -> Content
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            if !title.isEmpty {
+                MomoText(title, typography: .headerMBold)
+                    .padding(.top, 8)
+            }
+
+            VStack(alignment: alignment, spacing: 8) {
+                content()
+            }
+            .frame(maxWidth: .infinity, alignment: alignment == .leading ? .leading : .center)
+            .padding(12)
+            .background(theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+        }
+        .padding(12)
+    }
+}
 
-    // MARK: Private
+// MARK: - Preview
 
-    @State private var value: String = ""
-    @State private var disabled: Bool = false
+#Preview {
+    ButtonDemo()
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.163.1-beta.15-debug",
+  "version": "0.163.1-beta.16-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},