OSKUIKit - OSkey supplemental UI kit for SwitfUI

Copyright (c) 2022 OSkey SAS. MIT License.

The OSkey app (not yet publicly released) uses SwiftUI, and is supplemented by additional UI elements provided in this UI kit.

Content

• OSKUICarousel is a stylable carousel, perfect for scrolling though photos, cards, ...
• OSKUIListTile is a stylable list tile suitable for list row element

Supported platforms and minimal versions

Adding to your project

Swift Package Manager

Open Xcode, go to File -> Swift Packages -> Add Package Dependency and enter https://github.com/oskey-org/swift-ui-carousel-oskey-org.git.

You can also add ACarousel as a dependency to your Package.swift:

dependencies: [ .package(url: "https://github.com/oskey-org/swift-ui-kit-oskey-org.git", from: "1.0.0") ]

OSKUICarousel

Get started

Below is an example of sliding cards, with a person photo and it's name below.

import SwiftUI
import OSKUICarousel

struct ColorItem: Identifiable {
    let name: String
    let color: Color

    var id: String { return name }
}

struct ContentView: View {
    let colors = [
        ColorItem(name: "Red", color: .red),
        ColorItem(name: "Green", color: .green),
        ColorItem(name: "Blue", color: .blue),
    ]

    @State private var currentIndex = 0

    var body: some View {
      OSKUICarousel(
          colors,
          index: $currentIndex,
          spacing: 16,
          headspace: 16,
          sidesScaling: 0.8,
          isWrap: false,
          autoScroll: .active(5),
          allowSwipe: true,
          proxy: proxy
      ) { color in
          VStack {
              color.color
                  .aspectRatio(16/9, contentMode: .fit)
              Text("**Color:** \(color.name)")
                  .padding()
          }
          .background(.white)
          .clipShape(RoundedRectangle(cornerRadius: 8))
          .shadow(color: .gray, radius: 2, x: 1, y: 1)
      }
      .padding(.vertical)
    }
}

Styling your carousels

Styling the carousel is done by implementing the OSKUICarouselStyle protocol:

class OSKUIMyCarouselStyle: OSKUICarouselStyle {
    func makeBody(configuration: OSKUIConfiguration) -> some View {
        VStack(spacing: 16) {
            configuration.content

            HStack(spacing: 4) {
                ForEach(configuration.dots) { dot in
                    Image(systemName: "circle.fill")
                        .resizable()
                        .frame(width: dot.isActiveItem ? 8 : 4, height: dot.isActiveItem ? 8 : 4, alignment: .center)
                        .scaledToFit()
                        .foregroundColor(dot.isActiveItem ? .red : .white)
                }
            }
            .padding(8)
            .frame(maxWidth: configuration.itemMaxWidth)
            .background(Color.red.opacity(0.13))
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .scaledToFit()
        }
        .padding(.vertical)
        .background(Color.blue.opacity(0.13))
    }
}

Then, in the above example, add the modifier .oskuiCarouselStyle(OSKUIMyCarouselStyle()):

[...]

struct ContentView: View {
    let colors = [
        ColorItem(name: "Red", color: .red),
        ColorItem(name: "Green", color: .green),
        ColorItem(name: "Blue", color: .blue),
    ]

    @State private var currentIndex = 0

    var body: some View {
      OSKUICarousel(
          colors,
          index: $currentIndex,
          spacing: 16,
          headspace: 16,
          sidesScaling: 0.8,
          isWrap: false,
          autoScroll: .active(5),
          allowSwipe: true,
          proxy: proxy
      ) { color in
          VStack {
              color.color
                  .aspectRatio(16/9, contentMode: .fit)
              Text("**Color:** \(color.name)")
                  .padding()
          }
          .background(.white)
          .clipShape(RoundedRectangle(cornerRadius: 8))
          .shadow(color: .gray, radius: 2, x: 1, y: 1)
      }
      .oskuiCarouselStyle(OSKUIMyCarouselStyle())
      .padding(.vertical)
    }
}

Example

An example can be found here.

OSKUIListTile

Get started

Coming soon...

Styling your list tiles

Coming soon...

Example

Coming soon...

Dependencies

This package has no dependencies.

Thanks

This example is inspired by:

• A carousel view for SwiftUI: A carousel implementation example.
• SwiftUI Custom Styling: An example of custom view with styling (like for Button), with an example.

Contributions

Please find here the instructions for contributions.

Licenses

Please find here the detail on licensing.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.