Swiftpack.co - kiwicom/orbit-swiftui as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by kiwicom.
kiwicom/orbit-swiftui v0.8.2
Orbit design system implemented in SwiftUI for iOS.
⭐️ 6
🕓 2 days ago
iOS
.package(url: "https://github.com/kiwicom/orbit-swiftui.git", from: "v0.8.2")

Kiwi.com library swiftui-version swift-version swift-package-manager

Orbit is a SwiftUI component library which provides developers the easiest possible way of building Kiwi.com’s products.

Orbit Mission

Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.

Orbit is an open-source design system created for specific needs of Kiwi.com and together with that – for needs of travel projects.

This library allows you to integrate the Orbit design system into your iOS SwiftUI project.

Requirements

  • iOS 13
  • Xcode 13
  • Swift Package Manager

Installation

Add Orbit package to your project by adding the package dependency:

.package(name: "Orbit", url: "https://github.com/kiwicom/orbit-swiftui.git", .upToNextMajor(from: "0.8.0")),

Usage

  1. Import fonts that are used in orbit-components.
Font.registerOrbitFonts()
  1. Include any of our components in your project and use them.
HStack {
    Text("Hello Orbit!")
    Button("Continue")
}

You can also check the OrbitStorybookComponentsScreen preview to see all supported components.

File structure and naming conventions

File structure and component names reflect the Orbit design system structure.

As some Orbit components already exist in standard SwiftUI library (Text for example), Orbit components shadows them. In order to access standard component, a SwifUI. prefix can be used.

Components

To use Orbit components in SwiftUI, import the Orbit library and use the components using their matching Orbit name.

import Orbit

...

VStack(spacing: .medium) {
    Heading("Messages", style: .title2)
    Illustration(.mailbox)
    Text("...<strong>...</strong>...<a href="...">here</a>.")
    Button("Continue", style: .secondary)
}

Foundation

Most Foundation types and values are accessed using extensions on related types.

Spacing

Use Spacing enum with CGFloat extensions to access values.

VStack(spacing: .medium) {
    ...
}
.padding(.large)

Colors

Use Color and UIColor extensions to access values.

.foregroundColor(.cloudDarker)

Borders

Use BorderRadius and BorderWidth enums.

Typography

Use Font and UIFont extensions. Orbit components use the Orbit font automatically.

GitHub

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

Dependencies

Release Notes

4 hours ago

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