[MBL-2893] Add RichTextView container

Kickstarter-Framework/Sources/Kickstarter-Framework/Kickstarter-iOS/Features/BetaTools/Controller/BetaToolsViewController.swift

@@ -4,6 +4,7 @@ import Library
 import MessageUI
 import Prelude
 import SafariServices
+import ServerDrivenUI
 import SwiftUI
 import UIKit
 
@@ -203,12 +204,24 @@ internal final class BetaToolsViewController: UITableViewController {
     self.navigationController?.pushViewController(viewController, animated: true)
   }
 
+  @ViewBuilder private func richTextView(
+    for project: RichTextExampleProjectsViewModel
+      .ProjectItem
+  ) -> some View {
+    ScrollView {
+      RichTextView(element: project.richText.asRichTextElements())
+    }
+    .navigationTitle(project.name)
+  }
+
   private func goToRichTextExample() {
-    let view = RichTextExampleProjectsView(onSelectProject: { [weak self] project in
-      let detail = UIHostingController(rootView: Text(project.name))
-      self?.navigationController?.pushViewController(detail, animated: true)
-    })
-    let viewController = UIHostingController(rootView: view)
+    let viewController = UIHostingController(
+      rootView: RichTextExampleProjectsView(onSelectProject: { [weak self] project in
+        guard let self else { return }
+        let detail = UIHostingController(rootView: self.richTextView(for: project))
+        self.navigationController?.pushViewController(detail, animated: true)
+      })
+    )
     self.navigationController?.pushViewController(viewController, animated: true)
   }
 

ServerDrivenUI/Sources/ServerDrivenUI/RichTextView.swift

@@ -0,0 +1,44 @@
+import KDS
+import SwiftUI
+
+public struct RichTextView: View {
+  public var element: [RichTextElement]
+  @Environment(\.richTextStyle) var style: any RichTextStyle
+
+  public init(element: [RichTextElement]) {
+    self.element = element
+  }
+
+  @ViewBuilder private func unimplemented(_ text: String) -> some View {
+    Text("Unimplemented! \(text)")
+      .font(.footnote)
+      .foregroundStyle(Color.red)
+      .frame(maxWidth: .infinity, alignment: .center)
+      .padding()
+      .backgroundStyle(Color.gray)
+  }
+
+  public var body: some View {
+    LazyVStack(spacing: self.style.blockSpacing) {
+      ForEach(Array(self.element.enumerated()), id: \.offset) { _, element in
+        switch element {
+        case let .text(text, header):
+          self.unimplemented("Text")
+        case let .listItem(listItem):
+          self.unimplemented("ListItem")
+        case .audio:
+          self.unimplemented("Audio")
+        case .photo:
+          self.unimplemented("Photo")
+        case .video:
+          self.unimplemented("Video")
+        case .oembed:
+          self.unimplemented("Oembed")
+        case .listItemOpen, .listItemClose:
+          Group {}
+        }
+      }
+    }
+    .padding(.horizontal, self.style.contentHorizontalPadding)
+  }
+}

graphql/queries/RichTextExampleProjectsQuery.graphql

@@ -1,5 +1,5 @@
 query RichTextExampleProjectsQuery{
-  projects(recommended: true, first: 20) {
+  projects(recommended: true, first: 10) {
     nodes{
       id
       name