@startsimpli/funnels 0.1.4 → 0.1.6

package/src/components/FunnelRunHistory/utils.ts

@@ -0,0 +1,100 @@
+/**
+ * FunnelRunHistory Utilities
+ *
+ * Helper functions for formatting and calculations
+ */
+
+/**
+ * Format duration in milliseconds to human-readable string
+ *
+ * Examples:
+ * - 1234 → "1.2s"
+ * - 65000 → "1m 5s"
+ * - 3661000 → "1h 1m"
+ */
+export function formatDuration(ms?: number): string {
+  if (ms === undefined || ms === null) return '-';
+  if (ms === 0) return '0ms';
+
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60;
+    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+  }
+
+  if (minutes > 0) {
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+  }
+
+  if (seconds > 0) {
+    return `${seconds}s`;
+  }
+
+  return `${ms}ms`;
+}
+
+/**
+ * Format relative time
+ *
+ * Examples:
+ * - 5 minutes ago → "5m ago"
+ * - 2 hours ago → "2h ago"
+ * - Yesterday → "1d ago"
+ */
+export function formatRelativeTime(date: Date | string): string {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffDays > 0) {
+    return `${diffDays}d ago`;
+  }
+
+  if (diffHours > 0) {
+    return `${diffHours}h ago`;
+  }
+
+  if (diffMinutes > 0) {
+    return `${diffMinutes}m ago`;
+  }
+
+  return 'Just now';
+}
+
+/**
+ * Calculate match rate percentage
+ */
+export function calculateMatchRate(matched: number, total: number): number {
+  if (total === 0) return 0;
+  return Math.round((matched / total) * 100);
+}
+
+/**
+ * Format number with commas
+ */
+export function formatNumber(num: number): string {
+  return num.toLocaleString();
+}
+
+/**
+ * Format full timestamp for tooltips
+ */
+export function formatFullTimestamp(date: Date | string): string {
+  const d = new Date(date);
+  return d.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}

package/src/components/FunnelStageBuilder/AddStageButton.tsx

@@ -0,0 +1,52 @@
+/**
+ * AddStageButton - Button to add new stages
+ *
+ * Features:
+ * - Different styles for top/bottom/inline positions
+ * - Clear visual affordance
+ */
+
+import React from 'react';
+
+export interface AddStageButtonProps {
+  /** Click handler */
+  onClick: () => void;
+
+  /** Position context */
+  position: 'top' | 'bottom' | 'inline';
+
+  /** Optional CSS class */
+  className?: string;
+}
+
+/**
+ * AddStageButton component
+ */
+export function AddStageButton({
+  onClick,
+  position,
+  className = '',
+}: AddStageButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`add-stage-button ${position} ${className}`}
+      aria-label={`Add stage ${position === 'top' ? 'at top' : position === 'bottom' ? 'at bottom' : 'below'}`}
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M10 5v10M5 10h10"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+      <span>
+        {position === 'top' && 'Add Stage'}
+        {position === 'bottom' && 'Add Stage Below'}
+        {position === 'inline' && 'Add Stage'}
+      </span>
+    </button>
+  );
+}

package/src/components/FunnelStageBuilder/FunnelStageBuilder.css

@@ -0,0 +1,413 @@
+/**
+ * FunnelStageBuilder styles
+ *
+ * Design principles:
+ * - Clean, minimal design
+ * - Clear visual hierarchy
+ * - Accessible colors and contrast
+ * - Responsive spacing
+ */
+
+/* ============================================================================
+ * Main Container
+ * ============================================================================ */
+
+.funnel-stage-builder {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* ============================================================================
+ * Stage Card
+ * ============================================================================ */
+
+.stage-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.stage-card.dragging {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: grabbing;
+}
+
+.stage-card.error {
+  border-color: #ef4444;
+}
+
+/* ============================================================================
+ * Stage Header
+ * ============================================================================ */
+
+.stage-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.drag-handle {
+  flex-shrink: 0;
+  padding: 4px;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: grab;
+  transition: color 0.2s ease;
+}
+
+.drag-handle:hover {
+  color: #6b7280;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.stage-title-button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  transition: color 0.2s ease;
+}
+
+.stage-title-button:hover {
+  color: #3b82f6;
+}
+
+.stage-number {
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.stage-name {
+  font-weight: 500;
+  color: #111827;
+}
+
+.expand-icon {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+  color: #9ca3af;
+}
+
+.expand-icon.expanded {
+  transform: rotate(180deg);
+}
+
+.delete-button {
+  flex-shrink: 0;
+  padding: 4px;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.delete-button:hover {
+  color: #ef4444;
+}
+
+/* ============================================================================
+ * Messages
+ * ============================================================================ */
+
+.error-message,
+.warning-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-size: 14px;
+}
+
+.error-message {
+  background: #fef2f2;
+  color: #991b1b;
+  border-top: 1px solid #fecaca;
+}
+
+.warning-message {
+  background: #fffbeb;
+  color: #92400e;
+  border-top: 1px solid #fde68a;
+}
+
+/* ============================================================================
+ * Stage Summary (collapsed)
+ * ============================================================================ */
+
+.stage-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  font-size: 14px;
+}
+
+.summary-item {
+  display: flex;
+  gap: 4px;
+}
+
+.summary-label {
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.summary-value {
+  color: #111827;
+}
+
+/* ============================================================================
+ * Stage Form (expanded)
+ * ============================================================================ */
+
+.stage-form-wrapper {
+  padding: 16px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.stage-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ============================================================================
+ * Form Elements
+ * ============================================================================ */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #111827;
+  background: white;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: #9ca3af;
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-hint {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0;
+}
+
+/* ============================================================================
+ * Filter Logic Toggle
+ * ============================================================================ */
+
+.filter-logic-toggle {
+  display: flex;
+  gap: 8px;
+}
+
+.toggle-button {
+  flex: 1;
+  padding: 10px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: white;
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toggle-button:hover {
+  border-color: #9ca3af;
+}
+
+.toggle-button.active {
+  border-color: #3b82f6;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ============================================================================
+ * Tag Input
+ * ============================================================================ */
+
+.tag-input-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: white;
+  min-height: 42px;
+}
+
+.tag-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #eff6ff;
+  color: #1e40af;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.tag-text {
+  line-height: 1;
+}
+
+.tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  color: #3b82f6;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.tag-remove:hover {
+  color: #1d4ed8;
+}
+
+.tag-input-field {
+  flex: 1;
+  min-width: 120px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  padding: 4px;
+}
+
+.tag-input-hint {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 4px 0 0 0;
+}
+
+/* ============================================================================
+ * Add Stage Button
+ * ============================================================================ */
+
+.add-stage-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  background: white;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-stage-button:hover {
+  border-color: #3b82f6;
+  background: #f9fafb;
+  color: #3b82f6;
+}
+
+/* ============================================================================
+ * Stage Arrow
+ * ============================================================================ */
+
+.stage-arrow {
+  display: flex;
+  justify-content: center;
+  color: #d1d5db;
+  margin: -8px 0;
+}
+
+/* ============================================================================
+ * Empty State
+ * ============================================================================ */
+
+.empty-state {
+  text-align: center;
+  padding: 32px 16px;
+}
+
+/* ============================================================================
+ * Rules Placeholder
+ * ============================================================================ */
+
+.rules-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rules-placeholder {
+  padding: 24px;
+  border: 2px dashed #e5e7eb;
+  border-radius: 6px;
+  text-align: center;
+  background: #f9fafb;
+}