Skip to content

Commit

Permalink
Add example images to articles + fix minor issues in the package
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeehut committed Oct 29, 2024
1 parent 213ae2c commit 0b980c9
Show file tree
Hide file tree
Showing 21 changed files with 43 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ struct ColorfulView: View {
}
```

TODO: add image of above view
![](ColorfulView)

When adjusting color brightness, use .luminance instead of .brightness from the HSB color system. Luminance better represents how humans perceive light and dark, which is why HandySwiftUI includes support for the HLC color space.

Expand All @@ -95,7 +95,7 @@ struct FormattedText: View {
}
```

TODO: add image of above view
![](FormattedText)

In the above example, the built-in `.htmlLike` styling that ships with HandySwiftUI is combined with custom tags. Note that `.htmlLike` simply returns this:

Expand Down Expand Up @@ -230,7 +230,7 @@ extension [String] {
}
```

TODO: add image of TranslateKit's menu bar
![](CommonTranslations)

This highlighting feature was originally developed for [TranslateKit]'s menu bar "Common Translations" feature, where it helps users quickly spot matching phrases in their translation history. The function breaks down the search text into tokens and highlights each matching prefix, making it perfect for:

Expand Down
25 changes: 12 additions & 13 deletions Sources/HandySwiftUI/HandySwiftUI.docc/Essentials/New Types.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ HandySwiftUI provides a collection of views and types that fill common gaps in S

### Platform-Specific Values

HandySwiftUI provides an elegant way to handle platform-specific values of any type:
HandySwiftUI provides an elegant way to handle platform-specific values:

```swift
struct AdaptiveView: View {
Expand All @@ -27,25 +27,24 @@ struct AdaptiveView: View {
Text("Welcome")
.padding(Platform.value(default: 20.0, phone: 12.0))

// Different fonts per platform
Text("Content")
.font(Platform.value(default: .headline, mac: .title3, phone: .subheadline))

// Different colors per platform
Circle()
.fill(Platform.value(default: .blue, mac: .indigo, pad: .purple, vision: .cyan))

// Even custom enum values
ContentLayout(style: Platform.value(default: .regular, phone: .compact, mac: .expanded))
}
}
}
```

TODO: add an image using "Last 30 Days" on Mac and iPhone with different font sizes
![](Last30Days)

> Image: Getting a similar look across platforms for a title in [FreemiumKit] via:
> ```swift
> .font(Platform.value(default: .title2, phone: .headline))
> ```
`Platform.value` works with any type - from simple numbers to colors, fonts, or your own custom types. Just provide a default and override specific platforms as needed. This can be enormously useful, especially given that it even has a specific case for iPad named `pad`, so you can even address phones and tablets separately.
This is by far my most-used HandySwiftUI helper saving me a ton of boilerplate `#if` checks. It's simple but so powerful!
### Readable Preview Detection
Expand Down Expand Up @@ -136,7 +135,7 @@ struct SettingsView: View {
}
```

TODO: add video for above view
![](SettingsView)

HandySwiftUI includes `Emoji` and `SFSymbol` enums that contain common emoji and symbols. You can also create custom enums by conforming to `SearchableOption` and providing `searchTerms` for each case to power the search functionality.

Expand Down Expand Up @@ -231,7 +230,7 @@ struct SecureFileLoader {
}
```

TODO: add photo from FreemiumKit with access dialog
![](OpenPanel)

The example taken right out of [FreemiumKit] demonstrates how `OpenPanel` simplifies handling security-scoped file access for dragged items on macOS while maintaining cross-platform compatibility.

Expand All @@ -242,7 +241,7 @@ An alternative to SwiftUI's `TabView` that implements sidebar-style navigation c

```swift
struct MainView: View {
enum Tab: String, Identifiable, CustomLabelConvertible {
enum Tab: String, CaseIterable, Identifiable, CustomLabelConvertible {
case documents, recents, settings

var id: Self { self }
Expand Down Expand Up @@ -278,7 +277,7 @@ struct MainView: View {
}
```

TODO: add screenshot from Mac
![](SideTabView)

`SideTabView` provides a vertical sidebar with icons and labels, optimized for larger screens with support for bottom-aligned tabs. The view automatically handles platform-specific styling and hover effects.

Expand Down
17 changes: 10 additions & 7 deletions Sources/HandySwiftUI/HandySwiftUI.docc/Essentials/Styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,17 @@ struct ButtonShowcase: View {
.buttonStyle(.secondary())

// Attention-grabbing pulsating button
Button("Updates", systemName: "bell.fill") {}
.buttonStyle(.pulsating(color: .blue, cornerRadius: 20, glowRadius: 8, duration: 2))
Button {} label: {
Label("Updates", systemImage: "bell.fill")
.padding(15)
}
.buttonStyle(.pulsating(color: .blue, cornerRadius: 20, glowRadius: 8, duration: 2))
}
}
}
```

TODO: add video showcasing above view
![](ButtonStyles)


### Horizontal, Vertical, Fixed Icon-Width Labels
Expand Down Expand Up @@ -97,11 +100,11 @@ struct APIConfigView: View {
}
```

TODO: add image from FreemiumKit
![](VerticalLabeledContent)

The `.vertical` style allows customizing alignment (defaults to `leading`) and spacing (defaults to 4). Pass `muteLabel: false` if you're providing a custom label style, as by default labels are automatically styled smaller and grayed out.

For example:
For example, in [FreemiumKit]'s feature localization form, I want the vertical label to have a larger font:

```swift
LabeledContent {
Expand All @@ -114,7 +117,7 @@ LabeledContent {
.labeledContentStyle(.vertical(muteLabel: false))
```

TODO: add image from FreemiumKit
![](MuteLabelFalse)


### Multi-Platform Toggle Style
Expand All @@ -138,7 +141,7 @@ struct ProductRow: View {
}
```

TODO: add image from FreemiumKit iOS
![](CheckboxUniversal)

The example is extracted from [FreemiumKit]'s products screen, which is optimized for macOS but also supports other platforms.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ struct AdaptiveText: View {
}
```

TODO: add example image from TranslateKit (API keys view when test unsuccessful)
![](YellowWithContrast)

> Image: This warning indicator in [TranslateKit] uses `.yellow` but ensures a good contrast even in light mode to be legible.
The `minContrast` parameter (ranging from 0 to 1) determines the minimum contrast ratio against either white (in dark mode) or black (in light mode) using the luminance value (perceived brightness). This ensures text stays readable regardless of the current color scheme.

Expand Down Expand Up @@ -106,7 +108,10 @@ Text("With HandySwiftUI")
.roundedRectangleBorder(.blue, cornerRadius: 12, lineWidth: 2)
```

TODO: add example from TranslateKit badges
![](StateBadges)

> Image: Badges in [TranslateKit] use this for rounded borders, for example.

### Conditional Modifiers

Expand Down Expand Up @@ -226,7 +231,9 @@ struct TodoView: View {
}
```

TODO: add example from CrossCraft when deleting a puzzle
![](ConfirmDelete)

> Image: Puzzle deletion in [CrossCraft] with a confirmation dialog to avoid accidental deletes.
The example shows how `.confirmDeleteDialog` handles the entire deletion flow – from confirmation to execution – with a single modifier. The dialog is automatically localized in ~40 languages and follows platform design guidelines. You can provide an optional `message` parameter in case you need to provide a different message. There's also an overload that takes a boolean for situations where no list is involved.

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion Sources/HandySwiftUI/Types/Models/Emoji.swift
Original file line number Diff line number Diff line change
Expand Up @@ -1889,7 +1889,7 @@ extension Emoji: SearchableOption {
/// """
public var view: some View {
Text(self.rawValue)
.font(.largeTitle)
.font(.title3)
}

#warning("🧑‍💻 localize the search terms to support more languages")
Expand Down
2 changes: 1 addition & 1 deletion Sources/HandySwiftUI/Types/Views/HPicker.swift
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ public struct HPicker<T: Hashable & Identifiable & CustomLabelConvertible, L: Vi
/// - locked: A set of options that should be displayed as locked (non-selectable).
/// - selection: A binding to the currently selected option.
/// - label: A closure that returns the label view for the picker.
public init(options: [T], locked: Set<T>, selection: Binding<T?>, label: @escaping () -> L) {
public init(options: [T], locked: Set<T> = [], selection: Binding<T?>, label: @escaping () -> L) {
self.options = options
self.locked = locked
self.selection = selection
Expand Down
10 changes: 6 additions & 4 deletions Sources/HandySwiftUI/Types/Views/SearchableGridPicker.swift
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ public struct SearchableGridPicker<Option: SearchableOption>: View {

@Binding var selection: Option?

@State var showPicker: Bool = Xcode.isRunningForPreviews
@State var showPicker: Bool = false
@State var searchText: String = ""

/// Filters the available options based on the entered search text.
Expand Down Expand Up @@ -77,7 +77,7 @@ public struct SearchableGridPicker<Option: SearchableOption>: View {
ZStack {
HStack {
Text(self.title)
.foregroundStyle(.secondary)
.foregroundStyle(Platform.value(default: .primary, mac: .secondary))

Spacer()

Expand All @@ -89,6 +89,8 @@ public struct SearchableGridPicker<Option: SearchableOption>: View {
}

Image(systemName: "chevron.right")
.font(.system(size: 13.5).weight(.semibold))
.opacity(0.55)
}
.foregroundStyle(.secondary)
}
Expand All @@ -112,9 +114,9 @@ public struct SearchableGridPicker<Option: SearchableOption>: View {
} label: {
ZStack {
option.view
.padding(Platform.value(default: 15, mac: 12))
.padding(Platform.value(default: 12, mac: 8))
#if os(visionOS)
.contentShape(.hoverEffect, .rect(cornerRadius: 15))
.contentShape(.hoverEffect, .rect(cornerRadius: 12))
.hoverEffect()
#endif

Expand Down

0 comments on commit 0b980c9

Please sign in to comment.