IOS-10414 Add Skeleton components in SwiftUI and UIKit

MisticaCatalog/MisticaCatalog.xcodeproj/project.pbxproj

@@ -53,6 +53,8 @@
 		18E485A4287F19EB0052A6F2 /* UICatalogCroutonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18E48575287F19EB0052A6F2 /* UICatalogCroutonViewController.swift */; };
 		18E485A5287F19EB0052A6F2 /* UICatalogBadgeViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18E48576287F19EB0052A6F2 /* UICatalogBadgeViewController.swift */; };
 		18E485A6287F19EB0052A6F2 /* UICatalogHeaderViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18E48577287F19EB0052A6F2 /* UICatalogHeaderViewController.swift */; };
+		244D00C62C491D4600424AA5 /* SkeletonsCatalogView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 244D00C52C491D4600424AA5 /* SkeletonsCatalogView.swift */; };
+		244D00C82C49392700424AA5 /* UICatalogSkeletonsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 244D00C72C49392700424AA5 /* UICatalogSkeletonsViewController.swift */; };
 		392E03DC28C6153C0081780B /* UICatalogSheetViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 392E03DB28C6153C0081780B /* UICatalogSheetViewController.swift */; };
 		3968C75E28C9E19600561194 /* UIStepperTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3968C75D28C9E19600561194 /* UIStepperTableViewCell.swift */; };
 		84038E0A2C38382E003E90F6 /* Telefonica Sans Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 84038E092C38382E003E90F6 /* Telefonica Sans Regular.otf */; };
@@ -133,6 +135,8 @@
 		18E48575287F19EB0052A6F2 /* UICatalogCroutonViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = UICatalogCroutonViewController.swift; sourceTree = "<group>"; };
 		18E48576287F19EB0052A6F2 /* UICatalogBadgeViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = UICatalogBadgeViewController.swift; sourceTree = "<group>"; };
 		18E48577287F19EB0052A6F2 /* UICatalogHeaderViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = UICatalogHeaderViewController.swift; sourceTree = "<group>"; };
+		244D00C52C491D4600424AA5 /* SkeletonsCatalogView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SkeletonsCatalogView.swift; sourceTree = "<group>"; };
+		244D00C72C49392700424AA5 /* UICatalogSkeletonsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UICatalogSkeletonsViewController.swift; sourceTree = "<group>"; };
 		392E03DB28C6153C0081780B /* UICatalogSheetViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UICatalogSheetViewController.swift; sourceTree = "<group>"; };
 		3968C75D28C9E19600561194 /* UIStepperTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UIStepperTableViewCell.swift; sourceTree = "<group>"; };
 		84038E092C38382E003E90F6 /* Telefonica Sans Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Telefonica Sans Regular.otf"; sourceTree = "<group>"; };
@@ -218,6 +222,7 @@
 				18E4855B287F19EB0052A6F2 /* TagCatalogView.swift */,
 				18E4855C287F19EB0052A6F2 /* ListCatalogView.swift */,
 				1822CA1929E821D400980D47 /* HeaderCatalogView.swift */,
+				244D00C52C491D4600424AA5 /* SkeletonsCatalogView.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -257,6 +262,7 @@
 				18E48576287F19EB0052A6F2 /* UICatalogBadgeViewController.swift */,
 				18E48577287F19EB0052A6F2 /* UICatalogHeaderViewController.swift */,
 				392E03DB28C6153C0081780B /* UICatalogSheetViewController.swift */,
+				244D00C72C49392700424AA5 /* UICatalogSkeletonsViewController.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -314,8 +320,8 @@
 				B8F9902A2546C98600DFBFE9 /* AppDelegate.swift */,
 				B8F990152546C98600DFBFE9 /* MisticaCatalogApp.swift */,
 				B8F9902B2546C98600DFBFE9 /* ComponentsView.swift */,
-				18E3452B289D46C5005E6D81 /* FontsView.swift */,
 				1860058E28A136CE009C3778 /* ColorsView.swift */,
+				18E3452B289D46C5005E6D81 /* FontsView.swift */,
 				B8F98FFF2546C98600DFBFE9 /* Catalog */,
 				B8F990062546C98600DFBFE9 /* Common */,
 			);
@@ -490,6 +496,7 @@
 				18E48584287F19EB0052A6F2 /* CarouselCatalogView.swift in Sources */,
 				18E485A4287F19EB0052A6F2 /* UICatalogCroutonViewController.swift in Sources */,
 				18E485A3287F19EB0052A6F2 /* UICatalogSectionTitleViewController.swift in Sources */,
+				244D00C62C491D4600424AA5 /* SkeletonsCatalogView.swift in Sources */,
 				1860058F28A136CE009C3778 /* ColorsView.swift in Sources */,
 				B8F9903D2546C98700DFBFE9 /* UITextFieldTableViewCell.swift in Sources */,
 				18E48587287F19EB0052A6F2 /* DataCardCatalogView.swift in Sources */,
@@ -510,6 +517,7 @@
 				18E4857F287F19EB0052A6F2 /* EmptyStateCatalogView.swift in Sources */,
 				18E4859F287F19EB0052A6F2 /* UICatalogPopoverViewController.swift in Sources */,
 				B8F990392546C98700DFBFE9 /* Bundle+MisticaCatalog.swift in Sources */,
+				244D00C82C49392700424AA5 /* UICatalogSkeletonsViewController.swift in Sources */,
 				18E17AED287FFFBF0051E505 /* CatalogRow.swift in Sources */,
 				18E48598287F19EB0052A6F2 /* UICatalogStepperViewController.swift in Sources */,
 				18E485A1287F19EB0052A6F2 /* UICatalogTabsViewController.swift in Sources */,

MisticaCatalog/Source/Assets.xcassets/Rows/Skeleton.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "Skeleton.svg",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "Skeleton_Dark.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

MisticaCatalog/Source/Catalog/CatalogList.swift

@@ -65,6 +65,8 @@ private extension CatalogRow {
             BadgeCatalogView()
         case .buttons:
             ButtonsCatalogView()
+        case .skeletons:
+            SkeletonsCatalogView()
         case .cards:
             DataCardCatalogView()
         case .crouton:
@@ -148,6 +150,8 @@ private extension CatalogRow {
             ComponentViewController(UICatalogEmptyStateViewController())
         case .sheet:
             ComponentViewController(UICatalogSheetViewController())
+        case .skeletons:
+            ComponentViewController(UICatalogSkeletonsViewController())
         case .chips,
              .carousel:
             notImplementedView

MisticaCatalog/Source/Catalog/CatalogRow.swift

@@ -14,6 +14,7 @@ enum CatalogRow: Int, CaseIterable, Identifiable {
     case badge
     case sheet
     case buttons
+    case skeletons
     case cards
     case controls
     case crouton
@@ -89,6 +90,8 @@ extension CatalogRow {
             return "Carousel"
         case .sheet:
             return "Sheet"
+        case .skeletons:
+            return "Skeletons"
         }
     }
 
@@ -140,6 +143,8 @@ extension CatalogRow {
             return .listIcon
         case .sheet:
             return .sheetIcon
+        case .skeletons:
+            return .skeletonIcon
         }
     }
 }

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

@@ -0,0 +1,103 @@
+//
+//  UICatalogSkeletonsViewController.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import Mistica
+import UIKit
+
+class UICatalogSkeletonsViewController: UIViewController {
+    private let scrollView: UIScrollView = {
+        let scrollView = UIScrollView()
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        return scrollView
+    }()
+
+    private let contentView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        setupUI()
+    }
+
+    private func setupUI() {
+        view.addSubview(scrollView)
+        scrollView.addSubview(contentView)
+
+        NSLayoutConstraint.activate([
+            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+
+            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
+            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
+            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
+            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
+            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
+        ])
+
+        addSkeletons()
+    }
+
+    private func addSkeletons() {
+        let mainStackView = UIStackView()
+        mainStackView.axis = .vertical
+        mainStackView.alignment = .fill
+        mainStackView.spacing = 40
+        mainStackView.translatesAutoresizingMaskIntoConstraints = false
+        contentView.addSubview(mainStackView)
+
+        NSLayoutConstraint.activate([
+            mainStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
+            mainStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
+            mainStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
+            mainStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
+        ])
+
+        addSkeletonWithLabel(to: mainStackView, label: "Line", skeleton: Skeleton(type: .line(width: 360)))
+
+        addSkeletonWithLabel(to: mainStackView, label: "Text", skeleton: Skeleton(type: .text()))
+
+        addSkeletonWithLabel(to: mainStackView, label: "Circle", skeleton: Skeleton(type: .circle(size: 40)))
+
+        addSkeletonWithLabel(to: mainStackView, label: "Row", skeleton: Skeleton(type: .row))
+
+        addSkeletonWithLabel(to: mainStackView, label: "Rectangle", skeleton: Skeleton(type: .rectangle(size: CGSize(width: 360, height: 180), isRounded: true)))
+
+        contentView.heightAnchor.constraint(equalTo: mainStackView.heightAnchor, constant: 32).isActive = true
+    }
+
+    private func addSkeletonWithLabel(to mainStackView: UIStackView, label: String, skeleton: Skeleton) {
+        let individualStackView = UIStackView()
+        individualStackView.axis = .vertical
+        individualStackView.alignment = .fill
+        individualStackView.spacing = 16
+        individualStackView.translatesAutoresizingMaskIntoConstraints = false
+
+        let titleLabel = UILabel()
+        titleLabel.text = label
+        titleLabel.font = UIFont.systemFont(ofSize: 16, weight: .bold)
+
+        individualStackView.addArrangedSubview(titleLabel)
+        individualStackView.addArrangedSubview(skeleton)
+
+        mainStackView.addArrangedSubview(individualStackView)
+
+        individualStackView.widthAnchor.constraint(equalTo: mainStackView.widthAnchor).isActive = true
+
+        if case .text = skeleton.type {
+            skeleton.widthAnchor.constraint(equalTo: individualStackView.widthAnchor).isActive = true
+        }
+        if case .row = skeleton.type {
+            skeleton.widthAnchor.constraint(equalTo: individualStackView.widthAnchor).isActive = true
+        }
+    }
+}

MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/SkeletonsCatalogView.swift

@@ -0,0 +1,54 @@
+//
+//  SkeletonsCatalogView.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import Foundation
+import MisticaSwiftUI
+import SwiftUI
+
+struct SkeletonsCatalogView: View {
+    @State var inverseStyle = false
+
+    var body: some View {
+        ScrollView(.vertical, showsIndicators: false) {
+            VStack(alignment: .leading, spacing: 40.0) {
+                skeletonSection(title: "Line", skeleton: Skeleton(type: .line(width: 360)))
+
+                skeletonSection(title: "Text", skeleton: Skeleton(type: .text()))
+
+                skeletonSection(title: "Circle", skeleton: Skeleton(type: .circle(size: .init(width: 40, height: 40))))
+
+                skeletonSection(title: "Row", skeleton: Skeleton(type: .row))
+
+                skeletonSection(title: "Rectangle", skeleton: Skeleton(type: .rectangle(width: 360, height: 180, isRounded: true)))
+
+                Spacer()
+            }
+            .padding()
+            .background(inverseStyle ? Color.brand : Color.background)
+        }
+    }
+
+    private func skeletonSection(title: String, skeleton: Skeleton) -> some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Text(title)
+                .font(.system(size: 16, weight: .bold))
+            skeleton
+        }
+    }
+}
+
+#if DEBUG
+    struct SkeletonCatalogView_Previews: PreviewProvider {
+        static var previews: some View {
+            NavigationView {
+                SkeletonsCatalogView()
+            }
+            .misticaNavigationViewStyle()
+        }
+    }
+#endif

MisticaCatalog/Source/Common/CatalogAssets.swift

@@ -35,6 +35,7 @@ extension UIImage {
     static let calloutIcon = UIImage(named: "Callout", in: .misticaCatalog, compatibleWith: nil)!
     static let emptyStateIcon = UIImage(named: "EmptyStates", in: .misticaCatalog, compatibleWith: nil)!
     static let sheetIcon = UIImage(named: "Sheets", in: .misticaCatalog, compatibleWith: nil)!
+    static let skeletonIcon = UIImage(named: "Skeleton", in: .misticaCatalog, compatibleWith: nil)!
 
     static let highlightedCardImageSample = UIImage(named: "HighlightedCardImageSample", in: .misticaCatalog, compatibleWith: nil)!
     static let highlightedCardBackgroundImageSample = UIImage(named: "HighlightedCardBackgroundSample", in: .misticaCatalog, compatibleWith: nil)!