v1.4.0

Examples/DemosApp/DemosApp/Assets.xcassets/avatar_image.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "avatar.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Examples/DemosApp/DemosApp/Assets.xcassets/avatar_placeholder.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "avatar_placeholder.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AvatarGroupPreview.swift

@@ -0,0 +1,62 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct AvatarGroupPreview: View {
+  @State private var model = AvatarGroupVM {
+    $0.items = [
+      .init {
+        $0.imageSrc = .remote(URL(string: "https://i.pravatar.cc/150?img=12")!)
+      },
+      .init {
+        $0.imageSrc = .remote(URL(string: "https://i.pravatar.cc/150?img=14")!)
+      },
+      .init {
+        $0.imageSrc = .remote(URL(string: "https://i.pravatar.cc/150?img=15")!)
+      },
+      .init(),
+      .init(),
+      .init {
+        $0.placeholder = .text("IM")
+      },
+      .init {
+        $0.placeholder = .sfSymbol("person.circle")
+      },
+    ]
+  }
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKAvatarGroup(model: self.model)
+          .preview
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUAvatarGroup(model: self.model)
+      }
+      Form {
+        Picker("Border Color", selection: self.$model.borderColor) {
+          Text("Background").tag(UniversalColor.background)
+          Text("Accent Background").tag(ComponentColor.accent.background)
+          Text("Success Background").tag(ComponentColor.success.background)
+          Text("Warning Background").tag(ComponentColor.warning.background)
+          Text("Danger Background").tag(ComponentColor.danger.background)
+        }
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 4px").tag(ComponentRadius.custom(4))
+        }
+        Picker("Max Visible Avatars", selection: self.$model.maxVisibleAvatars) {
+          Text("3").tag(3)
+          Text("5").tag(5)
+          Text("7").tag(7)
+        }
+        SizePicker(selection: self.$model.size)
+      }
+    }
+  }
+}
+
+#Preview {
+  AvatarGroupPreview()
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AvatarPreview.swift

@@ -0,0 +1,42 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct AvatarPreview: View {
+  @State private var model = AvatarVM {
+    $0.placeholder = .icon("avatar_placeholder")
+  }
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKAvatar(model: self.model)
+          .preview
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUAvatar(model: self.model)
+      }
+      Form {
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 4px").tag(ComponentRadius.custom(4))
+        }
+        Picker("Image Source", selection: self.$model.imageSrc) {
+          Text("Remote").tag(AvatarVM.ImageSource.remote(URL(string: "https://i.pravatar.cc/150?img=12")!))
+          Text("Local").tag(AvatarVM.ImageSource.local("avatar_image"))
+          Text("None").tag(Optional<AvatarVM.ImageSource>.none)
+        }
+        Picker("Placeholder", selection: self.$model.placeholder) {
+          Text("Text").tag(AvatarVM.Placeholder.text("IM"))
+          Text("SF Symbol").tag(AvatarVM.Placeholder.sfSymbol("person"))
+          Text("Icon").tag(AvatarVM.Placeholder.icon("avatar_placeholder"))
+        }
+        SizePicker(selection: self.$model.size)
+      }
+    }
+  }
+}
+
+#Preview {
+  AvatarPreview()
+}

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

@@ -0,0 +1,50 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct BadgePreview: View {
+  @State private var model = BadgeVM {
+    $0.title = "Badge"
+  }
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKBadge(model: self.model)
+          .preview
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUBadge(model: self.model)
+      }
+      Form {
+        Picker("Font", selection: self.$model.font) {
+          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))
+        }
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 4px").tag(ComponentRadius.custom(4))
+        }
+        Picker("Style", selection: self.$model.style) {
+          Text("Filled").tag(BadgeVM.Style.filled)
+          Text("Light").tag(BadgeVM.Style.light)
+        }
+        Picker("Paddings", selection: self.$model.paddings) {
+          Text("8px; 6px")
+            .tag(Paddings(top: 6, leading: 8, bottom: 6, trailing: 8))
+          Text("10px; 8px")
+            .tag(Paddings(top: 8, leading: 10, bottom: 8, trailing: 10))
+          Text("12px; 10px")
+            .tag(Paddings(top: 10, leading: 12, bottom: 10, trailing: 12))
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  BadgePreview()
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ProgressBarPreview.swift

@@ -0,0 +1,67 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct ProgressBarPreview: View {
+  @State private var model = Self.initialModel
+  @State private var currentValue: CGFloat = Self.initialValue
+
+  private let progressBar = UKProgressBar(initialValue: Self.initialValue, model: Self.initialModel)
+
+  private let timer = Timer
+    .publish(every: 0.1, on: .main, in: .common)
+    .autoconnect()
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        self.progressBar
+          .preview
+          .onAppear {
+            self.progressBar.currentValue = self.currentValue
+            self.progressBar.model = Self.initialModel
+          }
+          .onChange(of: self.model) { newValue in
+            self.progressBar.model = newValue
+          }
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUProgressBar(currentValue: self.$currentValue, model: self.model)
+      }
+      Form {
+        ComponentColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 2px").tag(ComponentRadius.custom(2))
+        }
+        SizePicker(selection: self.$model.size)
+        Picker("Style", selection: self.$model.style) {
+          Text("Light").tag(ProgressBarVM.Style.light)
+          Text("Filled").tag(ProgressBarVM.Style.filled)
+          Text("Striped").tag(ProgressBarVM.Style.striped)
+        }
+      }
+    }
+    .onReceive(self.timer) { _ in
+      if self.currentValue < self.model.maxValue {
+        self.currentValue += (self.model.maxValue - self.model.minValue) / 100
+      } else {
+        self.currentValue = self.model.minValue
+      }
+
+      self.progressBar.currentValue = self.currentValue
+    }
+  }
+
+  // MARK: - Helpers
+
+  private static var initialValue: Double {
+    return 0.0
+  }
+  private static var initialModel: ProgressBarVM {
+    return .init()
+  }
+}
+
+#Preview {
+  ProgressBarPreview()
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/SliderPreview.swift

@@ -0,0 +1,46 @@
+import SwiftUI
+import ComponentsKit
+
+struct SliderPreview: View {
+  @State private var model = SliderVM {
+    $0.style = .light
+    $0.minValue = 0
+    $0.maxValue = 100
+    $0.cornerRadius = .full
+  }
+  @State private var currentValue: CGFloat = 30
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKSlider(initialValue: self.currentValue, model: self.model)
+          .preview
+      }
+      PreviewWrapper(title: "SwiftUI") {
+        SUSlider(currentValue: self.$currentValue, model: self.model)
+      }
+      Form {
+        ComponentColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 2px").tag(ComponentRadius.custom(2))
+        }
+        SizePicker(selection: self.$model.size)
+        Picker("Step", selection: self.$model.step) {
+          Text("1").tag(CGFloat(1))
+          Text("5").tag(CGFloat(5))
+          Text("10").tag(CGFloat(10))
+          Text("25").tag(CGFloat(25))
+          Text("50").tag(CGFloat(50))
+        }
+        Picker("Style", selection: self.$model.style) {
+          Text("Light").tag(SliderVM.Style.light)
+          Text("Striped").tag(SliderVM.Style.striped)
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  SliderPreview()
+}

Examples/DemosApp/DemosApp/Core/App.swift

@@ -8,6 +8,15 @@ struct App: View {
         NavigationLinkWithTitle("Alert") {
           AlertPreview()
         }
+        NavigationLinkWithTitle("Avatar") {
+          AvatarPreview()
+        }
+        NavigationLinkWithTitle("Avatar Group") {
+          AvatarGroupPreview()
+        }
+        NavigationLinkWithTitle("Badge") {
+          BadgePreview()
+        }
         NavigationLinkWithTitle("Button") {
           ButtonPreview()
         }
@@ -29,6 +38,9 @@ struct App: View {
         NavigationLinkWithTitle("Loading") {
           LoadingPreview()
         }
+        NavigationLinkWithTitle("Progress Bar") {
+          ProgressBarPreview()
+        }
         NavigationLinkWithTitle("Modal (Bottom)") {
           BottomModalPreview()
         }
@@ -41,6 +53,9 @@ struct App: View {
         NavigationLinkWithTitle("Segmented Control") {
           SegmentedControlPreview()
         }
+        NavigationLinkWithTitle("Slider") {
+          SliderPreview()
+        }
         NavigationLinkWithTitle("Text Input") {
           TextInputPreviewPreview()
         }

Sources/ComponentsKit/Components/Alert/Helpers/AlertButtonsOrientationCalculator.swift

@@ -6,8 +6,8 @@ struct AlertButtonsOrientationCalculator {
     case horizontal
   }
 
-  private static let primaryButton = UKButton()
-  private static let secondaryButton = UKButton()
+  private static let primaryButton = UKButton(model: .init())
+  private static let secondaryButton = UKButton(model: .init())
 
   private init() {}