AccessibleFonts Package Demo

ContentView.swift

//
//  ContentView.swift
//  Example
//
//  Created by Ezequiel dos Santos on 05/01/2026.
//

import SwiftUI
import AccessibleFonts

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 32) {
                    
                    // MARK: - Hero Section
                    heroSection
                    
                    Divider()
                        .padding(.horizontal)
                    
                    // MARK: - Font Families
                    fontFamiliesSection
                    
                    Divider()
                        .padding(.horizontal)
                    
                    // MARK: - Weights Demo
                    weightsSection
                    
                    Divider()
                        .padding(.horizontal)
                    
                    // MARK: - Styles Demo
                    stylesSection
                    
                    Divider()
                        .padding(.horizontal)
                    
                    // MARK: - Real World Example
                    realWorldSection
                    
                }
                .padding(.vertical)
            }
            .navigationTitle("AccessibleFonts")
            #if os(iOS)
            .navigationBarTitleDisplayMode(.large)
            #endif
        }
    }
    
    // MARK: - Hero Section
    
    private var heroSection: some View {
        VStack(spacing: 16) {
            Text("Accessibility-First Typography")
                .font(.accessible(.lexend, size: 28, weight: .bold))
                .multilineTextAlignment(.center)
            
            Text("Beautiful fonts designed for everyone")
                .font(.accessible(.atkinsonHyperlegible, size: 17))
                .foregroundStyle(.secondary)
        }
        .padding(.horizontal)
    }
    
    // MARK: - Font Families Section
    
    private var fontFamiliesSection: some View {
        VStack(alignment: .leading, spacing: 20) {
            sectionHeader("Font Families")
            
            VStack(alignment: .leading, spacing: 16) {
                FontFamilyRow(
                    name: "OpenDyslexic",
                    description: "Designed for dyslexia",
                    font: .accessible(.openDyslexic, size: 20)
                )
                
                FontFamilyRow(
                    name: "Atkinson Hyperlegible",
                    description: "Optimized for low vision",
                    font: .accessible(.atkinsonHyperlegible, size: 20)
                )
                
                FontFamilyRow(
                    name: "Lexend",
                    description: "Improves reading fluency",
                    font: .accessible(.lexend, size: 20)
                )
                
                FontFamilyRow(
                    name: "Inter",
                    description: "Perfect for UI design",
                    font: .accessible(.inter, size: 20)
                )
                
                FontFamilyRow(
                    name: "Open Sans",
                    description: "Clean & friendly",
                    font: .accessible(.openSans, size: 20)
                )
                
                FontFamilyRow(
                    name: "Inconsolata",
                    description: "Monospace for code",
                    font: .accessible(.inconsolata, size: 20)
                )
            }
        }
        .padding(.horizontal)
    }
    
    // MARK: - Weights Section
    
    private var weightsSection: some View {
        VStack(alignment: .leading, spacing: 20) {
            sectionHeader("Font Weights")
            
            VStack(alignment: .leading, spacing: 8) {
                Text("Thin")
                    .font(.accessible(.inter, size: 17, weight: .thin))
                Text("Light")
                    .font(.accessible(.inter, size: 17, weight: .light))
                Text("Regular")
                    .font(.accessible(.inter, size: 17, weight: .regular))
                Text("Medium")
                    .font(.accessible(.inter, size: 17, weight: .medium))
                Text("Semibold")
                    .font(.accessible(.inter, size: 17, weight: .semibold))
                Text("Bold")
                    .font(.accessible(.inter, size: 17, weight: .bold))
                Text("Black")
                    .font(.accessible(.inter, size: 17, weight: .black))
            }
        }
        .padding(.horizontal)
    }
    
    // MARK: - Styles Section
    
    private var stylesSection: some View {
        VStack(alignment: .leading, spacing: 20) {
            sectionHeader("Font Styles")
            
            HStack(spacing: 32) {
                VStack(alignment: .leading, spacing: 8) {
                    Text("Regular")
                        .font(.accessible(.inter, size: 17))
                    Text("Regular")
                        .font(.accessible(.atkinsonHyperlegible, size: 17))
                }
                
                VStack(alignment: .leading, spacing: 8) {
                    Text("Italic")
                        .font(.accessibleItalic(.inter, size: 17))
                    Text("Italic")
                        .font(.accessibleItalic(.atkinsonHyperlegible, size: 17))
                }
            }
        }
        .padding(.horizontal)
    }
    
    // MARK: - Real World Section
    
    private var realWorldSection: some View {
        VStack(alignment: .leading, spacing: 20) {
            sectionHeader("Real World Example")
            
            VStack(alignment: .leading, spacing: 12) {
                Text("Article Title")
                    .font(.accessible(.lexend, size: 24, weight: .bold))
                
                Text("By Jane Smith • 5 min read")
                    .font(.accessible(.inter, size: 13, weight: .medium))
                    .foregroundStyle(.secondary)
                
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.")
                    .font(.accessible(.atkinsonHyperlegible, size: 16))
                    .lineSpacing(4)
                
                Text("func hello() {\n    print(\"Hello, World!\")\n}")
                    .font(.accessible(.inconsolata, size: 14))
                    .padding(12)
                    .background(Color(.secondarySystemBackground))
                    .cornerRadius(8)
            }
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(12)
            .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
        }
        .padding(.horizontal)
    }
    
    // MARK: - Helpers
    
    private func sectionHeader(_ title: String) -> some View {
        Text(title)
            .font(.accessible(.lexend, size: 13, weight: .semibold))
            .foregroundStyle(.secondary)
            .textCase(.uppercase)
            .tracking(1)
    }
}

// MARK: - Font Family Row

struct FontFamilyRow: View {
    let name: String
    let description: String
    let font: Font
    
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text(name)
                    .font(font)
                Text(description)
                    .font(.accessible(.inter, size: 13))
                    .foregroundStyle(.secondary)
            }
            Spacer()
        }
    }
}

// MARK: - Preview

#Preview {
    ContentView()
}