Issue16 core UI

OTPKitDemo/Features/OriginDestination/Components/OriginDestinationSheetView.swift

@@ -0,0 +1,81 @@
+//
+//  OriginDestinationSheetView.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import MapKit
+import SwiftUI
+
+struct OriginDestinationSheetView: View {
+    @Environment(\.dismiss) var dismiss
+    @EnvironmentObject var sheetEnvironment: OriginDestinationSheetEnvironment
+    // 1
+    @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)
+                        }
+                    })
+                    // 3
+                    .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,18 @@
+//
+//  OriginDestinationSheetEnvironment.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import Foundation
+
+enum OriginDestinationSheetState {
+    case origin
+    case destination
+}
+
+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
+
+struct OriginDestinationView: View {
+    @StateObject private var viewModel = OriginDestinationViewModel()
+
+    @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/Features/OriginDestination/OriginDestinationViewModel.swift

@@ -0,0 +1,12 @@
+//
+//  OriginDestinationViewModel.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import Foundation
+
+final class OriginDestinationViewModel: ObservableObject {
+//    @Published var sheetState: OriginDestinationSheetState = .origin
+}

OTPKitDemo/OTPKitDemoApp.swift

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

OTPKitDemo/Services/LocationServices.swift

@@ -0,0 +1,36 @@
+//
+//  LocationServices.swift
+//  OTPKitDemo
+//
+//  Created by Hilmy Veradin on 25/06/24.
+//
+
+import Foundation
+import MapKit
+
+struct SearchCompletions: Identifiable {
+    let id = UUID()
+    let title: String
+    let subTitle: String
+}
+
+class LocationService: NSObject, ObservableObject, MKLocalSearchCompleterDelegate {
+    private let completer: MKLocalSearchCompleter
+
+    @Published var completions = [SearchCompletions]()
+
+    init(completer: MKLocalSearchCompleter = MKLocalSearchCompleter()) {
+        self.completer = completer
+        super.init()
+        self.completer.delegate = self
+    }
+
+    func update(queryFragment: String) {
+        completer.resultTypes = .pointOfInterest
+        completer.queryFragment = queryFragment
+    }
+
+    func completerDidUpdateResults(_ completer: MKLocalSearchCompleter) {
+        completions = completer.results.map { .init(title: $0.title, subTitle: $0.subtitle) }
+    }
+}