@startsimpli/ui 0.1.0 → 0.1.3

package/src/__mocks__/next/navigation.js

@@ -0,0 +1,18 @@
+const mockReplace = jest.fn()
+const mockPush = jest.fn()
+const mockSearchParams = new URLSearchParams()
+const mockPathname = '/test-path'
+
+module.exports = {
+  useSearchParams: jest.fn(() => mockSearchParams),
+  useRouter: jest.fn(() => ({
+    replace: mockReplace,
+    push: mockPush,
+    back: jest.fn(),
+    forward: jest.fn(),
+    prefetch: jest.fn(),
+    refresh: jest.fn(),
+  })),
+  usePathname: jest.fn(() => mockPathname),
+  useParams: jest.fn(() => ({})),
+}

package/src/components/__tests__/safe-html.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react'
+import { SafeHtml } from '../safe-html'
+
+describe('SafeHtml', () => {
+  it('renders safe HTML content', () => {
+    render(<SafeHtml html="<p>Hello <strong>world</strong></p>" />)
+    expect(screen.getByText(/Hello/)).toBeInTheDocument()
+    expect(screen.getByText(/world/)).toBeInTheDocument()
+  })
+
+  it('strips script tags (XSS protection)', () => {
+    const { container } = render(
+      <SafeHtml html='<p>Safe</p><script>alert("xss")</script>' />
+    )
+    expect(container.querySelector('script')).toBeNull()
+    expect(container.textContent).toContain('Safe')
+  })
+
+  it('strips event handlers (XSS protection)', () => {
+    const { container } = render(
+      <SafeHtml html='<img src="x" onerror="alert(1)">' />
+    )
+    const img = container.querySelector('img')
+    expect(img?.getAttribute('onerror')).toBeNull()
+  })
+
+  it('preserves className prop', () => {
+    const { container } = render(
+      <SafeHtml html="<p>Test</p>" className="prose" />
+    )
+    expect(container.firstChild).toHaveAttribute('class', 'prose')
+  })
+
+  it('renders with custom tag via as prop', () => {
+    const { container } = render(
+      <SafeHtml html="<p>Test</p>" as="section" />
+    )
+    expect(container.querySelector('section')).not.toBeNull()
+  })
+
+  it('handles empty string', () => {
+    const { container } = render(<SafeHtml html="" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})

package/src/components/__tests__/states.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ErrorState } from '../states/ErrorState'
+import { EmptyState } from '../states/EmptyState'
+
+describe('ErrorState', () => {
+  it('renders title and message', () => {
+    render(<ErrorState message="Something broke" />)
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('Something broke')).toBeInTheDocument()
+  })
+
+  it('renders custom title', () => {
+    render(<ErrorState title="Custom Error" message="Details here" />)
+    expect(screen.getByText('Custom Error')).toBeInTheDocument()
+  })
+
+  it('renders with role="alert" and aria-live', () => {
+    const { container } = render(<ErrorState message="Error occurred" />)
+    const alertEl = container.querySelector('[role="alert"]')
+    expect(alertEl).toBeInTheDocument()
+    expect(alertEl).toHaveAttribute('aria-live', 'assertive')
+  })
+
+  it('renders retry button when onRetry is provided', () => {
+    const onRetry = jest.fn()
+    render(<ErrorState message="Failed" onRetry={onRetry} />)
+
+    const retryButton = screen.getByLabelText('Retry loading content')
+    expect(retryButton).toBeInTheDocument()
+
+    fireEvent.click(retryButton)
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render retry button without onRetry', () => {
+    render(<ErrorState message="Failed" />)
+    expect(screen.queryByText('Try Again')).not.toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <ErrorState message="Error" className="custom-class" />
+    )
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})
+
+describe('EmptyState', () => {
+  it('renders title', () => {
+    render(<EmptyState title="No items" />)
+    expect(screen.getByText('No items')).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(
+      <EmptyState title="No items" description="Add some items to get started" />
+    )
+    expect(screen.getByText('Add some items to get started')).toBeInTheDocument()
+  })
+
+  it('does not render description when not provided', () => {
+    const { container } = render(<EmptyState title="No items" />)
+    const paragraphs = container.querySelectorAll('p')
+    expect(paragraphs).toHaveLength(0)
+  })
+
+  it('renders action button when action is provided', () => {
+    const onClick = jest.fn()
+    render(
+      <EmptyState
+        title="No items"
+        action={{ label: 'Add Item', onClick }}
+      />
+    )
+
+    const button = screen.getByLabelText('Add Item')
+    expect(button).toBeInTheDocument()
+
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render action button without action', () => {
+    render(<EmptyState title="No items" />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('has role="status" and aria-live="polite"', () => {
+    const { container } = render(<EmptyState title="Empty" />)
+    const statusEl = container.querySelector('[role="status"]')
+    expect(statusEl).toBeInTheDocument()
+    expect(statusEl).toHaveAttribute('aria-live', 'polite')
+  })
+})

package/src/components/__tests__/status-badge.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from '@testing-library/react'
+import { StatusBadge } from '../badge/StatusBadge'
+
+type TestStatus = 'active' | 'inactive' | 'pending'
+
+const testConfig: Record<TestStatus, { label: string; className: string }> = {
+  active: {
+    label: 'Active',
+    className: 'bg-green-100 text-green-700',
+  },
+  inactive: {
+    label: 'Inactive',
+    className: 'bg-gray-100 text-gray-700',
+  },
+  pending: {
+    label: 'Pending',
+    className: 'bg-yellow-100 text-yellow-700',
+  },
+}
+
+describe('StatusBadge', () => {
+  it('renders the correct label for a given status', () => {
+    render(
+      <StatusBadge<TestStatus>
+        status="active"
+        config={testConfig}
+      />
+    )
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('applies the correct className for a given status', () => {
+    render(
+      <StatusBadge<TestStatus>
+        status="inactive"
+        config={testConfig}
+      />
+    )
+    const badge = screen.getByText('Inactive')
+    expect(badge).toHaveClass('bg-gray-100')
+    expect(badge).toHaveClass('text-gray-700')
+  })
+
+  it('renders each status correctly', () => {
+    const { rerender } = render(
+      <StatusBadge<TestStatus> status="active" config={testConfig} />
+    )
+    expect(screen.getByText('Active')).toBeInTheDocument()
+
+    rerender(
+      <StatusBadge<TestStatus> status="pending" config={testConfig} />
+    )
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+    expect(screen.getByText('Pending')).toHaveClass('bg-yellow-100')
+  })
+
+  it('renders raw status string for unknown status', () => {
+    render(
+      <StatusBadge
+        status="unknown"
+        config={testConfig as Record<string, { label: string; className: string }>}
+      />
+    )
+    expect(screen.getByText('unknown')).toBeInTheDocument()
+    expect(screen.getByText('unknown')).toHaveClass('bg-gray-100')
+  })
+
+  it('applies sm size class', () => {
+    render(
+      <StatusBadge<TestStatus>
+        status="active"
+        config={testConfig}
+        size="sm"
+      />
+    )
+    const badge = screen.getByText('Active')
+    expect(badge).toHaveClass('px-2')
+  })
+
+  it('applies md size class by default', () => {
+    render(
+      <StatusBadge<TestStatus>
+        status="active"
+        config={testConfig}
+      />
+    )
+    const badge = screen.getByText('Active')
+    expect(badge).toHaveClass('px-2.5')
+  })
+
+  it('applies custom className', () => {
+    render(
+      <StatusBadge<TestStatus>
+        status="active"
+        config={testConfig}
+        className="custom-badge"
+      />
+    )
+    expect(screen.getByText('Active')).toHaveClass('custom-badge')
+  })
+})

package/src/components/__tests__/toast.test.tsx

@@ -0,0 +1,124 @@
+import { renderHook, act } from '@testing-library/react'
+import { useToast, clearAllToasts, reducer } from '../toast/use-toast'
+import type { ToasterToast } from '../toast/use-toast'
+
+beforeEach(() => {
+  clearAllToasts()
+})
+
+describe('useToast', () => {
+  it('adds a toast', () => {
+    const { result } = renderHook(() => useToast())
+
+    act(() => {
+      result.current.toast({ title: 'Hello', description: 'World' })
+    })
+
+    expect(result.current.toasts).toHaveLength(1)
+    expect(result.current.toasts[0].title).toBe('Hello')
+    expect(result.current.toasts[0].description).toBe('World')
+  })
+
+  it('adds toast with variant', () => {
+    const { result } = renderHook(() => useToast())
+
+    act(() => {
+      result.current.toast({ title: 'Error', variant: 'destructive' })
+    })
+
+    expect(result.current.toasts[0].variant).toBe('destructive')
+  })
+
+  it('dismisses a specific toast', () => {
+    jest.useFakeTimers()
+    const { result } = renderHook(() => useToast())
+
+    let toastId: string
+    act(() => {
+      // Use duration: 0 to prevent auto-dismiss interference
+      const t = result.current.toast({ title: 'Dismiss me', duration: 0 })
+      toastId = t.id
+    })
+
+    expect(result.current.toasts).toHaveLength(1)
+
+    act(() => {
+      result.current.dismiss(toastId)
+    })
+
+    // Advance past the dismiss animation delay
+    act(() => {
+      jest.advanceTimersByTime(500)
+    })
+
+    expect(result.current.toasts).toHaveLength(0)
+    jest.useRealTimers()
+  })
+
+  it('clears all toasts', () => {
+    const { result } = renderHook(() => useToast())
+
+    act(() => {
+      result.current.toast({ title: 'One', duration: 0 })
+      result.current.toast({ title: 'Two', duration: 0 })
+      result.current.toast({ title: 'Three', duration: 0 })
+    })
+
+    expect(result.current.toasts.length).toBeGreaterThanOrEqual(1)
+
+    act(() => {
+      result.current.clear()
+    })
+
+    expect(result.current.toasts).toHaveLength(0)
+  })
+})
+
+describe('reducer', () => {
+  const makeToast = (id: string, title: string): ToasterToast => ({
+    id,
+    title,
+  })
+
+  it('ADD_TOAST adds to front of list', () => {
+    const state = { toasts: [makeToast('1', 'First')] }
+    const result = reducer(state, {
+      type: 'ADD_TOAST',
+      toast: makeToast('2', 'Second'),
+    })
+    expect(result.toasts[0].title).toBe('Second')
+    expect(result.toasts).toHaveLength(2)
+  })
+
+  it('UPDATE_TOAST updates matching toast', () => {
+    const state = { toasts: [makeToast('1', 'Original')] }
+    const result = reducer(state, {
+      type: 'UPDATE_TOAST',
+      toast: { id: '1', title: 'Updated' },
+    })
+    expect(result.toasts[0].title).toBe('Updated')
+  })
+
+  it('REMOVE_TOAST with undefined removes all', () => {
+    const state = {
+      toasts: [makeToast('1', 'A'), makeToast('2', 'B')],
+    }
+    const result = reducer(state, {
+      type: 'REMOVE_TOAST',
+      toastId: undefined,
+    })
+    expect(result.toasts).toHaveLength(0)
+  })
+
+  it('REMOVE_TOAST with id removes specific toast', () => {
+    const state = {
+      toasts: [makeToast('1', 'A'), makeToast('2', 'B')],
+    }
+    const result = reducer(state, {
+      type: 'REMOVE_TOAST',
+      toastId: '1',
+    })
+    expect(result.toasts).toHaveLength(1)
+    expect(result.toasts[0].id).toBe('2')
+  })
+})

package/src/components/badge/StatusBadge.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface StatusBadgeConfig {
+  label: string
+  className: string
+}
+
+export interface StatusBadgeProps<T extends string> {
+  status: T
+  config: Record<T, StatusBadgeConfig>
+  size?: 'sm' | 'md'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-0.5 text-xs',
+}
+
+export function StatusBadge<T extends string>({
+  status,
+  config,
+  size = 'md',
+  className,
+}: StatusBadgeProps<T>) {
+  const entry = config[status]
+
+  if (!entry) {
+    return (
+      <span
+        className={cn(
+          'inline-flex items-center rounded-full font-medium bg-gray-100 text-gray-700 border border-gray-200',
+          sizeClasses[size],
+          className
+        )}
+      >
+        {status}
+      </span>
+    )
+  }
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full font-medium',
+        sizeClasses[size],
+        entry.className,
+        className
+      )}
+    >
+      {entry.label}
+    </span>
+  )
+}

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from './StatusBadge'
+export type { StatusBadgeProps, StatusBadgeConfig } from './StatusBadge'

package/src/components/dialog/BaseDialog.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cn } from '../../lib/utils'
+
+interface DialogContextValue {
+  isLoading: boolean
+  setIsLoading: (loading: boolean) => void
+  canClose: boolean
+  setCanClose: (canClose: boolean) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null)
+
+function useDialogContext() {
+  const context = React.useContext(DialogContext)
+  if (!context) {
+    throw new Error('Dialog components must be used within BaseDialog')
+  }
+  return context
+}
+
+export interface BaseDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  children: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
+  loading?: boolean
+}
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+}
+
+export function BaseDialog({
+  open,
+  onOpenChange,
+  children,
+  size = 'md',
+  loading = false,
+}: BaseDialogProps) {
+  const [isLoading, setIsLoading] = React.useState(loading)
+  const [canClose, setCanClose] = React.useState(!loading)
+
+  React.useEffect(() => {
+    setIsLoading(loading)
+    setCanClose(!loading)
+  }, [loading])
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (!newOpen && !canClose) {
+        return
+      }
+      onOpenChange(newOpen)
+    },
+    [canClose, onOpenChange]
+  )
+
+  const contextValue = React.useMemo(
+    () => ({ isLoading, setIsLoading, canClose, setCanClose }),
+    [isLoading, canClose]
+  )
+
+  return (
+    <DialogContext.Provider value={contextValue}>
+      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange}>
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+          <DialogPrimitive.Content
+            className={cn(
+              'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+              sizeClasses[size]
+            )}
+            onInteractOutside={(e) => {
+              if (!canClose) e.preventDefault()
+            }}
+            onEscapeKeyDown={(e) => {
+              if (!canClose) e.preventDefault()
+            }}
+          >
+            {children}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
+    </DialogContext.Provider>
+  )
+}
+
+export interface DialogHeaderProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function DialogHeader({ children, className }: DialogHeaderProps) {
+  const { canClose } = useDialogContext()
+
+  return (
+    <div className={cn('flex items-start justify-between', className)}>
+      <div className="flex flex-col space-y-1.5">{children}</div>
+      <DialogPrimitive.Close
+        className={cn(
+          'rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
+          !canClose && 'pointer-events-none opacity-30'
+        )}
+        disabled={!canClose}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </div>
+  )
+}
+
+export interface DialogTitleProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function DialogTitle({ children, className }: DialogTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        className
+      )}
+    >
+      {children}
+    </DialogPrimitive.Title>
+  )
+}
+
+export interface DialogBodyProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function DialogBody({ children, className }: DialogBodyProps) {
+  return (
+    <div className={cn('py-4 overflow-y-auto', className)}>{children}</div>
+  )
+}
+
+export interface DialogFooterProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function DialogFooter({ children, className }: DialogFooterProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Compound component pattern
+BaseDialog.Header = DialogHeader
+BaseDialog.Title = DialogTitle
+BaseDialog.Body = DialogBody
+BaseDialog.Footer = DialogFooter
+
+export { useDialogContext }

package/src/components/dialog/index.ts

@@ -0,0 +1,8 @@
+export { BaseDialog, useDialogContext } from './BaseDialog'
+export type {
+  BaseDialogProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogBodyProps,
+  DialogFooterProps,
+} from './BaseDialog'

package/src/components/index.ts

@@ -6,6 +6,10 @@ export { UnifiedTable } from './unified-table'
 export type { UnifiedTableProps } from './unified-table'
 export * from './unified-table/types'
 
+// Export StandardTableToolbar for app-level table toolbars
+export { StandardTableToolbar } from './unified-table'
+export type { StandardTableToolbarProps } from './unified-table'
+
 // MobileView - Card re-exported under non-conflicting names
 export { MobileView, Card as MobileCard, CardActions as MobileCardActions } from './unified-table'
 export type {
@@ -48,3 +52,24 @@ export * from './unified-table/utils'
 
 // Export Navigation
 export * from './navigation/sidebar'
+
+// HTML rendering with XSS protection
+export { SafeHtml } from './safe-html'
+
+// Toast system
+export * from './toast'
+
+// State components (ErrorState, EmptyState)
+export * from './states'
+
+// BaseDialog compound component
+export * from './dialog'
+
+// StatusBadge
+export * from './badge'
+
+// Loading skeletons
+export * from './loading'
+
+// Wizard / StepIndicator
+export * from './wizard'