@startsimpli/funnels 0.1.3 → 0.1.5

package/{dist/components/index.css → src/components/FunnelVisualFlow/FunnelVisualFlow.css}

@@ -1,23 +1,43 @@
-/* src/components/FunnelVisualFlow/FunnelVisualFlow.css */
+/**
+ * FunnelVisualFlow Styles
+ *
+ * Design System:
+ * - Uses Tailwind-like utility values
+ * - Consistent spacing (4px grid)
+ * - Clean, minimal aesthetic
+ * - Smooth transitions
+ */
+
+/* =============================================================================
+ * Flow Container
+ * ============================================================================= */
+
 .funnel-visual-flow {
   position: relative;
   width: 100%;
-  background: #f9fafb;
+  background: #f9fafb; /* gray-50 */
   border-radius: 8px;
   overflow: hidden;
 }
+
 .funnel-visual-flow-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f9fafb;
-  border: 2px dashed #d1d5db;
+  border: 2px dashed #d1d5db; /* gray-300 */
   border-radius: 8px;
 }
+
 .empty-state {
   text-align: center;
   padding: 32px;
 }
+
+/* =============================================================================
+ * Stage Node
+ * ============================================================================= */
+
 .stage-node {
   padding: 16px;
   border-radius: 8px;
@@ -29,34 +49,44 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
+
 .stage-node:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);
 }
+
 .stage-node:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
+
+/* Stage number (circled number) */
 .stage-number {
   font-size: 28px;
   font-weight: 700;
   line-height: 1;
   margin-bottom: 8px;
 }
+
+/* Stage name */
 .stage-name {
   font-size: 16px;
   font-weight: 600;
-  color: #111827;
+  color: #111827; /* gray-900 */
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Rule count */
 .stage-rules {
   font-size: 13px;
-  color: #6b7280;
+  color: #6b7280; /* gray-500 */
   margin-bottom: 6px;
 }
+
+/* Action label */
 .stage-action {
   font-size: 12px;
   font-weight: 600;
@@ -64,38 +94,51 @@
   letter-spacing: 0.5px;
   margin-bottom: 8px;
 }
+
+/* Stats section */
 .stage-stats {
   margin-top: 12px;
   padding-top: 12px;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid #e5e7eb; /* gray-200 */
 }
+
 .stat-row {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
   margin-bottom: 4px;
 }
+
 .stat-label {
-  color: #6b7280;
+  color: #6b7280; /* gray-500 */
   font-weight: 500;
 }
+
 .stat-value {
   font-weight: 600;
-  color: #111827;
+  color: #111827; /* gray-900 */
 }
+
+/* Description (if shown) */
 .stage-description {
   margin-top: 8px;
   font-size: 12px;
-  color: #9ca3af;
+  color: #9ca3af; /* gray-400 */
   font-style: italic;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* =============================================================================
+ * Flow Legend
+ * ============================================================================= */
+
 .flow-legend-panel {
   background: transparent;
   border: none;
 }
+
 .flow-legend {
   background: white;
   border-radius: 8px;
@@ -103,6 +146,7 @@
   padding: 12px;
   min-width: 140px;
 }
+
 .legend-toggle {
   width: 100%;
   display: flex;
@@ -114,85 +158,117 @@
   padding: 0;
   margin-bottom: 8px;
 }
+
 .legend-toggle:hover {
   opacity: 0.8;
 }
+
 .legend-toggle:focus {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
   border-radius: 4px;
 }
+
 .legend-title {
   font-size: 13px;
   font-weight: 600;
-  color: #374151;
+  color: #374151; /* gray-700 */
 }
+
 .legend-chevron {
   transition: transform 0.2s ease;
-  color: #6b7280;
+  color: #6b7280; /* gray-500 */
 }
+
 .legend-chevron.expanded {
   transform: rotate(180deg);
 }
+
 .legend-items {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+
 .legend-item {
   display: flex;
   align-items: center;
   gap: 8px;
 }
+
 .legend-color {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   flex-shrink: 0;
 }
+
 .legend-label {
   font-size: 12px;
-  color: #4b5563;
+  color: #4b5563; /* gray-600 */
   font-weight: 500;
 }
+
+/* =============================================================================
+ * React Flow Overrides
+ * ============================================================================= */
+
+/* Make edges more visible */
 .react-flow__edge-path {
   stroke-width: 2;
 }
+
+/* Edge labels */
 .react-flow__edge-text {
   font-size: 12px;
   font-weight: 600;
 }
+
+/* Controls */
 .react-flow__controls {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
+
 .react-flow__controls-button {
   border-bottom: 1px solid #e5e7eb;
 }
+
 .react-flow__controls-button:hover {
   background: #f3f4f6;
 }
+
+/* Background */
 .react-flow__background {
   background-color: #f9fafb;
 }
+
+/* Attribution */
 .react-flow__attribution {
   opacity: 0.5;
   font-size: 10px;
 }
+
+/* =============================================================================
+ * Responsive Design
+ * ============================================================================= */
+
 @media (max-width: 640px) {
   .stage-node {
     min-width: 180px;
     max-width: 220px;
     padding: 12px;
   }
+
   .stage-number {
     font-size: 24px;
   }
+
   .stage-name {
     font-size: 14px;
   }
+
   .flow-legend {
     min-width: 120px;
     padding: 8px;
   }
 }
-/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1,254 @@
+/**
+ * FunnelVisualFlow Storybook Stories
+ *
+ * Visual testing and documentation for the FunnelVisualFlow component.
+ *
+ * Stories:
+ * 1. Empty (no stages)
+ * 2. Single stage
+ * 3. Simple funnel (3 stages)
+ * 4. Complex funnel (5+ stages)
+ * 5. With run data (shows stats)
+ * 6. Different action types (color coding)
+ * 7. Interactive (click callbacks)
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { FunnelVisualFlow } from './FunnelVisualFlow';
+import { Funnel, FunnelStage, FunnelRun } from '../../types';
+
+const meta: Meta<typeof FunnelVisualFlow> = {
+  title: 'Components/FunnelVisualFlow',
+  component: FunnelVisualFlow,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FunnelVisualFlow>;
+
+// Helper to create stages
+const createStage = (
+  id: string,
+  name: string,
+  order: number,
+  matchAction: any = 'continue',
+  noMatchAction: any = 'exclude'
+): FunnelStage => ({
+  id,
+  order,
+  name,
+  description: `${name} stage filters entities`,
+  filter_logic: 'AND',
+  rules: [
+    {
+      field_path: 'score',
+      operator: 'gte',
+      value: 50,
+    },
+    {
+      field_path: 'status',
+      operator: 'eq',
+      value: 'active',
+    },
+  ],
+  match_action: matchAction,
+  no_match_action: noMatchAction,
+});
+
+// Helper to create funnel
+const createFunnel = (
+  stages: FunnelStage[],
+  name: string = 'Sample Funnel'
+): Funnel => ({
+  id: 'funnel-1',
+  name,
+  description: 'A sample funnel for visualization',
+  status: 'active',
+  input_type: 'contacts',
+  stages,
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+});
+
+// Empty state
+export const Empty: Story = {
+  args: {
+    funnel: createFunnel([]),
+    height: 400,
+  },
+};
+
+// Single stage
+export const SingleStage: Story = {
+  args: {
+    funnel: createFunnel([createStage('stage-1', 'High ICP Score', 0)]),
+    height: 400,
+  },
+};
+
+// Simple funnel (3 stages)
+export const SimpleFunnel: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'High ICP Score', 0),
+        createStage('stage-2', 'Frontend Stack', 1),
+        createStage('stage-3', 'Testing Tools', 2, 'output', 'exclude'),
+      ],
+      'Frontend Developer Funnel'
+    ),
+    height: 600,
+  },
+};
+
+// Complex funnel (5 stages)
+export const ComplexFunnel: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'High ICP Score', 0),
+        createStage('stage-2', 'Frontend Stack', 1),
+        createStage('stage-3', 'Testing Tools', 2),
+        createStage('stage-4', 'Likely SMB', 3),
+        createStage('stage-5', 'Not Enterprise', 4, 'output', 'exclude'),
+      ],
+      'SMB Frontend Developer Funnel'
+    ),
+    height: 800,
+  },
+};
+
+// With run data (shows stats)
+export const WithRunData: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'High ICP Score', 0),
+        createStage('stage-2', 'Frontend Stack', 1),
+        createStage('stage-3', 'Testing Tools', 2, 'output', 'exclude'),
+      ],
+      'Frontend Developer Funnel'
+    ),
+    runData: {
+      id: 'run-1',
+      funnel_id: '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: {
+        '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,
+        },
+        '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,
+        },
+        '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,
+        },
+      },
+    } as FunnelRun,
+    height: 600,
+  },
+};
+
+// Different action types (color coding)
+export const ActionTypes: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'Continue Action', 0, 'continue', 'continue'),
+        createStage('stage-2', 'Tag Action', 1, 'tag', 'continue'),
+        createStage('stage-3', 'Tag & Continue', 2, 'tag_continue', 'exclude'),
+        createStage('stage-4', 'Exclude Action', 3, 'continue', 'exclude'),
+        createStage('stage-5', 'Output Action', 4, 'output', 'exclude'),
+      ],
+      'Action Types Demo'
+    ),
+    height: 800,
+  },
+};
+
+// Interactive (with callbacks)
+export const Interactive: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'High ICP Score', 0),
+        createStage('stage-2', 'Frontend Stack', 1),
+        createStage('stage-3', 'Testing Tools', 2, 'output', 'exclude'),
+      ],
+      'Interactive Funnel'
+    ),
+    onStageClick: (stage: FunnelStage) => {
+      alert(`Clicked stage: ${stage.name}`);
+    },
+    onEdgeClick: (fromStage: string, toStage: string) => {
+      alert(`Clicked edge from ${fromStage} to ${toStage}`);
+    },
+    height: 600,
+  },
+};
+
+// Custom height
+export const CustomHeight: Story = {
+  args: {
+    funnel: createFunnel(
+      [
+        createStage('stage-1', 'High ICP Score', 0),
+        createStage('stage-2', 'Frontend Stack', 1),
+        createStage('stage-3', 'Testing Tools', 2, 'output', 'exclude'),
+      ],
+      'Custom Height Funnel'
+    ),
+    height: 400,
+  },
+};
+
+// Large funnel (10 stages)
+export const LargeFunnel: Story = {
+  args: {
+    funnel: createFunnel(
+      Array.from({ length: 10 }, (_, i) =>
+        createStage(
+          `stage-${i + 1}`,
+          `Stage ${i + 1}`,
+          i,
+          i === 9 ? 'output' : 'continue',
+          'exclude'
+        )
+      ),
+      'Large Funnel (10 Stages)'
+    ),
+    height: 1000,
+  },
+};