@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/enrichment/QualityBadge.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+export interface QualityScore {
+  score: number
+  grade: 'A' | 'B' | 'C' | 'D' | 'F'
+}
+
+export interface QualityBadgeProps {
+  quality: QualityScore
+  showScore?: boolean
+}
+
+const GRADE_STYLES: Record<QualityScore['grade'], string> = {
+  A: 'bg-green-100 text-green-800 border-green-200',
+  B: 'bg-blue-100 text-blue-800 border-blue-200',
+  C: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  D: 'bg-orange-100 text-orange-800 border-orange-200',
+  F: 'bg-red-100 text-red-800 border-red-200',
+}
+
+const GRADE_LABELS: Record<QualityScore['grade'], string> = {
+  A: 'Excellent',
+  B: 'Good',
+  C: 'Fair',
+  D: 'Poor',
+  F: 'Incomplete',
+}
+
+export function QualityBadge({ quality, showScore = false }: QualityBadgeProps) {
+  const { grade, score } = quality
+  const styleClass = GRADE_STYLES[grade]
+  const label = GRADE_LABELS[grade]
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold border ${styleClass}`}
+      title={`Data quality: ${label} (${score}/100)`}
+    >
+      <span>{grade}</span>
+      {showScore && <span className="font-normal opacity-75">({score})</span>}
+    </span>
+  )
+}

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

@@ -0,0 +1,184 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { QualityBadge } from '../QualityBadge'
+import { EnrichButton } from '../EnrichButton'
+import { EnrichmentProgress } from '../EnrichmentProgress'
+
+// ---------------------------------------------------------------------------
+// QualityBadge
+// ---------------------------------------------------------------------------
+
+describe('QualityBadge', () => {
+  it('renders grade A with correct label in title', () => {
+    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
+    const badge = screen.getByTitle('Data quality: Excellent (95/100)')
+    expect(badge).toBeInTheDocument()
+    expect(badge).toHaveTextContent('A')
+  })
+
+  it('renders grade B with correct title', () => {
+    render(<QualityBadge quality={{ grade: 'B', score: 80 }} />)
+    expect(screen.getByTitle('Data quality: Good (80/100)')).toBeInTheDocument()
+  })
+
+  it('renders grade C with correct title', () => {
+    render(<QualityBadge quality={{ grade: 'C', score: 65 }} />)
+    expect(screen.getByTitle('Data quality: Fair (65/100)')).toBeInTheDocument()
+  })
+
+  it('renders grade D with correct title', () => {
+    render(<QualityBadge quality={{ grade: 'D', score: 45 }} />)
+    expect(screen.getByTitle('Data quality: Poor (45/100)')).toBeInTheDocument()
+  })
+
+  it('renders grade F with correct title', () => {
+    render(<QualityBadge quality={{ grade: 'F', score: 20 }} />)
+    expect(screen.getByTitle('Data quality: Incomplete (20/100)')).toBeInTheDocument()
+  })
+
+  it('does not show score by default', () => {
+    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
+    expect(screen.queryByText('(95)')).not.toBeInTheDocument()
+  })
+
+  it('shows score when showScore is true', () => {
+    render(<QualityBadge quality={{ grade: 'A', score: 95 }} showScore />)
+    expect(screen.getByText('(95)')).toBeInTheDocument()
+  })
+
+  it('applies green styles for grade A', () => {
+    render(<QualityBadge quality={{ grade: 'A', score: 95 }} />)
+    const badge = screen.getByTitle('Data quality: Excellent (95/100)')
+    expect(badge).toHaveClass('bg-green-100')
+    expect(badge).toHaveClass('text-green-800')
+  })
+
+  it('applies red styles for grade F', () => {
+    render(<QualityBadge quality={{ grade: 'F', score: 20 }} />)
+    const badge = screen.getByTitle('Data quality: Incomplete (20/100)')
+    expect(badge).toHaveClass('bg-red-100')
+    expect(badge).toHaveClass('text-red-800')
+  })
+
+  it('applies yellow styles for grade C', () => {
+    render(<QualityBadge quality={{ grade: 'C', score: 65 }} />)
+    const badge = screen.getByTitle('Data quality: Fair (65/100)')
+    expect(badge).toHaveClass('bg-yellow-100')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// EnrichButton
+// ---------------------------------------------------------------------------
+
+describe('EnrichButton', () => {
+  it('renders default label', () => {
+    render(<EnrichButton onClick={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /enrich/i })).toBeInTheDocument()
+  })
+
+  it('renders custom label', () => {
+    render(<EnrichButton onClick={jest.fn()} label="Run Enrichment" />)
+    expect(screen.getByRole('button', { name: /run enrichment/i })).toBeInTheDocument()
+  })
+
+  it('shows Enriching... when isLoading is true', () => {
+    render(<EnrichButton onClick={jest.fn()} isLoading />)
+    expect(screen.getByText('Enriching...')).toBeInTheDocument()
+  })
+
+  it('is disabled when isLoading is true', () => {
+    render(<EnrichButton onClick={jest.fn()} isLoading />)
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn()
+    render(<EnrichButton onClick={onClick} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClick when disabled', () => {
+    const onClick = jest.fn()
+    render(<EnrichButton onClick={onClick} isLoading />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('applies sm size classes by default', () => {
+    render(<EnrichButton onClick={jest.fn()} />)
+    expect(screen.getByRole('button')).toHaveClass('px-3', 'py-1.5', 'text-xs')
+  })
+
+  it('applies md size classes when size is md', () => {
+    render(<EnrichButton onClick={jest.fn()} size="md" />)
+    expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2', 'text-sm')
+  })
+
+  it('applies custom className', () => {
+    render(<EnrichButton onClick={jest.fn()} className="my-custom-class" />)
+    expect(screen.getByRole('button')).toHaveClass('my-custom-class')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// EnrichmentProgress
+// ---------------------------------------------------------------------------
+
+describe('EnrichmentProgress', () => {
+  const queueStatus = {
+    pending: 3,
+    processing: 1,
+    completed: 12,
+    failed: 0,
+  }
+
+  it('renders unavailable message when queueStatus is null', () => {
+    render(<EnrichmentProgress queueStatus={null} />)
+    expect(screen.getByText('Queue status unavailable')).toBeInTheDocument()
+  })
+
+  it('renders all four status counts', () => {
+    render(<EnrichmentProgress queueStatus={queueStatus} />)
+    expect(screen.getByText('3')).toBeInTheDocument()  // pending
+    expect(screen.getByText('1')).toBeInTheDocument()  // processing
+    expect(screen.getByText('12')).toBeInTheDocument() // completed
+    expect(screen.getByText('0')).toBeInTheDocument()  // failed
+  })
+
+  it('renders all four status labels', () => {
+    render(<EnrichmentProgress queueStatus={queueStatus} />)
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+    expect(screen.getByText('Processing')).toBeInTheDocument()
+    expect(screen.getByText('Completed')).toBeInTheDocument()
+    expect(screen.getByText('Failed')).toBeInTheDocument()
+  })
+
+  it('does not render refresh button when onRefresh is not provided', () => {
+    render(<EnrichmentProgress queueStatus={queueStatus} />)
+    expect(screen.queryByText('Refresh')).not.toBeInTheDocument()
+  })
+
+  it('renders refresh button when onRefresh is provided', () => {
+    render(<EnrichmentProgress queueStatus={queueStatus} onRefresh={jest.fn()} />)
+    expect(screen.getByText('Refresh')).toBeInTheDocument()
+  })
+
+  it('calls onRefresh when refresh button is clicked', () => {
+    const onRefresh = jest.fn()
+    render(<EnrichmentProgress queueStatus={queueStatus} onRefresh={onRefresh} />)
+    fireEvent.click(screen.getByText('Refresh'))
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables refresh button when isLoading is true', () => {
+    render(
+      <EnrichmentProgress
+        queueStatus={queueStatus}
+        onRefresh={jest.fn()}
+        isLoading
+      />
+    )
+    expect(screen.getByText('Refresh').closest('button')).toBeDisabled()
+  })
+})

package/src/components/enrichment/index.ts

@@ -0,0 +1,8 @@
+export { QualityBadge } from './QualityBadge'
+export type { QualityBadgeProps, QualityScore } from './QualityBadge'
+
+export { EnrichButton } from './EnrichButton'
+export type { EnrichButtonProps } from './EnrichButton'
+
+export { EnrichmentProgress } from './EnrichmentProgress'
+export type { EnrichmentProgressProps, QueueStatus as EnrichmentQueueStatus } from './EnrichmentProgress'

package/src/components/gantt/GanttBoardView.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { format } from 'date-fns'
+import type { TimelineItem } from './types'
+import type { UseGanttStateReturn } from './hooks/useGanttState'
+
+export interface GanttBoardViewProps {
+  boardColumns: UseGanttStateReturn['boardColumns']
+  boardDragItem: UseGanttStateReturn['boardDragItem']
+  setBoardDragItem: UseGanttStateReturn['setBoardDragItem']
+  onStatusChange: UseGanttStateReturn['onStatusChange']
+  categoryColors: UseGanttStateReturn['categoryColors']
+  handleItemClick: UseGanttStateReturn['handleItemClick']
+}
+
+export function GanttBoardView({
+  boardColumns,
+  boardDragItem,
+  setBoardDragItem,
+  onStatusChange,
+  categoryColors,
+  handleItemClick,
+}: GanttBoardViewProps) {
+  return (
+    <div className="gantt-board">
+      {boardColumns.map((col) => (
+        <div
+          key={col.status}
+          className={`gantt-board-column ${boardDragItem ? 'gantt-board-drop-target' : ''}`}
+          onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('gantt-board-drag-over') }}
+          onDragLeave={(e) => { e.currentTarget.classList.remove('gantt-board-drag-over') }}
+          onDrop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('gantt-board-drag-over')
+            if (boardDragItem && onStatusChange) {
+              onStatusChange(boardDragItem, col.status)
+            }
+            setBoardDragItem(null)
+          }}
+        >
+          <div className="gantt-board-column-header">
+            <span className={`gantt-status-badge gantt-status-${col.status}`}>{col.status.replace(/_/g, ' ')}</span>
+            <span className="gantt-board-count">{col.items.length}</span>
+          </div>
+          <div className="gantt-board-cards">
+            {col.items.map((item) => (
+              <div
+                key={item.id}
+                className="gantt-board-card"
+                draggable={!!onStatusChange}
+                onDragStart={() => setBoardDragItem(item.id)}
+                onDragEnd={() => setBoardDragItem(null)}
+                onClick={() => handleItemClick(item)}
+              >
+                <div className="gantt-board-card-title">{item.title}</div>
+                {item.category && (
+                  <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[item.category] || categoryColors.other || '#6b7280' }}>
+                    {item.category}
+                  </span>
+                )}
+                {item.endDate && (
+                  <span className="gantt-board-card-date">{format(new Date(item.endDate), 'MMM d')}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}