Merge branch 'dev' into preview

2025-02-21 00:32:58 +00:00 · 2024-12-06 20:14:15 +07:00 · 2024-12-06 20:14:15 +07:00 · 93822855dd
commit 93822855dd
parent 8253b061c7 dd47813fd3
12 changed files with 243 additions and 85 deletions
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@ -34,8 +34,10 @@ func main() {
 	mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
 	mux.Handle("GET /docs/components/datepicker", templ.Handler(pages.Datepicker()))
 	mux.Handle("GET /docs/components/dropdown-menu", templ.Handler(pages.DropdownMenu()))
+	mux.Handle("GET /docs/components/form", templ.Handler(pages.Form()))
 	mux.Handle("GET /docs/components/icon", templ.Handler(pages.Icon()))
 	mux.Handle("GET /docs/components/input", templ.Handler(pages.Input()))
+	mux.Handle("GET /docs/components/label", templ.Handler(pages.Label()))
 	mux.Handle("GET /docs/components/modal", templ.Handler(pages.Modal()))
 	mux.Handle("GET /docs/components/radio", templ.Handler(pages.Radio()))
 	mux.Handle("GET /docs/components/select", templ.Handler(pages.Select()))
--- a/internals/shared/menudata.go
+++ b/internals/shared/menudata.go
@ -65,6 +65,10 @@ var Sections = []Section{
 				Text: "Dropdown Menu",
 				Href: "/docs/components/dropdown-menu",
 			},
+			{
+				Text: "Form",
+				Href: "/docs/components/form",
+			},
 			{
 				Text: "Icon",
 				Href: "/docs/components/icon",
@ -73,6 +77,10 @@ var Sections = []Section{
 				Text: "Input",
 				Href: "/docs/components/input",
 			},
+			{
+				Text: "Label",
+				Href: "/docs/components/label",
+			},
 			{
 				Text: "Modal",
 				Href: "/docs/components/modal",
--- a/internals/ui/pages/checkbox.templ
+++ b/internals/ui/pages/checkbox.templ
@ -24,12 +24,14 @@ templ Checkbox() {
 				PreviewCodeFile:   "checkbox_checked.templ",
 				ComponentCodeFile: "checkbox.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.CheckboxWithLabel(),
-				PreviewCodeFile:   "checkbox_with_label.templ",
-				ComponentCodeFile: "checkbox.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.CheckboxWithLabel(),
+					PreviewCodeFile:   "checkbox_with_label.templ",
+					ComponentCodeFile: "checkbox.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.CheckboxDisabled(),
@ -42,12 +44,14 @@ templ Checkbox() {
 				PreviewCodeFile:   "checkbox_custom_icon.templ",
 				ComponentCodeFile: "checkbox.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.CheckboxForm(),
-				PreviewCodeFile:   "checkbox_form.templ",
-				ComponentCodeFile: "checkbox.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.CheckboxForm(),
+					PreviewCodeFile:   "checkbox_form.templ",
+					ComponentCodeFile: "checkbox.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/datepicker.templ
+++ b/internals/ui/pages/datepicker.templ
@ -18,12 +18,14 @@ templ Datepicker() {
 				PreviewCodeFile:   "datepicker_default.templ",
 				ComponentCodeFile: "datepicker.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.DatepickerWithLabel(),
-				PreviewCodeFile:   "datepicker_with_label.templ",
-				ComponentCodeFile: "datepicker.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.DatepickerWithLabel(),
+					PreviewCodeFile:   "datepicker_with_label.templ",
+					ComponentCodeFile: "datepicker.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Custom Placeholder",
 				ShowcaseFile:      showcase.DatepickerCustomPlaceholder(),
@ -48,12 +50,14 @@ templ Datepicker() {
 				PreviewCodeFile:   "datepicker_formats.templ",
 				ComponentCodeFile: "datepicker.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.DatepickerForm(),
-				PreviewCodeFile:   "datepicker_form.templ",
-				ComponentCodeFile: "datepicker.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.DatepickerForm(),
+					PreviewCodeFile:   "datepicker_form.templ",
+					ComponentCodeFile: "datepicker.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/form.templ
+++ b/internals/ui/pages/form.templ
@ -0,0 +1,60 @@
+package pages
+
+import (
+	"github.com/axzilla/goilerplate/internals/ui/layouts"
+	"github.com/axzilla/goilerplate/internals/ui/modules"
+	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/goilerplate/pkg/components"
+)
+
+templ Form() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Form",
+			Description: templ.Raw("A collection of form components and helper utilities for building accessible forms."),
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:     "",
+				ShowcaseFile:    showcase.InputForm(),
+				PreviewCodeFile: "input_form.templ",
+			})
+			<div>
+				@components.Card(components.CardProps{}) {
+					@components.CardHeader() {
+						@components.CardTitle() {
+							Usage
+						}
+						@components.CardDescription() {
+							Form elements are composed using a set of helper components that enhance the following form controls:
+						}
+					}
+					@components.CardContent() {
+						<ul class="list-disc pl-6 space-y-2">
+							<li>
+								<a href="/docs/components/input#form" class="font-medium hover:underline">Input</a>
+							</li>
+							<li>
+								<a href="/docs/components/checkbox#form" class="font-medium hover:underline">Checkbox</a>
+							</li>
+							<li>
+								<a href="/docs/components/radio#form" class="font-medium hover:underline">Radio</a>
+							</li>
+							<li>
+								<a href="/docs/components/select#form" class="font-medium hover:underline">Select</a>
+							</li>
+							<li>
+								<a href="/docs/components/textarea#form" class="font-medium hover:underline">Textarea</a>
+							</li>
+							<li>
+								<a href="/docs/components/toggle#form" class="font-medium hover:underline">Toggle</a>
+							</li>
+							<li>
+								<a href="/docs/components/datepicker#form" class="font-medium hover:underline">Date Picker</a>
+							</li>
+						</ul>
+					}
+				}
+			</div>
+		}
+	}
+}
--- a/internals/ui/pages/input.templ
+++ b/internals/ui/pages/input.templ
@ -30,18 +30,22 @@ templ Input() {
 				PreviewCodeFile:   "input_disabled.templ",
 				ComponentCodeFile: "input.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.InputWithLabel(),
-				PreviewCodeFile:   "input_with_label.templ",
-				ComponentCodeFile: "input.templ",
-			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.InputForm(),
-				PreviewCodeFile:   "input_form.templ",
-				ComponentCodeFile: "input.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.InputWithLabel(),
+					PreviewCodeFile:   "input_with_label.templ",
+					ComponentCodeFile: "input.templ",
+				})
+			</div>
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.InputForm(),
+					PreviewCodeFile:   "input_form.templ",
+					ComponentCodeFile: "input.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/label.templ
+++ b/internals/ui/pages/label.templ
@ -0,0 +1,60 @@
+package pages
+
+import (
+	"github.com/axzilla/goilerplate/internals/ui/layouts"
+	"github.com/axzilla/goilerplate/internals/ui/modules"
+	"github.com/axzilla/goilerplate/internals/ui/showcase"
+	"github.com/axzilla/goilerplate/pkg/components"
+)
+
+templ Label() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Label",
+			Description: templ.Raw("Renders an accessible label associated with controls."),
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:     "",
+				ShowcaseFile:    showcase.CheckboxWithLabel(),
+				PreviewCodeFile: "checkbox_with_label.templ",
+			})
+			<div>
+				@components.Card(components.CardProps{}) {
+					@components.CardHeader() {
+						@components.CardTitle() {
+							Usage
+						}
+						@components.CardDescription() {
+							The Label component enhances the following form controls:
+						}
+					}
+					@components.CardContent() {
+						<ul class="list-disc pl-6 space-y-2">
+							<li>
+								<a href="/docs/components/input#label" class="font-medium hover:underline">Input</a>
+							</li>
+							<li>
+								<a href="/docs/components/checkbox#label" class="font-medium hover:underline">Checkbox</a>
+							</li>
+							<li>
+								<a href="/docs/components/radio#label" class="font-medium hover:underline">Radio</a>
+							</li>
+							<li>
+								<a href="/docs/components/select#label" class="font-medium hover:underline">Select</a>
+							</li>
+							<li>
+								<a href="/docs/components/textarea#label" class="font-medium hover:underline">Textarea</a>
+							</li>
+							<li>
+								<a href="/docs/components/toggle#label" class="font-medium hover:underline">Toggle</a>
+							</li>
+							<li>
+								<a href="/docs/components/datepicker#label" class="font-medium hover:underline">Date Picker</a>
+							</li>
+						</ul>
+					}
+				}
+			</div>
+		}
+	}
+}
--- a/internals/ui/pages/radio.templ
+++ b/internals/ui/pages/radio.templ
@ -24,24 +24,28 @@ templ Radio() {
 				PreviewCodeFile:   "radio_checked.templ",
 				ComponentCodeFile: "radio.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.RadioWithLabel(),
-				PreviewCodeFile:   "radio_with_label.templ",
-				ComponentCodeFile: "radio.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.RadioWithLabel(),
+					PreviewCodeFile:   "radio_with_label.templ",
+					ComponentCodeFile: "radio.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.RadioDisabled(),
 				PreviewCodeFile:   "radio_disabled.templ",
 				ComponentCodeFile: "radio.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.RadioForm(),
-				PreviewCodeFile:   "radio_form.templ",
-				ComponentCodeFile: "radio.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.RadioForm(),
+					PreviewCodeFile:   "radio_form.templ",
+					ComponentCodeFile: "radio.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/select.templ
+++ b/internals/ui/pages/select.templ
@ -30,24 +30,28 @@ templ Select() {
 				PreviewCodeFile:   "select_selected_value.templ",
 				ComponentCodeFile: "select.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.SelectWithLabel(),
-				PreviewCodeFile:   "select_with_label.templ",
-				ComponentCodeFile: "select.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.SelectWithLabel(),
+					PreviewCodeFile:   "select_with_label.templ",
+					ComponentCodeFile: "select.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.SelectDisabled(),
 				PreviewCodeFile:   "select_disabled.templ",
 				ComponentCodeFile: "select.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.SelectForm(),
-				PreviewCodeFile:   "select_form.templ",
-				ComponentCodeFile: "select.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.SelectForm(),
+					PreviewCodeFile:   "select_form.templ",
+					ComponentCodeFile: "select.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/textarea.templ
+++ b/internals/ui/pages/textarea.templ
@ -36,24 +36,28 @@ templ Textarea() {
 				PreviewCodeFile:   "textarea_auto_resize.templ",
 				ComponentCodeFile: "textarea.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.TextareaWithLabel(),
-				PreviewCodeFile:   "textarea_with_label.templ",
-				ComponentCodeFile: "textarea.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.TextareaWithLabel(),
+					PreviewCodeFile:   "textarea_with_label.templ",
+					ComponentCodeFile: "textarea.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.TextareaDisabled(),
 				PreviewCodeFile:   "textarea_disabled.templ",
 				ComponentCodeFile: "textarea.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.TextareaForm(),
-				PreviewCodeFile:   "textarea_form.templ",
-				ComponentCodeFile: "textarea.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.TextareaForm(),
+					PreviewCodeFile:   "textarea_form.templ",
+					ComponentCodeFile: "textarea.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/pages/toggle.templ
+++ b/internals/ui/pages/toggle.templ
@ -24,24 +24,28 @@ templ Toggle() {
 				PreviewCodeFile:   "toggle_checked.templ",
 				ComponentCodeFile: "toggle.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "With Label",
-				ShowcaseFile:      showcase.ToggleWithLabel(),
-				PreviewCodeFile:   "toggle_with_label.templ",
-				ComponentCodeFile: "toggle.templ",
-			})
+			<div id="label">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.ToggleWithLabel(),
+					PreviewCodeFile:   "toggle_with_label.templ",
+					ComponentCodeFile: "toggle.templ",
+				})
+			</div>
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
 				SectionName:       "Disabled",
 				ShowcaseFile:      showcase.ToggleDisabled(),
 				PreviewCodeFile:   "toggle_disabled.templ",
 				ComponentCodeFile: "toggle.templ",
 			})
-			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "Form",
-				ShowcaseFile:      showcase.ToggleForm(),
-				PreviewCodeFile:   "toggle_form.templ",
-				ComponentCodeFile: "toggle.templ",
-			})
+			<div id="form">
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Form",
+					ShowcaseFile:      showcase.ToggleForm(),
+					PreviewCodeFile:   "toggle_form.templ",
+					ComponentCodeFile: "toggle.templ",
+				})
+			</div>
 		}
 	}
 }
--- a/internals/ui/showcase/input_form.templ
+++ b/internals/ui/showcase/input_form.templ
@ -18,7 +18,7 @@ templ InputForm() {
 				Disabled:    true,
 			})
 			@components.FormDescription(components.FormDescriptionProps{}) {
-				Enter your email address for notifications.			
+				Enter your email address for notifications.
 			}
 			@components.FormMessage(components.FormMessageProps{
 				Message: "Please enter a valid email address",