feat: [HL-19] Add and configure FormTextField

[ahmednasr8898]

Description:
1- add UITextField Style in extension.
2- add FormTextField Reusable view.

[ahmdyasser]

You can use this handy extension to load nibs

extension UIView {
    class func loadNib<T: UIView>() -> T {
      return Bundle(for: T.self).loadNibNamed(String(describing: T.self), owner: nil, options: nil)!.first as! T
    }
}

and your code will be like this

let view: UIView = .loadNib()

⚠️ Just be careful, for this extension to work, you must name the XIB file exactly like the view class name.

Also an improvement for this code, you can create a factory to create the view for you.

class FormTextFieldFactory {
  func createView(title: String) -> FormTextField {
    var view: FormTextField = .loadNib
    view.setTitle(title) // just an example
    return view
  }
}

let factory = FormTextFieldFactory()
factory.createView(title: "Awesome") // FormTextField view

[ahmednasr8898]

okay, i will read more about factory and apply on this view.
but i have a question! if i don't using this view by programmatically just using by outlet in this way factory is useful ???

[ahmdyasser]

Factory pattern makes creating objects easier for you, you pass the changing values to the factory and it hides from you all the mess like loading from nib in our case.
Check this amazing resource https://refactoring.guru/design-patterns/factory-comparison

[ahmdmhasn]

It's against the approach of using nib files in the project. The factory would be great if we're following programmatic views.

[ahmdyasser]

Why changed from private(set) to private?
How will you test the outlets if they are private?

[ahmednasr8898]

even don't access the outlets from view controller just working with available functions.

[ahmdyasser]

Yes but we need to access them for testing.

[ahmdmhasn]

The branch name should follow snack-case.

Good job 🙏🏼

[ahmdmhasn]

We don't use this pattern. Each view should have a reusable identifier.

// MARK: UIView+Reusable Identifier
extension UIView { 
    static var reusableIdentifier: String { 
        String("\(Self.self)")
    }
}

[ahmdmhasn]

Suggested change

	//
	extension FormTextField {
	//
	extension FormTextField {

[ahmdmhasn]

Suggested change

	//MARK: - feat: [HL-4] Add UI label styling new design
	// TODO: - feat: [HL-4] Add UI label styling new design

[ahmdmhasn]

Suggested change

	// waiting for design of error label style
	// Waiting for the design of the error label style

[ahmdmhasn]

Suggested change

	// MARK: - Outlets
	//
	// MARK: Outlets

We don't usually use MARK with separator inside the context

[ahmdmhasn]

?

[ahmednasr8898]

To remove the extra edges in text field.

[ahmdmhasn]

This is a workaround we may not need. Updating the textField borderStyle to .none would be enough IMHO.

[ahmdmhasn]

We might need to remove this based on the discussion above

[ahmdmhasn]

Why adding the view -- view -- stack view?
The inner view is not needed

[ahmdmhasn]

Bottom constraint is missing

[ahmdmhasn]

Suggested change

	<constraint firstItem="kpw-hB-vQE" firstAttribute="top" secondItem="f0b-KT-Zc1" secondAttribute="top" constant="12" id="WA4-Rw-rgb"/>
	<constraint firstItem="kpw-hB-vQE" firstAttribute="top" secondItem="f0b-KT-Zc1" secondAttribute="top" id="WA4-Rw-rgb"/>

Let's add the reusable views without spacing and let the parents do that if needed.

[ahmdmhasn]

Installing swift lint is mandatory, the code should not compile.

[ahmdmhasn]

TODO for updating the colors here as well

[ahmdmhasn]

Suggested change

	//
	// UIView+ReusableIdentifier.swift
	// Healthy
	//
	// Created by Ahmed Nasr on 25/05/2023.
	//
	import UIKit
	// MARK: UIView+Reusable Identifier
	import UIKit
	// MARK: UIView+Reusable Identifier

[ahmdmhasn]

Suggested change

	func setError(_ errorText: String) {
	self.errorLabel.text = ""
	self.errorLabel.text = errorText
	}
	func setError(_ errorText: String?) {
	self.errorLabel.text = errorText
	}

This should be computed property as well.

[ahmdmhasn]

Suggested change

	import UIKit
	import UIKit

[ahmdmhasn]

Suggested change

	var title: String = "" {
	didSet {
	self.titleLabel.text = title
	}
	}
	var placeholder: String = "" {
	didSet {
	self.inputTextField.placeholder = placeholder
	}
	}
	var keyboardType: UIKeyboardType = .default {
	didSet {
	self.inputTextField.keyboardType = keyboardType
	}
	}
	var error: String = "" {
	didSet {
	self.errorLabel.text = error
	}
	}
	var title: String = "" {
	didSet {
	self.titleLabel.text = title
	}
	}
	var placeholder: String = "" {
	didSet {
	self.inputTextField.placeholder = placeholder
	}
	}
	var keyboardType: UIKeyboardType = .default {
	didSet {
	self.inputTextField.keyboardType = keyboardType
	}
	}
	var error: String = "" {
	didSet {
	self.errorLabel.text = error
	}
	}

• All of these should be moved to a separate extension.
• They can act as setters/getters only without having any value to have only on source of truth (The views)

[ahmdmhasn]

Suggested change

	private func bindTextFieldChanges() {
	inputTextField.addTarget(self, action: #selector(textEditingChanged), for: .editingChanged)
	}
	private func configureTextFieldObserver() {
	inputTextField.addTarget(self, action: #selector(textEditingChanged), for: .editingChanged)
	}

[ahmdmhasn]

Suggested change

	// MARK: Internal Handlers
	// MARK: Handlers

We have plans to apply modularity in the app, we mostly will forget to update this title to Public instead of Internal. This is why we may try to avoid namings like this.

[ahmdmhasn]

@ahmednasr8898 Hello 👀

[ahmdmhasn]

Suggested change

	// MARK: Getters & Setters properties
	extension FormTextField {
	var title: String {
	get {
	return self.titleLabel.text ?? ""
	}
	set {
	self.titleLabel.text = newValue
	}
	}
	var placeholder: String {
	get {
	return self.inputTextField.placeholder ?? ""
	}
	set {
	self.inputTextField.placeholder = newValue
	}
	}
	var keyboardType: UIKeyboardType {
	get {
	return self.inputTextField.keyboardType
	}
	set {
	self.inputTextField.keyboardType = newValue
	}
	}
	var error: String {
	get {
	return self.errorLabel.text ?? ""
	}
	set {
	self.errorLabel.text = newValue
	}
	}
	}
	// MARK: Properties
	extension FormTextField {
	var title: String {
	get {
	return self.titleLabel.text ?? ""
	}
	set {
	self.titleLabel.text = newValue
	}
	}
	var placeholder: String {
	get {
	return self.inputTextField.placeholder ?? ""
	}
	set {
	self.inputTextField.placeholder = newValue
	}
	}
	var keyboardType: UIKeyboardType {
	get {
	return self.inputTextField.keyboardType
	}
	set {
	self.inputTextField.keyboardType = newValue
	}
	}
	var error: String {
	get {
	return self.errorLabel.text ?? ""
	}
	set {
	self.errorLabel.text = newValue
	}
	}
	}

[ahmdmhasn]

Merging the ticket to unblock the team. TODOs will be addressed in https://motoon-eg.atlassian.net/browse/HL-46.

@ahmednasr8898 Please acknowledge the message and LMK if you have any questions.