@startsimpli/funnels 0.4.6 → 0.4.8

package/src/components/FunnelRunHistory/RunRow.tsx

@@ -43,7 +43,7 @@ export function RunRow({
 }: RunRowProps) {
   const matchRate =
     run.status === 'completed'
-      ? calculateMatchRate(run.total_matched, run.total_input)
+      ? calculateMatchRate(run.totalMatched, run.totalInput)
       : null;
 
   return (
@@ -61,9 +61,9 @@ export function RunRow({
       <td className="px-4 py-3">
         <span
           className="text-sm text-gray-900"
-          title={formatFullTimestamp(run.started_at)}
+          title={formatFullTimestamp(run.startedAt)}
         >
-          {formatRelativeTime(run.started_at)}
+          {formatRelativeTime(run.startedAt)}
         </span>
       </td>
 
@@ -75,28 +75,28 @@ export function RunRow({
       {/* Trigger */}
       <td className="px-4 py-3">
         <span className="text-sm text-gray-700 capitalize">
-          {run.trigger_type}
+          {run.triggerType}
         </span>
       </td>
 
       {/* Duration */}
       <td className="px-4 py-3">
         <span className="text-sm text-gray-900">
-          {formatDuration(run.duration_ms)}
+          {formatDuration(run.durationMs)}
         </span>
       </td>
 
       {/* Input */}
       <td className="px-4 py-3 text-right">
         <span className="text-sm font-medium text-gray-900">
-          {formatNumber(run.total_input)}
+          {formatNumber(run.totalInput)}
         </span>
       </td>
 
       {/* Matched */}
       <td className="px-4 py-3 text-right">
         <span className="text-sm font-medium text-green-600">
-          {run.status === 'completed' ? formatNumber(run.total_matched) : '-'}
+          {run.status === 'completed' ? formatNumber(run.totalMatched) : '-'}
         </span>
       </td>
 

package/src/components/FunnelRunHistory/StageBreakdownList.tsx

@@ -30,15 +30,15 @@ export function StageBreakdownList({
   return (
     <div className={`space-y-3 ${className}`}>
       {stages.map((stage, index) => {
-        const delta = stage.matched_count - stage.input_count;
+        const delta = stage.matchedCount - stage.inputCount;
         const matchRate =
-          stage.input_count > 0
-            ? Math.round((stage.matched_count / stage.input_count) * 100)
+          stage.inputCount > 0
+            ? Math.round((stage.matchedCount / stage.inputCount) * 100)
             : 0;
 
         return (
           <div
-            key={stage.stage_id}
+            key={stage.stageId}
             className="p-3 bg-gray-50 rounded-lg border border-gray-200"
           >
             {/* Stage Header */}
@@ -47,7 +47,7 @@ export function StageBreakdownList({
                 {index + 1}
               </span>
               <h4 className="text-sm font-semibold text-gray-900">
-                {stage.stage_name}
+                {stage.stageName}
               </h4>
             </div>
 
@@ -57,7 +57,7 @@ export function StageBreakdownList({
               <div>
                 <div className="text-xs text-gray-600 mb-1">Input</div>
                 <div className="text-lg font-bold text-blue-600">
-                  {formatNumber(stage.input_count)}
+                  {formatNumber(stage.inputCount)}
                 </div>
               </div>
 
@@ -65,7 +65,7 @@ export function StageBreakdownList({
               <div>
                 <div className="text-xs text-gray-600 mb-1">Matched</div>
                 <div className="text-lg font-bold text-green-600">
-                  {formatNumber(stage.matched_count)}
+                  {formatNumber(stage.matchedCount)}
                 </div>
               </div>
 
@@ -95,10 +95,10 @@ export function StageBreakdownList({
             )}
 
             {/* Error Count */}
-            {stage.error_count && stage.error_count > 0 && (
+            {stage.errorCount && stage.errorCount > 0 && (
               <div className="mt-2 pt-2 border-t border-gray-200">
                 <div className="text-sm text-red-600 text-center">
-                  ⚠ {formatNumber(stage.error_count)} errors
+                  ⚠ {formatNumber(stage.errorCount)} errors
                 </div>
               </div>
             )}

package/src/components/FunnelRunHistory/types.ts

@@ -11,17 +11,17 @@ import { FunnelRun, FunnelRunStatus, TriggerType } from '../../types';
  */
 export interface RunFilters {
   status?: FunnelRunStatus | 'all';
-  trigger_type?: TriggerType | 'all';
-  date_range?: 'all' | 'today' | 'week' | 'month' | 'custom';
-  start_date?: Date;
-  end_date?: Date;
+  triggerType?: TriggerType | 'all';
+  dateRange?: 'all' | 'today' | 'week' | 'month' | 'custom';
+  startDate?: Date;
+  endDate?: Date;
 }
 
 /**
  * Sort configuration for run history
  */
 export interface RunSort {
-  field: 'started_at' | 'status' | 'match_rate' | 'duration_ms';
+  field: 'startedAt' | 'status' | 'matchRate' | 'durationMs';
   direction: 'asc' | 'desc';
 }
 
@@ -30,7 +30,7 @@ export interface RunSort {
  */
 export interface Pagination {
   page: number;
-  page_size: number;
+  pageSize: number;
   total: number;
 }
 

package/src/components/FunnelStageBuilder/FunnelStageBuilder.stories.tsx

@@ -95,10 +95,10 @@ function createEmptyFunnel(): Funnel {
     name: 'VC Outreach Funnel',
     description: 'Filter and prioritize venture capital firms for outreach',
     status: 'draft',
-    input_type: 'both',
+    inputType: 'both',
     stages: [],
-    created_at: new Date().toISOString(),
-    updated_at: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   };
 }
 
@@ -109,55 +109,55 @@ function createSampleFunnel(): Funnel {
     name: 'VC Outreach Funnel',
     description: 'Filter and prioritize venture capital firms for outreach',
     status: 'draft',
-    input_type: 'both',
+    inputType: 'both',
     stages: [
       {
         id: 'stage-1',
         order: 0,
         name: 'High ICP Score',
         description: 'Firms with strong ideal customer profile match',
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [
           {
-            field_path: 'firm.stage',
+            fieldPath: 'firm.stage',
             operator: 'in',
             value: ['Seed', 'Series A'],
           },
           {
-            field_path: 'firm.check_size_min',
+            fieldPath: 'firm.check_size_min',
             operator: 'lte',
             value: 500000,
           },
         ],
-        match_action: 'tag_continue',
-        no_match_action: 'continue',
-        match_tags: ['high-priority', 'icp-match'],
+        matchAction: 'tag_continue',
+        noMatchAction: 'continue',
+        matchTags: ['high-priority', 'icp-match'],
       },
       {
         id: 'stage-2',
         order: 1,
         name: 'Has Contact Info',
         description: 'Ensure we have investor email or LinkedIn',
-        filter_logic: 'OR',
+        filterLogic: 'OR',
         rules: [
           {
-            field_path: 'investor.email',
+            fieldPath: 'investor.email',
             operator: 'isnotnull',
             value: null,
           },
           {
-            field_path: 'investor.linkedin_url',
+            fieldPath: 'investor.linkedin_url',
             operator: 'isnotnull',
             value: null,
           },
         ],
-        match_action: 'output',
-        no_match_action: 'exclude',
-        no_match_tags: ['no-contact-info'],
+        matchAction: 'output',
+        noMatchAction: 'exclude',
+        noMatchTags: ['no-contact-info'],
       },
     ],
-    created_at: new Date().toISOString(),
-    updated_at: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   };
 }
 
@@ -216,10 +216,10 @@ export const SingleStage: Story = {
         order: 0,
         name: 'Stage 1',
         description: '',
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [],
-        match_action: 'continue',
-        no_match_action: 'continue',
+        matchAction: 'continue',
+        noMatchAction: 'continue',
       },
     ];
     return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
@@ -235,10 +235,10 @@ export const MultipleStages: Story = {
       order: i,
       name: `Stage ${i + 1}`,
       description: `Description for stage ${i + 1}`,
-      filter_logic: 'AND' as const,
+      filterLogic: 'AND' as const,
       rules: [],
-      match_action: 'continue' as const,
-      no_match_action: 'continue' as const,
+      matchAction: 'continue' as const,
+      noMatchAction: 'continue' as const,
     }));
     return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
   },
@@ -253,19 +253,19 @@ export const WithValidationErrors: Story = {
         id: 'stage-1',
         order: 0,
         name: 'Duplicate Name',
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [],
-        match_action: 'continue',
-        no_match_action: 'continue',
+        matchAction: 'continue',
+        noMatchAction: 'continue',
       },
       {
         id: 'stage-2',
         order: 1,
         name: 'Duplicate Name', // Duplicate!
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [],
-        match_action: 'continue',
-        no_match_action: 'continue',
+        matchAction: 'continue',
+        noMatchAction: 'continue',
       },
     ];
     return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
@@ -281,30 +281,30 @@ export const WithDifferentActions: Story = {
         id: 'stage-1',
         order: 0,
         name: 'Tag & Continue',
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [],
-        match_action: 'tag_continue',
-        no_match_action: 'continue',
-        match_tags: ['qualified', 'high-priority'],
+        matchAction: 'tag_continue',
+        noMatchAction: 'continue',
+        matchTags: ['qualified', 'high-priority'],
       },
       {
         id: 'stage-2',
         order: 1,
         name: 'Output',
-        filter_logic: 'OR',
+        filterLogic: 'OR',
         rules: [],
-        match_action: 'output',
-        no_match_action: 'exclude',
+        matchAction: 'output',
+        noMatchAction: 'exclude',
       },
       {
         id: 'stage-3',
         order: 2,
         name: 'Tag & Exclude',
-        filter_logic: 'AND',
+        filterLogic: 'AND',
         rules: [],
-        match_action: 'continue',
-        no_match_action: 'tag_exclude',
-        no_match_tags: ['rejected', 'low-priority'],
+        matchAction: 'continue',
+        noMatchAction: 'tag_exclude',
+        noMatchTags: ['rejected', 'low-priority'],
       },
     ];
     return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;

package/src/components/FunnelStageBuilder/FunnelStageBuilder.test.tsx

@@ -32,19 +32,19 @@ function createTestFunnel(stageCount: number = 2): Funnel {
     name: 'Test Funnel',
     description: 'Test funnel',
     status: 'draft',
-    input_type: 'contacts',
+    inputType: 'contacts',
     stages: Array.from({ length: stageCount }, (_, i) => ({
       id: `stage-${i}`,
       order: i,
       name: `Stage ${i + 1}`,
       description: '',
-      filter_logic: 'AND' as const,
+      filterLogic: 'AND' as const,
       rules: [],
-      match_action: 'continue' as const,
-      no_match_action: 'continue' as const,
+      matchAction: 'continue' as const,
+      noMatchAction: 'continue' as const,
     })),
-    created_at: new Date().toISOString(),
-    updated_at: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   };
 }
 

package/src/components/FunnelStageBuilder/FunnelStageBuilder.tsx

@@ -59,12 +59,12 @@ function createEmptyStage(order: number): FunnelStage {
     order,
     name: `Stage ${order + 1}`,
     description: '',
-    filter_logic: 'AND',
+    filterLogic: 'AND',
     rules: [],
-    match_action: 'continue',
-    no_match_action: 'continue',
-    match_tags: [],
-    no_match_tags: [],
+    matchAction: 'continue',
+    noMatchAction: 'continue',
+    matchTags: [],
+    noMatchTags: [],
   };
 }
 

package/src/components/FunnelStageBuilder/StageActions.test.tsx

@@ -13,10 +13,10 @@ function createTestStage(): FunnelStage {
     id: 'stage-1',
     order: 0,
     name: 'Test Stage',
-    filter_logic: 'AND',
+    filterLogic: 'AND',
     rules: [],
-    match_action: 'continue',
-    no_match_action: 'continue',
+    matchAction: 'continue',
+    noMatchAction: 'continue',
   };
 }
 
@@ -131,7 +131,7 @@ describe('StageActions', () => {
 
   it('displays current match action', () => {
     const stage = createTestStage();
-    stage.match_action = 'tag_continue';
+    stage.matchAction = 'tag_continue';
 
     const onMatchActionChange = vi.fn();
     const onNoMatchActionChange = vi.fn();
@@ -150,7 +150,7 @@ describe('StageActions', () => {
 
   it('displays current no match action', () => {
     const stage = createTestStage();
-    stage.no_match_action = 'tag_exclude';
+    stage.noMatchAction = 'tag_exclude';
 
     const onMatchActionChange = vi.fn();
     const onNoMatchActionChange = vi.fn();
@@ -169,7 +169,7 @@ describe('StageActions', () => {
 
   it('shows description for match action', () => {
     const stage = createTestStage();
-    stage.match_action = 'output';
+    stage.matchAction = 'output';
 
     const onMatchActionChange = vi.fn();
     const onNoMatchActionChange = vi.fn();
@@ -187,7 +187,7 @@ describe('StageActions', () => {
 
   it('shows description for no match action', () => {
     const stage = createTestStage();
-    stage.no_match_action = 'exclude';
+    stage.noMatchAction = 'exclude';
 
     const onMatchActionChange = vi.fn();
     const onNoMatchActionChange = vi.fn();

package/src/components/FunnelStageBuilder/StageActions.tsx

@@ -85,7 +85,7 @@ export function StageActions({
         </label>
         <select
           id={`match-action-${stage.id}`}
-          value={stage.match_action}
+          value={stage.matchAction}
           onChange={(e) => onMatchActionChange(e.target.value as MatchAction)}
           className="form-select"
         >
@@ -96,7 +96,7 @@ export function StageActions({
           ))}
         </select>
         <p className="form-hint">
-          {MATCH_ACTIONS.find((a) => a.value === stage.match_action)?.description}
+          {MATCH_ACTIONS.find((a) => a.value === stage.matchAction)?.description}
         </p>
       </div>
 
@@ -107,7 +107,7 @@ export function StageActions({
         </label>
         <select
           id={`no-match-action-${stage.id}`}
-          value={stage.no_match_action}
+          value={stage.noMatchAction}
           onChange={(e) => onNoMatchActionChange(e.target.value as NoMatchAction)}
           className="form-select"
         >
@@ -118,7 +118,7 @@ export function StageActions({
           ))}
         </select>
         <p className="form-hint">
-          {NO_MATCH_ACTIONS.find((a) => a.value === stage.no_match_action)?.description}
+          {NO_MATCH_ACTIONS.find((a) => a.value === stage.noMatchAction)?.description}
         </p>
       </div>
     </div>

package/src/components/FunnelStageBuilder/StageCard.tsx

@@ -174,15 +174,15 @@ export function StageCard({
           </div>
           <div className="summary-item">
             <span className="summary-label">Logic:</span>
-            <span className="summary-value">{stage.filter_logic}</span>
+            <span className="summary-value">{stage.filterLogic}</span>
           </div>
           <div className="summary-item">
             <span className="summary-label">On Match:</span>
-            <span className="summary-value">{stage.match_action}</span>
+            <span className="summary-value">{stage.matchAction}</span>
           </div>
           <div className="summary-item">
             <span className="summary-label">On No Match:</span>
-            <span className="summary-value">{stage.no_match_action}</span>
+            <span className="summary-value">{stage.noMatchAction}</span>
           </div>
         </div>
       )}

package/src/components/FunnelStageBuilder/StageForm.tsx

@@ -95,35 +95,35 @@ export function StageForm({
    * Handle filter logic change
    */
   const handleFilterLogicChange = useCallback((logic: FilterLogic) => {
-    onUpdate({ ...stage, filter_logic: logic });
+    onUpdate({ ...stage, filterLogic: logic });
   }, [stage, onUpdate]);
 
   /**
    * Handle match action change
    */
   const handleMatchActionChange = useCallback((action: MatchAction) => {
-    onUpdate({ ...stage, match_action: action });
+    onUpdate({ ...stage, matchAction: action });
   }, [stage, onUpdate]);
 
   /**
    * Handle no match action change
    */
   const handleNoMatchActionChange = useCallback((action: NoMatchAction) => {
-    onUpdate({ ...stage, no_match_action: action });
+    onUpdate({ ...stage, noMatchAction: action });
   }, [stage, onUpdate]);
 
   /**
    * Handle match tags change
    */
   const handleMatchTagsChange = useCallback((tags: string[]) => {
-    onUpdate({ ...stage, match_tags: tags });
+    onUpdate({ ...stage, matchTags: tags });
   }, [stage, onUpdate]);
 
   /**
    * Handle no match tags change
    */
   const handleNoMatchTagsChange = useCallback((tags: string[]) => {
-    onUpdate({ ...stage, no_match_tags: tags });
+    onUpdate({ ...stage, noMatchTags: tags });
   }, [stage, onUpdate]);
 
   /**
@@ -173,13 +173,13 @@ export function StageForm({
           <button
             type="button"
             onClick={() => handleFilterLogicChange('AND')}
-            className={`toggle-button ${stage.filter_logic === 'AND' ? 'active' : ''}`}
+            className={`toggle-button ${stage.filterLogic === 'AND' ? 'active' : ''}`}
           >
             <input
               type="radio"
               name={`filter-logic-${stage.id}`}
               value="AND"
-              checked={stage.filter_logic === 'AND'}
+              checked={stage.filterLogic === 'AND'}
               onChange={() => handleFilterLogicChange('AND')}
               className="sr-only"
             />
@@ -188,13 +188,13 @@ export function StageForm({
           <button
             type="button"
             onClick={() => handleFilterLogicChange('OR')}
-            className={`toggle-button ${stage.filter_logic === 'OR' ? 'active' : ''}`}
+            className={`toggle-button ${stage.filterLogic === 'OR' ? 'active' : ''}`}
           >
             <input
               type="radio"
               name={`filter-logic-${stage.id}`}
               value="OR"
-              checked={stage.filter_logic === 'OR'}
+              checked={stage.filterLogic === 'OR'}
               onChange={() => handleFilterLogicChange('OR')}
               className="sr-only"
             />
@@ -202,7 +202,7 @@ export function StageForm({
           </button>
         </div>
         <p className="form-hint">
-          {stage.filter_logic === 'AND'
+          {stage.filterLogic === 'AND'
             ? 'All rules must match for this stage to pass'
             : 'At least one rule must match for this stage to pass'}
         </p>
@@ -216,11 +216,11 @@ export function StageForm({
       />
 
       {/* Match tags */}
-      {(stage.match_action === 'tag' || stage.match_action === 'tag_continue') && (
+      {(stage.matchAction === 'tag' || stage.matchAction === 'tag_continue') && (
         <div className="form-group">
           <label className="form-label">Tags on Match</label>
           <TagInput
-            tags={stage.match_tags || []}
+            tags={stage.matchTags || []}
             onChange={handleMatchTagsChange}
             placeholder="Add tag..."
           />
@@ -231,11 +231,11 @@ export function StageForm({
       )}
 
       {/* No match tags */}
-      {stage.no_match_action === 'tag_exclude' && (
+      {stage.noMatchAction === 'tag_exclude' && (
         <div className="form-group">
           <label className="form-label">Tags on No Match</label>
           <TagInput
-            tags={stage.no_match_tags || []}
+            tags={stage.noMatchTags || []}
             onChange={handleNoMatchTagsChange}
             placeholder="Add tag..."
           />