Notifications Refresh (Phase 2)

Modules/Sources/DesignSystem/Components/Content Preview/ContentPreview.swift

@@ -0,0 +1,110 @@
+import SwiftUI
+
+public struct ContentPreview: View {
+
+    // MARK: - Constants
+
+    public enum Constants {
+        public static let imageSize: CGFloat = 32
+    }
+
+    // MARK: - Metrics
+
+    @ScaledMetric private var imageSize: CGFloat = Constants.imageSize
+    @ScaledMetric private var height: CGFloat = 40
+
+    private var leadingPadding: CGFloat {
+        return image == nil ? CGFloat.DS.Padding.double : CGFloat.DS.Padding.single
+    }
+
+    // MARK: - Properties
+
+    private let image: ImageConfiguration?
+    private let text: String
+    private let action: () -> Void
+
+    // MARK: - Init
+
+    public init(image: ImageConfiguration? = nil, text: String, action: @escaping () -> Void) {
+        self.image = image
+        self.text = text
+        self.action = action
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        Button(action: action) {
+            HStack(spacing: CGFloat.DS.Padding.half) {
+                if let configuration = image {
+                    image(configuration: configuration)
+                }
+                Text(text)
+                    .style(.bodyLarge(.regular))
+                    .lineLimit(1)
+                    .foregroundStyle(Color.DS.Foreground.primary)
+                Spacer()
+                Image.DS.icon(named: .chevronRight)
+                    .foregroundStyle(Color.DS.Foreground.tertiary)
+            }
+            .padding(.trailing, CGFloat.DS.Padding.single)
+            .padding(.leading, leadingPadding)
+            .frame(height: height)
+            .background(Color.DS.Background.secondary)
+            .clipShape(Capsule())
+        }
+    }
+
+    private func image(configuration: ImageConfiguration) -> some View {
+        AsyncImage(url: configuration.url) { phase in
+            Group {
+                switch phase {
+                case .success(let image):
+                    image.resizable()
+                default:
+                    if let placeholder = configuration.placeholder {
+                        placeholder
+                            .resizable()
+                    } else {
+                        Color.DS.Background.tertiary
+                    }
+                }
+            }
+            .frame(width: imageSize, height: imageSize)
+            .clipShape(Circle())
+        }
+    }
+
+    // MARK: - Types
+
+    public struct ImageConfiguration {
+        let url: URL?
+        let placeholder: Image?
+
+        public init(url: URL?, placeholder: Image? = nil) {
+            self.url = url
+            self.placeholder = placeholder
+        }
+
+        public init(url: String?, placeholder: Image? = nil) {
+            self.init(url: URL(string: url ?? ""), placeholder: placeholder)
+        }
+    }
+}
+
+#Preview {
+    VStack {
+        ContentPreview(image: .init(url: "https://i.pravatar.cc/300"),
+                       text: "Great post! ❤️",
+                       action: {})
+        ContentPreview(text: "The Beauty of Off-the-Beaten-Path Adventures",
+                       action: {})
+        ContentPreview(image: .init(url: "https://i.pravatar.cc/300"),
+                       text: "Absolutely loved the tips in your latest post! 😊",
+                       action: {})
+        ContentPreview(image: .init(url: URL(string: "invalid-url")),
+                       text: "Just stumbled upon your latest art piece and wow, I'm blown away!",
+                       action: {})
+    }
+        .padding(.horizontal, CGFloat.DS.Padding.double)
+}

Modules/Sources/DesignSystem/Components/DSButton.swift

@@ -58,7 +58,7 @@ public struct DSButton: View {
             buttonBackground
             if isLoading {
                 ProgressView()
-                    .tint(Color.white)
+                    .tint(Color.DS.Background.primary)
             } else {
                 if style.emphasis != .tertiary {
                     buttonLabel

Modules/Sources/DesignSystem/Foundation/IconName.swift

@@ -10,10 +10,20 @@ import SwiftUI
 public enum IconName: String, CaseIterable {
     case ellipsisHorizontal = "ellipsis.horizontal"
     case checkmark
+    case checkmarkCircle = "checkmark.circle"
+    case clock
+    case trash
     case gearshapeFill = "gearshape.fill"
     case blockShare = "block.share"
     case starFill = "star.fill"
     case starOutline = "star.outline"
+    case chevronRight = "chevron.right"
+    case edit
+    case avatar
+    case exclamationCircle = "exclamation.circle"
+    case person
+    case arrowUp = "arrow.up"
+    case arrowDown = "arrow.down"
     case vector = "vector"
 }
 

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/Chevron/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/Chevron/chevron.right.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "chevron-right.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/arrow.down.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "arrow-down.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/arrow.up.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "arrow-up.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/avatar.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "comment-author-avatar.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/checkmark.circle.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "check-circle.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/clock.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "clock.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/edit.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "edit.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/exclamation.circle.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "exclamation.circle.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/person.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "gravatar.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/trash.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "trash.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Classes/Extensions/Design System/ContentProvider+Gravatar.swift

@@ -0,0 +1,33 @@
+import UIKit
+import SwiftUI
+import DesignSystem
+import Gravatar
+
+public extension ContentPreview.ImageConfiguration {
+
+    init(avatar: Avatar) {
+        self.init(url: Self.avatarURL(from: avatar), placeholder: Image("gravatar"))
+    }
+
+    private static func avatarURL(from avatar: Avatar) -> URL? {
+        if let url = avatar.url {
+            return url
+        } else if let email = avatar.email {
+            let pixels = Int(ceil(avatar.size * UIScreen.main.scale))
+            return AvatarURL.url(for: email, preferredSize: .pixels(pixels), gravatarRating: .general)
+        }
+        return nil
+    }
+
+    struct Avatar {
+        let url: URL?
+        let email: String?
+        let size: CGFloat
+
+        init(url: URL?, email: String?, size: CGFloat = 80) {
+            self.url = url
+            self.email = email
+            self.size = size
+        }
+    }
+}

WordPress/Classes/Extensions/SwiftUI/View+ReadSize.swift

@@ -0,0 +1,34 @@
+import SwiftUI
+
+private struct SizePreferenceKey: PreferenceKey {
+    static var defaultValue: CGSize = .zero
+
+    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
+        value = nextValue()
+    }
+}
+
+private struct SizeModifier: ViewModifier {
+    let size: (CGSize) -> Void
+
+    private var sizeView: some View {
+        GeometryReader { geometry in
+            Color.clear.preference(key: SizePreferenceKey.self, value: geometry.size)
+        }
+    }
+
+    func body(content: Content) -> some View {
+        content.background(
+            sizeView
+                .onPreferenceChange(SizePreferenceKey.self, perform: { value in
+                    size(value)
+                })
+        )
+    }
+}
+
+extension View {
+    func readSize(_ size: @escaping (CGSize) -> Void) -> some View {
+        modifier(SizeModifier(size: size))
+    }
+}