@use-voltra/ios-client 1.4.1 → 2.0.0-rc.2

package/ios/ui/Views/VoltraLinearProgressView.swift

@@ -0,0 +1,118 @@
+import SwiftUI
+
+public struct VoltraLinearProgressView: VoltraView {
+  public typealias Parameters = LinearProgressViewParameters
+
+  public let element: VoltraElement
+
+  @State private var internalStartTime = Date()
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  @ViewBuilder
+  public var body: some View {
+    let p = params
+    let progressColor = p.progressColor.flatMap { JSColorParser.parse($0) }
+    let trackColor = p.trackColor.flatMap { JSColorParser.parse($0) }
+    let cornerRadius = p.cornerRadius.map { CGFloat($0) }
+    let height = p.height.map { CGFloat($0) }
+    let thumbComponent = element.componentProp("thumb")
+
+    let isTimer = p.endAtMs != nil
+
+    // Linear progress bar only supports Determinate and Timer modes.
+    // If no value or timer is provided, we fall back to a 0% determinate state
+    // as linear indeterminate progress is not supported.
+    let isDeterminate = p.value != nil
+    let effectiveValue = p.value ?? 0.0
+
+    // Built-in style is required for timers to animate in realtime (Live Activities).
+    let hasCustomProps = trackColor != nil || cornerRadius != nil || height != nil || thumbComponent != .empty
+    let useCustomStyle = hasCustomProps && isDeterminate
+
+    if isTimer, let endAtMs = p.endAtMs {
+      // Timer-based progress (Always uses built-in style for realtime updates)
+      ProgressView(
+        timerInterval: Date.toTimerInterval(
+          startAtMs: p.startAtMs ?? (internalStartTime.timeIntervalSince1970 * 1000),
+          endAtMs: endAtMs
+        ),
+        countsDown: p.countDown ?? false
+      ) {
+        element.componentProp("label")
+      } currentValueLabel: {
+        element.componentProp("currentValueLabel")
+      }
+      .progressViewStyle(.linear)
+      .tint(progressColor)
+      .applyStyle(element.style)
+    } else {
+      // Determinate progress (Default fallback if no value/timer)
+      ProgressView(value: effectiveValue, total: p.maximumValue) {
+        element.componentProp("label")
+      } currentValueLabel: {
+        element.componentProp("currentValueLabel")
+      }
+      .tint(progressColor)
+      .voltraIf(useCustomStyle) {
+        $0.progressViewStyle(VoltraLinearProgressStyle(
+          progressTint: progressColor,
+          trackTint: trackColor ?? Color.gray.opacity(0.2),
+          cornerRadius: cornerRadius,
+          explicitHeight: height,
+          thumbComponent: thumbComponent != .empty ? thumbComponent : nil
+        ))
+      }
+      .voltraIf(!useCustomStyle) {
+        $0.progressViewStyle(.linear)
+      }
+      .applyStyle(element.style)
+    }
+  }
+}
+
+@available(iOS 16.0, macOS 13.0, *)
+private struct VoltraLinearProgressStyle: ProgressViewStyle {
+  var progressTint: Color?
+  var trackTint: Color
+  var cornerRadius: CGFloat?
+  var explicitHeight: CGFloat?
+  var thumbComponent: VoltraNode?
+
+  func makeBody(configuration: Configuration) -> some View {
+    let fraction = max(0, min(configuration.fractionCompleted ?? 0, 1))
+    let baseHeight = explicitHeight ?? 4
+
+    VStack(alignment: .leading, spacing: 4) {
+      configuration.label
+
+      GeometryReader { geometry in
+        let totalWidth = geometry.size.width
+        let radius = cornerRadius ?? baseHeight / 2
+
+        ZStack(alignment: .leading) {
+          // Track
+          RoundedRectangle(cornerRadius: radius, style: .continuous)
+            .fill(trackTint)
+            .frame(width: totalWidth, height: baseHeight)
+
+          // Progress fill
+          RoundedRectangle(cornerRadius: radius, style: .continuous)
+            .fill(progressTint ?? Color.accentColor)
+            .frame(width: totalWidth * CGFloat(fraction), height: baseHeight)
+        }
+        .overlay(alignment: .leading) {
+          if let thumbComponent = thumbComponent {
+            thumbComponent
+              .offset(x: totalWidth * CGFloat(fraction))
+          }
+        }
+      }
+      .frame(height: baseHeight)
+
+      configuration.currentValueLabel
+    }
+  }
+}

package/ios/ui/Views/VoltraLink.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+
+public struct VoltraLink: VoltraView {
+  public typealias Parameters = LinkParameters
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    if let urlString = params.destination,
+       let url = VoltraDeepLinkResolver.resolveUrl(urlString)
+    {
+      Link(destination: url) {
+        element.children ?? .empty
+      }
+      .applyStyle(element.style)
+    } else {
+      // Fallback: render children without link if destination is invalid
+      (element.children ?? .empty)
+        .applyStyle(element.style)
+    }
+  }
+}

package/ios/ui/Views/VoltraMask.swift

@@ -0,0 +1,23 @@
+import SwiftUI
+
+public struct VoltraMask: VoltraView {
+  public typealias Parameters = EmptyParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    // Get the mask element from element props
+    let maskElement = element.componentProp("maskElement")
+
+    // Render children as the content to be masked
+    (element.children ?? .empty)
+      .mask {
+        maskElement
+      }
+      .applyStyle(element.style)
+  }
+}

package/ios/ui/Views/VoltraSpacer.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+
+public struct VoltraSpacer: VoltraView {
+  public typealias Parameters = SpacerParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    Spacer(minLength: params.minLength.map { CGFloat($0) })
+      .applyStyle(element.style)
+  }
+}

package/ios/ui/Views/VoltraSymbol.swift

@@ -0,0 +1,160 @@
+import SwiftUI
+
+private enum SymbolRenderingMode: String {
+  case monochrome
+  case hierarchical
+  case palette
+  case multicolor
+}
+
+public struct VoltraSymbol: VoltraView {
+  public typealias Parameters = SymbolParameters
+
+  public let element: VoltraElement
+
+  private var params: Parameters {
+    element.parameters(Parameters.self)
+  }
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  private func symbolName(params: SymbolParameters) -> String {
+    if let name = params.name, !name.isEmpty {
+      return name
+    }
+    return "questionmark"
+  }
+
+  private func symbolTypeKey(params: SymbolParameters) -> String {
+    params.type?.lowercased() ?? "monochrome"
+  }
+
+  private func renderingMode(params: SymbolParameters) -> SymbolRenderingMode {
+    SymbolRenderingMode(rawValue: symbolTypeKey(params: params)) ?? .monochrome
+  }
+
+  private func symbolScale(params: SymbolParameters) -> Image.Scale {
+    switch params.scale?.lowercased() {
+    case "small":
+      return .small
+    case "large":
+      return .large
+    case "unspecified":
+      return .medium
+    case "medium", "default":
+      return .medium
+    default:
+      return .medium
+    }
+  }
+
+  private func symbolWeight(params: SymbolParameters) -> Font.Weight {
+    switch params.weight?.lowercased() {
+    case "ultralight":
+      return .ultraLight
+    case "thin":
+      return .thin
+    case "light":
+      return .light
+    case "medium":
+      return .medium
+    case "semibold":
+      return .semibold
+    case "bold":
+      return .bold
+    case "heavy":
+      return .heavy
+    case "black":
+      return .black
+    case "regular", "unspecified", nil:
+      return .regular
+    default:
+      return .regular
+    }
+  }
+
+  private func symbolSize(params: SymbolParameters) -> CGFloat {
+    CGFloat(params.size)
+  }
+
+  private func tintColor(params: SymbolParameters) -> Color? {
+    guard let string = params.tintColor else {
+      return nil
+    }
+    return JSColorParser.parse(string)
+  }
+
+  private func paletteColors(params: SymbolParameters) -> [Color] {
+    guard let colorsString = params.colors, !colorsString.isEmpty else {
+      return []
+    }
+    return colorsString
+      .split(separator: "|")
+      .compactMap { part in
+        let value = String(part)
+        return JSColorParser.parse(value)
+      }
+  }
+
+  public var body: some View {
+    let image = Image(systemName: symbolName(params: params))
+
+    applyStyling(params: params, to: image)
+      .applyStyle(element.style)
+  }
+
+  @ViewBuilder
+  private func applyStyling(params: SymbolParameters, to image: Image) -> some View {
+    let sized = image
+      .font(.system(size: symbolSize(params: params), weight: symbolWeight(params: params)))
+      .imageScale(symbolScale(params: params))
+
+    let colored = applyColor(params: params, to: sized)
+
+    colored
+  }
+
+  @ViewBuilder
+  private func applyColor(params: SymbolParameters, to view: some View) -> some View {
+    let mode = renderingMode(params: params)
+    let tint = tintColor(params: params)
+    let palette = paletteColors(params: params)
+    switch mode {
+    case .monochrome:
+      if let tint = tint {
+        view.foregroundStyle(tint)
+      } else {
+        view.symbolRenderingMode(.monochrome)
+      }
+    case .hierarchical:
+      if let tint = tint {
+        view.symbolRenderingMode(.hierarchical).foregroundStyle(tint)
+      } else {
+        view.symbolRenderingMode(.hierarchical)
+      }
+    case .palette:
+      if !palette.isEmpty {
+        // Swift's variadic foregroundStyle is tricky with array,
+        // but .foregroundStyle(Color, Color...) works up to a limit.
+        // We'll support up to 3 colors for now as that's common for symbols.
+        if palette.count == 1 {
+          view.symbolRenderingMode(.palette).foregroundStyle(palette[0])
+        } else if palette.count == 2 {
+          view.symbolRenderingMode(.palette).foregroundStyle(palette[0], palette[1])
+        } else if palette.count >= 3 {
+          view.symbolRenderingMode(.palette).foregroundStyle(palette[0], palette[1], palette[2])
+        } else {
+          view.symbolRenderingMode(.palette)
+        }
+      } else if let tint = tint {
+        view.symbolRenderingMode(.hierarchical).foregroundStyle(tint)
+      } else {
+        view.symbolRenderingMode(.palette)
+      }
+    case .multicolor:
+      view.symbolRenderingMode(.multicolor)
+    }
+  }
+}

package/ios/ui/Views/VoltraText.swift

@@ -0,0 +1,87 @@
+import SwiftUI
+
+public struct VoltraText: VoltraView {
+  public typealias Parameters = TextParameters
+
+  public let element: VoltraElement
+  @Environment(\.voltraEnvironment) private var voltraEnvironment
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let textContent: String = {
+      if let children = element.children, case let .text(text) = children {
+        return text
+      }
+      return ""
+    }()
+    let anyStyle = (element.style ?? [:]).mapValues { $0.toAny() }
+    let style = StyleConverter.convert(anyStyle)
+    let textStyle = style.3
+
+    var font: Font {
+      // If custom fontFamily is specified, use it
+      if let fontFamily = textStyle.fontFamily {
+        var baseFont = Font.custom(fontFamily, size: textStyle.fontSize)
+
+        if textStyle.fontVariant.contains(.smallCaps) {
+          baseFont = baseFont.smallCaps()
+        }
+
+        if textStyle.fontVariant.contains(.tabularNums) {
+          baseFont = baseFont.monospacedDigit()
+        }
+
+        return baseFont
+      }
+
+      // Otherwise use system font with weight
+      var baseFont = Font.system(size: textStyle.fontSize, weight: textStyle.fontWeight)
+
+      if textStyle.fontVariant.contains(.smallCaps) {
+        baseFont = baseFont.smallCaps()
+      }
+
+      if textStyle.fontVariant.contains(.tabularNums) {
+        baseFont = baseFont.monospacedDigit()
+      }
+
+      return baseFont
+    }
+
+    let alignment: TextAlignment = {
+      // Parameter takes precedence over style
+      if let mta = params.multilineTextAlignment {
+        return JSStyleParser.textAlignment(mta)
+      }
+      return textStyle.alignment
+    }()
+
+    let resolvedColor: Color = {
+      if let widget = voltraEnvironment.widget,
+         widget.usesReducedBackgroundPresentation,
+         textStyle.usesPrimaryColorInReducedPresentation
+      {
+        return .primary
+      }
+
+      return textStyle.color
+    }()
+
+    Text(.init(textContent))
+      .kerning(textStyle.letterSpacing)
+      .underline(textStyle.decoration == .underline || textStyle.decoration == .underlineLineThrough)
+      .strikethrough(textStyle.decoration == .lineThrough || textStyle.decoration == .underlineLineThrough)
+      // These technically work on View, but good to keep close
+      .font(font)
+      .foregroundColor(resolvedColor)
+      .multilineTextAlignment(alignment)
+      .lineSpacing(textStyle.lineSpacing)
+      .voltraIfLet(params.numberOfLines) { view, numberOfLines in
+        view.lineLimit(Int(numberOfLines))
+      }
+      .applyStyle(element.style)
+  }
+}

package/ios/ui/Views/VoltraTimer.swift

@@ -0,0 +1,131 @@
+import SwiftUI
+
+public struct VoltraTimer: VoltraView {
+  public typealias Parameters = TimerParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  private func progressRange(params: TimerParameters) -> ClosedRange<Date>? {
+    // Stopwatch support: if counting up (not down) and we have a start time
+    // but no end time or duration, treat it as an open-ended stopwatch.
+    if !countsDown(params: params),
+       let startAtMs = params.startAtMs,
+       params.endAtMs == nil,
+       params.durationMs == nil
+    {
+      let start = Date(timeIntervalSince1970: startAtMs / 1000)
+      return start ... Date.distantFuture
+    }
+
+    return VoltraProgressDriver.resolveRange(
+      startAtMs: params.startAtMs,
+      endAtMs: params.endAtMs,
+      durationMs: params.durationMs
+    )
+  }
+
+  private func resolvedEndDate(params: TimerParameters) -> Date? {
+    progressRange(params: params)?.upperBound
+  }
+
+  private func countsDown(params: TimerParameters) -> Bool {
+    (params.direction.lowercased()) != "up"
+  }
+
+  private func textStyle(params: TimerParameters) -> String {
+    params.textStyle.lowercased()
+  }
+
+  private struct TextTemplates: Codable {
+    let running: String?
+    let completed: String?
+  }
+
+  private func textTemplates(params: TimerParameters) -> TextTemplates? {
+    guard let raw = params.textTemplates,
+          let data = raw.data(using: .utf8)
+    else { return nil }
+    return try? JSONDecoder().decode(TextTemplates.self, from: data)
+  }
+
+  @ViewBuilder
+  public var body: some View {
+    if let range = progressRange(params: params) {
+      timerView(params: params, range: range)
+        .applyStyle(element.style)
+    }
+  }
+
+  @ViewBuilder
+  private func timerView(params: TimerParameters, range: ClosedRange<Date>) -> some View {
+    let isFinished = Date() >= range.upperBound
+    let templates = textTemplates(params: params)
+    let style = textStyle(params: params)
+    let showHours = params.showHours
+
+    if isFinished, let completedTemplate = templates?.completed {
+      renderTemplate(template: completedTemplate) {
+        staticZeroText(style: style, showHours: showHours)
+      }
+    } else {
+      if let runningTemplate = templates?.running {
+        renderTemplate(template: runningTemplate) {
+          activeTimerText(params: params, range: range)
+        }
+      } else {
+        activeTimerText(params: params, range: range)
+      }
+    }
+  }
+
+  @ViewBuilder
+  private func activeTimerText(params: TimerParameters, range: ClosedRange<Date>) -> some View {
+    let style = textStyle(params: params)
+    let isCountDown = countsDown(params: params)
+    let showHours = params.showHours
+
+    if style == "relative" {
+      let targetDate = isCountDown ? range.upperBound : range.lowerBound
+      Text(targetDate, style: .relative).monospacedDigit()
+    } else {
+      // Live Activities require Text(timerInterval:...) for automatic updates
+      Text(timerInterval: range, countsDown: isCountDown, showsHours: showHours)
+        .monospacedDigit()
+    }
+  }
+
+  @ViewBuilder
+  private func staticZeroText(style: String, showHours: Bool) -> some View {
+    if style == "relative" {
+      Text("0s").monospacedDigit()
+    } else {
+      Text(showHours ? "0:00:00" : "0:00")
+        .monospacedDigit()
+    }
+  }
+
+  @ViewBuilder
+  private func renderTemplate<T: View>(template: String, @ViewBuilder timeView: @escaping () -> T)
+    -> some View
+  {
+    let placeholder = "{time}"
+    let segments = template.components(separatedBy: placeholder)
+
+    if segments.count > 1 {
+      HStack(spacing: 0) {
+        ForEach(Array(segments.enumerated()), id: \.offset) { index, segment in
+          Text(verbatim: segment)
+          if index < segments.count - 1 {
+            timeView()
+          }
+        }
+      }
+    } else {
+      Text(template)
+    }
+  }
+}

package/ios/ui/Views/VoltraToggle.swift

@@ -0,0 +1,39 @@
+import AppIntents
+import SwiftUI
+
+public struct VoltraToggle: VoltraView {
+  public typealias Parameters = ToggleParameters
+
+  public let element: VoltraElement
+  private let title: String
+
+  @Environment(\.voltraEnvironment)
+  private var voltraEnvironment
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+    title = element.props?["title"]?.stringValue ?? ""
+  }
+
+  public var body: some View {
+    if #available(iOS 17.0, *) {
+      Toggle(
+        isOn: params.defaultValue,
+        intent: VoltraInteractionIntent(
+          activityId: voltraEnvironment.activityId,
+          componentId: element.id ?? "unknown",
+          payload: (params.defaultValue) ? "false" : "true"
+        )
+      ) {
+        Text(title)
+      }
+      .applyStyle(element.style)
+    } else {
+      // Fallback for iOS 16.x: Toggle with static value (intents not supported)
+      Toggle(isOn: .constant(params.defaultValue)) {
+        Text(title)
+      }
+      .applyStyle(element.style)
+    }
+  }
+}

package/ios/ui/Views/VoltraVStack.swift

@@ -0,0 +1,68 @@
+import SwiftUI
+
+public struct VoltraVStack: View {
+  private let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let params = element.parameters(VStackParameters.self)
+
+    if params.layout == "flex" {
+      flexBody(params: params)
+    } else {
+      legacyBody(params: params)
+    }
+  }
+
+  @ViewBuilder
+  private func legacyBody(params: VStackParameters) -> some View {
+    let alignmentStr = params.alignment.lowercased()
+    let alignment: HorizontalAlignment = switch alignmentStr {
+    case "leading": .leading
+    case "trailing": .trailing
+    case "center": .center
+    default: .center
+    }
+
+    // Extract gap from style for legacy mode too
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+    let (layout, _, _, _) = StyleConverter.convert(anyStyle)
+    // spacing prop takes precedence over gap style
+    let gap = params.spacing ?? layout.gap ?? 0
+
+    let hasFillWidth = layout.width == .fill
+
+    let frameAlignment = Alignment(horizontal: alignment, vertical: .center)
+
+    VStack(alignment: alignment, spacing: gap) {
+      element.children ?? .empty
+    }
+    .voltraIf(hasFillWidth) { content in
+      content.frame(maxWidth: .infinity, alignment: frameAlignment)
+    }
+    .applyStyle(element.style, contentAlignment: frameAlignment)
+  }
+
+  @ViewBuilder
+  private func flexBody(params: VStackParameters) -> some View {
+    let alignmentFallback = FlexContainerHelper.verticalAlignmentFallback(params.alignment)
+    let values = FlexContainerHelper.parseValues(from: element, alignmentFallback: alignmentFallback)
+    // spacing prop takes precedence over gap style
+    let spacing = params.spacing ?? values.gap
+
+    VoltraFlexStackLayout(
+      axis: .vertical,
+      spacing: spacing,
+      alignItems: values.alignItems,
+      justifyContent: values.justifyContent,
+      containerPadding: values.padding
+    ) {
+      (element.children ?? .empty)
+        .environment(\.isInFlexContainer, true)
+    }
+    .modifier(FlexContainerStyleModifier(values: values))
+  }
+}

package/ios/ui/Views/VoltraZStack.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+public struct VoltraZStack: VoltraView {
+  public typealias Parameters = ZStackParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let alignmentStr = params.alignment?.lowercased()
+
+    let alignment: Alignment = switch alignmentStr {
+    case "leading": .leading
+    case "trailing": .trailing
+    case "top": .top
+    case "bottom": .bottom
+    case "topleading": .topLeading
+    case "toptrailing": .topTrailing
+    case "bottomleading": .bottomLeading
+    case "bottomtrailing": .bottomTrailing
+    case "center": .center
+    default: .center
+    }
+
+    ZStack(alignment: alignment) {
+      element.children ?? .empty
+    }
+    .applyStyle(element.style)
+  }
+}