@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/__tests__/tooltip.test.tsx

@@ -0,0 +1,583 @@
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Tooltip } from '../tooltip'
+
+// Mock next-themes
+jest.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: 'light',
+  }),
+}))
+
+
+
+describe('Tooltip Components', () => {
+  describe('Tooltip Component', () => {
+    describe('Basic Rendering', () => {
+      it('renders correctly with default props', () => {
+        render(
+          <Tooltip content="Test tooltip">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        expect(screen.getByRole('button')).toBeInTheDocument()
+        expect(screen.getByText('Hover me')).toBeInTheDocument()
+      })
+
+      it('shows tooltip on hover', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+          expect(screen.getByText('Test tooltip')).toBeInTheDocument()
+        })
+      })
+
+      it('hides tooltip on mouse leave', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+        
+        await user.unhover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+      })
+
+      it('applies custom className', () => {
+        render(
+          <Tooltip content="Test tooltip" className="custom-tooltip">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const wrapper = screen.getByRole('button').parentElement
+        expect(wrapper).toHaveClass('relative', 'inline-block')
+      })
+
+      it('has correct displayName', () => {
+        expect(Tooltip.displayName || Tooltip.name || 'Tooltip').toBe('Tooltip')
+      })
+    })
+
+    describe('Variants', () => {
+      const variants = ['primary', 'secondary', 'success', 'caution', 'destructive', 'info'] as const
+
+      variants.forEach((variant) => {
+        it(`renders ${variant} variant correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" variant={variant}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            expect(tooltip).toHaveClass(`bg-${variant}`)
+          })
+        })
+      })
+    })
+
+    describe('Sizes', () => {
+      const sizes = ['sm', 'md', 'lg'] as const
+
+      sizes.forEach((size) => {
+        it(`renders ${size} size correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" size={size}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            // Size classes are applied through tooltipVariants
+            expect(tooltip).toHaveAttribute('class')
+          })
+        })
+      })
+    })
+
+    describe('Radius', () => {
+      const radiusOptions = ['none', 'sm', 'md', 'lg', 'full'] as const
+
+      radiusOptions.forEach((radius) => {
+        it(`renders ${radius} radius correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" radius={radius}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            expect(tooltip).toHaveClass(`rounded-${radius === 'none' ? 'none' : radius}`)
+          })
+        })
+      })
+    })
+
+    describe('Shadow', () => {
+      const shadowOptions = ['none', 'sm', 'md', 'lg'] as const
+
+      shadowOptions.forEach((shadow) => {
+        it(`renders ${shadow} shadow correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" shadow={shadow}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            expect(tooltip).toHaveClass(`shadow-${shadow}`)
+          })
+        })
+      })
+    })
+
+    describe('Positioning', () => {
+      const sides = ['top', 'right', 'bottom', 'left'] as const
+
+      sides.forEach((side) => {
+        it(`renders ${side} position correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" side={side}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            // Position classes are applied through sideClasses
+            expect(tooltip).toHaveAttribute('class')
+          })
+        })
+      })
+
+      const alignments = ['start', 'center', 'end'] as const
+
+      alignments.forEach((align) => {
+        it(`renders ${align} alignment correctly`, async () => {
+          const user = userEvent.setup()
+          render(
+            <Tooltip content="Test tooltip" align={align}>
+              <button>Hover me</button>
+            </Tooltip>
+          )
+          
+          const trigger = screen.getByRole('button')
+          await user.hover(trigger)
+          
+          await waitFor(() => {
+            const tooltip = screen.getByRole('tooltip')
+            expect(tooltip).toBeInTheDocument()
+            // Alignment classes are applied through alignClasses
+            expect(tooltip).toHaveAttribute('class')
+          })
+        })
+      })
+    })
+
+    describe('Delay Duration', () => {
+      it('respects custom delay duration', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" delayDuration={100}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        // Should appear after 100ms
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        }, { timeout: 200 })
+      })
+
+      it('works with zero delay', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" delayDuration={0}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        // Should appear immediately
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('Side Offset', () => {
+      it('applies custom side offset', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" sideOffset={10}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toHaveStyle({ marginBottom: '10px' })
+        })
+      })
+    })
+
+    describe('Content Types', () => {
+      it('renders text content', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Simple text">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByText('Simple text')).toBeInTheDocument()
+        })
+      })
+
+      it('renders JSX content', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content={<div data-testid="jsx-content">JSX Content</div>}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('jsx-content')).toBeInTheDocument()
+        })
+      })
+
+      it('renders complex content', async () => {
+        const user = userEvent.setup()
+        const complexContent = (
+          <div>
+            <strong>Title</strong>
+            <p>Description</p>
+          </div>
+        )
+        
+        render(
+          <Tooltip content={complexContent}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByText('Title')).toBeInTheDocument()
+          expect(screen.getByText('Description')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('Focus Events', () => {
+      it('shows tooltip on focus', async () => {
+        render(
+          <Tooltip content="Test tooltip">
+            <button>Focus me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        fireEvent.focus(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+      })
+
+      it('hides tooltip on blur', async () => {
+        render(
+          <Tooltip content="Test tooltip">
+            <button>Focus me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        fireEvent.focus(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+        
+        fireEvent.blur(trigger)
+        
+        await waitFor(() => {
+          expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('Complex Combinations', () => {
+      it('renders with all props', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip
+            content="Complex tooltip"
+            variant="success"
+            size="lg"
+            radius="lg"
+            shadow="lg"
+            side="bottom"
+            align="end"
+            delayDuration={50}
+            sideOffset={8}
+            className="custom-tooltip"
+          >
+            <button>Complex button</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toHaveClass('bg-success')
+          expect(tooltip).toHaveClass('rounded-lg')
+          expect(tooltip).toHaveClass('shadow-lg')
+          expect(tooltip).toHaveStyle({ marginTop: '8px' })
+        })
+      })
+
+      it('works with different trigger elements', async () => {
+        const user = userEvent.setup()
+        render(
+          <div>
+            <Tooltip content="Button tooltip">
+              <button data-testid="tooltip-button">Button</button>
+            </Tooltip>
+            <Tooltip content="Link tooltip">
+              <a href="#" role="link">Link</a>
+            </Tooltip>
+            <Tooltip content="Div tooltip">
+              <div role="button" tabIndex={0}>Div</div>
+            </Tooltip>
+          </div>
+        )
+        
+        // Test button
+        await user.hover(screen.getByTestId('tooltip-button'))
+        await waitFor(() => {
+          expect(screen.getByText('Button tooltip')).toBeInTheDocument()
+        })
+        
+        await user.unhover(screen.getByTestId('tooltip-button'))
+        await waitFor(() => {
+          expect(screen.queryByText('Button tooltip')).not.toBeInTheDocument()
+        })
+        
+        // Test link
+        await user.hover(screen.getByRole('link'))
+        await waitFor(() => {
+          expect(screen.getByText('Link tooltip')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('Edge Cases', () => {
+      it('handles empty content', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="">
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toBeEmptyDOMElement()
+        })
+      })
+
+      it('handles null content', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content={null}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+        })
+      })
+
+      it('handles undefined content', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content={undefined as React.ReactNode}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+        })
+      })
+
+      it('handles single child requirement', () => {
+        // Tooltip component expects single child due to React.Children.only
+        render(
+          <Tooltip content="Test tooltip">
+            <div>
+              <button>Button 1</button>
+              <button>Button 2</button>
+            </div>
+          </Tooltip>
+        )
+        
+        // Should render both buttons wrapped in div
+        expect(screen.getByText('Button 1')).toBeInTheDocument()
+        expect(screen.getByText('Button 2')).toBeInTheDocument()
+      })
+
+      it('passes through HTML attributes', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip 
+            content="Test tooltip" 
+            data-testid="tooltip-wrapper"
+            aria-label="Custom tooltip"
+          >
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+          expect(tooltip).toHaveAttribute('data-testid', 'tooltip-wrapper')
+          expect(tooltip).toHaveAttribute('aria-label', 'Custom tooltip')
+        })
+      })
+
+      it('handles rapid hover/unhover', async () => {
+        const user = userEvent.setup()
+        render(
+          <Tooltip content="Test tooltip" delayDuration={100}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        
+        // Rapid hover/unhover
+        await user.hover(trigger)
+        await user.unhover(trigger)
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          expect(screen.getByRole('tooltip')).toBeInTheDocument()
+        })
+      })
+
+      it('handles very long content', async () => {
+        const user = userEvent.setup()
+        const longContent = 'This is a very long tooltip content that should wrap properly and not break the layout. '.repeat(10)
+        
+        render(
+          <Tooltip content={longContent}>
+            <button>Hover me</button>
+          </Tooltip>
+        )
+        
+        const trigger = screen.getByRole('button')
+        await user.hover(trigger)
+        
+        await waitFor(() => {
+          const tooltip = screen.getByRole('tooltip')
+          expect(tooltip).toBeInTheDocument()
+          // Check if content contains the expected text (ignoring whitespace differences)
+          expect(tooltip.textContent?.trim()).toContain('This is a very long tooltip content')
+        })
+      })
+    })
+  })
+})

package/src/components/ui/accordion.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-gray-200 dark:border-gray-800", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all dark:text-gray-100",
+        "hover:underline hover:text-primary dark:hover:text-primary-400",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 opacity-70 group-hover:opacity-100" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm text-gray-700 dark:text-gray-300 transition-all", 
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }