add docs and update card preview

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -8,16 +8,13 @@ struct CardPreview: View {
   var body: some View {
     VStack {
       PreviewWrapper(title: "UIKit") {
-        UKCard(model: self.model, content: {
-          let label = UILabel()
-          label.text = "Hello World!"
-          return label
-        })
+        UKCard(model: self.model, content: cardContent)
           .preview
       }
       Form {
         Picker("Background Color", selection: self.$model.backgroundColor) {
           Text("Default").tag(Optional<UniversalColor>.none)
+          Text("Secondary Background").tag(UniversalColor.secondaryBackground)
           Text("Accent Background").tag(ComponentColor.accent.background)
           Text("Success Background").tag(ComponentColor.success.background)
           Text("Warning Background").tag(ComponentColor.warning.background)
@@ -46,3 +43,26 @@ struct CardPreview: View {
 #Preview {
   CardPreview()
 }
+
+// MARK: - Helpers
+
+private func cardContent() -> UIView {
+  let titleLabel = UILabel()
+  titleLabel.text = "Card"
+  titleLabel.font = UniversalFont.mdHeadline.uiFont
+  titleLabel.textColor = UniversalColor.foreground.uiColor
+  titleLabel.numberOfLines = 0
+  
+  let subtitleLabel = UILabel()
+  subtitleLabel.text = "Card is a container for text, photos, and other content."
+  subtitleLabel.font = UniversalFont.mdBody.uiFont
+  subtitleLabel.textColor = UniversalColor.secondaryForeground.uiColor
+  subtitleLabel.numberOfLines = 0
+  
+  
+  let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
+  stackView.axis = .vertical
+  stackView.spacing = 8
+  
+  return stackView
+}

Sources/ComponentsKit/Components/Card/CardVM.swift

@@ -1,5 +1,6 @@
 import Foundation
 
+/// A model that defines the appearance properties for a card component.
 public struct CardVM: ComponentVM {
   /// The background color of the card's content area.
   public var backgroundColor: UniversalColor?
@@ -14,8 +15,12 @@ public struct CardVM: ComponentVM {
   /// Defaults to `.medium`.
   public var cornerRadius: ContainerRadius = .medium
 
+  /// The shadow of the card.
+  ///
+  /// Defaults to `.medium`.
   public var shadow: Shadow = .medium
 
+  /// Initializes a new instance of `CardVM` with default values.
   public init() {}
 }
 

Sources/ComponentsKit/Components/Card/UKCard.swift

@@ -1,20 +1,37 @@
 import AutoLayout
 import UIKit
 
+/// A UIKit component that serves as a container for provided content.
+///
+/// - Example:
+/// ```swift
+/// let banner = UKCard(
+///   model: .init(),
+///   content: { _ in
+///     let label = UILabel()
+///     label.text = "This is the content of the card."
+///     label.numberOfLines = 0
+///     return label
+///   }
+/// )
 open class UKCard: UIView, UKComponent {
   // MARK: - Typealiases
 
+  /// A closure that returns the content view to be displayed inside the card.
   public typealias Content = () -> UIView
 
   // MARK: - Subviews
 
+  /// The primary content of the card, provided as a custom view.
   public let content: UIView
+  /// The container view that holds the card's content.
   public let contentView = UIView()
 
   // MARK: - Properties
 
   private var contentConstraints = LayoutConstraints()
 
+  /// A model that defines the appearance properties.
   public var model: CardVM {
     didSet {
       self.update(oldValue)
@@ -23,6 +40,11 @@ open class UKCard: UIView, UKComponent {
 
   // MARK: - Initialization
 
+  /// Initializer.
+  ///
+  /// - Parameters:
+  ///   - model: A model that defines the appearance properties.
+  ///   - content: The content that is displayed in the card.
   public init(model: CardVM, content: @escaping Content) {
     self.model = model
     self.content = content()
@@ -40,6 +62,7 @@ open class UKCard: UIView, UKComponent {
 
   // MARK: - Setup
 
+  /// Sets up the card's subviews.
   open func setup() {
     self.addSubview(self.contentView)
     self.contentView.addSubview(self.content)
@@ -53,13 +76,15 @@ open class UKCard: UIView, UKComponent {
 
   // MARK: - Style
 
+  /// Applies styling to the card's subviews.
   open func style() {
     Self.Style.mainView(self, model: self.model)
     Self.Style.contentView(self.contentView, model: self.model)
   }
 
   // MARK: - Layout
 
+  /// Configures the layout.
   open func layout() {
     self.contentView.allEdges()