chore: symbols for obfuscation and placeholder, borders, cursor location on focus (#998)

Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>

Author: pylapp

OUDS/Core/Components/Sources/Controls/PinCodeInput/Internal/PinCode+Backspace.swift

@@ -31,6 +31,8 @@ import SwiftUI
 struct BackspaceDetectingTextField: UIViewRepresentable {
 
     @Binding var text: String
+    @Binding var displayText: String
+    let font: UIFont
     let index: Int
     let onBackspace: () -> Void
 
@@ -48,6 +50,8 @@ struct BackspaceDetectingTextField: UIViewRepresentable {
         textField.onBackspace = onBackspace
         textField.fieldIndex = index
 
+        textField.font = font
+
         // Set low priorities to allow the frame modifier to control the size
         textField.setContentHuggingPriority(.defaultLow, for: .vertical)
         textField.setContentHuggingPriority(.defaultLow, for: .horizontal)
@@ -67,8 +71,8 @@ struct BackspaceDetectingTextField: UIViewRepresentable {
         uiView.onBackspace = onBackspace
 
         // Only update the text if it's different to avoid unnecessary updates
-        if uiView.text != text {
-            uiView.text = text
+        if uiView.text != displayText {
+            uiView.text = displayText
         }
     }
 
@@ -108,17 +112,19 @@ struct BackspaceDetectingTextField: UIViewRepresentable {
                 return true
             }
 
-            // For character additions, update the binding
-            let currentText = textField.text ?? ""
-            guard let stringRange = Range(range, in: currentText) else {
-                return false
-            }
-            let updatedText = currentText.replacingCharacters(in: stringRange, with: string)
+            // Filter to only allow numeric characters and take only the first one
+            let filtered = String(string.filter(\.isNumber).prefix(1))
 
-            // Update the binding for additions (this will trigger onChange in SwiftUI)
-            text = updatedText
+            DispatchQueue.main.async { [weak self] in
+                guard let self else { return }
+                if !filtered.isEmpty {
+                    // Update the binding with the real digit
+                    text = filtered
+                }
+            }
 
-            return true
+            // false: prevent direct display of text ; it will be updated with updateUIView using displayText
+            return false
         }
     }
 }
@@ -159,5 +165,24 @@ final class BackspaceTextField: UITextField {
     override var intrinsicContentSize: CGSize {
         CGSize(width: 0, height: 0)
     }
+
+    /// To put the cursor in the field after any symbol
+    override func becomeFirstResponder() -> Bool {
+        let result = super.becomeFirstResponder()
+
+        if result {
+            DispatchQueue.main.async { [weak self] in
+                guard let self else { return }
+
+                // Positionner le curseur à la fin du texte
+                if let text, !text.isEmpty {
+                    let endPosition = endOfDocument
+                    selectedTextRange = textRange(from: endPosition, to: endPosition)
+                }
+            }
+        }
+
+        return result
+    }
 }
 #endif

OUDS/Core/Components/Sources/Controls/PinCodeInput/Internal/PinCodeInputContainer.swift

@@ -15,6 +15,16 @@
 import OUDSTokensSemantic
 import SwiftUI
 
+// MARK: - Characters
+
+/// The symbol to use to hide the written digit
+let kPinCodeInputObfuscationCharacter = "●"
+
+/// The symbol to use as placeholder for digit to fill
+let kPinCodeInputPlaceholderCharacter = "-"
+
+// MARK: - Pin Code Input Container
+
 struct PinCodeInputContainer: View {
 
     // MARK: - Properties
@@ -33,6 +43,8 @@ struct PinCodeInputContainer: View {
     /// The digits written one by one by the user before being exposed through `value`
     @State private var digits: [String]
 
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+    @Environment(\.verticalSizeClass) private var verticalSizeClass
     @Environment(\.colorScheme) private var colorScheme
     @Environment(\.theme) private var theme
 
@@ -136,9 +148,36 @@ struct PinCodeInputContainer: View {
 
     // MARK: - Digits fields
 
+    /// Returns the string to display for a digit field:
+    /// - `kPinCodeInputPlaceholderCharacter` for placeholder on not focused input
+    /// - `kPinCodeInputObfuscationCharacter` for filled input
+    /// - empty string for input focused without text yet
+    ///
+    /// - Parameter index: The index of the field
+    /// - Returns: The character to display in the field
+    private func displayText(for index: Int) -> String {
+        if digits[index].isEmpty {
+            if focusedIndex == index {
+                ""
+            } else {
+                kPinCodeInputPlaceholderCharacter
+            }
+        } else {
+            kPinCodeInputObfuscationCharacter
+        }
+    }
+
     private func digitField(at index: Int) -> some View {
-        BackspaceDetectingTextField(
+        // Compute at this level the typography to use to be sure environement values for size class
+        // are retrieved in the suitable thread at the best moment
+        let uiFont = TypographyModifier.makeUIFont(
+            family: nil,
+            from: theme.fonts.bodyDefaultMedium,
+            isCompact: horizontalSizeClass == .compact || verticalSizeClass == .compact)
+        return BackspaceDetectingTextField(
             text: $digits[index],
+            displayText: .constant(displayText(for: index)),
+            font: uiFont,
             index: index,
             onBackspace: {
                 handleBackspace(at: index)

OUDS/Core/Components/Sources/_/ViewModifiers/TypographyModifiers/TypographyModifier.swift

@@ -117,6 +117,8 @@ struct TypographyModifier: ViewModifier {
         lineSpacing / 2
     }
 
+    // MARK: - View Modifier
+
     /// Applies to the `Content` the *adaptive font* (i.e. *font family*, *font weight* and *font size*)
     /// depending to the current `MultipleFontCompositeSemanticToken`.
     func body(content: Content) -> some View {
@@ -139,6 +141,39 @@ struct TypographyModifier: ViewModifier {
         .modifier(OnChangeSizeCategoryModifier(sizeCategory: sizeCategory))
     }
 
+    // MARK: - UIKit util
+
+    /// Génère une UIFont à partir des tokens sans dépendre de @Environment
+    /// - Parameters:
+    ///   - family: La famille de police personnalisée (optionnelle)
+    ///   - fontToken: Le token de police à utiliser
+    ///   - isCompact: Si true, utilise le mode compact, sinon le mode regular
+    ///   - sizeCategory: La catégorie de taille pour Dynamic Type
+    /// - Returns: La UIFont configurée
+    static func makeUIFont(
+        family: FontFamilyRawToken?,
+        from fontToken: MultipleFontCompositeSemanticToken,
+        isCompact: Bool,
+        sizeCategory: ContentSizeCategory = .medium) -> UIFont
+    {
+        let adaptiveFontToken = isCompact ? fontToken.compact : fontToken.regular
+
+        #if os(macOS)
+        let scaledFontSize = adaptiveFontToken.size
+        #else
+        let scaledFontSize = UIFontMetrics.default.scaledValue(for: adaptiveFontToken.size)
+        #endif
+
+        if let family {
+            let composedFontFamily = kApplePostScriptFontNames[orKey: PSFNMK(family, Font.Weight(weight: adaptiveFontToken.weight))]
+            if let customFont = UIFont(name: composedFontFamily, size: scaledFontSize) {
+                return customFont
+            }
+        }
+
+        return UIFont.systemFont(ofSize: scaledFontSize, weight: Font.Weight(weight: adaptiveFontToken.weight).nativeFontWeight)
+    }
+
     // MARK: - On Change Size Category Modifier
 
     private struct OnChangeSizeCategoryModifier: ViewModifier {

OUDS/Core/Components/Tests/ContentDisplay/BulletListItem+Tests.swift

@@ -14,7 +14,7 @@
 @testable import OUDSComponents
 import Testing
 
-struct BulletListItemTests {
+struct OUDSBulletListItemTests {
 
     // MARK: - Latin alphabet, without prior label
 

OUDS/Core/Components/Tests/Controls/PinCodeInput/OUDSPinCodeInputTests.swift

@@ -12,17 +12,23 @@
 //
 
 #if !os(watchOS) && !os(macOS)
-import OUDSComponents
+@testable import OUDSComponents
 import Testing
 
 /// Tests some API for `OUDSPinCodeInput`
 struct OUDSPinCodeInputTests {
 
     /// Test the raw values for the length of the component
-    func pinCodeInputLengthValues() {
+    @Test func pinCodeInputLengthValues() {
         #expect(OUDSPinCodeInput.Length.four.rawValue == 4)
         #expect(OUDSPinCodeInput.Length.six.rawValue == 6)
         #expect(OUDSPinCodeInput.Length.eight.rawValue == 8)
     }
+
+    /// Test the string values used for obfuscation and placeholders
+    @Test func pinCodeInputPredefinedSymbols() {
+        #expect(kPinCodeInputObfuscationCharacter == "●")
+        #expect(kPinCodeInputPlaceholderCharacter == "-")
+    }
 }
 #endif