Skip to content

Commit fbb2d76

Browse files
committed
Remove outdated onboarding flow examples from medium-story.md and streamline the content to focus on VDFlow's UI-agnostic navigation capabilities. Enhance clarity on navigation state management while maintaining the document's overall structure.
1 parent 92a6d5d commit fbb2d76

File tree

1 file changed

+1
-154
lines changed

1 file changed

+1
-154
lines changed

medium-story.md

Lines changed: 1 addition & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -143,104 +143,6 @@ This enables:
143143
- "Continue where you left off" functionality
144144
- Bookmarkable states within the app
145145

146-
## Practical Example: Onboarding Flow
147-
148-
Here's how the same navigation approach applies to an onboarding flow:
149-
150-
```swift
151-
OnboardingFlow
152-
┌─────────┼───────────┬─────────┐
153-
Welcome Permissions Profile Complete
154-
155-
┌──┴──┐
156-
Info Request
157-
```
158-
159-
**Traditional Approach:**
160-
```swift
161-
struct OnboardingCoordinator: View {
162-
@State private var currentStep = 0
163-
@State private var showingPermissionsRequest = false
164-
@State private var permissionsGranted = false
165-
@State private var userProfile: UserProfile?
166-
@State private var showingProfileCreation = false
167-
168-
var body: some View {
169-
if currentStep == 0 {
170-
WelcomeView(proceed: { currentStep = 1 })
171-
} else if currentStep == 1 {
172-
PermissionsInfoView(
173-
requestPermissions: { showingPermissionsRequest = true }
174-
)
175-
.sheet(isPresented: $showingPermissionsRequest) {
176-
RequestPermissionsView(granted: {
177-
permissionsGranted = true
178-
currentStep = 2
179-
})
180-
}
181-
} else if currentStep == 2 {
182-
if userProfile == nil {
183-
ProfileCreationView(profile: { profile in
184-
userProfile = profile
185-
currentStep = 3
186-
})
187-
} else {
188-
FinalOnboardingView(complete: { /* Complete onboarding */ })
189-
}
190-
}
191-
}
192-
}
193-
```
194-
195-
**With VDFlow:**
196-
```swift
197-
@Steps
198-
struct OnboardingFlow {
199-
var welcome
200-
var permissions: PermissionsStep = .info
201-
var profile: UserProfile?
202-
var complete
203-
}
204-
205-
@Steps
206-
struct PermissionsStep {
207-
var info
208-
var request
209-
}
210-
211-
struct OnboardingCoordinator: View {
212-
@StateStep var flow = OnboardingFlow.welcome
213-
214-
var body: some View {
215-
switch flow.selected {
216-
case .welcome:
217-
WelcomeView(proceed: { flow.selected = .permissions })
218-
219-
case .permissions:
220-
NavigationView {
221-
PermissionsInfoView()
222-
.navigationDestination(isPresented: $flow.permissions.isSelected(.request)) {
223-
RequestPermissionsView(granted: {
224-
flow.selected = .profile
225-
})
226-
}
227-
}
228-
229-
case .profile:
230-
ProfileCreationView(created: { profile in
231-
flow.profile.select(with: profile)
232-
flow.selected = .complete
233-
})
234-
235-
case .complete:
236-
FinalOnboardingView()
237-
}
238-
}
239-
}
240-
```
241-
242-
This structure makes it easier to navigate to any point in the flow for testing or to handle external events.
243-
244146
## Key Benefits
245147

246148
VDFlow offers several advantages:
@@ -290,58 +192,7 @@ This preservation of state is crucial for maintaining form data, scroll position
290192

291193
## Beyond Screen Navigation
292194

293-
While many navigation libraries focus specifically on screen presentation, VDFlow is fundamentally UI-agnostic. It manages navigation state only, not UI presentation directly, making it versatile for various scenarios:
294-
295-
```swift
296-
// Managing a complex form with multiple sections
297-
@Steps
298-
struct FormFlow {
299-
var personalInfo
300-
var address
301-
var payment
302-
var review
303-
}
304-
305-
// Visualized as:
306-
// FormFlow
307-
// ┌─────────┼───────┬──────┐
308-
// Personal Address Payment Review
309-
310-
// Controlling UI components within a single screen
311-
@Steps
312-
struct MapViewState {
313-
var standard
314-
var satellite
315-
var traffic
316-
var locationDetails: LocationInfo?
317-
}
318-
319-
// Visualized as:
320-
// MapViewState
321-
// ┌────────────┼────────┬────────────┐
322-
// Standard Satellite Traffic LocationDetails
323-
324-
// Managing design system components
325-
@Steps
326-
struct ExpandableCardState {
327-
var collapsed
328-
var expanded: ExpansionState = .basic
329-
}
330-
331-
@Steps
332-
struct ExpansionState {
333-
var basic
334-
var detailed
335-
}
336-
337-
// Visualized as:
338-
// ExpandableCardState
339-
// ┌────┴────┐
340-
// Collapsed Expanded
341-
//
342-
// ┌───┴────┐
343-
// Basic Detailed
344-
```
195+
While many navigation libraries focus specifically on screen presentation, VDFlow is fundamentally UI-agnostic. It manages navigation state only, not UI presentation directly, making it versatile for various scenarios
345196

346197
This separation of navigation state from UI presentation means VDFlow can be used for:
347198
- Full-screen navigation
@@ -374,7 +225,3 @@ VDFlow adds minimal overhead to an application:
374225
SwiftUI navigation doesn't have to be complex. By modeling navigation as a tree of states instead of scattered boolean flags, VDFlow provides a structured approach to what is often a challenging aspect of SwiftUI development.
375226

376227
The library focuses on simplifying navigation management while remaining lightweight and performant, making it suitable for both small projects and production applications with complex navigation requirements.
377-
378-
---
379-
380-
*What navigation challenges have you faced in SwiftUI? Have you tried tree-based navigation approaches? Share your experiences in the comments.*

0 commit comments

Comments
 (0)