Split demo list into sections (#243)

* Split demo list into sections

* Remove slider demo

* Update RedactDemo.swift

* Redact → Redaction, move DOM refs to a TokamakDOM section, additional adjustments

* RedactDemo → RedactionDemo

Sources/TokamakDemo/RedactDemo.swift

@@ -18,7 +18,7 @@
 import TokamakShim
 
 @available(OSX 11.0, iOS 14.0, *)
-struct RedactDemo: View {
+struct RedactionDemo: View {
   func title(_ text: String) -> some View {
     Group {
       Text(text)

Sources/TokamakDemo/TokamakDemo.swift

@@ -29,9 +29,9 @@ func title<V>(_ view: V, title: String) -> AnyView where V: View {
   }
 }
 
-struct NavItem: Identifiable {
+struct NavItem: View {
-  var id: String
+  let id: String
-  var destination: AnyView?
+  let destination: AnyView?
 
   init<V>(_ id: String, destination: V) where V: View {
     self.id = id
@@ -40,124 +40,109 @@ struct NavItem: Identifiable {
 
   init(unavailable id: String) {
     self.id = id
+    destination = nil
+  }
+
+  @ViewBuilder var body: some View {
+    if let dest = destination {
+      NavigationLink(id, destination: HStack {
+        Spacer(minLength: 0)
+        dest
+        Spacer(minLength: 0)
+      })
+    } else {
+      #if os(WASI)
+      Text(id)
+      #elseif os(macOS)
+      Text(id).opacity(0.5)
+      #else
+      HStack {
+        Text(id)
+        Spacer()
+        Text("unavailable").opacity(0.5)
+      }
+      #endif
+    }
   }
 }
 
-var outlineGroupDemo: NavItem {
-  if #available(OSX 10.16, iOS 14.0, *) {
-    return NavItem("OutlineGroup", destination: OutlineGroupDemo())
-  } else {
-    return NavItem(unavailable: "OutlineGroup")
-  }
-}
-
-#if !os(macOS)
-var listDemo: AnyView {
-  if #available(iOS 14.0, *) {
-    return AnyView(ListDemo().listStyle(InsetGroupedListStyle()))
-  } else {
-    return AnyView(ListDemo())
-  }
-}
-#else
-var listDemo = ListDemo()
-#endif
-
-var sidebarDemo: NavItem {
-  if #available(iOS 14.0, *) {
-    return NavItem("Sidebar", destination: SidebarListDemo().listStyle(SidebarListStyle()))
-  } else {
-    return NavItem(unavailable: "Sidebar")
-  }
-}
-
-var gridDemo: NavItem {
-  if #available(OSX 10.16, iOS 14.0, *) {
-    return NavItem("Grid", destination: GridDemo())
-  } else {
-    return NavItem(unavailable: "Grid")
-  }
-}
-
-var appStorageDemo: NavItem {
-  if #available(OSX 11.0, iOS 14.0, *) {
-    return NavItem("AppStorage", destination: AppStorageDemo())
-  } else {
-    return NavItem(unavailable: "AppStorage")
-  }
-}
-
-var redactDemo: NavItem {
-  if #available(OSX 11.0, iOS 14.0, *) {
-    return NavItem("Redact", destination: RedactDemo())
-  } else {
-    return NavItem(unavailable: "Redact")
-  }
-}
-
-var domRefDemo: NavItem {
-  #if os(WASI)
-  return NavItem("DOM reference", destination: DOMRefDemo())
-  #else
-  return NavItem(unavailable: "DOM reference")
-  #endif
-}
-
-let links = [
-  NavItem("Counter", destination:
-    Counter(count: Count(value: 5), limit: 15)
-      .padding()
-      .background(Color(red: 0.9, green: 0.9, blue: 0.9, opacity: 1.0))
-      .border(Color.red, width: 3)),
-  NavItem("ZStack", destination: ZStack {
-    Text("I'm on bottom")
-    Text("I'm forced to the top")
-      .zIndex(1)
-    Text("I'm on top")
-  }.padding(20)),
-  NavItem("ButtonStyle", destination: ButtonStyleDemo()),
-  NavItem("ForEach", destination: ForEachDemo()),
-  NavItem("Text", destination: TextDemo()),
-  NavItem("Toggle", destination: ToggleDemo()),
-  NavItem("Path", destination: PathDemo()),
-  NavItem("TextField", destination: TextFieldDemo()),
-  NavItem("Spacer", destination: SpacerDemo()),
-  NavItem("Environment", destination: EnvironmentDemo().font(.system(size: 8))),
-  NavItem("Picker", destination: PickerDemo()),
-  NavItem("List", destination: listDemo),
-  sidebarDemo,
-  outlineGroupDemo,
-  NavItem("Color", destination: ColorDemo()),
-  appStorageDemo,
-  gridDemo,
-  redactDemo,
-  domRefDemo,
-]
-
 struct TokamakDemoView: View {
   var body: some View {
     NavigationView { () -> AnyView in
       let list = title(
-        List(links) { link in
+        List {
-          if let dest = link.destination {
+          Section(header: Text("Buttons")) {
-            NavigationLink(link.id, destination: HStack {
+            NavItem("Counter", destination:
-              Spacer()
+              Counter(count: Count(value: 5), limit: 15)
-              dest
+                .padding()
-              Spacer()
+                .background(Color(red: 0.9, green: 0.9, blue: 0.9, opacity: 1.0))
-            })
+                .border(Color.red, width: 3))
-          } else {
+            NavItem("ButtonStyle", destination: ButtonStyleDemo())
-            #if os(WASI)
-            Text(link.id)
-            #elseif os(macOS)
-            Text(link.id).opacity(0.5)
-            #else
-            HStack {
-              Text(link.id)
-              Spacer()
-              Text("unavailable").opacity(0.5)
-            }
-            #endif
           }
+          Section(header: Text("Containers")) {
+            NavItem("ForEach", destination: ForEachDemo())
+            if #available(iOS 14.0, *) {
+              #if os(macOS)
+              NavItem("List", destination: ListDemo())
+              #else
+              NavItem("List", destination: ListDemo().listStyle(InsetGroupedListStyle()))
+              #endif
+            } else {
+              NavItem("List", destination: ListDemo())
+            }
+            if #available(iOS 14.0, *) {
+              NavItem("Sidebar", destination: SidebarListDemo().listStyle(SidebarListStyle()))
+            } else {
+              NavItem(unavailable: "Sidebar")
+            }
+            if #available(OSX 10.16, iOS 14.0, *) {
+              NavItem("OutlineGroup", destination: OutlineGroupDemo())
+            } else {
+              NavItem(unavailable: "OutlineGroup")
+            }
+          }
+          Section(header: Text("Layout")) {
+            if #available(OSX 10.16, iOS 14.0, *) {
+              NavItem("Grid", destination: GridDemo())
+            } else {
+              NavItem(unavailable: "Grid")
+            }
+            NavItem("Spacer", destination: SpacerDemo())
+            NavItem("ZStack", destination: ZStack {
+              Text("I'm on bottom")
+              Text("I'm forced to the top")
+                .zIndex(1)
+              Text("I'm on top")
+            }.padding(20))
+          }
+          Section(header: Text("Selectors")) {
+            NavItem("Picker", destination: PickerDemo())
+            NavItem("Toggle", destination: ToggleDemo())
+          }
+          Section(header: Text("Text")) {
+            NavItem("Text", destination: TextDemo())
+            NavItem("TextField", destination: TextFieldDemo())
+          }
+          Section(header: Text("Misc")) {
+            NavItem("Path", destination: PathDemo())
+            NavItem("Environment", destination: EnvironmentDemo().font(.system(size: 8)))
+            NavItem("Color", destination: ColorDemo())
+            if #available(OSX 11.0, iOS 14.0, *) {
+              NavItem("AppStorage", destination: AppStorageDemo())
+            } else {
+              NavItem(unavailable: "AppStorage")
+            }
+            if #available(OSX 11.0, iOS 14.0, *) {
+              NavItem("Redaction", destination: RedactionDemo())
+            } else {
+              NavItem(unavailable: "Redaction")
+            }
+          }
+          #if os(WASI)
+          Section(header: Text("TokamakDOM")) {
+            NavItem("DOM reference", destination: DOMRefDemo())
+          }
+          #endif
         }
         .frame(minHeight: 300),
         title: "Demos"