@startsimpli/funnels 0.4.6 → 0.4.8

package/src/components/FunnelVisualFlow/FunnelVisualFlow.stories.tsx

@@ -41,21 +41,21 @@ const createStage = (
   order,
   name,
   description: `${name} stage filters entities`,
-  filter_logic: 'AND',
+  filterLogic: 'AND',
   rules: [
     {
-      field_path: 'score',
+      fieldPath: 'score',
       operator: 'gte',
       value: 50,
     },
     {
-      field_path: 'status',
+      fieldPath: 'status',
       operator: 'eq',
       value: 'active',
     },
   ],
-  match_action: matchAction,
-  no_match_action: noMatchAction,
+  matchAction: matchAction,
+  noMatchAction: noMatchAction,
 });
 
 // Helper to create funnel
@@ -67,10 +67,10 @@ const createFunnel = (
   name,
   description: 'A sample funnel for visualization',
   status: 'active',
-  input_type: 'contacts',
+  inputType: 'contacts',
   stages,
-  created_at: new Date().toISOString(),
-  updated_at: new Date().toISOString(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 });
 
 // Empty state
@@ -134,46 +134,46 @@ export const WithRunData: Story = {
     ),
     runData: {
       id: 'run-1',
-      funnel_id: 'funnel-1',
+      funnelId: 'funnel-1',
       status: 'completed',
-      trigger_type: 'manual',
-      started_at: new Date().toISOString(),
-      completed_at: new Date().toISOString(),
-      duration_ms: 1234,
-      total_input: 1000,
-      total_matched: 235,
-      total_excluded: 765,
-      total_tagged: 0,
-      stage_stats: {
+      triggerType: 'manual',
+      startedAt: new Date().toISOString(),
+      completedAt: new Date().toISOString(),
+      durationMs: 1234,
+      totalInput: 1000,
+      totalMatched: 235,
+      totalExcluded: 765,
+      totalTagged: 0,
+      stageStats: {
         'stage-1': {
-          stage_id: 'stage-1',
-          stage_name: 'High ICP Score',
-          input_count: 1000,
-          matched_count: 500,
-          not_matched_count: 500,
-          excluded_count: 500,
-          tagged_count: 0,
-          continued_count: 500,
+          stageId: 'stage-1',
+          stageName: 'High ICP Score',
+          inputCount: 1000,
+          matchedCount: 500,
+          notMatchedCount: 500,
+          excludedCount: 500,
+          taggedCount: 0,
+          continuedCount: 500,
         },
         'stage-2': {
-          stage_id: 'stage-2',
-          stage_name: 'Frontend Stack',
-          input_count: 500,
-          matched_count: 350,
-          not_matched_count: 150,
-          excluded_count: 150,
-          tagged_count: 0,
-          continued_count: 350,
+          stageId: 'stage-2',
+          stageName: 'Frontend Stack',
+          inputCount: 500,
+          matchedCount: 350,
+          notMatchedCount: 150,
+          excludedCount: 150,
+          taggedCount: 0,
+          continuedCount: 350,
         },
         'stage-3': {
-          stage_id: 'stage-3',
-          stage_name: 'Testing Tools',
-          input_count: 350,
-          matched_count: 235,
-          not_matched_count: 115,
-          excluded_count: 115,
-          tagged_count: 0,
-          continued_count: 235,
+          stageId: 'stage-3',
+          stageName: 'Testing Tools',
+          inputCount: 350,
+          matchedCount: 235,
+          notMatchedCount: 115,
+          excludedCount: 115,
+          taggedCount: 0,
+          continuedCount: 235,
         },
       },
     } as FunnelRun,

package/src/components/FunnelVisualFlow/FunnelVisualFlow.test.tsx

@@ -51,16 +51,16 @@ describe('FunnelVisualFlow', () => {
     order,
     name,
     description: `Description for ${name}`,
-    filter_logic: 'AND',
+    filterLogic: 'AND',
     rules: [
       {
-        field_path: 'test',
+        fieldPath: 'test',
         operator: 'eq',
         value: 'test',
       },
     ],
-    match_action: 'continue',
-    no_match_action: 'exclude',
+    matchAction: 'continue',
+    noMatchAction: 'exclude',
   });
 
   const createFunnel = (stages: FunnelStage[]): Funnel => ({
@@ -68,10 +68,10 @@ describe('FunnelVisualFlow', () => {
     name: 'Test Funnel',
     description: 'Test funnel description',
     status: 'active',
-    input_type: 'contacts',
+    inputType: 'contacts',
     stages,
-    created_at: new Date().toISOString(),
-    updated_at: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   });
 
   it('renders empty state when no stages', () => {
@@ -119,34 +119,34 @@ describe('FunnelVisualFlow', () => {
 
     const runData: FunnelRun = {
       id: 'run-1',
-      funnel_id: 'funnel-1',
+      funnelId: 'funnel-1',
       status: 'completed',
-      trigger_type: 'manual',
-      started_at: new Date().toISOString(),
-      total_input: 1000,
-      total_matched: 350,
-      total_excluded: 650,
-      total_tagged: 0,
-      stage_stats: {
+      triggerType: 'manual',
+      startedAt: new Date().toISOString(),
+      totalInput: 1000,
+      totalMatched: 350,
+      totalExcluded: 650,
+      totalTagged: 0,
+      stageStats: {
         'stage-1': {
-          stage_id: 'stage-1',
-          stage_name: 'High ICP Score',
-          input_count: 1000,
-          matched_count: 500,
-          not_matched_count: 500,
-          excluded_count: 500,
-          tagged_count: 0,
-          continued_count: 500,
+          stageId: 'stage-1',
+          stageName: 'High ICP Score',
+          inputCount: 1000,
+          matchedCount: 500,
+          notMatchedCount: 500,
+          excludedCount: 500,
+          taggedCount: 0,
+          continuedCount: 500,
         },
         'stage-2': {
-          stage_id: 'stage-2',
-          stage_name: 'Frontend Stack',
-          input_count: 500,
-          matched_count: 350,
-          not_matched_count: 150,
-          excluded_count: 150,
-          tagged_count: 0,
-          continued_count: 350,
+          stageId: 'stage-2',
+          stageName: 'Frontend Stack',
+          inputCount: 500,
+          matchedCount: 350,
+          notMatchedCount: 150,
+          excludedCount: 150,
+          taggedCount: 0,
+          continuedCount: 350,
         },
       },
     };

package/src/components/FunnelVisualFlow/FunnelVisualFlow.tsx

@@ -92,13 +92,13 @@ function getExcludedCount(
   fromStageId: string,
   toStageId: string
 ): number {
-  const fromStats = runData.stage_stats[fromStageId];
-  const toStats = runData.stage_stats[toStageId];
+  const fromStats = runData.stageStats[fromStageId];
+  const toStats = runData.stageStats[toStageId];
 
   if (!fromStats || !toStats) return 0;
 
   // Calculate how many entities didn't continue to next stage
-  return fromStats.continued_count - toStats.input_count;
+  return fromStats.continuedCount - toStats.inputCount;
 }
 
 /**
@@ -131,7 +131,7 @@ export function FunnelVisualFlow({
   // Build nodes from funnel stages
   const initialNodes: Node[] = useMemo(() => {
     return funnel.stages.map((stage, index) => {
-      const stats = runData?.stage_stats?.[stage.id];
+      const stats = runData?.stageStats?.[stage.id];
 
       return {
         id: stage.id,

package/src/components/FunnelVisualFlow/StageNode.tsx

@@ -43,8 +43,8 @@ export interface StageNodeData {
  */
 function getStageColor(stage: FunnelStage): string {
   // Primary action determines color
-  const matchAction = stage.match_action;
-  const noMatchAction = stage.no_match_action;
+  const matchAction = stage.matchAction;
+  const noMatchAction = stage.noMatchAction;
 
   // Output stages are green
   if (matchAction === 'output') {
@@ -69,8 +69,8 @@ function getStageColor(stage: FunnelStage): string {
  * Get action label for display
  */
 function getActionLabel(stage: FunnelStage): string {
-  const matchAction = stage.match_action;
-  const noMatchAction = stage.no_match_action;
+  const matchAction = stage.matchAction;
+  const noMatchAction = stage.noMatchAction;
 
   if (matchAction === 'output') return 'Output';
   if (noMatchAction === 'exclude') return 'Exclude Non-Matches';
@@ -147,19 +147,19 @@ export function StageNode({ data }: NodeProps) {
           <div className="stage-stats">
             <div className="stat-row">
               <span className="stat-label">Input:</span>
-              <span className="stat-value">{stats.input_count}</span>
+              <span className="stat-value">{stats.inputCount}</span>
             </div>
             <div className="stat-row">
               <span className="stat-label">Matched:</span>
               <span className="stat-value text-green-600">
-                {stats.matched_count}
+                {stats.matchedCount}
               </span>
             </div>
-            {stats.excluded_count > 0 && (
+            {stats.excludedCount > 0 && (
               <div className="stat-row">
                 <span className="stat-label">Excluded:</span>
                 <span className="stat-value text-red-600">
-                  {stats.excluded_count}
+                  {stats.excludedCount}
                 </span>
               </div>
             )}

package/src/components/FunnelVisualFlow/example.tsx

@@ -98,9 +98,9 @@ export function FunnelDetailsPage({ funnelId }: { funnelId: string }) {
         <div className="run-info">
           <h2>Latest Run</h2>
           <p>Status: {latestRun.status}</p>
-          <p>Started: {new Date(latestRun.started_at).toLocaleString()}</p>
+          <p>Started: {new Date(latestRun.startedAt).toLocaleString()}</p>
           <p>
-            Results: {latestRun.total_matched} / {latestRun.total_input} matched
+            Results: {latestRun.totalMatched} / {latestRun.totalInput} matched
           </p>
         </div>
       )}
@@ -133,20 +133,20 @@ function StageDetailsModal({
           <ul>
             {stage.rules.map((rule, index) => (
               <li key={index}>
-                {rule.field_path} {rule.operator} {JSON.stringify(rule.value)}
+                {rule.fieldPath} {rule.operator} {JSON.stringify(rule.value)}
               </li>
             ))}
           </ul>
 
           <h3>Actions</h3>
-          <p>Match: {stage.match_action}</p>
-          <p>No Match: {stage.no_match_action}</p>
+          <p>Match: {stage.matchAction}</p>
+          <p>No Match: {stage.noMatchAction}</p>
 
-          {stage.match_tags && stage.match_tags.length > 0 && (
+          {stage.matchTags && stage.matchTags.length > 0 && (
             <>
               <h3>Match Tags</h3>
               <ul>
-                {stage.match_tags.map((tag) => (
+                {stage.matchTags.map((tag) => (
                   <li key={tag}>{tag}</li>
                 ))}
               </ul>