Add ability to display toasts

Author: mdb1

Package.swift

@@ -6,8 +6,7 @@ import PackageDescription
 let package = Package(
     name: "ViewStateController",
     platforms: [
-        .iOS(.v15),
-        .macOS(.v12)
+        .iOS(.v15)
     ],
     products: [
         .library(

README.md

@@ -2,17 +2,29 @@
 
 ViewStateController is a framework for Swift and SwiftUI developers that provides a simple and flexible way to manage the state of views that load information from a backend. It allows you to handle different states based on a historical array of states, and provides properties and methods to help you access and modify the state. With ViewStateController, you can easily implement complex views that depend on asynchronous data loading, and create a better user experience by showing loading spinners or error messages.
 
-## ViewStateController Object
+# ViewStateController Object
 
-## WithViewState Modifier
+# WithViewState Modifier
 
 ## Examples with code samples
 
+# Toast
 
-## BuildTools
 
-To run the formatter, just run:
 
-`swiftformat . --config "Sources/ControllerExampleApp/.swiftformat" --swiftversion 5.7` from the root of the repository.
+
+# Internal Project Tools
+
+## ExampleApp
+
+There is an Example App where most of the configurable options can be tweaked to test the different states/looks/behaviors of loading/error/toasts.
+
+The project is in `Sources/ControllerExampleApp/ControllerExampleApp.xcodeproj`
+
+## Formatter
+
+To run the formatter, just run the following command from the root of the repository:
+
+`swiftformat . --config "Sources/ControllerExampleApp/.swiftformat" --swiftversion 5.7`
 
 You need to have `SwiftFormat` installed (`brew install swiftformat`).

Sources/ControllerExampleApp/ControllerExampleApp/Screens/Demo/DemoScreen.swift

@@ -13,6 +13,7 @@ struct DemoScreen: View {
     @State private var initialLoadingType: LoadingModifierType = .overCurrentContent()
     @State private var loadingAfterInfoType: LoadingModifierType = .overCurrentContent()
     @State private var loadingAfterErrorType: LoadingModifierType = .overCurrentContent()
+    @State private var displayToast: Bool = false
 
     var body: some View {
         NavigationView {
@@ -54,6 +55,15 @@ struct DemoScreen: View {
                 }
                 buttons
             }
+            .toast(
+                isShowing: $displayToast,
+                type: .default(
+                    options: .init(
+                        message: .init(text: "Hola"),
+                        secondaryMessage: .init(text: "Hey", font: .system(size: 10))
+                    )
+                )
+            )
             .padding()
             .navigationTitle("Demo")
             .navigationBarTitleDisplayMode(.inline)
@@ -76,12 +86,16 @@ struct DemoScreen: View {
     }
 
     var buttons: some View {
-        HStack {
+        VStack {
+            HStack {
+                Button("Loading") { setLoading() }
+                Button("Loaded") { setLoaded() }
+                Button("Error") { setError() }
+                Button("Toast") { withAnimation { displayToast = true } }
+            }
             Button("Reset") { controller.reset() }
-            Button("Loading") { setLoading() }
-            Button("Loaded") { setLoaded() }
-            Button("Error") { setError() }
-        }.buttonStyle(.bordered)
+        }
+        .buttonStyle(.bordered)
     }
 
     func loadedView(user: User) -> some View {

Sources/ViewStateController/Toast/DefaultToastOptions.swift

@@ -0,0 +1,80 @@
+//
+//  DefaultToastOptions.swift
+//
+//
+//  Created by Manu on 01/03/2023.
+//
+
+import Foundation
+import SwiftUI
+
+/// Configuration object for the toasts.
+public struct DefaultToastOptions {
+    public struct Message {
+        let text: String
+        let color: Color
+        let font: Font
+        let alignment: Alignment
+
+        public init(
+            text: String,
+            color: Color = .white,
+            font: Font = .system(size: 16),
+            alignment: Alignment = .leading
+        ) {
+            self.text = text
+            self.color = color
+            self.font = font
+            self.alignment = alignment
+        }
+    }
+
+    public struct TrailingButton {
+        let imageSystemName: String
+        let color: Color
+        let size: CGSize
+
+        public init(
+            imageSystemName: String = "xmark",
+            color: Color = .white,
+            size: CGSize = .init(width: 12, height: 12)
+        ) {
+            self.imageSystemName = imageSystemName
+            self.color = color
+            self.size = size
+        }
+    }
+
+    public struct Background {
+        let color: Color
+        let cornerRadius: CGFloat
+
+        public init(
+            color: Color = .accentColor,
+            cornerRadius: CGFloat = 8
+        ) {
+            self.color = color
+            self.cornerRadius = cornerRadius
+        }
+    }
+
+    let message: Message
+    let secondaryMessage: Message?
+    let trailingButton: TrailingButton?
+    let background: Background
+    let internalPadding: UIEdgeInsets
+
+    public init(
+        message: Message,
+        secondaryMessage: Message? = nil,
+        trailingButton: TrailingButton? = .init(),
+        background: Background = .init(),
+        internalPadding: UIEdgeInsets = .init(top: 16, left: 16, bottom: 16, right: 16)
+    ) {
+        self.message = message
+        self.secondaryMessage = secondaryMessage
+        self.trailingButton = trailingButton
+        self.background = background
+        self.internalPadding = internalPadding
+    }
+}

Sources/ViewStateController/Toast/ToastModifier.swift

@@ -0,0 +1,151 @@
+//
+//  ToastModifier.swift
+//
+//
+//  Created by Manu on 01/03/2023.
+//
+
+import Foundation
+import SwiftUI
+
+public extension View {
+    /// Adds the Toast modifier.
+    func toast(
+        isShowing: Binding<Bool>,
+        type: ToastType,
+        transitionOptions: ToastTransitionOptions = .init(),
+        positionOptions: ToastPositionOptions = .init(),
+        onTap: (() -> Void)? = nil
+    ) -> some View {
+        modifier(
+            ToastModifier(
+                isShowing: isShowing,
+                type: type,
+                transitionOptions: transitionOptions,
+                positionOptions: positionOptions,
+                onTap: onTap
+            )
+        )
+    }
+}
+
+/// Display a toast message for some (configurable) seconds. Then disappears.
+public struct ToastModifier: ViewModifier {
+    @Binding public var isShowing: Bool
+    private let type: ToastType
+    private let transitionOptions: ToastTransitionOptions
+    private let positionOptions: ToastPositionOptions
+    private let onTap: (() -> Void)?
+
+    public init(
+        isShowing: Binding<Bool>,
+        type: ToastType,
+        transitionOptions: ToastTransitionOptions,
+        positionOptions: ToastPositionOptions,
+        onTap: (() -> Void)? = nil
+    ) {
+        _isShowing = isShowing
+        self.type = type
+        self.transitionOptions = transitionOptions
+        self.positionOptions = positionOptions
+        self.onTap = onTap
+    }
+
+    public func body(content: Content) -> some View {
+        ZStack {
+            content
+            ZStack(alignment: positionOptions.position.alignment) {
+                Color.clear
+                toastView
+                    .padding(.leading, positionOptions.padding.left)
+                    .padding(.top, positionOptions.padding.top)
+                    .padding(.trailing, positionOptions.padding.right)
+                    .padding(.bottom, positionOptions.padding.bottom)
+            }
+        }
+    }
+}
+
+private extension ToastModifier {
+    @ViewBuilder
+    var toastView: some View {
+        if isShowing {
+            Group {
+                switch type {
+                case let .default(options):
+                    defaultToastView(options)
+                case let .custom(view):
+                    view
+                }
+            }
+            .onTapGesture {
+                if let action = onTap {
+                    withAnimation {
+                        action()
+                    }
+                } else {
+                    // If no action is defined, tapping on any part of the toast will dismiss it
+                    withAnimation {
+                        isShowing = false
+                    }
+                }
+            }
+            .onAppear {
+                DispatchQueue.main.asyncAfter(deadline: .now() + transitionOptions.duration) {
+                    withAnimation {
+                        isShowing = false
+                    }
+                }
+            }
+            .transition(
+                transitionOptions.transition
+                    .animation(transitionOptions.animation)
+            )
+        }
+    }
+
+    func defaultToastView(_ options: DefaultToastOptions) -> some View {
+        HStack(alignment: .center) {
+            VStack(alignment: options.message.alignment.horizontal) {
+                messageView(options.message)
+                if let secondaryMessage = options.secondaryMessage {
+                    messageView(secondaryMessage)
+                }
+            }
+            Spacer()
+            if let button = options.trailingButton {
+                Button {
+                    withAnimation {
+                        isShowing = false
+                    }
+                } label: {
+                    Image(systemName: button.imageSystemName)
+                        .resizable()
+                        .frame(width: button.size.width, height: button.size.height)
+                        .tint(button.color)
+                }
+            }
+        }
+        .padding(.leading, options.internalPadding.left)
+        .padding(.top, options.internalPadding.top)
+        .padding(.trailing, options.internalPadding.right)
+        .padding(.bottom, options.internalPadding.bottom)
+        .background(options.background.color)
+        .cornerRadius(options.background.cornerRadius)
+    }
+
+    func messageView(_ message: DefaultToastOptions.Message) -> some View {
+        Text(message.text)
+            .foregroundColor(message.color)
+            .font(message.font)
+            .frame(alignment: message.alignment)
+    }
+}
+
+/// Possible types of toasts.
+public enum ToastType {
+    /// The default toast, based on some configurable options.
+    case `default`(options: DefaultToastOptions)
+    /// Displays a custom view.
+    case custom(_ view: AnyView)
+}

Sources/ViewStateController/Toast/ToastPositionOptions.swift

@@ -0,0 +1,33 @@
+//
+//  ToastPositionOptions.swift
+//
+//
+//  Created by Manu on 01/03/2023.
+//
+
+import Foundation
+import SwiftUI
+
+public struct ToastPositionOptions {
+    public enum Position {
+        case bottom, top
+
+        var alignment: Alignment {
+            switch self {
+            case .bottom: return .bottom
+            case .top: return .top
+            }
+        }
+    }
+
+    let position: Position
+    let padding: UIEdgeInsets
+
+    public init(
+        position: Position = .top,
+        padding: UIEdgeInsets = .zero
+    ) {
+        self.position = position
+        self.padding = padding
+    }
+}

Sources/ViewStateController/Toast/ToastTransitionOptions.swift

@@ -0,0 +1,25 @@
+//
+//  ToastTransitionOptions.swift
+//
+//
+//  Created by Manu on 01/03/2023.
+//
+
+import Foundation
+import SwiftUI
+
+public struct ToastTransitionOptions {
+    let duration: TimeInterval
+    let transition: AnyTransition
+    let animation: Animation
+
+    public init(
+        duration: TimeInterval = 4,
+        transition: AnyTransition = .opacity.combined(with: .move(edge: .top)),
+        animation: Animation = .default
+    ) {
+        self.duration = duration
+        self.transition = transition
+        self.animation = animation
+    }
+}