refactor: 💡 [HCPSDKFIORIUIKIT-2879] KeyValueItem Refactor

Apps/Examples/Examples.xcodeproj/project.pbxproj

@@ -29,6 +29,7 @@
 		3CC870962CB6F4F30081909C /* ToastMessageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CC870952CB6F4F30081909C /* ToastMessageExample.swift */; };
 		3CD71F292CDB627300B037EB /* CheckoutIndicatorExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CD71F282CDB626900B037EB /* CheckoutIndicatorExample.swift */; };
 		3CDD6ECD2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CDD6ECC2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift */; };
+		554307FB2D5F6A91005AFA6D /* _KeyValueItemExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 554307FA2D5F6A91005AFA6D /* _KeyValueItemExample.swift */; };
 		55598FAD2CDDB4F6007CFFBB /* ValuePickerExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55598FAC2CDDB4F6007CFFBB /* ValuePickerExample.swift */; };
 		5ABFB34B2D27D73B0054C1F3 /* SectionHeaderFooterExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5ABFB34A2D27D7310054C1F3 /* SectionHeaderFooterExample.swift */; };
 		6432FFA02C5164F8008ECE89 /* SegmentedControlExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6432FF9F2C5164F8008ECE89 /* SegmentedControlExample.swift */; };
@@ -264,6 +265,7 @@
 		3CC870952CB6F4F30081909C /* ToastMessageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToastMessageExample.swift; sourceTree = "<group>"; };
 		3CD71F282CDB626900B037EB /* CheckoutIndicatorExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckoutIndicatorExample.swift; sourceTree = "<group>"; };
 		3CDD6ECC2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckoutIndicatorModalExample.swift; sourceTree = "<group>"; };
+		554307FA2D5F6A91005AFA6D /* _KeyValueItemExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = _KeyValueItemExample.swift; sourceTree = "<group>"; };
 		55598FAC2CDDB4F6007CFFBB /* ValuePickerExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ValuePickerExample.swift; sourceTree = "<group>"; };
 		5ABFB34A2D27D7310054C1F3 /* SectionHeaderFooterExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SectionHeaderFooterExample.swift; sourceTree = "<group>"; };
 		6432FF9F2C5164F8008ECE89 /* SegmentedControlExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SegmentedControlExample.swift; sourceTree = "<group>"; };
@@ -845,6 +847,7 @@
 		9DEC27B32C3F3D750070B571 /* Views */ = {
 			isa = PBXGroup;
 			children = (
+				554307FA2D5F6A91005AFA6D /* _KeyValueItemExample.swift */,
 				9DEC27B42C3F3DB30070B571 /* KeyValueItemExample.swift */,
 				5ABFB34A2D27D7310054C1F3 /* SectionHeaderFooterExample.swift */,
 				9DEC27B62C3F3DE70070B571 /* OtherViewExamples.swift */,
@@ -1226,6 +1229,7 @@
 				C18868D12B32535100F865F7 /* SearchFontAndColor.swift in Sources */,
 				9D0B26092B9BA5C0004278A5 /* KeyValueFormViewExample.swift in Sources */,
 				8732C2C52C350957002110E9 /* TimelineExample.swift in Sources */,
+				554307FB2D5F6A91005AFA6D /* _KeyValueItemExample.swift in Sources */,
 				6D10F8A02C7DB3F50071DD3E /* BannerMultiMessageExample.swift in Sources */,
 				8A557A1A24C12C820098003A /* ChartsContentView.swift in Sources */,
 				8A5579CE24C1293C0098003A /* SettingColor.swift in Sources */,

Apps/Examples/Examples/FioriSwiftUICore/Views/KeyValueItemExample.swift

@@ -2,49 +2,87 @@ import FioriSwiftUICore
 import SwiftUI
 
 struct KeyValueItemExample: View {
+    @State var axis: Axis = .horizontal
+
+    struct CustomKeyValueItemStyle: KeyValueItemStyle {
+        func makeBody(_ configuration: KeyValueItemConfiguration) -> some View {
+            KeyValueItem(configuration)
+                .keyStyle { c in
+                    c.key
+                        .lineLimit(2)
+                        .font(.fiori(forTextStyle: .callout))
+                        .foregroundStyle(Color.preferredColor(.green7))
+                }
+                .valueStyle { c in
+                    c.value
+                        .lineLimit(2)
+                        .font(.fiori(forTextStyle: .title3))
+                        .foregroundStyle(Color.preferredColor(.indigo7))
+                        .background(Color.preferredColor(.red3))
+                }
+        }
+    }
+
     var body: some View {
-        Text("KeyValueItemExample")
         List {
-            Text("Default Horizontal")
-            KeyValueItem {
-                Text("Key 1")
-
-            } value: {
-                Text("Value 1")
+            Section {
+                Picker("Axis", selection: self.$axis) {
+                    Text("Horizontal").tag(Axis.horizontal)
+                    Text("Vertical").tag(Axis.vertical)
+                }
             }
-
-            Text("Vertical")
-            KeyValueItem(key: {
-                Text("Vertical Axis")
-            }, value: {
-                Text("Value 2")
-            }, axis: .vertical)
-
-            Text("Custom Color and Font")
-            KeyValueItem {
-                Text("Custom Color")
-                    .foregroundStyle(.red)
-                    .font(.fiori(forTextStyle: .title1))
-            } value: {
-                Text("Value 3")
-                    .foregroundStyle(.brown)
-                    .font(.fiori(forTextStyle: .footnote))
+            Section {
+                Text("Key Value Item (Default Style)")
+                KeyValueItem(
+                    key: { Text("Key 1") },
+                    value: { Text("Value 1") },
+                    axis: self.axis
+                )
+
+                Divider().background(Color.gray)
+                Text("Key Value Item (Long String)")
+                KeyValueItem(
+                    key: { Text("Long long long long long long long long long long long long long long long long long long Key") },
+                    value: { self.MultipleValues() },
+                    axis: self.axis
+                )
+
+                Divider().background(Color.gray)
+                Text("Key Value Item 2 lines (Custom Style)")
+                KeyValueItem(
+                    key: { Text("Long long long long long long long long long long long long long long long long long long long long long Key") },
+                    value: { Text("Long long long long long long long long long Value") },
+                    axis: self.axis
+                ).keyValueItemStyle(CustomKeyValueItemStyle())
             }
-
-            Text("Verticle Custom Color and Font")
-            KeyValueItem(key: {
-                Text("Custom Color and Font Vertical Axis")
-                    .foregroundStyle(.red)
-                    .font(.fiori(forTextStyle: .title1))
-            }, value: {
-                Text("Value 4")
-                    .foregroundStyle(.brown)
-                    .font(.fiori(forTextStyle: .footnote))
-            }, axis: .vertical)
         }
     }
-}
-
-#Preview {
-    KeyValueItemExample()
+
+    func MultipleValues() -> any View {
+        switch self.axis {
+        case .horizontal:
+            return HStack(spacing: 0) {
+                Text("Long long long long long long long long long Value")
+                Spacer()
+                Link("650-000-0000", destination: URL(string: "tel:650-000-0000")!)
+                Spacer()
+                Link("[email protected]", destination: URL(string: "mailto:[email protected]")!)
+                Spacer()
+                Link("Google", destination: URL(string: "https://www.google.com")!)
+            }
+        case .vertical:
+            return VStack(alignment: .leading) {
+                Text("Long long long long long long long long long Value")
+                Link("650-000-0000", destination: URL(string: "tel:650-000-0000")!)
+                Link("[email protected]", destination: URL(string: "mailto:[email protected]")!)
+                Link("Google", destination: URL(string: "https://www.google.com")!)
+            }
+        }
+    }
+
+    struct KeyValueItemExample_Previews: PreviewProvider {
+        static var previews: some View {
+            KeyValueItemExample()
+        }
+    }
 }

Apps/Examples/Examples/FioriSwiftUICore/Views/OtherViewExamples.swift

@@ -9,6 +9,11 @@ struct OtherViewExamples: View {
             {
                 Text("KeyValueItem Example")
             }
+            NavigationLink(
+                destination: _KeyValueItemExample())
+            {
+                Text("_KeyValueItem Example")
+            }
         }
     }
 }

Apps/Examples/Examples/FioriSwiftUICore/Views/_KeyValueItemExample.swift

@@ -0,0 +1,50 @@
+import FioriSwiftUICore
+import SwiftUI
+
+struct _KeyValueItemExample: View {
+    var body: some View {
+        Text("_KeyValueItemExample")
+        List {
+            Text("Default Horizontal")
+            _KeyValueItem {
+                Text("Key 1")
+
+            } value: {
+                Text("Value 1")
+            }
+
+            Text("Vertical")
+            _KeyValueItem(key: {
+                Text("Vertical Axis")
+            }, value: {
+                Text("Value 2")
+            }, axis: .vertical)
+
+            Text("Custom Color and Font")
+            _KeyValueItem {
+                Text("Custom Color")
+                    .foregroundStyle(.red)
+                    .font(.fiori(forTextStyle: .title1))
+            } value: {
+                Text("Value 3")
+                    .foregroundStyle(.brown)
+                    .font(.fiori(forTextStyle: .footnote))
+            }
+
+            Text("Verticle Custom Color and Font")
+            _KeyValueItem(key: {
+                Text("Custom Color and Font Vertical Axis")
+                    .foregroundStyle(.red)
+                    .font(.fiori(forTextStyle: .title1))
+            }, value: {
+                Text("Value 4")
+                    .foregroundStyle(.brown)
+                    .font(.fiori(forTextStyle: .footnote))
+            }, axis: .vertical)
+        }
+    }
+}
+
+#Preview {
+    _KeyValueItemExample()
+}

Sources/FioriSwiftUICore/Models/ModelDefinitions.swift

@@ -91,12 +91,16 @@ public protocol _KPIProgressItemModel: KpiProgressComponent, SubtitleComponent,
 public protocol KPIProgressItemModel {}
 
 // sourcery: generated_component
-public protocol KeyValueItemModel: KeyComponent, ValueComponent {
+public protocol _KeyValueItemModel: KeyComponent, ValueComponent {
     // sourcery: default.value = .horizontal
     // sourcery: no_view
     var axis: Axis { get }
 }
 
+/// Deprecated KeyValueItemModel
+@available(*, unavailable, renamed: "_KeyValueItemModel", message: "Will be removed in the future release. Please create KeyValueItem with other initializers instead.")
+public protocol KeyValueItemModel {}
+
 // sourcery: add_env_props = "sharedAction"
 // sourcery: generated_component_not_configurable
 public protocol _ActionModel: ActionComponent {}

Sources/FioriSwiftUICore/Views/KeyValueItem+View.swift → Sources/FioriSwiftUICore/Views/_KeyValueItem+View.swift

@@ -2,7 +2,7 @@ import Foundation
 import SwiftUI
 
 extension Fiori {
-    enum KeyValueItem {
+    enum _KeyValueItem {
         typealias KeyCumulative = EmptyModifier
         typealias ValueCumulative = EmptyModifier
 
@@ -30,7 +30,7 @@ extension Fiori {
     }
 }
 
-extension KeyValueItem: View {
+extension _KeyValueItem: View {
     public var body: some View {
         CompactVStack(alignment: .leading) {
             if _axis == .horizontal {

Sources/FioriSwiftUICore/_ComponentProtocols/BaseComponentProtocols.swift

@@ -626,3 +626,9 @@ protocol _WatermarkComponent {
     // sourcery: @ViewBuilder
     var watermark: AttributedString? { get }
 }
+
+// sourcery: BaseComponent
+protocol _KeyComponent {
+    // sourcery: @ViewBuilder
+    var key: AttributedString { get }
+}

Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift

@@ -1326,3 +1326,19 @@ protocol _SignatureCaptureViewComponent: _TitleComponent, _MandatoryField, _Star
     /// An optional call back for delete action.
     var onDelete: (() -> Void)? { get }
 }
+
+/// `KeyValueItem` provides a customizable activity item with a key and a value.
+///
+/// ## Usage
+/// ```swift
+/// KeyValueItem(key: {
+///         Text("key 1")
+///     }, value: {
+///         Text("value 1")
+///     }, axis: .vertical)
+/// ```
+// sourcery: CompositeComponent
+protocol _KeyValueItemComponent: _KeyComponent, _ValueComponent, _FormViewComponent {
+    // sourcery: defaultValue = .horizontal
+    var axis: Axis { get }
+}

Sources/FioriSwiftUICore/_FioriStyles/KeyStyle.fiori.swift

@@ -0,0 +1,19 @@
+import FioriThemeManager
+import Foundation
+import SwiftUI
+
+// Base Layout style
+public struct KeyBaseStyle: KeyStyle {
+    @ViewBuilder
+    public func makeBody(_ configuration: KeyConfiguration) -> some View {
+        configuration.key
+    }
+}
+
+// Default fiori styles
+public struct KeyFioriStyle: KeyStyle {
+    @ViewBuilder
+    public func makeBody(_ configuration: KeyConfiguration) -> some View {
+        Key(configuration)
+    }
+}

Sources/FioriSwiftUICore/_FioriStyles/KeyValueItemStyle.fiori.swift

@@ -0,0 +1,57 @@
+import FioriThemeManager
+import Foundation
+import SwiftUI
+
+// Base Layout style
+public struct KeyValueItemBaseStyle: KeyValueItemStyle {
+    public func makeBody(_ configuration: KeyValueItemConfiguration) -> some View {
+        CompactVStack(alignment: .leading) {
+            switch configuration.axis {
+            case .horizontal:
+                HStack(spacing: 0) {
+                    configuration.key
+                    Spacer()
+                    configuration.value
+                }
+                .frame(maxWidth: .infinity)
+            case .vertical:
+                configuration.key
+                configuration.value
+            }
+        }.accessibilityElement(children: .combine)
+            .buttonStyle(.borderless)
+    }
+}
+
+// Default fiori styles
+extension KeyValueItemFioriStyle {
+    struct ContentFioriStyle: KeyValueItemStyle {
+        func makeBody(_ configuration: KeyValueItemConfiguration) -> some View {
+            KeyValueItem(configuration)
+        }
+    }
+
+    public struct KeyFioriStyle: KeyStyle {
+        let keyValueItemConfiguration: KeyValueItemConfiguration
+
+        public func makeBody(_ configuration: KeyConfiguration) -> some View {
+            Key(configuration)
+        }
+    }
+
+    struct ValueFioriStyle: ValueStyle {
+        let keyValueItemConfiguration: KeyValueItemConfiguration
+
+        func makeBody(_ configuration: ValueConfiguration) -> some View {
+            Value(configuration)
+        }
+    }
+
+    struct FormViewFioriStyle: FormViewStyle {
+        let keyValueItemConfiguration: KeyValueItemConfiguration
+
+        func makeBody(_ configuration: FormViewConfiguration) -> some View {
+            FormView(configuration)
+        }
+    }
+}