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

package/ios/ui/Views/VoltraCircularProgressView.swift

@@ -0,0 +1,103 @@
+import SwiftUI
+
+public struct VoltraCircularProgressView: VoltraView {
+  public typealias Parameters = CircularProgressViewParameters
+
+  public let element: VoltraElement
+
+  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 lineWidth = p.lineWidth.map { CGFloat($0) }
+
+    // Circular variant does not support timer-based progress ring via built-in ProgressView on iOS.
+    // We remove the timer option as it would only display an indeterminate spinner.
+    let isDeterminate = p.value != nil
+
+    // Custom style provides the "ring" appearance for determinate progress.
+    let hasCustomProps = trackColor != nil || lineWidth != nil
+    let useCustomStyle = hasCustomProps && isDeterminate
+
+    if let value = p.value {
+      // Determinate progress
+      ProgressView(value: value, total: p.maximumValue) {
+        element.componentProp("label")
+      } currentValueLabel: {
+        element.componentProp("currentValueLabel")
+      }
+      .tint(progressColor)
+      .voltraIf(useCustomStyle) {
+        $0.progressViewStyle(VoltraCircularProgressStyle(
+          progressTint: progressColor,
+          trackTint: trackColor ?? Color.gray.opacity(0.2),
+          lineWidth: lineWidth,
+          staticFraction: nil
+        ))
+      }
+      .voltraIf(!useCustomStyle) {
+        // Fallback to custom style for determinate even if no custom props,
+        // because built-in .circular is a spinner, not a ring.
+        $0.progressViewStyle(VoltraCircularProgressStyle(
+          progressTint: progressColor,
+          trackTint: Color.gray.opacity(0.2),
+          lineWidth: 4,
+          staticFraction: nil
+        ))
+      }
+      .applyStyle(element.style)
+    } else {
+      // Indeterminate progress (Built-in spinner)
+      // Wrapping in VStack to ensure stable geometry for the animation
+      VStack(spacing: 0) {
+        ProgressView {
+          element.componentProp("label")
+        }
+        .progressViewStyle(.circular)
+        .tint(progressColor)
+      }
+      .applyStyle(element.style)
+    }
+  }
+}
+
+@available(iOS 16.0, macOS 13.0, *)
+private struct VoltraCircularProgressStyle: ProgressViewStyle {
+  var progressTint: Color?
+  var trackTint: Color
+  var lineWidth: CGFloat?
+  var staticFraction: Double?
+
+  func makeBody(configuration: Configuration) -> some View {
+    let fraction = max(0, min(staticFraction ?? configuration.fractionCompleted ?? 0, 1))
+    let strokeWidth = lineWidth ?? 4
+
+    VStack(spacing: 8) {
+      configuration.label
+
+      ZStack {
+        // Track
+        Circle()
+          .stroke(trackTint, lineWidth: strokeWidth)
+
+        // Progress arc
+        Circle()
+          .trim(from: 0, to: fraction)
+          .stroke(
+            progressTint ?? Color.accentColor,
+            style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round)
+          )
+          .rotationEffect(.degrees(-90))
+          .animation(.linear, value: fraction)
+      }
+      .aspectRatio(1, contentMode: .fit)
+
+      configuration.currentValueLabel
+    }
+  }
+}

package/ios/ui/Views/VoltraDivider.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+
+public struct VoltraDivider: VoltraView {
+  public typealias Parameters = EmptyParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    Divider()
+      .applyStyle(element.style)
+  }
+}

package/ios/ui/Views/VoltraFlexView.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+public struct VoltraFlexView: VoltraView {
+  public typealias Parameters = ViewParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+
+    // flexDirection from style (default: column, matching RN's View behavior)
+    let directionStr = anyStyle["flexDirection"] as? String ?? "column"
+    let axis: Axis = directionStr == "row" ? .horizontal : .vertical
+
+    let values = FlexContainerHelper.parseValues(from: element)
+
+    VoltraFlexStackLayout(
+      axis: axis,
+      spacing: values.gap,
+      alignItems: values.alignItems,
+      justifyContent: values.justifyContent,
+      containerPadding: values.padding
+    ) {
+      (element.children ?? .empty)
+        .environment(\.isInFlexContainer, true)
+    }
+    .modifier(FlexContainerStyleModifier(values: values))
+  }
+}

package/ios/ui/Views/VoltraGauge.swift

@@ -0,0 +1,65 @@
+import SwiftUI
+
+public struct VoltraGauge: VoltraView {
+  public typealias Parameters = GaugeParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let label = element.componentProp("label")
+    let currentValueLabel = element.componentProp("currentValueLabel")
+    let minimumValueLabel = element.componentProp("minimumValueLabel")
+    let maximumValueLabel = element.componentProp("maximumValueLabel")
+    let value = params.value ?? 0.0
+    let range = (params.minimumValue ?? 0.0) ... (params.maximumValue ?? 1.0)
+    let gaugeStyle = params.gaugeStyle
+    let tintColor = params.tintColor
+
+    let gauge = Gauge(value: value, in: range) {
+      buildNestedView(label)
+    } currentValueLabel: {
+      buildNestedView(currentValueLabel)
+    } minimumValueLabel: {
+      buildNestedView(minimumValueLabel)
+    } maximumValueLabel: {
+      buildNestedView(maximumValueLabel)
+    }
+
+    applyTint(applyGaugeStyle(gauge, gaugeStyle), tintColor)
+  }
+
+  @ViewBuilder
+  private func applyGaugeStyle(_ gauge: some View, _ gaugeStyle: String?) -> some View {
+    switch gaugeStyle {
+    case "automatic":
+      gauge.gaugeStyle(.automatic)
+    case "accessoryCircular":
+      gauge.gaugeStyle(.accessoryCircular)
+    case "accessoryCircularCapacity":
+      gauge.gaugeStyle(.accessoryCircularCapacity)
+    case "accessoryLinear":
+      gauge.gaugeStyle(.accessoryLinear)
+    case "accessoryLinearCapacity", "linearCapacity":
+      gauge.gaugeStyle(.accessoryLinearCapacity)
+    default:
+      gauge
+    }
+  }
+
+  @ViewBuilder
+  private func applyTint(_ view: some View, _ optionalColor: String?) -> some View {
+    if let color = optionalColor {
+      view.tint(JSColorParser.parse(color))
+    } else {
+      view
+    }
+  }
+
+  private func buildNestedView(_ nestedView: VoltraNode) -> some View {
+    nestedView
+  }
+}

package/ios/ui/Views/VoltraGlassContainer.swift

@@ -0,0 +1,29 @@
+import SwiftUI
+
+public struct VoltraGlassContainer: VoltraView {
+  public typealias Parameters = GlassContainerParameters
+
+  public let element: VoltraElement
+  @Environment(\.voltraEnvironment) private var voltraEnvironment
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    if let children = element.children {
+      if voltraEnvironment.widget?.suppressesDecorativeContainerEffects == true {
+        children.applyStyle(element.style)
+      } else if #available(iOS 26.0, *) {
+        let spacing = params.spacing ?? 0.0
+        GlassEffectContainer(spacing: CGFloat(spacing)) {
+          children
+        }.applyStyle(element.style)
+      } else {
+        Group {
+          children
+        }.applyStyle(element.style)
+      }
+    }
+  }
+}

package/ios/ui/Views/VoltraGroupBox.swift

@@ -0,0 +1,26 @@
+import SwiftUI
+
+public struct VoltraGroupBox: VoltraView {
+  public typealias Parameters = EmptyParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let label = element.componentProp("label")
+
+    GroupBox {
+      element.children ?? .empty
+    } label: {
+      buildNestedView(label)
+    }
+    .applyStyle(element.style)
+  }
+
+  private func buildNestedView(_ nestedView: VoltraNode) -> some View {
+    nestedView
+  }
+}

package/ios/ui/Views/VoltraHStack.swift

@@ -0,0 +1,70 @@
+import SwiftUI
+
+public struct VoltraHStack: VoltraView {
+  public typealias Parameters = HStackParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    if params.layout == "flex" {
+      flexBody(params: params)
+    } else {
+      legacyBody(params: params)
+    }
+  }
+
+  @ViewBuilder
+  private func legacyBody(params: HStackParameters) -> some View {
+    let alignmentStr = params.alignment.lowercased()
+    let alignment: VerticalAlignment = switch alignmentStr {
+    case "top": .top
+    case "bottom": .bottom
+    case "center": .center
+    case "firsttextbaseline": .firstTextBaseline
+    case "lasttextbaseline": .lastTextBaseline
+    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 hasFillHeight = layout.height == .fill
+
+    let frameAlignment = Alignment(horizontal: .center, vertical: alignment)
+
+    HStack(alignment: alignment, spacing: gap) {
+      element.children ?? .empty
+    }
+    .voltraIf(hasFillHeight) { content in
+      content.frame(maxHeight: .infinity, alignment: frameAlignment)
+    }
+    .applyStyle(element.style, contentAlignment: frameAlignment)
+  }
+
+  @ViewBuilder
+  private func flexBody(params: HStackParameters) -> some View {
+    let alignmentFallback = FlexContainerHelper.horizontalAlignmentFallback(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: .horizontal,
+      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/VoltraImage.swift

@@ -0,0 +1,109 @@
+import Foundation
+import SwiftUI
+import UIKit
+
+public struct VoltraImage: VoltraView {
+  public typealias Parameters = ImageParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  /// Creates an Image from the source parameter, returning nil if invalid or not found
+  private func createImage(from source: String?) -> Image? {
+    guard let sourceString = source,
+          let sourceData = sourceString.data(using: .utf8),
+          let sourceDict = try? JSONSerialization.jsonObject(with: sourceData) as? [String: Any]
+    else {
+      return nil
+    }
+
+    // Check for base64 first
+    if let base64String = sourceDict["base64"] as? String,
+       let base64Data = Data(base64Encoded: base64String),
+       let uiImage = UIImage(data: base64Data)
+    {
+      return Image(uiImage: uiImage)
+    }
+
+    // Check for assetName - first try preloaded images from App Group, then asset catalog
+    if let assetName = sourceDict["assetName"] as? String,
+       !assetName.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
+    {
+      let trimmedName = assetName.trimmingCharacters(in: .whitespacesAndNewlines)
+
+      // First, check for preloaded image in App Group storage
+      if let preloadedImage = VoltraImageStore.loadImage(key: trimmedName) {
+        return Image(uiImage: preloadedImage)
+      }
+
+      // Fall back to asset catalog
+      if let catalogImage = UIImage(named: trimmedName) {
+        return Image(uiImage: catalogImage)
+      }
+    }
+
+    // Asset not found or invalid
+    return nil
+  }
+
+  @ViewBuilder
+  public var body: some View {
+    let resizeMode = params.resizeMode.lowercased()
+    if let baseImage = createImage(from: params.source) {
+      switch resizeMode {
+      case "cover":
+        // Fill container, may crop
+        baseImage
+          .resizable()
+          .scaledToFill()
+          .clipped()
+          .applyStyle(element.style)
+
+      case "contain":
+        // Fit within container, may leave space
+        baseImage
+          .resizable()
+          .scaledToFit()
+          .applyStyle(element.style)
+
+      case "stretch":
+        // Stretch to fill, may distort
+        baseImage
+          .resizable()
+          .applyStyle(element.style)
+
+      case "repeat":
+        // Tile the image
+        baseImage
+          .resizable(resizingMode: .tile)
+          .applyStyle(element.style)
+
+      case "center":
+        // Center without scaling
+        baseImage
+          .applyStyle(element.style)
+
+      default:
+        // Default to cover
+        baseImage
+          .resizable()
+          .scaledToFill()
+          .clipped()
+          .applyStyle(element.style)
+      }
+    } else {
+      let fallbackNode = element.componentProp("fallback")
+      if !fallbackNode.isEmpty {
+        Color.clear
+          .overlay(fallbackNode)
+          .applyStyle(element.style)
+      } else {
+        Color.clear
+          .applyStyle(element.style)
+      }
+    }
+  }
+}

package/ios/ui/Views/VoltraLabel.swift

@@ -0,0 +1,24 @@
+import SwiftUI
+
+public struct VoltraLabel: VoltraView {
+  public typealias Parameters = LabelParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    if let systemImage = params.systemImage {
+      Label(
+        params.title ?? "Label",
+        systemImage: systemImage
+      )
+      .applyStyle(element.style)
+    } else {
+      VoltraText(element)
+        .applyStyle(element.style)
+    }
+  }
+}

package/ios/ui/Views/VoltraLinearGradient.swift

@@ -0,0 +1,115 @@
+import SwiftUI
+
+public struct VoltraLinearGradient: VoltraView {
+  public typealias Parameters = LinearGradientParameters
+
+  public let element: VoltraElement
+  @Environment(\.voltraEnvironment) private var voltraEnvironment
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  /// Map string to UnitPoint
+  private func parsePoint(_ s: String?) -> UnitPoint {
+    guard let raw = s else { return .center }
+
+    // Handle custom coordinates in "x,y" format
+    if raw.contains(",") {
+      let components = raw.split(separator: ",")
+      if components.count == 2,
+         let x = Double(components[0]),
+         let y = Double(components[1])
+      {
+        return UnitPoint(x: x, y: y)
+      }
+    }
+
+    // Handle predefined string values
+    switch raw.lowercased() {
+    case "top": return .top
+    case "bottom": return .bottom
+    case "leading": return .leading
+    case "trailing": return .trailing
+    case "topleading": return .topLeading
+    case "toptrailing": return .topTrailing
+    case "bottomleading": return .bottomLeading
+    case "bottomtrailing": return .bottomTrailing
+    case "center": fallthrough
+    default: return .center
+    }
+  }
+
+  /// Build Gradient from parameters
+  private func buildGradient(params: LinearGradientParameters) -> Gradient {
+    // Prefer explicit stops over color array
+    if let stopsStr = params.stops {
+      let parts = stopsStr.split(separator: "|")
+      var stops: [Gradient.Stop] = []
+      for part in parts {
+        let sub = part.split(separator: "@", maxSplits: 1).map(String.init)
+        if sub.count == 2 {
+          let colorStr = sub[0]
+          let locStr = sub[1]
+          if let color = JSColorParser.parse(colorStr) {
+            let loc = Double(locStr) ?? 0.0
+            stops.append(.init(color: color, location: loc))
+          }
+        }
+      }
+      if !stops.isEmpty { return Gradient(stops: stops) }
+    }
+    if let colorsStr = params.colors {
+      let parts = colorsStr.split(separator: "|").map(String.init)
+      let colors: [Color] = parts.compactMap { JSColorParser.parse($0) }
+      if !colors.isEmpty { return Gradient(colors: colors) }
+    }
+    // Fallback neutral gradient
+    return Gradient(colors: [Color.black.opacity(0.25), Color.black.opacity(0.05)])
+  }
+
+  private func isFullBleedWidgetBackgroundCandidate() -> Bool {
+    guard let style = element.style, element.children != nil else {
+      return false
+    }
+    if let flex = style["flex"]?.doubleValue, flex > 0 {
+      return true
+    }
+    if let flexGrow = style["flexGrow"]?.doubleValue, flexGrow > 0 {
+      return true
+    }
+    let width = style["width"]?.stringValue?.trimmingCharacters(in: .whitespacesAndNewlines)
+    let height = style["height"]?.stringValue?.trimmingCharacters(in: .whitespacesAndNewlines)
+    return width == "100%" && height == "100%"
+  }
+
+  public var body: some View {
+    let gradient = buildGradient(params: params)
+    let start = parsePoint(params.startPoint)
+    let end = parsePoint(params.endPoint)
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+    let (layout, baseDecoration, rendering, text) = StyleConverter.convert(anyStyle)
+
+    var decoration = baseDecoration
+    decoration.backgroundColor = .linearGradient(gradient: gradient, startPoint: start, endPoint: end)
+
+    if let widget = voltraEnvironment.widget,
+       widget.isHomeScreenWidget,
+       widget.usesReducedBackgroundPresentation,
+       isFullBleedWidgetBackgroundCandidate(),
+       let children = element.children
+    {
+      return AnyView(children.applyStyle(element.style))
+    }
+
+    if let children = element.children {
+      return AnyView(
+        children.applyStyle((layout, decoration, rendering, text))
+      )
+    }
+
+    return AnyView(
+      Color.clear.applyStyle((layout, decoration, rendering, text))
+    )
+  }
+}