@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,194 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Sidebar, SidebarLayout } from '../sidebar'
+
+// next/link and next/navigation are mocked via jest.config.js moduleNameMapper
+
+const sections = [
+  {
+    title: 'Main',
+    links: [
+      { href: '/', label: 'Dashboard', icon: <span data-testid="icon-dashboard" /> },
+      { href: '/contacts', label: 'Contacts' },
+    ],
+  },
+  {
+    title: 'Admin',
+    links: [
+      { href: '/settings', label: 'Account Settings' },
+    ],
+  },
+]
+
+describe('Sidebar', () => {
+  it('renders app name', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('MarketSimpli')).toBeInTheDocument()
+  })
+
+  it('renders section titles', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Main')).toBeInTheDocument()
+    expect(screen.getByText('Admin')).toBeInTheDocument()
+  })
+
+  it('renders all nav links', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Contacts')).toBeInTheDocument()
+    expect(screen.getByText('Account Settings')).toBeInTheDocument()
+  })
+
+  it('renders icons for links that have icons', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByTestId('icon-dashboard')).toBeInTheDocument()
+  })
+
+  it('renders collapse toggle button when collapsible is true (default)', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Collapse')).toBeInTheDocument()
+  })
+
+  it('does not render collapse toggle when collapsible is false', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} collapsible={false} />)
+    expect(screen.queryByText('Collapse')).not.toBeInTheDocument()
+  })
+
+  it('collapses when toggle button is clicked', () => {
+    const { container } = render(
+      <Sidebar appName="MarketSimpli" sections={sections} />
+    )
+    fireEvent.click(screen.getByText('Collapse'))
+    // After collapse, the sidebar should have w-20 class
+    expect(container.firstChild).toHaveClass('w-20')
+  })
+
+  it('expands back when toggle is clicked again', () => {
+    const { container } = render(
+      <Sidebar appName="MarketSimpli" sections={sections} />
+    )
+    // Collapse
+    fireEvent.click(screen.getByText('Collapse'))
+    // Expand — the chevron button is still present, click it
+    const expandBtn = screen.getByRole('button')
+    fireEvent.click(expandBtn)
+    expect(container.firstChild).toHaveClass('w-64')
+  })
+
+  it('hides link labels when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    // Labels are wrapped in a <span> that only renders when not collapsed
+    expect(screen.queryByText('Dashboard')).not.toBeInTheDocument()
+    expect(screen.queryByText('Contacts')).not.toBeInTheDocument()
+  })
+
+  it('hides section titles when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    expect(screen.queryByText('Main')).not.toBeInTheDocument()
+  })
+
+  it('shows abbreviated app name when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    expect(screen.getByText('MA')).toBeInTheDocument()
+  })
+
+  it('renders user dropdown when provided', () => {
+    render(
+      <Sidebar
+        appName="App"
+        sections={sections}
+        userDropdown={<div data-testid="user-menu">User Menu</div>}
+      />
+    )
+    expect(screen.getByTestId('user-menu')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Sidebar appName="App" sections={sections} className="my-sidebar" />
+    )
+    expect(container.firstChild).toHaveClass('my-sidebar')
+  })
+
+  it('active link uses primary background (pathname matches)', () => {
+    // The mock usePathname returns '/test-path'
+    // We add a link with that href
+    const customSections = [
+      {
+        links: [
+          { href: '/test-path', label: 'Active Link' },
+          { href: '/other', label: 'Inactive Link' },
+        ],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const activeLink = screen.getByText('Active Link').closest('a')
+    expect(activeLink).toHaveClass('bg-primary-600')
+  })
+
+  it('inactive link uses gray text', () => {
+    const customSections = [
+      {
+        links: [
+          { href: '/test-path', label: 'Active Link' },
+          { href: '/other', label: 'Inactive Link' },
+        ],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const inactiveLink = screen.getByText('Inactive Link').closest('a')
+    expect(inactiveLink).toHaveClass('text-gray-300')
+  })
+
+  it('root href "/" is active only for exact match', () => {
+    // usePathname returns '/test-path', so '/' should not be active
+    const customSections = [
+      {
+        links: [{ href: '/', label: 'Home' }],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const homeLink = screen.getByText('Home').closest('a')
+    expect(homeLink).not.toHaveClass('bg-primary-600')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SidebarLayout
+// ---------------------------------------------------------------------------
+
+describe('SidebarLayout', () => {
+  it('renders children', () => {
+    render(
+      <SidebarLayout>
+        <p>Page content</p>
+      </SidebarLayout>
+    )
+    expect(screen.getByText('Page content')).toBeInTheDocument()
+  })
+
+  it('applies expanded width spacer by default', () => {
+    const { container } = render(
+      <SidebarLayout>
+        <p>Content</p>
+      </SidebarLayout>
+    )
+    const spacer = container.querySelector('.w-64')
+    expect(spacer).toBeInTheDocument()
+  })
+
+  it('applies collapsed width spacer when collapsed is true', () => {
+    const { container } = render(
+      <SidebarLayout collapsed>
+        <p>Content</p>
+      </SidebarLayout>
+    )
+    const spacer = container.querySelector('.w-20')
+    expect(spacer).toBeInTheDocument()
+  })
+})

package/src/components/pipeline/StageTransitionModal.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface StageTransitionModalProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: (targetStage: string, notes?: string) => void
+  currentStage: string
+  stages: Array<{ id: string; label: string }>
+  entityName?: string
+  isSubmitting?: boolean
+}
+
+export function StageTransitionModal({
+  open,
+  onClose,
+  onConfirm,
+  currentStage,
+  stages,
+  entityName,
+  isSubmitting = false,
+}: StageTransitionModalProps) {
+  const [targetStage, setTargetStage] = React.useState('')
+  const [notes, setNotes] = React.useState('')
+
+  React.useEffect(() => {
+    if (open) {
+      // Default to the first stage that isn't the current one
+      const firstOther = stages.find((s) => s.id !== currentStage)
+      setTargetStage(firstOther?.id ?? '')
+      setNotes('')
+    }
+  }, [open, currentStage, stages])
+
+  const handleConfirm = () => {
+    if (!targetStage) return
+    onConfirm(targetStage, notes.trim() || undefined)
+  }
+
+  const currentLabel = stages.find((s) => s.id === currentStage)?.label ?? currentStage
+
+  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">
+          Move {entityName ? `"${entityName}"` : 'Item'} to Stage
+        </h2>
+
+        <div className="mt-4 space-y-4">
+          {/* Current stage indicator */}
+          <div className="space-y-1.5">
+            <p className="text-sm font-medium text-foreground">Current Stage</p>
+            <p className="text-sm text-muted-foreground">{currentLabel}</p>
+          </div>
+
+          {/* Target stage select */}
+          <div className="space-y-1.5">
+            <label htmlFor="target-stage" className="text-sm font-medium text-foreground">
+              New Stage
+            </label>
+            <select
+              id="target-stage"
+              value={targetStage}
+              onChange={(e) => setTargetStage(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',
+              )}
+            >
+              {stages
+                .filter((s) => s.id !== currentStage)
+                .map((stage) => (
+                  <option key={stage.id} value={stage.id}>
+                    {stage.label}
+                  </option>
+                ))}
+            </select>
+          </div>
+
+          {/* Notes */}
+          <div className="space-y-1.5">
+            <label htmlFor="transition-notes" className="text-sm font-medium text-foreground">
+              Notes <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="transition-notes"
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="Add notes about this transition..."
+              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>
+
+          {/* 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="button"
+              onClick={handleConfirm}
+              disabled={isSubmitting || !targetStage}
+              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 ? 'Moving...' : 'Confirm'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,169 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { StageTransitionModal } from '../StageTransitionModal'
+
+const stages = [
+  { id: 'prospect', label: 'Prospect' },
+  { id: 'qualified', label: 'Qualified' },
+  { id: 'proposal', label: 'Proposal' },
+  { id: 'closed', label: 'Closed Won' },
+]
+
+const baseProps = {
+  open: true,
+  onClose: jest.fn(),
+  onConfirm: jest.fn(),
+  currentStage: 'prospect',
+  stages,
+}
+
+describe('StageTransitionModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders nothing when open is false', () => {
+    render(<StageTransitionModal {...baseProps} open={false} />)
+    expect(screen.queryByText(/move/i)).not.toBeInTheDocument()
+  })
+
+  it('renders dialog when open is true', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Move Item to Stage')).toBeInTheDocument()
+  })
+
+  it('includes entityName in dialog title when provided', () => {
+    render(<StageTransitionModal {...baseProps} entityName="ACME Deal" />)
+    expect(screen.getByText('Move "ACME Deal" to Stage')).toBeInTheDocument()
+  })
+
+  it('shows the current stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Prospect')).toBeInTheDocument()
+  })
+
+  it('excludes the current stage from the new stage dropdown', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const options = screen.getAllByRole('option')
+    const optionValues = options.map((o) => (o as HTMLOptionElement).value)
+    expect(optionValues).not.toContain('prospect')
+    expect(optionValues).toContain('qualified')
+    expect(optionValues).toContain('proposal')
+    expect(optionValues).toContain('closed')
+  })
+
+  it('defaults to the first non-current stage', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const select = screen.getByLabelText('New Stage') as HTMLSelectElement
+    expect(select.value).toBe('qualified')
+  })
+
+  it('calls onConfirm with selected stage when Confirm is clicked', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+    expect(onConfirm).toHaveBeenCalledWith('qualified', undefined)
+  })
+
+  it('passes notes to onConfirm when notes are entered', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+
+    fireEvent.change(screen.getByLabelText(/notes/i), {
+      target: { value: 'Moving due to demo completed' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+
+    expect(onConfirm).toHaveBeenCalledWith('qualified', 'Moving due to demo completed')
+  })
+
+  it('passes undefined for whitespace-only notes', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+
+    fireEvent.change(screen.getByLabelText(/notes/i), { target: { value: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+
+    expect(onConfirm).toHaveBeenCalledWith('qualified', undefined)
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = jest.fn()
+    render(<StageTransitionModal {...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(
+      <StageTransitionModal {...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 while submitting', () => {
+    const onClose = jest.fn()
+    const { container } = render(
+      <StageTransitionModal {...baseProps} onClose={onClose} isSubmitting />
+    )
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('shows Moving... when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByText('Moving...')).toBeInTheDocument()
+  })
+
+  it('disables select and textarea when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByLabelText('New Stage')).toBeDisabled()
+    expect(screen.getByLabelText(/notes/i)).toBeDisabled()
+  })
+
+  it('disables Cancel when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled()
+  })
+
+  it('Confirm button is disabled while submitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByText('Moving...').closest('button')).toBeDisabled()
+  })
+
+  it('resets notes when dialog reopens', () => {
+    const { rerender } = render(
+      <StageTransitionModal {...baseProps} open={false} />
+    )
+    rerender(<StageTransitionModal {...baseProps} open />)
+    expect(screen.getByLabelText(/notes/i)).toHaveValue('')
+  })
+
+  it('allows changing the target stage via the select', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const select = screen.getByLabelText('New Stage') as HTMLSelectElement
+    fireEvent.change(select, { target: { value: 'closed' } })
+    expect(select.value).toBe('closed')
+  })
+
+  it('calls onConfirm with the newly selected stage', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+    fireEvent.change(screen.getByLabelText('New Stage'), { target: { value: 'closed' } })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+    expect(onConfirm).toHaveBeenCalledWith('closed', undefined)
+  })
+
+  it('renders Current Stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Current Stage')).toBeInTheDocument()
+  })
+
+  it('renders New Stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('New Stage')).toBeInTheDocument()
+  })
+})

package/src/components/pipeline/index.ts

@@ -0,0 +1,2 @@
+export { StageTransitionModal } from './StageTransitionModal'
+export type { StageTransitionModalProps } from './StageTransitionModal'

package/src/components/settings/SettingsCard.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+export interface SettingsCardProps {
+  title: string
+  description?: string
+  icon?: React.ElementType
+  action?: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function SettingsCard({ title, description, icon: Icon, action, children }: SettingsCardProps) {
+  return (
+    <div className="rounded-xl border bg-white text-gray-900 shadow-sm">
+      <div className="flex items-start justify-between p-6">
+        <div className="flex items-start gap-4">
+          {Icon && (
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100">
+              <Icon className="h-5 w-5 text-gray-600" />
+            </div>
+          )}
+          <div>
+            <h3 className="font-semibold leading-none tracking-tight">{title}</h3>
+            {description && (
+              <p className="text-sm text-gray-500 mt-1.5">{description}</p>
+            )}
+          </div>
+        </div>
+        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
+      </div>
+      {children && <div className="px-6 pb-6 pt-0">{children}</div>}
+    </div>
+  )
+}

package/src/components/settings/SettingsLayout.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+export interface SettingsNavItem {
+  id: string
+  label: string
+  href: string
+  icon?: React.ElementType
+}
+
+export interface SettingsLayoutProps {
+  children: React.ReactNode
+  title?: string
+  description?: string
+}
+
+export function SettingsLayout({ children, title, description }: SettingsLayoutProps) {
+  return (
+    <div className="space-y-6 max-w-4xl">
+      {title && (
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
+          {description && <p className="text-gray-600 mt-1">{description}</p>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}

package/src/components/settings/SettingsNav.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import * as React from 'react'
+
+export interface SettingsNavItem {
+  id: string
+  label: string
+  href: string
+  icon?: React.ElementType
+}
+
+export interface SettingsNavProps {
+  items: SettingsNavItem[]
+  activeId?: string
+  onNavigate: (href: string) => void
+}
+
+export function SettingsNav({ items, activeId, onNavigate }: SettingsNavProps) {
+  return (
+    <nav className="flex flex-col gap-1">
+      {items.map((item) => {
+        const isActive = item.id === activeId
+        const Icon = item.icon
+
+        return (
+          <button
+            key={item.id}
+            onClick={() => onNavigate(item.href)}
+            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left ${
+              isActive
+                ? 'bg-gray-100 text-gray-900'
+                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+            }`}
+          >
+            {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+            {item.label}
+          </button>
+        )
+      })}
+    </nav>
+  )
+}