SUCountdown

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CountdownPreview.swift

@@ -0,0 +1,68 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct CountdownPreview: View {
+  @State private var model = CountdownVM(
+    until: Date().addingTimeInterval(3600),
+    localization: defaultLocalizations
+  )
+  @State private var tempUntil = Date()
+  @State private var selectedLocale = Locale(identifier: "en")
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "SwiftUI") {
+        SUCountdown(model: self.model)
+      }
+      Form {
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        FontPicker(selection: self.$model.font)
+        SizePicker(selection: self.$model.size)
+        Picker("Units Position", selection: $model.unitsPosition) {
+          Text("None").tag(UnitsPosition.none)
+          Text("Bottom").tag(UnitsPosition.bottom)
+          Text("Trailing").tag(UnitsPosition.trailing)
+        }
+        .onChange(of: model.unitsPosition) { newValue in
+          if newValue != .bottom {
+            model.style = .plain
+          }
+        }
+        Picker("Style", selection: $model.style) {
+          Text("Plain").tag(CountdownStyle.plain)
+          Text("Light").tag(CountdownStyle.light)
+        }
+        .onChange(of: model.style) { newValue in
+          if newValue == .light && model.unitsPosition != .bottom {
+            model.unitsPosition = .bottom
+          }
+        }
+        Picker("Localization", selection: $selectedLocale) {
+          ForEach(defaultLocalizations.keys.sorted(by: { $0.identifier < $1.identifier }), id: \.self) { locale in
+            Text(locale.localizedString(forIdentifier: locale.identifier) ?? locale.identifier)
+              .tag(locale)
+          }
+        }
+        .onChange(of: selectedLocale) { newLocale in
+          model.locale = newLocale
+        }
+        DatePicker("Select Date and Time", selection: $tempUntil, in: Date()..., displayedComponents: [.date, .hourAndMinute])
+          .datePickerStyle(.compact)
+      }
+    }
+    .toolbar {
+      ToolbarItem(placement: .navigationBarTrailing) {
+        if tempUntil > Date() {
+          Button("Update Timer") {
+            model.until = tempUntil
+          }
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  CountdownPreview()
+}

Examples/DemosApp/DemosApp/Core/App.swift

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

Sources/ComponentsKit/Countdown/Localization/UnitsLocalization.swift

@@ -0,0 +1,113 @@
+import Foundation
+
+// MARK: - UnitsLocalization
+
+public struct UnitsLocalization: Equatable {
+  public struct UnitItemLocalization: Equatable {
+    public let short: String
+    public let long: String
+
+    public init(short: String, long: String) {
+      self.short = short
+      self.long = long
+    }
+  }
+
+  // MARK: - Properties
+
+  public let seconds: UnitItemLocalization
+  public let minutes: UnitItemLocalization
+  public let hours: UnitItemLocalization
+  public let days: UnitItemLocalization
+
+  // MARK: - Initializer
+
+  public init(seconds: UnitItemLocalization, minutes: UnitItemLocalization, hours: UnitItemLocalization, days: UnitItemLocalization) {
+    self.seconds = seconds
+    self.minutes = minutes
+    self.hours = hours
+    self.days = days
+  }
+}
+
+// MARK: - Localizations
+
+public let defaultLocalizations: [Locale: UnitsLocalization] = [
+  // Spanish (es)
+  Locale(identifier: "en"): UnitsLocalization(
+    seconds: .init(short: "s", long: "Seconds"),
+    minutes: .init(short: "m", long: "Minutes"),
+    hours: .init(short: "h", long: "Hours"),
+    days: .init(short: "d", long: "Days")
+  ),
+
+  // French (fr)
+  Locale(identifier: "es"): UnitsLocalization(
+    seconds: .init(short: "s", long: "Segundos"),
+    minutes: .init(short: "m", long: "Minutos"),
+    hours: .init(short: "h", long: "Horas"),
+    days: .init(short: "d", long: "Días")
+  ),
+
+  // German (de)
+  Locale(identifier: "fr"): UnitsLocalization(
+    seconds: .init(short: "s", long: "Secondes"),
+    minutes: .init(short: "m", long: "Minutes"),
+    hours: .init(short: "h", long: "Heures"),
+    days: .init(short: "j", long: "Jours")
+  ),
+
+  // Chinese (zh)
+  Locale(identifier: "de"): UnitsLocalization(
+    seconds: .init(short: "s", long: "Sekunden"),
+    minutes: .init(short: "m", long: "Minuten"),
+    hours: .init(short: "h", long: "Stunden"),
+    days: .init(short: "t", long: "Tage")
+  ),
+
+  // Japanese (ja)
+  Locale(identifier: "zh"): UnitsLocalization(
+    seconds: .init(short: "秒", long: "秒"),
+    minutes: .init(short: "分", long: "分钟"),
+    hours: .init(short: "时", long: "小时"),
+    days: .init(short: "天", long: "天")
+  ),
+
+  // Russian (ru)
+  Locale(identifier: "ja"): UnitsLocalization(
+    seconds: .init(short: "秒", long: "秒"),
+    minutes: .init(short: "分", long: "分"),
+    hours: .init(short: "時", long: "時間"),
+    days: .init(short: "日", long: "日")
+  ),
+
+  // Arabic (ar)
+  Locale(identifier: "ru"): UnitsLocalization(
+    seconds: .init(short: "с", long: "Секунд"),
+    minutes: .init(short: "м", long: "Минут"),
+    hours: .init(short: "ч", long: "Часов"),
+    days: .init(short: "д", long: "Дней")
+  ),
+
+  // Hindi (hi)
+  Locale(identifier: "ar"): UnitsLocalization(
+    seconds: .init(short: "ث", long: "ثوانٍ"),
+    minutes: .init(short: "د", long: "دقائق"),
+    hours: .init(short: "س", long: "ساعات"),
+    days: .init(short: "ي", long: "أيام")
+  ),
+  Locale(identifier: "hi"): UnitsLocalization(
+    seconds: .init(short: "से", long: "सेकंड"),
+    minutes: .init(short: "मि", long: "मिनट"),
+    hours: .init(short: "घं", long: "घंटे"),
+    days: .init(short: "दि", long: "दिन")
+  ),
+
+  // Portuguese (pt)
+  Locale(identifier: "pt"): UnitsLocalization(
+    seconds: .init(short: "s", long: "Segundos"),
+    minutes: .init(short: "m", long: "Minutos"),
+    hours: .init(short: "h", long: "Horas"),
+    days: .init(short: "d", long: "Dias")
+  )
+]

Sources/ComponentsKit/Countdown/Manager/CountdownManager.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+class CountdownManager: ObservableObject {
+  // MARK: - Published Properties
+
+  @Published var days: Int = 0
+  @Published var hours: Int = 0
+  @Published var minutes: Int = 0
+  @Published var seconds: Int = 0
+
+  // MARK: - Properties
+
+  private var timer: Timer?
+  private var until: Date?
+
+  // MARK: - Methods
+
+  func start(until: Date) {
+    self.until = until
+    updateTime()
+    timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
+      self.updateTime()
+    }
+  }
+
+  func stop() {
+    timer?.invalidate()
+    timer = nil
+  }
+
+  private func updateTime() {
+    guard let until = until else { return }
+
+    let now = Date()
+    let calendar = Calendar.current
+    let components = calendar.dateComponents(
+      [.day, .hour, .minute, .second],
+      from: now,
+      to: until
+    )
+    days = max(0, components.day ?? 0)
+    hours = max(0, components.hour ?? 0)
+    minutes = max(0, components.minute ?? 0)
+    seconds = max(0, components.second ?? 0)
+
+    if now >= until {
+      stop()
+    }
+  }
+}

Sources/ComponentsKit/Countdown/Models/CountdownStyle.swift

@@ -0,0 +1,7 @@
+import Foundation
+
+/// Defines the visual styles for the countdown component.
+public enum CountdownStyle {
+    case plain
+    case light
+}

Sources/ComponentsKit/Countdown/Models/CountdownVM.swift

@@ -0,0 +1,117 @@
+import SwiftUI
+
+/// Defines the possible positions for units in the countdown.
+public enum UnitsPosition {
+  case none
+  case bottom
+  case trailing
+}
+
+/// A model that defines the appearance properties for a countdown component.
+public struct CountdownVM: ComponentVM {
+  /// The font used for displaying the countdown numbers and units.
+  public var font: UniversalFont?
+
+  /// The color of the countdown.
+  public var color: ComponentColor?
+
+  /// The predefined size of the countdown.
+  ///
+  /// Defaults to `.medium`.
+  public var size: ComponentSize = .medium
+
+  /// The position of the units relative to the countdown numbers.
+  ///
+  /// - Default value: `.bottom`
+  public var unitsPosition: UnitsPosition = .bottom
+
+  /// The visual style of the countdown component.
+  ///
+  /// - Default value: `.plain`
+  public var style: CountdownStyle = .light
+
+  /// The target date until which the countdown runs.
+  ///
+  public var until: Date = Date().addingTimeInterval(3600)
+
+  /// The locale used for formatting the countdown.
+  public var locale: Locale = .current
+
+  /// Localization.
+  public var localization: [Locale: UnitsLocalization] = [:]
+
+  /// Initializes a new instance of `CountdownVM` with default values.
+  public init() {}
+
+  /// Initializes a new instance of `CountdownVM` with specified parameters.
+  ///
+  /// - Parameters:
+  ///   - until: The target date until which the countdown runs.
+  ///   - locale: The locale used for formatting the countdown. Defaults to `.current`.
+  ///   - localization: Localization.
+  public init(until: Date, locale: Locale = .current, localization: [Locale: UnitsLocalization] = [:]) {
+    self.until = until
+    self.locale = locale
+    self.localization = localization
+  }
+}
+
+// MARK: - Shared Helpers
+
+extension CountdownVM {
+  var preferredFont: UniversalFont {
+    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
+    }
+  }
+  var unitFontSize: CGFloat {
+    switch self.size {
+    case .small:
+      return 6
+    case .medium:
+      return 8
+    case .large:
+      return 10
+    }
+  }
+  var backgroundColor: UniversalColor {
+    if let color {
+      return color.main.withOpacity(0.15)
+    } else {
+      return .init(
+        light: .rgba(r: 244, g: 244, b: 245, a: 1.0),
+        dark: .rgba(r: 39, g: 39, b: 42, a: 1.0)
+      )
+    }
+  }
+  var foregroundColor: UniversalColor {
+    let foregroundColor = self.color?.main ?? .init(
+      light: .rgba(r: 0, g: 0, b: 0, a: 1.0),
+      dark: .rgba(r: 255, g: 255, b: 255, a: 1.0)
+    )
+    return foregroundColor
+  }
+  var height: CGFloat {
+    return switch self.size {
+    case .small: 45
+    case .medium: 55
+    case .large: 60
+    }
+  }
+  var horizontalPadding: CGFloat {
+    return switch self.size {
+    case .small: 8
+    case .medium: 12
+    case .large: 16
+    }
+  }
+}