Changes to SwiftUI demo app (#325)

Demo/Demo/Gravatar-SwiftUI-Demo/ContentView.swift

@@ -1,57 +1,42 @@
-//
-//  ContentView.swift
-//  Demo
-//
-//  Created by Andrew Montgomery on 1/19/24.
-//
-
 import SwiftUI
 
 struct ContentView: View {
-    @State var path: [String] = []
-
-    enum Page: Int, CaseIterable, Identifiable {
-        case avatarView = 0
-        case avatarPickerView
+    enum Page: String, CaseIterable, Identifiable {
+        case avatarView = "Avatar view"
+        case avatarPickerView = "Avatar picker view"
 
         var id: Int {
-            self.rawValue
+            self.rawValue.hashValue
         }
 
         var title: String {
-            switch self {
-            case .avatarView:
-                "Avatar View"
-            case .avatarPickerView:
-                "Avatar Picker View"
-            }
+            rawValue
         }
     }
-    
+
     var body: some View {
-        NavigationStack(path: $path) {
-            VStack {
-                ForEach(Page.allCases) { page in
-                    Button(page.title) {
-                        path.append(page.title)
-                    }
-                }
+        NavigationStack {
+            List(Page.allCases) { page in
+                NavigationLink(page.title, value: page)
             }
-            .navigationDestination(for: String.self) { value in
-                VStack(spacing: 20) {
-                    switch value {
-                    case Page.avatarView.title:
-                        DemoAvatarView()
-                    case Page.avatarPickerView.title:
-                        DemoAvatarPickerView()
-                    default:
-                        Text("-")
-                    }
-                }
+            .listStyle(.plain)
+            .navigationDestination(for: Page.self) { value in
+                pageView(for: value).navigationTitle(value.title)
             }
+            .navigationTitle("Gravatar SwiftUI Demo")
+            .navigationBarTitleDisplayMode(.inline)
+        }
+    }
+
+    @ViewBuilder
+    func pageView(for page: Page) -> some View {
+        switch page {
+        case .avatarView:
+            DemoAvatarView()
+        case .avatarPickerView:
+            DemoAvatarPickerView()
         }
     }
-
 }
 
 #Preview {

Demo/Demo/Gravatar-SwiftUI-Demo/DemoAvatarPickerView.swift

@@ -1,7 +1,6 @@
 import SwiftUI
 @testable import GravatarUI
 
-@MainActor
 struct DemoAvatarPickerView: View {
 
     @AppStorage("pickerEmail") private var email: String = ""

Demo/Demo/Gravatar-SwiftUI-Demo/DemoAvatarView.swift

@@ -1,65 +1,93 @@
-//
-//  DemoAvatarView.swift
-//  Gravatar-SwiftUI-Demo
-//
-//  Created by Pinar Olguc on 8.07.2024.
-//
-
 import SwiftUI
 @testable import GravatarUI
 
 struct DemoAvatarView: View {
     enum Constants {
-        static let avatarWidth: CGFloat = 120
+        static let avatarSize = CGSize(width: 120, height: 120)
         static let borderWidth: CGFloat = 2
     }
 
     @AppStorage("email") private var email: String = ""
     @State var borderWidthDouble: Double? = Constants.borderWidth
+    @State var cornerRadiusDouble: Double? = 8
+
     @State var borderWidth: CGFloat = Constants.borderWidth
     @State var forceRefresh: Bool = false
     @State var isAnimated: Bool = true
-
+    @State var borderColor: Color = .purple
+
     var avatarURL: AvatarURL? {
         AvatarURL(
             with: .email(email),
             options: .init(
-                preferredSize: .points(Constants.avatarWidth),
+                preferredSize: .points(Constants.avatarSize.width),
                 defaultAvatarOption: .status404
             )
         )
     }
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 20) {
-            TextField("Email", text: $email)
-                .textInputAutocapitalization(.never)
-                .keyboardType(.emailAddress)
-                .disableAutocorrection(true)
-            TextField("Border width", value: $borderWidthDouble, format: .number)
-                .disableAutocorrection(true)
-            Toggle("Force refresh", isOn: $forceRefresh)
-            Toggle("Animated", isOn: $isAnimated)
-
-            AvatarView(
-                url: avatarURL?.url,
-                placeholder: Image("profileAvatar").renderingMode(.template),
-                forceRefresh: $forceRefresh,
-                loadingView: {
-                    ProgressView()
-                        .progressViewStyle(CircularProgressViewStyle())
-                },
-                transaction: Transaction(animation: isAnimated ? .easeInOut(duration: 0.3) : nil)
-            )
-            .shape(RoundedRectangle(cornerRadius: 8),
-                   borderColor: .purple,
-                   borderWidth: borderWidth)
-            .foregroundColor(.purple)
-            .frame(width: Constants.avatarWidth)
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20) {
+                VStack(alignment: .leading, spacing: 0) {
+                    Text("Email:").font(.caption2).foregroundStyle(.secondary)
+                    TextField("Email", text: $email)
+                        .textInputAutocapitalization(.never)
+                        .keyboardType(.emailAddress)
+                        .disableAutocorrection(true)
+                }
+                StepperField(title: "Border width", value: $borderWidthDouble)
+                StepperField(title: "Corner radius", value: $cornerRadiusDouble)
+                ColorPicker("Border color", selection: $borderColor)
+                Toggle("Force refresh", isOn: $forceRefresh)
+                Toggle("Animated", isOn: $isAnimated)
+                Divider()
+                AvatarView(
+                    url: avatarURL?.url,
+                    placeholder: Image("profileAvatar").renderingMode(.template),
+                    forceRefresh: $forceRefresh,
+                    loadingView: {
+                        ProgressView()
+                            .progressViewStyle(CircularProgressViewStyle())
+                    },
+                    transaction: Transaction(animation: isAnimated ? .easeInOut(duration: 0.3) : nil)
+                )
+                .shape(RoundedRectangle(cornerRadius: CGFloat(cornerRadiusDouble ?? 0)),
+                       borderColor: borderColor,
+                       borderWidth: borderWidth)
+                .foregroundColor(.purple)
+                .frame(width: Constants.avatarSize.width, height: Constants.avatarSize.height)
+                Spacer()
+            }
+            .padding()
+            .onChange(of: borderWidthDouble) { oldValue, newValue in
+                self.borderWidth = CGFloat(newValue ?? 0)
+            }
         }
-        .padding()
-        .onChange(of: borderWidthDouble) { oldValue, newValue in
-            self.borderWidth = CGFloat(newValue ?? 0)
+    }
+}
+
+struct StepperField: View {
+    let title: String
+    @Binding var value: Double?
+
+    var body: some View {
+        HStack {
+            VStack(alignment: .leading, spacing: 0) {
+                Text(title).font(.caption2).foregroundStyle(.secondary)
+                HStack {
+                    TextField(title, value: $value, format: .number)
+                        .textFieldStyle(.roundedBorder)
+                        .disableAutocorrection(true)
+                    Stepper {
+                        Text("")
+                    } onIncrement: {
+                        value? += 1
+                    } onDecrement: {
+                        value ?? 0 > 0 ? value? -= 1 : ()
+                    }
+                }
+            }
         }
     }
 }