@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FunnelCard/FunnelCard.tsx

@@ -0,0 +1,204 @@
+/**
+ * FunnelCard Component
+ *
+ * Main card component displaying funnel overview with stages, match stats, and actions.
+ *
+ * Design Goal:
+ * Users should be able to quickly assess funnel health, understand its structure,
+ * and take action (view details) without cognitive overload.
+ *
+ * Visual Hierarchy:
+ * 1. Funnel name + status (primary identification)
+ * 2. Description (context)
+ * 3. Stage flow (structure understanding)
+ * 4. Match bar (visual performance indicator)
+ * 5. Stats (detailed performance metrics)
+ * 6. Action button (next step)
+ *
+ * Layout: Card with white background, shadow, rounded corners (matches Django admin aesthetic)
+ *
+ * Responsive Behavior:
+ * - Mobile (< 640px): Full width, stack all elements
+ * - Tablet (640px - 1024px): Constrained width, same vertical layout
+ * - Desktop (> 1024px): Max width with horizontal centering possible
+ *
+ * Accessibility:
+ * - Semantic HTML (article, header, section, footer)
+ * - ARIA labels for interactive elements
+ * - Keyboard navigation support
+ * - Color contrast meets WCAG AA (4.5:1)
+ * - Focus indicators on interactive elements
+ *
+ * Interaction Notes:
+ * - Card hover: subtle elevation increase (shadow deepens)
+ * - Button hover: background darkens, arrow shifts right
+ * - Button focus: ring outline for keyboard navigation
+ * - Click zones: entire button is clickable, not just text
+ *
+ * Performance:
+ * - No images (icon-free design)
+ * - CSS-only animations
+ * - Efficient re-renders (React.memo potential)
+ */
+
+import { Funnel, FunnelRun } from '../../types';
+import { StatusBadge } from './StatusBadge';
+import { StageIndicator } from './StageIndicator';
+import { MatchBar } from './MatchBar';
+import { FunnelStats } from './FunnelStats';
+
+export interface FunnelCardProps {
+  /** Funnel definition (BRUTALLY GENERIC - works for any entity type) */
+  funnel: Funnel;
+
+  /** Latest run results (optional - shows "no runs yet" state if missing) */
+  latestRun?: FunnelRun;
+
+  /** Callback when "View Flow" is clicked */
+  onViewFlow?: (funnel: Funnel) => void;
+
+  /** Callback when edit action is triggered (future: click on card header) */
+  onEdit?: (funnel: Funnel) => void;
+
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function FunnelCard({
+  funnel,
+  latestRun,
+  onViewFlow,
+  onEdit,
+  className = ''
+}: FunnelCardProps) {
+  // Extract stats from latest run or use zeros
+  const stats = latestRun ? {
+    input: latestRun.total_input,
+    matched: latestRun.total_matched,
+    excluded: latestRun.total_excluded,
+  } : {
+    input: 0,
+    matched: 0,
+    excluded: 0,
+  };
+
+  const handleViewFlow = () => {
+    if (onViewFlow) {
+      onViewFlow(funnel);
+    }
+  };
+
+  const hasRun = latestRun && latestRun.status === 'completed';
+
+  return (
+    <article
+      className={`bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 ${className}`}
+      aria-label={`Funnel: ${funnel.name}`}
+    >
+      {/* Header: Name + Status Badge */}
+      <header className="px-6 pt-5 pb-3 border-b border-gray-100">
+        <div className="flex items-start justify-between gap-3">
+          <h3 className="text-lg font-semibold text-gray-900 flex-1 min-w-0">
+            {funnel.name}
+          </h3>
+          <StatusBadge status={funnel.status} />
+        </div>
+        {funnel.description && (
+          <p className="mt-2 text-sm text-gray-600 line-clamp-2">
+            {funnel.description}
+          </p>
+        )}
+      </header>
+
+      {/* Stage List */}
+      <section
+        className="px-6 py-4 space-y-0"
+        aria-label="Funnel stages"
+      >
+        {funnel.stages.length === 0 ? (
+          <div className="text-sm text-gray-500 italic py-4 text-center">
+            No stages defined
+          </div>
+        ) : (
+          funnel.stages.map((stage, index) => (
+            <StageIndicator
+              key={stage.id}
+              order={index}
+              name={stage.name}
+              ruleCount={stage.rules.length}
+              isLast={index === funnel.stages.length - 1}
+            />
+          ))
+        )}
+      </section>
+
+      {/* Match Visualization */}
+      {hasRun && (
+        <section
+          className="px-6 py-4 border-t border-gray-100"
+          aria-label="Match results"
+        >
+          <MatchBar
+            matched={stats.matched}
+            total={stats.input}
+          />
+        </section>
+      )}
+
+      {/* Stats Row */}
+      {hasRun && (
+        <section
+          className="px-6 py-4 border-t border-gray-100"
+          aria-label="Funnel statistics"
+        >
+          <FunnelStats
+            input={stats.input}
+            matched={stats.matched}
+            excluded={stats.excluded}
+          />
+        </section>
+      )}
+
+      {/* No Run State */}
+      {!hasRun && (
+        <section
+          className="px-6 py-4 border-t border-gray-100 text-center"
+          aria-label="Funnel status"
+        >
+          <p className="text-sm text-gray-500">
+            {latestRun?.status === 'failed'
+              ? 'Last run failed'
+              : latestRun?.status === 'running'
+              ? 'Running...'
+              : 'No runs yet'}
+          </p>
+        </section>
+      )}
+
+      {/* Footer: Action Button */}
+      <footer className="px-6 py-4 border-t border-gray-100">
+        <button
+          onClick={handleViewFlow}
+          className="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 text-gray-900 text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          aria-label={`View flow details for ${funnel.name}`}
+        >
+          <span>View Flow</span>
+          <svg
+            className="w-4 h-4 transition-transform group-hover:translate-x-0.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 7l5 5m0 0l-5 5m5-5H6"
+            />
+          </svg>
+        </button>
+      </footer>
+    </article>
+  );
+}

package/src/components/FunnelCard/FunnelStats.tsx

@@ -0,0 +1,68 @@
+/**
+ * FunnelStats Component
+ *
+ * Three-column stats display showing INPUT / MATCHED / EXCLUDED counts.
+ *
+ * Design Rationale:
+ * - Three equal columns for balance
+ * - Color coding: Blue (input/neutral), Green (matched/success), Red (excluded/warning)
+ * - Large numbers draw attention to key metrics
+ * - Labels use uppercase for consistency with status badge
+ *
+ * Accessibility:
+ * - Semantic HTML (dl/dt/dd structure)
+ * - Color is supplementary (text labels provide meaning)
+ */
+
+interface FunnelStatsProps {
+  input: number;
+  matched: number;
+  excluded: number;
+  className?: string;
+}
+
+export function FunnelStats({
+  input,
+  matched,
+  excluded,
+  className = ''
+}: FunnelStatsProps) {
+  const stats = [
+    {
+      label: 'INPUT',
+      value: input,
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-50'
+    },
+    {
+      label: 'MATCHED',
+      value: matched,
+      color: 'text-green-600',
+      bgColor: 'bg-green-50'
+    },
+    {
+      label: 'EXCLUDED',
+      value: excluded,
+      color: 'text-red-600',
+      bgColor: 'bg-red-50'
+    },
+  ];
+
+  return (
+    <dl className={`grid grid-cols-3 gap-2 ${className}`}>
+      {stats.map(({ label, value, color, bgColor }) => (
+        <div
+          key={label}
+          className={`${bgColor} rounded-lg px-3 py-2.5 text-center`}
+        >
+          <dt className="text-xs font-medium text-gray-600 mb-1">
+            {label}
+          </dt>
+          <dd className={`text-lg font-bold ${color}`}>
+            {value.toLocaleString()}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}