hierarchical-icons-viewbuilder.swift

//
//  HierarchicalSymbols.swift
//  Sandbox
//
//  Created by Adam Whitcroft on 2022-10-10.
//

import SwiftUI

struct HierarchicalSymbols: View {
    @State var showSheet: Bool = false
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 16) {
                    HierarchicalIcons()
                    Divider()
                    HierarchicalIconsFlat()
                    Divider()
                    HierarchicalIconsGradient()
                }
                .padding(.horizontal)
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button {
                            showSheet = true
                        } label: {
                            Text("Open sheet")
                        }
                    }
                }
                .navigationTitle("")
                .navigationBarTitleDisplayMode(.inline)
                .sheet(isPresented: $showSheet) {
                    Sheet()
                }
            }
        }
    }
}


// Demo of icons in a sheet
// Do they break with the transition?
struct Sheet: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView {
            VStack(spacing: 16) {
                NavigationLink {
                    PushView()
                } label: {
                    HierarchicalIcons()
                }
                
                Divider()
                
                NavigationLink {
                    PushView()
                } label: {
                    HierarchicalIconsFlat()
                }
                
                Divider()
                
                NavigationLink {
                    PushView()
                } label: {
                    HierarchicalIconsGradient()
                }
            }
            .padding(.horizontal)
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        dismiss()
                    } label: {
                        Text("Close")
                    }
                }
            }
        }
    }
}

// Demo of icons in a push view
// Do they break in the transition?
struct PushView: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack(spacing: 16) {
            HierarchicalIcons()
            Divider()
            HierarchicalIconsFlat()
            Divider()
            HierarchicalIconsGradient()
        }
        .padding(.horizontal)
    }
}

// MARK: Our icon blocks

// Basic hierarchical icons,
// Using `foregroundColor`
// Flat background
struct HierarchicalIcons: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Icons without `IconRow` viewbuilder
            Text("foregroundColor, no gradient")
                .font(.system(.body, design: .rounded))
            
            HStack {
                Image(systemName: "folder.fill.badge.plus")
                Image(systemName: "arrowshape.turn.up.left.circle.fill")
                Image(systemName: "bookmark.square.fill")
                Image(systemName: "chevron.right.circle.fill")
            }
            .symbolRenderingMode(.hierarchical)
            .font(.system(.title3, design: .rounded).weight(.semibold))
            .foregroundColor(.pink)
            
            // Icons wrapped in `IconRow` viewbuilder
            Text("foregroundColor, no gradient + viewbuilder")
                .font(.system(.body, design: .rounded))
            
            IconRow {
                HStack {
                    Image(systemName: "folder.fill.badge.plus")
                    Image(systemName: "arrowshape.turn.up.left.circle.fill")
                    Image(systemName: "bookmark.square.fill")
                    Image(systemName: "chevron.right.circle.fill")
                }
                .symbolRenderingMode(.hierarchical)
                .font(.system(.title3, design: .rounded).weight(.semibold))
                .foregroundColor(.pink)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

// Hierarchical icons,
// Using `foregroundStyle`
// Flat background
struct HierarchicalIconsFlat: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Icons without `IconRow` viewbuilder
            Text("foregroundStyle, no gradient")
                .font(.system(.body, design: .rounded))
            
            HStack {
                Image(systemName: "folder.fill.badge.plus")
                Image(systemName: "arrowshape.turn.up.left.circle.fill")
                Image(systemName: "bookmark.square.fill")
                Image(systemName: "chevron.right.circle.fill")
            }
            .symbolRenderingMode(.hierarchical)
            .font(.system(.title3, design: .rounded).weight(.semibold))
            .foregroundStyle(.pink)
            
            // Icons wrapped in `IconRow` viewbuilder
            Text("foregroundStyle, no gradient + viewbuilder")
                .font(.system(.body, design: .rounded))
            
            IconRow {
                HStack {
                    Image(systemName: "folder.fill.badge.plus")
                    Image(systemName: "arrowshape.turn.up.left.circle.fill")
                    Image(systemName: "bookmark.square.fill")
                    Image(systemName: "chevron.right.circle.fill")
                }
                .symbolRenderingMode(.hierarchical)
                .font(.system(.title3, design: .rounded).weight(.semibold))
                .foregroundStyle(.pink)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

// Hierarchical icons,
// Using `foregroundStyle`
// Gradient background
struct HierarchicalIconsGradient: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Icons without `IconRow` viewbuilder
            Text("foregroundStyle, gradient")
                .font(.system(.body, design: .rounded))
            
            HStack {
                Image(systemName: "folder.fill.badge.plus")
                Image(systemName: "arrowshape.turn.up.left.circle.fill")
                Image(systemName: "bookmark.square.fill")
                Image(systemName: "chevron.right.circle.fill")
            }
            .symbolRenderingMode(.hierarchical)
            .font(.system(.title3, design: .rounded).weight(.semibold))
            .foregroundStyle(LinearGradient(colors: [.pink, .purple], startPoint: .top, endPoint: .bottom))
            
            // Icons wrapped in `IconRow` viewbuilder
            Text("foregroundStyle, gradient + viewbuilder")
                .font(.system(.body, design: .rounded))
            
            IconRow {
                HStack {
                    Image(systemName: "folder.fill.badge.plus")
                    Image(systemName: "arrowshape.turn.up.left.circle.fill")
                    Image(systemName: "bookmark.square.fill")
                    Image(systemName: "chevron.right.circle.fill")
                }
                .symbolRenderingMode(.hierarchical)
                .font(.system(.title3, design: .rounded).weight(.semibold))
                .foregroundStyle(LinearGradient(colors: [.pink, .purple], startPoint: .top, endPoint: .bottom))
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

// MARK: Viewbuilder struct
struct IconRow<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack( alignment: .leading, spacing: 16) {
            content
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color.pink.opacity(0.1))
        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
    }
}

// MARK: Preview
struct HierarchicalSymbols_Previews: PreviewProvider {
    static var previews: some View {
        HierarchicalSymbols()
    }
}