@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/lists/CreateListDialog.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface CreateListDialogProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: { name: string; description: string; sourceType: string }) => void
+  isSubmitting?: boolean
+  sourceTypes?: Array<{ value: string; label: string }>
+}
+
+const defaultSourceTypes = [
+  { value: 'static', label: 'Static' },
+  { value: 'funnel', label: 'Funnel' },
+  { value: 'query', label: 'Query' },
+]
+
+export function CreateListDialog({
+  open,
+  onClose,
+  onSubmit,
+  isSubmitting = false,
+  sourceTypes = defaultSourceTypes,
+}: CreateListDialogProps) {
+  const [name, setName] = React.useState('')
+  const [description, setDescription] = React.useState('')
+  const [sourceType, setSourceType] = React.useState(sourceTypes[0]?.value ?? 'static')
+
+  React.useEffect(() => {
+    if (open) {
+      setName('')
+      setDescription('')
+      setSourceType(sourceTypes[0]?.value ?? 'static')
+    }
+  }, [open, sourceTypes])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    onSubmit({ name: name.trim(), description: description.trim(), sourceType })
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={isSubmitting ? undefined : onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div className="relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
+        <h2 className="text-lg font-semibold text-foreground">Create List</h2>
+
+        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
+          {/* Name */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-name" className="text-sm font-medium text-foreground">
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="list-name"
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter list name"
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            />
+          </div>
+
+          {/* Description */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-description" className="text-sm font-medium text-foreground">
+              Description
+            </label>
+            <textarea
+              id="list-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+              rows={3}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm resize-none',
+                'placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            />
+          </div>
+
+          {/* Source Type */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-source-type" className="text-sm font-medium text-foreground">
+              Source Type
+            </label>
+            <select
+              id="list-source-type"
+              value={sourceType}
+              onChange={(e) => setSourceType(e.target.value)}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {sourceTypes.map((st) => (
+                <option key={st.value} value={st.value}>
+                  {st.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className={cn(
+                'rounded-md border px-4 py-2 text-sm font-medium',
+                'hover:bg-muted transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !name.trim()}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {isSubmitting ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/components/lists/ListCard.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface ListCardProps {
+  name: string
+  sourceType: string
+  memberCount: number
+  createdAt: string
+  onClick?: () => void
+  className?: string
+}
+
+const sourceTypeBadgeClasses: Record<string, string> = {
+  static: 'bg-blue-100 text-blue-700 border-blue-200',
+  funnel: 'bg-purple-100 text-purple-700 border-purple-200',
+  query: 'bg-green-100 text-green-700 border-green-200',
+}
+
+export function ListCard({
+  name,
+  sourceType,
+  memberCount,
+  createdAt,
+  onClick,
+  className,
+}: ListCardProps) {
+  const badgeClass =
+    sourceTypeBadgeClasses[sourceType] ??
+    'bg-gray-100 text-gray-700 border-gray-200'
+
+  return (
+    <div
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick()
+              }
+            }
+          : undefined
+      }
+      className={cn(
+        'rounded-lg border bg-card text-card-foreground p-4 transition-all duration-150',
+        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <h4 className="text-sm font-semibold text-foreground truncate">
+            {name}
+          </h4>
+          <p className="text-xs text-muted-foreground mt-1">
+            {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+          </p>
+        </div>
+        <span
+          className={cn(
+            'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium shrink-0',
+            badgeClass,
+          )}
+        >
+          {sourceType}
+        </span>
+      </div>
+      <p className="text-xs text-muted-foreground mt-2">
+        Created {createdAt}
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,263 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ListCard } from '../ListCard'
+import { CreateListDialog } from '../CreateListDialog'
+
+// ---------------------------------------------------------------------------
+// ListCard
+// ---------------------------------------------------------------------------
+
+describe('ListCard', () => {
+  const baseProps = {
+    name: 'My Prospect List',
+    sourceType: 'static',
+    memberCount: 42,
+    createdAt: 'Jan 1, 2025',
+  }
+
+  it('renders the list name', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('My Prospect List')).toBeInTheDocument()
+  })
+
+  it('renders member count with singular "member"', () => {
+    render(<ListCard {...baseProps} memberCount={1} />)
+    expect(screen.getByText('1 member')).toBeInTheDocument()
+  })
+
+  it('renders member count with plural "members"', () => {
+    render(<ListCard {...baseProps} memberCount={42} />)
+    expect(screen.getByText('42 members')).toBeInTheDocument()
+  })
+
+  it('renders zero members correctly', () => {
+    render(<ListCard {...baseProps} memberCount={0} />)
+    expect(screen.getByText('0 members')).toBeInTheDocument()
+  })
+
+  it('renders large member count with locale formatting', () => {
+    render(<ListCard {...baseProps} memberCount={1500} />)
+    expect(screen.getByText('1,500 members')).toBeInTheDocument()
+  })
+
+  it('renders the source type badge', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('static')).toBeInTheDocument()
+  })
+
+  it('renders the createdAt text', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('Created Jan 1, 2025')).toBeInTheDocument()
+  })
+
+  it('applies blue badge styles for static source type', () => {
+    render(<ListCard {...baseProps} sourceType="static" />)
+    const badge = screen.getByText('static')
+    expect(badge).toHaveClass('bg-blue-100', 'text-blue-700')
+  })
+
+  it('applies purple badge styles for funnel source type', () => {
+    render(<ListCard {...baseProps} sourceType="funnel" />)
+    const badge = screen.getByText('funnel')
+    expect(badge).toHaveClass('bg-purple-100', 'text-purple-700')
+  })
+
+  it('applies green badge styles for query source type', () => {
+    render(<ListCard {...baseProps} sourceType="query" />)
+    const badge = screen.getByText('query')
+    expect(badge).toHaveClass('bg-green-100', 'text-green-700')
+  })
+
+  it('applies gray badge for unknown source type', () => {
+    render(<ListCard {...baseProps} sourceType="unknown-type" />)
+    const badge = screen.getByText('unknown-type')
+    expect(badge).toHaveClass('bg-gray-100', 'text-gray-700')
+  })
+
+  it('has role=button when onClick is provided', () => {
+    render(<ListCard {...baseProps} onClick={jest.fn()} />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('does not have role=button when onClick is not provided', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick when Enter key is pressed', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick when Space key is pressed', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<ListCard {...baseProps} className="custom-card" />)
+    expect(container.firstChild).toHaveClass('custom-card')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// CreateListDialog
+// ---------------------------------------------------------------------------
+
+describe('CreateListDialog', () => {
+  const baseProps = {
+    open: true,
+    onClose: jest.fn(),
+    onSubmit: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders nothing when open is false', () => {
+    render(<CreateListDialog {...baseProps} open={false} />)
+    expect(screen.queryByText('Create List')).not.toBeInTheDocument()
+  })
+
+  it('renders dialog when open is true', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByText('Create List')).toBeInTheDocument()
+  })
+
+  it('renders name, description, and source type fields', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByLabelText(/name/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/description/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/source type/i)).toBeInTheDocument()
+  })
+
+  it('renders default source type options', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByRole('option', { name: 'Static' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Funnel' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Query' })).toBeInTheDocument()
+  })
+
+  it('renders custom source types when provided', () => {
+    render(
+      <CreateListDialog
+        {...baseProps}
+        sourceTypes={[{ value: 'csv', label: 'CSV Upload' }]}
+      />
+    )
+    expect(screen.getByRole('option', { name: 'CSV Upload' })).toBeInTheDocument()
+    expect(screen.queryByRole('option', { name: 'Static' })).not.toBeInTheDocument()
+  })
+
+  it('Create button is disabled when name is empty', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByRole('button', { name: /^create$/i })).toBeDisabled()
+  })
+
+  it('Create button is enabled after entering a name', () => {
+    render(<CreateListDialog {...baseProps} />)
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'New List' } })
+    expect(screen.getByRole('button', { name: /^create$/i })).toBeEnabled()
+  })
+
+  it('calls onSubmit with correct data', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Sales Leads' } })
+    fireEvent.change(screen.getByLabelText(/description/i), { target: { value: 'Top prospects' } })
+
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: 'Sales Leads',
+      description: 'Top prospects',
+      sourceType: 'static',
+    })
+  })
+
+  it('trims name and description on submit', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: '  Trimmed  ' } })
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Trimmed' })
+    )
+  })
+
+  it('does not call onSubmit when name is only whitespace', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: '   ' } })
+    fireEvent.submit(screen.getByLabelText(/name/i).closest('form')!)
+
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = jest.fn()
+    render(<CreateListDialog {...baseProps} onClose={onClose} />)
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClose when backdrop is clicked', () => {
+    const onClose = jest.fn()
+    const { container } = render(<CreateListDialog {...baseProps} onClose={onClose} />)
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClose when backdrop clicked during submit', () => {
+    const onClose = jest.fn()
+    const { container } = render(
+      <CreateListDialog {...baseProps} onClose={onClose} isSubmitting />
+    )
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('shows Creating... and disables fields when isSubmitting', () => {
+    render(<CreateListDialog {...baseProps} isSubmitting />)
+    expect(screen.getByText('Creating...')).toBeInTheDocument()
+    expect(screen.getByLabelText(/name/i)).toBeDisabled()
+    expect(screen.getByLabelText(/description/i)).toBeDisabled()
+  })
+
+  it('resets fields when dialog reopens', () => {
+    const { rerender } = render(<CreateListDialog {...baseProps} open={false} />)
+    rerender(<CreateListDialog {...baseProps} open />)
+    expect(screen.getByLabelText(/name/i)).toHaveValue('')
+    expect(screen.getByLabelText(/description/i)).toHaveValue('')
+  })
+
+  it('submits the selected source type', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'My List' } })
+    fireEvent.change(screen.getByLabelText(/source type/i), { target: { value: 'funnel' } })
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ sourceType: 'funnel' })
+    )
+  })
+})

package/src/components/lists/index.ts

@@ -0,0 +1,5 @@
+export { ListCard } from './ListCard'
+export type { ListCardProps } from './ListCard'
+
+export { CreateListDialog } from './CreateListDialog'
+export type { CreateListDialogProps } from './CreateListDialog'

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

@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import { DashboardSkeleton } from '../DashboardSkeleton'
+import { TableSkeleton } from '../TableSkeleton'
+
+// ---------------------------------------------------------------------------
+// DashboardSkeleton
+// ---------------------------------------------------------------------------
+
+describe('DashboardSkeleton', () => {
+  it('renders 4 skeleton cards by default', () => {
+    const { container } = render(<DashboardSkeleton />)
+    // Each card is a direct child of the grid container
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(4)
+  })
+
+  it('renders the specified number of cards', () => {
+    const { container } = render(<DashboardSkeleton cards={3} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(3)
+  })
+
+  it('renders 0 cards when cards=0', () => {
+    const { container } = render(<DashboardSkeleton cards={0} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(0)
+  })
+
+  it('renders animated pulse elements inside each card', () => {
+    const { container } = render(<DashboardSkeleton cards={1} />)
+    const pulseEls = container.querySelectorAll('.animate-pulse')
+    // Each card has 4 pulse elements
+    expect(pulseEls.length).toBe(4)
+  })
+
+  it('applies custom className to the grid', () => {
+    const { container } = render(<DashboardSkeleton className="my-skeleton" />)
+    expect(container.firstChild).toHaveClass('my-skeleton')
+  })
+
+  it('renders with 8 cards', () => {
+    const { container } = render(<DashboardSkeleton cards={8} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(8)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// TableSkeleton
+// ---------------------------------------------------------------------------
+
+describe('TableSkeleton', () => {
+  it('renders a table', () => {
+    render(<TableSkeleton />)
+    expect(screen.getByRole('table')).toBeInTheDocument()
+  })
+
+  it('renders default 5 rows', () => {
+    render(<TableSkeleton />)
+    const rows = screen.getAllByRole('row')
+    // 1 header row + 5 body rows
+    expect(rows).toHaveLength(6)
+  })
+
+  it('renders the specified number of body rows', () => {
+    render(<TableSkeleton rows={3} />)
+    const rows = screen.getAllByRole('row')
+    // 1 header row + 3 body rows
+    expect(rows).toHaveLength(4)
+  })
+
+  it('renders default 4 columns in the header', () => {
+    render(<TableSkeleton />)
+    const headerCells = screen.getAllByRole('columnheader')
+    expect(headerCells).toHaveLength(4)
+  })
+
+  it('renders the specified number of columns', () => {
+    render(<TableSkeleton columns={6} />)
+    const headerCells = screen.getAllByRole('columnheader')
+    expect(headerCells).toHaveLength(6)
+  })
+
+  it('renders correct number of data cells (rows * columns)', () => {
+    render(<TableSkeleton rows={3} columns={2} />)
+    const cells = screen.getAllByRole('cell')
+    expect(cells).toHaveLength(6)
+  })
+
+  it('renders animated pulse elements in header cells', () => {
+    const { container } = render(<TableSkeleton columns={2} rows={0} />)
+    const headerPulse = container.querySelectorAll('thead .animate-pulse')
+    expect(headerPulse.length).toBe(2)
+  })
+
+  it('applies custom className to the container', () => {
+    const { container } = render(<TableSkeleton className="my-table-skeleton" />)
+    expect(container.firstChild).toHaveClass('my-table-skeleton')
+  })
+
+  it('renders a header skeleton area above the table', () => {
+    const { container } = render(<TableSkeleton />)
+    // Header search/filter area has a border-b
+    const headerArea = container.querySelector('.p-4.border-b')
+    expect(headerArea).toBeInTheDocument()
+  })
+
+  it('renders a pagination skeleton area below the table', () => {
+    const { container } = render(<TableSkeleton />)
+    // Pagination area has border-t
+    const paginationArea = container.querySelector('.p-4.border-t')
+    expect(paginationArea).toBeInTheDocument()
+  })
+})