From b74039c0e4be8cca2e204181aa777240b4738e00 Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Tue, 10 Sep 2024 22:17:35 -0700
Subject: [PATCH] Add Picker and Option. (#176)

Part of https://github.com/jverkoey/slipstream/issues/25.
---
 .../Guides/SlipstreamForWebDevelopers.md      | 10 +++---
 .../Documentation.docc/W3C/W3CViews.md        |  2 ++
 .../W3C/Elements/Forms/Option.swift           | 27 +++++++++++++++
 .../W3C/Elements/Forms/Picker.swift           | 33 +++++++++++++++++++
 .../W3C/Forms/OptionTests.swift               | 14 ++++++++
 .../W3C/Forms/PickerTests.swift               | 10 ++++++
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 Sources/Slipstream/W3C/Elements/Forms/Option.swift
 create mode 100644 Sources/Slipstream/W3C/Elements/Forms/Picker.swift
 create mode 100644 Tests/SlipstreamTests/W3C/Forms/OptionTests.swift
 create mode 100644 Tests/SlipstreamTests/W3C/Forms/PickerTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md
index d9bf68b..b9b7224 100644
--- a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md
+++ b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md
@@ -168,14 +168,14 @@ provided below is an organized table of W3C HTML tags and their equivalent Slips
 
  W3C tag | Slipstream view
 :--------|:----------------
-[`<form>`](https://html.spec.whatwg.org/multipage/sections.html#the-form-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<form>`](https://html.spec.whatwg.org/multipage/sections.html#the-form-element) | ``Form``
 [`<label>`](https://html.spec.whatwg.org/multipage/sections.html#the-label-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<input>`](https://html.spec.whatwg.org/multipage/sections.html#the-input-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<button>`](https://html.spec.whatwg.org/multipage/sections.html#the-button-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<select>`](https://html.spec.whatwg.org/multipage/sections.html#the-select-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<input>`](https://html.spec.whatwg.org/multipage/sections.html#the-input-element) | ``TextField``
+[`<button>`](https://html.spec.whatwg.org/multipage/sections.html#the-button-element) | ``Button``
+[`<select>`](https://html.spec.whatwg.org/multipage/sections.html#the-select-element) | ``Picker``
 [`<datalist>`](https://html.spec.whatwg.org/multipage/sections.html#the-datalist-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<optgroup>`](https://html.spec.whatwg.org/multipage/sections.html#the-optgroup-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<option>`](https://html.spec.whatwg.org/multipage/sections.html#the-option-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<option>`](https://html.spec.whatwg.org/multipage/sections.html#the-option-element) | ``Option``
 [`<textarea>`](https://html.spec.whatwg.org/multipage/sections.html#the-textarea-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<output>`](https://html.spec.whatwg.org/multipage/sections.html#the-output-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<progress>`](https://html.spec.whatwg.org/multipage/sections.html#the-progress-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
diff --git a/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md b/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md
index 29eb0ae..5230325 100644
--- a/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md
+++ b/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md
@@ -77,6 +77,8 @@ The complete W3C HTML elements standard can be found [here](https://html.spec.wh
 - ``Form``
 - ``TextField``
 - ``Button``
+- ``Picker``
+- ``Option``
 
 ### Scripting
 
diff --git a/Sources/Slipstream/W3C/Elements/Forms/Option.swift b/Sources/Slipstream/W3C/Elements/Forms/Option.swift
new file mode 100644
index 0000000..eb1fe8f
--- /dev/null
+++ b/Sources/Slipstream/W3C/Elements/Forms/Option.swift
@@ -0,0 +1,27 @@
+import Foundation
+
+import SwiftSoup
+
+/// An option in a ``Picker``.
+///
+/// - SeeAlso: W3C [option](https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Option: View {
+  /// Creates an option with an optional value.
+  public init(_ label: String, value: String? = nil) {
+    self.label = label
+    self.value = value
+  }
+
+  @_documentation(visibility: private)
+  public func render(_ container: Element, environment: EnvironmentValues) throws {
+    let element = try container.appendElement("option")
+    if let value {
+      try element.attr("value", value)
+    }
+    try element.text(label)
+  }
+
+  private let label: String
+  private let value: String?
+}
diff --git a/Sources/Slipstream/W3C/Elements/Forms/Picker.swift b/Sources/Slipstream/W3C/Elements/Forms/Picker.swift
new file mode 100644
index 0000000..1b473b8
--- /dev/null
+++ b/Sources/Slipstream/W3C/Elements/Forms/Picker.swift
@@ -0,0 +1,33 @@
+import Foundation
+
+import SwiftSoup
+
+/// A picker represents a control for selecting amongst a set of options.
+///
+/// ```swift
+/// struct MySiteContent: View {
+///   var body: some View {
+///     Body {
+///       Picker {
+///         Option("option1", value: "Option 1")
+///         Option("option2", value: "Option 2")
+///       }
+///     }
+///   }
+/// }
+/// ```
+///
+/// - SeeAlso: W3C [select](https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Picker<Content>: W3CElement where Content: View {
+  @_documentation(visibility: private)
+  public let tagName: String = "select"
+
+  @_documentation(visibility: private)
+  @ViewBuilder public let content: () -> Content
+
+  /// Creates a picker view.
+  public init(@ViewBuilder content: @escaping () -> Content) {
+    self.content = content
+  }
+}
diff --git a/Tests/SlipstreamTests/W3C/Forms/OptionTests.swift b/Tests/SlipstreamTests/W3C/Forms/OptionTests.swift
new file mode 100644
index 0000000..181d7ec
--- /dev/null
+++ b/Tests/SlipstreamTests/W3C/Forms/OptionTests.swift
@@ -0,0 +1,14 @@
+import Foundation
+import Testing
+
+import Slipstream
+
+struct OptionTests {
+  @Test func noValue() throws {
+    try #expect(renderHTML(Option("Label")) == #"<option>Label</option>"#)
+  }
+
+  @Test func withValue() throws {
+    try #expect(renderHTML(Option("Label", value: "value")) == #"<option value="value">Label</option>"#)
+  }
+}
diff --git a/Tests/SlipstreamTests/W3C/Forms/PickerTests.swift b/Tests/SlipstreamTests/W3C/Forms/PickerTests.swift
new file mode 100644
index 0000000..2d0a5c2
--- /dev/null
+++ b/Tests/SlipstreamTests/W3C/Forms/PickerTests.swift
@@ -0,0 +1,10 @@
+import Foundation
+import Testing
+
+import Slipstream
+
+struct PickerTests {
+  @Test func emptyBlock() throws {
+    try #expect(renderHTML(Picker {}) == #"<select></select>"#)
+  }
+}