Custom Components

Create Custom Components and Craft Your Own Library

What is a Custom Component?

When starting a new project, developers often create their own components. This approach simplifies maintenance and enhances the manageability of our codebase. For example, when a design change is needed for the buttons, it allows us to update a single component's style without having to adjust each button on every screen individually.

Creating custom components also makes the code more readable. Typically, incorporating all components on a screen results in lengthy and complex code. To improve readability, we segment the screen's code by creating new components.

That's why Monday Hero enables you to create custom components! You can select any part of the screen and simply click 'Create Custom Component' to begin. Monday Hero provides the freedom to create any component that’s needed.

In Monday Hero, custom components consist of system components. For instance, a custom component might be a section of the screen that includes buttons, texts, and text fields, making it more readable and reusable.

Monday Hero users generally create two types of components in their projects:

1. Compact Custom Component: This type of component is used to create a new style for a system component, such as a button. For example, you might want to create a 'Primary Button' to maintain design consistency across various screens. These components are standalone and do not contain other components within them, like a button that does not include a text field inside. Thus, they are termed compact components.

   • In this example, the login and signup buttons are named PrimaryButton. The component code is created separately, allowing for reuse. This component code is also referenced in the page code. Below is the autogenerated code for it:

Reusable Components

PrimaryButton.Swift

//PrimaryButton.swift
import UIKit

class PrimaryButton: UIButton {

	// MARK: - Initializers
	override init(frame: CGRect) {
		super.init(frame: frame)
		initialize()
	}

	required init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
		initialize()
	}

	func initialize() {
		applyDefaultStyle()
	}

	// MARK: - Styling
	func applyDefaultStyle() {
		self.layer.cornerRadius = 10
		self.layer.masksToBounds =  true
		self.backgroundColor = UIColor.cerulean_64
		self.setTitleColor(UIColor.daisy, for: .normal)
		self.titleLabel?.font = UIFont.textStyle2
		self.contentHorizontalAlignment = .leading 
		self.contentEdgeInsets = UIEdgeInsets(top: 12, left: 138 , bottom: 12, right: 138)

	}

	func set(title: String){
		self.setTitle(title, for: .normal)
	}

SignupPage.Swift

import UIKit

class SignupPage: UIViewController {

	@IBOutlet private weak var signupButton: PrimaryButton!

	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}

}

extension SignUpViewController {
	private func setupViews() {

		signupButton.set(title: NSLocalizedString("signup", comment: ""))

	}

	private func setupLayout() {
		//Constraints are defined in Storyboard file.
	}

}

1. Custom Component Group: This type of component is a part of any screen and is designed to make the code shorter so it's more readable. It may include compact custom components or any other type of component within it.

Custom Component Code of a Screen

How to Create a Custom Component

1. Navigate to the Screen: Go to the screen from which you want to create a component.

2. Highlight Layers: Highlight the layers on the screen that you wish to convert into a component.

3. Select the Component Type: You can select the component type in three different ways:

Use the smart suggestions provided for component types. If the suggestions do not meet your needs, click 'More' to view the complete list of available components.

Right-click and select the component type from the menu.

Right-click and Select The Component Type

Alternatively, click the components icon and select 'Create New Component'. Then, choose the component type from the list.

Components Icon

Component List

1. Set properties: Once you select the component type, a new screen will appear on the left.

   • For each layer, select the necessary properties such as title, image, or background image. These options will appear in a list.

   • Properties will be automatically guessed by Monday Hero, but remember to adjust them if they don’t match the correct properties.

   Note: Some components do not have any properties. Here is a widget that does not have property selection:

Widget

1. Name Your Component: You will name your component during this step. This name is used to reference your component in your code, making it important to choose a name that you prefer.

2. Finish: Click 'Finish' to complete the creation process. Once finished, you will see a confirmation message indicating that the component was created successfully.

Component Created Successfully

Once the component is created successfully, you'll be able to see its code, and it will be ready for reuse.

Component Screen

All the custom components that you have created in your project will be visible in your custom component library.

Custom Component Library

Congrats! It's done.

In Swift, you can easily reuse custom components created in Monday Hero. Proceed to the next page to learn how to utilize these custom components on new pages on Monday Hero.