H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 00:32:58 +00:00
Code

feat: update component variants, sides and sizes for consistency

Browse Source
This commit is contained in:
axzilla 2024-11-27 14:21:15 +07:00
parent 42cf063537
commit 29e3221f02
16 changed files with 91 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
internals/ui/modules/navbar.templ
View File

@ -21,8 +21,7 @@ templ Navbar() {
<a href="/docs/components" class="text-sm hover:underline">Components</a>
</div>
<div class="flex items-center space-x-2">
@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Github(icons.IconProps{}), Variant: "ghost", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"})
@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Twitter(icons.IconProps{}), Variant: "ghost", Href: "https://x.com/_axzilla", Target: "_blank"})
@components.Button(components.ButtonProps{Size: components.ButtonSizeIcon, IconLeft: icons.Twitter(icons.IconProps{}), Variant: "ghost", Href: "https://x.com/_axzilla", Target: "_blank"})
@ThemeSwitcher()
</div>
</div>
@ -31,7 +30,7 @@ templ Navbar() {
templ NavbarMobileMenu() {
@components.SheetRoot() {
@components.Sheet(components.SheetProps{Side: components.Left}) {
@components.Sheet(components.SheetProps{Side: components.SheetSideLeft}) {
for _, section := range shared.Sections {
<div class="pb-4">
<h3 class="px-4 text-sm font-bold text-gray-600">{ section.Title }</h3>
@ -51,7 +50,7 @@ templ NavbarMobileMenu() {
</div>
}
}
@components.SheetTrigger(string(components.Left), components.Left) {
@components.SheetTrigger(string(components.SheetSideLeft), components.SheetSideLeft) {
<button
@click="sidebarOpen = !sidebarOpen"
class="mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"

4
internals/ui/modules/themeswitcher.templ
View File

@ -7,8 +7,8 @@ import (
templ ThemeSwitcher() {
@components.Button(components.ButtonProps{
Size: components.ButtonIcon,
Variant: components.Ghost,
Size: components.ButtonSizeIcon,
Variant: components.ButtonVariantGhost,
IconLeft: templ.Component(DynamicThemeIcon()),
Attributes: templ.Attributes{
"@click": "toggleTheme()",

2
internals/ui/showcase/alert_default.templ
View File

@ -7,7 +7,7 @@ import (
templ AlertDefault() {
<div class="w-full max-w-xl">
@components.Alert(components.AlertProps{Variant: components.DefaultAlert}) {
@components.Alert(components.AlertProps{Variant: components.AlertVariantDefault}) {
@icons.Rocket(icons.IconProps{Size: "16"})
@components.AlertTitle() {
Note

2
internals/ui/showcase/alert_destructive.templ
View File

@ -7,7 +7,7 @@ import (
templ AlertDestructive() {
<div class="w-full max-w-xl">
@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
@components.Alert(components.AlertProps{Variant: components.AlertVariantDestructive}) {
@icons.TriangleAlert(icons.IconProps{Size: "16"})
@components.AlertTitle() {
Error

6
internals/ui/showcase/button_sizes.templ
View File

@ -8,8 +8,8 @@ import (
templ ButtonSizes() {
<div class="flex flex-wrap items-center gap-2">
@components.Button(components.ButtonProps{Text: "Default"})
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm})
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg})
@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
@components.Button(components.ButtonProps{Text: "Small", Size: components.ButtonSizeSm})
@components.Button(components.ButtonProps{Text: "Large", Size: components.ButtonSizeLg})
@components.Button(components.ButtonProps{Size: components.ButtonSizeIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
</div>
}

10
internals/ui/showcase/button_variants.templ
View File

@ -5,10 +5,10 @@ import "github.com/axzilla/goilerplate/pkg/components"
templ ButtonVariants() {
<div class="flex flex-wrap gap-2">
@components.Button(components.ButtonProps{Text: "Default"})
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary})
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive})
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline})
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost})
@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link})
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.ButtonVariantSecondary})
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.ButtonVariantDestructive})
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.ButtonVariantOutline})
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.ButtonVariantGhost})
@components.Button(components.ButtonProps{Text: "Link", Variant: components.ButtonVariantLink})
</div>
}

2
internals/ui/showcase/modal.templ
View File

@ -25,7 +25,7 @@ templ ModalShowcase() {
@components.ModalClose("default-modal") {
@components.Button(components.ButtonProps{
Text: "Continue",
Variant: components.Secondary,
Variant: components.ButtonVariantSecondary,
})
}
</div>

8
internals/ui/showcase/sheet.templ
View File

@ -3,10 +3,10 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
var sides = []components.SheetSide{
components.Left,
components.Top,
components.Right,
components.Bottom,
components.SheetSideLeft,
components.SheetSideTop,
components.SheetSideRight,
components.SheetSideBottom,
}
templ SheetShowcase() {

6
pkg/components/alert.templ
View File

@ -7,10 +7,10 @@ type AlertVariant string
const (
// DefaultAlert shows standard informational styling
DefaultAlert AlertVariant = "default"
AlertVariantDefault AlertVariant = "default"
// DestructiveAlert shows error/warning styling
DestructiveAlert AlertVariant = "destructive"
AlertVariantDestructive AlertVariant = "destructive"
)
type AlertProps struct {
@ -24,7 +24,7 @@ type AlertProps struct {
// getAlertVariantClasses maps variants to their CSS classes
func getAlertVariantClasses(variant AlertVariant) string {
switch variant {
case DestructiveAlert:
case AlertVariantDestructive:
return "border-destructive text-destructive"
default:
return "border-border text-foreground"

6
pkg/components/alert_templ.go
View File

@ -15,10 +15,10 @@ type AlertVariant string
const (
// DefaultAlert shows standard informational styling
DefaultAlert AlertVariant = "default"
AlertVariantDefault AlertVariant = "default"
// DestructiveAlert shows error/warning styling
DestructiveAlert AlertVariant = "destructive"
AlertVariantDestructive AlertVariant = "destructive"
)
type AlertProps struct {
@ -32,7 +32,7 @@ type AlertProps struct {
// getAlertVariantClasses maps variants to their CSS classes
func getAlertVariantClasses(variant AlertVariant) string {
switch variant {
case DestructiveAlert:
case AlertVariantDestructive:
return "border-destructive text-destructive"
default:
return "border-border text-foreground"

36
pkg/components/button.templ
View File

@ -13,18 +13,18 @@ type ButtonSize string
const (
// Button style variants
Default ButtonVariant = "default" // Primary action button
Destructive ButtonVariant = "destructive" // Dangerous/warning action
Outline ButtonVariant = "outline" // Bordered button
Secondary ButtonVariant = "secondary" // Less prominent action
Ghost ButtonVariant = "ghost" // Minimal styling
Link ButtonVariant = "link" // Appears as a text link
ButtonVariantDefault ButtonVariant = "default" // Primary action button
ButtonVariantDestructive ButtonVariant = "destructive" // Dangerous/warning action
ButtonVariantOutline ButtonVariant = "outline" // Bordered button
ButtonVariantSecondary ButtonVariant = "secondary" // Less prominent action
ButtonVariantGhost ButtonVariant = "ghost" // Minimal styling
ButtonVariantLink ButtonVariant = "link" // Appears as a text link
// Button sizes
Md ButtonSize = "md" // Standard size
Sm ButtonSize = "sm" // Compact size
Lg ButtonSize = "lg" // Large size
ButtonIcon ButtonSize = "icon" // Square icon button
ButtonSizeMd ButtonSize = "md" // Standard size
ButtonSizeSm ButtonSize = "sm" // Compact size
ButtonSizeLg ButtonSize = "lg" // Large size
ButtonSizeIcon ButtonSize = "icon" // Square icon button
)
type ButtonProps struct {
@ -68,15 +68,15 @@ type ButtonProps struct {
// variantClasses maps variants to their CSS classes
func (b ButtonProps) variantClasses() string {
switch b.Variant {
case Destructive:
case ButtonVariantDestructive:
return "bg-destructive text-destructive-foreground hover:bg-destructive/90"
case Outline:
case ButtonVariantOutline:
return "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
case Secondary:
case ButtonVariantSecondary:
return "bg-secondary text-secondary-foreground hover:bg-secondary/80"
case Ghost:
case ButtonVariantGhost:
return "hover:bg-accent hover:text-accent-foreground"
case Link:
case ButtonVariantLink:
return "text-primary underline-offset-4 hover:underline"
default:
return "bg-primary text-primary-foreground hover:bg-primary/90"
@ -86,11 +86,11 @@ func (b ButtonProps) variantClasses() string {
// sizeClasses maps sizes to their CSS classes
func (b ButtonProps) sizeClasses() string {
switch b.Size {
case Sm:
case ButtonSizeSm:
return "h-9 px-3 rounded-md"
case Lg:
case ButtonSizeLg:
return "h-11 px-8 rounded-md"
case ButtonIcon:
case ButtonSizeIcon:
return "h-10 w-10"
default:
return "h-10 px-4 py-2 rounded-md"

36
pkg/components/button_templ.go
View File

@ -21,18 +21,18 @@ type ButtonSize string
const (
// Button style variants
Default ButtonVariant = "default" // Primary action button
Destructive ButtonVariant = "destructive" // Dangerous/warning action
Outline ButtonVariant = "outline" // Bordered button
Secondary ButtonVariant = "secondary" // Less prominent action
Ghost ButtonVariant = "ghost" // Minimal styling
Link ButtonVariant = "link" // Appears as a text link
ButtonVariantDefault ButtonVariant = "default" // Primary action button
ButtonVariantDestructive ButtonVariant = "destructive" // Dangerous/warning action
ButtonVariantOutline ButtonVariant = "outline" // Bordered button
ButtonVariantSecondary ButtonVariant = "secondary" // Less prominent action
ButtonVariantGhost ButtonVariant = "ghost" // Minimal styling
ButtonVariantLink ButtonVariant = "link" // Appears as a text link
// Button sizes
Md ButtonSize = "md" // Standard size
Sm ButtonSize = "sm" // Compact size
Lg ButtonSize = "lg" // Large size
ButtonIcon ButtonSize = "icon" // Square icon button
ButtonSizeMd ButtonSize = "md" // Standard size
ButtonSizeSm ButtonSize = "sm" // Compact size
ButtonSizeLg ButtonSize = "lg" // Large size
ButtonSizeIcon ButtonSize = "icon" // Square icon button
)
type ButtonProps struct {
@ -76,15 +76,15 @@ type ButtonProps struct {
// variantClasses maps variants to their CSS classes
func (b ButtonProps) variantClasses() string {
switch b.Variant {
case Destructive:
case ButtonVariantDestructive:
return "bg-destructive text-destructive-foreground hover:bg-destructive/90"
case Outline:
case ButtonVariantOutline:
return "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
case Secondary:
case ButtonVariantSecondary:
return "bg-secondary text-secondary-foreground hover:bg-secondary/80"
case Ghost:
case ButtonVariantGhost:
return "hover:bg-accent hover:text-accent-foreground"
case Link:
case ButtonVariantLink:
return "text-primary underline-offset-4 hover:underline"
default:
return "bg-primary text-primary-foreground hover:bg-primary/90"
@ -94,11 +94,11 @@ func (b ButtonProps) variantClasses() string {
// sizeClasses maps sizes to their CSS classes
func (b ButtonProps) sizeClasses() string {
switch b.Size {
case Sm:
case ButtonSizeSm:
return "h-9 px-3 rounded-md"
case Lg:
case ButtonSizeLg:
return "h-11 px-8 rounded-md"
case ButtonIcon:
case ButtonSizeIcon:
return "h-10 w-10"
default:
return "h-10 px-4 py-2 rounded-md"

24
pkg/components/sheet.templ
View File

@ -5,10 +5,10 @@ type SheetSide string
const (
// Sheet appearance directions
Top SheetSide = "top" // Slides down from top
Right SheetSide = "right" // Slides in from right
Bottom SheetSide = "bottom" // Slides up from bottom
Left SheetSide = "left" // Slides in from left
SheetSideTop SheetSide = "top" // Slides down from top
SheetSideRight SheetSide = "right" // Slides in from right
SheetSideBottom SheetSide = "bottom" // Slides up from bottom
SheetSideLeft SheetSide = "left" // Slides in from left
)
type SheetProps struct {
@ -82,25 +82,25 @@ templ Sheet(props SheetProps) {
}"
x-transition:enter="transition ease-out duration-300"
x-transition:leave="transition ease-in duration-300"
if props.Side == Left {
if props.Side == SheetSideLeft {
x-transition:enter-start="opacity-0 transform -translate-x-full"
x-transition:enter-end="opacity-100 transform translate-x-0"
x-transition:leave-start="opacity-100 transform translate-x-0"
x-transition:leave-end="opacity-0 transform -translate-x-full"
}
if props.Side == Right {
if props.Side == SheetSideRight {
x-transition:enter-start="opacity-0 transform translate-x-full"
x-transition:enter-end="opacity-100 transform translate-x-0"
x-transition:leave-start="opacity-100 transform translate-x-0"
x-transition:leave-end="opacity-0 transform translate-x-full"
}
if props.Side == Top {
if props.Side == SheetSideTop {
x-transition:enter-start="opacity-0 transform -translate-y-full"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-full"
}
if props.Side == Bottom {
if props.Side == SheetSideBottom {
x-transition:enter-start="opacity-0 transform translate-y-full"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave-start="opacity-100 transform translate-y-0"
@ -109,10 +109,10 @@ templ Sheet(props SheetProps) {
>
<div
class={ "h-full overflow-y-auto bg-background p-6 shadow-lg",
templ.KV("border-l", props.Side == Right),
templ.KV("border-r", props.Side == Left),
templ.KV("border-t", props.Side == Bottom),
templ.KV("border-b", props.Side == Top) }
templ.KV("border-l", props.Side == SheetSideRight),
templ.KV("border-r", props.Side == SheetSideLeft),
templ.KV("border-t", props.Side == SheetSideBottom),
templ.KV("border-b", props.Side == SheetSideTop) }
>
<div class="flex flex-col space-y-2">
<h2 class="text-lg font-semibold">{ props.Title }</h2>

24
pkg/components/sheet_templ.go
View File

@ -13,10 +13,10 @@ type SheetSide string
const (
// Sheet appearance directions
Top SheetSide = "top" // Slides down from top
Right SheetSide = "right" // Slides in from right
Bottom SheetSide = "bottom" // Slides up from bottom
Left SheetSide = "left" // Slides in from left
SheetSideTop SheetSide = "top" // Slides down from top
SheetSideRight SheetSide = "right" // Slides in from right
SheetSideBottom SheetSide = "bottom" // Slides up from bottom
SheetSideLeft SheetSide = "left" // Slides in from left
)
type SheetProps struct {
@ -108,25 +108,25 @@ func Sheet(props SheetProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if props.Side == Left {
if props.Side == SheetSideLeft {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" x-transition:enter-start=\"opacity-0 transform -translate-x-full\" x-transition:enter-end=\"opacity-100 transform translate-x-0\" x-transition:leave-start=\"opacity-100 transform translate-x-0\" x-transition:leave-end=\"opacity-0 transform -translate-x-full\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Side == Right {
if props.Side == SheetSideRight {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" x-transition:enter-start=\"opacity-0 transform translate-x-full\" x-transition:enter-end=\"opacity-100 transform translate-x-0\" x-transition:leave-start=\"opacity-100 transform translate-x-0\" x-transition:leave-end=\"opacity-0 transform translate-x-full\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Side == Top {
if props.Side == SheetSideTop {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" x-transition:enter-start=\"opacity-0 transform -translate-y-full\" x-transition:enter-end=\"opacity-100 transform translate-y-0\" x-transition:leave-start=\"opacity-100 transform translate-y-0\" x-transition:leave-end=\"opacity-0 transform -translate-y-full\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if props.Side == Bottom {
if props.Side == SheetSideBottom {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" x-transition:enter-start=\"opacity-0 transform translate-y-full\" x-transition:enter-end=\"opacity-100 transform translate-y-0\" x-transition:leave-start=\"opacity-100 transform translate-y-0\" x-transition:leave-end=\"opacity-0 transform translate-y-full\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -137,10 +137,10 @@ func Sheet(props SheetProps) templ.Component {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 = []any{"h-full overflow-y-auto bg-background p-6 shadow-lg",
templ.KV("border-l", props.Side == Right),
templ.KV("border-r", props.Side == Left),
templ.KV("border-t", props.Side == Bottom),
templ.KV("border-b", props.Side == Top)}
templ.KV("border-l", props.Side == SheetSideRight),
templ.KV("border-r", props.Side == SheetSideLeft),
templ.KV("border-t", props.Side == SheetSideBottom),
templ.KV("border-b", props.Side == SheetSideTop)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err

6
pkg/components/toggle.templ
View File

@ -1,11 +1,5 @@
package components
// / ToggleSize defines the available toggle dimensions
type ToggleSize string
// ToggleLabelPlacement defines label position options
type ToggleLabelPlacement string
type ToggleProps struct {
// ID uniquely identifies the toggle
ID string

16
pkg/components/toggle_templ.go
View File

@ -8,12 +8,6 @@ package components
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
// / ToggleSize defines the available toggle dimensions
type ToggleSize string
// ToggleLabelPlacement defines label position options
type ToggleLabelPlacement string
type ToggleProps struct {
// ID uniquely identifies the toggle
ID string
@ -79,7 +73,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 47, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 41, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@ -92,7 +86,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 49, Col: 16}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 43, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -105,7 +99,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 51, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 45, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -131,7 +125,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.LabelLeft)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 58, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 52, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -154,7 +148,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.LabelRight)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 67, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 61, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {