More samples

SwiftUIPlayground/Samples.swift

@@ -152,4 +152,18 @@ public let samples: [String: AnyView] = [
             "matchedgeometryeffect": AnyView(MatchedGeometryEffectSample()),
         ]
     )),
+    "Custom Layout": AnyView(SamplesList(
+        title: "Custom Layout", samples:
+        [
+            // https://developer.apple.com/documentation/swiftui/layout
+            "Layout Protocol": AnyView(LayoutProtocolSample()),
+        ]
+    )),
+    "View Fundamentals": AnyView(SamplesList(
+        title: "View Fundamental", samples:
+        [
+            // https://developer.apple.com/documentation/swiftui/viewmodifier
+            "ViewModifier Protocol": AnyView(ViewModifierProtocolSample()),
+        ]
+    )),
 ]

SwiftUIPlayground/Samples/CustomLayout/LayoutProtocolSample.swift

@@ -0,0 +1,73 @@
+//
+//  LayoutProtocolSample.swift
+//  SwiftUIPlayground
+//
+//  Created by Taha Tesser on 10/14/24.
+//
+
+// Reference https://sarunw.com/posts/swiftui-custom-layout/
+
+import SwiftUI
+
+struct LayoutProtocolSample: View {
+    var body: some View {
+        BackslashStack {
+            Text("Lorem")
+                .border(.yellow)
+            Text("eveniet facilis")
+                .border(.blue)
+            Text("possimus eaque adipisci ")
+                .border(.green)
+        }
+        .border(.pink)
+    }
+}
+
+#Preview {
+    LayoutProtocolSample()
+}
+
+struct BackslashStack: Layout {
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+
+        let subviewSizes = subviews.map { proxy in
+            return proxy.sizeThatFits(.unspecified)
+        }
+
+        let combinedSize = subviewSizes.reduce(.zero) { currentSize, subviewSize in
+
+            return CGSize(
+                width: currentSize.width + subviewSize.width, height: currentSize.height + subviewSize.height)
+        }
+
+        return combinedSize
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+
+
+        let subviewSizes = subviews.map { proxy in
+            return proxy.sizeThatFits(.unspecified)
+        }
+
+        var x = bounds.minX
+        var y = bounds.minY
+
+        for index in subviews.indices {
+            let subviewSize = subviewSizes[index]
+            let sizeProposal = ProposedViewSize(
+                width: subviewSize.width,
+                height: subviewSize.height)
+
+            subviews[index]
+                .place(
+                    at: CGPoint(x: x, y: y),
+                    proposal: sizeProposal)
+
+            x += subviewSize.width
+            y += subviewSize.height
+        }
+    }
+
+}

SwiftUIPlayground/Samples/ViewFundamentals/ViewModifierProtocolSample.swift

@@ -0,0 +1,72 @@
+//
+//  ViewModifierProtocolSamp,e.swift
+//  SwiftUIPlayground
+//
+//  Created by Taha Tesser on 10/14/24.
+//
+
+import SwiftUI
+
+struct ViewModifierProtocolSample: View {
+    @State var text: String = "Hello, World!"
+
+
+    var body: some View {
+        TextField(
+            "",
+            text: $text,
+            prompt: Text("Placeholder"))
+        .clearButton(
+            text: $text,
+            onClearHandler: {
+                print("Text wad cleared!")
+
+        })
+//        .modifier(ClearTextButtonViewModifier(text: $text, onClearHandler: {
+//            print("Text wad cleared!")
+//        }))
+        .padding()
+    }
+}
+
+#Preview {
+    ViewModifierProtocolSample()
+}
+
+extension View {
+
+    func clearButton(
+        text: Binding<String>,
+        onClearHandler: (() -> Void)?) -> some View {
+            modifier(ClearTextButtonViewModifier(text: text, onClearHandler: onClearHandler))
+        }
+}
+
+private struct ClearTextButtonViewModifier: ViewModifier {
+    @Binding var text: String
+
+    let onClearHandler: (() -> Void)?
+
+    func body(content: Content) -> some View {
+        ZStack {
+            content
+
+            HStack {
+                Spacer()
+
+                Button {
+                    text.removeAll()
+
+                    onClearHandler?()
+                } label: {
+                    Image(systemName: "xmark.circle.fill")
+                        .foregroundStyle(.placeholder)
+                        .padding(.trailing, 10)
+                }
+                .buttonStyle(.plain)
+            }
+            .opacity(text.isEmpty ? 0.0 : 1.0)
+        }
+    }
+}
+