Issue16 core UI

OTPKitDemo/Features/OriginDestination/Components/OriginDestinationSheetView.swift

@@ -0,0 +1,85 @@
+//
+//  OriginDestinationSheetView.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import MapKit
+import SwiftUI
+
+/// OriginDestinationSheetView responsible for showing sheets
+///  consists of available origin/destination of OriginDestinationView
+/// - Attributes:
+///     - sheetEnvironment responsible for manage sheet states accross the view. See `OriginDestinationSheetEnvironment`
+///     - locationService responsible for manage autocompletion of origin/destination  search bar. See `LocationService`
+struct OriginDestinationSheetView: View {
+    @Environment(\.dismiss) var dismiss
+    @EnvironmentObject var sheetEnvironment: OriginDestinationSheetEnvironment
+
+    @StateObject private var locationService = LocationService()
+    @State private var search: String = ""
+
+    var body: some View {
+        VStack {
+            HStack {
+                Text("Change Stop")
+                    .font(.title2)
+                    .fontWeight(.bold)
+                Spacer()
+                Button(action: {
+                    dismiss()
+                }, label: {
+                    Image(systemName: "xmark.circle.fill")
+                        .font(.title2)
+                        .foregroundColor(.gray)
+                })
+            }
+            .padding()
+
+            HStack {
+                Image(systemName: "magnifyingglass")
+                TextField("Search for a place", text: $search)
+                    .autocorrectionDisabled()
+            }
+            .padding(.vertical, 8)
+            .padding(.horizontal, 12)
+            .background(Color.gray.opacity(0.2))
+            .clipShape(.rect(cornerRadius: 12))
+            .padding(.horizontal, 16)
+
+            Spacer()
+
+            List {
+                ForEach(locationService.completions) { completion in
+                    Button(action: {
+                        sheetEnvironment.selectedValue = completion.title
+                        dismiss()
+                    }, label: {
+                        HStack {
+                            VStack(alignment: .leading, spacing: 4) {
+                                Text(completion.title)
+                                    .font(.headline)
+                                Text(completion.subTitle)
+                            }
+                            Spacer()
+                            Image(systemName: "chevron.right")
+                                .foregroundColor(.gray)
+                        }
+                    })
+                    .listRowBackground(Color.clear)
+                }
+            }
+            .listStyle(.plain)
+            .scrollContentBackground(.hidden)
+            .onChange(of: search) { newValue in
+                locationService.update(queryFragment: newValue)
+            }
+            .padding()
+        }
+    }
+}
+
+#Preview {
+    OriginDestinationSheetView()
+}

OTPKitDemo/Features/OriginDestination/Environment/OriginDestinationSheetEnvironment.swift

@@ -0,0 +1,25 @@
+//
+//  OriginDestinationSheetEnvironment.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import Foundation
+
+/// OriginDestinationSheetState responsible for managing states of the shown `OriginDestinationSheetView`
+/// - Enums:
+///     - origin: This manage origin state of the trip planner
+///     - destination: This manage destination state of the trip planner
+enum OriginDestinationSheetState {
+    case origin
+    case destination
+}
+
+/// OriginDestinationSheetEnvironment responsible for manage the environment of `OriginDestination` features
+/// - sheetState: responsible for managing shown sheet in `OriginDestinationView`
+/// - selectedValue: responsible for managing selected value when user taped the list in `OriginDestinationSheetView`
+final class OriginDestinationSheetEnvironment: ObservableObject {
+    @Published var sheetState: OriginDestinationSheetState = .origin
+    @Published var selectedValue: String = ""
+}

OTPKitDemo/Features/OriginDestination/OriginDestinationView.swift

@@ -0,0 +1,79 @@
+//
+//  OriginDestinationView.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import MapKit
+import SwiftUI
+
+/// OriginDestinationView is the main view for setting up Origin/Destination in OTPKit.
+/// It consists a list of Origin and Destination along with the `MapKit`
+struct OriginDestinationView: View {
+    @StateObject private var originDestinationEnvironment = OriginDestinationSheetEnvironment()
+
+    @State private var isSheetOpened = false
+
+    static let mockCoordinate = CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275)
+
+    static let mockSpan = MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5)
+
+    @State private var region = MKCoordinateRegion(center: mockCoordinate, span: mockSpan)
+
+    var body: some View {
+        ZStack {
+            Map(coordinateRegion: $region, showsUserLocation: true, userTrackingMode: .constant(.follow))
+                .edgesIgnoringSafeArea(.all)
+                .sheet(isPresented: $isSheetOpened) {
+                    OriginDestinationSheetView()
+                        .environmentObject(originDestinationEnvironment)
+                }
+
+            VStack {
+                List {
+                    Button(action: {
+                        isSheetOpened.toggle()
+                        originDestinationEnvironment.sheetState = .origin
+                    }, label: {
+                        HStack(spacing: 16) {
+                            Image(systemName: "paperplane.fill")
+                                .foregroundColor(.white)
+                                .background(
+                                    Circle()
+                                        .fill(Color.green)
+                                        .frame(width: 30, height: 30)
+                                )
+                            Text("Origin UI")
+                        }
+                    })
+
+                    Button(action: {
+                        isSheetOpened.toggle()
+                        originDestinationEnvironment.sheetState = .destination
+                    }, label: {
+                        HStack(spacing: 16) {
+                            Image(systemName: "mappin")
+                                .foregroundColor(.white)
+                                .background(
+                                    Circle()
+                                        .fill(Color.green)
+                                        .frame(width: 30, height: 30)
+                                )
+                            Text("Destination UI")
+                        }
+                    })
+                }
+                .frame(height: 135)
+                .scrollContentBackground(.hidden)
+                .scrollDisabled(true)
+
+                Spacer()
+            }
+        }
+    }
+}
+
+#Preview {
+    OriginDestinationView()
+}

OTPKitDemo/OTPKitDemoApp.swift

@@ -20,8 +20,7 @@ import SwiftUI
 struct OTPKitDemoApp: App {
     var body: some Scene {
         WindowGroup {
-            TripPlannerView()
-                .environmentObject(TripPlannerViewModel())
+            OriginDestinationView()
         }
     }
 }

OTPKitDemo/Services/LocationServices.swift

@@ -0,0 +1,43 @@
+//
+//  LocationServices.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import Foundation
+import MapKit
+
+/// LocationServiceSearchCompletions is the main data model for `LocationService`
+/// This will be utilized as list object
+struct LocationServiceSearchCompletions: Identifiable {
+    let id = UUID()
+    let title: String
+    let subTitle: String
+}
+
+/// LocationService is the main class that's responsible for maanging MKLocalSearchCompleter
+class LocationService: NSObject, ObservableObject, MKLocalSearchCompleterDelegate {
+    private let completer: MKLocalSearchCompleter
+
+    @Published var completions = [LocationServiceSearchCompletions]()
+
+    init(completer: MKLocalSearchCompleter = MKLocalSearchCompleter()) {
+        self.completer = completer
+        super.init()
+        self.completer.delegate = self
+    }
+
+    /// update method responsible for updating the queryFragement of `completer`
+    /// - Parameter queryFragment: this manage the searched query for `completer`
+    func update(queryFragment: String) {
+        completer.resultTypes = .pointOfInterest
+        completer.queryFragment = queryFragment
+    }
+
+    /// completerDidUpdateResults is method that finished the search functionality and upadate the `completer`.
+    /// This is required function from `MKLocalSearchCompleterDelegate`
+    func completerDidUpdateResults(_ completer: MKLocalSearchCompleter) {
+        completions = completer.results.map { .init(title: $0.title, subTitle: $0.subtitle) }
+    }
+}

OTPKitDemo/TripPlannerViewModel.swift

@@ -22,7 +22,7 @@ import SwiftUI
 // swiftlint:disable function_parameter_count
 
 // Define the ViewModel as an observable object
-class TripPlannerViewModel: ObservableObject {
+final class TripPlannerViewModel: ObservableObject {
     // Published property to update the view
     @Published var planResponse: OTPResponse?
     @Published var isLoading = false