1# SwiftUI Component Library
2 
3## Lists and Collections
4 
5### Basic List
6 
7```swift
8struct ItemListView: View {
9    @State private var items: [Item] = []
10 
11    var body: some View {
12        List {
13            ForEach(items) { item in
14                ItemRow(item: item)
15            }
16            .onDelete(perform: deleteItems)
17            .onMove(perform: moveItems)
18        }
19        .listStyle(.insetGrouped)
20        .refreshable {
21            await loadItems()
22        }
23    }
24 
25    private func deleteItems(at offsets: IndexSet) {
26        items.remove(atOffsets: offsets)
27    }
28 
29    private func moveItems(from source: IndexSet, to destination: Int) {
30        items.move(fromOffsets: source, toOffset: destination)
31    }
32}
33```
34 
35### Sectioned List
36 
37```swift
38struct SectionedListView: View {
39    let groupedItems: [String: [Item]]
40 
41    var body: some View {
42        List {
43            ForEach(groupedItems.keys.sorted(), id: \.self) { key in
44                Section(header: Text(key)) {
45                    ForEach(groupedItems[key] ?? []) { item in
46                        ItemRow(item: item)
47                    }
48                }
49            }
50        }
51        .listStyle(.sidebar)
52    }
53}
54```
55 
56### Search Integration
57 
58```swift
59struct SearchableListView: View {
60    @State private var searchText = ""
61    @State private var items: [Item] = []
62 
63    var filteredItems: [Item] {
64        if searchText.isEmpty {
65            return items
66        }
67        return items.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
68    }
69 
70    var body: some View {
71        NavigationStack {
72            List(filteredItems) { item in
73                ItemRow(item: item)
74            }
75            .searchable(text: $searchText, prompt: "Search items")
76            .searchSuggestions {
77                ForEach(searchSuggestions, id: \.self) { suggestion in
78                    Text(suggestion)
79                        .searchCompletion(suggestion)
80                }
81            }
82            .navigationTitle("Items")
83        }
84    }
85}
86```
87 
88## Forms and Input
89 
90### Settings Form
91 
92```swift
93struct SettingsView: View {
94    @AppStorage("notifications") private var notificationsEnabled = true
95    @AppStorage("soundEnabled") private var soundEnabled = true
96    @State private var selectedTheme = Theme.system
97    @State private var username = ""
98 
99    var body: some View {
100        Form {
101            Section("Account") {
102                TextField("Username", text: $username)
103                    .textContentType(.username)
104                    .autocorrectionDisabled()
105            }
106 
107            Section("Preferences") {
108                Toggle("Enable Notifications", isOn: $notificationsEnabled)
109                Toggle("Sound Effects", isOn: $soundEnabled)
110 
111                Picker("Theme", selection: $selectedTheme) {
112                    ForEach(Theme.allCases) { theme in
113                        Text(theme.rawValue).tag(theme)
114                    }
115                }
116            }
117 
118            Section("About") {
119                LabeledContent("Version", value: "1.0.0")
120 
121                Link(destination: URL(string: "https://example.com/privacy")!) {
122                    Text("Privacy Policy")
123                }
124            }
125        }
126        .navigationTitle("Settings")
127    }
128}
129```
130 
131### Custom Input Fields
132 
133```swift
134struct ValidatedTextField: View {
135    let title: String
136    @Binding var text: String
137    let validation: (String) -> Bool
138 
139    @State private var isValid = true
140    @FocusState private var isFocused: Bool
141 
142    var body: some View {
143        VStack(alignment: .leading, spacing: 4) {
144            Text(title)
145                .font(.caption)
146                .foregroundStyle(.secondary)
147 
148            TextField(title, text: $text)
149                .textFieldStyle(.roundedBorder)
150                .focused($isFocused)
151                .overlay(
152                    RoundedRectangle(cornerRadius: 8)
153                        .stroke(borderColor, lineWidth: 1)
154                )
155                .onChange(of: text) { _, newValue in
156                    isValid = validation(newValue)
157                }
158 
159            if !isValid && !text.isEmpty {
160                Text("Invalid input")
161                    .font(.caption)
162                    .foregroundStyle(.red)
163            }
164        }
165    }
166 
167    private var borderColor: Color {
168        if isFocused {
169            return isValid ? .blue : .red
170        }
171        return .clear
172    }
173}
174```
175 
176## Buttons and Actions
177 
178### Button Styles
179 
180```swift
181// Primary filled button
182Button("Continue") {
183    // action
184}
185.buttonStyle(.borderedProminent)
186.controlSize(.large)
187 
188// Secondary button
189Button("Cancel") {
190    // action
191}
192.buttonStyle(.bordered)
193 
194// Destructive button
195Button("Delete", role: .destructive) {
196    // action
197}
198.buttonStyle(.bordered)
199 
200// Custom button style
201struct ScaleButtonStyle: ButtonStyle {
202    func makeBody(configuration: Configuration) -> some View {
203        configuration.label
204            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
205            .animation(.easeInOut(duration: 0.1), value: configuration.isPressed)
206    }
207}
208```
209 
210### Menu and Context Menu
211 
212```swift
213// Menu button
214Menu {
215    Button("Edit", systemImage: "pencil") { }
216    Button("Duplicate", systemImage: "doc.on.doc") { }
217    Divider()
218    Button("Delete", systemImage: "trash", role: .destructive) { }
219} label: {
220    Image(systemName: "ellipsis.circle")
221}
222 
223// Context menu on any view
224Text("Long press me")
225    .contextMenu {
226        Button("Copy", systemImage: "doc.on.doc") { }
227        Button("Share", systemImage: "square.and.arrow.up") { }
228    } preview: {
229        ItemPreviewView()
230    }
231```
232 
233## Sheets and Modals
234 
235### Sheet Presentation
236 
237```swift
238struct ParentView: View {
239    @State private var showSettings = false
240    @State private var selectedItem: Item?
241 
242    var body: some View {
243        VStack {
244            Button("Settings") {
245                showSettings = true
246            }
247        }
248        .sheet(isPresented: $showSettings) {
249            SettingsSheet()
250                .presentationDetents([.medium, .large])
251                .presentationDragIndicator(.visible)
252        }
253        .sheet(item: $selectedItem) { item in
254            ItemDetailSheet(item: item)
255                .presentationDetents([.height(300), .large])
256                .presentationCornerRadius(24)
257        }
258    }
259}
260 
261struct SettingsSheet: View {
262    @Environment(\.dismiss) private var dismiss
263 
264    var body: some View {
265        NavigationStack {
266            SettingsContent()
267                .toolbar {
268                    ToolbarItem(placement: .confirmationAction) {
269                        Button("Done") {
270                            dismiss()
271                        }
272                    }
273                }
274        }
275    }
276}
277```
278 
279### Confirmation Dialog
280 
281```swift
282struct DeleteConfirmationView: View {
283    @State private var showConfirmation = false
284 
285    var body: some View {
286        Button("Delete Account", role: .destructive) {
287            showConfirmation = true
288        }
289        .confirmationDialog(
290            "Delete Account",
291            isPresented: $showConfirmation,
292            titleVisibility: .visible
293        ) {
294            Button("Delete", role: .destructive) {
295                deleteAccount()
296            }
297            Button("Cancel", role: .cancel) { }
298        } message: {
299            Text("This action cannot be undone.")
300        }
301    }
302}
303```
304 
305## Loading and Progress
306 
307### Progress Indicators
308 
309```swift
310// Indeterminate spinner
311ProgressView()
312    .progressViewStyle(.circular)
313 
314// Determinate progress
315ProgressView(value: downloadProgress, total: 1.0) {
316    Text("Downloading...")
317} currentValueLabel: {
318    Text("\(Int(downloadProgress * 100))%")
319}
320 
321// Custom loading view
322struct LoadingOverlay: View {
323    let message: String
324 
325    var body: some View {
326        ZStack {
327            Color.black.opacity(0.4)
328                .ignoresSafeArea()
329 
330            VStack(spacing: 16) {
331                ProgressView()
332                    .scaleEffect(1.5)
333                    .tint(.white)
334 
335                Text(message)
336                    .font(.subheadline)
337                    .foregroundStyle(.white)
338            }
339            .padding(24)
340            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
341        }
342    }
343}
344```
345 
346### Skeleton Loading
347 
348```swift
349struct SkeletonRow: View {
350    @State private var isAnimating = false
351 
352    var body: some View {
353        HStack(spacing: 12) {
354            Circle()
355                .fill(.gray.opacity(0.3))
356                .frame(width: 44, height: 44)
357 
358            VStack(alignment: .leading, spacing: 8) {
359                RoundedRectangle(cornerRadius: 4)
360                    .fill(.gray.opacity(0.3))
361                    .frame(height: 14)
362                    .frame(maxWidth: 200)
363 
364                RoundedRectangle(cornerRadius: 4)
365                    .fill(.gray.opacity(0.2))
366                    .frame(height: 12)
367                    .frame(maxWidth: 150)
368            }
369        }
370        .opacity(isAnimating ? 0.5 : 1.0)
371        .animation(.easeInOut(duration: 0.8).repeatForever(), value: isAnimating)
372        .onAppear { isAnimating = true }
373    }
374}
375```
376 
377## Async Content Loading
378 
379### AsyncImage
380 
381```swift
382AsyncImage(url: imageURL) { phase in
383    switch phase {
384    case .empty:
385        ProgressView()
386    case .success(let image):
387        image
388            .resizable()
389            .aspectRatio(contentMode: .fill)
390    case .failure:
391        Image(systemName: "photo")
392            .foregroundStyle(.secondary)
393    @unknown default:
394        EmptyView()
395    }
396}
397.frame(width: 100, height: 100)
398.clipShape(RoundedRectangle(cornerRadius: 8))
399```
400 
401### Task-Based Loading
402 
403```swift
404struct AsyncContentView: View {
405    @State private var items: [Item] = []
406    @State private var isLoading = true
407    @State private var error: Error?
408 
409    var body: some View {
410        Group {
411            if isLoading {
412                ProgressView("Loading...")
413            } else if let error {
414                ContentUnavailableView(
415                    "Failed to Load",
416                    systemImage: "exclamationmark.triangle",
417                    description: Text(error.localizedDescription)
418                )
419            } else if items.isEmpty {
420                ContentUnavailableView(
421                    "No Items",
422                    systemImage: "tray",
423                    description: Text("Add your first item to get started.")
424                )
425            } else {
426                List(items) { item in
427                    ItemRow(item: item)
428                }
429            }
430        }
431        .task {
432            await loadItems()
433        }
434    }
435 
436    private func loadItems() async {
437        do {
438            items = try await api.fetchItems()
439            isLoading = false
440        } catch {
441            self.error = error
442            isLoading = false
443        }
444    }
445}
446```
447 
448## Animations
449 
450### Implicit Animations
451 
452```swift
453struct AnimatedCard: View {
454    @State private var isExpanded = false
455 
456    var body: some View {
457        VStack {
458            Text("Tap to expand")
459 
460            if isExpanded {
461                Text("Additional content here")
462                    .transition(.move(edge: .top).combined(with: .opacity))
463            }
464        }
465        .padding()
466        .frame(maxWidth: .infinity)
467        .background(.blue.opacity(0.1), in: RoundedRectangle(cornerRadius: 12))
468        .onTapGesture {
469            withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
470                isExpanded.toggle()
471            }
472        }
473    }
474}
475```
476 
477### Custom Transitions
478 
479```swift
480extension AnyTransition {
481    static var slideAndFade: AnyTransition {
482        .asymmetric(
483            insertion: .move(edge: .trailing).combined(with: .opacity),
484            removal: .move(edge: .leading).combined(with: .opacity)
485        )
486    }
487 
488    static var scaleAndFade: AnyTransition {
489        .scale(scale: 0.8).combined(with: .opacity)
490    }
491}
492```
493 
494### Phase Animator (iOS 17+)
495 
496```swift
497struct PulsingButton: View {
498    var body: some View {
499        Button("Tap Me") { }
500            .buttonStyle(.borderedProminent)
501            .phaseAnimator([false, true]) { content, phase in
502                content
503                    .scaleEffect(phase ? 1.05 : 1.0)
504            } animation: { _ in
505                .easeInOut(duration: 0.5)
506            }
507    }
508}
509```
510 
511## Gestures
512 
513### Drag Gesture
514 
515```swift
516struct DraggableCard: View {
517    @State private var offset = CGSize.zero
518    @State private var isDragging = false
519 
520    var body: some View {
521        RoundedRectangle(cornerRadius: 16)
522            .fill(.blue)
523            .frame(width: 200, height: 150)
524            .offset(offset)
525            .scaleEffect(isDragging ? 1.05 : 1.0)
526            .gesture(
527                DragGesture()
528                    .onChanged { value in
529                        offset = value.translation
530                        isDragging = true
531                    }
532                    .onEnded { _ in
533                        withAnimation(.spring()) {
534                            offset = .zero
535                            isDragging = false
536                        }
537                    }
538            )
539    }
540}
541```
542 
543### Simultaneous Gestures
544 
545```swift
546struct ZoomableImage: View {
547    @State private var scale: CGFloat = 1.0
548    @State private var lastScale: CGFloat = 1.0
549 
550    var body: some View {
551        Image("photo")
552            .resizable()
553            .aspectRatio(contentMode: .fit)
554            .scaleEffect(scale)
555            .gesture(
556                MagnificationGesture()
557                    .onChanged { value in
558                        scale = lastScale * value
559                    }
560                    .onEnded { _ in
561                        lastScale = scale
562                    }
563            )
564            .gesture(
565                TapGesture(count: 2)
566                    .onEnded {
567                        withAnimation {
568                            scale = 1.0
569                            lastScale = 1.0
570                        }
571                    }
572            )
573    }
574}
575```
576