swiftui-component

SwiftUI Component Creator

Instructions

Step 1: Clarify Requirements

Ask if not already provided:

• What does the view display? (list, detail, form, modal, etc.)
• What user interactions does it support? (tap, swipe, input, navigation)
• What data does it need? (local state, fetched from API, passed in)
• Any navigation behavior? (NavigationLink, sheet, fullScreenCover)
• Min iOS version? (affects @Observable vs ObservableObject)

Step 2: Choose the State Pattern

iOS Target	Pattern
iOS 17+	@Observable macro on ViewModel, @State private var viewModel in View
iOS 16 and below	ObservableObject + @Published, @StateObject in View

Step 3: Generate the Files

Always generate two files: one View, one ViewModel.

View template (iOS 17+ / @Observable):

// Features/[Name]/[Name]View.swift
import SwiftUI

struct [Name]View: View {
    @State private var viewModel: [Name]ViewModel

    init(viewModel: [Name]ViewModel = [Name]ViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        content
            .task { await viewModel.onAppear() }
            .alert("Error", isPresented: .constant(viewModel.error != nil)) {
                Button("OK") { viewModel.dismissError() }
            } message: {
                Text(viewModel.error?.localizedDescription ?? "")
            }
    }

    @ViewBuilder
    private var content: some View {
        if viewModel.isLoading {
            ProgressView()
        } else {
            mainContent
        }
    }

    private var mainContent: some View {
        // Primary UI here
        Text(viewModel.title)
            .accessibilityLabel(viewModel.title)
    }
}

#Preview {
    [Name]View(viewModel: [Name]ViewModel())
}

View template (iOS 16 / ObservableObject):

// Features/[Name]/[Name]View.swift
import SwiftUI

struct [Name]View: View {
    @StateObject private var viewModel: [Name]ViewModel

    init(viewModel: [Name]ViewModel = [Name]ViewModel()) {
        _viewModel = StateObject(wrappedValue: viewModel)
    }

    var body: some View {
        // same structure as above
    }
}