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

package/ios/Input/InputTextArea.swift

@@ -0,0 +1,318 @@
+//
+//  InputTextArea.swift
+//  Pods
+//
+//  Created by dung.pham2 on 2/12/24.
+//
+import SwiftUI
+
+// Make these constants public
+public let MAX_LENGTH = 300
+public let DEFAULT_HEIGHT: CGFloat = 104
+
+struct UITextViewWrapper: UIViewRepresentable {
+    @Binding var text: String
+    var maxLength: Int
+    var textColor: Color
+    var cursorColor: Color
+    var fontWeight: Font.Weight
+    var disabled: Bool
+    var onChangeText: (String) -> Void
+    var onDone: (() -> Void)?
+    var onFocus: (() -> Void)?
+    var onBlur: (() -> Void)?
+    
+    func makeUIView(context: Context) -> UITextView {
+        let textView = UITextView()
+        textView.delegate = context.coordinator
+        textView.backgroundColor = .clear
+        textView.textContainerInset = .zero
+        textView.textContainer.lineFragmentPadding = 0
+        return textView
+    }
+    
+    func updateUIView(_ uiView: UITextView, context: Context) {
+        if uiView.text != text {
+            uiView.text = text
+        }
+        uiView.textColor = UIColor(textColor)
+        uiView.tintColor = UIColor(cursorColor)
+        // Read through `context.environment` rather than the global `scaleSize`: that is what makes
+        // SwiftUI re-run updateUIView when the font scale changes.
+        uiView.font = UIFont.systemFont(
+            ofSize: context.environment.momoFontScale(16),
+            weight: fontWeight == .bold ? .bold : .regular
+        )
+        uiView.isEditable = !disabled
+    }
+    
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+    
+    class Coordinator: NSObject, UITextViewDelegate {
+        var parent: UITextViewWrapper
+        
+        init(_ parent: UITextViewWrapper) {
+            self.parent = parent
+        }
+        
+        func textViewDidChange(_ textView: UITextView) {
+            let limited = String(textView.text.prefix(parent.maxLength))
+            if textView.text != limited {
+                textView.text = limited
+            }
+            parent.text = limited
+            parent.onChangeText(limited)
+        }
+        
+        func textViewDidBeginEditing(_ textView: UITextView) {
+            parent.onFocus?()
+        }
+        
+        func textViewDidEndEditing(_ textView: UITextView) {
+            parent.onBlur?()
+        }
+        
+        func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
+            if text == "\n" {
+                parent.onDone?()
+                return false
+            }
+            let current = textView.text ?? ""
+            guard let range = Range(range, in: current) else { return false }
+            let proposed = current.replacingCharacters(in: range, with: text)
+            return proposed.count <= parent.maxLength
+        }
+    }
+}
+
+// Make the struct public
+public struct InputTextArea: View {
+    @Environment(\.appTheme) private var theme
+    @Binding var text: String
+    var maxLength: Int = MAX_LENGTH
+    var height: CGFloat = DEFAULT_HEIGHT
+    var floatingValue: String = ""
+    var floatingValueColor: Color?
+    var floatingIcon: String = ""
+    var floatingIconColor: Color?
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var error: String = ""
+    var errorSpacing: Bool = false
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color?
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var required: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    
+    @State private var isFocused = false
+    @State private var isBlurred = false
+    @State private var floatingLabelHeight: CGFloat = 16
+    
+    // Make the initializer public
+    public init(
+        text: Binding<String>,
+        maxLength: Int = MAX_LENGTH,
+        height: CGFloat = DEFAULT_HEIGHT,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "",
+        onChangeText: @escaping (String) -> Void = { _ in },
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "",
+        iconColor: Color? = nil,
+        onRightIconPressed: @escaping () -> Void = {},
+        onFocus: @escaping () -> Void = {},
+        onBlur: @escaping () -> Void = {},
+        loading: Bool = false,
+        required: Bool = false,
+        fontWeight: Font.Weight = .regular,
+        keyboardType: UIKeyboardType = .default
+    ) {
+        self._text = text
+        self.maxLength = maxLength
+        self.height = height
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.required = required
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+    }
+    
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+                    ZStack(alignment: .topLeading) {
+                        if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                            HStack(spacing: 4) {
+                                MomoText(
+                                    floatingValue,
+                                    typography: .labelSMedium,
+                                    color: disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+                                )
+                                
+                                if required {
+                                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                                }
+                                
+                                if !floatingIcon.isEmpty {
+                                    Icon(
+                                        source: floatingIcon,
+                                        size: 16,
+                                        color: disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+                                    )
+                                    .padding(.leading, Spacing.XS)
+                                }
+                            }
+                            .padding(.horizontal, Spacing.S)
+                            .background(
+                                GeometryReader { geo in
+                                    Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                                }
+                            )
+                            .background(theme.colors.background.surface)
+                            // Kotlin centers the label within the box-height-tall decorationBox
+                            // by default, then applies `offsetY = -scaleHeight / 2` — net effect:
+                            // the label ends up centered exactly on the box's top border. Our
+                            // ZStack anchors top-leading instead, so matching that requires
+                            // offsetting by half the label's OWN measured height, not half the
+                            // (104pt-tall) text-area box height.
+                            .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
+                            .zIndex(10)
+                        }
+
+                        VStack {
+                            HStack(alignment: .top, spacing: 0) {
+                                ZStack(alignment: .topLeading) {
+                                    if text.isEmpty {
+                                        Text(placeholder)
+                                            .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
+                                            .font(.system(size: 16, weight: fontWeight))
+                                            .padding(.horizontal, 16)
+                                            .padding(.vertical, 12)
+                                    }
+
+                                    UITextViewWrapper(
+                                        text: $text,
+                                        maxLength: maxLength,
+                                        textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
+                                        cursorColor: theme.colors.primary,
+                                        fontWeight: fontWeight,
+                                        disabled: disabled,
+                                        onChangeText: onChangeText,
+                                        onDone: {
+                                        // Handle done action if needed
+                                    },
+                                    onFocus: {
+                                        isFocused = true
+                                        onFocus()
+                                    }, onBlur: {
+                                        isFocused = false
+                                        isBlurred = true
+                                        onBlur()
+                                    })
+                                    .frame(height: height)
+                                    .padding(.horizontal, 12)
+                                    .padding(.vertical, 8)
+                                    .disabled(disabled)
+                                }
+                                .frame(maxWidth: .infinity)
+
+                                // Clear button (mirrors Compose: focused + non-empty).
+                                if isFocused && !text.isEmpty {
+                                    SwiftUI.Button(action: {
+                                        text = ""
+                                        onChangeText("")
+                                    }) {
+                                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+
+                                // Loading indicator and right icon (independent, mirrors
+                                // Compose's RenderRightIcon: both can render at once).
+                                if loading {
+                                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                        .frame(width: 16, height: 16)
+                                        .padding(.leading, Spacing.XS)
+                                        .padding(.top, 12)
+                                }
+                                if !icon.isEmpty {
+                                    SwiftUI.Button(action: onRightIconPressed) {
+                                        Icon(source: icon, size: 24, color: disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default))
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+                            }
+
+                            HStack {
+                                Spacer()
+                                MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)
+                            }
+                            .padding(.horizontal, 16)
+                            .padding(.bottom, 12)
+                        }
+                        .background(theme.colors.background.surface)
+                        .cornerRadius(Radius.S)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: Radius.S)
+                                .stroke(borderColor, lineWidth: 1)
+                        )
+                    }
+                    
+                    ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
+                }
+                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
+                    if !isBlurred {
+                        isFocused = true
+                        onFocus()
+                    }
+                }
+                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+                    if isFocused {
+                        isFocused = false
+                        isBlurred = true
+                        onBlur()
+                    }
+                }
+                .ignoreBoldTextSetting()
+    }
+    
+    private var borderColor: Color {
+        if disabled {
+            return theme.colors.border.disable
+        } else if !error.isEmpty {
+            return theme.colors.error.primary
+        } else if isFocused {
+            return theme.colors.primary
+        } else {
+            return theme.colors.border.default
+        }
+
+    }
+}

package/ios/InputDropDown/InputDropDown.swift

@@ -0,0 +1,201 @@
+//
+//  InputDropDown.swift
+//  Pods
+//
+//  Hand-written SwiftUI reimplementation of Compose `InputDropDown`.
+//
+
+import SwiftUI
+
+// MARK: - RenderRightIcon (mirrors Compose RenderRightIcon for InputDropDown)
+
+private struct RenderRightIcon: View {
+    let loading: Bool
+    let icon: String
+    let color: Color
+    let onPressed: () -> Void
+
+    var body: some View {
+        // Mirrors Compose's two independent `if` blocks: loading spinner and icon
+        // can both render at once, not exclusively (not an if/else).
+        if loading {
+            ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                .frame(width: 16, height: 16)
+        }
+        if !icon.isEmpty {
+            SwiftUI.Button(action: onPressed) {
+                Icon(source: icon, size: 24, color: color)
+            }
+        }
+    }
+}
+
+// MARK: - InputDropDown
+
+public struct InputDropDown: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var value: String
+
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var placeholder: String
+    public var size: InputSize
+    public var onPress: () -> Void
+    public var hintText: String
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var icon: String
+    public var iconColor: Color?
+    public var onRightIconPressed: () -> Void
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+
+    public init(
+        value: Binding<String>,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "",
+        size: InputSize = .small,
+        onPress: @escaping () -> Void = {},
+        hintText: String = "",
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "arrow_chevron_down_small",
+        iconColor: Color? = nil,
+        onRightIconPressed: @escaping () -> Void = {},
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false
+    ) {
+        self._value = value
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.size = size
+        self.onPress = onPress
+        self.hintText = hintText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: 0) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                                .padding(.leading, Spacing.XS)
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(theme.colors.background.surface)
+                    .offset(x: Spacing.S, y: -8)
+                    .zIndex(10)
+                }
+
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconTintColor)
+                            .padding(.trailing, Spacing.M)
+                    }
+
+                    MomoText(
+                        value.isEmpty ? placeholder : value,
+                        typography: .bodyDefaultRegular,
+                        color: value.isEmpty ? placeholderColor : textColor
+                    )
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    RenderRightIcon(
+                        loading: loading,
+                        icon: icon,
+                        color: iconTintColor,
+                        onPressed: onRightIconPressed
+                    )
+                }
+                .padding(.horizontal, Spacing.M)
+                .frame(height: size == .small ? 48 : 56)
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(getBorderColor(isFocused: false, error: error, disabled: disabled), lineWidth: 1)
+                )
+            }
+            .contentShape(Rectangle())
+            .onTapGesture {
+                if !disabled { onPress() }
+            }
+
+            ErrorView(
+                errorMessage: error,
+                errorSpacing: errorSpacing,
+                hintText: hintText
+            )
+        }
+        .accessibilityElement(children: .combine)
+        .accessibility(label: Text(floatingValue))
+    }
+
+    // MARK: - Computed colors
+
+    private var textColor: Color {
+        disabled ? theme.colors.text.disable : theme.colors.text.default
+    }
+
+    private var placeholderColor: Color {
+        disabled ? theme.colors.text.disable : theme.colors.text.hint
+    }
+
+    private var iconTintColor: Color {
+        disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default)
+    }
+
+    private var floatingTitleColor: Color {
+        disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+    }
+
+    private var floatingIconTintColor: Color {
+        disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+    }
+
+    private var leadingIconTintColor: Color {
+        disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint)
+    }
+
+    private func getBorderColor(isFocused: Bool, error: String, disabled: Bool) -> Color {
+        if disabled {
+            return theme.colors.border.disable
+        } else if !error.isEmpty {
+            return theme.colors.error.primary
+        } else if isFocused {
+            return theme.colors.primary
+        } else {
+            return theme.colors.border.default
+        }
+    }
+}