From b172e06729c4d27042ca28c3f65f42ea5acca358 Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Sat, 3 Aug 2024 14:33:55 -0400
Subject: [PATCH] Add fontWeight and bold modifiers. (#61)

Part of https://github.com/jverkoey/slipstream/issues/51.
---
 .../Views/TailwindCSS/FontSize.md             | 12 ++++
 .../Views/TailwindCSS/FontWeight.md           | 13 ++++
 .../Views/TailwindCSS/TailwindCSSClasses.md   |  5 +-
 .../Views/TailwindCSS/TextAlignment.md        | 11 +++
 .../Views/TailwindCSS/fontSize.md             |  5 --
 .../Views/TailwindCSS/textAlignment.md        |  5 --
 .../Typography/View+fontWeight.swift          | 64 +++++++++++++++++
 .../Sites/CatalogSiteTests.swift              |  3 +-
 .../TailwindCSS/FontSizeTests.swift           | 68 +++++++++----------
 .../TailwindCSS/FontWeightTests.swift         |  7 ++
 10 files changed, 143 insertions(+), 50 deletions(-)
 create mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontSize.md
 create mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontWeight.md
 create mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TextAlignment.md
 delete mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
 delete mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/textAlignment.md
 create mode 100644 Sources/Slipstream/TailwindCSS/Typography/View+fontWeight.swift
 create mode 100644 Tests/SlipstreamTests/TailwindCSS/FontWeightTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontSize.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontSize.md
new file mode 100644
index 0000000..ac03ae3
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontSize.md
@@ -0,0 +1,12 @@
+# Font size
+
+## Topics
+
+### Modifiers
+
+- ``View/fontSize(_:)-6cmd6``
+- ``View/fontSize(_:)-6mwyi``
+
+### Enumerations
+
+- ``FontSize``
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontWeight.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontWeight.md
new file mode 100644
index 0000000..fb1be9c
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FontWeight.md
@@ -0,0 +1,13 @@
+# Font weight
+
+## Topics
+
+### Modifiers
+
+- ``View/fontWeight(_:)-9ehtx``
+- ``View/fontWeight(_:)-2g9rx``
+- ``View/bold()``
+
+### Enumerations
+
+- ``FontWeight``
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
index 1295a73..e673656 100644
--- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
@@ -10,5 +10,6 @@ Slipstream implementations of Tailwind CSS's classes.
 
 ### Typography
 
-- ``View/fontSize(_:)``
-- ``View/textAlignment(_:)``
+- <doc:FontSize>
+- <doc:FontWeight>
+- <doc:TextAlignment>
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TextAlignment.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TextAlignment.md
new file mode 100644
index 0000000..5d7e90b
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TextAlignment.md
@@ -0,0 +1,11 @@
+# Text alignment
+
+## Topics
+
+### Modifiers
+
+- ``View/textAlignment(_:)``
+
+### Enumerations
+
+- ``TextAlignment``
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
deleted file mode 100644
index 3a9ac7f..0000000
--- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# ```View/fontSize(_:)```
-
-## Topics
-
-- ``FontSize``
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/textAlignment.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/textAlignment.md
deleted file mode 100644
index bcc5cdd..0000000
--- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/textAlignment.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# ```View/textAlignment(_:)```
-
-## Topics
-
-- ``TextAlignment``
diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+fontWeight.swift b/Sources/Slipstream/TailwindCSS/Typography/View+fontWeight.swift
new file mode 100644
index 0000000..7e97235
--- /dev/null
+++ b/Sources/Slipstream/TailwindCSS/Typography/View+fontWeight.swift
@@ -0,0 +1,64 @@
+/// Constants that specify the weight of the text.
+///
+/// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum FontWeight: String {
+  case thin
+  case extraLight = "extralight"
+  case light
+  case normal
+  case medium
+  case semiBold = "semibold"
+  case bold
+  case extraBold = "extrabold"
+  case black
+}
+
+extension View {
+  /// Set the font weight.
+  ///
+  /// - Parameter fontWeight: The font weight to apply to the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontWeight(_ fontWeight: FontWeight) -> some View {
+    return self.modifier(ClassModifier(add: "font-" + fontWeight.rawValue))
+  }
+
+  /// Set the font weight to the closest equivalent Tailwind CSS font weight.
+  ///
+  /// - Parameter weight: A font weight value. If the weight is exactly between
+  /// two weight classes, then the lighter weight will be used.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontWeight(_ weight: Int) -> some View {
+    return fontWeight(closestTailwindFontWeight(weight: weight))
+  }
+
+  /// Set the font weight to bold.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func bold() -> some View {
+    return fontWeight(.bold)
+  }
+
+  private func closestTailwindFontWeight(weight: Int) -> FontWeight {
+    // Mapping of Tailwind CSS font weight classes to their weight values.
+    let fontWeightMapping: [(fontWeight: FontWeight, weight: Int)] = [
+      (.thin, 100),        // Thin
+      (.extraLight, 200),  // Extra Light
+      (.light, 300),       // Light
+      (.normal, 400),      // Normal
+      (.medium, 500),      // Medium
+      (.semiBold, 600),    // Semi Bold
+      (.bold, 700),        // Bold
+      (.extraBold, 800),   // Extra Bold
+      (.black, 900)        // Black
+    ]
+    // Find the closest matching font weight
+    let closestFontWeight = fontWeightMapping.min { abs($0.weight - weight) < abs($1.weight - weight) }
+    return closestFontWeight?.fontWeight ?? .normal
+  }
+}
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
index 11c6ba3..6d43635 100644
--- a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
+++ b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -21,6 +21,7 @@ private struct CatalogSite: View {
           Text("world!")
           H1("Heading 1")
             .fontSize(.extraLarge)
+            .bold()
             .textAlignment(.leading)
           H2 {
             Text("Heading 2")
@@ -54,7 +55,7 @@ struct CatalogSiteTests {
   <div class="container">
    Hello
    <br />world!
-   <h1 class="text-xl text-start">Heading 1</h1>
+   <h1 class="text-xl font-bold text-start">Heading 1</h1>
    <h2 class="text-3xl text-center">Heading 2</h2>
    <h3 class="text-end">Heading 3</h3>
    <h4>Heading 4</h4>
diff --git a/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift
index 927faca..b56f7eb 100644
--- a/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift
+++ b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift
@@ -1,44 +1,38 @@
 import Testing
-
 import Slipstream
 
-struct FontSizeTests {
-  @Test func enumFontSizes() throws {
-    try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.small)) == #"<div class="text-sm"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.base)) == #"<div class="text-base"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.large)) == #"<div class="text-lg"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.extraLarge)) == #"<div class="text-xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.extraExtraLarge)) == #"<div class="text-2xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.extraExtraExtraLarge)) == #"<div class="text-3xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.fourXLarge)) == #"<div class="text-4xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.fiveXLarge)) == #"<div class="text-5xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.sixXLarge)) == #"<div class="text-6xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.sevenXLarge)) == #"<div class="text-7xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.eightXLarge)) == #"<div class="text-8xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.nineXLarge)) == #"<div class="text-9xl"></div>"#)
+struct FontWeightTests {
+  @Test func enumFontWeights() throws {
+    try #expect(renderHTML(Div {}.fontWeight(.thin)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.extraLight)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.light)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.normal)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.medium)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.semiBold)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.bold)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.extraBold)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.black)) == #"<div class="font-black"></div>"#)
   }
 
-  @Test func numericalFontSizes() throws {
-    try #expect(renderHTML(Div {}.fontSize(6)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(12)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(13)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(14)) == #"<div class="text-sm"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(15)) == #"<div class="text-sm"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(16)) == #"<div class="text-base"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(17)) == #"<div class="text-base"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(18)) == #"<div class="text-lg"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(19)) == #"<div class="text-lg"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(20)) == #"<div class="text-xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(22)) == #"<div class="text-xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(24)) == #"<div class="text-2xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(30)) == #"<div class="text-3xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(36)) == #"<div class="text-4xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(48)) == #"<div class="text-5xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(60)) == #"<div class="text-6xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(72)) == #"<div class="text-7xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(96)) == #"<div class="text-8xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(128)) == #"<div class="text-9xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(200)) == #"<div class="text-9xl"></div>"#)
+  @Test func numericalFontWeights() throws {
+    try #expect(renderHTML(Div {}.fontWeight(50)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(100)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(150)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(200)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(250)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(300)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(350)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(400)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(450)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(500)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(550)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(600)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(650)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(700)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(750)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(800)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(850)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(900)) == #"<div class="font-black"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(950)) == #"<div class="font-black"></div>"#)
   }
 }
diff --git a/Tests/SlipstreamTests/TailwindCSS/FontWeightTests.swift b/Tests/SlipstreamTests/TailwindCSS/FontWeightTests.swift
new file mode 100644
index 0000000..9627606
--- /dev/null
+++ b/Tests/SlipstreamTests/TailwindCSS/FontWeightTests.swift
@@ -0,0 +1,7 @@
+//
+//  FontWeightTests.swift
+//  slipstream
+//
+//  Created by Jeff Verkoeyen on 8/3/24.
+//
+