@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/dashboard/index.ts

@@ -0,0 +1,20 @@
+export { MetricCard } from './MetricCard'
+export type { MetricCardProps, MetricCardTrend } from './MetricCard'
+
+export { PeriodSelector } from './PeriodSelector'
+export type { PeriodSelectorProps, PeriodOption } from './PeriodSelector'
+
+export { SparklineTrend } from './SparklineTrend'
+export type { SparklineTrendProps } from './SparklineTrend'
+
+export { DashboardGrid } from './DashboardGrid'
+export type { DashboardGridProps } from './DashboardGrid'
+
+export { DashboardSection } from './DashboardSection'
+export type { DashboardSectionProps } from './DashboardSection'
+
+export { PipelineFunnel } from './PipelineFunnel'
+export type { PipelineFunnelProps, FunnelStage } from './PipelineFunnel'
+
+export { TopCampaigns } from './TopCampaigns'
+export type { TopCampaignsProps, TopCampaign } from './TopCampaigns'

package/src/components/dialog/ConfirmDialog.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import * as React from 'react'
+import { Loader2 } from 'lucide-react'
+import { BaseDialog } from './BaseDialog'
+import { Button } from '../ui/button'
+
+export interface ConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void | Promise<void>
+  title: string
+  description?: string | React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  loading?: boolean
+}
+
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+  loading = false,
+}: ConfirmDialogProps) {
+  const handleClose = () => {
+    if (loading) return
+    onClose()
+  }
+
+  return (
+    <BaseDialog
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) handleClose()
+      }}
+      size="sm"
+      loading={loading}
+    >
+      <BaseDialog.Header>
+        <BaseDialog.Title>{title}</BaseDialog.Title>
+      </BaseDialog.Header>
+      {description && (
+        <BaseDialog.Body>
+          {typeof description === 'string' ? (
+            <p className="text-sm text-gray-600">{description}</p>
+          ) : (
+            description
+          )}
+        </BaseDialog.Body>
+      )}
+      <BaseDialog.Footer>
+        <Button variant="outline" onClick={handleClose} disabled={loading}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant={destructive ? 'destructive' : 'default'}
+          onClick={onConfirm}
+          disabled={loading}
+        >
+          {loading && <Loader2 className="w-4 h-4 animate-spin mr-2" />}
+          {confirmLabel}
+        </Button>
+      </BaseDialog.Footer>
+    </BaseDialog>
+  )
+}

package/src/components/dialog/__tests__/ConfirmDialog.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ConfirmDialog } from '../ConfirmDialog'
+
+// Mock Radix portal to render inline
+jest.mock('@radix-ui/react-dialog', () => {
+  const actual = jest.requireActual('@radix-ui/react-dialog')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+describe('ConfirmDialog', () => {
+  const defaultProps = {
+    open: true,
+    onClose: jest.fn(),
+    onConfirm: jest.fn(),
+    title: 'Delete item?',
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders title', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    expect(screen.getByText('Delete item?')).toBeInTheDocument()
+  })
+
+  it('renders string description', () => {
+    render(
+      <ConfirmDialog {...defaultProps} description="This cannot be undone." />
+    )
+    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument()
+  })
+
+  it('renders ReactNode description', () => {
+    render(
+      <ConfirmDialog
+        {...defaultProps}
+        description={<span data-testid="custom">Custom content</span>}
+      />
+    )
+    expect(screen.getByTestId('custom')).toBeInTheDocument()
+  })
+
+  it('renders default button labels', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    expect(screen.getByText('Confirm')).toBeInTheDocument()
+    expect(screen.getByText('Cancel')).toBeInTheDocument()
+  })
+
+  it('renders custom button labels', () => {
+    render(
+      <ConfirmDialog
+        {...defaultProps}
+        confirmLabel="Delete"
+        cancelLabel="Keep"
+      />
+    )
+    expect(screen.getByText('Delete')).toBeInTheDocument()
+    expect(screen.getByText('Keep')).toBeInTheDocument()
+  })
+
+  it('calls onConfirm when confirm button is clicked', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    fireEvent.click(screen.getByText('Confirm'))
+    expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClose when cancel button is clicked', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    fireEvent.click(screen.getByText('Cancel'))
+    expect(defaultProps.onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables buttons when loading', () => {
+    render(<ConfirmDialog {...defaultProps} loading />)
+    const confirmBtn = screen.getByText('Confirm').closest('button')
+    const cancelBtn = screen.getByText('Cancel').closest('button')
+    expect(confirmBtn).toBeDisabled()
+    expect(cancelBtn).toBeDisabled()
+  })
+
+  it('shows spinner when loading', () => {
+    const { container } = render(<ConfirmDialog {...defaultProps} loading />)
+    const spinner = container.querySelector('.animate-spin')
+    expect(spinner).toBeInTheDocument()
+  })
+
+  it('does not call onClose when cancel clicked during loading', () => {
+    render(<ConfirmDialog {...defaultProps} loading />)
+    // The button is disabled so the click handler won't fire,
+    // but also handleClose guards against it
+    const cancelBtn = screen.getByText('Cancel').closest('button')!
+    fireEvent.click(cancelBtn)
+    expect(defaultProps.onClose).not.toHaveBeenCalled()
+  })
+
+  it('applies destructive variant to confirm button', () => {
+    render(<ConfirmDialog {...defaultProps} destructive />)
+    const confirmBtn = screen.getByText('Confirm').closest('button')
+    expect(confirmBtn?.className).toMatch(/destructive/)
+  })
+
+  it('applies default variant when not destructive', () => {
+    render(<ConfirmDialog {...defaultProps} />)
+    const confirmBtn = screen.getByText('Confirm').closest('button')
+    expect(confirmBtn?.className).not.toMatch(/destructive/)
+  })
+
+  it('does not render body when no description provided', () => {
+    const { container } = render(<ConfirmDialog {...defaultProps} />)
+    // Body has class py-4, should not exist
+    expect(container.querySelector('.py-4')).not.toBeInTheDocument()
+  })
+
+  it('handles async onConfirm', async () => {
+    const asyncConfirm = jest.fn().mockResolvedValue(undefined)
+    render(<ConfirmDialog {...defaultProps} onConfirm={asyncConfirm} />)
+    fireEvent.click(screen.getByText('Confirm'))
+    await waitFor(() => {
+      expect(asyncConfirm).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/components/dialog/index.ts

@@ -6,3 +6,6 @@ export type {
   DialogBodyProps,
   DialogFooterProps,
 } from './BaseDialog'
+
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps } from './ConfirmDialog'