Deprecate flow layouts and simplify tag lists

Author: danielsaidi

README.md

@@ -77,7 +77,7 @@ Once a type implements ``Taggable``, it can make use of a lot of automatically i
 
 ### Views
 
-TagKit has a bunch of tag related types, like ``TagCapsule``, ``TagList``, ``TagEditList`` and ``TagTextField``.
+TagKit has a couple of tag related types, like ``TagList``, ``TagEditList`` and ``TagTextField``.
 
 
 

RELEASE_NOTES.md

@@ -6,11 +6,19 @@ TagKit will use semver after 1.0.
 
 ## 0.5
 
-This version makes TagKit use Swift 6.
+This version makes TagKit use Swift 6, by removing the flow layout parts from the library.
+
+The `TagList` and `TagEditList` is therefore much simpler now before, and can be used in more ways. 
+
+### 💡 Behavior Changes
+
+* `TagList` and `TagEditList` now just lists the provided tags.
+* `TagList` and `TagEditList` can now be rendered in any layout container.
 
 ### 🗑️ Deprecated
 
 * `Slugifiable` has been deprecated. Just use the `slugified` string extension instead.
+* `TagCapsule` has been deprecated, since it's better to just customize a regular `Text`.
 
 ### 💥 Breaking Changes
 

Sources/TagKit/Views/TagEditList.swift

@@ -8,73 +8,45 @@
 
 import SwiftUI
 
-/**
- This view lists tags in a leading to trailing flow and lets
- you tap tags to add and remove them from a provided binding.
-
- The view takes a list of tags and use a tag view builder to
- render a view for each tag. You can use any custom tag view,
- for instance a ``TagCapsule``.
- 
- The view can take a list of additional tags. Tho avoid that
- tags disappear from the list when you toggle them off. Make
- sure to use the `additionalTags` parameter to specify which
- tags you always want to show in the list.
-
- You must specify a `container`, since this list is rendered
- differently depending on if it's added to a `ScrollView` or
- a `VerticalStack`.
- */
+/// This view lists a collection of tags, that can be tapped
+/// to toggle them in the provided tags binding.
+///
+/// This view will list all tags in the provided binding, as
+/// well as a list of additional tags which should be listed
+/// even when they are not set in the binding.
+///
+/// Note that this list only renders the tag views. You must
+/// specify the container in which they will be rendered.
 public struct TagEditList<TagView: View>: View {
 
     /// Create a tag edit list.
     ///
     /// - Parameters:
     ///   - tags: The items to render in the layout.
     ///   - additionalTags: Additional tags to pick from.
-    ///   - container: The container type, by default `.scrollView`.
-    ///   - horizontalSpacing: The horizontal spacing between items.
-    ///   - verticalSpacing: The vertical spacing between items.
     ///   - tagView: The tag view builder.
     public init(
         tags: Binding<[String]>,
         additionalTags: [String],
-        container: TagListContainer = .scrollView,
-        horizontalSpacing: CGFloat = 5,
-        verticalSpacing: CGFloat = 5,
         @ViewBuilder tagView: @escaping TagViewBuilder
     ) {
         self.tags = tags
         self.additionalTags = additionalTags
-        self.container = container
-        self.horizontalSpacing = horizontalSpacing
-        self.verticalSpacing = verticalSpacing
         self.tagView = tagView
-        let initialHeight: CGFloat = container == .scrollView ? .zero : .infinity
-        _totalHeight = State(initialValue: initialHeight)
     }
 
     private let tags: Binding<[String]>
     private let additionalTags: [String]
-    private let container: TagListContainer
-    private let horizontalSpacing: CGFloat
-    private let verticalSpacing: CGFloat
-
+    
     @ViewBuilder
     private let tagView: TagViewBuilder
 
     /// This type defines the tag view builder for the list.
     public typealias TagViewBuilder = (_ tag: String, _ hasTag: Bool) -> TagView
 
-    @State
-    private var totalHeight: CGFloat
-
     public var body: some View {
         TagList(
             tags: allTags,
-            container: container,
-            horizontalSpacing: horizontalSpacing,
-            verticalSpacing: verticalSpacing
         ) { tag in
             Button(action: { toggleTag(tag) }) {
                 tagView(tag, hasTag(tag))
@@ -124,104 +96,60 @@ private extension TagEditList {
 
     struct Preview: View {
 
-        @State
-        var newTag = ""
-
-        @State
-        var tags = ["tag-1"]
-
-        @State
-        var added: [String] = []
+        @State var newTag = ""
+        @State var tags = ["tag-1"]
+        
+        let slugConfiguration = SlugConfiguration.standard
 
         var body: some View {
             NavigationView {
                 ScrollView {
-                    VStack(alignment: .leading, spacing: 30) {
-                        list("Standard Style", .standard, .standardSelected)
-                        list("Custom Style", .custom, .customSelected)
+                    TagEditList(
+                        tags: $tags,
+                        additionalTags: ["always-visible"]
+                    ) { tag, isAdded in
+                        Text(tag.slugified())
+                            .font(.system(size: 12))
+                            .foregroundColor(.black)
+                            .padding(.horizontal, 8)
+                            .padding(.vertical, 4)
+                            .background(isAdded ? Color.green : Color.primary.opacity(0.1), in: .capsule)
                     }
                     .padding()
-                    
                 }
-//                .background(
-//                    LinearGradient(
-//                        colors: [.red, .blue],
-//                        startPoint: .top,
-//                        endPoint: .bottom
-//                    )
-//                )
                 .toolbar {
                     ToolbarItem {
                         HStack {
                             TagTextField(
                                 text: $newTag,
-                                placeholder: "Add new tag"
+                                placeholder: "Add new tag",
+                                configuration: slugConfiguration
                             )
                             #if os(iOS)
                             .autocorrectionDisabled()
                             .textFieldStyle(.roundedBorder)
                             #endif
                             Button("Add") {
-                                addTag(tag: newTag)
+                                addNewTag(tag: newTag)
                             }
                             .disabled(newTag.isEmpty)
                         }
                     }
                 }
             }
         }
-        
-        private func list(
-            _ title: String,
-            _ style: TagCapsuleStyle,
-            _ selected: TagCapsuleStyle
-        ) -> some View {
-            VStack(alignment: .leading) {
-                Text(title)
-                    .font(.footnote)
-                
-                TagEditList(
-                    tags: $tags,
-                    additionalTags: ["tag-1", "tag-2", "tag-3"] + added
-                ) { tag, hasTag in
-                    TagCapsule(tag)
-                        .tagCapsuleStyle(hasTag ? selected : style)
-                }
-            }
-        }
 
-        private func addTag(
+        private func addNewTag(
             tag: String,
             selected: Bool = true
         ) {
-            let slug = tag.slugified()
+            let slug = tag.slugified(with: slugConfiguration)
             if selected {
                 tags.append(slug)
             }
-            added.append(slug)
             newTag = ""
         }
     }
 
     return Preview()
 }
-
-private extension TagCapsuleStyle {
-    
-    static var custom: TagCapsuleStyle {
-        .init(
-            foregroundColor: .black,
-            backgroundColor: .red,
-            border: .init(width: 4)
-        )
-    }
-    
-    static var customSelected: TagCapsuleStyle {
-        .init(
-            foregroundColor: .black,
-            backgroundColor: .red,
-            border: .init(width: 4),
-            shadow: .standardSelected
-        )
-    }
-}

Sources/TagKit/Views/TagList.swift

@@ -16,22 +16,15 @@ public enum TagListContainer {
     case scrollView, vstack
 }
 
-/**
- This view lists tags in a leading to trailing flow.
-
- The view takes a list of tags and use the provided tag view
- builder to render a view for each tag. This gives you a lot
- of flexibility, since you can use any view you want.
-
- Note that the list will not slugify the provided tags since
- this would require it to use the same slug configuration as
- was used to generate the tags. Just provide it with already
- slugified tags.
-
- You must specify a container type, since the list has to be
- rendered differently depending on if it's in a `ScrollView`
- or a `VerticalStack`.
- */
+/// This view can be used to list a collection of tags.
+///
+/// The view takes a list of tags and renders them using the
+/// provided `tagView`  builder. It will not slugify the tag
+/// elements, so either provide already slugified strings or
+/// slugify them in the view builder.
+///
+/// Note that this list only renders the tag views. You must
+/// specify the container in which they will be rendered.
 public struct TagList<TagView: View>: View {
 
     /// Create a tag list.
@@ -44,116 +37,41 @@ public struct TagList<TagView: View>: View {
     ///   - tagView: The item view builder.
     public init(
         tags: [String],
-        container: TagListContainer = .scrollView,
-        horizontalSpacing: CGFloat = 5,
-        verticalSpacing: CGFloat = 5,
         @ViewBuilder tagView: @escaping TagViewBuilder
     ) {
         self.tags = tags
-        self.container = container
-        self.horizontalSpacing = horizontalSpacing
-        self.verticalSpacing = verticalSpacing
         self.tagView = tagView
-        let initialHeight: CGFloat = container == .scrollView ? .zero : .infinity
-        _totalHeight = State(initialValue: initialHeight)
     }
 
     private let tags: [String]
-    private let container: TagListContainer
-    private let horizontalSpacing: CGFloat
-    private let verticalSpacing: CGFloat
 
     @ViewBuilder
     private let tagView: TagViewBuilder
 
     /// This type defines the tag view builder for the list.
     public typealias TagViewBuilder = (_ tag: String) -> TagView
 
-    @State
-    private var totalHeight: CGFloat
-
     public var body: some View {
-        if container == .scrollView {
-            content.frame(height: totalHeight)
-        } else {
-            content.frame(maxHeight: totalHeight)
-        }
-    }
-}
-
-@MainActor
-private extension TagList {
-
-    var content: some View {
-        GeometryReader { geometry in
-            content(in: geometry)
-        }
-    }
-
-    func content(in g: GeometryProxy) -> some View {
-        var width = CGFloat.zero
-        var height = CGFloat.zero
-        var lastHeight = CGFloat.zero
-        let itemCount = tags.count
-        return ZStack(alignment: .topLeading) {
-            ForEach(Array(tags.enumerated()), id: \.offset) { index, item in
-                tagView(item)
-                    .padding([.horizontal], horizontalSpacing)
-                    .padding([.vertical], verticalSpacing)
-                    .alignmentGuide(.leading, computeValue: { d in
-                        if abs(width - d.width) > g.size.width {
-                            width = 0
-                            height -= lastHeight
-                        }
-                        lastHeight = d.height
-                        let result = width
-                        if index == itemCount - 1 {
-                            width = 0
-                        } else {
-                            width -= d.width
-                        }
-                        return result
-                    })
-                    .alignmentGuide(.top, computeValue: { _ in
-                        let result = height
-                        if index == itemCount - 1 {
-                            height = 0
-                        }
-                        return result
-                    })
-            }
-        }
-        .background(viewHeightReader($totalHeight))
-    }
-
-    func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
-        return GeometryReader { geo -> Color in
-            DispatchQueue.main.async {
-                binding.wrappedValue = geo.frame(in: .local).size.height
-            }
-            return .clear
+        ForEach(Array(tags.enumerated()), id: \.offset) {
+            tagView($0.element)
         }
     }
 }
 
 #Preview {
 
-    let tags = [
-        "A long text here", "Another long text here",
-        "A", "bunch", "of", "short", "texts", "in", "a", "row",
-        "And then a very very very long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long long one",
-        "and", "then", "some", "more", "short", "ones"
-    ]
-
-    return ScrollView {
-        TagList(tags: tags) {  tag in
-            Text(tag)
+    ScrollView {
+        TagList(tags: [
+            "A long tag here",
+            "Another long tag here",
+            "A", "bunch", "of", "short", "tags"
+        ]) { tag in
+            Text(tag.slugified())
                 .font(.system(size: 12))
                 .foregroundColor(.black)
                 .padding(.horizontal, 8)
                 .padding(.vertical, 4)
-                .background(Color.green)
-                .clipShape(RoundedRectangle(cornerRadius: 5))
+                .background(Color.green, in: .rect(cornerRadius: 5))
         }
         .padding()
     }