SUBadge

- SUBadge
- BadgeVM
- Badge Style
- BadgePreview into App

Author: VislovIvan

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift

@@ -123,6 +123,26 @@ struct ContainerRadiusPicker<Custom: View>: View {
 
 // MARK: - FontPickers
 
+struct BadgeFontPicker: View {
+  let title: String
+  @Binding var selection: UniversalFont?
+  
+  init(title: String = "Font", selection: Binding<UniversalFont?>) {
+    self.title = title
+    self._selection = selection
+  }
+  
+  var body: some View {
+    Picker(self.title, selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smButton)
+      Text("Medium").tag(UniversalFont.mdButton)
+      Text("Large").tag(UniversalFont.lgButton)
+      Text("Custom: system bold of size 16").tag(UniversalFont.system(size: 16, weight: .bold))
+    }
+  }
+}
+
 struct BodyFontPicker: View {
   let title: String
   @Binding var selection: UniversalFont?

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/BadgePreview.swift

@@ -0,0 +1,32 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct BadgePreview: View {
+  @State private var model = BadgeVM {
+    $0.title = "Badge"
+  }
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "SwiftUI") {
+        SUBadge(model: self.model)
+      }
+      Form {
+        BadgeFontPicker(selection: self.$model.font)
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 20px").tag(ComponentRadius.custom(20))
+        }
+        Picker("Style", selection: self.$model.style) {
+          Text("Filled").tag(BadgeVM.Style.filled)
+          Text("Light").tag(BadgeVM.Style.light)
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  BadgePreview()
+}

Examples/DemosApp/DemosApp/Core/App.swift

@@ -8,6 +8,9 @@ struct App: View {
         NavigationLinkWithTitle("Alert") {
           AlertPreview()
         }
+        NavigationLinkWithTitle("Badge") {
+          BadgePreview()
+        }
         NavigationLinkWithTitle("Button") {
           ButtonPreview()
         }

Sources/ComponentsKit/Components/Badge/Models/BadgeStyle.swift

@@ -0,0 +1,9 @@
+import Foundation
+
+extension BadgeVM {
+  /// Defines the available visual styles for a badge.
+  public enum Style: Equatable {
+    case filled
+    case light
+  }
+}

Sources/ComponentsKit/Components/Badge/Models/BadgeVM.swift

@@ -0,0 +1,73 @@
+import SwiftUI
+
+/// A model that defines the appearance properties for a badge component.
+public struct BadgeVM: ComponentVM {
+  /// The text displayed on the badge.
+  public var title: String = ""
+
+  /// The color of the badge.
+  public var color: ComponentColor?
+
+  /// The visual style of the badge.
+  ///
+  /// Can be either `.filled` or `.light`.
+  /// Defaults to `.filled`.
+  public var style: Style = .filled
+
+  /// The font used for the badge's text.
+  ///
+  /// Defaults to `.smButton`.
+  public var font: UniversalFont? = .smButton
+
+  /// The corner radius of the badge.
+  ///
+  /// Defaults to `.medium`.
+  public var cornerRadius: ComponentRadius = .medium
+  
+  /// Vertical padding for the badge.
+  ///
+  /// Defaults to `8`.
+  public var verticalPadding: CGFloat = 8
+
+  /// Horizontal padding for the badge.
+  ///
+  /// Defaults to `10`.
+  public var horizontalPadding: CGFloat = 10
+  
+  /// Initializes a new instance of `BadgeVM` with default values.
+  public init() {}
+}
+
+// MARK: Helpers
+
+extension BadgeVM {
+  /// Returns the background color of the badge based on its style.
+  var backgroundColor: UniversalColor? {
+    switch self.style {
+    case .filled:
+      let color = self.color?.main ?? .content2
+      return color.enabled(true) // Badges are always "enabled"
+    case .light:
+      let color = self.color?.background ?? .content1
+      return color.enabled(true)
+    }
+  }
+
+  /// Returns the foreground color of the badge based on its style.
+  var foregroundColor: UniversalColor {
+    switch self.style {
+    case .filled:
+      return (self.color?.contrast ?? .foreground).enabled(true)
+    case .light:
+      return (self.color?.main ?? .foreground).enabled(true)
+    }
+  }
+
+  /// Returns the preferred font for the badge text.
+  var preferredFont: UniversalFont {
+    if let font {
+      return font
+    }
+    return .smButton
+  }
+}

Sources/ComponentsKit/Components/Badge/SUBadge.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+// MARK: - SUBadge
+
+/// A SwiftUI component that displays a badge.
+public struct SUBadge: View {
+  // MARK: Properties
+
+  /// A model that defines the appearance properties.
+  public var model: BadgeVM
+
+  // MARK: Initialization
+
+  /// Initializes a new instance of `SUBadge`.
+  /// - Parameter model: A model that defines the appearance properties.
+  public init(model: BadgeVM) {
+    self.model = model
+  }
+
+  // MARK: Body
+
+  public var body: some View {
+    Text(self.model.title)
+      .font(self.model.preferredFont.font)
+      .padding(.vertical, self.model.verticalPadding)
+      .padding(.horizontal, self.model.horizontalPadding)
+      .foregroundStyle(self.model.foregroundColor.color)
+      .background(self.model.backgroundColor?.color ?? .clear)
+      .clipShape(
+        RoundedRectangle(cornerRadius: self.model.cornerRadius.value())
+      )
+  }
+}