@startsimpli/ui 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -13,6 +13,7 @@
     "./utils": "./src/utils/index.ts",
     "./theme": "./src/theme/index.ts",
     "./theme/contract": "./theme/contract.css",
+    "./email-editor": "./src/components/email-editor/index.ts",
     "./tailwind": "./tailwind.preset.js"
   },
   "files": [

package/src/components/ActivityTimeline.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { ComponentType } from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { Clock, User } from 'lucide-react';
+import { EmptyState } from './states';
+
+export interface ActivityTimelineItem {
+  id: string;
+  type: string;
+  title: string;
+  description?: string;
+  occurredAt: string;
+  createdBy: { name: string };
+  durationMinutes?: number;
+  outcome?: string;
+  isAutomated?: boolean;
+  participants?: Array<{ name?: string }>;
+}
+
+export interface ActivityTimelineProps {
+  activities: ActivityTimelineItem[];
+  loading: boolean;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  activityIcons?: Record<string, ComponentType<any>>;
+  activityColors?: Record<string, string>;
+  formatTime?: (date: string) => string;
+}
+
+function defaultFormatTime(date: string): string {
+  try {
+    return formatDistanceToNow(new Date(date), { addSuffix: true });
+  } catch {
+    return '';
+  }
+}
+
+export function ActivityTimeline({
+  activities,
+  loading,
+  emptyTitle = 'No activities yet',
+  emptyDescription = 'Log calls, meetings, and notes to track your interactions',
+  onLoadMore,
+  hasMore = false,
+  activityIcons = {},
+  activityColors = {},
+  formatTime = defaultFormatTime,
+}: ActivityTimelineProps) {
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="flex gap-4 animate-pulse">
+            <div className="w-10 h-10 bg-gray-200 rounded-full" />
+            <div className="flex-1">
+              <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
+              <div className="h-3 bg-gray-200 rounded w-2/3" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Timeline */}
+      <div className="relative">
+        {/* Timeline line */}
+        <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200" />
+
+        {/* Activities */}
+        <div className="space-y-6">
+          {activities.length === 0 ? (
+            <EmptyState title={emptyTitle} description={emptyDescription} />
+          ) : (
+            activities.map((activity) => {
+              const Icon = activityIcons[activity.type];
+              const colorClass =
+                activityColors[activity.type] || 'bg-gray-100 text-gray-600';
+
+              return (
+                <div key={activity.id} className="relative flex gap-4">
+                  {/* Icon */}
+                  <div
+                    className={`relative z-10 flex items-center justify-center w-10 h-10 rounded-full ${colorClass}`}
+                  >
+                    {Icon ? <Icon className="w-5 h-5" /> : null}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4">
+                    <div className="flex items-start justify-between mb-2">
+                      <div className="flex-1">
+                        <h4 className="font-medium text-gray-900">
+                          {activity.title}
+                        </h4>
+                        {activity.description && (
+                          <p className="text-sm text-gray-600 mt-1">
+                            {activity.description}
+                          </p>
+                        )}
+                      </div>
+                      <div className="text-xs text-gray-500 ml-4 whitespace-nowrap">
+                        {formatTime(activity.occurredAt)}
+                      </div>
+                    </div>
+
+                    {/* Metadata */}
+                    <div className="flex items-center gap-4 text-sm text-gray-600">
+                      <div className="flex items-center gap-1">
+                        <User className="w-3 h-3" />
+                        {activity.createdBy.name}
+                      </div>
+
+                      {activity.durationMinutes && (
+                        <div className="flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          {activity.durationMinutes}m
+                        </div>
+                      )}
+
+                      {activity.outcome && (
+                        <div className="px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded">
+                          {activity.outcome.replace(/_/g, ' ')}
+                        </div>
+                      )}
+
+                      {activity.isAutomated && (
+                        <div className="text-xs text-gray-500 italic">
+                          Auto-tracked
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Participants */}
+                    {activity.participants &&
+                      activity.participants.length > 0 && (
+                        <div className="mt-2 pt-2 border-t border-gray-100">
+                          <div className="text-xs text-gray-500">
+                            With:{' '}
+                            {activity.participants
+                              .map((p) => p.name)
+                              .filter(Boolean)
+                              .join(', ')}
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* Load More */}
+      {hasMore && onLoadMore && (
+        <div className="text-center pt-4">
+          <button
+            onClick={onLoadMore}
+            className="px-4 py-2 text-sm text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-md transition-colors"
+          >
+            Load more activities
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LogActivityDialog.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useState, ComponentType } from 'react';
+import { X } from 'lucide-react';
+
+export interface ActivityTypeOption {
+  value: string;
+  label: string;
+  icon: ComponentType<any>;
+}
+
+export interface OutcomeOption {
+  value: string;
+  label: string;
+}
+
+export interface LogActivityFormData {
+  type: string;
+  title: string;
+  description: string;
+  outcome: string | undefined;
+  durationMinutes: number | undefined;
+  occurredAt: string;
+}
+
+export interface LogActivityDialogProps {
+  activityTypes: ActivityTypeOption[];
+  outcomeOptions: OutcomeOption[];
+  defaultType?: string;
+  onSubmit: (data: LogActivityFormData) => Promise<void>;
+  onClose: () => void;
+  isSubmitting?: boolean;
+  /** Activity types for which outcome is required */
+  outcomeRequiredTypes?: string[];
+  /** Activity types for which duration field is shown */
+  durationTypes?: string[];
+  /** Activity types with follow-up checkbox, mapped to outcome values that trigger it */
+  followUpOutcomes?: string[];
+  title?: string;
+  submitLabel?: string;
+  submittingLabel?: string;
+}
+
+export function LogActivityDialog({
+  activityTypes,
+  outcomeOptions,
+  defaultType,
+  onSubmit,
+  onClose,
+  isSubmitting = false,
+  outcomeRequiredTypes = ['call', 'meeting'],
+  durationTypes = ['call', 'meeting'],
+  followUpOutcomes = ['callback_later', 'scheduled_meeting'],
+  title = 'Log Activity',
+  submitLabel = 'Log Activity',
+  submittingLabel = 'Logging...',
+}: LogActivityDialogProps) {
+  const initialType = defaultType || activityTypes[0]?.value || '';
+  const [activityType, setActivityType] = useState(initialType);
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    outcome: undefined as string | undefined,
+    durationMinutes: undefined as number | undefined,
+    occurredAt: new Date().toISOString().slice(0, 16),
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [createFollowUp, setCreateFollowUp] = useState(false);
+
+  const showOutcome = outcomeRequiredTypes.includes(activityType);
+  const showDuration = durationTypes.includes(activityType);
+  const showFollowUp =
+    followUpOutcomes.length > 0 &&
+    formData.outcome !== undefined &&
+    followUpOutcomes.includes(formData.outcome);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const newErrors: Record<string, string> = {};
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required';
+    }
+    if (showOutcome && !formData.outcome) {
+      newErrors.outcome = 'Outcome is required for this activity type';
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    try {
+      await onSubmit({
+        type: activityType,
+        title: formData.title,
+        description: formData.description,
+        outcome: formData.outcome,
+        durationMinutes: formData.durationMinutes,
+        occurredAt: formData.occurredAt
+          ? new Date(formData.occurredAt).toISOString()
+          : new Date().toISOString(),
+      });
+    } catch (error) {
+      console.error('Failed to log activity:', error);
+    }
+  };
+
+  const handleChange = (
+    field: keyof typeof formData,
+    value: string | number | undefined
+  ) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined as any }));
+    }
+  };
+
+  const currentTypeLabel =
+    activityTypes.find((t) => t.value === activityType)?.label || '';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {/* Activity Type Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Activity Type *
+            </label>
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+              {activityTypes.map(({ value, label, icon: Icon }) => (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setActivityType(value)}
+                  className={`flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium rounded-lg border-2 transition-colors ${
+                    activityType === value
+                      ? 'border-primary-600 bg-primary-50 text-primary-700'
+                      : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Title */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Title *
+            </label>
+            <input
+              type="text"
+              value={formData.title}
+              onChange={(e) => handleChange('title', e.target.value)}
+              className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                errors.title ? 'border-red-500' : 'border-gray-300'
+              }`}
+              placeholder={`${currentTypeLabel} with...`}
+            />
+            {errors.title && (
+              <p className="mt-1 text-sm text-red-600">{errors.title}</p>
+            )}
+          </div>
+
+          {/* Date/Time and Duration */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Date & Time
+              </label>
+              <input
+                type="datetime-local"
+                value={formData.occurredAt?.slice(0, 16) || ''}
+                onChange={(e) => handleChange('occurredAt', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            {showDuration && (
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Duration (minutes)
+                </label>
+                <input
+                  type="number"
+                  value={formData.durationMinutes || ''}
+                  onChange={(e) =>
+                    handleChange(
+                      'durationMinutes',
+                      e.target.value ? parseInt(e.target.value) : undefined
+                    )
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="30"
+                  min="1"
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Outcome */}
+          {showOutcome && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Outcome *
+              </label>
+              <select
+                value={formData.outcome || ''}
+                onChange={(e) =>
+                  handleChange('outcome', e.target.value || undefined)
+                }
+                className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.outcome ? 'border-red-500' : 'border-gray-300'
+                }`}
+              >
+                <option value="">Select outcome...</option>
+                {outcomeOptions.map((outcome) => (
+                  <option key={outcome.value} value={outcome.value}>
+                    {outcome.label}
+                  </option>
+                ))}
+              </select>
+              {errors.outcome && (
+                <p className="mt-1 text-sm text-red-600">{errors.outcome}</p>
+              )}
+            </div>
+          )}
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Notes
+            </label>
+            <textarea
+              value={formData.description || ''}
+              onChange={(e) => handleChange('description', e.target.value)}
+              rows={4}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Add details about this activity..."
+            />
+          </div>
+
+          {/* Follow-up Task */}
+          {showFollowUp && (
+            <div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={createFollowUp}
+                  onChange={(e) => setCreateFollowUp(e.target.checked)}
+                  className="w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
+                />
+                <span className="text-sm font-medium text-blue-900">
+                  Create follow-up task
+                </span>
+              </label>
+              {createFollowUp && (
+                <p className="text-xs text-blue-700 mt-2">
+                  A task reminder will be created for this follow-up
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {isSubmitting ? submittingLabel : submitLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/QuickLogButtons.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { ComponentType } from 'react';
+
+export interface QuickLogAction {
+  type: string;
+  label: string;
+  icon: ComponentType<any>;
+  color: string;
+}
+
+export interface QuickLogButtonsProps {
+  actions: QuickLogAction[];
+  onAction: (type: string) => void;
+}
+
+export function QuickLogButtons({ actions, onAction }: QuickLogButtonsProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {actions.map(({ type, label, icon: Icon, color }) => (
+        <button
+          key={type}
+          onClick={() => onAction(type)}
+          className={`flex items-center gap-2 px-4 py-2 text-sm font-medium text-white rounded-md transition-colors ${color}`}
+        >
+          <Icon className="w-4 h-4" />
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/badge/StageBadge.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+
+export interface StageBadgeConfig {
+  label: string
+  className: string
+}
+
+export interface StageBadgeProps {
+  stage: string
+  configMap: Record<string, StageBadgeConfig>
+  className?: string
+}
+
+const DEFAULT_CONFIG: StageBadgeConfig = {
+  label: '',
+  className: 'bg-gray-100 text-gray-700 border-gray-200',
+}
+
+export function StageBadge({ stage, configMap, className = '' }: StageBadgeProps) {
+  const config = configMap[stage] ?? { ...DEFAULT_CONFIG, label: stage }
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${config.className} ${className}`}
+    >
+      {config.label}
+    </span>
+  )
+}

package/src/components/badge/index.ts

@@ -1,2 +1,5 @@
 export { StatusBadge } from './StatusBadge'
 export type { StatusBadgeProps, StatusBadgeConfig } from './StatusBadge'
+
+export { StageBadge } from './StageBadge'
+export type { StageBadgeProps, StageBadgeConfig } from './StageBadge'