@startsimpli/ui 0.4.7 → 0.4.8

package/src/components/email-editor/panels/__tests__/GlobalStylesPanel.test.tsx

@@ -0,0 +1,226 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GlobalStylesPanel } from '../GlobalStylesPanel'
+import type { GlobalStyles } from '../../types'
+import { DEFAULT_GLOBAL_STYLES } from '../../types'
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const baseStyles: GlobalStyles = {
+  backgroundColor: '#f3f4f6',
+  contentWidth: 600,
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  theme: 'clean',
+}
+
+function renderPanel(styles: GlobalStyles = baseStyles, onChange = jest.fn()) {
+  return render(<GlobalStylesPanel globalStyles={styles} onChange={onChange} />)
+}
+
+// ---------------------------------------------------------------------------
+// Renders style inputs
+// ---------------------------------------------------------------------------
+
+describe('GlobalStylesPanel — renders style inputs', () => {
+  it('renders the Background Color label', () => {
+    renderPanel()
+    expect(screen.getByText('Background Color')).toBeInTheDocument()
+  })
+
+  it('renders the background color text input with current value', () => {
+    renderPanel()
+    const inputs = screen.getAllByDisplayValue('#f3f4f6')
+    // At least one text input shows the background color value
+    expect(inputs.length).toBeGreaterThan(0)
+  })
+
+  it('renders the Content Width input', () => {
+    renderPanel()
+    expect(screen.getByText('Content Width (px)')).toBeInTheDocument()
+  })
+
+  it('renders content width number input with current value', () => {
+    renderPanel()
+    expect(screen.getByDisplayValue('600')).toBeInTheDocument()
+  })
+
+  it('renders the Font Family label', () => {
+    renderPanel()
+    expect(screen.getByText('Font Family')).toBeInTheDocument()
+  })
+
+  it('renders the Themes section heading', () => {
+    renderPanel()
+    expect(screen.getByText('Themes')).toBeInTheDocument()
+  })
+
+  it('renders Clean theme preset button', () => {
+    renderPanel()
+    expect(screen.getByText('Clean')).toBeInTheDocument()
+  })
+
+  it('renders Minimal theme preset button', () => {
+    renderPanel()
+    expect(screen.getByText('Minimal')).toBeInTheDocument()
+  })
+
+  it('renders Bold theme preset button', () => {
+    renderPanel()
+    expect(screen.getByText('Bold')).toBeInTheDocument()
+  })
+
+  it('renders theme description text for each preset', () => {
+    renderPanel()
+    expect(screen.getByText('White background with subtle gray accents')).toBeInTheDocument()
+    expect(screen.getByText('Pure white with thin borders')).toBeInTheDocument()
+    expect(screen.getByText('Dark background with vivid accents')).toBeInTheDocument()
+  })
+
+  it('renders color picker input for background color', () => {
+    const { container } = renderPanel()
+    const colorInput = container.querySelector('input[type="color"]') as HTMLInputElement
+    expect(colorInput).toBeInTheDocument()
+    expect(colorInput.value).toBe('#f3f4f6')
+  })
+
+  it('renders Email Design section heading', () => {
+    renderPanel()
+    expect(screen.getByText('Email Design')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// onChange fires with updated styles
+// ---------------------------------------------------------------------------
+
+describe('GlobalStylesPanel — onChange fires with updated styles', () => {
+  it('calls onChange when background color text input changes', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    const inputs = screen.getAllByDisplayValue('#f3f4f6')
+    // Find the text input (not color picker) — the Input component has type="text" by default
+    const textInput = inputs.find(
+      (el) => (el as HTMLInputElement).type !== 'color'
+    ) as HTMLInputElement
+    fireEvent.change(textInput, { target: { value: '#ffffff' } })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ backgroundColor: '#ffffff' })
+    )
+  })
+
+  it('calls onChange when color picker changes', () => {
+    const onChange = jest.fn()
+    const { container } = renderPanel(baseStyles, onChange)
+    const colorInput = container.querySelector('input[type="color"]') as HTMLInputElement
+    fireEvent.change(colorInput, { target: { value: '#123456' } })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ backgroundColor: '#123456' })
+    )
+  })
+
+  it('calls onChange with parsed integer when content width changes', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    const widthInput = screen.getByDisplayValue('600')
+    fireEvent.change(widthInput, { target: { value: '700' } })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ contentWidth: 700 })
+    )
+  })
+
+  it('defaults contentWidth to 600 when invalid value entered', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    const widthInput = screen.getByDisplayValue('600')
+    fireEvent.change(widthInput, { target: { value: 'abc' } })
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ contentWidth: 600 })
+    )
+  })
+
+  it('calls onChange with Clean theme preset globalStyles on Clean button click', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    fireEvent.click(screen.getByText('Clean'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const called = onChange.mock.calls[0][0] as GlobalStyles
+    expect(called.theme).toBe('clean')
+  })
+
+  it('calls onChange with Minimal theme preset globalStyles on Minimal button click', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    fireEvent.click(screen.getByText('Minimal'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const called = onChange.mock.calls[0][0] as GlobalStyles
+    expect(called.theme).toBe('minimal')
+    expect(called.backgroundColor).toBe('#ffffff')
+  })
+
+  it('calls onChange with Bold theme preset globalStyles on Bold button click', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    fireEvent.click(screen.getByText('Bold'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const called = onChange.mock.calls[0][0] as GlobalStyles
+    expect(called.theme).toBe('bold')
+    expect(called.backgroundColor).toBe('#1f2937')
+  })
+
+  it('preserves all other globalStyles fields when only backgroundColor changes', () => {
+    const onChange = jest.fn()
+    renderPanel(baseStyles, onChange)
+    const inputs = screen.getAllByDisplayValue('#f3f4f6')
+    const textInput = inputs.find(
+      (el) => (el as HTMLInputElement).type !== 'color'
+    ) as HTMLInputElement
+    fireEvent.change(textInput, { target: { value: '#aaaaaa' } })
+    const result = onChange.mock.calls[0][0] as GlobalStyles
+    expect(result.contentWidth).toBe(baseStyles.contentWidth)
+    expect(result.fontFamily).toBe(baseStyles.fontFamily)
+    expect(result.theme).toBe(baseStyles.theme)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Active theme highlighting
+// ---------------------------------------------------------------------------
+
+describe('GlobalStylesPanel — active theme highlight', () => {
+  it('applies active border class to the currently selected theme button', () => {
+    const { container } = renderPanel({ ...baseStyles, theme: 'clean' })
+    const cleanButton = screen.getByText('Clean').closest('button') as HTMLElement
+    expect(cleanButton.className).toContain('border-primary')
+  })
+
+  it('does not apply active border class to non-selected theme buttons', () => {
+    const { container } = renderPanel({ ...baseStyles, theme: 'clean' })
+    const minimalButton = screen.getByText('Minimal').closest('button') as HTMLElement
+    expect(minimalButton.className).not.toContain('border-primary')
+  })
+
+  it('applies active class to Minimal when minimal theme is selected', () => {
+    renderPanel({ ...baseStyles, theme: 'minimal' })
+    const minimalButton = screen.getByText('Minimal').closest('button') as HTMLElement
+    expect(minimalButton.className).toContain('border-primary')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// DEFAULT_GLOBAL_STYLES as initial values
+// ---------------------------------------------------------------------------
+
+describe('GlobalStylesPanel — DEFAULT_GLOBAL_STYLES compatibility', () => {
+  it('renders correctly with DEFAULT_GLOBAL_STYLES', () => {
+    expect(() => renderPanel(DEFAULT_GLOBAL_STYLES)).not.toThrow()
+  })
+
+  it('shows default content width 600', () => {
+    renderPanel(DEFAULT_GLOBAL_STYLES)
+    expect(screen.getByDisplayValue('600')).toBeInTheDocument()
+  })
+})

package/src/components/email-editor/panels/index.ts

@@ -0,0 +1,3 @@
+export { GlobalStylesPanel } from './GlobalStylesPanel'
+export { BlockPropertyPanel } from './BlockPropertyPanel'
+export { SectionSettingsPanel } from './SectionSettingsPanel'

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/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>
+  )
+}