@dilipod/ui 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",
@@ -46,6 +46,9 @@
     "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap",
     "dev": "tsup --watch",
     "lint": "eslint src/",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "clean": "rm -rf dist",
@@ -89,9 +92,14 @@
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
     "@storybook/test": "8.6.14",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.21",
+    "jsdom": "^23.0.0",
     "playwright": "^1.57.0",
     "postcss": "^8.5.4",
     "react": "^19.0.0",
@@ -99,6 +107,8 @@
     "storybook": "8.6.14",
     "tailwindcss": "^4.1.8",
     "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vite": "^7.3.1",
+    "vitest": "^1.2.0"
   }
 }

package/src/__tests__/button.test.tsx

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Button, buttonVariants } from '../components/button'
+
+describe('Button', () => {
+  describe('Rendering', () => {
+    it('should render button with text', () => {
+      render(<Button>Click me</Button>)
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
+    })
+
+    it('should support custom HTML attributes', () => {
+      render(<Button data-testid="custom-button">Custom</Button>)
+      expect(screen.getByTestId('custom-button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Variants', () => {
+    it('should apply default variant styles', () => {
+      render(<Button>Default</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('bg-')
+    })
+
+    it('should apply outline variant styles', () => {
+      render(<Button variant="outline">Outline</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('border')
+    })
+
+    it('should apply ghost variant styles', () => {
+      render(<Button variant="ghost">Ghost</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('hover:bg-')
+    })
+
+    it('should apply destructive variant styles', () => {
+      render(<Button variant="destructive">Delete</Button>)
+      const button = screen.getByRole('button')
+      // Destructive uses red colors
+      expect(button.className).toContain('red')
+    })
+
+    it('should apply link variant styles', () => {
+      render(<Button variant="link">Link</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('underline')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('should apply default size', () => {
+      render(<Button>Default Size</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('h-')
+    })
+
+    it('should apply small size', () => {
+      render(<Button size="sm">Small</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('h-')
+    })
+
+    it('should apply large size', () => {
+      render(<Button size="lg">Large</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('h-')
+    })
+
+    it('should apply icon size', () => {
+      render(<Button size="icon">🔍</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('w-')
+    })
+  })
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      render(<Button disabled>Disabled</Button>)
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('should show loading state', () => {
+      render(<Button loading>Loading</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toBeDisabled()
+      // Should have loading spinner
+      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
+    })
+
+    it('should not be clickable when loading', () => {
+      const onClick = vi.fn()
+      render(<Button loading onClick={onClick}>Loading</Button>)
+      
+      fireEvent.click(screen.getByRole('button'))
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Events', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = vi.fn()
+      render(<Button onClick={onClick}>Click</Button>)
+      
+      fireEvent.click(screen.getByRole('button'))
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClick when disabled', () => {
+      const onClick = vi.fn()
+      render(<Button disabled onClick={onClick}>Disabled</Button>)
+      
+      fireEvent.click(screen.getByRole('button'))
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Custom className', () => {
+    it('should merge custom className with default styles', () => {
+      render(<Button className="custom-class">Custom</Button>)
+      const button = screen.getByRole('button')
+      expect(button.className).toContain('custom-class')
+    })
+  })
+
+  describe('Button type', () => {
+    it('should support type="submit"', () => {
+      render(<Button type="submit">Submit</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+    })
+
+    it('should support type="button" explicitly', () => {
+      render(<Button type="button">Button</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+    })
+  })
+
+  describe('buttonVariants helper', () => {
+    it('should generate correct class names', () => {
+      const classes = buttonVariants({ variant: 'default', size: 'default' })
+      expect(typeof classes).toBe('string')
+      expect(classes.length).toBeGreaterThan(0)
+    })
+
+    it('should handle different combinations', () => {
+      const combinations = [
+        { variant: 'default' as const, size: 'sm' as const },
+        { variant: 'outline' as const, size: 'lg' as const },
+        { variant: 'ghost' as const, size: 'icon' as const },
+      ]
+
+      combinations.forEach(combo => {
+        const classes = buttonVariants(combo)
+        expect(typeof classes).toBe('string')
+      })
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should support aria-label', () => {
+      render(<Button aria-label="Close dialog">×</Button>)
+      expect(screen.getByRole('button', { name: 'Close dialog' })).toBeInTheDocument()
+    })
+
+    it('should support aria-disabled when disabled', () => {
+      render(<Button disabled>Disabled</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveAttribute('disabled')
+    })
+  })
+})

package/src/__tests__/scenarios-manager.test.tsx

@@ -0,0 +1,260 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ScenariosManager, type Scenario, type ScenarioType } from '../components/scenarios-manager'
+
+describe('ScenariosManager', () => {
+  const mockOnAdd = vi.fn()
+  const mockOnUpdate = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnComplete = vi.fn()
+
+  const defaultProps = {
+    scenarios: [],
+    onAdd: mockOnAdd,
+    onUpdate: mockOnUpdate,
+    onDelete: mockOnDelete,
+  }
+
+  const mockScenarios: Scenario[] = [
+    {
+      id: '1',
+      type: 'default_behavior' as ScenarioType,
+      situation: 'Invoice amount is over $10,000',
+      action: 'Flag for manual review',
+    },
+    {
+      id: '2',
+      type: 'escalation' as ScenarioType,
+      situation: 'Email is marked as spam',
+      action: 'Ignore and archive',
+    },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockOnAdd.mockResolvedValue(undefined)
+    mockOnUpdate.mockResolvedValue(undefined)
+    mockOnDelete.mockResolvedValue(undefined)
+    mockOnComplete.mockResolvedValue(undefined)
+  })
+
+  describe('Empty State', () => {
+    it('should show empty state when no scenarios exist', () => {
+      render(<ScenariosManager {...defaultProps} />)
+      
+      expect(screen.getByText('No scenarios yet. Add rules for how the worker should handle edge cases.')).toBeInTheDocument()
+    })
+
+    it('should show "Add your first scenario" button in empty state', () => {
+      render(<ScenariosManager {...defaultProps} />)
+      
+      expect(screen.getByText('Add your first scenario')).toBeInTheDocument()
+    })
+  })
+
+  describe('Displaying Scenarios', () => {
+    it('should render list of scenarios', () => {
+      render(<ScenariosManager {...defaultProps} scenarios={mockScenarios} />)
+      
+      expect(screen.getByText('Invoice amount is over $10,000')).toBeInTheDocument()
+      expect(screen.getByText('Email is marked as spam')).toBeInTheDocument()
+    })
+
+    it('should show scenario type badges', () => {
+      render(<ScenariosManager {...defaultProps} scenarios={mockScenarios} />)
+      
+      expect(screen.getByText('Handle it')).toBeInTheDocument()
+      expect(screen.getByText('Ask me first')).toBeInTheDocument()
+    })
+
+    it('should display When and Action for each scenario', () => {
+      render(<ScenariosManager {...defaultProps} scenarios={mockScenarios} />)
+      
+      const whenLabels = screen.getAllByText(/When:/)
+      const actionLabels = screen.getAllByText(/Action:/)
+      expect(whenLabels.length).toBe(2)
+      expect(actionLabels.length).toBe(2)
+    })
+  })
+
+  describe('Adding Scenarios', () => {
+    it('should show add scenario modal when clicking add button', async () => {
+      render(<ScenariosManager {...defaultProps} />)
+      
+      await userEvent.click(screen.getByText('Add your first scenario'))
+      
+      // Modal should appear with a dialog role
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      })
+    })
+
+    it('should close modal when clicking close', async () => {
+      render(<ScenariosManager {...defaultProps} />)
+      
+      await userEvent.click(screen.getByText('Add your first scenario'))
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      })
+      
+      // Cancel should close the modal
+      const cancelButton = screen.getByText('Cancel')
+      await userEvent.click(cancelButton)
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should open add modal dialog', async () => {
+      render(<ScenariosManager {...defaultProps} />)
+      
+      await userEvent.click(screen.getByText('Add your first scenario'))
+      
+      // Should show modal (dialog role)
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Deleting Scenarios', () => {
+    it('should have delete buttons for each scenario', () => {
+      render(<ScenariosManager {...defaultProps} scenarios={mockScenarios} />)
+      
+      // Should render multiple buttons (edit + delete for each scenario)
+      const allButtons = screen.getAllByRole('button')
+      // At minimum: add button + (edit + delete) for each scenario = 1 + 4 = 5
+      expect(allButtons.length).toBeGreaterThanOrEqual(4)
+    })
+  })
+
+  describe('Completion Feature', () => {
+    it('should not show complete button when below minimum scenarios', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          scenarios={[mockScenarios[0]]}
+          onComplete={mockOnComplete}
+          minScenariosToComplete={2}
+        />
+      )
+      
+      expect(screen.queryByText('Mark complete')).not.toBeInTheDocument()
+    })
+
+    it('should show complete button when minimum scenarios are added', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          scenarios={mockScenarios}
+          onComplete={mockOnComplete}
+          minScenariosToComplete={2}
+        />
+      )
+      
+      expect(screen.getByText('Mark complete')).toBeInTheDocument()
+    })
+
+    it('should call onComplete when clicking complete button', async () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          scenarios={mockScenarios}
+          onComplete={mockOnComplete}
+          minScenariosToComplete={1}
+        />
+      )
+      
+      await userEvent.click(screen.getByText('Mark complete'))
+      
+      await waitFor(() => {
+        expect(mockOnComplete).toHaveBeenCalled()
+      })
+    })
+
+    it('should show completed state when isComplete is true', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          scenarios={mockScenarios}
+          isComplete={true}
+        />
+      )
+      
+      expect(screen.getByText('Scenarios completed')).toBeInTheDocument()
+    })
+
+    it('should not show complete button when already complete', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          scenarios={mockScenarios}
+          onComplete={mockOnComplete}
+          isComplete={true}
+          minScenariosToComplete={1}
+        />
+      )
+      
+      expect(screen.queryByText('Mark complete')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Suggestions', () => {
+    const suggestions = [
+      { situation: 'Invoice is missing PO number', type: 'default_behavior' as ScenarioType, action: 'Request PO' },
+      { situation: 'Duplicate invoice detected', type: 'escalation' as ScenarioType, action: 'Flag for review' },
+    ]
+
+    it('should display scenario suggestions when provided', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          suggestions={suggestions}
+        />
+      )
+      
+      expect(screen.getByText('Invoice is missing PO number')).toBeInTheDocument()
+      expect(screen.getByText('Duplicate invoice detected')).toBeInTheDocument()
+    })
+
+    it('should render suggestion buttons', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          suggestions={suggestions}
+        />
+      )
+      
+      // Suggestions should be clickable buttons
+      const suggestionButton = screen.getByText('Invoice is missing PO number').closest('button')
+      expect(suggestionButton).toBeInTheDocument()
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should render with isLoading prop', () => {
+      render(
+        <ScenariosManager
+          {...defaultProps}
+          isLoading={true}
+        />
+      )
+      
+      // Component should still render with loading state
+      expect(screen.getByText('Add your first scenario')).toBeInTheDocument()
+    })
+  })
+})
+
+describe('Scenario Type Configuration', () => {
+  it('should have all four scenario types', () => {
+    const types: ScenarioType[] = ['escalation', 'default_behavior', 'quality_check', 'edge_case']
+    
+    types.forEach(type => {
+      expect(types).toContain(type)
+    })
+  })
+})

package/src/__tests__/setup.ts

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})

package/src/components/button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
+import { Slot, Slottable } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '../lib/utils'
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         default:
           'bg-[var(--black)] text-white border-2 border-[var(--black)] hover:bg-gray-800 hover:border-gray-800 active:scale-95',
         primary:
-          'bg-[var(--cyan)] text-[var(--black)] border-2 border-[var(--cyan)] hover:bg-[var(--cyan-dark)] hover:border-[var(--cyan-dark)] active:scale-95',
+          'bg-[var(--cyan)] text-white border-2 border-[var(--cyan)] hover:bg-[var(--cyan-dark)] hover:border-[var(--cyan-dark)] active:scale-95',
         destructive:
           'bg-red-600 text-white border-2 border-red-600 hover:bg-red-700 hover:border-red-700 active:scale-95',
         outline:
@@ -48,13 +48,57 @@ export interface ButtonProps
   loading?: boolean
   /** Loading text (defaults to current children text) */
   loadingText?: string
+  /** Icon to show before the text */
+  icon?: React.ReactNode
+  /** Icon to show after the text */
+  iconAfter?: React.ReactNode
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, loadingText, children, disabled, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, loadingText, icon, iconAfter, children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button'
     const isDisabled = disabled || loading
     
+    // Loading spinner component
+    const LoadingSpinner = (
+      <svg
+        className="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    )
+
+    // When using asChild with icons, we need to use Slottable
+    if (asChild && (icon || iconAfter || loading)) {
+      return (
+        <Slot
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          {loading && LoadingSpinner}
+          {!loading && icon}
+          <Slottable>{children}</Slottable>
+          {!loading && iconAfter}
+        </Slot>
+      )
+    }
+    
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
@@ -62,29 +106,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={isDisabled}
         {...props}
       >
-        {loading && (
-          <svg
-            className="animate-spin h-4 w-4"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
+        {loading && LoadingSpinner}
+        {!loading && icon}
         {loading ? loadingText || children : children}
+        {!loading && iconAfter}
       </Comp>
     )
   }