@yuno-payments/dashboard-design-system 0.0.1

package/src/components/molecules/notification-alert/notification-alert.test.tsx

@@ -0,0 +1,454 @@
+import { render, fireEvent } from '@testing-library/react'
+import { act } from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import '@testing-library/jest-dom'
+import { NotificationAlert } from './index'
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
+})
+
+function renderComponent(props = {}) {
+  const defaultProps = {
+    message: 'Test notification',
+    open: true,
+    ...props
+  }
+  const result = render(<NotificationAlert {...defaultProps} />)
+  return { ...result }
+}
+
+function getByTestId(container: HTMLElement, testId: string) {
+  const el = container.querySelector(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`Element with data-testid="${testId}" not found`)
+  return el as HTMLElement
+}
+
+describe('NotificationAlert', () => {
+  it('renders correctly with message', () => {
+    const { container } = renderComponent()
+    const alert = getByTestId(container, 'notification-alert')
+    const message = getByTestId(container, 'notification-message')
+    
+    expect(alert).toBeInTheDocument()
+    expect(message).toHaveTextContent('Test notification')
+  })
+
+  it('renders with title and message', () => {
+    const { container } = renderComponent({
+      title: 'Test Title',
+      message: 'Test Message'
+    })
+    const title = getByTestId(container, 'notification-title')
+    const message = getByTestId(container, 'notification-message')
+    
+    expect(title).toHaveTextContent('Test Title')
+    expect(message).toHaveTextContent('Test Message')
+  })
+
+  it('renders with only title', () => {
+    const { container } = renderComponent({
+      title: 'Test Title',
+      message: undefined
+    })
+    const title = getByTestId(container, 'notification-title')
+    const message = container.querySelector('[data-testid="notification-message"]')
+    
+    expect(title).toHaveTextContent('Test Title')
+    expect(message).not.toBeInTheDocument()
+  })
+
+  it('does not render when open is false', () => {
+    const { container } = renderComponent({ open: false })
+    const alert = container.querySelector('[data-testid="notification-alert"]')
+    
+    expect(alert).not.toBeInTheDocument()
+  })
+
+  it('renders with default mode (no icon)', () => {
+    const { container } = renderComponent({ mode: 'default' })
+    const icon = container.querySelector('[data-testid="notification-icon"]')
+    
+    expect(icon).not.toBeInTheDocument()
+  })
+
+  it('renders with info mode and icon', () => {
+    const { container } = renderComponent({ mode: 'info' })
+    const icon = getByTestId(container, 'notification-icon')
+    
+    expect(icon).toBeInTheDocument()
+    expect(icon.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders with success mode and icon', () => {
+    const { container } = renderComponent({ mode: 'success' })
+    const icon = getByTestId(container, 'notification-icon')
+    
+    expect(icon).toBeInTheDocument()
+    expect(icon.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders with warning mode and icon', () => {
+    const { container } = renderComponent({ mode: 'warning' })
+    const icon = getByTestId(container, 'notification-icon')
+    
+    expect(icon).toBeInTheDocument()
+    expect(icon.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders with error mode and icon', () => {
+    const { container } = renderComponent({ mode: 'error' })
+    const icon = getByTestId(container, 'notification-icon')
+    
+    expect(icon).toBeInTheDocument()
+    expect(icon.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders close button when withCloseButton is true and onClose is provided', () => {
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      withCloseButton: true,
+      onClose: handleClose
+    })
+    const closeButton = getByTestId(container, 'notification-close')
+    
+    expect(closeButton).toBeInTheDocument()
+    expect(closeButton).toHaveAttribute('aria-label', 'Close notification')
+  })
+
+  it('does not render close button when withCloseButton is false', () => {
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      withCloseButton: false,
+      onClose: handleClose
+    })
+    const closeButton = container.querySelector('[data-testid="notification-close"]')
+    
+    expect(closeButton).not.toBeInTheDocument()
+  })
+
+  it('does not render close button when onClose is not provided', () => {
+    const { container } = renderComponent({
+      withCloseButton: true,
+      onClose: undefined
+    })
+    const closeButton = container.querySelector('[data-testid="notification-close"]')
+    
+    expect(closeButton).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when close button is clicked', () => {
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      withCloseButton: true,
+      onClose: handleClose
+    })
+    const closeButton = getByTestId(container, 'notification-close')
+    
+    fireEvent.click(closeButton)
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders progress bar when withProgress is true', () => {
+    const { container } = renderComponent({
+      withProgress: true,
+      timeToLive: 10
+    })
+    const progress = getByTestId(container, 'notification-progress')
+    
+    expect(progress).toBeInTheDocument()
+  })
+
+  it('does not render progress bar when withProgress is false', () => {
+    const { container } = renderComponent({
+      withProgress: false
+    })
+    const progress = container.querySelector('[data-testid="notification-progress"]')
+    
+    expect(progress).not.toBeInTheDocument()
+  })
+
+  it('renders action button when primaryActionLabel and onClick are provided', () => {
+    const handleClick = vi.fn()
+    const { container } = renderComponent({
+      primaryActionLabel: 'Got it!',
+      onClick: handleClick
+    })
+    const actionButton = getByTestId(container, 'notification-action')
+    
+    expect(actionButton).toBeInTheDocument()
+    expect(actionButton).toHaveTextContent('Got it!')
+  })
+
+  it('does not render action button when primaryActionLabel is not provided', () => {
+    const handleClick = vi.fn()
+    const { container } = renderComponent({
+      onClick: handleClick
+    })
+    const actionButton = container.querySelector('[data-testid="notification-action"]')
+    
+    expect(actionButton).not.toBeInTheDocument()
+  })
+
+  it('does not render action button when onClick is not provided', () => {
+    const { container } = renderComponent({
+      primaryActionLabel: 'Got it!'
+    })
+    const actionButton = container.querySelector('[data-testid="notification-action"]')
+    
+    expect(actionButton).not.toBeInTheDocument()
+  })
+
+  it('calls onClick and onClose when action button is clicked', () => {
+    const handleClick = vi.fn()
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      primaryActionLabel: 'Got it!',
+      onClick: handleClick,
+      onClose: handleClose
+    })
+    const actionButton = getByTestId(container, 'notification-action')
+    
+    fireEvent.click(actionButton)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies correct positioning classes for floating notifications', () => {
+    const { container } = renderComponent({
+      position: 'top-right',
+      isFloating: true
+    })
+    const alert = getByTestId(container, 'notification-alert')
+    
+    expect(alert).toHaveClass('fixed', 'top-4', 'right-4', 'z-50')
+  })
+
+  it('applies static positioning for non-floating notifications', () => {
+    const { container } = renderComponent({
+      position: 'top-right',
+      isFloating: false
+    })
+    const alert = getByTestId(container, 'notification-alert')
+    
+    expect(alert).toHaveClass('relative')
+    expect(alert).not.toHaveClass('fixed', 'top-4', 'right-4')
+  })
+
+  it('applies correct mode styling classes', () => {
+    const { container: infoContainer } = renderComponent({ mode: 'info' })
+    const infoAlert = getByTestId(infoContainer, 'notification-alert')
+    expect(infoAlert).toHaveClass('border-l-blue-500')
+
+    const { container: successContainer } = renderComponent({ mode: 'success' })
+    const successAlert = getByTestId(successContainer, 'notification-alert')
+    expect(successAlert).toHaveClass('border-l-green-500')
+
+    const { container: warningContainer } = renderComponent({ mode: 'warning' })
+    const warningAlert = getByTestId(warningContainer, 'notification-alert')
+    expect(warningAlert).toHaveClass('border-l-yellow-500')
+
+    const { container: errorContainer } = renderComponent({ mode: 'error' })
+    const errorAlert = getByTestId(errorContainer, 'notification-alert')
+    expect(errorAlert).toHaveClass('border-l-red-500')
+  })
+
+  it('handles timeToLive countdown', async () => {
+    const handleClose = vi.fn()
+    renderComponent({
+      timeToLive: 2,
+      onClose: handleClose
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(2000)
+    })
+
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('stops timer when component unmounts', () => {
+    const { unmount } = renderComponent({
+      timeToLive: 10
+    })
+
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval')
+    unmount()
+
+    expect(clearIntervalSpy).toHaveBeenCalled()
+  })
+
+  it('stops timer when open becomes false', () => {
+    const { rerender } = renderComponent({
+      timeToLive: 10,
+      open: true
+    })
+
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval')
+    
+    rerender(<NotificationAlert message="Test" timeToLive={10} open={false} />)
+
+    expect(clearIntervalSpy).toHaveBeenCalled()
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = vi.fn()
+    renderComponent({ ref })
+    
+    expect(ref).toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = renderComponent({ className: 'custom-class' })
+    const alert = getByTestId(container, 'notification-alert')
+    
+    expect(alert).toHaveClass('custom-class')
+  })
+
+  it('passes through HTML div attributes', () => {
+    const { container } = renderComponent({
+      'data-custom': 'test-value',
+      id: 'test-notification'
+    })
+    const alert = getByTestId(container, 'notification-alert')
+    
+    expect(alert).toHaveAttribute('data-custom', 'test-value')
+    expect(alert).toHaveAttribute('id', 'test-notification')
+  })
+
+  it('renders with different icon sizes', () => {
+    const { container: defaultContainer } = renderComponent({
+      mode: 'info',
+      iconSize: 'default'
+    })
+    const defaultIcon = getByTestId(defaultContainer, 'notification-icon')
+    expect(defaultIcon.querySelector('svg')).toHaveClass('size-4')
+
+    const { container: largeContainer } = renderComponent({
+      mode: 'info',
+      iconSize: 'large'
+    })
+    const largeIcon = getByTestId(largeContainer, 'notification-icon')
+    expect(largeIcon.querySelector('svg')).toHaveClass('size-5')
+  })
+
+  it('renders with different sizes', () => {
+    const { container: defaultContainer } = renderComponent({ size: 'default' })
+    const defaultAlert = getByTestId(defaultContainer, 'notification-alert')
+    expect(defaultAlert).toHaveClass('min-w-[300px]', 'max-w-[420px]')
+
+    const { container: fullContainer } = renderComponent({ size: 'full' })
+    const fullAlert = getByTestId(fullContainer, 'notification-alert')
+    expect(fullAlert).toHaveClass('w-full')
+  })
+
+  it('renders with all position variants', () => {
+    const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'] as const
+    const expectedClasses = [
+      ['top-4', 'right-4'],
+      ['top-4', 'left-4'],
+      ['bottom-4', 'right-4'],
+      ['bottom-4', 'left-4'],
+      ['top-1/2', 'left-1/2', '-translate-x-1/2', '-translate-y-1/2']
+    ]
+
+    positions.forEach((position, index) => {
+      const { container } = renderComponent({ position, isFloating: true })
+      const alert = getByTestId(container, 'notification-alert')
+      expectedClasses[index].forEach(className => {
+        expect(alert).toHaveClass(className)
+      })
+    })
+  })
+
+  it('combines multiple features correctly', () => {
+    const handleClick = vi.fn()
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      mode: 'warning',
+      title: 'Warning Title',
+      message: 'Warning message',
+      withProgress: true,
+      timeToLive: 10,
+      primaryActionLabel: 'Dismiss',
+      onClick: handleClick,
+      onClose: handleClose,
+      withCloseButton: true,
+      position: 'top-left',
+      isFloating: true,
+      className: 'custom-class'
+    })
+
+    const alert = getByTestId(container, 'notification-alert')
+    const icon = getByTestId(container, 'notification-icon')
+    const title = getByTestId(container, 'notification-title')
+    const message = getByTestId(container, 'notification-message')
+    const progress = getByTestId(container, 'notification-progress')
+    const actionButton = getByTestId(container, 'notification-action')
+    const closeButton = getByTestId(container, 'notification-close')
+
+    expect(alert).toHaveClass('border-l-yellow-500', 'custom-class', 'top-4', 'left-4')
+    expect(icon).toBeInTheDocument()
+    expect(title).toHaveTextContent('Warning Title')
+    expect(message).toHaveTextContent('Warning message')
+    expect(progress).toBeInTheDocument()
+    expect(actionButton).toHaveTextContent('Dismiss')
+    expect(closeButton).toBeInTheDocument()
+  })
+
+  it('handles React node content for title and message', () => {
+    const complexTitle = <span>Complex <strong>Title</strong></span>
+    const complexMessage = <div>Complex <em>Message</em></div>
+    
+    const { container } = renderComponent({
+      title: complexTitle,
+      message: complexMessage
+    })
+    
+    const title = getByTestId(container, 'notification-title')
+    const message = getByTestId(container, 'notification-message')
+    
+    expect(title).toContainHTML('<span>Complex <strong>Title</strong></span>')
+    expect(message).toContainHTML('<div>Complex <em>Message</em></div>')
+  })
+
+  it('updates progress bar correctly during countdown', async () => {
+    const { container } = renderComponent({
+      withProgress: true,
+      timeToLive: 4
+    })
+    
+    const progress = getByTestId(container, 'notification-progress')
+    const progressBar = progress.querySelector('[role="progressbar"]') as HTMLElement
+    
+    await act(async () => {
+      vi.advanceTimersByTime(1000)
+    })
+    expect(progressBar).toHaveAttribute('aria-valuenow', '25')
+    
+    await act(async () => {
+      vi.advanceTimersByTime(1000)
+    })
+    expect(progressBar).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('maintains accessibility attributes', () => {
+    const handleClose = vi.fn()
+    const { container } = renderComponent({
+      withCloseButton: true,
+      onClose: handleClose
+    })
+    
+    const alert = getByTestId(container, 'notification-alert')
+    const closeButton = getByTestId(container, 'notification-close')
+    
+    expect(alert).toHaveAttribute('data-testid', 'notification-alert')
+    expect(closeButton).toHaveAttribute('type', 'button')
+    expect(closeButton).toHaveAttribute('aria-label', 'Close notification')
+  })
+})

package/src/components/molecules/popover/index.tsx

@@ -0,0 +1,175 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const popoverVariants = cva(
+  "absolute z-50 min-w-[8rem] max-w-[300px] rounded-md border bg-popover px-3 py-1.5 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      side: {
+        top: "-translate-y-2 bottom-full left-1/2 -translate-x-1/2",
+        bottom: "translate-y-2 top-full left-1/2 -translate-x-1/2",
+        left: "-translate-x-2 right-full top-1/2 -translate-y-1/2",
+        right: "translate-x-2 left-full top-1/2 -translate-y-1/2",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+    },
+  }
+)
+
+const popoverContentVariants = cva(
+  "text-[var(--font-size-tiny)] leading-[var(--line-height-tiny)] text-popover-foreground",
+  {
+    variants: {
+      hasShortcut: {
+        true: "flex items-center gap-2",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      hasShortcut: false,
+    },
+  }
+)
+
+export interface PopoverProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof popoverVariants> {
+  label: React.ReactNode
+  shortcut?: string
+  children?: React.ReactNode
+  showOn?: "hover" | "click"
+  isAvailable?: boolean
+}
+
+const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
+  (
+    {
+      className,
+      side,
+      label,
+      shortcut,
+      children = "Hover this to see the popover",
+      showOn = "hover",
+      isAvailable = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLDivElement>(null)
+    const popoverRef = React.useRef<HTMLDivElement>(null)
+
+    const handleOpen = React.useCallback(() => {
+      setIsOpen(true)
+    }, [])
+
+    const handleClose = React.useCallback(() => {
+      setIsOpen(false)
+    }, [])
+
+    const handleMouseEnter = React.useCallback(() => {
+      if (showOn === "hover") {
+        handleOpen()
+      }
+    }, [showOn, handleOpen])
+
+    const handleMouseLeave = React.useCallback(() => {
+      if (showOn === "hover") {
+        handleClose()
+      }
+    }, [showOn, handleClose])
+
+    const handleClick = React.useCallback(() => {
+      if (showOn === "click") {
+        if (isOpen) {
+          handleClose()
+        } else {
+          handleOpen()
+        }
+      }
+    }, [showOn, isOpen, handleOpen, handleClose])
+
+    React.useEffect(() => {
+      const handleEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape" && isOpen) {
+          handleClose()
+        }
+      }
+
+      if (isOpen) {
+        document.addEventListener("keydown", handleEscape)
+        return () => document.removeEventListener("keydown", handleEscape)
+      }
+    }, [isOpen, handleClose])
+
+    React.useEffect(() => {
+      const handleOutsideClick = (event: MouseEvent) => {
+        if (
+          showOn === "click" &&
+          isOpen &&
+          triggerRef.current &&
+          popoverRef.current &&
+          !triggerRef.current.contains(event.target as Node) &&
+          !popoverRef.current.contains(event.target as Node)
+        ) {
+          handleClose()
+        }
+      }
+
+      if (isOpen && showOn === "click") {
+        document.addEventListener("mousedown", handleOutsideClick)
+        return () => document.removeEventListener("mousedown", handleOutsideClick)
+      }
+    }, [isOpen, showOn, handleClose])
+
+    if (!isAvailable) {
+      return <>{children}</>
+    }
+
+    return (
+      <div ref={ref} className="relative inline-block">
+        <div
+          ref={triggerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onClick={handleClick}
+          aria-describedby={isOpen ? "popover-content" : undefined}
+          className="cursor-pointer"
+        >
+          {children}
+        </div>
+        
+        {isOpen && (
+          <div
+            ref={popoverRef}
+            id="popover-content"
+            role="tooltip"
+            className={cn(
+              popoverVariants({ side, className }),
+              showOn === "hover" && "pointer-events-none"
+            )}
+            data-state="open"
+            data-side={side}
+            {...props}
+          >
+            <div className={cn(popoverContentVariants({ hasShortcut: Boolean(shortcut) }))}>
+              <span className="text-popover-foreground">{label}</span>
+              {shortcut && (
+                <span className="text-muted-foreground text-[var(--font-size-tiny)]">
+                  {shortcut}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+Popover.displayName = "Popover"
+
+export { Popover }