@startsimpli/ui 0.4.5 → 0.4.7

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

package/src/components/dashboard/SparklineTrend.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+
+export interface SparklineTrendProps {
+  data: number[]
+  color?: string
+  height?: number
+  className?: string
+}
+
+// Map common Tailwind color class suffixes to hex values
+const COLOR_MAP: Record<string, string> = {
+  'blue-500': '#3B82F6',
+  'green-500': '#10B981',
+  'purple-500': '#A855F7',
+  'emerald-500': '#10B981',
+  'red-500': '#EF4444',
+  'orange-500': '#F97316',
+  'yellow-500': '#EAB308',
+  'indigo-500': '#6366F1',
+  'pink-500': '#EC4899',
+  'primary-500': '#3B82F6',
+  'primary-600': '#2563EB',
+  'accent-500': '#A855F7',
+  'success-500': '#10B981',
+}
+
+function resolveColor(color: string): string {
+  // If it looks like a hex/rgb value already, use it directly
+  if (color.startsWith('#') || color.startsWith('rgb')) return color
+
+  // Strip common Tailwind prefixes like "text-"
+  const key = color.replace(/^text-/, '')
+  return COLOR_MAP[key] || COLOR_MAP['blue-500']
+}
+
+export function SparklineTrend({
+  data,
+  color = 'blue-500',
+  height = 40,
+  className,
+}: SparklineTrendProps) {
+  if (data.length < 2) return null
+
+  const width = 100
+  const padding = 2
+
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+
+  const points = data.map((value, index) => {
+    const x = (index / (data.length - 1)) * width
+    const y = height - ((value - min) / range) * (height - padding * 2) - padding
+    return `${x},${y}`
+  })
+
+  const pathData = `M ${points.join(' L ')}`
+  const areaData = `${pathData} L ${width},${height} L 0,${height} Z`
+
+  const hexColor = resolveColor(color)
+  const gradientId = `sparkline-gradient-${React.useId().replace(/:/g, '')}`
+
+  const trend =
+    data[data.length - 1] > data[0]
+      ? 'increasing'
+      : data[data.length - 1] < data[0]
+        ? 'decreasing'
+        : 'stable'
+
+  return (
+    <svg
+      width="100%"
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      className={className ?? 'w-full'}
+      role="img"
+      aria-label={`Trend chart showing ${trend} pattern`}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor={hexColor} stopOpacity="0.3" />
+          <stop offset="100%" stopColor={hexColor} stopOpacity="0.05" />
+        </linearGradient>
+      </defs>
+      <path
+        d={areaData}
+        fill={`url(#${gradientId})`}
+        className="transition-all duration-300"
+      />
+      <path
+        d={pathData}
+        fill="none"
+        stroke={hexColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="transition-all duration-300"
+      />
+    </svg>
+  )
+}

package/src/components/dashboard/index.ts

@@ -0,0 +1,14 @@
+export { MetricCard } from './MetricCard'
+export type { MetricCardProps, MetricCardTrend } from './MetricCard'
+
+export { PeriodSelector } from './PeriodSelector'
+export type { PeriodSelectorProps, PeriodOption } from './PeriodSelector'
+
+export { SparklineTrend } from './SparklineTrend'
+export type { SparklineTrendProps } from './SparklineTrend'
+
+export { DashboardGrid } from './DashboardGrid'
+export type { DashboardGridProps } from './DashboardGrid'
+
+export { DashboardSection } from './DashboardSection'
+export type { DashboardSectionProps } from './DashboardSection'

package/src/components/email-dialogs/index.ts

@@ -0,0 +1,14 @@
+export { ScheduleDialog } from './schedule-dialog'
+export { TestSendDialog } from './test-send-dialog'
+export { PreviewDialog } from './preview-dialog'
+export type { PreviewRecipient } from './preview-dialog'
+export { TemplatePicker } from './template-picker'
+export type { EmailTemplate } from './template-picker'
+export {
+  MergeFieldsMenu,
+  MergeFieldPreview,
+  replaceMergeFields,
+  DEFAULT_MERGE_FIELDS,
+  DEFAULT_CATEGORIES,
+} from './merge-fields'
+export type { MergeField, MergeFieldCategory } from './merge-fields'

package/src/components/email-dialogs/merge-fields.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { Braces } from 'lucide-react'
+
+export interface MergeField {
+  key: string
+  label: string
+  example: string
+  category: string
+}
+
+export interface MergeFieldCategory {
+  name: string
+  label: string
+}
+
+/** Default merge field categories for email composition */
+export const DEFAULT_CATEGORIES: MergeFieldCategory[] = [
+  { name: 'recipient', label: 'Recipient' },
+  { name: 'organization', label: 'Organization' },
+  { name: 'sender', label: 'Sender' },
+  { name: 'date', label: 'Date' },
+]
+
+/** Default merge fields for email composition */
+export const DEFAULT_MERGE_FIELDS: MergeField[] = [
+  // Recipient fields
+  { key: '{{recipient.firstName}}', label: 'First Name', example: 'John', category: 'recipient' },
+  { key: '{{recipient.lastName}}', label: 'Last Name', example: 'Smith', category: 'recipient' },
+  { key: '{{recipient.fullName}}', label: 'Full Name', example: 'John Smith', category: 'recipient' },
+  { key: '{{recipient.email}}', label: 'Email', example: 'john@example.com', category: 'recipient' },
+  { key: '{{recipient.title}}', label: 'Title', example: 'Partner', category: 'recipient' },
+
+  // Organization fields
+  { key: '{{organization.name}}', label: 'Organization', example: 'Acme Corp', category: 'organization' },
+  { key: '{{organization.type}}', label: 'Type', example: 'Enterprise', category: 'organization' },
+
+  // Sender fields
+  { key: '{{sender.name}}', label: 'Your Company', example: 'My Company', category: 'sender' },
+  { key: '{{sender.contactName}}', label: 'Your Name', example: 'Jane Doe', category: 'sender' },
+
+  // Date fields
+  { key: '{{date.today}}', label: 'Today', example: 'December 8, 2024', category: 'date' },
+  { key: '{{date.month}}', label: 'Current Month', example: 'December', category: 'date' },
+  { key: '{{date.quarter}}', label: 'Current Quarter', example: 'Q4 2024', category: 'date' },
+  { key: '{{date.year}}', label: 'Current Year', example: '2024', category: 'date' },
+]
+
+interface MergeFieldsMenuProps {
+  onInsert: (field: string) => void
+  variant?: 'default' | 'compact'
+  /** Custom merge fields to display. Defaults to DEFAULT_MERGE_FIELDS. */
+  fields?: MergeField[]
+  /** Custom categories for grouping. Defaults to DEFAULT_CATEGORIES. */
+  categories?: MergeFieldCategory[]
+}
+
+export function MergeFieldsMenu({
+  onInsert,
+  variant = 'default',
+  fields = DEFAULT_MERGE_FIELDS,
+  categories = DEFAULT_CATEGORIES,
+}: MergeFieldsMenuProps) {
+  const fieldsByCategory = categories.map((cat) => ({
+    ...cat,
+    fields: fields.filter((f) => f.category === cat.name),
+  }))
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {variant === 'compact' ? (
+          <Button variant="ghost" size="sm" className="h-8 gap-1">
+            <Braces className="h-4 w-4" />
+            <span className="text-xs">Merge</span>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm">
+            <Braces className="mr-2 h-4 w-4" />
+            Insert Merge Field
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        {fieldsByCategory.map((cat, idx) => (
+          <div key={cat.name}>
+            {idx > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuLabel>{cat.label}</DropdownMenuLabel>
+            {cat.fields.map((field) => (
+              <MergeFieldItem key={field.key} field={field} onInsert={onInsert} />
+            ))}
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function MergeFieldItem({ field, onInsert }: { field: MergeField; onInsert: (field: string) => void }) {
+  return (
+    <DropdownMenuItem onClick={() => onInsert(field.key)} className="flex justify-between">
+      <span>{field.label}</span>
+      <span className="text-xs text-muted-foreground">{field.example}</span>
+    </DropdownMenuItem>
+  )
+}
+
+// Preview component to show merge fields as visual tokens
+interface MergeFieldPreviewProps {
+  content: string
+  sampleData?: Record<string, string>
+}
+
+/** Replace merge field tokens in content with sample data for previewing */
+export function MergeFieldPreview({ content, sampleData }: MergeFieldPreviewProps) {
+  const defaultSampleData: Record<string, string> = {
+    '{{recipient.firstName}}': 'John',
+    '{{recipient.lastName}}': 'Smith',
+    '{{recipient.fullName}}': 'John Smith',
+    '{{recipient.email}}': 'john@example.com',
+    '{{recipient.title}}': 'Partner',
+    '{{organization.name}}': 'Acme Corp',
+    '{{organization.type}}': 'Enterprise',
+    '{{sender.name}}': 'My Company',
+    '{{sender.contactName}}': 'Jane Doe',
+    '{{date.today}}': new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }),
+    '{{date.month}}': new Date().toLocaleDateString('en-US', { month: 'long' }),
+    '{{date.quarter}}': `Q${Math.ceil((new Date().getMonth() + 1) / 3)} ${new Date().getFullYear()}`,
+    '{{date.year}}': new Date().getFullYear().toString(),
+  }
+
+  const data = { ...defaultSampleData, ...sampleData }
+
+  let preview = content
+  for (const [key, value] of Object.entries(data)) {
+    preview = preview.replace(new RegExp(key.replace(/[{}]/g, '\\$&'), 'g'), value)
+  }
+
+  return preview
+}
+
+/** Replace merge fields in content with actual recipient data for sending */
+export function replaceMergeFields(
+  content: string,
+  recipient: {
+    firstName?: string | null
+    lastName?: string | null
+    name?: string | null
+    email?: string | null
+    title?: string | null
+  },
+  organization?: {
+    name?: string | null
+    type?: string | null
+  },
+  sender?: {
+    name?: string | null
+    contactName?: string | null
+  }
+): string {
+  const firstName = recipient.firstName || recipient.name?.split(' ')[0] || ''
+  const lastName = recipient.lastName || recipient.name?.split(' ').slice(1).join(' ') || ''
+  const fullName = recipient.name || `${firstName} ${lastName}`.trim()
+
+  const replacements: Record<string, string> = {
+    '{{recipient.firstName}}': firstName,
+    '{{recipient.lastName}}': lastName,
+    '{{recipient.fullName}}': fullName,
+    '{{recipient.email}}': recipient.email || '',
+    '{{recipient.title}}': recipient.title || '',
+    '{{organization.name}}': organization?.name || '',
+    '{{organization.type}}': organization?.type || '',
+    '{{sender.name}}': sender?.name || '',
+    '{{sender.contactName}}': sender?.contactName || '',
+    '{{date.today}}': new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }),
+    '{{date.month}}': new Date().toLocaleDateString('en-US', { month: 'long' }),
+    '{{date.quarter}}': `Q${Math.ceil((new Date().getMonth() + 1) / 3)} ${new Date().getFullYear()}`,
+    '{{date.year}}': new Date().getFullYear().toString(),
+  }
+
+  let result = content
+  for (const [key, value] of Object.entries(replacements)) {
+    result = result.replace(new RegExp(key.replace(/[{}]/g, '\\$&'), 'g'), value)
+  }
+
+  return result
+}