Merge pull request #24 from componentskit/Divider-SwiftUI

Divider SwiftUI

Author: VislovIvan

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/DividerPreview.swift

@@ -0,0 +1,41 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct DividerPreview: View {
+  @State private var model = DividerVM()
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKComponentPreview(model: self.model) {
+          UKDivider(model: self.model)
+        }
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUDivider(model: self.model)
+      }
+      Form {
+        Picker("Orientation", selection: self.$model.orientation) {
+          Text("Horizontal").tag(DividerVM.DividerOrientation.horizontal)
+          Text("Vertical").tag(DividerVM.DividerOrientation.vertical)
+        }
+        SizePicker(selection: self.$model.size)
+        Picker("Color", selection: self.$model.color) {
+          Text("Default").tag(Palette.Base.divider)
+          Text("Primary").tag(UniversalColor.primary)
+          Text("Secondary").tag(UniversalColor.secondary)
+          Text("Accent").tag(UniversalColor.accent)
+          Text("Success").tag(UniversalColor.success)
+          Text("Warning").tag(UniversalColor.warning)
+          Text("Danger").tag(UniversalColor.danger)
+          Text("Custom").tag(UniversalColor.universal(.uiColor(.systemPurple)))
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  DividerPreview()
+}

Examples/DemosApp/DemosApp/Core/App.swift

@@ -12,6 +12,9 @@ struct App: View {
           NavigationLinkWithTitle("Checkbox") {
             CheckboxPreview()
           }
+          NavigationLinkWithTitle("Divider") {
+            DividerPreview()
+          }
           NavigationLinkWithTitle("Input Field") {
             InputFieldPreview()
           }

Sources/ComponentsKit/Divider/Models/DividerStyle.swift

@@ -0,0 +1,9 @@
+import Foundation
+
+extension DividerVM {
+  /// Defines the possible orientations for the divider.
+  public enum DividerOrientation {
+    case horizontal
+    case vertical
+  }
+}

Sources/ComponentsKit/Divider/Models/DividerVM.swift

@@ -0,0 +1,46 @@
+import Foundation
+
+/// A model that defines the appearance properties for a divider component.
+public struct DividerVM: ComponentVM {
+  /// The orientation of the divider (horizontal or vertical).
+  ///
+  /// Defaults to `.horizontal`.
+  public var orientation: DividerOrientation = .horizontal
+
+  /// The color of the divider.
+  ///
+  /// Defaults to `Palette.Base.divider`.
+  public var color: UniversalColor = Palette.Base.divider
+
+  /// The predefined size of the divider, which affects its thickness.
+  ///
+  /// Defaults to `.medium`.
+  public var size: ComponentSize = .medium
+
+  /// Initializes a new instance of `DividerVM` with default values.
+  public init() {}
+}
+
+// MARK: - Shared Helpers
+
+extension DividerVM {
+  var lineSize: CGFloat {
+    switch self.size {
+    case .small:
+      return 0.5
+    case .medium:
+      return 1.0
+    case .large:
+      return 2.0
+    }
+  }
+}
+
+// MARK: - UIKit Helpers
+
+extension DividerVM {
+  func shouldUpdateLayout(_ oldModel: Self) -> Bool {
+    return self.orientation != oldModel.orientation
+    || self.size != oldModel.size
+  }
+}

Sources/ComponentsKit/Divider/SUDivider.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+/// A SwiftUI component that displays a separating line.
+public struct SUDivider: View {
+  // MARK: - Properties
+
+  /// A model that defines the appearance properties.
+  public var model: DividerVM
+
+  @Environment(\.colorScheme) private var colorScheme
+
+  // MARK: - Initialization
+
+  /// Initializer.
+  /// - Parameters:
+  ///   - model: A model that defines the appearance properties.
+  public init(model: DividerVM = .init()) {
+    self.model = model
+  }
+
+  // MARK: - Body
+
+  public var body: some View {
+    Rectangle()
+      .fill(self.model.color.color(for: self.colorScheme))
+      .frame(
+        maxWidth: self.model.orientation == .vertical ? self.model.lineSize : nil,
+        maxHeight: self.model.orientation == .horizontal ? self.model.lineSize : nil
+      )
+  }
+}

Sources/ComponentsKit/Divider/UKDivider.swift

@@ -0,0 +1,66 @@
+import UIKit
+
+/// A UIKit component that displays a separating line.
+open class UKDivider: UIView, UKComponent {
+  // MARK: - Properties
+
+  /// A model that defines the appearance properties.
+  public var model: DividerVM {
+    didSet {
+      self.update(oldValue)
+    }
+  }
+
+  // MARK: - UIView Properties
+
+  open override var intrinsicContentSize: CGSize {
+    return self.sizeThatFits(UIView.layoutFittingExpandedSize)
+  }
+
+  // MARK: - Initializers
+
+  /// Initializer.
+  /// - Parameters:
+  ///   - model: A model that defines the appearance properties.
+  public init(model: DividerVM = .init()) {
+    self.model = model
+    super.init(frame: .zero)
+    self.style()
+  }
+
+  public required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  // MARK: - Setup
+
+  private func style() {
+    self.backgroundColor = self.model.color.uiColor
+    self.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+    self.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
+  }
+
+  // MARK: - Update
+
+  public func update(_ oldModel: DividerVM) {
+    guard self.model != oldModel else { return }
+
+    self.backgroundColor = self.model.color.uiColor
+
+    if self.model.shouldUpdateLayout(oldModel) {
+      self.invalidateIntrinsicContentSize()
+    }
+  }
+
+  // MARK: - UIView Methods
+
+  open override func sizeThatFits(_ size: CGSize) -> CGSize {
+    let lineSize = self.model.lineSize
+    switch self.model.orientation {
+    case .vertical:
+      return CGSize(width: lineSize, height: size.height)
+    case .horizontal:
+      return CGSize(width: size.width, height: lineSize)
+    }
+  }
+}