feat(PosterCard): LATCH-2313 Poster card component

MisticaCatalog/MisticaCatalog.xcodeproj/project.pbxproj

@@ -87,6 +87,10 @@
 		B8F990522546C98700DFBFE9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8F9902A2546C98600DFBFE9 /* AppDelegate.swift */; };
 		B8F990532546C98700DFBFE9 /* ComponentsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8F9902B2546C98600DFBFE9 /* ComponentsView.swift */; };
 		B8F990632546CAA500DFBFE9 /* Mistica in Frameworks */ = {isa = PBXBuildFile; productRef = B8F990622546CAA500DFBFE9 /* Mistica */; };
+		BB9A70262CDFFBA900B2767F /* CardRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = BB9A70252CDFFB9800B2767F /* CardRow.swift */; };
+		BB9A70292CE0D94900B2767F /* CardList.swift in Sources */ = {isa = PBXBuildFile; fileRef = BB9A70282CE0D93D00B2767F /* CardList.swift */; };
+		BB9A702B2CE0E34600B2767F /* PosterCardCatalogView.swift in Sources */ = {isa = PBXBuildFile; fileRef = BB9A702A2CE0E34300B2767F /* PosterCardCatalogView.swift */; };
+		BB9A702E2CE3B3BE00B2767F /* airpods.mp4 in Resources */ = {isa = PBXBuildFile; fileRef = BB9A702D2CE3B3BE00B2767F /* airpods.mp4 */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -172,6 +176,10 @@
 		B8F9902B2546C98600DFBFE9 /* ComponentsView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ComponentsView.swift; sourceTree = "<group>"; };
 		B8F990562546C99300DFBFE9 /* MisticaCatalogConfig.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = MisticaCatalogConfig.xcconfig; sourceTree = "<group>"; };
 		B8F990572546C99300DFBFE9 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		BB9A70252CDFFB9800B2767F /* CardRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardRow.swift; sourceTree = "<group>"; };
+		BB9A70282CE0D93D00B2767F /* CardList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardList.swift; sourceTree = "<group>"; };
+		BB9A702A2CE0E34300B2767F /* PosterCardCatalogView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PosterCardCatalogView.swift; sourceTree = "<group>"; };
+		BB9A702D2CE3B3BE00B2767F /* airpods.mp4 */ = {isa = PBXFileReference; lastKnownFileType = file; path = airpods.mp4; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -207,24 +215,25 @@
 		18E4854C287F19EB0052A6F2 /* Components */ = {
 			isa = PBXGroup;
 			children = (
-				18E4854D287F19EB0052A6F2 /* InputFieldCatalogView.swift */,
-				18E4854E287F19EB0052A6F2 /* StepperCatalogVIew.swift */,
-				18E4854F287F19EB0052A6F2 /* EmptyStateCatalogView.swift */,
-				18E48550287F19EB0052A6F2 /* SnackbarCatalogView.swift */,
+				18E4855A287F19EB0052A6F2 /* BadgeCatalogView.swift */,
+				18E48556287F19EB0052A6F2 /* ButtonCatalogView.swift */,
 				18E48551287F19EB0052A6F2 /* CalloutCatalogView.swift */,
-				18E48552287F19EB0052A6F2 /* FeedbackCatalogView.swift */,
-				18E48553287F19EB0052A6F2 /* RadioButtonCatalogView.swift */,
 				18E48554287F19EB0052A6F2 /* CarouselCatalogView.swift */,
+				18E48558287F19EB0052A6F2 /* CheckboxCatalogView.swift */,
 				18E48555287F19EB0052A6F2 /* ChipCatalogView.swift */,
-				18E48556287F19EB0052A6F2 /* ButtonCatalogView.swift */,
 				18E48557287F19EB0052A6F2 /* DataCardCatalogView.swift */,
-				18E48558287F19EB0052A6F2 /* CheckboxCatalogView.swift */,
-				18E48559287F19EB0052A6F2 /* TabsCatalogView.swift */,
-				18E4855A287F19EB0052A6F2 /* BadgeCatalogView.swift */,
-				18E4855B287F19EB0052A6F2 /* TagCatalogView.swift */,
-				18E4855C287F19EB0052A6F2 /* ListCatalogView.swift */,
+				18E4854F287F19EB0052A6F2 /* EmptyStateCatalogView.swift */,
+				18E48552287F19EB0052A6F2 /* FeedbackCatalogView.swift */,
 				1822CA1929E821D400980D47 /* HeaderCatalogView.swift */,
+				18E4854D287F19EB0052A6F2 /* InputFieldCatalogView.swift */,
+				18E4855C287F19EB0052A6F2 /* ListCatalogView.swift */,
+				BB9A702A2CE0E34300B2767F /* PosterCardCatalogView.swift */,
+				18E48553287F19EB0052A6F2 /* RadioButtonCatalogView.swift */,
 				244D00C52C491D4600424AA5 /* SkeletonsCatalogView.swift */,
+				18E48550287F19EB0052A6F2 /* SnackbarCatalogView.swift */,
+				18E4854E287F19EB0052A6F2 /* StepperCatalogVIew.swift */,
+				18E48559287F19EB0052A6F2 /* TabsCatalogView.swift */,
+				18E4855B287F19EB0052A6F2 /* TagCatalogView.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -334,6 +343,7 @@
 		B8F98FFF2546C98600DFBFE9 /* Catalog */ = {
 			isa = PBXGroup;
 			children = (
+				BB9A70272CE0D92A00B2767F /* Cards */,
 				18E48549287F19EB0052A6F2 /* CatalogList.swift */,
 				18E17AEE288007340051E505 /* Framework.swift */,
 				18E17AEC287FFFBF0051E505 /* CatalogRow.swift */,
@@ -382,6 +392,7 @@
 		B8F990552546C99300DFBFE9 /* SupportFiles */ = {
 			isa = PBXGroup;
 			children = (
+				BB9A702C2CE3B3AB00B2767F /* Samples */,
 				B8F990562546C99300DFBFE9 /* MisticaCatalogConfig.xcconfig */,
 				B8F990572546C99300DFBFE9 /* Info.plist */,
 			);
@@ -395,6 +406,23 @@
 			name = Frameworks;
 			sourceTree = "<group>";
 		};
+		BB9A70272CE0D92A00B2767F /* Cards */ = {
+			isa = PBXGroup;
+			children = (
+				BB9A70282CE0D93D00B2767F /* CardList.swift */,
+				BB9A70252CDFFB9800B2767F /* CardRow.swift */,
+			);
+			path = Cards;
+			sourceTree = "<group>";
+		};
+		BB9A702C2CE3B3AB00B2767F /* Samples */ = {
+			isa = PBXGroup;
+			children = (
+				BB9A702D2CE3B3BE00B2767F /* airpods.mp4 */,
+			);
+			path = Samples;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -470,6 +498,7 @@
 				B8F990302546C98700DFBFE9 /* Assets.xcassets in Resources */,
 				B8F9902C2546C98600DFBFE9 /* LaunchScreen.storyboard in Resources */,
 				84126F772C2C00C500ECA607 /* VivoTypeLight.ttf in Resources */,
+				BB9A702E2CE3B3BE00B2767F /* airpods.mp4 in Resources */,
 				8462A7A62C34176400BE8E96 /* Telefonica Sans Light.otf in Resources */,
 				84126F792C2C00C500ECA607 /* OnAir-Medium.ttf in Resources */,
 				842854EA2CD911E500F007AB /* VivoTypeMedium.ttf in Resources */,
@@ -540,15 +569,18 @@
 				B8F990332546C98700DFBFE9 /* UIView+Utils.swift in Sources */,
 				18E4858A287F19EB0052A6F2 /* BadgeCatalogView.swift in Sources */,
 				18E48583287F19EB0052A6F2 /* RadioButtonCatalogView.swift in Sources */,
+				BB9A702B2CE0E34600B2767F /* PosterCardCatalogView.swift in Sources */,
 				18E4858F287F19EB0052A6F2 /* UICatalogScrollContentIndicatorViewController.swift in Sources */,
 				18E4857B287F19EB0052A6F2 /* CatalogList.swift in Sources */,
 				18E48586287F19EB0052A6F2 /* ButtonCatalogView.swift in Sources */,
 				B8F990372546C98700DFBFE9 /* Optional+Utils.swift in Sources */,
 				B8F9903A2546C98700DFBFE9 /* UISwitchTableViewCell.swift in Sources */,
+				BB9A70292CE0D94900B2767F /* CardList.swift in Sources */,
 				18E4859B287F19EB0052A6F2 /* UICatalogViewStatesViewController.swift in Sources */,
 				18E485A0287F19EB0052A6F2 /* UICatalogListsViewController.swift in Sources */,
 				18E4858C287F19EB0052A6F2 /* ListCatalogView.swift in Sources */,
 				B8F990352546C98700DFBFE9 /* UITableView+Utils.swift in Sources */,
+				BB9A70262CDFFBA900B2767F /* CardRow.swift in Sources */,
 				18E48594287F19EB0052A6F2 /* UICatalogMediaCardViewController.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

MisticaCatalog/Source/Assets.xcassets/Samples/airpods.imageset/Contents.json

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

MisticaCatalog/Source/Catalog/Cards/CardList.swift

@@ -0,0 +1,97 @@
+//
+//  CardList.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import MisticaSwiftUI
+import SwiftUI
+
+struct CardList: View {
+    @State var selectedFrameworkIndex = 0
+    let rows: [CardRow]
+
+    var body: some View {
+        List {
+            ForEach(rows) { row in
+                Cell(
+                    style: .fullwidth,
+                    title: row.title,
+                    subtitle: nil,
+                    description: nil,
+                    assetType: .smallIcon(
+                        Image(uiImage: row.icon),
+                        foregroundColor: nil
+                    ),
+                    presetView: { CellNavigationPreset() },
+                    headlineView: {},
+                    destinationView: {
+                        componentView(for: row)
+                            .navigationTitle(row.title)
+                            .navigationBarTitleDisplayMode(.inline)
+                    }
+                )
+                .shouldShowDivider(row != rows.last)
+            }
+        }
+        .misticaListStyle()
+    }
+
+    @ViewBuilder
+    func componentView(for row: CardRow) -> some View {
+        VStack(spacing: 0) {
+            Tabs(
+                Framework.allCases.map { TabItem(text: $0.name) },
+                selection: $selectedFrameworkIndex
+            )
+
+            switch Framework.allCases[selectedFrameworkIndex] {
+            case .swiftUI:
+                row.swiftUIComponent.expandVertically()
+            case .uiKit:
+                row.uiKitComponent.expandVertically()
+            }
+        }
+    }
+}
+
+private extension CardRow {
+    @ViewBuilder
+    var swiftUIComponent: some View {
+        switch self {
+        case .dataCard:
+            DataCardCatalogView()
+        case .posterCard:
+            PosterCardCatalogView()
+        case .snapCard:
+            notImplementedView
+        }
+    }
+
+    @ViewBuilder
+    var uiKitComponent: some View {
+        switch self {
+        case .dataCard:
+            ComponentViewController(UICatalogCardsViewController())
+        case .posterCard,
+             .snapCard:
+            notImplementedView
+        }
+    }
+
+    @ViewBuilder
+    var notImplementedView: some View {
+        Text("Not implemented yet")
+            .font(.textPreset5())
+            .foregroundColor(.textPrimary)
+    }
+}
+
+#Preview {
+    NavigationView {
+        CardList(rows: CardRow.allCases)
+    }
+    .misticaNavigationViewStyle()
+}

MisticaCatalog/Source/Catalog/Cards/CardRow.swift

@@ -0,0 +1,39 @@
+//
+//  CardRow.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import Foundation
+import MisticaCommon
+import UIKit
+
+enum CardRow: Int, CaseIterable, Identifiable {
+    case dataCard
+    case posterCard
+    case snapCard
+
+    var id: Int {
+        rawValue
+    }
+}
+
+extension CardRow {
+    var title: String {
+        switch self {
+        case .dataCard: "Data Card"
+        case .posterCard: "Poster Card"
+        case .snapCard: "Snap Card"
+        }
+    }
+
+    var icon: UIImage {
+        switch self {
+        case .dataCard: .cardIcon
+        case .posterCard: .cardIcon
+        case .snapCard: .cardIcon
+        }
+    }
+}

MisticaCatalog/Source/Catalog/CatalogList.swift

@@ -68,7 +68,7 @@ private extension CatalogRow {
         case .skeletons:
             SkeletonsCatalogView()
         case .cards:
-            DataCardCatalogView()
+            CardList(rows: CardRow.allCases)
         case .crouton:
             SnackbarCatalogView()
         case .feedbacks:

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

@@ -127,6 +127,7 @@ struct ListCatalogView: View {
 }
 
 extension Image {
+    static let airpods = Image("airpods")
     static let photo = Image(systemName: "photo")
     static let netflixLogo = Image("netflix-logo")
 }