Merge pull request #22 from axzilla/dev

feat: add tooltip component
axzilla · Dec 21, 2024 · 62407c5 · 62407c5
2 parents f23a7cd + 63ae12e
commit 62407c5
Show file tree

Hide file tree

Showing 14 changed files with 810 additions and 2 deletions.
diff --git a/assets/css/output.css b/assets/css/output.css
@@ -675,6 +675,10 @@ body {
   bottom: 1rem;
 }
 
+.bottom-\[-4px\] {
+  bottom: -4px;
+}
+
 .bottom-full {
   bottom: 100%;
 }
@@ -691,6 +695,10 @@ body {
   left: 1rem;
 }
 
+.left-\[-4px\] {
+  left: -4px;
+}
+
 .left-full {
   left: 100%;
 }
@@ -711,6 +719,14 @@ body {
   right: 1rem;
 }
 
+.right-\[-4px\] {
+  right: -4px;
+}
+
+.right-full {
+  right: 100%;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -731,6 +747,10 @@ body {
   top: 1rem;
 }
 
+.top-\[-4px\] {
+  top: -4px;
+}
+
 .top-full {
   top: 100%;
 }
@@ -784,6 +804,10 @@ body {
   margin-bottom: 2rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -954,6 +978,10 @@ body {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -1002,6 +1030,10 @@ body {
   width: 30rem;
 }
 
+.w-auto {
+  width: auto;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1108,6 +1140,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -1461,6 +1498,11 @@ body {
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
 }
 
+.bg-foreground {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
@@ -1728,6 +1770,11 @@ body {
   letter-spacing: -0.025em;
 }
 
+.text-background {
+  --tw-text-opacity: 1;
+  color: hsl(var(--background) / var(--tw-text-opacity, 1));
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));

diff --git a/cmd/server/main.go b/cmd/server/main.go
@@ -75,6 +75,7 @@ func main() {
 	mux.Handle("GET /docs/components/textarea", templ.Handler(pages.Textarea()))
 	mux.Handle("GET /docs/components/toast", templ.Handler(pages.Toast()))
 	mux.Handle("GET /docs/components/toggle", templ.Handler(pages.Toggle()))
+	mux.Handle("GET /docs/components/tooltip", templ.Handler(pages.Tooltip()))
 	// Showcase API
 	mux.Handle("POST /docs/toast/demo", http.HandlerFunc(toastDemoHandler))
 

diff --git a/internals/shared/menudata.go b/internals/shared/menudata.go
@@ -121,6 +121,10 @@ var Sections = []Section{
 				Text: "Toggle",
 				Href: "/docs/components/toggle",
 			},
+			{
+				Text: "Tooltip",
+				Href: "/docs/components/tooltip",
+			},
 		},
 	},
 }
diff --git a/internals/ui/modules/example_wrapper.templ b/internals/ui/modules/example_wrapper.templ
@@ -50,15 +50,15 @@ func generateTabs(p ExampleWrapperProps) []components.Tab {
 		{
 			ID:      "code",
 			Title:   "Code",
-			Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "", showcase.TemplFiles),
+			Content: CodeSnippetFromEmbedded(p.PreviewCodeFile, "go", showcase.TemplFiles),
 		},
 	}
 
 	if p.ComponentCodeFile != "" {
 		tabs = append(tabs, components.Tab{
 			ID:      "component",
 			Title:   "Component",
-			Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "", components.TemplFiles),
+			Content: CodeSnippetFromEmbedded(p.ComponentCodeFile, "go", components.TemplFiles),
 		})
 	}
 

diff --git a/internals/ui/pages/tooltip.templ b/internals/ui/pages/tooltip.templ
@@ -0,0 +1,55 @@
+package pages
+
+import (
+	"github.com/axzilla/templui/internals/ui/layouts"
+	"github.com/axzilla/templui/internals/ui/modules"
+	"github.com/axzilla/templui/internals/ui/showcase"
+)
+
+templ Tooltip() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Tooltip",
+			Description: templ.Raw("A small pop-up box that appears when a user hovers over an element"),
+			Tailwind:    true,
+			Alpine:      true,
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				ShowcaseFile:      showcase.Tooltip(),
+				PreviewCodeFile:   "tooltip.templ",
+				ComponentCodeFile: "tooltip.templ",
+			})
+			@modules.Usage(modules.UsageProps{
+				ComponentName: "Tooltip",
+				NeedsHandler:  true,
+				PropsExample:  "...",
+			})
+			@modules.ContainerWrapper(modules.ContainerWrapperProps{Title: "Examples"}) {
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With delay (3s open, 1s close)",
+					ShowcaseFile:      showcase.TooltipWithDelay(),
+					PreviewCodeFile:   "tooltip_with_delay.templ",
+					ComponentCodeFile: "tooltip.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Variants",
+					ShowcaseFile:      showcase.TooltipVariants(),
+					PreviewCodeFile:   "tooltip_variants.templ",
+					ComponentCodeFile: "tooltip.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "Sides",
+					ShowcaseFile:      showcase.TooltipSides(),
+					PreviewCodeFile:   "tooltip_sides.templ",
+					ComponentCodeFile: "tooltip.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Arrow",
+					ShowcaseFile:      showcase.TooltipWithArrow(),
+					PreviewCodeFile:   "tooltip_with_arrow.templ",
+					ComponentCodeFile: "tooltip.templ",
+				})
+			}
+		}
+	}
+}
diff --git a/internals/ui/showcase/tooltip.templ b/internals/ui/showcase/tooltip.templ
@@ -0,0 +1,13 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ Tooltip() {
+	@components.Tooltip(components.TooltipProps{
+		Trigger: components.Button(components.ButtonProps{
+			Text:    "Hover me",
+			Variant: components.ButtonVariantOutline,
+		}),
+		Content: templ.Raw("Default"),
+	})
+}
diff --git a/internals/ui/showcase/tooltip_sides.templ b/internals/ui/showcase/tooltip_sides.templ
@@ -0,0 +1,40 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TooltipSides() {
+	<div class="flex flex-wrap gap-2">
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Top",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Top tooltip"),
+			Side:    components.TooltipTop, // Its the default value but we can set it explicitly
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Right",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Right tooltip"),
+			Side:    components.TooltipRight,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Bottom",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Bottom tooltip"),
+			Side:    components.TooltipBottom,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Left",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Left tooltip"),
+			Side:    components.TooltipLeft,
+		})
+	</div>
+}
diff --git a/internals/ui/showcase/tooltip_variants.templ b/internals/ui/showcase/tooltip_variants.templ
@@ -0,0 +1,31 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TooltipVariants() {
+	<div class="flex flex-wrap gap-2">
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Default",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Default tooltip"),
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Secondary",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Secondary tooltip"),
+			Variant: components.TooltipSecondary,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Destructive",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content: templ.Raw("Destructive tooltip"),
+			Variant: components.TooltipDestructive,
+		})
+	</div>
+}
diff --git a/internals/ui/showcase/tooltip_with_arrow.templ b/internals/ui/showcase/tooltip_with_arrow.templ
@@ -0,0 +1,44 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TooltipWithArrow() {
+	<div class="flex flex-wrap gap-2">
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Top",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content:   templ.Raw("Top tooltip"),
+			Side:      components.TooltipTop, // Its the default value but we can set it explicitly
+			ShowArrow: true,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Right",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content:   templ.Raw("Right tooltip"),
+			Side:      components.TooltipRight,
+			ShowArrow: true,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Bottom",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content:   templ.Raw("Bottom tooltip"),
+			Side:      components.TooltipBottom,
+			ShowArrow: true,
+		})
+		@components.Tooltip(components.TooltipProps{
+			Trigger: components.Button(components.ButtonProps{
+				Text:    "Left",
+				Variant: components.ButtonVariantOutline,
+			}),
+			Content:   templ.Raw("Left tooltip"),
+			Side:      components.TooltipLeft,
+			ShowArrow: true,
+		})
+	</div>
+}
diff --git a/internals/ui/showcase/tooltip_with_delay.templ b/internals/ui/showcase/tooltip_with_delay.templ
@@ -0,0 +1,15 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TooltipWithDelay() {
+	@components.Tooltip(components.TooltipProps{
+		Trigger: components.Button(components.ButtonProps{
+			Text:    "Hover me",
+			Variant: components.ButtonVariantOutline,
+		}),
+		Content:    templ.Raw("With delay"),
+		OpenDelay:  3000,
+		CloseDelay: 1000,
+	})
+}