npm - @startsimpli/ui - Versions diffs - 0.4.5 → 0.4.7 - Mend

@startsimpli/ui 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/package.json +2 -1
package/src/components/ActivityTimeline.tsx +173 -0
package/src/components/LogActivityDialog.tsx +303 -0
package/src/components/QuickLogButtons.tsx +32 -0
package/src/components/badge/StageBadge.tsx +31 -0
package/src/components/badge/index.ts +3 -0
package/src/components/command-palette/CommandPalette.tsx +344 -0
package/src/components/command-palette/command-palette-context.tsx +51 -0
package/src/components/command-palette/index.ts +3 -0
package/src/components/compose/compose-header.tsx +72 -0
package/src/components/compose/compose-loading.tsx +13 -0
package/src/components/compose/index.ts +6 -0
package/src/components/compose/save-status-indicator.tsx +57 -0
package/src/components/compose/send-confirmation-dialog.tsx +87 -0
package/src/components/compose/subject-input.tsx +25 -0
package/src/components/compose/useAutoSave.ts +93 -0
package/src/components/dashboard/DashboardGrid.tsx +32 -0
package/src/components/dashboard/DashboardSection.tsx +32 -0
package/src/components/dashboard/MetricCard.tsx +129 -0
package/src/components/dashboard/PeriodSelector.tsx +55 -0
package/src/components/dashboard/SparklineTrend.tsx +102 -0
package/src/components/dashboard/index.ts +14 -0
package/src/components/email-dialogs/index.ts +14 -0
package/src/components/email-dialogs/merge-fields.tsx +196 -0
package/src/components/email-dialogs/preview-dialog.tsx +194 -0
package/src/components/email-dialogs/schedule-dialog.tsx +297 -0
package/src/components/email-dialogs/template-picker.tsx +225 -0
package/src/components/email-dialogs/test-send-dialog.tsx +188 -0
package/src/components/email-editor/add-block-menu.tsx +151 -0
package/src/components/email-editor/block-toolbar.tsx +73 -0
package/src/components/email-editor/blocks/button-block.tsx +44 -0
package/src/components/email-editor/blocks/divider-block.tsx +43 -0
package/src/components/email-editor/blocks/footer-block.tsx +39 -0
package/src/components/email-editor/blocks/header-block.tsx +39 -0
package/src/components/email-editor/blocks/image-block.tsx +61 -0
package/src/components/email-editor/blocks/index.ts +9 -0
package/src/components/email-editor/blocks/metrics-block.tsx +198 -0
package/src/components/email-editor/blocks/social-block.tsx +75 -0
package/src/components/email-editor/blocks/spacer-block.tsx +26 -0
package/src/components/email-editor/blocks/text-block.tsx +75 -0
package/src/components/email-editor/editor-sidebar.tsx +791 -0
package/src/components/email-editor/email-editor.tsx +886 -0
package/src/components/email-editor/index.ts +50 -0
package/src/components/email-editor/renderer/block-renderers.ts +209 -0
package/src/components/email-editor/renderer/email-html-renderer.ts +128 -0
package/src/components/email-editor/types.ts +413 -0
package/src/components/email-editor/utils/defaults.ts +116 -0
package/src/components/email-editor/utils/undo-redo.ts +59 -0
package/src/components/enrichment/EnrichButton.tsx +33 -0
package/src/components/enrichment/EnrichmentProgress.tsx +66 -0
package/src/components/enrichment/QualityBadge.tsx +43 -0
package/src/components/enrichment/index.ts +8 -0
package/src/components/gantt/GanttChart.tsx +25 -25
package/src/components/gantt/types.ts +5 -5
package/src/components/index.ts +46 -0
package/src/components/integrations/ConnectionStatus.tsx +77 -0
package/src/components/integrations/IntegrationCard.tsx +92 -0
package/src/components/integrations/index.ts +5 -0
package/src/components/kanban/KanbanBoard.tsx +103 -0
package/src/components/kanban/index.ts +2 -0
package/src/components/lists/CreateListDialog.tsx +158 -0
package/src/components/lists/ListCard.tsx +77 -0
package/src/components/lists/index.ts +5 -0
package/src/components/pipeline/StageTransitionModal.tsx +146 -0
package/src/components/pipeline/index.ts +2 -0
package/src/components/settings/SettingsCard.tsx +33 -0
package/src/components/settings/SettingsLayout.tsx +28 -0
package/src/components/settings/SettingsNav.tsx +42 -0
package/src/components/settings/index.ts +6 -0

package/src/components/email-dialogs/preview-dialog.tsx ADDED Viewed

@@ -0,0 +1,194 @@
+'use client'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Label } from '../ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Tabs, TabsList, TabsTrigger } from '../ui/tabs'
+import { Monitor, Smartphone, Code } from 'lucide-react'
+import { MergeFieldPreview } from './merge-fields'
+import { cn } from '../../utils/cn'
+export interface PreviewRecipient {
+  id: string
+  name: string
+  label?: string
+  /** Sample data for merge field substitution, keyed by merge field token (e.g. "{{recipient.firstName}}") */
+  mergeData?: Record<string, string>
+}
+interface PreviewDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  subject: string
+  /**
+   * Pre-rendered email body HTML. The component will wrap this in an email
+   * shell with proper styling for preview.
+   */
+  bodyHtml: string
+  /** Recipients available for merge field preview */
+  recipients?: PreviewRecipient[]
+  /** Additional merge field sample data applied on top of recipient data */
+  sampleData?: Record<string, string>
+  /** Unsubscribe link text. Set to null to hide. */
+  unsubscribeText?: string | null
+}
+// Default sample recipient for preview
+const DEFAULT_RECIPIENT: PreviewRecipient = {
+  id: 'sample',
+  name: 'John Smith',
+  mergeData: {
+    '{{recipient.firstName}}': 'John',
+    '{{recipient.lastName}}': 'Smith',
+    '{{recipient.fullName}}': 'John Smith',
+    '{{recipient.email}}': 'john@example.com',
+  },
+}
+export function PreviewDialog({
+  open,
+  onOpenChange,
+  subject,
+  bodyHtml,
+  recipients = [],
+  sampleData,
+  unsubscribeText = 'Unsubscribe from these updates',
+}: PreviewDialogProps) {
+  const [viewMode, setViewMode] = useState<'desktop' | 'mobile' | 'html'>('desktop')
+  const [selectedRecipientId, setSelectedRecipientId] = useState<string>('sample')
+  const previewRecipients = recipients.length > 0 ? recipients : [DEFAULT_RECIPIENT]
+  const selectedRecipient = previewRecipients.find(r => r.id === selectedRecipientId) || previewRecipients[0]
+  // Build merge data from selected recipient + any extra sample data
+  const mergeDataForPreview: Record<string, string> = {
+    ...selectedRecipient.mergeData,
+    '{{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(),
+    ...sampleData,
+  }
+  const previewSubject = MergeFieldPreview({ content: subject, sampleData: mergeDataForPreview })
+  const previewBody = MergeFieldPreview({ content: bodyHtml, sampleData: mergeDataForPreview })
+  const fullEmailHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${previewSubject}</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f3f4f6;">
+  <div style="max-width: 600px; margin: 0 auto; padding: 24px;">
+    <div style="background: white; border-radius: 8px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+      ${previewBody}
+    </div>
+    ${unsubscribeText ? `
+    <div style="text-align: center; padding: 24px; font-size: 12px; color: #6b7280;">
+      <a href="#" style="color: #6b7280;">${unsubscribeText}</a>
+    </div>
+    ` : ''}
+  </div>
+</body>
+</html>
+  `.trim()
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Preview Email</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center justify-between gap-4 pb-4 border-b">
+          <div className="flex items-center gap-4">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">Preview as</Label>
+              <Select value={selectedRecipientId} onValueChange={setSelectedRecipientId}>
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {previewRecipients.map(r => (
+                    <SelectItem key={r.id} value={r.id}>
+                      {r.label || r.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as typeof viewMode)}>
+            <TabsList>
+              <TabsTrigger value="desktop" className="gap-2">
+                <Monitor className="h-4 w-4" />
+                Desktop
+              </TabsTrigger>
+              <TabsTrigger value="mobile" className="gap-2">
+                <Smartphone className="h-4 w-4" />
+                Mobile
+              </TabsTrigger>
+              <TabsTrigger value="html" className="gap-2">
+                <Code className="h-4 w-4" />
+                HTML
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {/* Subject line preview */}
+          <div className="p-4 bg-muted/50 rounded-lg mb-4">
+            <Label className="text-xs text-muted-foreground">Subject</Label>
+            <p className="font-medium mt-1">{previewSubject}</p>
+          </div>
+          {viewMode === 'html' ? (
+            <div className="bg-muted rounded-lg p-4 overflow-auto">
+              <pre className="text-xs whitespace-pre-wrap font-mono">{fullEmailHtml}</pre>
+            </div>
+          ) : (
+            <div
+              className={cn(
+                'bg-gray-100 rounded-lg p-4 mx-auto transition-all',
+                viewMode === 'mobile' ? 'max-w-[375px]' : 'max-w-full'
+              )}
+            >
+              <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+                <iframe
+                  srcDoc={fullEmailHtml}
+                  className="w-full border-0"
+                  style={{ height: viewMode === 'mobile' ? '500px' : '400px' }}
+                  title="Email preview"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/email-dialogs/schedule-dialog.tsx ADDED Viewed

@@ -0,0 +1,297 @@
+'use client'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Label } from '../ui/label'
+import { Calendar } from '../ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Loader2, CalendarIcon, Clock } from 'lucide-react'
+import { useToast } from '../toast'
+import { format, addDays, setHours, setMinutes, isBefore, startOfDay } from 'date-fns'
+import { cn } from '../../utils/cn'
+interface SummaryItem {
+  label: string
+  value: string
+}
+interface ScheduleDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Summary items displayed at the top of the dialog (e.g. subject, recipient count) */
+  summaryItems: SummaryItem[]
+  /** Called to schedule the message. Receives the ISO date string for the scheduled time. */
+  onSchedule: (scheduledAt: string) => Promise<void>
+  /** Called to save draft before scheduling when there are unsaved changes */
+  onSaveDraft?: () => Promise<void>
+  /** Called to prepare recipients (e.g. expand contact tags) before scheduling */
+  onPrepareRecipients?: () => Promise<void>
+  /** Whether there are unsaved changes that need saving before scheduling */
+  hasUnsavedChanges?: boolean
+  /** Dialog title. Defaults to "Schedule Send" */
+  title?: string
+  /** Dialog description. Defaults to "Choose when to send this email" */
+  description?: string
+  /** Info message shown after confirming schedule time */
+  scheduledInfoMessage?: string
+}
+// Generate time options in 30-minute increments
+const generateTimeOptions = () => {
+  const options: { value: string; label: string }[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (const minute of [0, 30]) {
+      const h = hour.toString().padStart(2, '0')
+      const m = minute.toString().padStart(2, '0')
+      const period = hour < 12 ? 'AM' : 'PM'
+      const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+      options.push({
+        value: `${h}:${m}`,
+        label: `${displayHour}:${m.padStart(2, '0')} ${period}`,
+      })
+    }
+  }
+  return options
+}
+const TIME_OPTIONS = generateTimeOptions()
+// Quick schedule options
+const QUICK_OPTIONS = [
+  { label: 'Tomorrow 9 AM', getValue: () => setHours(setMinutes(addDays(new Date(), 1), 0), 9) },
+  { label: 'Tomorrow 2 PM', getValue: () => setHours(setMinutes(addDays(new Date(), 1), 0), 14) },
+  { label: 'Monday 9 AM', getValue: () => {
+    const today = new Date()
+    const daysUntilMonday = (8 - today.getDay()) % 7 || 7
+    return setHours(setMinutes(addDays(today, daysUntilMonday), 0), 9)
+  }},
+  { label: 'Next week', getValue: () => setHours(setMinutes(addDays(new Date(), 7), 0), 9) },
+]
+export function ScheduleDialog({
+  open,
+  onOpenChange,
+  summaryItems,
+  onSchedule,
+  onSaveDraft,
+  onPrepareRecipients,
+  hasUnsavedChanges = false,
+  title = 'Schedule Send',
+  description = 'Choose when to send this email',
+  scheduledInfoMessage = 'You can cancel or edit this scheduled send from the messages list.',
+}: ScheduleDialogProps) {
+  const { toast } = useToast()
+  const [scheduling, setScheduling] = useState(false)
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1))
+  const [selectedTime, setSelectedTime] = useState('09:00')
+  const getScheduledDateTime = (): Date | null => {
+    if (!selectedDate) return null
+    const [hours, minutes] = selectedTime.split(':').map(Number)
+    return setMinutes(setHours(selectedDate, hours), minutes)
+  }
+  const isValidScheduleTime = (): boolean => {
+    const scheduledTime = getScheduledDateTime()
+    if (!scheduledTime) return false
+    // Must be at least 5 minutes in the future
+    return scheduledTime.getTime() > Date.now() + 5 * 60 * 1000
+  }
+  const handleQuickSelect = (getValue: () => Date) => {
+    const date = getValue()
+    setSelectedDate(startOfDay(date))
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+    setSelectedTime(`${hours}:${minutes}`)
+  }
+  const handleSchedule = async () => {
+    const scheduledDateTime = getScheduledDateTime()
+    if (!scheduledDateTime) {
+      toast({ description: 'Please select a date and time', variant: 'destructive' })
+      return
+    }
+    if (!isValidScheduleTime()) {
+      toast({ description: 'Scheduled time must be at least 5 minutes in the future', variant: 'destructive' })
+      return
+    }
+    setScheduling(true)
+    try {
+      // Save any pending changes first
+      if (hasUnsavedChanges && onSaveDraft) {
+        await onSaveDraft()
+      }
+      // Prepare recipients if needed
+      if (onPrepareRecipients) {
+        await onPrepareRecipients()
+      }
+      // Delegate scheduling to the caller
+      await onSchedule(scheduledDateTime.toISOString())
+      toast({
+        description: `Scheduled for ${format(scheduledDateTime, 'PPP')} at ${format(scheduledDateTime, 'p')}`,
+      })
+      onOpenChange(false)
+    } catch (error) {
+      console.error('Error scheduling:', error)
+      toast({
+        description: error instanceof Error ? error.message : 'Failed to schedule',
+        variant: 'destructive',
+      })
+    } finally {
+      setScheduling(false)
+    }
+  }
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-6 py-4">
+          {/* Summary */}
+          <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 truncate ml-4">{item.value}</span>
+              </div>
+            ))}
+          </div>
+          {/* Quick options */}
+          <div className="space-y-2">
+            <Label className="text-sm text-muted-foreground">Quick schedule</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {QUICK_OPTIONS.map((option) => (
+                <Button
+                  key={option.label}
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleQuickSelect(option.getValue)}
+                  className="justify-start"
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+          {/* Date/Time picker */}
+          <div className="space-y-4">
+            <Label className="text-sm text-muted-foreground">Or pick a specific date and time</Label>
+            <div className="flex gap-4">
+              {/* Date picker */}
+              <div className="flex-1 space-y-2">
+                <Label htmlFor="date">Date</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        'w-full justify-start text-left font-normal',
+                        !selectedDate && 'text-muted-foreground'
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {selectedDate ? format(selectedDate, 'PPP') : 'Pick a date'}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={selectedDate}
+                      onSelect={setSelectedDate}
+                      disabled={(date) => isBefore(date, startOfDay(new Date()))}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+              {/* Time picker */}
+              <div className="w-[140px] space-y-2">
+                <Label htmlFor="time">Time</Label>
+                <Select value={selectedTime} onValueChange={setSelectedTime}>
+                  <SelectTrigger>
+                    <Clock className="mr-2 h-4 w-4" />
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[300px]">
+                    {TIME_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+          {/* Preview scheduled time */}
+          {selectedDate && isValidScheduleTime() && (
+            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-blue-800 text-sm">
+              <p>
+                <strong>Scheduled for:</strong>{' '}
+                {format(getScheduledDateTime()!, 'PPPP')} at {format(getScheduledDateTime()!, 'p')}
+              </p>
+              {scheduledInfoMessage && (
+                <p className="text-xs mt-1 text-blue-600">
+                  {scheduledInfoMessage}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={scheduling}>
+            Cancel
+          </Button>
+          <Button onClick={handleSchedule} disabled={scheduling || !isValidScheduleTime()}>
+            {scheduling ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Scheduling...
+              </>
+            ) : (
+              <>
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                Schedule Send
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}