feat: Adds WarningBox to Styleguide

Sources/Styleguide/FormElements.swift

@@ -50,8 +50,10 @@ public struct Input: HTML, Sendable {
     input(
       .id(id), .placeholder(placeholder), .name(name ?? id),
       .class("""
-        w-full px-4 py-2 border border-gray-300 dark:border-gray-400 rounded-md
+        w-full px-4 py-2 border rounded-md
         focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
+        placeholder-shown:border-gray-300 placeholder-shown:dark:border-gray-400
+        invalid:border-red-500 out-of-range:border-red-500
       """)
     )
   }

Sources/Styleguide/WarningBox.swift

@@ -0,0 +1,63 @@
+import Elementary
+
+/// A container for displaying warnings.
+public struct WarningBox<Header: HTML>: HTML, Sendable {
+
+  let warnings: [String]
+  let header: @Sendable ([String]) -> Header
+
+  public init(
+    warnings: [String],
+    @HTMLBuilder header: @Sendable @escaping ([String]) -> Header
+  ) {
+    self.warnings = warnings
+    self.header = header
+  }
+
+  public init(
+    _ warnings: String...,
+    @HTMLBuilder header: @Sendable @escaping ([String]) -> Header
+  ) {
+    self.warnings = warnings
+    self.header = header
+  }
+
+  public var content: some HTML<HTMLTag.div> {
+    div(.id("warnings")) {
+      header(warnings)
+      ul(.class("list-disc mx-10")) {
+        for warning in warnings {
+          li { warning }
+        }
+      }
+    }
+    .attributes(
+      .class("""
+        mt-6 p-4 rounded-lg shadow-lg
+        text-amber-500
+        bg-amber-100 dark:bg-amber-200
+        border border-amber-500
+      """),
+      when: warnings.count > 0
+    )
+  }
+}
+
+public extension WarningBox where Header == HTMLElement<HTMLTag.span, HTMLText> {
+  init(
+    warnings: [String]
+  ) {
+    self.init(
+      warnings: warnings,
+      header: { warnings in
+        span(.class("font-semibold mb-4 border-b")) { "Warning\(warnings.count > 1 ? "s:" : ":")" }
+      }
+    )
+  }
+
+  init(
+    _ warnings: String...
+  ) {
+    self.init(warnings: warnings)
+  }
+}

Sources/ViewController/Views/DehumidifierSize.swift

@@ -98,21 +98,7 @@ struct DehumidifierSizeResult: HTML {
       }
 
       // Display warnings, if applicable
-      if response.warnings.count > 0 {
-        div(.class("""
-          w-full mt-6 p-4 rounded-lg shadow-lg
-          text-amber-500
-          bg-amber-100 dark:bg-amber-200
-          border border-amber-500
-        """)) {
-          span(.class("font-semibold mb-4 border-b")) { "Warning\(response.warnings.count > 1 ? "s:" : ":")" }
-          ul(.class("list-disc mx-10")) {
-            for warning in response.warnings {
-              li { warning }
-            }
-          }
-        }
-      }
+      WarningBox(warnings: response.warnings)
 
       Note {
         """
@@ -124,27 +110,3 @@ struct DehumidifierSizeResult: HTML {
     }
   }
 }
-
-// <div className = "p-4 bg-white rounded-lg shadow-sm">
-// <p className = Recommended < "text-sm text-gray-600 mb-2" Size: </p>
-// <a
-// href = { result.recommendedSize.url }
-// target = "_blank"
-// rel = "noopener noreferrer"
-// className = "block p-4 bg-blue-100 rounded-lg hover:bg-blue-200 transition-colors group"
-// >
-// <div className = "flex items-center justify-between">
-// <div>
-//   <span className = "text-2xl font-bold text-blue-700">
-//   { result.recommendedSize.size } PPD
-//   </span>
-//   <p className = "text-sm text-blue-600 mt-1">
-//   Click to view available models →
-//   </p>
-//   </div>
-//   <div className = "w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center group-hover:bg-blue-300 transition-colors">
-//   <Droplets className = "w-6 h-6 text-blue-700" />
-//   </div>
-//   </div>
-//   </a>
-//   </div >

Sources/ViewController/Views/HVACSystemPerformance.swift

@@ -98,9 +98,6 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         PsychrometricPropertiesGrid(title: "Supply Air Properties", properties: response.supplyAirProperties)
       }
     }
-    // header: {
-    //   p { "Fix me." }
-    // }
   }
 
   private struct CapacityContainer: HTML, Sendable {
@@ -134,7 +131,6 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         text-lg font-semibold flex justify-center py-2 mb-4 text-blue-600 dark:text-slate-300
         """)) { "System Performance Metrics" }
 
-        // grid grid-cols-1 md:grid-cols-2 gap-6
         div(.class("flex justify-between items-center p-4")) {
           div(.class("space-y-3")) {
             LabeledMetric(label: "Airflow per Ton", value: metrics.cfmPerTon, units: "CFM/ton")
@@ -155,12 +151,8 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         }
 
         if shr < 0.7 {
-          div(.class("mx-8 mb-4 mt-8 p-4 rounded-xl shadow-lg border border-amber-500 bg-amber-200 text-amber-500")) {
-            h4(.class("text-lg font-semibold")) { "Warning:" }
-            p(.class("text-sm")) {
-              "Low sensible heat ratio may indicate excessive dehumidification or low airflow."
-            }
-          }
+          WarningBox("Low sensible heat ratio may indicate excessive dehumidification or low airflow.")
+            .attributes(.class("mb-4 mx-8"))
         }
       }
     }

Sources/ViewController/Views/RoomPressure.swift

@@ -75,7 +75,9 @@ struct RoomPressureForm: HTML, Sendable {
             switch mode {
             case .knownAirflow:
               Input(id: pressureID, placeholder: pressurePlaceholder)
-                .attributes(.type(.number), .step("0.1"), .min("0.1"), .max("3.0"), .autofocus, .required)
+                .attributes(
+                  .type(.number), .step("0.1"), .min("0.1"), .max("3.0"), .autofocus, .required
+                )
             case .measuredPressure:
               Input(id: pressureID, placeholder: pressurePlaceholder)
                 .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus, .required)
@@ -117,7 +119,7 @@ struct RoomPressureForm: HTML, Sendable {
     private var pressurePlaceholder: String {
       switch mode {
       case .knownAirflow: return "Room pressure (max 3 pa.)"
-      case .measuredPressure: return "Measure pressure"
+      case .measuredPressure: return "Measured pressure"
       }
     }
   }