Swiftpack.co - hyperconnect/HypeUI as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by hyperconnect.
hyperconnect/HypeUI 0.3.0
🌺 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit
⭐️ 98
πŸ•“ 2 weeks ago
iOS
.package(url: "https://github.com/hyperconnect/HypeUI.git", from: "0.3.0")

HypeUI

πŸš€ HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit Want to enjoy SwiftUI syntax with UIKit? It's time to use HypeUI 😊

Awesome Swift

Why to use HypeUI?
πŸ“± Support iOS 12+
✨ HypeUI is compatible with UIKit based project using SwiftUI style syntax
πŸ„β€β™‚οΈ Reduce UI & Autolayout codes more than 30%
⛳️ Provide UI binding extension with RxSwift and RxCocoa
πŸ¦„ Easy to use!
✈️ Improve readability and intuitiveness of complex layouts
🀩 Have a blast
β›· Customize reusable component, design system
❄️ Test with accessibility Identifier

Contents

Requirements

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

Installation

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"))
]

CocoaPod

The preferred installation method is with CocoaPods. Add the following to your Podfile:

pod 'HypeUI'

Supported Features

Supported Features
HStack βœ…
VStack βœ…
ZStack βœ…
Button βœ…
Text βœ…
Image βœ…
ScrollView βœ…
Behavior βœ…
Spacer βœ…
LinearGradient βœ…
AlignmentView βœ…
ViewBuildable βœ…
View Modifier βœ…
Text Modifier βœ…
Stack Modifier βœ…
Image Modifier βœ…
ScrollView Modifier βœ…

View Modifier

name Description
setHContentHugging Sets the priority with which a view resists being made larger than its intrinsic size.
setVContentHugging Sets the priority with which a view resists being made larger than its intrinsic size.
setHContentCompressionResistance Sets the priority with which a view resists being made smaller than its intrinsic size.
setVContentCompressionResistance Sets the priority with which a view resists being made smaller than its intrinsic size.
makeRatio Modify the ratio of the size of the view.
cornerRadius Modify corner radius.
border Modify border style.
background Modifiy background color.
makeContentMode Modify content mode.
frame Positions this view within an invisible frame with the specified size.
padding Adds an equal padding amount to specific edges of this view.
allowsHitTesting Configures whether this view participates in hit test operations.
masksToBounds Setting sublayers are clipped to the layer’s bounds.
accessibilityIdentifier Uses the string you specify to identify the view.
overlay Layers the views that you specify in front of this view.
background Layers the views that you specify behind this view.

Text Modifier

name Description
font Modify text font.
foregroundColor Modify foreground color.
textAligned Modify text alignment
lineLimit The maximum number of lines that text can occupy in a view.
lineBreakMode Modify line break mode.
adjustFontSize Modify adjustsfontsize to fit width
minimumScaleFactor Modify minimum scale factor.

Stack Modifier

name Description
distributed Modify stack's distribution layout.

Image Modifier

name Description
tintColor Modify tint color.

ScrollView Modifier

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

Usage

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)
    }
}

@Behavior - It's seems like SwiftUI's @State using DynamicLinkable 😎

@Behavior var isLive: Bool = false
@Behavior var username: String? = nil
@Behavior var profileImageURL: URL? = nil

// MARK Example
final class SearchHostHistoryViewCell: UICollectionViewCell {
    @Behavior var isLive: Bool = false
    @Behavior var username: String? = nil
    @Behavior var profileImageURL: URL? = nil

    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubviewWithFit(
            ZStack {
                VStack(alignment: .center, spacing: 8) {
                    Image(Resource.Profile.placeholderImage)
                        .linked($profileImageURL.flatMapLatest { $0?.getImage(failover: Resource.Profile.placeholderImage) ?? .just(Resource.Profile.placeholderImage) }, keyPath: \.image)
                        .makeContentMode(.scaleAspectFill)
                        .frame(width: 48, height: 48)
                        .cornerRadius(24)
                        .background(.Palette.gray05)
                    Text("")
                        .linked($username, keyPath: \.text)
                        .textAligned(.center)
                        .foregroundColor(.darkModeSupporting(.Palette.gray01, .Palette.dkGray01))
                        .font(UIFont.systemFont(ofSize: 10, weight: .regular))
                        .frame(height: 12)
                }.padding(UIEdgeInsets(top: 12, left: 0, bottom: 4, right: 0))
                VStack(alignment: .center) {
                    Spacer()
                    Text("LIVE")
                        .foregroundColor(.Palette.white)
                        .font(UIFont.systemFont(ofSize: 8, weight: .bold))
                        .padding(UIEdgeInsets(top: 2, left: 4, bottom: 2, right: 4))
                        .background(.Palette.red)
                        .cornerRadius(4)
                        .linked($isLive.not(), keyPath: \.isHidden)
                    Spacer()
                        .frame(height: 20)
                }
            }
        )
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

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

[email protected] [email protected] [email protected] [email protected]

Dependencies

GitHub

link
Stars: 98
Last commit: 2 weeks ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

2 weeks ago

πŸ₯³ What's Changed

  • Exclude AppCode project files not to sync in git(.gitignore) in #3 by @sangkwon
  • Support LinearGradient in #4 by @cruisediary
  • Add New Modifiers in #5 by @cruisediary

New Feature

  • UnitPoint
  • Gradient
  • Gradient.Stop
  • GradientView
  • LinearGradient
  • Alignment
  • AlignmentView

View Modifier

  • overlay
  • background

ScrollViewView Modifier

  • bounces
  • isPagingEnabled
  • isScrollEnabled

New Contributor

  • @sangkwon #2

Full ChangeLog: https://github.com/hyperconnect/HypeUI/compare/0.2.0...0.3.0

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics