@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1

package/ios/Image/Image.swift

@@ -5,14 +5,23 @@ import SDWebImageSwiftUI
 import SkeletonUI
 import SwiftUI
 
+public enum ImageState {
+    case loading, success, error
+}
+
 public struct ImageView: View {
+    @Environment(\.appTheme) private var theme
+
     // MARK: Lifecycle
 
-    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil) {
+    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil, loading: Bool = true, onStateChanged: ((ImageState) -> Void)? = nil) {
         self.url = url
         self.aspectRatio = aspectRatio
         self.contentMode = contentMode
         self.placeholder = placeholder
+        self.color = color
+        self.loading = loading
+        self.onStateChanged = onStateChanged
     }
 
     // MARK: Public
@@ -21,32 +30,35 @@ public struct ImageView: View {
         return WebImage(url: URL(string: url), isAnimating: .constant(true))
             .onFailure { _ in
                 error = true
+                onStateChanged?(.error)
             }
             .onSuccess { _, _, _ in
                 error = false
+                onStateChanged?(.success)
             }
             .resizable()
+            .renderingMode(color != nil ? .template : .original)
             .placeholder {
-                Rectangle().foregroundColor(.gray)
                 VStack(alignment: .center, content: {
                     if error {
-                        Image(systemName: "person.crop.circle.badge.exclamationmark")
-                            .foregroundColor(Colors.textSecondary)
-                        Text("Error!")
-                            .font(.paragraph)
-                            .foregroundColor(Colors.textSecondary)
-                            .padding(Spacing.XXS)
+                        Image("media_fail")
+                            .resizable()
+                            .renderingMode(.template)
+                            .foregroundColor(theme.colors.text.disable)
+                            .frame(width: 24, height: 24)
                     } else if placeholder != nil {
                         placeholder
                     }
                 })
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .skeleton(with: !error && placeholder == nil)
+                .skeleton(with: loading && !error && placeholder == nil)
                 .shape(type: .rectangle)
             }
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
+            .foregroundColor(color)
+            .onAppear { onStateChanged?(.loading) }
     }
 
     // MARK: Internal
@@ -54,7 +66,22 @@ public struct ImageView: View {
     var aspectRatio: CGFloat?
     var contentMode: ContentMode
     var placeholder: AnyView?
+    var color: Color?
+    var loading: Bool
+    var onStateChanged: ((ImageState) -> Void)?
 
     @State var error: Bool = false
     var url: String
 }
+
+private struct ColorMultiplyModifier: ViewModifier {
+    let color: Color?
+
+    func body(content: Content) -> some View {
+        if let color {
+            content.colorMultiply(color)
+        } else {
+            content
+        }
+    }
+}

package/ios/Information/Information.swift

@@ -0,0 +1,156 @@
+import SwiftUI
+
+public enum InformationState {
+    case `default`
+    case warning
+    case error
+}
+
+public struct Information: View {
+    @Environment(\.appTheme) private var theme
+
+    private let title: String?
+    private let description: String
+    private let state: InformationState
+    private let image: String?
+    private let onPressAction: (() -> Void)?
+    private let showIcon: Bool
+    private let action: String?
+    private let showIconClose: Bool
+    private let onPressClose: (() -> Void)?
+    private let highlightText: [String]
+
+    public init(
+        title: String? = nil,
+        description: String = "Description",
+        state: InformationState = .default,
+        image: String? = nil,
+        onPressAction: (() -> Void)? = nil,
+        showIcon: Bool = true,
+        action: String? = nil,
+        showIconClose: Bool = true,
+        onPressClose: (() -> Void)? = nil,
+        highlightText: [String] = []
+    ) {
+        self.title = title
+        self.description = description
+        self.state = state
+        self.image = image
+        self.onPressAction = onPressAction
+        self.showIcon = showIcon
+        self.action = action
+        self.showIconClose = showIconClose
+        self.onPressClose = onPressClose
+        self.highlightText = highlightText
+    }
+
+    private var borderColor: Color {
+        switch state {
+        case .default: return Colors.blue07
+        case .warning: return Colors.yellow06
+        case .error: return Colors.red07
+        }
+    }
+
+    private var backgroundColor: Color {
+        switch state {
+        case .default: return Colors.blue10
+        case .warning: return Colors.yellow09
+        case .error: return Colors.red10
+        }
+    }
+
+    private var accentColor: Color {
+        switch state {
+        case .default: return Colors.blue03
+        case .warning: return Colors.orange03
+        case .error: return Colors.red03
+        }
+    }
+
+    private var iconSource: String {
+        switch state {
+        case .default: return "notifications_info"
+        case .warning: return "24_notifications_alert_triangle"
+        case .error: return "24_notifications_alert_octagon"
+        }
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(alignment: .top, spacing: 0) {
+                if let image {
+                    ImageView(image)
+                        .frame(width: 40, height: 40)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        .padding(.trailing, Spacing.S)
+                } else if showIcon {
+                    Icon(source: iconSource, size: 16, color: accentColor)
+                        .padding(.trailing, Spacing.S)
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    if let title {
+                        MomoText(title, typography: .labelDefaultMedium)
+                    }
+                    MomoText(description, typography: .descriptionDefaultRegular, highlightText: highlightText)
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+                if let onPressClose, showIconClose {
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.text.default)
+                        .contentShape(Rectangle())
+                        .onTapGesture(perform: onPressClose)
+                }
+            }
+
+            if let action, let onPressAction {
+                MomoText(action, typography: .actionXsBold, color: accentColor)
+                    .frame(maxWidth: .infinity, alignment: .trailing)
+                    .contentShape(Rectangle())
+                    .onTapGesture(perform: onPressAction)
+                    .padding(.top, Spacing.S)
+            }
+        }
+        .padding(Spacing.M)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .fill(backgroundColor)
+        )
+        .overlay(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .stroke(borderColor, lineWidth: 0.5)
+        )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Information_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 16) {
+            Information(
+                title: "Information",
+                description: "This is a default information message."
+            )
+            Information(
+                title: "Warning",
+                description: "This is a warning message.",
+                state: .warning
+            )
+            Information(
+                title: "Error",
+                description: "This is an error message.",
+                state: .error,
+                onPressAction: {}, action: "Retry"
+            )
+            Information(
+                description: "Dismissible information.",
+                onPressClose: {}
+            )
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

package/ios/Input/ErrorView.swift

@@ -0,0 +1,58 @@
+//
+//  ErrorView.swift
+//  Pods
+//
+//  Created by sophia on 13/1/26.
+//
+
+import SwiftUI
+
+public struct ErrorView: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+
+    public var errorMessage: String
+    public var errorSpacing: Bool
+    public var hintText: String
+    
+    public init(
+        errorMessage: String = "",
+        errorSpacing: Bool = false,
+        hintText: String = ""
+    ) {
+        self.errorMessage = errorMessage
+        self.errorSpacing = errorSpacing
+        self.hintText = hintText
+    }
+    
+    public var body: some View {
+        if !errorMessage.isEmpty || !hintText.isEmpty {
+            HStack(alignment: .top, spacing: 4) {
+                Icon(source: "ic_error", size: fontScale(16), color: displayColor())
+                MomoText(
+                    displayText(),
+                    typography: .descriptionDefaultRegular,
+                    color: displayColor()
+                )
+            }
+            .padding(.top, Spacing.XS)
+        } else if errorSpacing {
+            Spacer()
+                .padding(.top, Spacing.XS)
+                .frame(height: 18)
+        }
+    }
+    
+    // MARK: - Helpers
+    
+    private func displayColor() -> Color {
+        !errorMessage.isEmpty ? theme.colors.error.primary : theme.colors.text.hint
+    }
+    
+    private func displayText() -> String {
+        if !errorMessage.isEmpty {
+            return errorMessage
+        }
+        return hintText.isEmpty ? "Không thể chỉnh sửa" : hintText
+    }
+}