feat: adding progress, skeletons

components/progress/progress.go

@@ -0,0 +1,126 @@
+package progress
+
+import htmx "github.com/zeiss/fiber-htmx"
+
+// ProgressProps is a struct that contains the props of the progress component
+type ProgressProps struct {
+	ClassNames htmx.ClassNames
+	Value      int
+	Max        int
+
+	htmx.Ctx
+}
+
+// Progress is a component that renders a progress element
+func Progress(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress": true,
+				"w-56":     true,
+			},
+			p.ClassNames,
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressPrimary is a component that renders a primary progress element
+func ProgressPrimary(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress":   true,
+				"w-56":       true,
+				"bg-primary": true,
+			},
+			p.ClassNames,
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressSecondary is a component that renders a secondary progress element
+func ProgressSecondary(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress":           true,
+				"w-56":               true,
+				"progress-secondary": true,
+			},
+			p.ClassNames,
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressSuccess is a component that renders a success progress element
+func ProgressSuccess(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress":         true,
+				"w-56":             true,
+				"progress-success": true,
+			},
+			p.ClassNames,
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressInfo is a component that renders a info progress element
+func ProgressInfo(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress":      true,
+				"w-56":          true,
+				"progress-info": true,
+			},
+			p.ClassNames,
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressWarning is a component that renders a warning progress element
+func ProgressWarning(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress":         true,
+				"w-56":             true,
+				"progress-warning": true,
+			},
+		),
+		htmx.Attribute("max", htmx.IntAsString(p.Max)),
+		htmx.Attribute("value", htmx.IntAsString(p.Value)),
+		htmx.Group(children...),
+	)
+}
+
+// ProgressIntermediate is a component that renders a intermediate progress element
+func ProgressIntermediate(p ProgressProps, children ...htmx.Node) htmx.Node {
+	return htmx.Progress(
+		htmx.Merge(
+			htmx.ClassNames{
+				"progress": true,
+				"w-56":     true,
+			},
+			p.ClassNames,
+		),
+		htmx.Group(children...),
+	)
+}

components/skeletons/skeletons.go

@@ -0,0 +1,30 @@
+package skeletons
+
+import (
+	"fmt"
+
+	htmx "github.com/zeiss/fiber-htmx"
+)
+
+// SkeletonProps is a struct that contains the props of the skeleton component
+type SkeletonProps struct {
+	ClassNames htmx.ClassNames
+	Width      int
+	Height     int
+
+	htmx.Ctx
+}
+
+// Skeleton is a component that renders a skeleton element
+func Skeleton(p SkeletonProps, children ...htmx.Node) htmx.Node {
+	return htmx.Div(
+		htmx.Merge(
+			htmx.ClassNames{
+				"skeleton":                    true,
+				fmt.Sprintf("w-%d", p.Width):  true,
+				fmt.Sprintf("h-%d", p.Height): true,
+			},
+			p.ClassNames,
+		),
+	)
+}

examples/main.go

@@ -15,6 +15,8 @@ import (
 	"github.com/zeiss/fiber-htmx/components/dropdowns"
 	"github.com/zeiss/fiber-htmx/components/forms"
 	"github.com/zeiss/fiber-htmx/components/icons"
+	"github.com/zeiss/fiber-htmx/components/progress"
+	"github.com/zeiss/fiber-htmx/components/skeletons"
 	"github.com/zeiss/fiber-htmx/components/stats"
 	"github.com/zeiss/fiber-htmx/components/tables"
 	"github.com/zeiss/fiber-htmx/components/toasts"
@@ -906,6 +908,82 @@ func indexPage() htmx.Node {
 					},
 				),
 			),
+			htmx.Div(
+				htmx.ClassNames{
+					"bg-base-100": true,
+					"p-4":         true,
+				},
+				progress.Progress(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+						Max:   100,
+						Value: 50,
+					},
+				),
+				progress.ProgressPrimary(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+						Max:   100,
+						Value: 50,
+					},
+				),
+				progress.ProgressSecondary(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+						Max:   100,
+						Value: 50,
+					},
+				),
+				progress.ProgressSuccess(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+						Max:   100,
+						Value: 50,
+					},
+				),
+				progress.ProgressInfo(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+						Max:   100,
+						Value: 50,
+					},
+				),
+				progress.ProgressIntermediate(
+					progress.ProgressProps{
+						ClassNames: htmx.ClassNames{
+							"block": true,
+							"m-4":   true,
+						},
+					},
+				),
+			),
+			htmx.Div(
+				htmx.ClassNames{
+					"bg-base-100": true,
+					"p-4":         true,
+				},
+				skeletons.Skeleton(
+					skeletons.SkeletonProps{
+						Width:  32,
+						Height: 32,
+					},
+				),
+			),
 		),
 	)
 }