Merge pull request #64 from yml-org/refactor/CM-1322/new-design-system

refactor: incorporate the Y-Chat new Design System into the iOS sample

Author: osugikoji

sample/ios/YChatApp/App/Presenter/Home/HomeMenu.swift

@@ -0,0 +1,125 @@
+//
+//  HomeMenu.swift
+//  ychat-ios
+//
+//  Created by Koji Osugi on 06/04/23.
+//  Copyright © 2023 orgName. All rights reserved.
+//
+
+import SwiftUI
+
+internal struct HomeMenu: View {
+    @Binding
+    private var showSidebar: Bool
+    
+    @Binding
+    private var selectedMenuItem: Item
+    
+    init(
+        showSidebar: Binding<Bool>,
+        selectedMenuItem: Binding<Item>
+    ) {
+        self._showSidebar = showSidebar
+        self._selectedMenuItem = selectedMenuItem
+    }
+    
+    var body: some View {
+        SideMenu(isVisible: $showSidebar) {
+            VStack(alignment: .leading, spacing: 0) {
+                LogoLabel()
+                    .padding(.vertical, 20)
+                    .padding(.horizontal, 16)
+                Divider().background(Color.divider)
+                    .padding(.bottom, 12)
+                ForEach(Item.allCases, id: \.self) {
+                    if $0.hasTopDivider {
+                        Divider().background(Color.divider)
+                            .padding(.vertical, 8)
+                            .padding(.leading, 48)
+                    }
+                    sideMenuItemView(item: $0)
+                        .padding(.top, 4)
+                }
+            }
+        }
+    }
+    
+    @ViewBuilder
+    private func sideMenuItemView(
+        item: Item
+    ) -> some View {
+        let isSelected: Bool = selectedMenuItem == item
+        let bgColor = isSelected ? Color.accentLight : .background
+        let textStyle = isSelected ? Typography.mediumTitle : .mediumBody
+        Button {
+            showSidebar.toggle()
+            self.selectedMenuItem = item
+        } label: {
+            HStack(spacing: 8) {
+                item.icon.image()
+                Text(item.title)
+                    .foregroundColor(Color.text1)
+                    .style(textStyle)
+                Spacer()
+            }
+            .padding(.vertical, 14)
+            .padding(.horizontal, 16)
+            .frame(maxWidth: .infinity)
+            .background(bgColor)
+            .cornerRadius(20, corners: [.topRight, .bottomRight])
+            .padding(.trailing, 16)
+        }
+    }
+}
+
+extension HomeMenu {
+    enum Item: CaseIterable {
+        case models
+        case completions
+        case chatCompletions
+        case edits
+        case images
+        case audio
+        case settings
+        
+        var icon: Icon {
+            switch self {
+            case .models: return .bot
+            case .completions: return .text
+            case .settings: return .settings
+            case .chatCompletions: return .chatBubbleOutline
+            case .edits: return .edit
+            case .images: return .image
+            case .audio: return .audio
+            }
+        }
+        
+        var title: String {
+            switch self {
+            case .models: return "Models"
+            case .completions: return "Completions"
+            case .settings: return "Settings"
+            case .chatCompletions: return "ChatCompletions"
+            case .edits: return "Edits"
+            case .images: return "Images"
+            case .audio: return "Audio"
+            }
+        }
+        
+        var hasTopDivider: Bool {
+            switch self {
+            case .settings: return true
+            default: return false
+            }
+        }
+    }
+}
+
+internal struct HomeMenu_Previews: PreviewProvider {
+    static var previews: some View {
+        HomeMenu(
+            showSidebar: .constant(true),
+            selectedMenuItem: .constant(.models)
+        )
+    }
+}

sample/ios/YChatApp/App/Presenter/Home/HomeView.swift

@@ -0,0 +1,44 @@
+//
+//  MainView.swift
+//  ios-sample
+//
+//  Created by Koji Osugi on 22/01/23.
+//  Copyright © 2023 orgName. All rights reserved.
+//
+
+import SwiftUI
+
+internal struct HomeView: View {
+    @State
+    private var showSidebar: Bool = false
+    
+    @State
+    private var selectedMenu: HomeMenu.Item = .models
+    
+    var body: some View {
+        ZStack {
+            NavigationStack {
+                Group {
+                    switch selectedMenu {
+                    case .models: ModelsView()
+                    case .completions: CompletionsView()
+                    case .chatCompletions: ChatCompletionsView()
+                    default: Feedback(state: .construction)
+                    }
+                }
+                .applyToolbar(
+                    selectedMenu.title,
+                    startIcon: .menu,
+                    onButtonAction: { showSidebar.toggle() }
+                )
+            }
+            HomeMenu(showSidebar: $showSidebar, selectedMenuItem: $selectedMenu)
+        }
+    }
+}
+
+internal struct MainView_Previews: PreviewProvider {
+    static var previews: some View {
+        HomeView()
+    }
+}

sample/ios/YChatApp/App/Presenter/Main/MainView.swift

@@ -16,16 +16,7 @@ internal struct SplashView: View {
     }
 
     var body: some View {
-        VStack {
-            HStack(spacing: 8) {
-                Image(uiImage: Icon.logoBig.uiImage)
-                Text("YChat GPT")
-                    .font(.system(size: 24))
-                    .foregroundColor(.grayDark)
-                    .bold()
-            }
-        }
-        .fullScreen(alignment: .center)
+        LogoSplash().fullScreen(alignment: .center)
         .onAppear {
             DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                 appRouter.push(.main)
@@ -34,8 +25,15 @@ internal struct SplashView: View {
     }
 }
 
-internal struct SplashView_Previews: PreviewProvider {
+internal struct SplashViewLight_Previews: PreviewProvider {
+    static var previews: some View {
+        SplashView()
+    }
+}
+
+internal struct SplashViewDark_Previews: PreviewProvider {
     static var previews: some View {
         SplashView()
+            .preferredColorScheme(.dark)
     }
 }

sample/ios/YChatApp/App/Presenter/Splash/SplashView.swift

@@ -1,7 +1,7 @@
 import SwiftUI
 
 @main
-struct SampleApp: App {
+struct YChatApp: App {
     @ObservedObject
     private var appRouter: AppRouter = AppRouter.shared
 
@@ -10,7 +10,7 @@ struct SampleApp: App {
             Group {
                 switch appRouter.navGraph.destination {
                 case .splash: SplashView()
-                case .main: MainView()
+                case .main: HomeView()
                 }
             }
             .transition(appRouter.navGraph.animation)