@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/compose/compose-header.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Button } from '../ui/button'
+import { ArrowLeft, Save, Eye, Send } from 'lucide-react'
+import { SaveStatusIndicator } from './save-status-indicator'
+
+interface ComposeHeaderProps {
+  title: string
+  saving: boolean
+  lastSavedLabel: string | null
+  hasUnsavedChanges: boolean
+  canSend: boolean
+  onBack: () => void
+  onSave: () => void
+  onPreview: () => void
+  onSend: () => void
+  extraActions?: ReactNode
+}
+
+export function ComposeHeader({
+  title,
+  saving,
+  lastSavedLabel,
+  hasUnsavedChanges,
+  canSend,
+  onBack,
+  onSave,
+  onPreview,
+  onSend,
+  extraActions,
+}: ComposeHeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-2 border-b bg-background">
+      <div className="flex items-center gap-3 min-w-0">
+        <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onBack}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <span className="text-sm font-medium truncate">{title}</span>
+        <SaveStatusIndicator
+          saving={saving}
+          lastSavedLabel={lastSavedLabel}
+          hasUnsavedChanges={hasUnsavedChanges}
+        />
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onSave}
+          disabled={saving}
+        >
+          <Save className="mr-1.5 h-3.5 w-3.5" />
+          Save
+        </Button>
+        <Button variant="outline" size="sm" onClick={onPreview}>
+          <Eye className="mr-1.5 h-3.5 w-3.5" />
+          Preview
+        </Button>
+        {extraActions}
+        <Button
+          size="sm"
+          disabled={!canSend}
+          onClick={onSend}
+        >
+          <Send className="mr-1.5 h-3.5 w-3.5" />
+          Send
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/compose/compose-loading.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+export function ComposeLoading() {
+  return (
+    <div className="p-6">
+      <div className="animate-pulse">
+        <div className="h-8 bg-gray-300 rounded w-1/4 mb-6"></div>
+        <div className="h-12 bg-gray-200 rounded mb-4"></div>
+        <div className="h-64 bg-gray-200 rounded"></div>
+      </div>
+    </div>
+  )
+}

package/src/components/compose/index.ts

@@ -0,0 +1,6 @@
+export { useAutoSave } from './useAutoSave'
+export { SaveStatusIndicator } from './save-status-indicator'
+export { ComposeHeader } from './compose-header'
+export { SendConfirmationDialog } from './send-confirmation-dialog'
+export { SubjectInput } from './subject-input'
+export { ComposeLoading } from './compose-loading'

package/src/components/compose/save-status-indicator.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip'
+
+interface SaveStatusIndicatorProps {
+  saving: boolean
+  lastSavedLabel: string | null
+  hasUnsavedChanges: boolean
+}
+
+export function SaveStatusIndicator({
+  saving,
+  lastSavedLabel,
+  hasUnsavedChanges,
+}: SaveStatusIndicatorProps) {
+  const label = saving
+    ? 'Saving...'
+    : lastSavedLabel
+      ? `Saved ${lastSavedLabel}`
+      : hasUnsavedChanges
+        ? 'Unsaved changes'
+        : 'New draft'
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground cursor-default">
+            {saving ? (
+              <Loader2 className="h-2.5 w-2.5 animate-spin" />
+            ) : (
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${
+                  hasUnsavedChanges
+                    ? 'bg-amber-400'
+                    : lastSavedLabel
+                      ? 'bg-green-500'
+                      : 'border border-muted-foreground'
+                }`}
+              />
+            )}
+            {label}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p className="text-xs">{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/components/compose/send-confirmation-dialog.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Send, Loader2, Clock } from 'lucide-react'
+
+interface SendSummaryItem {
+  label: string
+  value: string
+}
+
+interface SendConfirmationDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  sending: boolean
+  title?: string
+  description?: string
+  summaryItems: SendSummaryItem[]
+  warningMessage?: string
+}
+
+export function SendConfirmationDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  sending,
+  title = 'Send Update',
+  description = 'Are you ready to send this?',
+  summaryItems,
+  warningMessage = 'Emails will be sent immediately. Each recipient will receive a personalized version with their information.',
+}: SendConfirmationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="p-4 bg-muted rounded-lg space-y-2">
+            {summaryItems.map((item) => (
+              <div key={item.label} className="flex justify-between text-sm">
+                <span className="text-muted-foreground">{item.label}:</span>
+                <span className="font-medium">{item.value}</span>
+              </div>
+            ))}
+          </div>
+
+          {warningMessage && (
+            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+              <Clock className="h-4 w-4 mt-0.5 flex-shrink-0" />
+              <p className="text-sm">{warningMessage}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={sending}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} disabled={sending}>
+            {sending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Sending...
+              </>
+            ) : (
+              <>
+                <Send className="mr-2 h-4 w-4" />
+                Send Now
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/compose/subject-input.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Input } from '../ui/input'
+
+interface SubjectInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+export function SubjectInput({
+  value,
+  onChange,
+  placeholder = 'Subject line...',
+}: SubjectInputProps) {
+  return (
+    <Input
+      id="subject"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="border-0 shadow-none focus-visible:ring-0 text-lg font-medium px-0 h-auto py-0"
+    />
+  )
+}

package/src/components/compose/useAutoSave.ts

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useRef, useState, useCallback } from 'react'
+
+interface AutoSaveConfig {
+  /** Serialized representation of current content for change comparison */
+  serializedContent: string
+  /** Function to call when auto-saving (receives isManual flag) */
+  onSave: (isManual: boolean) => Promise<void>
+  /** Auto-save delay in milliseconds (default: 30000) */
+  delay?: number
+}
+
+interface AutoSaveState {
+  saving: boolean
+  setSaving: (saving: boolean) => void
+  lastSaved: Date | null
+  setLastSaved: (date: Date | null) => void
+  hasUnsavedChanges: boolean
+  /** Update the saved-content snapshot (call after loading or saving a draft) */
+  snapshotContent: (serialized: string) => void
+  /** Format the last saved time as a human-readable string */
+  formatLastSaved: () => string | null
+}
+
+export function useAutoSave({
+  serializedContent,
+  onSave,
+  delay = 30000,
+}: AutoSaveConfig): AutoSaveState {
+  const [saving, setSaving] = useState(false)
+  const [lastSaved, setLastSaved] = useState<Date | null>(null)
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+
+  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const lastSavedContentRef = useRef<string>('')
+
+  const snapshotContent = useCallback((s: string) => {
+    lastSavedContentRef.current = s
+  }, [])
+
+  const formatLastSaved = useCallback(() => {
+    if (!lastSaved || isNaN(lastSaved.getTime())) return null
+    const diff = Date.now() - lastSaved.getTime()
+    if (diff < 60000) return 'just now'
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
+    return lastSaved.toLocaleTimeString()
+  }, [lastSaved])
+
+  // Track changes and trigger auto-save
+  useEffect(() => {
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current)
+    }
+
+    const hasChanges = serializedContent !== lastSavedContentRef.current
+    setHasUnsavedChanges(hasChanges)
+
+    if (hasChanges) {
+      autoSaveTimerRef.current = setTimeout(() => {
+        onSave(false)
+      }, delay)
+    }
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current)
+      }
+    }
+  }, [serializedContent, onSave, delay])
+
+  // Warn on leave with unsaved changes
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault()
+        e.returnValue = ''
+      }
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [hasUnsavedChanges])
+
+  return {
+    saving,
+    setSaving,
+    lastSaved,
+    setLastSaved,
+    hasUnsavedChanges,
+    snapshotContent,
+    formatLastSaved,
+  }
+}

package/src/components/dashboard/DashboardGrid.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+export interface DashboardGridProps {
+  children: React.ReactNode
+  /** Number of columns at lg breakpoint */
+  columns?: 1 | 2 | 3 | 4
+  /** Gap size between items */
+  gap?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const gapMap = { sm: 'gap-4', md: 'gap-6', lg: 'gap-8' } as const
+
+const colMap = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'sm:grid-cols-2 lg:grid-cols-4',
+} as const
+
+export function DashboardGrid({
+  children,
+  columns = 2,
+  gap = 'md',
+  className = '',
+}: DashboardGridProps) {
+  return (
+    <div className={`grid grid-cols-1 ${colMap[columns]} ${gapMap[gap]} ${className}`}>
+      {children}
+    </div>
+  )
+}

package/src/components/dashboard/DashboardSection.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+export interface DashboardSectionProps {
+  title: string
+  description?: string
+  action?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function DashboardSection({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: DashboardSectionProps) {
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+          {description && (
+            <p className="text-sm text-gray-600 mt-1">{description}</p>
+          )}
+        </div>
+        {action && <div className="flex-shrink-0">{action}</div>}
+      </div>
+      {children}
+    </div>
+  )
+}

package/src/components/dashboard/MetricCard.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { SparklineTrend } from './SparklineTrend'
+
+export interface MetricCardTrend {
+  value: number
+  isPositive?: boolean
+  label?: string
+}
+
+export interface MetricCardProps {
+  label: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  iconColor?: string
+  trend?: MetricCardTrend
+  sparklineData?: number[]
+  href?: string
+  isLoading?: boolean
+  error?: boolean
+  className?: string
+}
+
+export function MetricCard({
+  label,
+  value,
+  icon: Icon,
+  iconColor = 'text-blue-500',
+  trend,
+  sparklineData,
+  href,
+  isLoading,
+  error,
+  className,
+}: MetricCardProps) {
+  const content = (
+    <div
+      className={cn(
+        'rounded-xl border bg-card text-card-foreground shadow p-6 transition-all duration-200 hover:shadow-lg cursor-pointer',
+        error && 'border-red-200 bg-red-50',
+        isLoading && 'animate-pulse',
+        className,
+      )}
+    >
+      <div className="space-y-3">
+        {/* Header: Label and Icon */}
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-gray-500">{label}</h3>
+          <div className={iconColor}>
+            <Icon className="w-5 h-5" aria-hidden="true" />
+          </div>
+        </div>
+
+        {/* Value */}
+        <div className="flex items-baseline justify-between">
+          <p className="text-3xl font-bold text-gray-900">
+            {isLoading ? '\u2014' : error ? 'Error' : value}
+          </p>
+
+          {/* Trend Indicator */}
+          {trend && !isLoading && !error && (
+            <TrendIndicator trend={trend} />
+          )}
+        </div>
+
+        {/* Trend Label */}
+        {trend?.label && !isLoading && !error && (
+          <p className="text-xs text-gray-500">{trend.label}</p>
+        )}
+
+        {/* Sparkline */}
+        {sparklineData && sparklineData.length > 1 && !isLoading && !error && (
+          <div className="pt-2">
+            <SparklineTrend data={sparklineData} color={iconColor} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+
+  if (href) {
+    // Render a plain <a> tag so the component works in any React framework
+    // without requiring a specific router. Consumers using Next.js can wrap
+    // with their own <Link> or pass an href and rely on client-side navigation.
+    return (
+      <a
+        href={href}
+        className="block focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-lg"
+        aria-label={`View ${label} details`}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return content
+}
+
+function TrendIndicator({ trend }: { trend: MetricCardTrend }) {
+  const colorClass =
+    trend.isPositive === true
+      ? 'text-green-600'
+      : trend.isPositive === false
+        ? 'text-red-600'
+        : 'text-gray-500'
+
+  return (
+    <div className={`flex items-center gap-1 text-xs font-medium ${colorClass}`}>
+      {trend.isPositive === true && (
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M2 17L12 7l10 10" />
+        </svg>
+      )}
+      {trend.isPositive === false && (
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M2 7l10 10L22 7" />
+        </svg>
+      )}
+      {trend.isPositive === undefined && (
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
+        </svg>
+      )}
+      <span>
+        {trend.value > 0 ? '+' : ''}{trend.value}%
+      </span>
+    </div>
+  )
+}

package/src/components/dashboard/PeriodSelector.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface PeriodOption {
+  value: string
+  label: string
+}
+
+export interface PeriodSelectorProps {
+  periods?: PeriodOption[]
+  selected: string
+  onChange: (value: string) => void
+  className?: string
+}
+
+const DEFAULT_PERIODS: PeriodOption[] = [
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+  { value: 'quarter', label: 'Quarter' },
+  { value: 'year', label: 'Year' },
+]
+
+export function PeriodSelector({
+  periods = DEFAULT_PERIODS,
+  selected,
+  onChange,
+  className,
+}: PeriodSelectorProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1 bg-white rounded-lg border border-gray-200 p-1',
+        className,
+      )}
+      role="group"
+      aria-label="Time period"
+    >
+      {periods.map(({ value, label }) => (
+        <button
+          key={value}
+          onClick={() => onChange(value)}
+          className={cn(
+            'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+            selected === value
+              ? 'bg-primary-100 text-primary-700'
+              : 'text-gray-600 hover:bg-gray-100',
+          )}
+          aria-pressed={selected === value}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  )
+}