Migrate ticked templates to ui components

Author: adrianpk

examples/ticked/assets/templates/admin/events.html

@@ -28,9 +28,9 @@ <h1>Audit Events</h1>
             {{range .Events}}
             <div class="event-row">
                 <span class="event-time">{{.CreatedAt.Format "15:04:05"}}</span>
-                <span class="event-type"><span class="badge badge-event">{{.EventType}}</span></span>
+                <span class="event-type">{{with chip .EventType}}{{.Render}}{{end}}</span>
                 <span class="event-item-id" title="{{.ItemID}}">{{if .ItemID}}{{.ItemID}}{{else}}-{{end}}</span>
-                <span class="event-source"><span class="badge badge-role">{{.Source}}</span></span>
+                <span class="event-source">{{with chip .Source}}{{with .Info}}{{.Render}}{{end}}{{end}}</span>
             </div>
             {{else}}
             <div class="empty-state">No events recorded yet.</div>

examples/ticked/assets/templates/admin/user.html

@@ -37,17 +37,17 @@ <h1>User Details</h1>
                 <span class="detail-label">Status:</span>
                 <span class="detail-value">
                     {{if .User.Active}}
-                    <span class="badge badge-active">Active</span>
+                    {{with chip "Active"}}{{with .Success}}{{.Render}}{{end}}{{end}}
                     {{else}}
-                    <span class="badge badge-inactive">Inactive</span>
+                    {{with chip "Inactive"}}{{with .Danger}}{{.Render}}{{end}}{{end}}
                     {{end}}
                 </span>
             </div>
             <div class="detail-row">
                 <span class="detail-label">Roles:</span>
                 <span class="detail-value">
                     {{if .User.Roles}}
-                        {{range .User.Roles}}<span class="badge badge-role">{{.}}</span> {{end}}
+                        {{range .User.Roles}}{{with chip .}}{{with .Info}}{{.Render}}{{end}}{{end}} {{end}}
                     {{else}}
                         <span class="text-muted">No roles assigned</span>
                     {{end}}
@@ -67,16 +67,16 @@ <h2>Manage Roles</h2>
                     <label for="roles">Roles (comma-separated):</label>
                     <input type="text" id="roles" name="roles" value="{{.RolesString}}" placeholder="admin, user">
                 </div>
-                <button type="submit" class="btn-primary">Update Roles</button>
+                {{with btnSubmit "Update Roles"}}{{with .Primary}}{{.Render}}{{end}}{{end}}
             </form>
 
             <h2>Account Status</h2>
             <form hx-post="/admin/toggle-user" hx-target="body" hx-swap="innerHTML">
                 <input type="hidden" name="id" value="{{.User.ID}}">
                 {{if .User.Active}}
-                <button type="submit" class="btn-danger">Deactivate User</button>
+                {{with btnSubmit "Deactivate User"}}{{with .Danger}}{{.Render}}{{end}}{{end}}
                 {{else}}
-                <button type="submit" class="btn-success">Activate User</button>
+                {{with btnSubmit "Activate User"}}{{with .Success}}{{.Render}}{{end}}{{end}}
                 {{end}}
             </form>
         </div>

examples/ticked/assets/templates/todos/list.html

@@ -30,7 +30,7 @@ <h1>My Todo List</h1>
               hx-on::after-request="this.reset()"
               class="add-form">
             <input type="text" name="text" placeholder="What needs to be done?" required autofocus maxlength="500">
-            <button type="submit" class="btn-primary">Add</button>
+            {{with btnSubmit "Add"}}{{with .Primary}}{{.Render}}{{end}}{{end}}
         </form>
 
         <div id="items-list" class="items-list">

examples/ticked/internal/web/handler_test.go

@@ -14,7 +14,7 @@ import (
 	"github.com/hatmaxkit/hatmax/auth"
 	"github.com/hatmaxkit/hatmax/examples/ticked/internal/feat/audit"
 	"github.com/hatmaxkit/hatmax/examples/ticked/internal/feat/list"
-	"github.com/hatmaxkit/hatmax/kit"
+	"github.com/hatmaxkit/hatmax/ui"
 	"github.com/hatmaxkit/hatmax/log"
 	"github.com/hatmaxkit/hatmax/web"
 )
@@ -41,7 +41,7 @@ func (f *fakeAuditStore) List(ctx context.Context, limit int) ([]audit.Record, e
 
 func TestHandlerRegisterRoutes(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 
 	h := &Handler{
 		tmpl: tmplMgr,
@@ -104,7 +104,7 @@ func TestHandleIndex(t *testing.T) {
 
 func TestHandleSigninForm(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -124,7 +124,7 @@ func TestHandleSigninForm(t *testing.T) {
 
 func TestHandleSignupForm(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -144,7 +144,7 @@ func TestHandleSignupForm(t *testing.T) {
 
 func TestHandleSignin_EmptyFields(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -183,7 +183,7 @@ func TestHandleSignin_EmptyFields(t *testing.T) {
 
 func TestHandleSignup_EmptyFields(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -264,7 +264,7 @@ func TestHandleListItems_NoUser(t *testing.T) {
 
 func TestHandleListItems_WithUser(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -339,7 +339,7 @@ func TestHandleAddItem_EmptyText(t *testing.T) {
 
 func TestHandleAddItem_Success(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -411,7 +411,7 @@ func TestHandleDeleteItem_NoUser(t *testing.T) {
 
 func TestHandleDashboard(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -435,7 +435,7 @@ func TestHandleDashboard(t *testing.T) {
 
 func TestHandleListUsers(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -483,7 +483,7 @@ func TestHandleGetUser_MissingID(t *testing.T) {
 
 func TestHandleGetUser_Success(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{
@@ -604,7 +604,7 @@ func TestHandleToggleUser_SelfDeactivate(t *testing.T) {
 
 func TestHandleListEvents(t *testing.T) {
 	logger := log.NewTestLogger("error")
-	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(testAssetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	tmplMgr.Start(context.Background())
 
 	h := &Handler{

examples/ticked/main.go

@@ -17,7 +17,7 @@ import (
 	authfeat "github.com/hatmaxkit/hatmax/examples/ticked/internal/feat/auth"
 	listfeat "github.com/hatmaxkit/hatmax/examples/ticked/internal/feat/list"
 	tickedweb "github.com/hatmaxkit/hatmax/examples/ticked/internal/web"
-	"github.com/hatmaxkit/hatmax/kit"
+	"github.com/hatmaxkit/hatmax/ui"
 	"github.com/hatmaxkit/hatmax/log"
 	"github.com/hatmaxkit/hatmax/middleware"
 	"github.com/hatmaxkit/hatmax/pubsub/postgres"
@@ -50,7 +50,7 @@ func main() {
 
 	database := db.New(assetsFS, "postgres", cfg, logger)
 	migrator := db.NewMigrator(database, assetsFS, "postgres", logger)
-	tmplMgr := web.NewTemplateManager(assetsFS, logger, web.WithFuncMap(kit.FuncMap()))
+	tmplMgr := web.NewTemplateManager(assetsFS, logger, web.WithFuncMap(ui.FuncMap()))
 	broker := postgres.NewBroker(database, postgres.DefaultConfig(), logger)
 
 	auditStore := auditfeat.NewPostgresStore(database)