Clean up and comment (#11)

* Add comments

* Update the package description

* Refactor code

* Export the import of htmlkit

* Fix issues

* Update readme

Author: mattesmohr

Dependencies/src/css/components/collection.css

@@ -12,17 +12,12 @@
 }
 
 .collection.style\:grid > .collection-item {
-    
     border-width: var(--collectionBorderWidth);
     border-style: solid;
     border-color: var(--collectionBorderColor);
     border-radius: var(--collectionBorderRadius);
 }
 
-.collection.style\:carousel {
-    
-}
-
 .collection.ratio\:50 {
     grid-template-columns: repeat(2, 1fr);
 }

Dependencies/src/css/components/form.css

@@ -9,7 +9,6 @@
 }
 
 .label {
-    
     display: inline-block;
     margin-top: 20px;
     margin-bottom: 10px;

Dependencies/src/css/components/link.css

@@ -3,7 +3,6 @@
  */
 
 .link {
-    
     font-family: var(--textFontFamily);
     font-size: var(--textFontSize);
     font-weight: var(--textFontHeight);

Dependencies/src/css/components/text.css

@@ -40,7 +40,7 @@
     font-weight: 400;
 }
 
-.text.weight\:semibold {
+.text.weight\:medium {
     font-weight: 500;
 }
 

Package.swift

@@ -1,19 +1,19 @@
-// swift-tools-version:5.3
+// swift-tools-version:5.4
 
 import PackageDescription
 
 let package = Package(
     name: "HTMLKitComponents",
     platforms: [
-       .macOS(.v10_15)
+       .macOS(.v10_14)
     ],
     products: [
         .library(
             name: "HTMLKitComponents",
             targets: ["HTMLKitComponents"]),
     ],
     dependencies: [
-        .package(url: "https://github.com/vapor-community/HTMLKit", .branch("main")),
+        .package(url: "https://github.com/vapor-community/HTMLKit", from: "2.5.0")
     ],
     targets: [
         .target(

README.md

@@ -15,17 +15,15 @@ Add the packages to your dependecies and targets in your package file.
 dependencies: [
     ...
     ///1. Add the packages
-    .package(name: "HTMLKit", url: "https://github.com/vapor-community/HTMLKit.git", from: "2.4.4"),
-    .package(name: "HTMLKitComponents", url: "https://github.com/vapor-community/HTMLKit-Components.git", from: "0.1.0")
+    .package(url: "https://github.com/vapor-community/HTMLKit-Components.git", from: "0.1.0")
 ],
 targets: [
     .target( 
     ...
         dependencies: [
             ...
             /// 2. Add the products
-            .product(name: "HTMLKit", package: "HTMLKit"),
-            .product(name: "HTMLKitComponents", package: "HTMLKitComponents")
+            .product(name: "HTMLKitComponents", package: "HTMLKit-Components")
         ]
     ),
     ...

Sources/HTMLKitComponents/Core/Actions.swift

@@ -1,3 +1,8 @@
+/*
+ Abstract:
+ The file contains the actions for the components.
+ */
+
 public enum Actions {
 
     case show(_ target: String)
@@ -8,15 +13,12 @@ public enum Actions {
 
         switch self {
         case .show(let target):
-            
             return show(target)
 
         case .hide(let target):
-            
             return hide(target)
 
         case .animate(let target):
-            
             return animate(target)
         }
     }

Sources/HTMLKitComponents/Core/Components/Button.swift

@@ -1,23 +1,34 @@
+/*
+ Abstract:
+ The file contains everything related to buttons.
+ */
+
 import HTMLKit
 import Foundation
 
 public struct ActionButton: Component {
 
+    /// The url path of the target.
     internal let destination: TemplateValue<String>
 
+    /// The  content of the button.
     internal var content: [AnyContent]
 
+    /// The classes of the button.
     internal var classes: [String]
 
+    /// The events of the button.
     internal var events: [String]?
 
+    /// Creates a action button.
     public init(destination: TemplateValue<String>, @ContentBuilder<AnyContent> content: () -> [AnyContent]) {
 
         self.destination = destination
         self.content = content()
         self.classes = ["button"]
     }
 
+    /// Creates a action button.
     internal init(destination: TemplateValue<String>, content: [AnyContent], classes: [String], events: [String]?) {
 
         self.destination = destination
@@ -28,60 +39,68 @@ public struct ActionButton: Component {
 
     public var body: AnyContent {
         Anchor {
-            content
+            self.content
         }
-        .reference(destination.rawValue)
-        .class(classes.joined(separator: " "))
+        .reference(self.destination.rawValue)
+        .class(self.classes.joined(separator: " "))
         .role(.button)
     }
 
+    /// The behaviour of the button.
     public var scripts: AnyContent {
 
         if let events = self.events {
-            return [content.scripts, Script { events }]
+            return [self.content.scripts, Script { events }]
         }
 
-        return [content.scripts]
+        return [self.content.scripts]
     }
 }
 
-extension ActionButton: ButtonComponent {
+extension ActionButton: ButtonModifier {
 
-    public func buttonSize(_ size: ButtonSize) -> ActionButton {
+    public func buttonSize(_ size: Tokens.ButtonSize) -> ActionButton {
 
         var newSelf = self
         newSelf.classes.append(size.rawValue)
+        
         return newSelf
     }
 
-    public func borderShape(_ shape: BorderShape) -> ActionButton {
+    public func borderShape(_ shape: Tokens.BorderShape) -> ActionButton {
 
         var newSelf = self
         newSelf.classes.append(shape.rawValue)
+        
         return newSelf
     }
 
-    public func buttonStyle(_ style: ButtonStyle) -> ActionButton {
+    public func buttonStyle(_ style: Tokens.ButtonStyle) -> ActionButton {
 
         var newSelf = self
         newSelf.classes.append(style.rawValue)
+        
         return newSelf
     }
 
-    public func backgroundColor(_ color: BackgroundColor) -> ActionButton {
+    public func backgroundColor(_ color: Tokens.BackgroundColor) -> ActionButton {
 
         var newSelf = self
         newSelf.classes.append(color.rawValue)
+        
         return newSelf
     }
 }
 
 public struct SubmitButton: Component {
 
+    /// The  content of the button.
     internal var content: [AnyContent]
 
+    /// The classes of the button.
     internal var classes: [String]
 
+    /// Creates a submit button.
     public init(@ContentBuilder<AnyContent> content: () -> [AnyContent]) {
 
         self.content = content()
@@ -90,92 +109,110 @@ public struct SubmitButton: Component {
 
     public var body: AnyContent {
         Button {
-            content
+            self.content
         }
         .type(.submit)
-        .class(classes.joined(separator: " "))
+        .class(self.classes.joined(separator: " "))
     }
 }
 
-extension SubmitButton: ButtonComponent {
+extension SubmitButton: ButtonModifier {
 
-    public func buttonSize(_ size: ButtonSize) -> SubmitButton {
+    public func buttonSize(_ size: Tokens.ButtonSize) -> SubmitButton {
 
         var newSelf = self
         newSelf.classes.append(size.rawValue)
+        
         return newSelf
     }
 
-    public func borderShape(_ shape: BorderShape) -> SubmitButton {
+    public func borderShape(_ shape: Tokens.BorderShape) -> SubmitButton {
 
         var newSelf = self
         newSelf.classes.append(shape.rawValue)
+        
         return newSelf
     }
 
-    public func buttonStyle(_ style: ButtonStyle) -> SubmitButton {
+    public func buttonStyle(_ style: Tokens.ButtonStyle) -> SubmitButton {
 
         var newSelf = self
         newSelf.classes.append(style.rawValue)
+        
         return newSelf
     }
 
-    public func backgroundColor(_ color: BackgroundColor) -> SubmitButton {
+    public func backgroundColor(_ color: Tokens.BackgroundColor) -> SubmitButton {
 
         var newSelf = self
         newSelf.classes.append(color.rawValue)
+        
         return newSelf
     }
 }
 
 public struct ResetButton: Component {
 
+    /// The  content of the button.
     internal var content: [AnyContent]
 
+    /// The classes of the button.
     internal var classes: [String]
 
+    /// Creates a reset button.
     public init(@ContentBuilder<AnyContent> content: () -> [AnyContent]) {
 
         self.content = content()
         self.classes = ["button"]
     }
 
+    /// Creates a sbumit button.
+    internal init(content: [AnyContent], classes: [String]) {
+        
+        self.content = content
+        self.classes = classes
+    }
+
     public var body: AnyContent {
         Button {
-            content
+            self.content
         }
         .type(.reset)
-        .class(classes.joined(separator: " "))
+        .class(self.classes.joined(separator: " "))
     }
 }
 
-extension ResetButton: ButtonComponent {
+extension ResetButton: ButtonModifier {
 
-    public func buttonSize(_ size: ButtonSize) -> ResetButton {
+    public func buttonSize(_ size: Tokens.ButtonSize) -> ResetButton {
 
         var newSelf = self
         newSelf.classes.append(size.rawValue)
+        
         return newSelf
     }
 
-    public func borderShape(_ shape: BorderShape) -> ResetButton {
+    public func borderShape(_ shape: Tokens.BorderShape) -> ResetButton {
 
         var newSelf = self
         newSelf.classes.append(shape.rawValue)
+        
         return newSelf
     }
 
-    public func buttonStyle(_ style: ButtonStyle) -> ResetButton {
+    public func buttonStyle(_ style: Tokens.ButtonStyle) -> ResetButton {
 
         var newSelf = self
         newSelf.classes.append(style.rawValue)
+        
         return newSelf
     }
 
-    public func backgroundColor(_ color: BackgroundColor) -> ResetButton {
+    public func backgroundColor(_ color: Tokens.BackgroundColor) -> ResetButton {
 
         var newSelf = self
         newSelf.classes.append(color.rawValue)
+        
         return newSelf
     }
 }