From 42cf063537a4e57395af415c076a2cd5b0ab9b2d Mon Sep 17 00:00:00 2001 From: axzilla Date: Tue, 26 Nov 2024 17:26:54 +0700 Subject: [PATCH] refactor: Make showcase code more modular - Restructure parts of showcase code - Update documentation on alert, accordion, avatar and button --- internals/ui/modules/example_wrapper.templ | 50 ++++++++++++++++ internals/ui/modules/page_wrapper.templ | 16 +++++ internals/ui/pages/accordion.templ | 37 ++++-------- internals/ui/pages/alert.templ | 43 +++++--------- internals/ui/pages/avatar.templ | 49 +++++++-------- internals/ui/pages/button.templ | 55 ++++++++--------- internals/ui/showcase/accordion.templ | 42 +++++++------ internals/ui/showcase/alert.templ | 41 ------------- internals/ui/showcase/alert_default.templ | 20 +++++++ internals/ui/showcase/alert_destructive.templ | 20 +++++++ internals/ui/showcase/avatar.templ | 50 ---------------- internals/ui/showcase/avatar_with_image.templ | 11 ++++ .../ui/showcase/avatar_with_placeholder.templ | 9 +++ internals/ui/showcase/avatar_with_sizes.templ | 25 ++++++++ internals/ui/showcase/button.templ | 59 ------------------- internals/ui/showcase/button_icons.templ | 19 ++++++ internals/ui/showcase/button_sizes.templ | 15 +++++ internals/ui/showcase/button_states.templ | 16 +++++ internals/ui/showcase/button_variants.templ | 14 +++++ pkg/components/accordion_templ.go | 2 +- pkg/components/alert_templ.go | 2 +- pkg/components/avatar_templ.go | 2 +- pkg/components/button_templ.go | 2 +- pkg/components/card_templ.go | 2 +- pkg/components/checkbox_templ.go | 2 +- pkg/components/datepicker_templ.go | 2 +- pkg/components/dropdown_menu_templ.go | 2 +- pkg/components/input_templ.go | 2 +- pkg/components/modal_templ.go | 2 +- pkg/components/radio_group_templ.go | 2 +- pkg/components/select_templ.go | 2 +- pkg/components/sheet_templ.go | 2 +- pkg/components/slider_templ.go | 2 +- pkg/components/tabs_templ.go | 2 +- pkg/components/textarea_templ.go | 2 +- pkg/components/toggle_templ.go | 2 +- 36 files changed, 328 insertions(+), 297 deletions(-) create mode 100644 internals/ui/modules/example_wrapper.templ create mode 100644 internals/ui/modules/page_wrapper.templ delete mode 100644 internals/ui/showcase/alert.templ create mode 100644 internals/ui/showcase/alert_default.templ create mode 100644 internals/ui/showcase/alert_destructive.templ delete mode 100644 internals/ui/showcase/avatar.templ create mode 100644 internals/ui/showcase/avatar_with_image.templ create mode 100644 internals/ui/showcase/avatar_with_placeholder.templ create mode 100644 internals/ui/showcase/avatar_with_sizes.templ delete mode 100644 internals/ui/showcase/button.templ create mode 100644 internals/ui/showcase/button_icons.templ create mode 100644 internals/ui/showcase/button_sizes.templ create mode 100644 internals/ui/showcase/button_states.templ create mode 100644 internals/ui/showcase/button_variants.templ diff --git a/internals/ui/modules/example_wrapper.templ b/internals/ui/modules/example_wrapper.templ new file mode 100644 index 0000000..53f063a --- /dev/null +++ b/internals/ui/modules/example_wrapper.templ @@ -0,0 +1,50 @@ +package modules + +import ( + "github.com/axzilla/goilerplate/internals/ui/showcase" + "github.com/axzilla/goilerplate/pkg/components" +) + +type showcaseWrapperProps struct { + Content templ.Component +} + +templ showcaseWrapper(p showcaseWrapperProps) { +
+ @p.Content +
+} + +type ExampleWrapperProps struct { + SectionName string + ShowcaseFile templ.Component + PreviewCodeFile string + ComponentCodeFile string +} + +templ ExampleWrapper(p ExampleWrapperProps) { +
+

{ p.SectionName }

+ @components.Tabs(components.TabsProps{ + Tabs: []components.Tab{ + { + ID: "preview", + Title: "Preview", + Content: showcaseWrapper(showcaseWrapperProps{Content: p.ShowcaseFile}), + }, + { + ID: "code", + Title: "Code", + Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "go", showcase.TemplFiles), + }, + { + ID: "component", + Title: "Component", + Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "go", components.TemplFiles), + }, + }, + TabsContainerClass: "md:w-1/2", + ContentContainerClass: "w-full", + }) +
+} diff --git a/internals/ui/modules/page_wrapper.templ b/internals/ui/modules/page_wrapper.templ new file mode 100644 index 0000000..bff851b --- /dev/null +++ b/internals/ui/modules/page_wrapper.templ @@ -0,0 +1,16 @@ +package modules + +type PageWrapperProps struct { + Name string + Description string +} + +templ PageWrapper(p PageWrapperProps) { +
+

{ p.Name }

+

{ p.Description }

+
+
+ { children... } +
+} diff --git a/internals/ui/pages/accordion.templ b/internals/ui/pages/accordion.templ index 222fba4..80b9122 100644 --- a/internals/ui/pages/accordion.templ +++ b/internals/ui/pages/accordion.templ @@ -5,37 +5,20 @@ 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 Accordion() { @layouts.DocsLayout() { -
-
-

Accordion

-

A vertically stacked set of interactive headings that each reveal a section of content.

-
- @components.Tabs(components.TabsProps{ - Tabs: []components.Tab{ - { - ID: "preview", - Title: "Preview", - Content: showcase.AccordionShowcase(), - }, - { - ID: "code", - Title: "Code", - Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", showcase.TemplFiles), - }, - { - ID: "component", - Title: "Component", - Content: modules.CodeSnippetFromEmbedded("accordion.templ", "go", components.TemplFiles), - }, - }, - TabsContainerClass: "md:w-1/2", - ContentContainerClass: "w-full", + @modules.PageWrapper(modules.PageWrapperProps{ + Name: "Accordion", + Description: "A vertically ds stacked set of interactive headings that each reveal a section of content.", + }) { + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "", + ShowcaseFile: showcase.Accordion(), + PreviewCodeFile: "accordion.templ", + ComponentCodeFile: "accordion.templ", }) -
+ } } } diff --git a/internals/ui/pages/alert.templ b/internals/ui/pages/alert.templ index d18146d..5ce2d0c 100644 --- a/internals/ui/pages/alert.templ +++ b/internals/ui/pages/alert.templ @@ -4,37 +4,26 @@ 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 Alert() { @layouts.DocsLayout() { -
-
-

Alert

-

Displays a callout for user attention, often used for notifications, warnings, or important messages.

-
- @components.Tabs(components.TabsProps{ - Tabs: []components.Tab{ - { - ID: "preview", - Title: "Preview", - Content: showcase.AlertShowcase(), - }, - { - ID: "code", - Title: "Code", - Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", showcase.TemplFiles), - }, - { - ID: "component", - Title: "Component", - Content: modules.CodeSnippetFromEmbedded("alert.templ", "go", components.TemplFiles), - }, - }, - TabsContainerClass: "md:w-1/2", - ContentContainerClass: "w-full", + @modules.PageWrapper(modules.PageWrapperProps{ + Name: "Alert", + Description: "Displays a callout for user attention, often used for notifications, warnings, or important messages.", + }) { + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "Default", + ShowcaseFile: showcase.AlertDefault(), + PreviewCodeFile: "alert_default.templ", + ComponentCodeFile: "alert.templ", }) -
+ @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "Destructive", + ShowcaseFile: showcase.AlertDestructive(), + PreviewCodeFile: "alert_destructive.templ", + ComponentCodeFile: "alert.templ", + }) + } } } diff --git a/internals/ui/pages/avatar.templ b/internals/ui/pages/avatar.templ index df6228a..036d0f8 100644 --- a/internals/ui/pages/avatar.templ +++ b/internals/ui/pages/avatar.templ @@ -4,37 +4,32 @@ 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 Avatar() { @layouts.DocsLayout() { -
-
-

Avatar

-

An image element with a fallback for representing the user.

-
- @components.Tabs(components.TabsProps{ - Tabs: []components.Tab{ - { - ID: "preview", - Title: "Preview", - Content: showcase.AvatarShowcase(), - }, - { - ID: "code", - Title: "Code", - Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", showcase.TemplFiles), - }, - { - ID: "component", - Title: "Component", - Content: modules.CodeSnippetFromEmbedded("avatar.templ", "go", components.TemplFiles), - }, - }, - TabsContainerClass: "md:w-1/2", - ContentContainerClass: "w-full", + @modules.PageWrapper(modules.PageWrapperProps{ + Name: "Avatar", + Description: "An image element with a fallback for representing the user.", + }) { + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "With Image", + ShowcaseFile: showcase.AvatarWithImage(), + PreviewCodeFile: "avatar_with_image.templ", + ComponentCodeFile: "avatar.templ", }) -
+ @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "With Placeholder", + ShowcaseFile: showcase.AvatarWithPlaceholder(), + PreviewCodeFile: "avatar_with_placeholder.templ", + ComponentCodeFile: "avatar.templ", + }) + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "With Sizes", + ShowcaseFile: showcase.AvatarWithSizes(), + PreviewCodeFile: "avatar_with_sizes.templ", + ComponentCodeFile: "avatar.templ", + }) + } } } diff --git a/internals/ui/pages/button.templ b/internals/ui/pages/button.templ index 611b33f..1639cdd 100644 --- a/internals/ui/pages/button.templ +++ b/internals/ui/pages/button.templ @@ -4,37 +4,38 @@ 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 Button() { @layouts.DocsLayout() { -
-
-

Button

-

Displays a button or a component that looks like a button.

-
- @components.Tabs(components.TabsProps{ - Tabs: []components.Tab{ - { - ID: "preview", - Title: "Preview", - Content: showcase.ButtonShowcase(), - }, - { - ID: "code", - Title: "Code", - Content: modules.CodeSnippetFromEmbedded("button.templ", "go", showcase.TemplFiles), - }, - { - ID: "component", - Title: "Component", - Content: modules.CodeSnippetFromEmbedded("button.templ", "go", components.TemplFiles), - }, - }, - TabsContainerClass: "md:w-1/2", - ContentContainerClass: "w-full", + @modules.PageWrapper(modules.PageWrapperProps{ + Name: "Button", + Description: "Displays a button or a component that looks like a button.", + }) { + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "Variants", + ShowcaseFile: showcase.ButtonVariants(), + PreviewCodeFile: "button_variants.templ", + ComponentCodeFile: "button.templ", }) -
+ @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "Sizes", + ShowcaseFile: showcase.ButtonSizes(), + PreviewCodeFile: "button_sizes.templ", + ComponentCodeFile: "button.templ", + }) + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "States", + ShowcaseFile: showcase.ButtonStates(), + PreviewCodeFile: "button_states.templ", + ComponentCodeFile: "button.templ", + }) + @modules.ExampleWrapper(modules.ExampleWrapperProps{ + SectionName: "Icons", + ShowcaseFile: showcase.ButtonIcons(), + PreviewCodeFile: "button_icons.templ", + ComponentCodeFile: "button.templ", + }) + } } } diff --git a/internals/ui/showcase/accordion.templ b/internals/ui/showcase/accordion.templ index 8d47b35..7982ae1 100644 --- a/internals/ui/showcase/accordion.templ +++ b/internals/ui/showcase/accordion.templ @@ -3,27 +3,25 @@ package showcase import "github.com/axzilla/goilerplate/pkg/components" -templ AccordionShowcase() { -
- @components.Accordion(components.AccordionProps{ - Items: []components.AccordionItem{ - { - ID: "item-1", - Trigger: templ.Raw("Is it accessible?"), - Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."), - }, - { - ID: "item-2", - Trigger: templ.Raw("Is it styled?"), - Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."), - }, - { - ID: "item-3", - Trigger: templ.Raw("Is it animated?"), - Content: templ.Raw("Yes. It's animated by default, but you can disable it if you prefer."), - }, +templ Accordion() { + @components.Accordion(components.AccordionProps{ + Items: []components.AccordionItem{ + { + ID: "item-1", + Trigger: templ.Raw("Is it accessible?"), + Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."), }, - Class: "w-full sm:max-w-[70%]", - }) -
+ { + ID: "item-2", + Trigger: templ.Raw("Is it styled?"), + Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."), + }, + { + ID: "item-3", + Trigger: templ.Raw("Is it animated?"), + Content: templ.Raw("Yes. It's animated by default, but you can disable it if you prefer."), + }, + }, + Class: "w-full sm:max-w-[70%]", + }) } diff --git a/internals/ui/showcase/alert.templ b/internals/ui/showcase/alert.templ deleted file mode 100644 index ea8009f..0000000 --- a/internals/ui/showcase/alert.templ +++ /dev/null @@ -1,41 +0,0 @@ -package showcase - -import ( - "github.com/axzilla/goilerplate/pkg/components" - "github.com/axzilla/goilerplate/pkg/icons" -) - -templ AlertShowcase() { -
-
-
-

Default Alert

-
- @components.Alert(components.AlertProps{Variant: components.DefaultAlert}) { - @icons.Rocket(icons.IconProps{Size: "16"}) - @components.AlertTitle() { - Note - } - @components.AlertDescription() { - This is a default alert — check it out! - } - } -
-
-
-

Destructive Alert

-
- @components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) { - @icons.TriangleAlert(icons.IconProps{Size: "16"}) - @components.AlertTitle() { - Error - } - @components.AlertDescription() { - Your session has expired. Please log in again. - } - } -
-
-
-
-} diff --git a/internals/ui/showcase/alert_default.templ b/internals/ui/showcase/alert_default.templ new file mode 100644 index 0000000..79d2ca0 --- /dev/null +++ b/internals/ui/showcase/alert_default.templ @@ -0,0 +1,20 @@ +package showcase + +import ( + "github.com/axzilla/goilerplate/pkg/components" + "github.com/axzilla/goilerplate/pkg/icons" +) + +templ AlertDefault() { +
+ @components.Alert(components.AlertProps{Variant: components.DefaultAlert}) { + @icons.Rocket(icons.IconProps{Size: "16"}) + @components.AlertTitle() { + Note + } + @components.AlertDescription() { + This is a default alert — check it out! + } + } +
+} diff --git a/internals/ui/showcase/alert_destructive.templ b/internals/ui/showcase/alert_destructive.templ new file mode 100644 index 0000000..d4d9dff --- /dev/null +++ b/internals/ui/showcase/alert_destructive.templ @@ -0,0 +1,20 @@ +package showcase + +import ( + "github.com/axzilla/goilerplate/pkg/components" + "github.com/axzilla/goilerplate/pkg/icons" +) + +templ AlertDestructive() { +
+ @components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) { + @icons.TriangleAlert(icons.IconProps{Size: "16"}) + @components.AlertTitle() { + Error + } + @components.AlertDescription() { + Your session has expired. Please log in again. + } + } +
+} diff --git a/internals/ui/showcase/avatar.templ b/internals/ui/showcase/avatar.templ deleted file mode 100644 index 0472c69..0000000 --- a/internals/ui/showcase/avatar.templ +++ /dev/null @@ -1,50 +0,0 @@ -package showcase - -import "github.com/axzilla/goilerplate/pkg/components" - -templ AvatarShowcase() { -
-
-
-

With Image

-
- @components.Avatar(components.AvatarProps{ - ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", - Name: "John Doe", - Class: "border-2 border-border", - }) -
-
-
-

With Placeholder

-
- @components.Avatar(components.AvatarProps{ - Name: "The Dude", - }) -
-
-
-

With Sizes

-
- @components.Avatar(components.AvatarProps{ - ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", - Name: "John Doe", - Size: components.AvatarSizeSmall, - Class: "border-2 border-border", - }) - @components.Avatar(components.AvatarProps{ - ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", - Name: "John Doe", - Class: "border-2 border-border", - }) - @components.Avatar(components.AvatarProps{ - ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", - Name: "John Doe", - Size: components.AvatarSizeLarge, - Class: "border-2 border-border", - }) -
-
-
-
-} diff --git a/internals/ui/showcase/avatar_with_image.templ b/internals/ui/showcase/avatar_with_image.templ new file mode 100644 index 0000000..2467c36 --- /dev/null +++ b/internals/ui/showcase/avatar_with_image.templ @@ -0,0 +1,11 @@ +package showcase + +import "github.com/axzilla/goilerplate/pkg/components" + +templ AvatarWithImage() { + @components.Avatar(components.AvatarProps{ + ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", + Name: "John Doe", + Class: "border-2 border-border", + }) +} diff --git a/internals/ui/showcase/avatar_with_placeholder.templ b/internals/ui/showcase/avatar_with_placeholder.templ new file mode 100644 index 0000000..63c51f6 --- /dev/null +++ b/internals/ui/showcase/avatar_with_placeholder.templ @@ -0,0 +1,9 @@ +package showcase + +import "github.com/axzilla/goilerplate/pkg/components" + +templ AvatarWithPlaceholder() { + @components.Avatar(components.AvatarProps{ + Name: "The Dude", + }) +} diff --git a/internals/ui/showcase/avatar_with_sizes.templ b/internals/ui/showcase/avatar_with_sizes.templ new file mode 100644 index 0000000..0bc95dd --- /dev/null +++ b/internals/ui/showcase/avatar_with_sizes.templ @@ -0,0 +1,25 @@ +package showcase + +import "github.com/axzilla/goilerplate/pkg/components" + +templ AvatarWithSizes() { +
+ @components.Avatar(components.AvatarProps{ + ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", + Name: "John Doe", + Size: components.AvatarSizeSmall, + Class: "border-2 border-border", + }) + @components.Avatar(components.AvatarProps{ + ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", + Name: "John Doe", + Class: "border-2 border-border", + }) + @components.Avatar(components.AvatarProps{ + ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4", + Name: "John Doe", + Size: components.AvatarSizeLarge, + Class: "border-2 border-border", + }) +
+} diff --git a/internals/ui/showcase/button.templ b/internals/ui/showcase/button.templ deleted file mode 100644 index b352e9d..0000000 --- a/internals/ui/showcase/button.templ +++ /dev/null @@ -1,59 +0,0 @@ -package showcase - -import ( - "github.com/axzilla/goilerplate/pkg/components" - "github.com/axzilla/goilerplate/pkg/icons" -) - -templ ButtonShowcase() { -
-
-
-

Variants

-
- @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}) -
-
-
-

Sizes

-
- @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"})}) -
-
-
-

States

-
- @components.Button(components.ButtonProps{Text: "Default"}) - // Alpine.js example - @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}}) - // Vanilla JS example - // @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}}) - @components.Button(components.ButtonProps{Text: "Disabled", Disabled: true}) - // @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"}) - @components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"}) -
-
-
-

With Icon

-
- @components.Button(components.ButtonProps{ - Text: "Icon Left", - IconLeft: icons.Rocket(icons.IconProps{Size: "16"}), - }) - @components.Button(components.ButtonProps{ - Text: "Icon Right", - IconRight: icons.Rocket(icons.IconProps{Size: "16"}), - }) -
-
-
-
-} diff --git a/internals/ui/showcase/button_icons.templ b/internals/ui/showcase/button_icons.templ new file mode 100644 index 0000000..f8425ee --- /dev/null +++ b/internals/ui/showcase/button_icons.templ @@ -0,0 +1,19 @@ +package showcase + +import ( + "github.com/axzilla/goilerplate/pkg/components" + "github.com/axzilla/goilerplate/pkg/icons" +) + +templ ButtonIcons() { +
+ @components.Button(components.ButtonProps{ + Text: "Icon Left", + IconLeft: icons.Rocket(icons.IconProps{Size: "16"}), + }) + @components.Button(components.ButtonProps{ + Text: "Icon Right", + IconRight: icons.Rocket(icons.IconProps{Size: "16"}), + }) +
+} diff --git a/internals/ui/showcase/button_sizes.templ b/internals/ui/showcase/button_sizes.templ new file mode 100644 index 0000000..a50fce3 --- /dev/null +++ b/internals/ui/showcase/button_sizes.templ @@ -0,0 +1,15 @@ +package showcase + +import ( + "github.com/axzilla/goilerplate/pkg/components" + "github.com/axzilla/goilerplate/pkg/icons" +) + +templ ButtonSizes() { +
+ @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"})}) +
+} diff --git a/internals/ui/showcase/button_states.templ b/internals/ui/showcase/button_states.templ new file mode 100644 index 0000000..676d1d5 --- /dev/null +++ b/internals/ui/showcase/button_states.templ @@ -0,0 +1,16 @@ +package showcase + +import "github.com/axzilla/goilerplate/pkg/components" + +templ ButtonStates() { +
+ @components.Button(components.ButtonProps{Text: "Default"}) + // Alpine.js example + @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}}) + // Vanilla JS example + // @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}}) + @components.Button(components.ButtonProps{Text: "Disabled", Disabled: true}) + // @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"}) + @components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"}) +
+} diff --git a/internals/ui/showcase/button_variants.templ b/internals/ui/showcase/button_variants.templ new file mode 100644 index 0000000..68116ed --- /dev/null +++ b/internals/ui/showcase/button_variants.templ @@ -0,0 +1,14 @@ +package showcase + +import "github.com/axzilla/goilerplate/pkg/components" + +templ ButtonVariants() { +
+ @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}) +
+} diff --git a/pkg/components/accordion_templ.go b/pkg/components/accordion_templ.go index b579803..63557d3 100644 --- a/pkg/components/accordion_templ.go +++ b/pkg/components/accordion_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/alert_templ.go b/pkg/components/alert_templ.go index 14b1db0..59152f1 100644 --- a/pkg/components/alert_templ.go +++ b/pkg/components/alert_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/avatar_templ.go b/pkg/components/avatar_templ.go index 6324a34..7bebe12 100644 --- a/pkg/components/avatar_templ.go +++ b/pkg/components/avatar_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/button_templ.go b/pkg/components/button_templ.go index dbd43cf..eb7afd7 100644 --- a/pkg/components/button_templ.go +++ b/pkg/components/button_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/card_templ.go b/pkg/components/card_templ.go index 8c009c3..13ab2a0 100644 --- a/pkg/components/card_templ.go +++ b/pkg/components/card_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/checkbox_templ.go b/pkg/components/checkbox_templ.go index 4cc3d19..02f90c2 100644 --- a/pkg/components/checkbox_templ.go +++ b/pkg/components/checkbox_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/datepicker_templ.go b/pkg/components/datepicker_templ.go index 8cd647a..e8582cf 100644 --- a/pkg/components/datepicker_templ.go +++ b/pkg/components/datepicker_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/dropdown_menu_templ.go b/pkg/components/dropdown_menu_templ.go index b944098..39ad9bb 100644 --- a/pkg/components/dropdown_menu_templ.go +++ b/pkg/components/dropdown_menu_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/input_templ.go b/pkg/components/input_templ.go index 9243161..1cc2293 100644 --- a/pkg/components/input_templ.go +++ b/pkg/components/input_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/modal_templ.go b/pkg/components/modal_templ.go index 9382c8b..7d6920b 100644 --- a/pkg/components/modal_templ.go +++ b/pkg/components/modal_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/radio_group_templ.go b/pkg/components/radio_group_templ.go index 1294257..051529b 100644 --- a/pkg/components/radio_group_templ.go +++ b/pkg/components/radio_group_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/select_templ.go b/pkg/components/select_templ.go index 0aefcfd..9b8f482 100644 --- a/pkg/components/select_templ.go +++ b/pkg/components/select_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 // pkg/components/select.templ package components diff --git a/pkg/components/sheet_templ.go b/pkg/components/sheet_templ.go index 600b51d..6a2c670 100644 --- a/pkg/components/sheet_templ.go +++ b/pkg/components/sheet_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/slider_templ.go b/pkg/components/slider_templ.go index 79121fc..0880516 100644 --- a/pkg/components/slider_templ.go +++ b/pkg/components/slider_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/tabs_templ.go b/pkg/components/tabs_templ.go index aebcddb..40a4582 100644 --- a/pkg/components/tabs_templ.go +++ b/pkg/components/tabs_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/textarea_templ.go b/pkg/components/textarea_templ.go index 75aee65..15c04bf 100644 --- a/pkg/components/textarea_templ.go +++ b/pkg/components/textarea_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present. diff --git a/pkg/components/toggle_templ.go b/pkg/components/toggle_templ.go index a6d03eb..1124dc0 100644 --- a/pkg/components/toggle_templ.go +++ b/pkg/components/toggle_templ.go @@ -1,6 +1,6 @@ // Code generated by templ - DO NOT EDIT. -// templ: version: v0.2.778 +// templ: version: v0.2.793 package components //lint:file-ignore SA4006 This context is only used if a nested component is present.