Refactor component API

Author: buberdds

src/components/ui/sidebar.tsx

@@ -10,7 +10,7 @@ import { Input } from './input'
 import { Separator } from './separator'
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet'
 import { Skeleton } from './skeleton'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+import { Tooltip, TooltipProvider } from './tooltip'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -477,7 +477,7 @@ function SidebarMenuButton({
 }: React.ComponentProps<'button'> & {
   asChild?: boolean
   isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  tooltip?: string | { children: React.ReactNode; sideOffset?: number }
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
   const Comp = asChild ? Slot : 'button'
   const { isMobile, state } = useSidebar()
@@ -504,9 +504,13 @@ function SidebarMenuButton({
   }
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltip} />
+    <Tooltip
+      title={typeof tooltip === 'string' ? tooltip : tooltip.children}
+      side="right"
+      sideOffset={typeof tooltip === 'string' ? undefined : tooltip.sideOffset}
+      hidden={state !== 'collapsed' || isMobile}
+    >
+      {button}
     </Tooltip>
   )
 }

src/components/ui/tooltip.tsx

@@ -3,31 +3,23 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
 import { cn } from '../../lib/utils'
 
-function TooltipProvider({
+const TooltipProvider = ({
   delayDuration = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {
   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+const TooltipTrigger = ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
-function TooltipContent({
+const TooltipContent = ({
   className,
   sideOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) => {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
@@ -46,4 +38,25 @@ function TooltipContent({
   )
 }
 
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  title: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  hidden?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+function Tooltip({ title, children, side, sideOffset, hidden, align, ...props }: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+        <TooltipTrigger>{children}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={sideOffset} hidden={hidden} align={align}>
+          {title}
+        </TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipProvider>
+  )
+}
+
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/stories/Tooltip/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/ui/tooltip.tsx'
+import { Tooltip } from '../../components/ui/tooltip.tsx'
 import { Button } from '../../components/ui/button.tsx'
 import { expect, within } from 'storybook/test'
 
@@ -21,6 +21,15 @@ const meta: Meta<typeof Tooltip> = {
   },
   tags: ['autodocs'],
   argTypes: {
+    title: {
+      control: 'text',
+      description: 'The content of the tooltip',
+    },
+    side: {
+      control: { type: 'radio' },
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against',
+    },
     defaultOpen: {
       control: 'boolean',
     },
@@ -38,70 +47,12 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    children: (
-      <>
-        <TooltipTrigger>
-          <Button variant="outline">Hover me</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Tooltip content</p>
-        </TooltipContent>
-      </>
-    ),
+    title: 'Tooltip content',
+    children: <Button variant="outline">Hover me</Button>,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const button = canvas.getAllByRole('button', { name: 'Hover me' })[0]
     await expect(button).toBeInTheDocument()
   },
 }
-
-export const Variants: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col items-center gap-4">
-        <div className="flex justify-center gap-4">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Top</Button>
-            </TooltipTrigger>
-            <TooltipContent side="top">
-              <p>Tooltip on top</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex justify-between gap-16">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Left</Button>
-            </TooltipTrigger>
-            <TooltipContent side="left">
-              <p>Tooltip on left</p>
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Right</Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              <p>Tooltip on right</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex justify-center gap-4">
-          <Tooltip>
-            <TooltipTrigger>
-              <Button variant="outline">Bottom</Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              <p>Tooltip on bottom</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    ),
-  },
-}