diff --git a/RevenueCatUI/Templates/Components/PaywallComponentTypeTransformers.swift b/RevenueCatUI/Templates/Components/PaywallComponentTypeTransformers.swift index 3b5043faea..76acf3573b 100644 --- a/RevenueCatUI/Templates/Components/PaywallComponentTypeTransformers.swift +++ b/RevenueCatUI/Templates/Components/PaywallComponentTypeTransformers.swift @@ -16,42 +16,44 @@ import SwiftUI #if PAYWALL_COMPONENTS -extension PaywallComponent.TextStyle { +extension PaywallComponent.FontSize { var font: Font { + return Font(self.uiFont) + } + + private var textStyle: UIFont.TextStyle { switch self { - case .largeTitle: return .largeTitle - case .title: return .title - case .title2: if #available(iOS 14.0, *) { - return .title2 - } else { - return .title - } - case .title3: if #available(iOS 14.0, *) { - return .title3 - } else { - return .title - } - case .headline: return .headline - case .subheadline: return .subheadline - case .body: return .body - case .callout: return .callout - case .footnote: return .footnote - case .caption: return .caption - case .caption2: if #available(iOS 14.0, *) { - return .caption2 - } else { - return .caption + case .headingXXL: return .largeTitle + case .headingXL: return .title1 + case .headingL: return .title2 + case .headingM: return .title3 + case .headingS: return .headline + case .headingXS: return .subheadline + case .bodyXL, .bodyL: return .body + case .bodyM: return .callout + case .bodyS: return .footnote } + } - #if swift(>=5.9) && VISION_OS - case .extraLargeTitle: return .extraLargeTitle - case .extraLargeTitle2: return .extraLargeTitle2 - #else - case .extraLargeTitle: return .largeTitle - case .extraLargeTitle2: return .largeTitle - #endif + private var uiFont: UIFont { + let fontSize: CGFloat + switch self { + case .headingXXL: fontSize = 40 + case .headingXL: fontSize = 34 + case .headingL: fontSize = 28 + case .headingM: fontSize = 24 + case .headingS: fontSize = 20 + case .headingXS: fontSize = 16 + case .bodyXL: fontSize = 18 + case .bodyL: fontSize = 17 + case .bodyM: fontSize = 15 + case .bodyS: fontSize = 13 } + + // Create a UIFont and apply dynamic type scaling + let baseFont = UIFont.systemFont(ofSize: fontSize, weight: .regular) + return UIFontMetrics(forTextStyle: self.textStyle).scaledFont(for: baseFont) } } diff --git a/RevenueCatUI/Templates/Components/Stack/StackComponentView.swift b/RevenueCatUI/Templates/Components/Stack/StackComponentView.swift index 2b55b7bcc1..ced3cf0a4a 100644 --- a/RevenueCatUI/Templates/Components/Stack/StackComponentView.swift +++ b/RevenueCatUI/Templates/Components/Stack/StackComponentView.swift @@ -251,6 +251,7 @@ struct StackComponentView_Previews: PreviewProvider { .previewLayout(.sizeThatFits) .previewDisplayName("Default - Fill Fit Fixed Fill") } + } @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *) diff --git a/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template1Preview.swift b/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template1Preview.swift index 34c14cecda..352703b231 100644 --- a/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template1Preview.swift +++ b/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template1Preview.swift @@ -37,25 +37,25 @@ private enum Template1Preview { static let title = PaywallComponent.TextComponent( text: "title", - fontFamily: nil, + fontName: nil, fontWeight: .black, color: .init(light: .hex("#000000")), backgroundColor: nil, padding: .zero, margin: .zero, - textStyle: .largeTitle, + fontSize: .headingL, horizontalAlignment: .center ) static let body = PaywallComponent.TextComponent( text: "body", - fontFamily: nil, + fontName: nil, fontWeight: .regular, color: .init(light: .hex("#000000")), backgroundColor: nil, padding: .zero, margin: .zero, - textStyle: .body, + fontSize: .bodyM, horizontalAlignment: .center ) diff --git a/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template5Preview.swift b/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template5Preview.swift index 152e5c0a78..45253137a1 100644 --- a/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template5Preview.swift +++ b/RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template5Preview.swift @@ -40,25 +40,25 @@ private enum Template5Preview { static let title = PaywallComponent.TextComponent( text: "title", - fontFamily: nil, + fontName: nil, fontWeight: .black, color: .init(light: .hex("#000000")), backgroundColor: nil, padding: .zero, margin: .zero, - textStyle: .largeTitle, + fontSize: .headingL, horizontalAlignment: .leading ) static let body = PaywallComponent.TextComponent( text: "body", - fontFamily: nil, + fontName: nil, fontWeight: .regular, color: .init(light: .hex("#000000")), backgroundColor: nil, padding: .zero, margin: .zero, - textStyle: .body, + fontSize: .bodyM, horizontalAlignment: .leading ) @@ -133,7 +133,7 @@ private enum Template5Preview { .text(.init( text: "package_terms", color: .init(light: .hex("#999999")), - textStyle: .caption + fontSize: .bodyS )) ], dimension: .vertical(.center, .start), diff --git a/RevenueCatUI/Templates/Components/Text/TextComponentView.swift b/RevenueCatUI/Templates/Components/Text/TextComponentView.swift index c16b6e74c2..c3dc96d6c3 100644 --- a/RevenueCatUI/Templates/Components/Text/TextComponentView.swift +++ b/RevenueCatUI/Templates/Components/Text/TextComponentView.swift @@ -40,12 +40,13 @@ struct TextComponentView: View { Group { if style.visible { Text(style.text) - .font(style.textStyle) + .font(style.fontSize) .fontWeight(style.fontWeight) .fixedSize(horizontal: false, vertical: true) .multilineTextAlignment(style.horizontalAlignment) .foregroundStyle(style.color) .padding(style.padding) + .size(style.size) .background(style.backgroundColor) .padding(style.margin) } else { @@ -87,7 +88,7 @@ struct TextComponentView_Previews: PreviewProvider { ], component: .init( text: "id_1", - fontFamily: nil, + fontName: nil, fontWeight: .black, color: .init(light: .hex("#ff0000")), backgroundColor: .init(light: .hex("#dedede")), @@ -99,7 +100,7 @@ struct TextComponentView_Previews: PreviewProvider { bottom: 20, leading: 10, trailing: 10), - textStyle: .footnote, + fontSize: .bodyS, horizontalAlignment: .leading ) ) @@ -131,7 +132,7 @@ struct TextComponentView_Previews: PreviewProvider { bottom: 10, leading: 10, trailing: 10), - textStyle: .title + fontSize: .headingXL ) ) ) diff --git a/RevenueCatUI/Templates/Components/Text/TextComponentViewModel.swift b/RevenueCatUI/Templates/Components/Text/TextComponentViewModel.swift index 7c380d3568..ac4be8cc4c 100644 --- a/RevenueCatUI/Templates/Components/Text/TextComponentViewModel.swift +++ b/RevenueCatUI/Templates/Components/Text/TextComponentViewModel.swift @@ -79,13 +79,14 @@ class TextComponentViewModel { let style = TextComponentStyle( visible: partial?.visible ?? true, text: localalizedPartial?.text ?? self.text, - fontFamily: partial?.fontFamily ?? self.component.fontFamily, + fontFamily: partial?.fontName ?? self.component.fontName, fontWeight: partial?.fontWeight ?? self.component.fontWeight, color: partial?.color ?? self.component.color, backgroundColor: partial?.backgroundColor ?? self.component.backgroundColor, + size: partial?.size ?? self.component.size, padding: partial?.padding ?? self.component.padding, margin: partial?.margin ?? self.component.margin, - textStyle: partial?.textStyle ?? self.component.textStyle, + fontSize: partial?.fontSize ?? self.component.fontSize, horizontalAlignment: partial?.horizontalAlignment ?? self.component.horizontalAlignment ) @@ -157,13 +158,13 @@ class TextComponentViewModel { partial: PaywallComponent.PartialTextComponent( visible: otherPartial?.visible ?? basePartial?.visible, text: otherPartial?.text ?? basePartial?.text, - fontFamily: otherPartial?.fontFamily ?? basePartial?.fontFamily, + fontName: otherPartial?.fontName ?? basePartial?.fontName, fontWeight: otherPartial?.fontWeight ?? basePartial?.fontWeight, color: otherPartial?.color ?? basePartial?.color, backgroundColor: otherPartial?.backgroundColor ?? basePartial?.backgroundColor, padding: otherPartial?.padding ?? basePartial?.padding, margin: otherPartial?.margin ?? basePartial?.margin, - textStyle: otherPartial?.textStyle ?? basePartial?.textStyle, + fontSize: otherPartial?.fontSize ?? basePartial?.fontSize, horizontalAlignment: otherPartial?.horizontalAlignment ?? basePartial?.horizontalAlignment ) ) @@ -192,12 +193,12 @@ struct TextComponentStyle { let visible: Bool let text: String - let fontFamily: String? let fontWeight: Font.Weight let color: Color - let textStyle: Font + let fontSize: Font let horizontalAlignment: TextAlignment let backgroundColor: Color + let size: PaywallComponent.Size let padding: EdgeInsets let margin: EdgeInsets @@ -208,19 +209,23 @@ struct TextComponentStyle { fontWeight: PaywallComponent.FontWeight, color: PaywallComponent.ColorScheme, backgroundColor: PaywallComponent.ColorScheme?, + size: PaywallComponent.Size, padding: PaywallComponent.Padding, margin: PaywallComponent.Padding, - textStyle: PaywallComponent.TextStyle, + fontSize: PaywallComponent.FontSize, horizontalAlignment: PaywallComponent.HorizontalAlignment ) { self.visible = visible self.text = text - self.fontFamily = fontFamily self.fontWeight = fontWeight.fontWeight self.color = color.toDyanmicColor() - self.textStyle = textStyle.font + + // WIP: Take into account the fontFamily mapping + self.fontSize = fontSize.font + self.horizontalAlignment = horizontalAlignment.textAlignment self.backgroundColor = backgroundColor?.toDyanmicColor() ?? Color.clear + self.size = size self.padding = padding.edgeInsets self.margin = margin.edgeInsets } diff --git a/Sources/Paywalls/Components/Common/PaywallComponentPropertyTypes.swift b/Sources/Paywalls/Components/Common/PaywallComponentPropertyTypes.swift index 31e17e66fa..a1a0b186ff 100644 --- a/Sources/Paywalls/Components/Common/PaywallComponentPropertyTypes.swift +++ b/Sources/Paywalls/Components/Common/PaywallComponentPropertyTypes.swift @@ -105,18 +105,6 @@ public extension PaywallComponent { } -// struct ColorInfo: Codable, Sendable, Hashable, Equatable { -// -// public init(light: ColorHex, dark: ColorHex? = nil) { -// self.light = light -// self.dark = dark -// } -// -// public let light: ColorHex -// public let dark: ColorHex? -// -// } - enum Shape: Codable, Sendable, Hashable, Equatable { case rectangle @@ -292,23 +280,18 @@ public extension PaywallComponent { } - enum TextStyle: String, Codable, Sendable, Hashable, Equatable { - - case largeTitle = "large_title" - case title - case title2 - case title3 - case headline - case subheadline - case body - case callout - case footnote - case caption - case caption2 - - // Swift 5.9 stuff - case extraLargeTitle = "extra_large_title" - case extraLargeTitle2 = "extra_large_title2" + enum FontSize: String, Codable, Sendable, Hashable, Equatable { + + case headingXXL = "heading_xxl" + case headingXL = "heading_xl" + case headingL = "heading_l" + case headingM = "heading_m" + case headingS = "heading_s" + case headingXS = "heading_xs" + case bodyXL = "body_xl" + case bodyL = "body_l" + case bodyM = "body_m" + case bodyS = "body_s" } diff --git a/Sources/Paywalls/Components/PaywallTextComponent.swift b/Sources/Paywalls/Components/PaywallTextComponent.swift index 17c3a7e75d..aec714205f 100644 --- a/Sources/Paywalls/Components/PaywallTextComponent.swift +++ b/Sources/Paywalls/Components/PaywallTextComponent.swift @@ -16,12 +16,13 @@ public extension PaywallComponent { let type: ComponentType public let text: LocalizationKey - public let fontFamily: String? + public let fontName: String? public let fontWeight: FontWeight public let color: ColorScheme - public let textStyle: TextStyle + public let fontSize: FontSize public let horizontalAlignment: HorizontalAlignment public let backgroundColor: ColorScheme? + public let size: Size public let padding: Padding public let margin: Padding @@ -29,25 +30,27 @@ public extension PaywallComponent { public init( text: String, - fontFamily: String? = nil, + fontName: String? = nil, fontWeight: FontWeight = .regular, color: ColorScheme, backgroundColor: ColorScheme? = nil, + size: Size = .init(width: .fill, height: .fit), padding: Padding = .zero, margin: Padding = .zero, - textStyle: TextStyle = .body, + fontSize: FontSize = .bodyM, horizontalAlignment: HorizontalAlignment = .center, overrides: ComponentOverrides? = nil ) { self.type = .text self.text = text - self.fontFamily = fontFamily + self.fontName = fontName self.fontWeight = fontWeight self.color = color self.backgroundColor = backgroundColor + self.size = size self.padding = padding self.margin = margin - self.textStyle = textStyle + self.fontSize = fontSize self.horizontalAlignment = horizontalAlignment self.overrides = overrides } @@ -57,36 +60,39 @@ public extension PaywallComponent { public let visible: Bool? public let text: LocalizationKey? - public let fontFamily: String? + public let fontName: String? public let fontWeight: FontWeight? public let color: ColorScheme? - public let textStyle: TextStyle? + public let fontSize: FontSize? public let horizontalAlignment: HorizontalAlignment? public let backgroundColor: ColorScheme? + public let size: Size? public let padding: Padding? public let margin: Padding? public init( visible: Bool? = true, text: LocalizationKey? = nil, - fontFamily: String? = nil, + fontName: String? = nil, fontWeight: FontWeight? = nil, color: ColorScheme? = nil, backgroundColor: ColorScheme? = nil, + size: Size? = nil, padding: Padding? = nil, margin: Padding? = nil, - textStyle: TextStyle? = nil, + fontSize: FontSize? = nil, horizontalAlignment: HorizontalAlignment? = nil ) { self.visible = visible self.text = text - self.fontFamily = fontFamily + self.fontName = fontName self.fontWeight = fontWeight self.color = color self.backgroundColor = backgroundColor + self.size = size self.padding = padding self.margin = margin - self.textStyle = textStyle + self.fontSize = fontSize self.horizontalAlignment = horizontalAlignment } } @@ -98,12 +104,13 @@ extension PaywallComponent.TextComponent { enum CodingKeys: String, CodingKey { case type case text = "textLid" - case fontFamily + case fontName case fontWeight case color - case textStyle + case fontSize case horizontalAlignment case backgroundColor + case size case padding case margin @@ -117,12 +124,13 @@ extension PaywallComponent.PartialTextComponent { enum CodingKeys: String, CodingKey { case visible case text = "textLid" - case fontFamily + case fontName case fontWeight case color - case textStyle + case fontSize case horizontalAlignment case backgroundColor + case size case padding case margin }