Swiftpack.co - steamclock/nice_components as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by steamclock.
steamclock/nice_components 1.0.0
A collection of useful UI components for SwiftUI
⭐️ 3
🕓 1 week ago
iOS macOS
.package(url: "https://github.com/steamclock/nice_components.git", from: "1.0.0")

Nice Components

A simple library with some nice looking SwiftUI components to get your next project started 🚀

Help jump start your prototypes with some sensible default components, then come back later and customize the look and feel of your app all in one place.

Usage

Example Project

You can clone and run the example project to see examples of all the default components, plus a little sample of a more customized sign in screen.

Straight Out of the Box

When you're just starting out with your project, you should be able to get some reasonable results just dropping in our components straight out of the box.

import NiceComponents

struct DemoView: View {
    var body: some View {
        ScreenTitle("I'm a nice big title!")
        
        PrimaryButton("And I'm a nice little button") {
            doTheThing()
        }
    }
}

Customizing Components

Once you're ready to start putting your own touch on components, you've got a couple options, based on what you'd like to change...

Setting a Global Config at Startup

If you'd like to change all instances of a component, we recommend creating a custom config that you can set when your app first starts. Note that you once you've set this config once, you'll be unable to update it.

In the case of multiple customizations applying to the same component, the most specific one will take precedence.

import NiceComponents

@main struct ExampleApp: App {
   init() {
       var newConfig = Config()
       newConfig.primaryButtonStyle = NiceComponents.ButtonStyle(
           surfaceColor: Color.red,
           onSurfaceColor: .black
       )
       Config.current = newConfig
   }
}

Extending an Existing Component

public struct CustomPrimaryButton: View {
    let text: String
    let onClick: () -> Void
    
    var body: some View {
        PrimaryButton(
            text,
            style: NiceButtonStyle(
                fontStyle: FontStyle(size: 16),
                surfaceColor: .red,
                onSurfaceColor: .black
            )
            onClick: onClick
        )
    }
}

Customizing a Single Instance of a Component

var body: some View {
   // ...
   
   PrimaryButton(
      "Tap me!",
       style: NiceComponents.ButtonStyle(
            fontStyle: FontStyle(size: 16),
            surfaceColor: .red,
            onSurfaceColor: .black
       )
   ) {
      print("I've been tapped!")
   }
})
   
   // ...
}

Setting a Color Palette

Components are colored using a theme inspired by the Material Design color system.

Component Text Color Background Color
Primary Button onPrimary primary
Secondary Button onSecondary secondary
Inactive Button background secondary
Destructive Button onError error
Body Text onSurface n/a
Detail Text onSurface n/a

We also recommend declaring your colors in an Asset Catalog to make supporting light and dark mode a breeze.

import NiceComponents

@main struct ExampleApp: App {
   init() {
       var newConfig = Config()
       newConfig.colorTheme = ColorTheme(
        primary: Color("theme_primary"),
        onPrimary: Color("theme_onPrimary)"
       )
       Config.current = newConfig
   }
}

Setting a Custom Font

Just like how you can set a colorTheme, you can also set a fontTheme that defines the default font, size and weight for all components.

Component Type Name
Primary Button button
Secondary Button button
Inactive Button button
Destructive Button button
Body Text body
Detail Text detail
    var newConfig = Config()
    newConfig.primaryButtonStyle.fontStyle = FontStyle(
        "Comic Sans MS",
        size: 16,
        weight: .semibold
    )
    Config.current = newConfig

Installation

Nice Components is available through Swift Package Manager. To install it, follow these steps:

  1. In Xcode, click File, then Swift Package Manager, then Add Package Dependency
  2. Choose your project
  3. Enter this URL in the search bar https://github.com/steamclock/swiftui_components.git

GitHub

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

Dependencies

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