feat: add error component

components/forms/text.go

@@ -1,6 +1,9 @@
 package forms
 
-import htmx "github.com/zeiss/fiber-htmx"
+import (
+	htmx "github.com/zeiss/fiber-htmx"
+	"github.com/zeiss/pkg/utilx"
+)
 
 // TextInputProps represents the properties for a text input element.
 type TextInputProps struct {
@@ -10,15 +13,17 @@ type TextInputProps struct {
 	Disabled    bool            // Whether the text input element is disabled.
 	Placeholder string          // The placeholder of the text input element.
 	Icon        htmx.Node       // The icon of the text input element.
+	Error       string          // The error message of the text input element.
 }
 
 // TextInput returns a text input element based on the provided properties.
 func TextInput(p TextInputProps, children ...htmx.Node) htmx.Node {
 	return htmx.Input(
 		htmx.Merge(
 			htmx.ClassNames{
-				"input":  true,
-				"w-full": true,
+				"input":       true,
+				"input-error": utilx.NotEmpty(p.Error),
+				"w-full":      true,
 			},
 			p.ClassNames,
 		),

components/validate/errors.go

@@ -0,0 +1,34 @@
+package validate
+
+import (
+	"reflect"
+	"strings"
+
+	"github.com/go-playground/validator/v10"
+	"github.com/zeiss/pkg/slices"
+)
+
+// Errors is a map of field names to error messages.
+type Errors validator.ValidationErrors
+
+// Field returns the error message for the provided field.
+func (e Errors) Field(name string) string {
+	for _, err := range e {
+		if err.Field() == name {
+			return err.Error()
+		}
+	}
+
+	return ""
+}
+
+// TagNameFunc returns the tag name for the provided field.
+func TagNameFunc(fld reflect.StructField) string {
+	name := slices.First(strings.SplitN(fld.Tag.Get("json"), ",", 2)...)
+
+	if name == "-" {
+		return ""
+	}
+
+	return name
+}

examples/main.go

@@ -9,6 +9,7 @@ import (
 	"strconv"
 	"time"
 
+	"github.com/go-playground/validator/v10"
 	htmx "github.com/zeiss/fiber-htmx"
 	"github.com/zeiss/fiber-htmx/components/alerts"
 	"github.com/zeiss/fiber-htmx/components/avatars"
@@ -24,9 +25,12 @@ import (
 	"github.com/zeiss/fiber-htmx/components/tables"
 	"github.com/zeiss/fiber-htmx/components/tabs"
 	"github.com/zeiss/fiber-htmx/components/tailwind"
+	"github.com/zeiss/fiber-htmx/components/typography"
 	"github.com/zeiss/fiber-htmx/components/utils"
+	"github.com/zeiss/fiber-htmx/components/validate"
 	"github.com/zeiss/fiber-htmx/sse"
 	"github.com/zeiss/pkg/server"
+	"github.com/zeiss/pkg/utilx"
 
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/logger"
@@ -113,6 +117,13 @@ type exampleController struct {
 	htmx.UnimplementedController
 }
 
+var v *validator.Validate
+
+type ExampleForm struct {
+	Name        string `json:"name" validate:"required"`
+	Description string `json:"description" validate:"required,min=10"`
+}
+
 func (c *exampleController) Error(err error) error {
 	return htmx.RenderComp(
 		c.Ctx(),
@@ -159,6 +170,16 @@ func (c *exampleController) Get() error {
 		Message: "Hello, World!",
 	})
 
+	v = validator.New()
+
+	form := &ExampleForm{
+		Name:        "Demo",
+		Description: "",
+	}
+
+	err := v.Struct(form)
+	errz := validate.Errors(err.(validator.ValidationErrors))
+
 	return c.Render(
 		htmx.HTML5(
 			htmx.HTML5Props{
@@ -415,6 +436,60 @@ func (c *exampleController) Get() error {
 										forms.TextInput(
 											forms.TextInputProps{},
 										),
+										forms.FormControl(
+											forms.FormControlProps{},
+											forms.FormControlLabel(
+												forms.FormControlLabelProps{},
+												forms.FormControlLabelText(
+													forms.FormControlLabelTextProps{
+														ClassNames: htmx.ClassNames{
+															"label-text": true,
+														},
+													},
+													htmx.Text("Hello, World!"),
+												),
+											),
+											forms.TextInput(
+												forms.TextInputProps{
+													Error: errz.Field("name"),
+													Value: "Hello, World!",
+												},
+											),
+											htmx.If(
+												utilx.NotEmpty(errz.Field("name")),
+												typography.Error(
+													typography.Props{},
+													htmx.Text("This field is required."),
+												),
+											),
+										),
+										forms.FormControl(
+											forms.FormControlProps{},
+											forms.FormControlLabel(
+												forms.FormControlLabelProps{},
+												forms.FormControlLabelText(
+													forms.FormControlLabelTextProps{
+														ClassNames: htmx.ClassNames{
+															"label-text": true,
+														},
+													},
+													htmx.Text("Hello, World!"),
+												),
+											),
+											forms.TextInput(
+												forms.TextInputProps{
+													Error: errz.Field("Description"),
+													Value: "Hello, World!",
+												},
+											),
+											htmx.If(
+												utilx.NotEmpty(errz.Field("Description")),
+												typography.Error(
+													typography.Props{},
+													htmx.Text("This field is required."),
+												),
+											),
+										),
 										htmx.Div(
 											htmx.Merge(
 												htmx.ClassNames{

go.mod

@@ -4,6 +4,7 @@ go 1.23
 
 require (
 	github.com/ettle/strcase v0.2.0
+	github.com/go-playground/form/v4 v4.2.1
 	github.com/go-playground/validator/v10 v10.22.1
 	github.com/gofiber/fiber/v2 v2.52.5
 	github.com/google/uuid v1.6.0
@@ -17,7 +18,7 @@ require (
 	github.com/zeiss/fiber-authz v1.0.33
 	github.com/zeiss/fiber-goth v1.2.15
 	github.com/zeiss/fiber-reload v0.1.1
-	github.com/zeiss/pkg v0.1.17
+	github.com/zeiss/pkg v0.1.18-0.20241104221956-c2a72271b74b
 	gorm.io/gorm v1.25.12
 )
 

go.sum

@@ -23,8 +23,11 @@ github.com/go-openapi/jsonpointer v0.21.0 h1:YgdVicSA9vH5RiHs9TZW5oyafXZFc6+2Vc1
 github.com/go-openapi/jsonpointer v0.21.0/go.mod h1:IUyH9l/+uyhIYQ/PXVA41Rexl+kOkAPDdXEYns6fzUY=
 github.com/go-openapi/swag v0.23.0 h1:vsEVJDUo2hPJ2tu0/Xc+4noaxyEffXNIs3cOULZ+GrE=
 github.com/go-openapi/swag v0.23.0/go.mod h1:esZ8ITTYEsH1V2trKHjAN8Ai7xHb8RV+YSZ577vPjgQ=
+github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
+github.com/go-playground/form/v4 v4.2.1 h1:HjdRDKO0fftVMU5epjPW2SOREcZ6/wLUzEobqUGJuPw=
+github.com/go-playground/form/v4 v4.2.1/go.mod h1:q1a2BY+AQUUzhl6xA/6hBetay6dEIhMHjgvJiGo6K7U=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
@@ -143,6 +146,8 @@ github.com/zeiss/fiber-reload v0.1.1 h1:ozSpAjXfCkHa4x2y+lY4cqBWiQ9ORbECMBsMruMe
 github.com/zeiss/fiber-reload v0.1.1/go.mod h1:n8KLvNS6qbfcmQhgHhUNrOfEkiQWxscweIvBBsHy2XI=
 github.com/zeiss/pkg v0.1.17 h1:rDvBtaRUSD1ypeu66R3UHMtEphPSBaZ52484BQtPEVI=
 github.com/zeiss/pkg v0.1.17/go.mod h1:2k/MCcM0p8KiHJMdUG3Rnx90pE7UfzaGd0GIXm6V7/8=
+github.com/zeiss/pkg v0.1.18-0.20241104221956-c2a72271b74b h1:NNrJRp+x1pOSwuwv7kdMBIwN6cIYiu4wWA7bD+VE3js=
+github.com/zeiss/pkg v0.1.18-0.20241104221956-c2a72271b74b/go.mod h1:rELEGr/y1hKp6R/s1gQTRje/RLz3TmetTvXumPQN+8A=
 go.opentelemetry.io/otel v1.29.0 h1:PdomN/Al4q/lN6iBJEN3AwPvUiHPMlt93c8bqTG5Llw=
 go.opentelemetry.io/otel v1.29.0/go.mod h1:N/WtXPs1CNCUEx+Agz5uouwCba+i+bJGFicT8SR4NP8=
 go.opentelemetry.io/otel/metric v1.29.0 h1:vPf/HFWTNkPu1aYeIsc98l4ktOQaL6LeSoeV2g+8YLc=