@use-voltra/ios-client 1.4.0 → 2.0.0-rc.1

package/ios/ui/Style/JSStyleParser.swift

@@ -0,0 +1,223 @@
+import SwiftUI
+
+enum JSStyleParser {
+  static func number(_ value: Any?) -> CGFloat? {
+    if let v = value as? CGFloat { return v }
+    if let v = value as? Double { return CGFloat(v) }
+    if let v = value as? Int { return CGFloat(v) }
+    // Handle "20.5" strings if necessary, though rarer in raw JSON objects
+    return nil
+  }
+
+  static func sizeValue(_ value: Any?) -> SizeValue? {
+    // Numeric → Fixed
+    if let n = number(value) { return .fixed(n) }
+    // String → Fill / Wrap / try numeric
+    guard let str = value as? String else { return nil }
+    switch str {
+    case "100%": return .fill
+    case "auto": return .wrap
+    default:
+      // Try parsing as numeric string
+      if let n = Double(str) { return .fixed(CGFloat(n)) }
+      return nil
+    }
+  }
+
+  static func size(_ value: Any?) -> CGSize? {
+    guard let dict = value as? [String: Any] else { return nil }
+    let w = number(dict["width"]) ?? 0
+    let h = number(dict["height"]) ?? 0
+    return CGSize(width: w, height: h)
+  }
+
+  static func color(_ value: Any?) -> Color? {
+    JSColorParser.parse(value)
+  }
+
+  static func background(_ value: Any?) -> BackgroundValue? {
+    guard let string = value as? String else { return nil }
+    let trimmed = string.trimmingCharacters(in: .whitespacesAndNewlines)
+    if let gradient = JSGradientParser.parse(trimmed) {
+      return gradient
+    }
+    if let color = JSColorParser.parse(string) {
+      return .color(color)
+    }
+    return nil
+  }
+
+  static func boolean(_ value: Any?) -> Bool {
+    guard let value = value else { return false }
+
+    if let bool = value as? Bool { return bool }
+    if let int = value as? Int { return int == 1 }
+    if let string = value as? String {
+      return string.lowercased() == "true"
+    }
+
+    return false
+  }
+
+  /// Helper to resolve CSS Edge Precedence:
+  /// Specific (Left) > Axis (Horizontal) > Generic (All)
+  static func parseInsets(from dict: [String: Any], prefix: String) -> EdgeInsets {
+    let all = number(dict[prefix]) ?? 0
+    let v = number(dict["\(prefix)Vertical"]) ?? all
+    let h = number(dict["\(prefix)Horizontal"]) ?? all
+
+    return EdgeInsets(
+      top: number(dict["\(prefix)Top"]) ?? v,
+      leading: number(dict["\(prefix)Left"]) ?? number(dict["\(prefix)Start"]) ?? h,
+      bottom: number(dict["\(prefix)Bottom"]) ?? v,
+      trailing: number(dict["\(prefix)Right"]) ?? number(dict["\(prefix)End"]) ?? h
+    )
+  }
+
+  /// Maps "bold", "600", "normal" -> Font.Weight
+  static func fontWeight(_ value: Any?) -> Font.Weight {
+    guard let string = value as? String else { return .regular }
+
+    switch string.lowercased() {
+    case "bold", "700": return .bold
+    case "heavy", "800", "900": return .heavy // or .black
+    case "semibold", "600": return .semibold
+    case "medium", "500": return .medium
+    case "light", "300": return .light
+    case "thin", "100": return .thin
+    default: return .regular
+    }
+  }
+
+  /// Maps "center", "right", "justify" -> TextAlignment
+  static func textAlignment(_ value: Any?) -> TextAlignment {
+    guard let string = value as? String else { return .leading }
+
+    switch string.lowercased() {
+    case "center": return .center
+    case "right", "end": return .trailing
+    default: return .leading
+    }
+  }
+
+  static func textDecoration(_ value: Any?) -> TextDecoration {
+    guard let string = (value as? String)?.lowercased() else { return .none }
+
+    // Simple string check (RN allows "underline line-through")
+    let hasUnderline = string.contains("underline")
+    let hasLineThrough = string.contains("line-through") || string.contains("strikethrough")
+
+    if hasUnderline, hasLineThrough { return .underlineLineThrough }
+    if hasUnderline { return .underline }
+    if hasLineThrough { return .lineThrough }
+    return .none
+  }
+
+  static func glassEffect(_ value: Any?) -> GlassEffect? {
+    guard let string = (value as? String)?.lowercased() else { return nil }
+
+    switch string {
+    case "clear": return .clear
+    case "identity": return .identity
+    case "regular": return .regular
+    case "none": return .none
+    default: return nil
+    }
+  }
+
+  static func overflow(_ value: Any?) -> Overflow? {
+    guard let string = (value as? String)?.lowercased() else { return nil }
+
+    if string == "hidden" { return .hidden }
+    if string == "visible" { return .visible }
+    return nil
+  }
+
+  static func fontVariant(_ value: Any?) -> Set<FontVariant> {
+    var variants: Set<FontVariant> = []
+
+    // Handle array of strings (e.g., ["small-caps", "tabular-nums"])
+    if let array = value as? [String] {
+      for variantString in array {
+        if let variant = FontVariant(rawValue: variantString) {
+          variants.insert(variant)
+        }
+      }
+    }
+    // Handle single string (e.g., "small-caps")
+    else if let string = value as? String {
+      if let variant = FontVariant(rawValue: string) {
+        variants.insert(variant)
+      }
+    }
+
+    return variants
+  }
+
+  /// Parse RN transform array: [{ rotate: '45deg' }, { scale: 1.5 }]
+  static func transform(_ value: Any?) -> TransformStyle? {
+    guard let array = value as? [[String: Any]] else { return nil }
+
+    var transform = TransformStyle()
+
+    for item in array {
+      // Handle rotate: '45deg' or rotate: '0.785rad'
+      if let rotateStr = item["rotate"] as? String {
+        transform.rotate = parseAngle(rotateStr)
+      }
+      // Handle rotateZ (same as rotate for 2D)
+      if let rotateZStr = item["rotateZ"] as? String {
+        transform.rotate = parseAngle(rotateZStr)
+      }
+      // Handle scale
+      if let scale = item["scale"] as? Double {
+        transform.scale = CGFloat(scale)
+      } else if let scale = item["scale"] as? Int {
+        transform.scale = CGFloat(scale)
+      }
+      // Handle scaleX
+      if let scaleX = item["scaleX"] as? Double {
+        transform.scaleX = CGFloat(scaleX)
+      } else if let scaleX = item["scaleX"] as? Int {
+        transform.scaleX = CGFloat(scaleX)
+      }
+      // Handle scaleY
+      if let scaleY = item["scaleY"] as? Double {
+        transform.scaleY = CGFloat(scaleY)
+      } else if let scaleY = item["scaleY"] as? Int {
+        transform.scaleY = CGFloat(scaleY)
+      }
+    }
+
+    return transform.hasTransforms ? transform : nil
+  }
+
+  /// Parse angle string like '45deg' or '0.785rad' to degrees
+  private static func parseAngle(_ value: String) -> CGFloat? {
+    let trimmed = value.trimmingCharacters(in: .whitespaces)
+
+    if trimmed.hasSuffix("deg") {
+      let numStr = String(trimmed.dropLast(3))
+      return Double(numStr).map { CGFloat($0) }
+    } else if trimmed.hasSuffix("rad") {
+      let numStr = String(trimmed.dropLast(3))
+      if let radians = Double(numStr) {
+        return CGFloat(radians * 180.0 / .pi) // Convert to degrees
+      }
+    }
+    // Try parsing as plain number (assume degrees)
+    return Double(trimmed).map { CGFloat($0) }
+  }
+}
+
+/// Parsed transform style from RN transform array
+struct TransformStyle {
+  var rotate: CGFloat? // in degrees
+  var scale: CGFloat?
+  var scaleX: CGFloat?
+  var scaleY: CGFloat?
+
+  var hasTransforms: Bool {
+    rotate != nil || scale != nil || scaleX != nil || scaleY != nil
+  }
+}

package/ios/ui/Style/LayoutStyle.swift

@@ -0,0 +1,184 @@
+import SwiftUI
+
+// DO NOT PUT DEFAULT VALUES IN THE STRUCTURES.
+// ONLY USE OPTIONALS.
+
+// MARK: - Size Value
+
+enum SizeValue: Equatable {
+  case fixed(CGFloat) // Explicit numeric value (e.g., 100)
+  case fill // "100%" — expand to fill available space
+  case wrap // "auto" or missing — size to content
+}
+
+// MARK: - Flex Alignment
+
+enum FlexAlign: String {
+  case flexStart = "flex-start"
+  case center
+  case flexEnd = "flex-end"
+  case stretch
+
+  /// Accept both kebab-case ("flex-start") and camelCase ("flexStart")
+  init?(fromStyle value: String) {
+    if let v = FlexAlign(rawValue: value) {
+      self = v
+    } else {
+      switch value {
+      case "flexStart": self = .flexStart
+      case "flexEnd": self = .flexEnd
+      default: return nil
+      }
+    }
+  }
+}
+
+enum FlexJustify: String {
+  case flexStart = "flex-start"
+  case center
+  case flexEnd = "flex-end"
+  case spaceBetween = "space-between"
+  case spaceAround = "space-around"
+  case spaceEvenly = "space-evenly"
+
+  /// Accept both kebab-case ("space-between") and camelCase ("spaceBetween")
+  init?(fromStyle value: String) {
+    if let v = FlexJustify(rawValue: value) {
+      self = v
+    } else {
+      switch value {
+      case "flexStart": self = .flexStart
+      case "flexEnd": self = .flexEnd
+      case "spaceBetween": self = .spaceBetween
+      case "spaceAround": self = .spaceAround
+      case "spaceEvenly": self = .spaceEvenly
+      default: return nil
+      }
+    }
+  }
+}
+
+// MARK: - Layout Style
+
+struct LayoutStyle {
+  // 1. Size Constraints (now SizeValue for "auto"/"100%" support)
+  var width: SizeValue?
+  var height: SizeValue?
+  var minWidth: CGFloat?
+  var maxWidth: CGFloat?
+  var minHeight: CGFloat?
+  var maxHeight: CGFloat?
+
+  // 2. Flex properties (defaults applied in StyleConverter, not here)
+  var flex: CGFloat? // Shorthand (legacy compat)
+  var flexGrow: CGFloat // Default: 0 (applied in StyleConverter)
+  var flexShrink: CGFloat // Default: 0 (applied in StyleConverter)
+  var flexBasis: SizeValue? // nil = auto
+  var alignSelf: FlexAlign? // nil = auto (inherit from container)
+  var gap: CGFloat? // Spacing between flex children
+
+  /// 3. Priority (legacy only, derived from flex)
+  var layoutPriority: Double?
+
+  /// 4. Aspect Ratio
+  var aspectRatio: CGFloat?
+
+  // 5. Spacing
+  var padding: EdgeInsets?
+  var margin: EdgeInsets?
+
+  // 6. Positioning
+  var absolutePosition: CGPoint? // for position: 'absolute'
+  var relativeOffset: CGPoint? // for position: 'relative'
+  var zIndex: Double?
+}
+
+// MARK: - Layout Modifier
+
+struct LayoutModifier: ViewModifier {
+  let style: LayoutStyle
+  var contentAlignment: Alignment = .center
+
+  /// Extract CGFloat from SizeValue for frame constraints
+  private var widthValue: CGFloat? {
+    guard case let .fixed(v) = style.width else { return nil }
+    return v
+  }
+
+  private var heightValue: CGFloat? {
+    guard case let .fixed(v) = style.height else { return nil }
+    return v
+  }
+
+  /// Derive effective ideal width: explicit width, then flexBasis, then nil
+  private var effectiveIdealWidth: CGFloat? {
+    if let w = widthValue { return w }
+    if case let .fixed(v) = style.flexBasis { return v }
+    return nil
+  }
+
+  /// Derive effective ideal height: explicit height, then flexBasis, then nil
+  private var effectiveIdealHeight: CGFloat? {
+    if let h = heightValue { return h }
+    if case let .fixed(v) = style.flexBasis { return v }
+    return nil
+  }
+
+  /// flexShrink > 0: allow shrinking by setting min to 0 (unless explicitly constrained)
+  private var effectiveMinWidth: CGFloat? {
+    style.flexShrink > 0 ? (style.minWidth ?? 0) : style.minWidth
+  }
+
+  private var effectiveMinHeight: CGFloat? {
+    style.flexShrink > 0 ? (style.minHeight ?? 0) : style.minHeight
+  }
+
+  func body(content: Content) -> some View {
+    content
+      // A. Aspect Ratio (Must be applied before frames to impact sizing)
+      .voltraIfLet(style.aspectRatio) { content, aspectRatio in
+        content.aspectRatio(aspectRatio, contentMode: .fill)
+      }
+
+      // B. Fixed & Minimum Constraints
+      // We apply min/max/fixed constraints first to establish the "base" size.
+      .frame(
+        minWidth: effectiveMinWidth,
+        idealWidth: effectiveIdealWidth,
+        maxWidth: widthValue ?? style.maxWidth,
+        minHeight: effectiveMinHeight,
+        idealHeight: effectiveIdealHeight,
+        maxHeight: heightValue ?? style.maxHeight
+      )
+
+      // C. Flex / Grow Logic (legacy: expand to infinity)
+      // If flex > 0 OR flexGrow > 0 OR width/height is .fill, expand to .infinity
+      .frame(
+        maxWidth: shouldExpandWidth ? .infinity : nil,
+        maxHeight: shouldExpandHeight ? .infinity : nil,
+        // Use the component's own content alignment (e.g. VStack alignment prop)
+        // rather than forcing .topLeading, which would override it.
+        alignment: contentAlignment
+      )
+
+      // D. Layout Priority (Flex Grow/Shrink arbitration)
+      // Views with higher priority get their requested size first.
+      .voltraIfLet(style.layoutPriority) { content, priority in
+        content.layoutPriority(priority)
+      }
+
+      // E. Inner Spacing (Padding)
+      .voltraIfLet(style.padding) { content, padding in
+        content.padding(padding)
+      }
+  }
+
+  /// Expand if flex > 0 OR flexGrow > 0 OR width/height is .fill
+  private var shouldExpandWidth: Bool {
+    (style.flex ?? 0) > 0 || style.flexGrow > 0 || style.width == .fill
+  }
+
+  private var shouldExpandHeight: Bool {
+    (style.flex ?? 0) > 0 || style.flexGrow > 0 || style.height == .fill
+  }
+}

package/ios/ui/Style/Overflow.swift

@@ -0,0 +1,4 @@
+enum Overflow {
+  case visible
+  case hidden
+}

package/ios/ui/Style/RenderingStyle.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+struct RenderingStyle {
+  var opacity: CGFloat = 1.0
+  var transform: TransformStyle?
+}
+
+struct RenderingModifier: ViewModifier {
+  let style: RenderingStyle
+
+  func body(content: Content) -> some View {
+    content
+      .opacity(style.opacity)
+      .modifier(TransformModifier(transform: style.transform))
+  }
+}
+
+struct TransformModifier: ViewModifier {
+  let transform: TransformStyle?
+
+  func body(content: Content) -> some View {
+    content
+      .voltraIfLet(transform?.rotate) { view, degrees in
+        view.rotationEffect(.degrees(degrees))
+      }
+      .voltraIfLet(transform?.scale) { view, scale in
+        view.scaleEffect(scale)
+      }
+      .voltraIf(transform?.scale == nil && (transform?.scaleX != nil || transform?.scaleY != nil)) { view in
+        view.scaleEffect(x: transform?.scaleX ?? 1.0, y: transform?.scaleY ?? 1.0)
+      }
+  }
+}

package/ios/ui/Style/StyleConverter.swift

@@ -0,0 +1,202 @@
+import SwiftUI
+
+enum StyleConverter {
+  static func convert(_ js: [String: Any]) -> (LayoutStyle, DecorationStyle, RenderingStyle, TextStyle) {
+    (parseLayout(js), parseDecoration(js), parseRendering(js), parseText(js))
+  }
+
+  private static func parseLayout(_ js: [String: Any]) -> LayoutStyle {
+    // RN: "flex: 1" implies grow. "flexGrow" is specific.
+    let flexVal = JSStyleParser.number(js["flex"]) ?? 0
+    let flexGrowVal = JSStyleParser.number(js["flexGrow"]) ?? 0
+    let flexShrinkVal = JSStyleParser.number(js["flexShrink"])
+    let flexBasisVal = JSStyleParser.sizeValue(js["flexBasis"])
+
+    // Legacy flex: max of flex and flexGrow for backward compat
+    let finalFlex = max(flexVal, flexGrowVal)
+    let priority: Double? = finalFlex > 0 ? Double(finalFlex) : nil
+
+    // RN flex shorthand: flex > 0 → grow=flex, shrink=1, basis=0
+    let resolvedFlexGrow: CGFloat
+    let resolvedFlexShrink: CGFloat
+    let resolvedFlexBasis: SizeValue?
+
+    if flexVal > 0 {
+      resolvedFlexGrow = flexGrowVal > 0 ? flexGrowVal : flexVal
+      resolvedFlexShrink = flexShrinkVal ?? 1
+      resolvedFlexBasis = flexBasisVal ?? .fixed(0)
+    } else {
+      resolvedFlexGrow = flexGrowVal
+      resolvedFlexShrink = flexShrinkVal ?? 0
+      resolvedFlexBasis = flexBasisVal // nil = auto
+    }
+
+    // Apply defaults here: 0 if not set (instead of in modifiers)
+    let finalFlexGrow: CGFloat = resolvedFlexGrow
+    let finalFlexShrink: CGFloat = resolvedFlexShrink
+
+    // alignSelf
+    let alignSelf: FlexAlign? = (js["alignSelf"] as? String).flatMap { FlexAlign(fromStyle: $0) }
+
+    // gap
+    let gap = JSStyleParser.number(js["gap"])
+
+    // Position parsing with mode support
+    let left = JSStyleParser.number(js["left"])
+    let top = JSStyleParser.number(js["top"])
+
+    var absolutePosition: CGPoint?
+    var relativeOffset: CGPoint?
+
+    // Only apply positioning if left or top are provided
+    if left != nil || top != nil {
+      let x = left ?? 0
+      let y = top ?? 0
+
+      // Default to 'absolute' if position mode not specified (backward compatibility)
+      let positionMode = js["position"] as? String ?? "absolute"
+
+      switch positionMode.lowercased() {
+      case "absolute":
+        absolutePosition = CGPoint(x: x, y: y)
+      case "relative":
+        relativeOffset = CGPoint(x: x, y: y)
+      case "static":
+        // Do nothing - ignore left/top
+        break
+      default:
+        // Unknown position value - ignore
+        break
+      }
+    }
+
+    // zIndex: only set if explicitly provided in JS
+    let zIndex = JSStyleParser.number(js["zIndex"])
+
+    return LayoutStyle(
+      // Dimensions (now using SizeValue)
+      width: JSStyleParser.sizeValue(js["width"]),
+      height: JSStyleParser.sizeValue(js["height"]),
+      minWidth: JSStyleParser.number(js["minWidth"]),
+      maxWidth: JSStyleParser.number(js["maxWidth"]),
+      minHeight: JSStyleParser.number(js["minHeight"]),
+      maxHeight: JSStyleParser.number(js["maxHeight"]),
+
+      // Flex Logic
+      flex: finalFlex > 0 ? finalFlex : nil,
+      flexGrow: finalFlexGrow,
+      flexShrink: finalFlexShrink,
+      flexBasis: resolvedFlexBasis,
+      alignSelf: alignSelf,
+      gap: gap,
+      layoutPriority: priority,
+      aspectRatio: JSStyleParser.number(js["aspectRatio"]),
+
+      // Spacing (Resolves logic: padding -> paddingHorizontal -> paddingLeft)
+      padding: JSStyleParser.parseInsets(from: js, prefix: "padding"),
+      margin: JSStyleParser.parseInsets(from: js, prefix: "margin"),
+
+      // Positioning
+      absolutePosition: absolutePosition,
+      relativeOffset: relativeOffset,
+      zIndex: zIndex.map { Double($0) }
+    )
+  }
+
+  private static func parseDecoration(_ js: [String: Any]) -> DecorationStyle {
+    // Border Logic
+    var border: (CGFloat, Color)?
+    if let borderWidth = JSStyleParser.number(js["borderWidth"]), borderWidth > 0 {
+      let borderColor = JSStyleParser.color(js["borderColor"]) ?? .clear
+      border = (borderWidth, borderColor)
+    }
+
+    // Shadow Logic (RN iOS style)
+    var shadow: (CGFloat, Color, Double, CGSize)?
+
+    let radius = JSStyleParser.number(js["shadowRadius"])
+    let opacity = JSStyleParser.number(js["shadowOpacity"])
+    let offset = JSStyleParser.size(js["shadowOffset"])
+    let color = JSStyleParser.color(js["shadowColor"])
+
+    if radius != nil || opacity != nil || offset != nil || color != nil {
+      let finalRadius = radius ?? 0.0
+      let finalOpacity = opacity ?? 1.0
+      let finalOffset = offset ?? .zero
+      let finalColor = color ?? .black
+
+      if finalOpacity > 0 {
+        shadow = (finalRadius, finalColor, Double(finalOpacity), finalOffset)
+      }
+    }
+
+    let glassEffect = JSStyleParser.glassEffect(js["glassEffect"])
+    let overflow = JSStyleParser.overflow(js["overflow"])
+
+    return DecorationStyle(
+      backgroundColor: JSStyleParser.background(js["backgroundColor"]),
+      cornerRadius: JSStyleParser.number(js["borderRadius"]),
+      border: border,
+      shadow: shadow,
+      glassEffect: glassEffect,
+      overflow: overflow
+    )
+  }
+
+  private static func parseRendering(_ js: [String: Any]) -> RenderingStyle {
+    RenderingStyle(
+      opacity: JSStyleParser.number(js["opacity"]) ?? 1.0,
+      transform: JSStyleParser.transform(js["transform"])
+    )
+  }
+
+  private static func parseText(_ js: [String: Any]) -> TextStyle {
+    var style = TextStyle()
+
+    if let color = JSColorParser.parse(js["color"]) {
+      style.color = color
+      style.usesPrimaryColorInReducedPresentation = JSColorParser.shouldUsePrimaryColorInReducedPresentation(js["color"])
+    }
+
+    if let size = JSStyleParser.number(js["fontSize"]) {
+      style.fontSize = size
+    }
+
+    // CSS LineHeight includes text size. SwiftUI LineSpacing is the extra space.
+    if let lineHeight = JSStyleParser.number(js["lineHeight"]) {
+      let spacing = lineHeight - style.fontSize
+      style.lineSpacing = max(0, spacing)
+    }
+
+    if let weightRaw = js["fontWeight"] {
+      style.fontWeight = JSStyleParser.fontWeight(weightRaw)
+    }
+
+    if let fontFamily = js["fontFamily"] as? String {
+      style.fontFamily = fontFamily
+    }
+
+    if let alignRaw = js["textAlign"] {
+      style.alignment = JSStyleParser.textAlignment(alignRaw)
+    }
+
+    if let decoRaw = js["textDecorationLine"] {
+      style.decoration = JSStyleParser.textDecoration(decoRaw)
+    }
+
+    // 6. Numbers
+    if let lines = js["numberOfLines"] as? Int {
+      style.lineLimit = lines
+    }
+
+    if let letterSpacing = JSStyleParser.number(js["letterSpacing"]) {
+      style.letterSpacing = letterSpacing
+    }
+
+    if let fontVariantRaw = js["fontVariant"] {
+      style.fontVariant = JSStyleParser.fontVariant(fontVariantRaw)
+    }
+
+    return style
+  }
+}

package/ios/ui/Style/TextDecoration.swift

@@ -0,0 +1,6 @@
+enum TextDecoration {
+  case none
+  case underline
+  case lineThrough
+  case underlineLineThrough // Supports "underline line-through" combination
+}