chore: examples to the new api

indaco · Apr 30, 2024 · 86e55cd · 86e55cd
1 parent 738ce72
commit 86e55cd
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 105 deletions.
diff --git a/_examples/custom-animations/home.templ b/_examples/custom-animations/home.templ
@@ -2,7 +2,7 @@ package main
 
 import "github.com/indaco/gropdown"
 
-templ HomePage(dropdown *gropdown.DropdownBuilder) {
+templ HomePage() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -37,10 +37,20 @@ templ HomePage(dropdown *gropdown.DropdownBuilder) {
 		<body class="parent-container">
 			<div class="centered">
 				<!-- display the dropdown -->
-				@dropdown.Render()
+				@gropdown.Root("demo") {
+					@gropdown.Button("Menu")
+					@gropdown.Content() {
+						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
+						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+					}
+				}
 			</div>
 			<!-- inject dropdown javascript -->
-			@gropdown.GropdownJS(dropdown.Dropdown())
+			@gropdown.GropdownJS(gropdown.GetConfigMapFromContext(ctx))
 		</body>
 	</html>
 }
diff --git a/_examples/custom-animations/main.go b/_examples/custom-animations/main.go
@@ -1,25 +1,24 @@
 package main
 
 import (
+	"context"
 	"log"
 	"net/http"
 	"os"
 
-	"github.com/a-h/templ"
 	"github.com/indaco/gropdown"
 )
 
 func HandleHome(w http.ResponseWriter, r *http.Request) {
-	button := gropdown.DropdownButton{Label: "Menu"}
-	items := []gropdown.DropdownItem{
-		{Label: "Settings", Href: "/settings"},
-		{Label: "GitHub", Href: "https://github.com", External: true},
-		{Divider: true},
-		{Label: "Button", Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}},
-	}
-	dropdown := gropdown.NewDropdownBuilder().WithButton(button).WithItems(items)
+	config := gropdown.NewConfigBuilder().Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("demo", config)
 
-	templ.Handler(HomePage(dropdown)).ServeHTTP(w, r)
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
+	err := HomePage().Render(ctx, w)
+	if err != nil {
+		return
+	}
 }
 
 func main() {

diff --git a/_examples/custom-button-icon/home.templ b/_examples/custom-button-icon/home.templ
@@ -2,7 +2,11 @@ package main
 
 import "github.com/indaco/gropdown"
 
-templ HomePage(dropdown *gropdown.DropdownBuilder) {
+const buttonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
+</svg>`
+
+templ HomePage() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -24,10 +28,20 @@ templ HomePage(dropdown *gropdown.DropdownBuilder) {
 		<body class="parent-container">
 			<div class="centered">
 				<!-- display the dropdown -->
-				@dropdown.Render()
+				@gropdown.Root("demo") {
+					@gropdown.Button("Menu")
+					@gropdown.Content() {
+						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
+						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+					}
+				}
 			</div>
 			<!-- inject dropdown javascript -->
-			@gropdown.GropdownJS(dropdown.Dropdown())
+			@gropdown.GropdownJS(gropdown.GetConfigMapFromContext(ctx))
 		</body>
 	</html>
 }
diff --git a/_examples/custom-button-icon/main.go b/_examples/custom-button-icon/main.go
@@ -1,28 +1,24 @@
 package main
 
 import (
+	"context"
 	"log"
 	"net/http"
 	"os"
 
-	"github.com/a-h/templ"
 	"github.com/indaco/gropdown"
 )
 
 func HandleHome(w http.ResponseWriter, r *http.Request) {
-	buttonIcon := `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
-</svg>`
-	button := gropdown.DropdownButton{Label: "Menu", Icon: buttonIcon}
-	items := []gropdown.DropdownItem{
-		{Label: "Settings", Href: "/settings"},
-		{Label: "GitHub", Href: "https://github.com", External: true},
-		{Divider: true},
-		{Label: "Button", Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}},
-	}
-	dropdown := gropdown.NewDropdownBuilder().WithButton(button).WithItems(items)
+	config := gropdown.NewConfigBuilder().Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("demo", config)
 
-	templ.Handler(HomePage(dropdown)).ServeHTTP(w, r)
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
+	err := HomePage().Render(ctx, w)
+	if err != nil {
+		return
+	}
 }
 
 func main() {

diff --git a/_examples/go-html-template/demo.templ b/_examples/go-html-template/demo.templ
@@ -0,0 +1,37 @@
+package main
+
+import "github.com/indaco/gropdown"
+
+const (
+	profileIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>
+`
+	settingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
+</svg>
+`
+
+	globeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+</svg>`
+
+	clickIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" />
+</svg>
+`
+)
+
+templ GropdownDemo() {
+	@gropdown.Root("demo") {
+		@gropdown.Button("Menu")
+		@gropdown.Content() {
+			@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
+			@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+			@gropdown.Divider()
+			@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+			@gropdown.Divider()
+			@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+		}
+	}
+}
diff --git a/_examples/go-html-template/main.go b/_examples/go-html-template/main.go
@@ -1,12 +1,12 @@
 package main
 
 import (
+	"context"
 	"html/template"
 	"log"
 	"net/http"
 	"os"
 
-	"github.com/a-h/templ"
 	"github.com/indaco/gropdown"
 )
 
@@ -23,25 +23,30 @@ type DropdownComponent struct {
 
 // HandleHome is the handler function for the home page "/"
 func HandleHome(w http.ResponseWriter, r *http.Request) {
-	button := gropdown.DropdownButton{Label: "Menu"}
-	items := []gropdown.DropdownItem{
-		{Label: "Settings", Href: "/settings"},
-		{Label: "GitHub", Href: "https://github.com", External: true},
-		{Divider: true},
-		{Label: "Button", Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}},
-	}
-	dropdownBuilder := gropdown.NewDropdownBuilder().WithButton(button).WithItems(items)
+	config := gropdown.NewConfigBuilder().Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("demo", config)
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
 
 	dropdownHTMLGenerator := gropdown.NewHTMLGenerator()
 
 	// Render the needed CSS for dropdown component as template.HTML
-	dropdownCSS, _ := dropdownHTMLGenerator.GropdownCSSToGoHTML()
+	dropdownCSS, err := dropdownHTMLGenerator.GropdownCSSToGoHTML()
+	if err != nil {
+		log.Printf("failed to render template: %v", err)
+	}
 
 	// Render the dropdown component into a template.HTML
-	dropdownHtml, err := dropdownHTMLGenerator.Render(dropdownBuilder)
+	dropdownHtml, err := dropdownHTMLGenerator.Render(ctx, GropdownDemo())
+	if err != nil {
+		log.Printf("failed to render template: %v", err)
+	}
 
 	// Render the needed JS for dropdown component as template.HTML
-	dropdownJS, _ := dropdownHTMLGenerator.GropdownJSToGoHTML(dropdownBuilder.Dropdown())
+	dropdownJS, err := dropdownHTMLGenerator.GropdownJSToGoHTML(configMap)
+	if err != nil {
+		log.Printf("failed to render template: %v", err)
+	}
 
 	data := PageData{
 		Dropdown: DropdownComponent{
@@ -69,13 +74,13 @@ func HandleHome(w http.ResponseWriter, r *http.Request) {
 					align-items: center;
 					height: 100vh;
 				}
-      </style>
+			</style>
 		</head>
 		<body class="parent-container">
-      <div class="centered">
-			  <!-- display the dropdown -->
-			  {{ .Dropdown.HTML }}
-      </div>
+			<div class="centered">
+				<!-- display the dropdown -->
+				{{ .Dropdown.HTML }}
+			</div>
 			<!-- inject dropdown javascript -->
 			{{ .Dropdown.JS }}
 		</body>

diff --git a/_examples/icon-only-button/home.templ b/_examples/icon-only-button/home.templ
@@ -2,7 +2,7 @@ package main
 
 import "github.com/indaco/gropdown"
 
-templ HomePage(dropdown *gropdown.DropdownBuilder) {
+templ HomePage() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -18,16 +18,26 @@ templ HomePage(dropdown *gropdown.DropdownBuilder) {
 					justify-content: center;
 					align-items: center;
 					height: 100vh;
-        }
-      </style>
+				}
+			</style>
 		</head>
 		<body class="parent-container">
 			<div class="centered">
 				<!-- display the dropdown -->
-				@dropdown.Render()
+				@gropdown.Root("demo") {
+					@gropdown.Button("")
+					@gropdown.Content() {
+						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
+						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+					}
+				}
 			</div>
 			<!-- inject dropdown javascript -->
-			@gropdown.GropdownJS(dropdown.Dropdown())
+			@gropdown.GropdownJS(gropdown.GetConfigMapFromContext(ctx))
 		</body>
 	</html>
 }
diff --git a/_examples/icon-only-button/main.go b/_examples/icon-only-button/main.go
@@ -1,25 +1,24 @@
 package main
 
 import (
+	"context"
 	"log"
 	"net/http"
 	"os"
 
-	"github.com/a-h/templ"
 	"github.com/indaco/gropdown"
 )
 
 func HandleHome(w http.ResponseWriter, r *http.Request) {
-	button := gropdown.DropdownButton{}
-	items := []gropdown.DropdownItem{
-		{Label: "Settings", Href: "/settings"},
-		{Label: "GitHub", Href: "https://github.com", External: true},
-		{Divider: true},
-		{Label: "Button", Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}},
-	}
-	dropdown := gropdown.NewDropdownBuilder().WithButton(button).WithItems(items)
+	config := gropdown.NewConfigBuilder().WithPosition(gropdown.Right).Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("demo", config)
 
-	templ.Handler(HomePage(dropdown)).ServeHTTP(w, r)
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
+	err := HomePage().Render(ctx, w)
+	if err != nil {
+		return
+	}
 }
 
 func main() {

diff --git a/_examples/positioning/home.templ b/_examples/positioning/home.templ
@@ -2,7 +2,7 @@ package main
 
 import "github.com/indaco/gropdown"
 
-templ HomePage(dropdown *gropdown.DropdownBuilder) {
+templ HomePage() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -24,10 +24,20 @@ templ HomePage(dropdown *gropdown.DropdownBuilder) {
 		<body class="parent-container">
 			<div class="centered">
 				<!-- display the dropdown -->
-				@dropdown.Render()
+				@gropdown.Root("demo") {
+					@gropdown.Button("Menu")
+					@gropdown.Content() {
+						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
+						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Divider()
+						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+					}
+				}
 			</div>
 			<!-- inject dropdown javascript -->
-			@gropdown.GropdownJS(dropdown.Dropdown())
+			@gropdown.GropdownJS(gropdown.GetConfigMapFromContext(ctx))
 		</body>
 	</html>
 }
diff --git a/_examples/positioning/main.go b/_examples/positioning/main.go
@@ -1,28 +1,24 @@
 package main
 
 import (
+	"context"
 	"log"
 	"net/http"
 	"os"
 
-	"github.com/a-h/templ"
 	"github.com/indaco/gropdown"
 )
 
 func HandleHome(w http.ResponseWriter, r *http.Request) {
-	button := gropdown.DropdownButton{Label: "Menu"}
-	items := []gropdown.DropdownItem{
-		{Label: "Settings", Href: "/settings"},
-		{Label: "GitHub", Href: "https://github.com", External: true},
-		{Divider: true},
-		{Label: "Button", Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}},
-	}
-	dropdown := gropdown.NewDropdownBuilder().
-		SetPosition(gropdown.Right).
-		WithButton(button).
-		WithItems(items)
+	config := gropdown.NewConfigBuilder().WithPosition(gropdown.Right).Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("demo", config)
 
-	templ.Handler(HomePage(dropdown)).ServeHTTP(w, r)
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
+	err := HomePage().Render(ctx, w)
+	if err != nil {
+		return
+	}
 }
 
 func main() {