Merge pull request #17 from shapehq/feature/custom-views

Adds support for inlining and presenting custom views

Author: simonbs

Examples/SwiftUIExample/AppSpiceStore.swift

@@ -1,5 +1,6 @@
 import Foundation
 import Spices
+import SwiftUI
 
 enum ServiceEnvironment: String, CaseIterable {
     case production
@@ -13,6 +14,14 @@ final class AppSpiceStore: SpiceStore {
     @Spice(presentation: .inline) var debugging = DebuggingSpiceStore()
 
     @Spice var featureFlags = FeatureFlagsSpiceStore()
+    @Spice(presentation: .push) var helloWorld = VStack {
+        Image(systemName: "globe")
+            .imageScale(.large)
+            .foregroundStyle(.tint)
+        Text("Hello, world!")
+    }
+    .padding()
+    @Spice var version = LabeledContent("Version", value: "1.0 (1)")
 }
 
 final class DebuggingSpiceStore: SpiceStore {

Examples/UIKitExample/AppSpiceStore.swift

@@ -1,5 +1,6 @@
 import Foundation
 import Spices
+import SwiftUI
 
 enum ServiceEnvironment: String, CaseIterable {
     case production
@@ -16,6 +17,14 @@ final class AppSpiceStore: SpiceStore {
     @Spice(presentation: .inline) var debugging = DebuggingSpiceStore()
 
     @Spice var featureFlags = FeatureFlagsSpiceStore()
+    @Spice(presentation: .push) var helloWorld = VStack {
+        Image(systemName: "globe")
+            .imageScale(.large)
+            .foregroundStyle(.tint)
+        Text("Hello, world!")
+    }
+    .padding()
+    @Spice var version = LabeledContent("Version", value: "1.0 (1)")
 
     private init() {}
 }

README.md

@@ -28,6 +28,7 @@
   - [Buttons](#buttons)
   - [Text Fields](#text-fields)
   - [Group Settings Using Nested Spice Stores](#group-settings-using-nested-spice-stores)
+  - [Inject Your Own Views](#inject-your-own-views)
   - [Require Restart](#require-restart)
   - [Display Custom Name](#display-custom-name)
   - [Specify Editor Title](#specify-editor-title)
@@ -349,6 +350,53 @@ When inlining a nested spice store, a header and footer can be provided for bett
 var featureFlags = FeatureFlagsSpiceStore()
 ```
 
+### Inject Your Own Views
+
+You can embed your own views into Spices, for example, to display static information.
+
+The `@Spice` property wrapper allows you to define custom views within Spices settings. These views can be inlined by default or presented using different styles.
+
+By default, views are inlined within the settings list:
+
+```swift
+@Spice var version = LabeledContent("Version", value: "1.0 (1)")
+```
+
+You can change the presentation style using the presentation argument.
+
+The `.push` presentation pushes the view onto the navigation stack.
+
+```swift
+@Spice(presentation: .push) var helloWorld = VStack {
+    Image(systemName: "globe")
+        .imageScale(.large)
+        .foregroundStyle(.tint)
+    Text("Hello, world!")
+}
+.padding()
+```
+
+The `.modal` presentation presents the view modally on top of Spices.
+
+```swift
+@Spice(presentation: .modal) var helloWorld = // ...
+```
+
+### Nest Spice Stores
+
+Spice stores can be nested to create a hierarchical user interface.
+
+```swift
+class AppSpiceStore: SpiceStore {
+    @Spice var featureFlags = FeatureFlagsSpiceStore()
+}
+
+class FeatureFlagsSpiceStore: SpiceStore {
+    @Spice var notifications = false
+    @Spice var fastRefreshWidgets = false
+}
+```
+
 ### Require Restart
 
 Setting `requiresRestart` to true will cause the app to be shut down after changing the value. Use this only when necessary, as users do not expect a restart.

Sources/Spices/Internal/MenuItems/ViewMenuItem.swift

@@ -0,0 +1,21 @@
+import Foundation
+import SwiftUI
+
+final class ViewMenuItem: MenuItem {
+    enum PresentationStyle {
+        case modal
+        case push
+        case inline
+    }
+
+    let id = UUID().uuidString
+    let name: Name
+    let presentationStyle: PresentationStyle
+    let content: AnyView
+
+    init(name: Name, presentationStyle: PresentationStyle, content: AnyView) {
+        self.name = name
+        self.presentationStyle = presentationStyle
+        self.content = content
+    }
+}

Sources/Spices/Internal/Views/MenuItemView.swift

@@ -17,6 +17,8 @@ struct MenuItemView: View {
             AsyncButtonMenuItemView(menuItem: menuItem)
         } else if let menuItem = menuItem as? ChildSpiceStoreMenuItem {
             ChildSpiceStoreMenuItemView(menuItem: menuItem, dismiss: dismiss)
+        } else if let menuItem = menuItem as? ViewMenuItem {
+            ViewMenuItemView(menuItem: menuItem)
         } else {
             fatalError("Unknown menu item of type \(type(of: menuItem))")
         }

Sources/Spices/Internal/Views/ViewMenuItemView.swift

@@ -0,0 +1,40 @@
+import SwiftUI
+
+struct ViewMenuItemView: View {
+    let menuItem: ViewMenuItem
+
+    var body: some View {
+        switch menuItem.presentationStyle {
+        case .modal:
+            ModalPresentationView(menuItem.name.rawValue, content: menuItem.content)
+        case .push:
+            NavigationLink(menuItem.name.rawValue, destination: menuItem.content)
+        case .inline:
+            menuItem.content
+        }
+    }
+}
+
+private extension ViewMenuItemView {
+    struct ModalPresentationView<Content: View>: View {
+        private let title: String
+        private let content: Content
+        @State private var isModalPresented = false
+
+        init(_ title: String, content: Content) {
+            self.title = title
+            self.content = content
+        }
+
+        var body: some View {
+            Button {
+                isModalPresented = true
+            } label: {
+                Text(title)
+            }
+            .sheet(isPresented: $isModalPresented) {
+                content
+            }
+        }
+    }
+}

Sources/Spices/PresentationStyle.swift

@@ -1,4 +1,4 @@
-// A type that represents different styles for presenting a view within Spices settings.
+/// A type that represents different styles for presenting a view within the in-app debug menu.
 public protocol PresentationStyle {}
 
 /// A presentation style that displays the view modally on top of the Spices settings.
@@ -25,6 +25,17 @@ public extension PresentationStyle {
     ///
     /// ```swift
     /// @Spice(presentation: .modal) var featureFlags = FeatureFlagsSpiceStore()
+    ///
+    /// The presentation style can also be used to present a view modally.
+    ///
+    /// ```swift
+    /// @Spice(presentation: .modal) var helloWorld = VStack {
+    ///     Image(systemName: "globe")
+    ///         .imageScale(.large)
+    ///         .foregroundStyle(.tint)
+    ///     Text("Hello, world!")
+    /// }
+    /// .padding()
     /// ```
     static var modal: ModalPresentationStyle {
         ModalPresentationStyle()
@@ -38,6 +49,17 @@ public extension PresentationStyle {
     ///
     /// ```swift
     /// @Spice(presentation: .push) var featureFlags = FeatureFlagsSpiceStore()
+    /// 
+    /// The presentation style can also be used to push a view onto the navigation stack.
+    /// 
+    /// ```swift
+    /// @Spice(presentation: .push) var helloWorld = VStack {
+    ///     Image(systemName: "globe")
+    ///         .imageScale(.large)
+    ///         .foregroundStyle(.tint)
+    ///     Text("Hello, world!")
+    /// }
+    /// .padding()
     /// ```
     static var push: PushPresentationStyle {
         PushPresentationStyle()
@@ -51,6 +73,11 @@ public extension PresentationStyle {
     ///
     /// ```swift
     /// @Spice(presentation: .inline) var featureFlags = FeatureFlagsSpiceStore()
+    ///
+    /// The presentation style can also be used to inline a view.
+    ///
+    /// ```swift
+    /// @Spice var version = LabeledContent("Version", value: "1.0 (1)")
     /// ```
     static var inline: InlinePresentationStyle {
         InlinePresentationStyle()