XPEHO UI

This is the UI for the XPEHO projects in SwiftUI.

Import the package

In Xcode click on File > Add Package Dependencies....

In the search bar at the top right corner, type the link https://github.com/XPEHO/xpeho_ui_swift and press Enter key.

At the bottom right corner of the modal, click on Add Package button.

Make sure to add this line at the start of your app to load the fonts used for the components:

import xpeho_ui

init() {
  Fonts.registerFonts()
}

Use the package

You can use the package fonts in your app using :

import xpeho_ui

Text("text").font(.rubik(.bold, size: 18))
Text("text").font(.raleway(.bold, size: 18))
Text("text").font(.roboto(.bold, size: 18))

As you can see the possible fonts are Rubik, Raleway and Roboto from Google Fonts.

Moreover, you can used the images of the design using :

import xpeho_ui

Assets.loadImage(named: "ImageName")

The possible images can be viewed in the package's Assets.xcassets and their names are as follows:

• 3dots
• Account
• AddPlus
• Anchor
• Arrow-down
• Arrow-left
• Arrow-right
• Arrow-up
• Birthday
• Boat
• Briefcase
• BriefcaseYAKI
• BurgerMenu
• Calendar
• Check
• Chevron-down
• Chevron-left
• Chevron-right
• Chevron-up
• ContactFill
• CrossClose
• Edit
• Eye
• Filter
• Gouvernail
• Newsletter
• Placeholder
• PlaneDeparture
• QVST
• Receipt
• Search
• Statistic
• Teams
• Validated

Finally, you can use the colors of the design using the constants directly, they are define in Utils.swift and the list is :

• XPEHO_COLOR :
• XPEHO_DARK_COLOR :
• GREEN_DARK_COLOR :
• RED_INFO_COLOR :
• DISABLED_COLOR :
• CONTENT_COLOR :
• BACKGROUND_COLOR :
• GRAY_LIGHT_COLOR :

Components

ClickyButton

Usage

import xpeho_ui

ClickyButton(
    label: String,
    size: Float,
    horizontalPadding: Float,
    verticalPadding: Float,
    backgroundColor: Color,
    labelColor: Color,
    enabled: Bool,
    onPress: () -> Void
)

InputText

Usage

import xpeho_ui

InputText(
    label: String,
    passwordSwitcherIcon: AnyView,
    defaultInput: String,
    labelSize: Float,
    inputSize: Float,
    labelColor: Color,
    backgroundColor: Color,
    inputColor: Color,
    password: Bool,
    submitLabel: SubmitLabel,
    onSubmit: () -> Void,
    onInput: (String) -> Void,
    isReadOnly: Bool
)

ChoiceSelector

Usage

import xpeho_ui

ChoiceSelector(
    label: String,
    choicesAvailable: [String],
    defaultSelectedChoice: String,
    size: Float,
    backgroundColor: Color,
    choiceColor: Color,
    checkIconColor: Color,
    separatorColor: Color,
    onPress: (String) -> Void
)

CollapsableCard

Usage

import xpeho_ui

CollapsableCard(
    label: String,
    headTag: TagPill?,
    tags: [TagPill],
    button: ClickyButton?,
    icon: AnyView,
    openArrowIcon: AnyView,
    closeArrowIcon: AnyView,
    size: Float,
    labelColor: Color,
    backgroundColor: Color,
    collapsable: Bool,
    defaultOpen: Bool
)

FilePreviewButton

Usage

import xpeho_ui

FilePreviewButton(
    labelStart: String,
    labelEnd: String,
    imagePreview: AnyView,
    tags: [TagPill],
    arrowIcon: AnyView,
    height: Float,
    labelSize: Float,
    backgroundColor: Color,
    labelColor: Color,
    enabled: Bool,
    labelPosition: LabelPosition,
    onPress: () -> Void
)

TagPill

Usage

import xpeho_ui

TagPill(
    label: String,
    size: Float,
    backgroundColor: Color,
    labelColor: Color
)

Edit the package

• Clone the repository using git clone
• Launch the folder in Xcode
• Make your changes
• Send a Pull Request

Deployment of the package

The packages on github repositories are automatically read by the swift package manager.

The only thing you need to do is to create a new release on the repository following the GitHub documentation.

Testing the package

The components are tested in xpeho_ui_swift_test repository.