HypeUI

Requirements

• iOS 12.0+
• XCode 13.0+
• Swift 5.0+

Swift Package Manager

Swift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

Xcode 13+ is required to build HypeUI using Swift Package Manager.

To integrate HypeUI into your Xcode project using Swift Package Manager, add it to the dependencies value of your Package.swift:

dependencies: [
    .package(url: "https://github.com/hyperconnect/HypeUI", .upToNextMajor(from: "0.3.0"))
]

View Modifier

name	Description
setHContentHugging	Adjusts the priority for a view to resist growing beyond its intrinsic size horizontally.
setVContentHugging	Adjusts the priority for a view to resist growing beyond its intrinsic size vertically.
setHContentCompressionResistance	Adjusts the priority for a view to resist shrinking below its intrinsic size horizontally.
setVContentCompressionResistance	Adjusts the priority for a view to resist shrinking below its intrinsic size vertically.
makeRatio	Sets the aspect ratio constraint for the view’s size.
cornerRadius	Applies a corner radius to the view to create rounded corners.
border	Adds a border with specified color and width to the view.
background	Sets the background color of the view.
makeContentMode	Sets the content mode of the view.
frame	Positions the view within a specified frame size.
padding	Adds padding around specific edges of the view.
allowsHitTesting	Enables or disables the view’s interaction with touch events.
masksToBounds	Clips the view’s sublayers to its boundaries.
accessibilityIdentifier	Assigns an identifier used to find this view in tests.
overlay	Places specified views in front of the view.
background	Layers the views that you specify behind this view.
center	Centers the view within a new parent view.
tint	Applies a tint color to the view.
opacity	Sets the transparency level of the view.
scaleEffect	Scales the view by specified factors along the x and y axes.
rotationEffect	Rotates the view by a specified angle around a given anchor point.

Text Modifier

name	Description
font	Sets the font of the text.
foregroundColor	Applies a foreground color to the text.
textAligned	Sets the alignment of the text within its container.
lineLimit	Specifies the maximum number of lines the text can span.
lineBreakMode	Defines how text wraps when it reaches the edge of its container.
adjustFontSize	Adjusts the font size of the text to fit its width.
minimumScaleFactor	Sets the smallest multiplier for text size reduction to fit the width.
preferredMaxLayoutWidth	Sets the preferred maximum width for the Text object and enables method chaining.
baselineAdjusted	Applies a baseline adjustment to the Text object and enables method chaining.

Stack Modifier

name	Description
distributed	Modify stack’s distribution layout.

ScrollView Modifier

name	Description
bounces	Modify scroll view bounces.
isPagingEnabled	Modify scroll view paging enabled.
isScrollEnabled	Modify scroll view enabled.

HStack

HStack(alinement: .center, spacing: 4) {
    Image(Asset.icStar.image)
        .frame(width: 12, height: 12)
    Text()
        .foregroundColor(UIColor.black)
        .font(UIFont.systemFont(ofSize: 14, weight: .regular))
    Spacer()
}

VStack

VStack(spacing: 8) {
    Text()
        .foregroundColor(UIColor.black)
        .font(UIFont.systemFont(ofSize: 14, weight: .regular))
    Spacer()
}

ZStack

ZStack {
    HStack(alinement: .center, spacing: 4) {
        Image(Asset.icStar.image)
            .frame(width: 12, height: 12)
        Text()
            .foregroundColor(UIColor.black)
            .font(UIFont.systemFont(ofSize: 14, weight: .regular))
        Spacer()
    }
    VStack {
        Text()
            .foregroundColor(UIColor.black)
            .font(UIFont.systemFont(ofSize: 14, weight: .regular))
        Spacer()
    }
}

Button

Button(action: { // DO SOMETHING ex) reactor action, closure }) {
    HStack(alignment: .center, spacing: 5.0) {
        Image("cart")
            .padding(.leading, 10.0)
        Text("Add to Cart")
            .foregroundColor(.black)
            .padding(.all, 10.0)
    }
}
.background(Color.gray)
.cornerRadius(5)

Text

Text("✨")
    .foregroundColor(UIColor.black)
    .font(UIFont.systemFont(ofSize: 14, weight: .regular))
    .textAligned(.center)
    .background(.white)
    .cornerRadius(16)

Image

Image(Resource.Profile.placeholderImage)
    .frame(width: 48, height: 48)
    .cornerRadius(24)

ScrollView

// MARK: Example
ScrollView(.vertical, showsIndicators: false) {
    VStack(alignment: .fill) {
        Image(image: Asset.imgPopupPrivateCall.image)
            .makeRatio(0.46106)
        Spacer()
            .frame(height: 24)
        VStack {
            viewModel.messages.map { message in
                HStack(alignment: .top, spacing: 8) {
                    Text("•")
                        .font(UIFont.systemFont(ofSize: 14, weight: .regular))
                        .foregroundColor(.Palette.gray04)
                        .frame(width: 6)
                    Text(message)
                        .font(UIFont.systemFont(ofSize: 14, weight: .regular))
                        .foregroundColor(.Palette.gray04)
                        .lineLimit(2)
                        .lineBreakMode(.byCharWrapping)
                    Spacer()
                        .frame(width: 5)
                }
                .padding(.vertical, 8)
            }
        }
        Spacer()
            .frame(height: 16)
    }
}

Spacer

Spacer()
    .frame(width: 10)
Spacer()
    .frame(height: 20)

LinearGradient

ProfileView()
    .background(
        LinearGradient(
            gradient: Gradient(
                stops: [
                    Stop(color: UIColor.black, location: 1.0),
                    Stop(color: UIColor.black, location: 0.2),
                    Stop(color: UIColor.black, location: 0.0)
                ]),
            startPoint: .top,
            endPoint: .bottom
        )
    )

ViewBuildable - Customize UI, Make reusable component and Design System by confirming ViewBuildable protocol.

struct ProfileView: ViewBuildable {
    @Behavior var country: String
    @Behavior var name: String

    func build() -> UIView {
        VStack {
            HStack(alignment: .center, spacing: 12) {
                Text("")
                    .linked($country, keyPath: \.text)
                    .font(UIFont.systemFont(ofSize: 20, weight: .regular))
                    .accessibilityIdentifier("country")
                Text("")
                    .linked($name, keyPath: \.text)
                    .font(UIFont.systemFont(ofSize: 20, weight: .regular))
                    .accessibilityIdentifier("name")
            }
        }
    }
}

Main Contributors

cruz@hpcnt.com xeon@hpcnt.com owen.j@hpcnt.com dough@hpcnt.com

Dependencies

• RxSwift
• RxCocoa
• SnapKit