Update README with complete feature documentation

This commit is contained in:
Matt Bruce 2026-01-02 11:59:29 -06:00
parent fa7d848f52
commit 7afa45698f

168
README.md
View File

@ -6,15 +6,27 @@ A foundational design system and UI component library for building consistent, b
Bedrock is designed to be the foundation upon which apps are built, providing: Bedrock is designed to be the foundation upon which apps are built, providing:
- **Design System**: Consistent spacing, typography, and animations - **Design System**: Consistent spacing, typography, colors, and animations
- **Color Protocols**: Define consistent color naming with custom palettes per app - **Color Protocols**: Define consistent color naming with custom palettes per app
- **Settings Components**: Ready-to-use toggle, picker, and selector views - **Settings Components**: Ready-to-use toggle, picker, and selector views
- **Utilities**: Common helpers for device detection, debugging, and more - **Sound & Haptics**: Generic sound and haptic feedback management
- **Onboarding**: Track user onboarding progress and contextual hints
- **Cloud Sync**: Generic iCloud and local data synchronization
- **Visual Effects**: Confetti, pulsing animations, debug borders
- **Utilities**: Device detection, debugging helpers, and more
## Installation ## Installation
Add Bedrock as a dependency in your `Package.swift`: Add Bedrock as a dependency in your `Package.swift`:
```swift
dependencies: [
.package(url: "https://github.com/yourname/Bedrock.git", from: "1.0.0")
]
```
Or for local development:
```swift ```swift
dependencies: [ dependencies: [
.package(path: "../Bedrock") .package(path: "../Bedrock")
@ -77,41 +89,120 @@ VStack { }
Apps can define custom color palettes by conforming to the color protocols: Apps can define custom color palettes by conforming to the color protocols:
```swift ```swift
// In CasinoKit - define casino-themed accent colors // Define custom accent colors
public enum CasinoAccentColors: AccentColorProvider { public enum MyAppAccentColors: AccentColorProvider {
public static let primary = Color(red: 0.9, green: 0.75, blue: 0.3) // Gold public static let primary = Color(red: 0.9, green: 0.75, blue: 0.3)
public static let light = Color(red: 1.0, green: 0.85, blue: 0.4) public static let light = Color(red: 1.0, green: 0.85, blue: 0.4)
public static let dark = Color(red: 0.7, green: 0.55, blue: 0.2) public static let dark = Color(red: 0.7, green: 0.55, blue: 0.2)
public static let secondary = Color(red: 0.2, green: 0.7, blue: 0.7) // Teal public static let secondary = Color(red: 0.2, green: 0.7, blue: 0.7)
} }
// Create a complete theme // Create a complete theme
public enum CasinoTheme: AppColorTheme { public enum MyAppTheme: AppColorTheme {
public typealias Surface = CasinoSurfaceColors public typealias Surface = DefaultSurfaceColors // Reuse Bedrock defaults
public typealias Text = DefaultTextColors // Reuse Bedrock defaults public typealias Text = DefaultTextColors
public typealias Accent = CasinoAccentColors // Custom gold accents public typealias Accent = MyAppAccentColors // Custom accents
public typealias Button = CasinoButtonColors public typealias Button = DefaultButtonColors
public typealias Status = DefaultStatusColors // Reuse Bedrock defaults public typealias Status = DefaultStatusColors
public typealias Border = DefaultBorderColors public typealias Border = DefaultBorderColors
public typealias Interactive = DefaultInteractiveColors public typealias Interactive = DefaultInteractiveColors
} }
// Use in views // Use in views
Button("Deal") { } Button("Action") { }
.background(CasinoTheme.Accent.primary) .background(MyAppTheme.Accent.primary)
``` ```
#### Available Color Protocols ### Sound & Haptic Feedback
| Protocol | Properties | Bedrock provides a generic sound manager that works with any app-defined sounds:
|----------|------------|
| `SurfaceColorProvider` | primary, secondary, tertiary, overlay, card, groupedFill, sectionFill | ```swift
| `TextColorProvider` | primary, secondary, tertiary, disabled, placeholder, inverse | // Define your app's sounds
| `AccentColorProvider` | primary, light, dark, secondary | enum MySound: String, AppSound {
| `ButtonColorProvider` | primaryLight, primaryDark, secondary, destructive, cancelText | case tap, success, error
| `StatusColorProvider` | success, warning, error, info |
| `BorderColorProvider` | subtle, standard, emphasized, selected | var resourceName: String { rawValue }
| `InteractiveColorProvider` | selected, hover, pressed, focus | var resourceExtension: String { "mp3" }
var bundle: Bundle { .main }
var fallbackSystemSoundID: UInt32? { nil }
}
// Play sounds and haptics
let soundManager = SoundManager.shared
soundManager.play(MySound.success)
soundManager.playHaptic(.success)
```
### Onboarding State
Track user onboarding and progressive feature discovery:
```swift
let onboarding = OnboardingState(appIdentifier: "myApp")
// Register all hint keys for skip functionality
onboarding.registerHintKeys("welcome", "feature1", "feature2")
// Check and show hints
if onboarding.shouldShowHint("welcome") {
// Show welcome hint
onboarding.markHintShown("welcome")
}
// Skip or complete onboarding
onboarding.completeWelcome() // Mark as completed
onboarding.skipOnboarding() // Skip all hints
```
### Cloud Sync
Synchronize data between iCloud and local storage:
```swift
// Define your persistable data
struct MyAppData: PersistableData {
static var dataIdentifier = "myApp"
static var empty = MyAppData()
var syncPriority: Int { totalActions }
var lastModified: Date = .now
var totalActions: Int = 0
}
// Use the cloud sync manager
let syncManager = CloudSyncManager<MyAppData>()
await syncManager.save(myData)
let loaded = await syncManager.load()
```
### Visual Effects
#### Confetti
```swift
ZStack {
MainContentView()
if showCelebration {
ConfettiView(colors: [.red, .blue, .green, .yellow])
}
}
```
#### Pulsing Animation
```swift
Button("Tap Here") { }
.pulsing(isActive: shouldHighlight, color: .white)
```
#### Debug Borders
```swift
MyComplexView()
.debugBorder(showDebug, color: .red, label: "Header")
```
### Settings Components ### Settings Components
@ -155,6 +246,9 @@ if DeviceInfo.isPad {
} else { } else {
TabBarView() TabBarView()
} }
let bounds = DeviceInfo.screenBounds
let isLandscape = DeviceInfo.isLandscape
``` ```
## Design System Reference ## Design System Reference
@ -186,22 +280,24 @@ if DeviceInfo.isPad {
| `heavy` | 0.8 | Heavy overlays | | `heavy` | 0.8 | Heavy overlays |
| `almostFull` | 0.9 | Nearly opaque | | `almostFull` | 0.9 | Nearly opaque |
### Default Colors ### Color Protocols
Default colors use a neutral blue accent. Apps should define custom themes for branding: | Protocol | Properties |
|----------|------------|
| Category | Purpose | | `SurfaceColorProvider` | primary, secondary, tertiary, overlay, card, groupedFill, sectionFill |
|----------|---------| | `TextColorProvider` | primary, secondary, tertiary, disabled, placeholder, inverse |
| `Color.Surface.*` | Background colors | | `AccentColorProvider` | primary, light, dark, secondary |
| `Color.Text.*` | Text colors | | `ButtonColorProvider` | primaryLight, primaryDark, secondary, destructive, cancelText |
| `Color.Accent.*` | Accent/highlight colors (default: blue) | | `StatusColorProvider` | success, warning, error, info |
| `Color.Button.*` | Button colors | | `BorderColorProvider` | subtle, standard, emphasized, selected |
| `Color.Status.*` | Success/warning/error colors | | `InteractiveColorProvider` | selected, hover, pressed, focus |
| `Color.Border.*` | Border and divider colors |
| `Color.Interactive.*` | Interactive state colors |
## Requirements ## Requirements
- iOS 18.0+ - iOS 18.0+
- macOS 15.0+ - macOS 15.0+
- Swift 6.0+ - Swift 6.0+
## License
MIT License