Use of hmlongco/Factory Swift library to inject envionment variables

[pylapp]

Context

Some projects use the hmlongco/Factory Swift library to manage their dependency injections.
In strong legacy codebases, some users want to manage some objects like OUDSTheme through it instead of using the OUDSThemeableView

This was anticipable because this profile of users was spotted but until now never considered.

Solution

• Investigate this library, in design system toolbox check if it can be used and inject the theme.
• If it's ok, update documentation with code samples.
• Otherwise make adjustements and update documentation.

Resources

• hmlogco/Factory

Contact

• Thomas MARTIN thomas2.martin@orange.com, Orange et Moi (France) lead tech, @Orange33320

[ludovic35]

Solution based on hmlongco/Factory available here

1. Make preferred accessible inn UIKit and SwiftUi using Factory
   1.1. Add the preferred theme in Factory

/// Inject the preferred theme in the `Factory` that can be access later in `Uikit` elements (i.e. ViewController, UIView, ..)
/// and in the `SwiftUI` views via environment.
///
/// This must be created once in Uikit project using the preferred theme (here sosh theme is used)
extension Container {
    var oudsTheme: Factory<OUDSTheme> {
        Factory(self) { SoshTheme() }
    }
}

1.2. Retrieve theme in Factor and add it in the SwiftUI environment

/// SwiftUI Modifier created in UiKit project based on `OUDS` and using `Factory` to inject the
/// right theme into `SwiftUi` environment.
struct OUDSThemeableModifier: ViewModifier {
    
    // Inject here the oudsTheme added in factory before
    @Injected(\.oudsTheme) private var oudsTheme
    
    // Use OUDSThemeableView to set oudsTheme in the SwiftUI environment
    func body(content: Content) -> some View {
        OUDSThemeableView(theme: oudsTheme) { content }
    }
}

extension View {
    /// Helper must be called on the root swiftui view initialized from UiKit
    func oudsThemeable() -> some View {
        self.modifier(OUDSThemeableModifier())
    }
}

2. How to use the injected theme
3. 2.1. Use OUDSTheme into an UiKit.ViewController

/// In this example, the view controller contains a `UILabel` with content need to have
/// the content color based on ouds token define in `oudsTheme`.
///
/// The oudsTheme is retrieve from `Factory` injected before. So all tokens can be access here.
class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    let colorScheme: ColorScheme = UITraitCollection.current.userInterfaceStyle == .dark ? .dark : .light
    
    // Inject here the oudsTheme added in factory before
    @Injected(\.oudsTheme) private var theme

    override func viewDidLoad() {
        super.viewDidLoad()
        
        /// Get the color content value form ouds theme according to the `colorScheme`
        label.textColor = theme.colors.contentDefault.color(for: colorScheme).uiColor
    }
}

2.2. Call a SwiftUI View using OUDS from UiKit.ViewController

/// In this example, the view conrolleur contains a button. When it is clicked a `SwiftUI`view
/// is presented. To ensure the theme is set in the `SwiftUI` environment, use the
/// `OUDSThemeableModifier` modifier that will retrieve the theme "injected" into the `Factory`.
///
/// To simplify the code, the `View.oudsThemeable` helper is preferred.
class ViewController: UIViewController {

    @IBOutlet weak var button: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func onClicked(_ sender: Any) {
        let view = SubOptionsView().oudsThemeable()
        let vc = UIHostingController(rootView: view)
        self.navigationController?.pushViewController(vc, animated: true)
    }
}


struct SubOptionsView: View {
    
    @State var mail: String = ""
    @State var address: String = ""
    @State var phoneNumber: String = ""
    
    // Get theme form environment
    @Environment(\.theme) var theme: OUDSTheme
    
    var body: some View {
        VStack(spacing: theme.spaces.rowGapMedium) {
            OUDSTextInput(label: "Email", text: $mail)
            OUDSTextInput(label: "Email", text: $address)
            OUDSTextInput(label: "Email", text: $phoneNumber)
            
            OUDSButton(text: "Validate") { }
        }
    }
}