Merge pull request #26 from componentskit/RadioGroup-SwiftUI

RadioGroup SwiftUI

Author: mikhailChelbaev

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

@@ -1,6 +1,22 @@
 import ComponentsKit
 import SwiftUI
 
+// MARK: - AnimationScalePicker
+
+struct AnimationScalePicker: View {
+  @Binding var selection: AnimationScale
+
+  var body: some View {
+    Picker("Animation Scale", selection: self.$selection) {
+      Text("None").tag(AnimationScale.none)
+      Text("Small").tag(AnimationScale.small)
+      Text("Medium").tag(AnimationScale.medium)
+      Text("Large").tag(AnimationScale.large)
+      Text("Custom: 0.9").tag(AnimationScale.custom(0.9))
+    }
+  }
+}
+
 // MARK: - AutocapitalizationPicker
 
 struct AutocapitalizationPicker: View {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -18,13 +18,7 @@ struct ButtonPreview: View {
         SUButton(model: self.model)
       }
       Form {
-        Picker("Animation Scale", selection: self.$model.animationScale) {
-          Text("None").tag(AnimationScale.none)
-          Text("Small").tag(AnimationScale.small)
-          Text("Medium").tag(AnimationScale.medium)
-          Text("Large").tag(AnimationScale.large)
-          Text("Custom: 0.9").tag(AnimationScale.custom(0.9))
-        }
+        AnimationScalePicker(selection: self.$model.animationScale)
         ComponentColorPicker(selection: self.$model.color)
         CornerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/RadioGroupPreview.swift

@@ -0,0 +1,51 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct RadioGroupPreview: View {
+  @State private var selectedId: String?
+  @State private var model: RadioGroupVM<String> = {
+    var model = RadioGroupVM<String>()
+    model.items = [
+      RadioItemVM(id: "option1") { item in
+        item.title = "Option 1"
+      },
+      RadioItemVM(id: "option2") { item in
+        item.title = "Option 2"
+      },
+      RadioItemVM(id: "option3") { item in
+        item.title = "Option 3"
+      }
+    ]
+    return model
+  }()
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKComponentPreview(model: self.model) {
+          UKRadioGroup(model: self.model)
+        }
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SURadioGroup(selectedId: $selectedId, model: self.model)
+      }
+      Form {
+        AnimationScalePicker(selection: self.$model.animationScale)
+        UniversalColorPicker(title: "Color", selection: self.$model.color)
+        Toggle("Enabled", isOn: self.$model.isEnabled)
+        FontPicker(selection: self.$model.font)
+        SizePicker(selection: self.$model.size)
+        Picker("Spacing", selection: self.$model.spacing) {
+          Text("8px").tag(CGFloat(8))
+          Text("10px").tag(CGFloat(10))
+          Text("14px").tag(CGFloat(14))
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  RadioGroupPreview()
+}

Examples/DemosApp/DemosApp/Core/App.swift

@@ -21,6 +21,9 @@ struct App: View {
           NavigationLinkWithTitle("Loading") {
             LoadingPreview()
           }
+          NavigationLinkWithTitle("Radio Group") {
+            RadioGroupPreview()
+          }
           NavigationLinkWithTitle("Segmented Control") {
             SegmentedControlPreview()
           }

Sources/ComponentsKit/RadioGroup/Models/RadioGroupVM.swift

@@ -0,0 +1,154 @@
+import Foundation
+import UIKit
+
+/// A model that defines the appearance of a radio group component.
+public struct RadioGroupVM<ID: Hashable>: ComponentVM {
+  /// The scaling factor for the button's press animation, with a value between 0 and 1.
+  ///
+  /// Defaults to `.medium`.
+  public var animationScale: AnimationScale = .medium
+
+  /// The color of the selected radio button.
+  public var color: UniversalColor = .primary
+
+  /// The font used for the radio items' titles.
+  public var font: UniversalFont?
+
+  /// A Boolean value indicating whether the radio group is enabled or disabled.
+  ///
+  /// Defaults to `true`.
+  public var isEnabled: Bool = true
+
+  /// An array of items representing the options in the radio group.
+  ///
+  /// Must contain at least one item, and all items must have unique identifiers.
+  public var items: [RadioItemVM<ID>] = [] {
+    didSet {
+      guard self.items.isNotEmpty else {
+        assertionFailure("Array of items must contain at least one item.")
+        return
+      }
+      if let duplicatedId {
+        assertionFailure("Items must have unique ids! Duplicated id: \(duplicatedId)")
+      }
+    }
+  }
+
+  /// The predefined size of the radio buttons.
+  ///
+  /// Defaults to `.medium`.
+  public var size: ComponentSize = .medium
+
+  /// The spacing between radio items.
+  ///
+  /// Defaults to `10`.
+  public var spacing: CGFloat = 10
+
+  /// Initializes a new instance of `RadioGroupVM` with default values.
+  public init() {}
+}
+
+// MARK: - Shared Helpers
+
+extension RadioGroupVM {
+  var circleSize: CGFloat {
+    switch self.size {
+    case .small:
+      return 16
+    case .medium:
+      return 20
+    case .large:
+      return 24
+    }
+  }
+
+  var innerCircleSize: CGFloat {
+    switch self.size {
+    case .small:
+      return 10
+    case .medium:
+      return 12
+    case .large:
+      return 14
+    }
+  }
+
+  var lineWidth: CGFloat {
+    switch self.size {
+    case .small:
+      return 1.5
+    case .medium:
+      return 2.0
+    case .large:
+      return 2.0
+    }
+  }
+
+  func preferredFont(for id: ID) -> UniversalFont {
+    if let itemFont = self.item(for: id)?.font {
+      return itemFont
+    } else if let font = self.font {
+      return font
+    }
+
+    switch self.size {
+    case .small:
+      return UniversalFont.Component.small
+    case .medium:
+      return UniversalFont.Component.medium
+    case .large:
+      return UniversalFont.Component.large
+    }
+  }
+
+  func item(for id: ID) -> RadioItemVM<ID>? {
+    return self.items.first(where: { $0.id == id })
+  }
+}
+
+// MARK: - Appearance
+
+extension RadioGroupVM {
+  func isItemEnabled(_ item: RadioItemVM<ID>) -> Bool {
+    return item.isEnabled && self.isEnabled
+  }
+
+  func radioItemColor(for item: RadioItemVM<ID>, isSelected: Bool) -> UniversalColor {
+    let defaultColor = UniversalColor.universal(.uiColor(.lightGray))
+    let color = isSelected ? self.color : defaultColor
+    return self.isItemEnabled(item)
+    ? color
+    : color.withOpacity(ComponentsKitConfig.shared.layout.disabledOpacity)
+  }
+
+  func textColor(for item: RadioItemVM<ID>) -> UniversalColor {
+    let baseColor = Palette.Text.primary
+    return self.isItemEnabled(item)
+    ? baseColor
+    : baseColor.withOpacity(ComponentsKitConfig.shared.layout.disabledOpacity)
+  }
+}
+
+// MARK: - UIKit Helpers
+
+extension RadioGroupVM {
+  func shouldUpdateLayout(_ oldModel: RadioGroupVM<ID>) -> Bool {
+    return self.items != oldModel.items || self.size != oldModel.size
+  }
+}
+
+// MARK: - Validation
+
+extension RadioGroupVM {
+  /// Checks for duplicated item identifiers in the radio group.
+  private var duplicatedId: ID? {
+    var set: Set<ID> = []
+    for item in self.items {
+      if set.contains(item.id) {
+        return item.id
+      }
+      set.insert(item.id)
+    }
+    return nil
+  }
+}

Sources/ComponentsKit/RadioGroup/Models/RadioItemVM.swift

@@ -0,0 +1,38 @@
+import Foundation
+
+/// A model that defines the appearance properties for an item in a radio group.
+public struct RadioItemVM<ID: Hashable> {
+  /// The unique identifier for the radio item.
+  public var id: ID
+
+  /// The text displayed next to the radio button.
+  public var title: String = ""
+
+  /// The font used for the item's title.
+  public var font: UniversalFont?
+
+  /// A Boolean value indicating whether the item is enabled or disabled.
+  ///
+  /// Defaults to `true`.
+  public var isEnabled: Bool = true
+
+  /// Initializes a new instance of `RadioItemVM` with the specified identifier.
+  ///
+  /// - Parameter id: The unique identifier for the radio item.
+  public init(id: ID) {
+    self.id = id
+  }
+
+  /// Initializes a new instance of `RadioItemVM` with a closure for custom configuration.
+  ///
+  /// - Parameters:
+  ///   - id: The unique identifier for the radio item.
+  ///   - transform: A closure that allows for custom configuration of the model's properties.
+  public init(id: ID, _ transform: (_ value: inout Self) -> Void) {
+    var defaultValue = Self(id: id)
+    transform(&defaultValue)
+    self = defaultValue
+  }
+}
+
+extension RadioItemVM: Equatable, Identifiable {}

Sources/ComponentsKit/RadioGroup/SwiftUI/SURadioGroup.swift

@@ -0,0 +1,90 @@
+import SwiftUI
+
+/// A SwiftUI component that displays a group of radio buttons, allowing users to select one option from multiple choices.
+public struct SURadioGroup<ID: Hashable>: View {
+  // MARK: Properties
+
+  /// A model that defines the appearance properties.
+  public var model: RadioGroupVM<ID>
+
+  /// A Binding value to control the selected identifier.
+  @Binding public var selectedId: ID?
+
+  @State private var viewSizes: [ID: CGSize] = [:]
+  @Environment(\.colorScheme) private var colorScheme
+  @State private var tappingId: ID?
+
+  // MARK: Initialization
+
+  /// Initializer.
+  /// - Parameters:
+  ///   - selectedId: A binding to the selected identifier.
+  ///   - model: A model that defines the appearance properties.
+  public init(
+    selectedId: Binding<ID?>,
+    model: RadioGroupVM<ID>
+  ) {
+    self._selectedId = selectedId
+    self.model = model
+  }
+
+  // MARK: Body
+
+  public var body: some View {
+    VStack(alignment: .leading, spacing: self.model.spacing) {
+      ForEach(self.model.items) { item in
+        HStack(spacing: 8) {
+          ZStack {
+            Circle()
+              .strokeBorder(
+                self.model.radioItemColor(for: item, isSelected: self.selectedId == item.id).color(for: self.colorScheme),
+                lineWidth: self.model.lineWidth
+              )
+              .frame(width: self.model.circleSize, height: self.model.circleSize)
+            if self.selectedId == item.id {
+              Circle()
+                .fill(
+                  self.model.radioItemColor(for: item, isSelected: true).color(for: self.colorScheme)
+                )
+                .frame(width: self.model.innerCircleSize, height: self.model.innerCircleSize)
+                .transition(.scale)
+            }
+          }
+          .animation(.easeOut(duration: 0.2), value: self.selectedId)
+          .scaleEffect(self.tappingId == item.id ? self.model.animationScale.value : 1.0)
+          Text(item.title)
+            .font(self.model.preferredFont(for: item.id).font)
+            .foregroundColor(
+              self.model.textColor(for: item).color(for: self.colorScheme)
+            )
+        }
+        .background(
+          GeometryReader { proxy in
+            Color.clear
+              .onAppear {
+                self.viewSizes[item.id] = proxy.size
+              }
+              .onChange(of: proxy.size) { value in
+                self.viewSizes[item.id] = value
+              }
+          }
+        )
+        .simultaneousGesture(
+          DragGesture(minimumDistance: 0)
+            .onChanged { _ in
+              self.tappingId = item.id
+            }
+            .onEnded { gesture in
+              self.tappingId = nil
+
+              if let size = self.viewSizes[item.id],
+                 CGRect(origin: .zero, size: size).contains(gesture.location) {
+                self.selectedId = item.id
+              }
+            }
+        )
+        .disabled(!item.isEnabled || !self.model.isEnabled)
+      }
+    }
+  }
+}