Merge pull request #47 from componentskit/refactor/borders

mikhailChelbaev · web-flow · commit 0ffc58726ba8 · 2024-12-30T16:08:28.000+01:00
Added border width param to modal, card and alert
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/ModalPreview+Helpers.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/ModalPreview+Helpers.swift
@@ -65,6 +65,7 @@ struct ModalPreviewHelpers {
           Text("Warning Background").tag(ComponentColor.warning.background)
           Text("Danger Background").tag(ComponentColor.danger.background)
         }
+        BorderWidthPicker(selection: self.$model.borderWidth)
         Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
           .disabled(self.footer == nil)
         Picker("Outer Paddings", selection: self.$model.outerPaddings) {
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift
@@ -32,6 +32,21 @@ struct AutocapitalizationPicker: View {
   }
 }
 
+// MARK: - BorderWidthPicker
+
+struct BorderWidthPicker: View {
+  @Binding var selection: BorderWidth
+  
+  var body: some View {
+    Picker("Border Width", selection: self.$selection) {
+      Text("None").tag(BorderWidth.none)
+      Text("Small").tag(BorderWidth.small)
+      Text("Medium").tag(BorderWidth.medium)
+      Text("Large").tag(BorderWidth.large)
+    }
+  }
+}
+
 // MARK: - ComponentColorPicker
 
 struct ComponentColorPicker: View {
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift
@@ -89,6 +89,7 @@ struct AlertPreview: View {
             Text("Warning Background").tag(ComponentColor.warning.background)
             Text("Danger Background").tag(ComponentColor.danger.background)
           }
+          BorderWidthPicker(selection: self.$model.borderWidth)
           Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
           Picker("Content Paddings", selection: self.$model.contentPaddings) {
             Text("12px").tag(Paddings(padding: 12))
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift
@@ -23,6 +23,7 @@ struct CardPreview: View {
           Text("Warning Background").tag(ComponentColor.warning.background)
           Text("Danger Background").tag(ComponentColor.danger.background)
         }
+        BorderWidthPicker(selection: self.$model.borderWidth)
         Picker("Content Paddings", selection: self.$model.contentPaddings) {
           Text("12px").tag(Paddings(padding: 12))
           Text("16px").tag(Paddings(padding: 16))
diff --git a/Sources/ComponentsKit/Components/Alert/Models/AlertVM.swift b/Sources/ComponentsKit/Components/Alert/Models/AlertVM.swift
@@ -21,6 +21,11 @@ public struct AlertVM: ComponentVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the alert.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `false`.
@@ -56,6 +61,7 @@ extension AlertVM {
   var modalVM: CenterModalVM {
     return CenterModalVM {
       $0.backgroundColor = self.backgroundColor
+      $0.borderWidth = self.borderWidth
       $0.closesOnOverlayTap = self.closesOnOverlayTap
       $0.contentPaddings = self.contentPaddings
       $0.cornerRadius = self.cornerRadius
diff --git a/Sources/ComponentsKit/Components/Card/Models/CardVM.swift b/Sources/ComponentsKit/Components/Card/Models/CardVM.swift
@@ -5,6 +5,11 @@ public struct CardVM: ComponentVM {
   /// The background color of the card.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the card.
+  ///
+  /// Defaults to `.medium`.
+  public var borderWidth: BorderWidth = .medium
+
   /// The padding applied to the card's content area.
   ///
   /// Defaults to a padding value of `16` for all sides.
diff --git a/Sources/ComponentsKit/Components/Card/SUCard.swift b/Sources/ComponentsKit/Components/Card/SUCard.swift
@@ -44,7 +44,7 @@ public struct SUCard<Content: View>: View {
       .cornerRadius(self.model.cornerRadius.value)
       .overlay(
         RoundedRectangle(cornerRadius: self.model.cornerRadius.value)
-          .stroke(UniversalColor.divider.color, lineWidth: 1.0)
+          .stroke(UniversalColor.divider.color, lineWidth: self.model.borderWidth.value)
       )
       .shadow(self.model.shadow)
   }
diff --git a/Sources/ComponentsKit/Components/Card/UKCard.swift b/Sources/ComponentsKit/Components/Card/UKCard.swift
@@ -140,7 +140,7 @@ extension UKCard {
     static func mainView(_ view: UIView, model: Model) {
       view.backgroundColor = UniversalColor.background.uiColor
       view.layer.cornerRadius = model.cornerRadius.value
-      view.layer.borderWidth = 1
+      view.layer.borderWidth = model.borderWidth.value
       view.layer.borderColor = UniversalColor.divider.cgColor
       view.shadow(model.shadow)
     }
diff --git a/Sources/ComponentsKit/Components/Modal/Models/BottomModalVM.swift b/Sources/ComponentsKit/Components/Modal/Models/BottomModalVM.swift
@@ -5,6 +5,11 @@ public struct BottomModalVM: ModalVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the modal.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `true`.
diff --git a/Sources/ComponentsKit/Components/Modal/Models/CenterModalVM.swift b/Sources/ComponentsKit/Components/Modal/Models/CenterModalVM.swift
@@ -5,6 +5,11 @@ public struct CenterModalVM: ModalVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the modal.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `true`.
diff --git a/Sources/ComponentsKit/Components/Modal/Models/ModalVM.swift b/Sources/ComponentsKit/Components/Modal/Models/ModalVM.swift
@@ -5,6 +5,9 @@ public protocol ModalVM: ComponentVM {
   /// The background color of the modal.
   var backgroundColor: UniversalColor? { get set }
 
+  /// The border thickness of the modal.
+  var borderWidth: BorderWidth { get set }
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   var closesOnOverlayTap: Bool { get set }
 
diff --git a/Sources/ComponentsKit/Components/Modal/SwiftUI/ModalContent.swift b/Sources/ComponentsKit/Components/Modal/SwiftUI/ModalContent.swift
@@ -60,9 +60,11 @@ struct ModalContent<VM: ModalVM, Header: View, Body: View, Footer: View>: View {
     .frame(maxWidth: self.model.size.maxWidth, alignment: .leading)
     .background(self.model.preferredBackgroundColor.color)
     .background(UniversalColor.background.color)
-    .clipShape(RoundedRectangle(
-      cornerRadius: self.model.cornerRadius.value
-    ))
+    .clipShape(RoundedRectangle(cornerRadius: self.model.cornerRadius.value))
+    .overlay(
+      RoundedRectangle(cornerRadius: self.model.cornerRadius.value)
+        .stroke(UniversalColor.divider.color, lineWidth: self.model.borderWidth.value)
+    )
     .padding(self.model.outerPaddings.edgeInsets)
   }
 
diff --git a/Sources/ComponentsKit/Components/Modal/UIKit/UKModalController.swift b/Sources/ComponentsKit/Components/Modal/UIKit/UKModalController.swift
@@ -86,6 +86,12 @@ open class UKModalController<VM: ModalVM>: UIViewController {
       target: self,
       action: #selector(self.handleOverlayTap)
     ))
+
+    if #available(iOS 17.0, *) {
+      self.registerForTraitChanges([UITraitUserInterfaceStyle.self]) { (controller: Self, _: UITraitCollection) in
+        controller.handleTraitChanges()
+      }
+    }
   }
 
   @objc func handleOverlayTap() {
@@ -188,6 +194,21 @@ open class UKModalController<VM: ModalVM>: UIViewController {
     }
     self.containerWidthConstraint?.isActive = true
   }
+
+  // MARK: - UIViewController Methods
+
+  open override func traitCollectionDidChange(
+    _ previousTraitCollection: UITraitCollection?
+  ) {
+    super.traitCollectionDidChange(previousTraitCollection)
+    self.handleTraitChanges()
+  }
+
+  // MARK: - Helpers
+
+  @objc private func handleTraitChanges() {
+    Self.Style.content(self.content, model: self.model)
+  }
 }
 
 // MARK: - Style Helpers
@@ -211,7 +232,8 @@ extension UKModalController {
     static func content(_ view: UIView, model: VM) {
       view.backgroundColor = model.preferredBackgroundColor.uiColor
       view.layer.cornerRadius = model.cornerRadius.value
-      view.clipsToBounds = true
+      view.layer.borderColor = UniversalColor.divider.cgColor
+      view.layer.borderWidth = model.borderWidth.value
     }
     static func bodyWrapper(_ scrollView: UIScrollView) {
       scrollView.delaysContentTouches = false
diff --git a/Sources/ComponentsKit/Configuration/Layout.swift b/Sources/ComponentsKit/Configuration/Layout.swift
@@ -243,9 +243,9 @@ extension ComponentsKitConfig {
 
     /// The border width configuration for components.
     public var borderWidth: BorderWidth = .init(
-      small: 1.0,
-      medium: 2.0,
-      large: 3.0
+      small: 0.5,
+      medium: 1.0,
+      large: 2.0
     )
 
     /// The animation scale configuration for components.
diff --git a/Sources/ComponentsKit/Shared/Types/BorderWidth.swift b/Sources/ComponentsKit/Shared/Types/BorderWidth.swift
@@ -2,6 +2,8 @@ import Foundation
 
 /// An enumeration that defines border thickness for components.
 public enum BorderWidth: Hashable {
+  /// No border.
+  case none
   /// A small border width.
   case small
   /// A medium border width.
@@ -14,6 +16,8 @@ extension BorderWidth {
   /// The numeric value of the border width as a `CGFloat`.
   public var value: CGFloat {
     switch self {
+    case .none:
+      return 0.0
     case .small:
       return ComponentsKitConfig.shared.layout.borderWidth.small
     case .medium:

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ struct ModalPreviewHelpers {`
`65`	`65`	`Text("Warning Background").tag(ComponentColor.warning.background)`
`66`	`66`	`Text("Danger Background").tag(ComponentColor.danger.background)`
`67`	`67`	`}`
	`68`	`+ BorderWidthPicker(selection: self.$model.borderWidth)`
`68`	`69`	`Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)`
`69`	`70`	`.disabled(self.footer == nil)`
`70`	`71`	`Picker("Outer Paddings", selection: self.$model.outerPaddings) {`
Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,7 @@ struct AlertPreview: View {`
`89`	`89`	`Text("Warning Background").tag(ComponentColor.warning.background)`
`90`	`90`	`Text("Danger Background").tag(ComponentColor.danger.background)`
`91`	`91`	`}`
	`92`	`+ BorderWidthPicker(selection: self.$model.borderWidth)`
`92`	`93`	`Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)`
`93`	`94`	`Picker("Content Paddings", selection: self.$model.contentPaddings) {`
`94`	`95`	`Text("12px").tag(Paddings(padding: 12))`
Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ struct CardPreview: View {`
`23`	`23`	`Text("Warning Background").tag(ComponentColor.warning.background)`
`24`	`24`	`Text("Danger Background").tag(ComponentColor.danger.background)`
`25`	`25`	`}`
	`26`	`+ BorderWidthPicker(selection: self.$model.borderWidth)`
`26`	`27`	`Picker("Content Paddings", selection: self.$model.contentPaddings) {`
`27`	`28`	`Text("12px").tag(Paddings(padding: 12))`
`28`	`29`	`Text("16px").tag(Paddings(padding: 16))`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ public struct SUCard<Content: View>: View {`
`44`	`44`	`.cornerRadius(self.model.cornerRadius.value)`
`45`	`45`	`.overlay(`
`46`	`46`	`RoundedRectangle(cornerRadius: self.model.cornerRadius.value)`
`47`		`- .stroke(UniversalColor.divider.color, lineWidth: 1.0)`
	`47`	`+ .stroke(UniversalColor.divider.color, lineWidth: self.model.borderWidth.value)`
`48`	`48`	`)`
`49`	`49`	`.shadow(self.model.shadow)`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -140,7 +140,7 @@ extension UKCard {`
`140`	`140`	`static func mainView(_ view: UIView, model: Model) {`
`141`	`141`	`view.backgroundColor = UniversalColor.background.uiColor`
`142`	`142`	`view.layer.cornerRadius = model.cornerRadius.value`
`143`		`- view.layer.borderWidth = 1`
	`143`	`+ view.layer.borderWidth = model.borderWidth.value`
`144`	`144`	`view.layer.borderColor = UniversalColor.divider.cgColor`
`145`	`145`	`view.shadow(model.shadow)`
`146`	`146`	`}`