feat: Adds WarningBox to Styleguide

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/MainPage.swift

@@ -1,116 +0,0 @@
-import Elementary
-import ElementaryHTMX
-import Routes
-import Styleguide
-
-struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
-  let title = "HVAC-Toolbox"
-  let lang = "en-US"
-  let inner: @Sendable () -> Inner
-
-  var head: some HTML {
-    meta(.charset(.utf8))
-    meta(.name("viewport"), .content("width=device-width, initial-scale=1.0"))
-    link(.rel(.stylesheet), .href("/output.css"))
-    link(
-      .rel(.icon),
-      .href("/favicon-32x32.png"),
-      .init(name: "type", value: "image/png"),
-      .init(name: "sizes", value: "32x32")
-    )
-    link(
-      .rel(.icon),
-      .href("/favicon-16x16.png"),
-      .init(name: "type", value: "image/png"),
-      .init(name: "sizes", value: "16x16")
-    )
-    link(
-      .rel(.init(rawValue: "apple-touch-icon")),
-      .href("/apple-touch-icon.png"),
-      .init(name: "sizes", value: "180x180")
-    )
-    link(.rel(.init(rawValue: "mainifest")), .href("/site.webmanifest"))
-    script(.src("https://unpkg.com/htmx.org@2.0.4")) {}
-  }
-
-  var body: some HTML {
-    main(.class("bg-slate-100 dark:bg-gray-800")) {
-      div(.class("min-h-screen")) {
-        Header()
-        PageContent(body: inner)
-      }
-    }
-  }
-}
-
-private struct Header: HTML {
-
-  var content: some HTML {
-    header(.class("\(bg: .blue) mb-8 flex flex-row gap-2 border \(border: .yellow)")) {
-      a(
-        .href(route: .index),
-        .class("group flex flex-row gap-2 \(bg: .yellow) pe-2 rounded-e-lg \(text: .blue) hover:text-blue-600")
-      ) {
-        img(.src("/images/toolbox.svg"), .width(40), .height(40), .class("py-1"))
-        div(.class("flex flex-row mt-2")) {
-          h2(.class("text-2xl font-extrabold pe-3")) { "HVAC-Toolbox" }
-          SVG(.wind, color: .blue)
-            .attributes(.class("group-hover:text-blue-600"))
-        }
-      }
-      nav(.class("flex flex-row gap-2 p-2 mt-2")) {
-        // TODO: Add class active, to button that is the active route.
-        ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 \(text: .yellow) font-bold")) {
-          li {
-            a(
-              .class("hover:border-b \(border: .yellow)"),
-              .hx.get(route: .moldRisk(.index)), .hx.target("#content"), .hx.pushURL(true)
-            ) {
-              "Mold-Risk"
-            }
-          }
-          li {
-            a(
-              .class("[&:hover]:border-b \(border: .yellow)"),
-              .hx.get(route: .dehumidifierSize(.index)), .hx.target("#content"), .hx.pushURL(true)
-            ) {
-              "Dehumidifier-Sizing"
-            }
-          }
-          li {
-            a(
-              .class("hover:border-b \(border: .yellow)"),
-              .hx.get(route: .hvacSystemPerformance(.index)), .hx.target("#content"), .hx.pushURL(true)
-            ) {
-              "HVAC-System-Performance"
-            }
-          }
-          li {
-            a(
-              .class("hover:border-b \(border: .yellow)"),
-              .hx.get(route: .roomPressure(.index)), .hx.target("#content"), .hx.pushURL(true)
-            ) {
-              "Room-Pressure"
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-private struct PageContent<Body: HTML>: HTML where Body: Sendable {
-  let body: () -> Body
-
-  var content: some HTML {
-    div(.class("mx-5 lg:mx-20")) {
-      div(.class("rounded-xl shadow-lg bg-white dark:bg-slate-700 p-8 text-gray-600 dark:text-slate-200")) {
-        div(.id("content")) {
-          body()
-        }
-      }
-    }
-  }
-}
-
-protocol SendableHTMLDocument: HTMLDocument, Sendable {}

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"
       }
     }
   }