feat(BottomSheet): Added SVG image format support. (#293)

* feat(BottomSheet): Added SDWebImage and SDWebImageSVGNativeCoder dependencies. Added SVG image format support.

* feat(BottomSheet): Changed how images are handled

Removed dependency of SDWebImage. Use only Coder for image creations from data

* Run swiftformat

* feat(BottomSheet): Update Package.swift

Co-authored-by: Alejandro Megías <Alejandro.Megias.Zapata@telefonica.com>

* feat(BottomSheet): Changed tests

* feat(BottomSheet): Change load and derived functions

* feat(BottomSheet): Update screenshoots

* Run swiftformat

* feat(BottomSheet): Fix if there is no dark image, do not override light

* Removed old SVG test snapshots

---------

Co-authored-by: WanaldinoTelefonica <WanaldinoTelefonica@users.noreply.github.com>
Co-authored-by: Alejandro Megías <Alejandro.Megias.Zapata@telefonica.com>

MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogSheetViewController.swift

@@ -18,6 +18,7 @@ private enum Section: Int, CaseIterable {
     case assetSize
     case sheetType
     case informativeIconType
+    case imageType
     case actionStyle
     case showSheet
 }
@@ -103,6 +104,17 @@ class UICatalogSheetViewController: UIViewController {
         return cell
     }()
 
+    private lazy var iconURLTypeCell: UISegmentedControlTableViewCell = {
+        let cell = UISegmentedControlTableViewCell(reuseIdentifier: "iconURLTypeCell")
+
+        cell.segmentedControl.insertSegment(withTitle: "PNG", at: 0, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "SVG URL", at: 1, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "SVG URI", at: 2, animated: false)
+
+        cell.segmentedControl.selectedSegmentIndex = 0
+        return cell
+    }()
+
     private lazy var actionStyleCell: UISegmentedControlTableViewCell = {
         let cell = UISegmentedControlTableViewCell(reuseIdentifier: "actionStyle")
 
@@ -129,6 +141,7 @@ class UICatalogSheetViewController: UIViewController {
         [assetSizeCell],
         [sheetTypeCell],
         [informativeIconTypeCell],
+        [iconURLTypeCell],
         [actionStyleCell],
         [showSheetCell]
     ]
@@ -232,6 +245,24 @@ private extension UICatalogSheetViewController {
         Int(numberOfElementsCell.currentValue)
     }
 
+    var iconURL: String {
+        switch iconURLTypeCell.segmentedControl.selectedSegmentIndex {
+        case 0: return "https://img.icons8.com/ios-glyphs/344/bookmark.png"
+        case 1: return "https://www.svgrepo.com/show/19461/url-link.svg"
+        case 2: return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIGhlaWdodD0iMTAwcHgiIHdpZHRoPSIxMDBweCI+CjxnPgoJPHBhdGggZD0iTTI4LjEsMzYuNmM0LjYsMS45LDEyLjIsMS42LDIwLjksMS4xYzguOS0wLjQsMTktMC45LDI4LjksMC45YzYuMywxLjIsMTEuOSwzLjEsMTYuOCw2Yy0xLjUtMTIuMi03LjktMjMuNy0xOC42LTMxLjMgICBjLTQuOS0wLjItOS45LDAuMy0xNC44LDEuNEM0Ny44LDE3LjksMzYuMiwyNS42LDI4LjEsMzYuNnoiLz4KCTxwYXRoIGQ9Ik03MC4zLDkuOEM1Ny41LDMuNCw0Mi44LDMuNiwzMC41LDkuNWMtMyw2LTguNCwxOS42LTUuMywyNC45YzguNi0xMS43LDIwLjktMTkuOCwzNS4yLTIzLjFDNjMuNywxMC41LDY3LDEwLDcwLjMsOS44eiIvPgoJPHBhdGggZD0iTTE2LjUsNTEuM2MwLjYtMS43LDEuMi0zLjQsMi01LjFjLTMuOC0zLjQtNy41LTctMTEtMTAuOGMtMi4xLDYuMS0yLjgsMTIuNS0yLjMsMTguN0M5LjYsNTEuMSwxMy40LDUwLjIsMTYuNSw1MS4zeiIvPgoJPHBhdGggZD0iTTksMzEuNmMzLjUsMy45LDcuMiw3LjYsMTEuMSwxMS4xYzAuOC0xLjYsMS43LTMuMSwyLjYtNC42YzAuMS0wLjIsMC4zLTAuNCwwLjQtMC42Yy0yLjktMy4zLTMuMS05LjItMC42LTE3LjYgICBjMC44LTIuNywxLjgtNS4zLDIuNy03LjRjLTUuMiwzLjQtOS44LDgtMTMuMywxMy43QzEwLjgsMjcuOSw5LjgsMjkuNyw5LDMxLjZ6Ii8+Cgk8cGF0aCBkPSJNMTUuNCw1NC43Yy0yLjYtMS02LjEsMC43LTkuNywzLjRjMS4yLDYuNiwzLjksMTMsOCwxOC41QzEzLDY5LjMsMTMuNSw2MS44LDE1LjQsNTQuN3oiLz4KCTxwYXRoIGQ9Ik0zOS44LDU3LjZDNTQuMyw2Ni43LDcwLDczLDg2LjUsNzYuNGMwLjYtMC44LDEuMS0xLjYsMS43LTIuNWM0LjgtNy43LDctMTYuMyw2LjgtMjQuOGMtMTMuOC05LjMtMzEuMy04LjQtNDUuOC03LjcgICBjLTkuNSwwLjUtMTcuOCwwLjktMjMuMi0xLjdjLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC40Yy0xLDEuNy0yLDMuNC0yLjksNS4xQzI4LjIsNDkuNywzMy44LDUzLjksMzkuOCw1Ny42eiIvPgoJPHBhdGggZD0iTTI2LjIsODguMmMzLjMsMiw2LjcsMy42LDEwLjIsNC43Yy0zLjUtNi4yLTYuMy0xMi42LTguOC0xOC41Yy0zLjEtNy4yLTUuOC0xMy41LTktMTcuMmMtMS45LDgtMiwxNi40LTAuMywyNC43ICAgQzIwLjYsODQuMiwyMy4yLDg2LjMsMjYuMiw4OC4yeiIvPgoJPHBhdGggZD0iTTMwLjksNzNjMi45LDYuOCw2LjEsMTQuNCwxMC41LDIxLjJjMTUuNiwzLDMyLTIuMyw0Mi42LTE0LjZDNjcuNyw3Niw1Mi4yLDY5LjYsMzcuOSw2MC43QzMyLDU3LDI2LjUsNTMsMjEuMyw0OC42ICAgYy0wLjYsMS41LTEuMiwzLTEuNyw0LjZDMjQuMSw1Ny4xLDI3LjMsNjQuNSwzMC45LDczeiIvPgo8L2c+Cjwvc3ZnPg=="
+        default: fatalError("Unhandled icon type")
+        }
+    }
+
+    var iconURLDark: String {
+        switch iconURLTypeCell.segmentedControl.selectedSegmentIndex {
+        case 0: return "https://img.icons8.com/ios/344/bookmark--v1.png"
+        case 1: return "https://www.svgrepo.com/show/75701/lock.svg"
+        case 2: return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjUgNy4zNzVDNy41IDYuMzM5NDcgOC4zMzk0NyA1LjUgOS4zNzUgNS41QzEwLjQxMDUgNS41IDExLjI1IDYuMzM5NDcgMTEuMjUgNy4zNzVWMTYuNjI1QzExLjI1IDE4LjQ4OSAxMi43NjEgMjAgMTQuNjI1IDIwQzE2LjQ4OSAyMCAxOCAxOC40ODkgMTggMTYuNjI1VjExLjgxMDdMMTkuMjE5NyAxMy4wMzAzTDIwLjI4MDMgMTEuOTY5N0wxNy4yNSA4LjkzOTM0TDE0LjIxOTcgMTEuOTY5N0wxNS4yODAzIDEzLjAzMDNMMTYuNSAxMS44MTA3VjE2LjYyNUMxNi41IDE3LjY2MDUgMTUuNjYwNSAxOC41IDE0LjYyNSAxOC41QzEzLjU4OTUgMTguNSAxMi43NSAxNy42NjA1IDEyLjc1IDE2LjYyNVY3LjM3NUMxMi43NSA1LjUxMTA0IDExLjIzOSA0IDkuMzc1IDRDNy41MTEwNCA0IDYgNS41MTEwNCA2IDcuMzc1VjkuNUg0VjE1SDkuNVY5LjVINy41VjcuMzc1Wk01LjUgMTFWMTMuNUg4VjExSDUuNVoiIGZpbGw9IiMxRjIzMjgiLz4NCjwvc3ZnPg=="
+        default: fatalError("Unhandled icon type")
+        }
+    }
+
     var singleSelectionSheet: SheetConfiguration {
         var rows: [SingleSelectionItem] = []
 
@@ -242,8 +273,8 @@ private extension UICatalogSheetViewController {
                 description: "Description",
                 icon: assetCell.segmentedControl.selectedSegmentIndex == 0
                     ? SingleSelectionItemIcon(
-                        url: "https://img.icons8.com/ios-glyphs/344/bookmark.png",
-                        urlDark: "https://img.icons8.com/ios/344/bookmark--v1.png",
+                        url: iconURL,
+                        urlDark: iconURLDark,
                         size: assetSizeCell.segmentedControl.selectedSegmentIndex == 0 ? .small : .large
                     )
                     : nil
@@ -279,13 +310,13 @@ private extension UICatalogSheetViewController {
             icon = .bullet
         case 1:
             icon = .regular(
-                url: "https://img.icons8.com/ios-glyphs/344/bookmark.png",
-                urlDark: "https://img.icons8.com/ios/344/bookmark--v1.png"
+                url: iconURL,
+                urlDark: iconURLDark
             )
         case 2:
             icon = .small(
-                url: "https://img.icons8.com/ios-glyphs/344/bookmark.png",
-                urlDark: "https://img.icons8.com/ios/344/bookmark--v1.png"
+                url: iconURL,
+                urlDark: iconURLDark
             )
         default:
             fatalError("Unhandled informative icon type")
@@ -327,8 +358,8 @@ private extension UICatalogSheetViewController {
                 id: index.description,
                 title: "List Item \(index)",
                 style: actionStyleCell.segmentedControl.selectedSegmentIndex == 0 ? .normal : .destructive,
-                url: "https://img.icons8.com/ios-glyphs/344/bookmark.png",
-                urlDark: "https://img.icons8.com/ios/344/bookmark--v1.png"
+                url: iconURL,
+                urlDark: iconURLDark
             )
 
             rows.append(item)
@@ -364,6 +395,7 @@ private extension Section {
         case .sheetType: return "Sheet type"
         case .assetSize: return "Asset size"
         case .informativeIconType: return "Informative icon type"
+        case .imageType: return "Image format"
         case .actionStyle: return "Action style"
         case .showSheet: return nil
         }

Package.swift

@@ -15,7 +15,9 @@ let package = Package(
     ],
     dependencies: [
         .package(url: "https://github.com/airbnb/lottie-ios.git", exact: "3.1.8"),
-        .package(url: "https://github.com/pointfreeco/swift-snapshot-testing.git", exact: "1.8.2")
+        .package(url: "https://github.com/pointfreeco/swift-snapshot-testing.git", exact: "1.8.2"),
+        .package(url: "https://github.com/SDWebImage/SDWebImage.git", exact: "5.17.0"),
+        .package(url: "https://github.com/SDWebImage/SDWebImageSVGNativeCoder.git", exact: "0.1.1")
     ],
     targets: [
         .target(
@@ -100,6 +102,8 @@ let package = Package(
             name: "Mistica",
             dependencies: [
                 .product(name: "Lottie", package: "lottie-ios"),
+                .product(name: "SDWebImage", package: "SDWebImage"),
+                .product(name: "SDWebImageSVGNativeCoder", package: "SDWebImageSVGNativeCoder"),
                 "MisticaCommon"
             ],
             exclude: [

Sources/Mistica/Utils/Extensions/UIImageView+URL.swift

@@ -6,71 +6,27 @@
 //  Copyright © Telefonica. All rights reserved.
 //
 
+import SDWebImage
+import SDWebImageSVGNativeCoder
 import UIKit
 
 extension UIImageView {
     /// Loads the urls asynchronously
     func load(url: URL, urlForDarkMode: URL? = nil, renderAsTemplate: Bool = false) {
-        guard UIView.areAnimationsEnabled else {
-            downloadImage(
-                url: url,
-                urlForDarkMode: urlForDarkMode
-            ) { [weak self] lightImageData, darkImageData in
-                guard let lightImageData else { return }
-                self?.updateImage(imageData: lightImageData, darkImageData: darkImageData)
-            }
-            return
-        }
+        let coder = SDImageSVGNativeCoder.shared
+        SDImageCodersManager.shared.removeCoder(coder)
+        SDImageCodersManager.shared.addCoder(coder)
 
-        DispatchQueue.global().async { [weak self] in
-            self?.downloadImage(
-                url: url,
-                urlForDarkMode: urlForDarkMode,
-                completion: { [weak self] lightImageData, darkImageData in
-                    guard let lightImageData else { return }
+        sd_setImage(with: url) { [weak self] lightImage, _, _, _ in
+            self?.sd_setImage(with: urlForDarkMode) { darkImage, _, _, _ in
+                guard let lightImage else { return }
 
-                    DispatchQueue.main.async {
-                        self?.updateImage(imageData: lightImageData, darkImageData: darkImageData)
-                    }
+                if let darkImage {
+                    lightImage.imageAsset?.register(darkImage, with: UITraitCollection(userInterfaceStyle: .dark))
                 }
-            )
-        }
-    }
-}
-
-private extension UIImageView {
-    func downloadImage(url: URL, urlForDarkMode: URL?, completion: (Data?, Data?) -> Void) {
-        guard let lightImageData = try? Data(contentsOf: url) else {
-            completion(nil, nil)
-            return
-        }
-
-        var darkImageData: Data?
-
-        if let urlForDarkMode = urlForDarkMode {
-            darkImageData = try? Data(contentsOf: urlForDarkMode)
-        }
 
-        completion(lightImageData, darkImageData)
-    }
-
-    func updateImage(imageData: Data, darkImageData: Data?, renderAsTemplate: Bool = false) {
-        var lightImage = UIImage(data: imageData)
-        var darkImage: UIImage?
-
-        if let darkImageData {
-            darkImage = .init(data: darkImageData)
-        }
-
-        if renderAsTemplate {
-            lightImage = lightImage?.withRenderingMode(.alwaysTemplate)
-            darkImage = darkImage?.withRenderingMode(.alwaysTemplate)
-        }
-
-        image = lightImage
-
-        if let darkImage = darkImage {
-            image?.imageAsset?.register(darkImage, with: .init(userInterfaceStyle: .dark))
+                self?.image = lightImage
+            }
         }
     }
 }