🎉 [iOS] TipKit 🎉

ios/Application/AppDelegate.swift

@@ -13,6 +13,7 @@ import KeychainProvider
 import NetworkProvider
 import OSLog
 import SharedDomain
+import TipKit
 import UIKit
 import UIToolkit
 import UserDefaultsProvider
@@ -42,6 +43,9 @@ final class AppDelegate: UIResponder, UIApplicationDelegate {
         // Setup Cache capacity
         setupCacheCapacity()
 
+        // Setup Tips
+        setupTips()
+
         // Register for remote notifications
         application.registerForRemoteNotifications()
 
@@ -133,6 +137,16 @@ final class AppDelegate: UIResponder, UIApplicationDelegate {
         URLCache.shared.memoryCapacity = 10_000_000 // ~10 MB memory space
         URLCache.shared.diskCapacity = 1_000_000_000 // ~1GB disk cache space
     }
+
+    // MARK: Setup Tips
+    private func setupTips() {
+        guard #available(iOS 17, *) else { return }
+
+        // Reset DataStore has to be called before configure
+        // You don't usually need to reset DataStore because you wanna show the tip only once
+        try? Tips.resetDatastore()
+        try? Tips.configure()
+    }
 }
 
 extension AppDelegate: UNUserNotificationCenterDelegate {

ios/PresentationLayer/Recipes/Sources/Recipes/Main/RecipesViewModel.swift

@@ -14,6 +14,7 @@ enum Recipe: String, CaseIterable {
     case images = "Images"
     case maps = "Maps"
     case slidingButton = "SlidingButton"
+    case tipKit = "TipKit"
 }
 
 final class RecipesViewModel: BaseViewModel, ViewModel, ObservableObject {
@@ -58,6 +59,7 @@ final class RecipesViewModel: BaseViewModel, ViewModel, ObservableObject {
         case .images: flowController?.handleFlow(RecipesFlow.recipes(.showImages))
         case .maps: flowController?.handleFlow(RecipesFlow.recipes(.showMaps))
         case .slidingButton: flowController?.handleFlow(RecipesFlow.recipes(.showSlidingButton))
+        case .tipKit: flowController?.handleFlow(RecipesFlow.recipes(.showTipKitExample))
         }
     }
 }

ios/PresentationLayer/Recipes/Sources/Recipes/RecipesFlowController.swift

@@ -18,6 +18,7 @@ enum RecipesFlow: Flow, Equatable {
         case showImages
         case showMaps
         case showSlidingButton
+        case showTipKitExample
     }
 }
 
@@ -47,6 +48,7 @@ extension RecipesFlowController {
         case .showImages: showImages()
         case .showMaps: showMaps()
         case .showSlidingButton: showSlidingButton()
+        case .showTipKitExample: showTipKitExample()
         }
     }
 
@@ -91,4 +93,12 @@ extension RecipesFlowController {
         let vc = BaseHostingController(rootView: SlidingButtonView(viewModel: vm))
         navigationController.show(vc, sender: nil)
     }
+
+    private func showTipKitExample() {
+        guard #available(iOS 17, *) else { return }
+
+        let vm = ExampleTipKitViewModel(flowController: self)
+        let vc = BaseHostingController(rootView: ExampleTipKitView(viewModel: vm))
+        navigationController.show(vc, sender: nil)
+    }
 }

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/ExampleTipKitView.swift

@@ -0,0 +1,91 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import SwiftUI
+import TipKit
+import UIToolkit
+
+@available(iOS 17, *)
+struct ExampleTipKitView: View {
+
+    @ObservedObject private var viewModel: ExampleTipKitViewModel
+
+    private var actionTip = ActionTip()
+
+    init(viewModel: ExampleTipKitViewModel) {
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        VStack(spacing: 32) {
+            Text(L10n.recipe_tipkit_title)
+                .frame(maxWidth: .infinity, alignment: .center)
+                .font(.largeTitle)
+                .popoverTip(PopoverTip())
+
+            VStack {
+                Text(L10n.recipe_tipkit_inline_tip)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .font(.headline)
+
+                TipView(InlineTip())
+            }
+
+            VStack {
+                HStack {
+                    Text(L10n.recipe_tipkit_remaining_title(viewModel.state.remainingTapsToShowTip))
+
+                    if viewModel.state.remainingTapsToShowTip > 0 {
+                        Button(
+                            action: {
+                                viewModel.onIntent(.tapToShowTip)
+                            }, label: {
+                                Text(L10n.recipe_tipkit_decrease_button_title)
+                            }
+                        )
+                    }
+                }
+
+                VStack {
+                    Text(L10n.recipe_tipkit_rule_tip)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .font(.headline)
+
+                    TipView(RuleTip())
+                }
+
+                VStack {
+                    Text(L10n.recipe_tipkit_action_tip)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .font(.headline)
+
+                    TipView(actionTip) { action in
+                        switch action.id {
+                        case ActionTip.Actions.pop.id:
+                            viewModel.onIntent(.pop)
+                        case ActionTip.Actions.close.id:
+                            actionTip.invalidate(reason: .actionPerformed)
+                        default:
+                            break
+                        }
+                    }
+                }
+                .padding(.top)
+            }
+
+            Spacer()
+        }
+        .padding()
+        .lifecycle(viewModel)
+    }
+}
+
+#Preview {
+    if #available(iOS 17, *) {
+        return ExampleTipKitView(viewModel: ExampleTipKitViewModel(flowController: nil))
+    } else {
+        return EmptyView()
+    }
+}

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/ExampleTipKitViewModel.swift

@@ -0,0 +1,53 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import Foundation
+import UIToolkit
+import TipKit
+
+class ExampleTipKitViewModel: BaseViewModel, ObservableObject, ViewModel {
+
+    // MARK: Dependencies
+    private weak var flowController: FlowController?
+
+    init(flowController: FlowController?) {
+        self.flowController = flowController
+        super.init()
+
+        if #available(iOS 17, *) {
+            state.remainigTapsToShowTip = 3 - RuleTip.remainToShow.donations.count
+        }
+    }
+
+    // MARK: State
+
+    @Published private(set) var state: State = State()
+
+    struct State {
+        var remainingTapsToShowTip: Int = 3
+    }
+
+    // MARK: Intent
+    enum Intent {
+        case pop
+        case tapToShowTip
+    }
+
+    func onIntent(_ intent: Intent) {
+        executeTask(Task {
+            switch intent {
+            case .pop: flowController?.pop()
+            case .tapToShowTip: await handleTapToShowTip()
+            }
+        })
+    }
+
+    private func handleTapToShowTip() async {
+        guard #available(iOS 17, *) else { return }
+
+        state.remainingTapsToShowTip -= 1
+        await RuleTip.remainToShow.donate()
+    }
+}

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/Views/ActionTip.swift

@@ -0,0 +1,35 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import Foundation
+import TipKit
+import UIToolkit
+
+@available(iOS 17, *)
+struct ActionTip: Tip {
+
+    enum Actions {
+        case pop
+        case close
+
+        var id: String {
+            switch self {
+            case .pop:
+                "pop-screen"
+            case .close:
+               "close-popup"
+            }
+        }
+    }
+
+    var title: Text {
+        Text(L10n.recipe_tipkit_action_tip_title)
+    }
+
+    var actions: [Action] {
+        Action(id: Actions.pop.id, title: "Pop screen")
+        Action(id: Actions.close.id, title: "Close popup")
+    }
+}

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/Views/InlineTip.swift

@@ -0,0 +1,20 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import Foundation
+import TipKit
+import UIToolkit
+
+@available(iOS 17, *)
+struct InlineTip: Tip {
+
+    var title: Text {
+        Text(L10n.recipe_tipkit_inline_tip_title)
+    }
+
+    var message: Text? {
+        Text(L10n.recipe_tipkit_inline_tip_message)
+    }
+}

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/Views/PopoverTip.swift

@@ -0,0 +1,28 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import Foundation
+import TipKit
+import UIToolkit
+
+@available(iOS 17, *)
+struct PopoverTip: Tip {
+
+    var title: Text {
+        Text(L10n.recipe_tipkit_popover_tip_title)
+    }
+
+    var message: Text? {
+        Text(L10n.recipe_tipkit_popover_tip_message)
+    }
+
+    var image: Image? {
+        Asset.Images.brandLogo.image
+    }
+
+    var options: [any TipOption] {
+        [Tips.MaxDisplayCount(1)]
+    }
+}

ios/PresentationLayer/Recipes/Sources/Recipes/TipKit/Views/RuleTip.swift

@@ -0,0 +1,33 @@
+//
+//  Created by David Kadlček on 24.07.2024
+//  Copyright © 2024 Matee. All rights reserved.
+//
+
+import Foundation
+import TipKit
+import UIToolkit
+
+@available(iOS 17, *)
+struct RuleTip: Tip {
+
+    /// Event Rule
+    static let remainToShow = Event(id: "number-value")
+
+    var title: Text {
+        Text(L10n.recipe_tipkit_rule_tip_title)
+    }
+
+    var message: Text? {
+        Text(L10n.recipe_tipkit_rule_tip_message)
+    }
+
+    var rules: [Rule] {
+        [
+            #Rule(Self.remainToShow) { $0.donations.count > 2 }
+        ]
+    }
+
+    var options: [any TipOption] = [
+        IgnoresDisplayFrequency(true)
+    ]
+}

ios/PresentationLayer/UIToolkit/Sources/UIToolkit/Utilities/AppTheme.swift

@@ -69,4 +69,8 @@ public enum AppTheme {
         public static let whisperMessage = Font.system(size: 13.0, weight: .medium)
         public static let whisperMessageUIKit = UIFont.systemFont(ofSize: 13.0, weight: .medium)
     }
+
+    public enum Images {
+        public static let arrowShapeBackward = Image(systemName: "arrowshape.backward")
+    }
 }