@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/index.ts

@@ -76,3 +76,49 @@ export * from './wizard'
 
 // Account (profile + password forms)
 export * from './account'
+
+// Compose flow (auto-save, header, status, confirmation dialog)
+export * from './compose'
+
+// Email Editor (block-based email builder with drag-drop, undo/redo, HTML renderer)
+export * from './email-editor'
+
+// Email dialogs (schedule, test send, preview, template picker, merge fields)
+export * from './email-dialogs'
+
+// Dashboard components (MetricCard, PeriodSelector, SparklineTrend, DashboardGrid, DashboardSection)
+export * from './dashboard'
+
+// Enrichment components (QualityBadge, EnrichButton, EnrichmentProgress)
+export * from './enrichment'
+
+// Integrations (IntegrationCard, ConnectionStatus)
+export * from './integrations'
+
+// Command Palette
+export * from './command-palette'
+
+// Settings components (SettingsLayout, SettingsNav, SettingsCard)
+export * from './settings'
+
+// Kanban board layout
+export * from './kanban'
+
+// List components (ListCard, CreateListDialog)
+export * from './lists'
+
+// Pipeline components (StageTransitionModal)
+export * from './pipeline'
+
+// Activity components (timeline, quick log, log dialog)
+export { ActivityTimeline } from './ActivityTimeline'
+export type { ActivityTimelineProps, ActivityTimelineItem } from './ActivityTimeline'
+export { QuickLogButtons } from './QuickLogButtons'
+export type { QuickLogButtonsProps, QuickLogAction } from './QuickLogButtons'
+export { LogActivityDialog } from './LogActivityDialog'
+export type {
+  LogActivityDialogProps,
+  LogActivityFormData,
+  ActivityTypeOption,
+  OutcomeOption,
+} from './LogActivityDialog'

package/src/components/integrations/ConnectionStatus.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export interface ConnectionStatusProps {
+  providerName: string
+  providerIcon: React.ElementType
+  connected: boolean
+  accountLabel?: string
+  onConnect?: () => void
+  onDisconnect?: () => void
+  isLoading?: boolean
+  className?: string
+}
+
+export function ConnectionStatus({
+  providerName,
+  providerIcon: Icon,
+  connected,
+  accountLabel,
+  onConnect,
+  onDisconnect,
+  isLoading = false,
+  className,
+}: ConnectionStatusProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between rounded-lg border p-4',
+        className
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center">
+          <Icon className="w-5 h-5 text-gray-600" />
+        </div>
+        <div>
+          <p className="text-sm font-medium">{providerName}</p>
+          {connected && accountLabel && (
+            <p className="text-xs text-muted-foreground">{accountLabel}</p>
+          )}
+          {!connected && (
+            <p className="text-xs text-muted-foreground">Not connected</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        {isLoading ? (
+          <button
+            disabled
+            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-400 cursor-not-allowed"
+          >
+            <Loader2 className="w-3 h-3 animate-spin" />
+            Loading...
+          </button>
+        ) : connected ? (
+          <button
+            onClick={onDisconnect}
+            className="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+          >
+            Disconnect
+          </button>
+        ) : (
+          <button
+            onClick={onConnect}
+            className="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Connect
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/integrations/IntegrationCard.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export type IntegrationStatus = 'connected' | 'available' | 'coming-soon'
+
+export interface IntegrationCardProps {
+  name: string
+  description: string
+  icon: React.ElementType
+  status: IntegrationStatus
+  onClick?: () => void
+  lastSync?: string
+  className?: string
+}
+
+const STATUS_CONFIG: Record<IntegrationStatus, { label: string; className: string }> = {
+  connected: { label: 'Connected', className: 'bg-green-100 text-green-700' },
+  available: { label: 'Available', className: 'bg-blue-100 text-blue-700' },
+  'coming-soon': { label: 'Coming Soon', className: 'bg-gray-100 text-gray-500' },
+}
+
+export function IntegrationCard({
+  name,
+  description,
+  icon: Icon,
+  status,
+  onClick,
+  lastSync,
+  className,
+}: IntegrationCardProps) {
+  const isClickable = status !== 'coming-soon'
+  const statusEntry = STATUS_CONFIG[status]
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border bg-card text-card-foreground shadow p-5 flex items-start gap-4',
+        isClickable && 'cursor-pointer hover:shadow-md hover:border-primary/30 transition-shadow',
+        !isClickable && 'opacity-75',
+        className
+      )}
+      onClick={isClickable ? onClick : undefined}
+      role={isClickable ? 'button' : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={
+        isClickable
+          ? (e: React.KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick?.()
+              }
+            }
+          : undefined
+      }
+    >
+      <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
+        <Icon className="w-5 h-5 text-gray-600" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <h3 className="font-medium text-sm truncate">{name}</h3>
+          <span
+            className={cn(
+              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+              statusEntry.className
+            )}
+          >
+            {statusEntry.label}
+          </span>
+        </div>
+
+        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+
+        {lastSync && (
+          <p className="text-xs text-muted-foreground mt-1">
+            Last synced: {lastSync}
+          </p>
+        )}
+
+        {isClickable && (
+          <span className="inline-flex items-center text-xs text-primary mt-2 font-medium">
+            Configure <ChevronRight className="w-3 h-3 ml-0.5" />
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,191 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { IntegrationCard } from '../IntegrationCard'
+import { ConnectionStatus } from '../ConnectionStatus'
+
+// Simple icon stub usable as React.ElementType
+const TestIcon = () => <svg data-testid="test-icon" />
+
+// ---------------------------------------------------------------------------
+// IntegrationCard
+// ---------------------------------------------------------------------------
+
+describe('IntegrationCard', () => {
+  const baseProps = {
+    name: 'Salesforce',
+    description: 'Sync leads and deals from Salesforce CRM.',
+    icon: TestIcon,
+    status: 'available' as const,
+  }
+
+  it('renders name and description', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByText('Salesforce')).toBeInTheDocument()
+    expect(screen.getByText('Sync leads and deals from Salesforce CRM.')).toBeInTheDocument()
+  })
+
+  it('shows "Available" badge for available status', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByText('Available')).toBeInTheDocument()
+  })
+
+  it('shows "Connected" badge for connected status', () => {
+    render(<IntegrationCard {...baseProps} status="connected" />)
+    expect(screen.getByText('Connected')).toBeInTheDocument()
+  })
+
+  it('shows "Coming Soon" badge for coming-soon status', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.getByText('Coming Soon')).toBeInTheDocument()
+  })
+
+  it('renders icon', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+  })
+
+  it('shows Configure link for clickable statuses', () => {
+    render(<IntegrationCard {...baseProps} onClick={jest.fn()} />)
+    expect(screen.getByText('Configure')).toBeInTheDocument()
+  })
+
+  it('does not show Configure link for coming-soon status', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.queryByText('Configure')).not.toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked for available status', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick on Enter key press for clickable cards', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick on Space key press for clickable cards', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not have role=button for coming-soon', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('shows lastSync when provided', () => {
+    render(<IntegrationCard {...baseProps} status="connected" lastSync="2 hours ago" />)
+    expect(screen.getByText('Last synced: 2 hours ago')).toBeInTheDocument()
+  })
+
+  it('does not show lastSync when not provided', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.queryByText(/last synced/i)).not.toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <IntegrationCard {...baseProps} className="my-class" />
+    )
+    expect(container.firstChild).toHaveClass('my-class')
+  })
+
+  it('applies opacity for coming-soon status', () => {
+    const { container } = render(
+      <IntegrationCard {...baseProps} status="coming-soon" />
+    )
+    expect(container.firstChild).toHaveClass('opacity-75')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// ConnectionStatus
+// ---------------------------------------------------------------------------
+
+describe('ConnectionStatus', () => {
+  const baseProps = {
+    providerName: 'Gmail',
+    providerIcon: TestIcon,
+    connected: false,
+  }
+
+  it('renders provider name', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByText('Gmail')).toBeInTheDocument()
+  })
+
+  it('renders provider icon', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+  })
+
+  it('shows "Not connected" when connected is false', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByText('Not connected')).toBeInTheDocument()
+  })
+
+  it('shows Connect button when not connected', () => {
+    render(<ConnectionStatus {...baseProps} onConnect={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /connect/i })).toBeInTheDocument()
+  })
+
+  it('shows Disconnect button when connected', () => {
+    render(<ConnectionStatus {...baseProps} connected onDisconnect={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /disconnect/i })).toBeInTheDocument()
+  })
+
+  it('shows accountLabel when connected', () => {
+    render(
+      <ConnectionStatus
+        {...baseProps}
+        connected
+        accountLabel="jane@example.com"
+      />
+    )
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument()
+  })
+
+  it('does not show accountLabel when not connected', () => {
+    render(
+      <ConnectionStatus
+        {...baseProps}
+        connected={false}
+        accountLabel="jane@example.com"
+      />
+    )
+    expect(screen.queryByText('jane@example.com')).not.toBeInTheDocument()
+  })
+
+  it('calls onConnect when Connect is clicked', () => {
+    const onConnect = jest.fn()
+    render(<ConnectionStatus {...baseProps} onConnect={onConnect} />)
+    fireEvent.click(screen.getByRole('button', { name: /connect/i }))
+    expect(onConnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onDisconnect when Disconnect is clicked', () => {
+    const onDisconnect = jest.fn()
+    render(<ConnectionStatus {...baseProps} connected onDisconnect={onDisconnect} />)
+    fireEvent.click(screen.getByRole('button', { name: /disconnect/i }))
+    expect(onDisconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows loading state when isLoading is true', () => {
+    render(<ConnectionStatus {...baseProps} isLoading />)
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+    expect(screen.getByText('Loading...').closest('button')).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <ConnectionStatus {...baseProps} className="my-class" />
+    )
+    expect(container.firstChild).toHaveClass('my-class')
+  })
+})

package/src/components/integrations/index.ts

@@ -0,0 +1,5 @@
+export { IntegrationCard } from './IntegrationCard'
+export type { IntegrationCardProps, IntegrationStatus } from './IntegrationCard'
+
+export { ConnectionStatus } from './ConnectionStatus'
+export type { ConnectionStatusProps } from './ConnectionStatus'

package/src/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface KanbanColumnConfig {
+  id: string
+  label: string
+  color?: string
+}
+
+export interface KanbanBoardProps<T> {
+  columns: KanbanColumnConfig[]
+  items: Record<string, T[]>
+  renderCard: (item: T) => React.ReactNode
+  renderColumnHeader?: (column: KanbanColumnConfig, items: T[]) => React.ReactNode
+  renderColumnFooter?: (column: KanbanColumnConfig) => React.ReactNode
+  emptyColumnMessage?: string
+  columnWidth?: number
+  columnRef?: (columnId: string) => React.Ref<HTMLDivElement> | undefined
+  isColumnOver?: (columnId: string) => boolean
+  className?: string
+}
+
+export function KanbanBoard<T>({
+  columns,
+  items,
+  renderCard,
+  renderColumnHeader,
+  renderColumnFooter,
+  emptyColumnMessage = 'No items',
+  columnWidth = 320,
+  columnRef,
+  isColumnOver,
+  className,
+}: KanbanBoardProps<T>) {
+  return (
+    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+      {columns.map((column) => {
+        const columnItems = items[column.id] ?? []
+        const ref = columnRef?.(column.id)
+        const isOver = isColumnOver?.(column.id) ?? false
+
+        return (
+          <div
+            key={column.id}
+            ref={ref}
+            style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+            className={cn(
+              'flex flex-col rounded-lg border bg-muted/50 transition-colors',
+              isOver && 'border-primary ring-2 ring-primary/20',
+            )}
+          >
+            {/* Column Header */}
+            {renderColumnHeader ? (
+              renderColumnHeader(column, columnItems)
+            ) : (
+              <div className="flex items-center justify-between px-3 py-2 border-b">
+                <div className="flex items-center gap-2">
+                  {column.color && (
+                    <span
+                      className="w-2.5 h-2.5 rounded-full shrink-0"
+                      style={{ backgroundColor: column.color }}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <h3 className="text-sm font-semibold text-foreground truncate">
+                    {column.label}
+                  </h3>
+                </div>
+                <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                  {columnItems.length}
+                </span>
+              </div>
+            )}
+
+            {/* Column Body */}
+            <div className="flex-1 overflow-y-auto p-2 space-y-2">
+              {columnItems.length === 0 ? (
+                <p className="text-xs text-muted-foreground text-center py-8">
+                  {emptyColumnMessage}
+                </p>
+              ) : (
+                columnItems.map((item, index) => (
+                  <React.Fragment key={index}>
+                    {renderCard(item)}
+                  </React.Fragment>
+                ))
+              )}
+            </div>
+
+            {/* Column Footer */}
+            {renderColumnFooter && (
+              <div className="border-t px-3 py-2">
+                {renderColumnFooter(column)}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/react'
+import { KanbanBoard } from '../KanbanBoard'
+
+interface Card {
+  id: string
+  title: string
+}
+
+const columns = [
+  { id: 'todo', label: 'To Do', color: '#6366f1' },
+  { id: 'in-progress', label: 'In Progress', color: '#f59e0b' },
+  { id: 'done', label: 'Done' },
+]
+
+const items: Record<string, Card[]> = {
+  todo: [{ id: '1', title: 'Task One' }, { id: '2', title: 'Task Two' }],
+  'in-progress': [{ id: '3', title: 'Task Three' }],
+  done: [],
+}
+
+describe('KanbanBoard', () => {
+  const renderCard = (item: Card) => (
+    <div key={item.id} data-testid={`card-${item.id}`}>
+      {item.title}
+    </div>
+  )
+
+  it('renders all column labels', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('To Do')).toBeInTheDocument()
+    expect(screen.getByText('In Progress')).toBeInTheDocument()
+    expect(screen.getByText('Done')).toBeInTheDocument()
+  })
+
+  it('renders all card items', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('Task One')).toBeInTheDocument()
+    expect(screen.getByText('Task Two')).toBeInTheDocument()
+    expect(screen.getByText('Task Three')).toBeInTheDocument()
+  })
+
+  it('shows item counts per column in the default header', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    // todo has 2, in-progress has 1, done has 0
+    const counts = screen.getAllByText(/^[0-9]+$/)
+    const countValues = counts.map((el) => el.textContent)
+    expect(countValues).toContain('2')
+    expect(countValues).toContain('1')
+    expect(countValues).toContain('0')
+  })
+
+  it('shows empty column message when column has no items', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('No items')).toBeInTheDocument()
+  })
+
+  it('shows custom empty column message', () => {
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        emptyColumnMessage="Nothing here yet"
+      />
+    )
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument()
+  })
+
+  it('renders color dot for columns that have a color', () => {
+    const { container } = render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    // Two columns have colors (todo, in-progress), one does not (done)
+    const colorDots = container.querySelectorAll('[aria-hidden="true"]')
+    expect(colorDots.length).toBe(2)
+  })
+
+  it('uses custom column header when renderColumnHeader is provided', () => {
+    const renderColumnHeader = (col: typeof columns[0]) => (
+      <div data-testid={`custom-header-${col.id}`}>Custom: {col.label}</div>
+    )
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        renderColumnHeader={renderColumnHeader}
+      />
+    )
+    expect(screen.getByTestId('custom-header-todo')).toBeInTheDocument()
+    expect(screen.getByText('Custom: To Do')).toBeInTheDocument()
+  })
+
+  it('renders column footer when renderColumnFooter is provided', () => {
+    const renderColumnFooter = (col: typeof columns[0]) => (
+      <div data-testid={`footer-${col.id}`}>Footer for {col.label}</div>
+    )
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        renderColumnFooter={renderColumnFooter}
+      />
+    )
+    expect(screen.getByTestId('footer-todo')).toBeInTheDocument()
+    expect(screen.getByText('Footer for To Do')).toBeInTheDocument()
+  })
+
+  it('handles missing items for a column gracefully', () => {
+    // Only provide items for one column
+    const partialItems: Record<string, Card[]> = {
+      todo: [{ id: '1', title: 'Task One' }],
+    }
+    render(
+      <KanbanBoard columns={columns} items={partialItems} renderCard={renderCard} />
+    )
+    // The other two columns should show the empty message
+    const emptyMessages = screen.getAllByText('No items')
+    expect(emptyMessages.length).toBe(2)
+  })
+
+  it('applies custom className to container', () => {
+    const { container } = render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        className="my-board"
+      />
+    )
+    expect(container.firstChild).toHaveClass('my-board')
+  })
+
+  it('applies ring styles to column that isColumnOver returns true for', () => {
+    const isColumnOver = (id: string) => id === 'todo'
+    const { container } = render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        isColumnOver={isColumnOver}
+      />
+    )
+    // The first column div should have ring classes
+    const firstCol = container.querySelector('[style*="320"]')
+    expect(firstCol).toHaveClass('ring-2')
+  })
+})

package/src/components/kanban/index.ts

@@ -0,0 +1,2 @@
+export { KanbanBoard } from './KanbanBoard'
+export type { KanbanBoardProps, KanbanColumnConfig } from './KanbanBoard'