Component gallery UI updates (#41)

* Add padding to detail view

* Add preview providers

* Rename

* Fix dark mode color and compilation

* Progress

* Add vertical padding

* Make entire row clickable

* But don't make divider clickable

* Add some padding

* Make padding consistent

* Progress

* Disable taps on the list views

* Clean up spacing

* Set a fixed width for the list rows

* Previews

* Switch back to lazy vstack

* Update details list

* Update checker colors

* Final cleanup, remove preview providers since they weren't that helpful and clutter the main list

* Remove extra padding

* Use color literal

DemoApp/DemoApp/TestViews/AnyViewPreview.swift

@@ -13,7 +13,9 @@ struct AnyView_Previews: PreviewProvider {
     AnyView(
       Group {
         Text("Hello")
+          .previewDisplayName("Hello")
         Text("World")
+          .previewDisplayName("World")
       })
     .environment(\.sizeCategory, .accessibilityExtraExtraLarge)
   }

Sources/PreviewGallery/ModulePreviews.swift

@@ -1,6 +1,6 @@
 //
 //  ModulePreviews.swift
-//  
+//
 //
 //  Created by Noah Martin on 7/3/23.
 //
@@ -11,7 +11,7 @@ import SwiftUI
 struct ModulePreviews: View {
   let module: String
   let data: PreviewData
-
+  
   var body: some View {
     let componentProviders = data.previews(in: module).filter { provider in
       return provider.previews.contains { preview in
@@ -23,27 +23,30 @@ struct ModulePreviews: View {
         return preview.requiresFullScreen
       }
     }
-      return NavigationLink(module) {
-        ScrollView {
-          LazyVStack(alignment: .leading) {
-            if !featureProviders.isEmpty {
-              NavigationLink {
-                ModuleFeatures(module: module, data: data)
-              } label: {
-                VStack {
-                  TitleSubtitleRow(
-                    title: "Screens",
-                    subtitle: "\(featureProviders.count) Preview\(featureProviders.count != 1 ? "s" : "")")
-                  Divider()
-                }
-              }
+    return NavigationLink(module) {
+      ScrollView {
+        LazyVStack(alignment: .leading, spacing: 12) {
+          if !featureProviders.isEmpty {
+            NavigationLink(destination: ModuleScreens(module: module, data: data)) {
+              TitleSubtitleRow(
+                title: "Screens",
+                subtitle: "\(featureProviders.count) Preview\(featureProviders.count != 1 ? "s" : "")")
+              .padding(16)
+              .background(Color(uiColor: UIColor.secondarySystemGroupedBackground))
             }
-            ForEach(componentProviders) { preview in
+          }
+          ForEach(componentProviders) { preview in
+            NavigationLink(destination: PreviewsDetail(previewType: preview)) {
               PreviewCellView(preview: preview)
+                .background(Color(uiColor: UIColor.secondarySystemGroupedBackground))
+                .allowsHitTesting(false)
             }
+            .frame(width: UIScreen.main.bounds.width)
           }
         }
-        .navigationTitle(module)
       }
+      .background(Color(uiColor: UIColor.systemGroupedBackground))
+      .navigationTitle(module)
+    }
   }
 }

Sources/PreviewGallery/ModuleFeatures.swift → Sources/PreviewGallery/ModuleScreens.swift

@@ -1,18 +1,19 @@
 //
-//  ModuleFeatures.swift
-//  
+//  ModuleScreens.swift
+//
 //
 //  Created by Noah Martin on 8/31/23.
 //
 
 import Foundation
 import SwiftUI
+import SnapshotPreviewsCore
 
-struct ModuleFeatures: View {
-
+struct ModuleScreens: View {
+  
   let module: String
   let data: PreviewData
-
+  
   var body: some View {
     let featureProviders = data.previews(in: module).filter { provider in
       return provider.previews.contains { preview in
@@ -40,7 +41,7 @@ struct ModuleFeatures: View {
               .font(.headline)
               .foregroundStyle(Color(UIColor.label))
               .padding(.leading, 8)
-
+            
             Text("\(featurePreviews.count) Preview\(featurePreviews.count != 1 ? "s" : "")")
               .font(.subheadline)
               .foregroundStyle(Color(UIColor.secondaryLabel))
@@ -50,5 +51,5 @@ struct ModuleFeatures: View {
       }
     }.navigationTitle("Screens")
   }
-
+  
 }

Sources/PreviewGallery/PreviewCell.swift

@@ -18,17 +18,21 @@ struct PreviewCell: View {
   var body: some View {
     VStack {
       try! preview.view()
-        .border(Color(UIColor.separator))
+        .padding(.vertical, 8)
+        .border(colorScheme == .light ? Color.slate100 : Color.black)
         .background {
           Checkerboard()
-            .foregroundStyle(Color(UIColor.label))
-            .opacity(0.1)
-            .background(Color(UIColor.systemBackground))
+            .foregroundStyle(Color.lightChecker)
+            .background(colorScheme == .light ? Color.slate100 : Color.black)
         }
         .preferredColorScheme(nil)
         .colorScheme(try! preview.colorScheme() ?? colorScheme)
     }
-    .background(Color(UIColor.systemBackground))
   }
 
 }
+
+private extension Color {
+  static let lightChecker = Color(#colorLiteral(red: 0.7333333333, green: 0.7333333333, blue: 0.7333333333, alpha: 0.18))
+  static let slate100 = Color(#colorLiteral(red: 0.9450980392, green: 0.9607843137, blue: 0.9764705882, alpha: 1))
+}

Sources/PreviewGallery/PreviewGallery.swift

@@ -1,6 +1,6 @@
 //
 //  PreviewGallery.swift
-//  
+//
 //
 //  Created by Noah Martin on 7/3/23.
 //
@@ -10,42 +10,38 @@ import SwiftUI
 import SnapshotPreviewsCore
 
 struct PreviewCellView: View {
-    let preview: PreviewType
-
+  let preview: PreviewType
+  
   var body: some View {
-    VStack(alignment: .leading, spacing: 8) {
-      Group {
-        NavigationLink {
-          PreviewsDetail(previewType: preview)
-        } label: {
-          TitleSubtitleRow(
-            title: preview.displayName,
-            subtitle: "\(preview.previews.count) Preview\(preview.previews.count != 1 ? "s" : "")")
-        }
-
-        PreviewCell(preview: preview.previews[0])
-      }
-      Divider()
+    VStack(alignment: .center) {
+      TitleSubtitleRow(
+        title: preview.displayName,
+        subtitle: "\(preview.previews.count) Preview\(preview.previews.count != 1 ? "s" : "")"
+      )
+      .padding(EdgeInsets(top: 12, leading: 16, bottom: 6, trailing: 16))
+
+      PreviewCell(preview: preview.previews[0])
     }
-    .background(Color(UIColor.systemBackground))
+    .padding(.bottom, 8)
   }
 }
 
 public struct PreviewGallery: View {
-
+  
   let data: PreviewData
-
+  
   public init(data: PreviewData = .default) {
     self.data = data
   }
-
+  
   public var body: some View {
     if data.modules.count > 1 {
       List {
-          ForEach(Array(data.modules).sorted(), id: \.self) { module in
-            ModulePreviews(module: module, data: data)
-          }
-      }.navigationTitle("Modules")
+        ForEach(Array(data.modules).sorted(), id: \.self) { module in
+          ModulePreviews(module: module, data: data)
+        }
+      }
+      .navigationTitle("Modules")
     } else {
       ScrollView {
         LazyVStack(alignment: .leading) {

Sources/PreviewGallery/PreviewsDetail.swift

@@ -10,25 +10,27 @@ import SwiftUI
 import SnapshotPreviewsCore
 
 struct PreviewsDetail: View {
-
+  
   let previewType: PreviewType
-
+  
   var body: some View {
     ScrollView {
-      VStack(alignment: .leading) {
+      VStack(alignment: .leading, spacing: 12) {
         ForEach(previewType.previews) { preview in
-          VStack {
+          VStack(alignment: .center) {
             Text(preview.displayName ?? "Preview")
               .font(.headline)
               .foregroundStyle(Color(UIColor.label))
-              .padding(.leading, 8)
             PreviewCell(preview: preview)
-            Divider()
           }
+          .padding(.vertical, 16)
+          .frame(width: UIScreen.main.bounds.width)
+          .background(Color(uiColor: UIColor.secondarySystemGroupedBackground))
         }
       }
     }
+    .background(Color(uiColor: UIColor.systemGroupedBackground))
     .navigationTitle(previewType.displayName)
   }
-
+  
 }

Sources/PreviewGallery/TitleSubtitleRow.swift

@@ -1,6 +1,6 @@
 //
 //  TitleSubtitleRow.swift
-//  
+//
 //
 //  Created by Noah Martin on 8/31/23.
 //
@@ -11,24 +11,21 @@ import SwiftUI
 struct TitleSubtitleRow: View {
   let title: String
   let subtitle: String
-
+  
   var body: some View {
     HStack {
       VStack(alignment: .leading) {
         Text(title)
           .font(.headline)
-          .foregroundStyle(Color(UIColor.label))
-          .padding(.leading, 8)
-
+          .foregroundStyle(Color.primary)
+
         Text(subtitle)
           .font(.subheadline)
-          .foregroundStyle(Color(UIColor.secondaryLabel))
-          .padding(.leading, 8)
+          .foregroundStyle(Color.secondary)
       }
       Spacer()
       Image(systemName: "chevron.right")
-        .foregroundColor(Color(UIColor.secondaryLabel))
-        .padding(.trailing, 8)
+        .foregroundColor(Color.secondary)
     }
   }
 }