@startsimpli/funnels 0.1.4 → 0.1.5

package/src/components/FunnelCard/FunnelCard.stories.tsx

@@ -0,0 +1,484 @@
+/**
+ * FunnelCard Storybook Stories
+ *
+ * Visual regression testing and component documentation.
+ * Shows all states and variations of FunnelCard component.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { FunnelCard } from './FunnelCard';
+import { Funnel, FunnelRun } from '../../types';
+
+const meta: Meta<typeof FunnelCard> = {
+  title: 'Components/FunnelCard',
+  component: FunnelCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'BRUTALLY GENERIC funnel card component. Works for investor funnels, recipe funnels, lead funnels, or any domain.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onViewFlow: { action: 'onViewFlow' },
+    onEdit: { action: 'onEdit' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FunnelCard>;
+
+// Base funnel for stories
+const baseFunnel: Funnel = {
+  id: 'funnel-1',
+  name: 'Series A Investor Qualification',
+  description: 'Identifies qualified Series A investors based on stage focus, check size, and geography.',
+  status: 'active',
+  input_type: 'contacts',
+  stages: [
+    {
+      id: 'stage-1',
+      order: 0,
+      name: 'Stage Filter',
+      filter_logic: 'AND',
+      rules: [
+        { field_path: 'firm.stage', operator: 'in', value: ['Series A', 'Multi-Stage'] },
+      ],
+      match_action: 'tag_continue',
+      no_match_action: 'exclude',
+      match_tags: ['qualified_stage'],
+    },
+    {
+      id: 'stage-2',
+      order: 1,
+      name: 'Check Size Filter',
+      filter_logic: 'AND',
+      rules: [
+        { field_path: 'firm.check_size_min', operator: 'lte', value: 5000000 },
+        { field_path: 'firm.check_size_max', operator: 'gte', value: 3000000 },
+        { field_path: 'firm.active', operator: 'is_true', value: null },
+      ],
+      match_action: 'tag_continue',
+      no_match_action: 'tag_exclude',
+      match_tags: ['qualified_check_size'],
+      no_match_tags: ['excluded_check_size'],
+    },
+    {
+      id: 'stage-3',
+      order: 2,
+      name: 'Geography Filter',
+      filter_logic: 'OR',
+      rules: [
+        { field_path: 'firm.geography', operator: 'has_any', value: ['US', 'North America'] },
+      ],
+      match_action: 'tag_continue',
+      no_match_action: 'exclude',
+      match_tags: ['qualified_geography'],
+    },
+    {
+      id: 'stage-4',
+      order: 3,
+      name: 'Industry Filter',
+      filter_logic: 'OR',
+      rules: [
+        { field_path: 'firm.industries', operator: 'has_any', value: ['SaaS', 'Enterprise'] },
+      ],
+      match_action: 'tag_continue',
+      no_match_action: 'exclude',
+      match_tags: ['qualified_industry'],
+    },
+    {
+      id: 'stage-5',
+      order: 4,
+      name: 'Final Qualification',
+      filter_logic: 'AND',
+      rules: [
+        { field_path: 'tags', operator: 'has_all', value: ['qualified_stage', 'qualified_check_size', 'qualified_geography'] },
+      ],
+      match_action: 'output',
+      no_match_action: 'exclude',
+    },
+  ],
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-15T10:30:00Z',
+};
+
+const completedRun: FunnelRun = {
+  id: 'run-1',
+  funnel_id: 'funnel-1',
+  status: 'completed',
+  trigger_type: 'manual',
+  started_at: '2024-01-15T10:00:00Z',
+  completed_at: '2024-01-15T10:05:00Z',
+  duration_ms: 300000,
+  total_input: 83061,
+  total_matched: 235,
+  total_excluded: 82826,
+  total_tagged: 235,
+  stage_stats: {},
+};
+
+// Stories
+
+export const Active: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: completedRun,
+  },
+};
+
+export const Draft: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      status: 'draft',
+      name: 'Draft Funnel - In Development',
+      description: 'This funnel is still being configured and tested.',
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const Paused: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      status: 'paused',
+      name: 'Paused Funnel - Temporarily Disabled',
+      description: 'This funnel has been paused while we update criteria.',
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const Archived: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      status: 'archived',
+      name: 'Archived Funnel - Historical Reference',
+      description: 'This funnel is no longer in use but kept for reference.',
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const NoRunsYet: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: undefined,
+  },
+};
+
+export const Running: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: {
+      ...completedRun,
+      status: 'running',
+      completed_at: undefined,
+    },
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: {
+      ...completedRun,
+      status: 'failed',
+      error: 'Database connection timeout',
+    },
+  },
+};
+
+export const NoStages: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      stages: [],
+      name: 'Empty Funnel',
+      description: 'This funnel has no stages defined yet.',
+    },
+  },
+};
+
+export const OneStage: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      stages: [baseFunnel.stages[0]],
+      name: 'Single Stage Funnel',
+    },
+    latestRun: {
+      ...completedRun,
+      total_input: 1000,
+      total_matched: 450,
+      total_excluded: 550,
+    },
+  },
+};
+
+export const TenStages: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      stages: Array.from({ length: 10 }, (_, i) => ({
+        id: `stage-${i}`,
+        order: i,
+        name: `Stage ${i + 1}: Filter ${i + 1}`,
+        filter_logic: 'AND' as const,
+        rules: [
+          { field_path: `field${i}`, operator: 'eq' as const, value: i },
+        ],
+        match_action: 'continue' as const,
+        no_match_action: 'exclude' as const,
+      })),
+      name: 'Complex Multi-Stage Funnel',
+      description: 'Demonstrates card with many stages.',
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const HighMatchRate: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: {
+      ...completedRun,
+      total_input: 1000,
+      total_matched: 950,
+      total_excluded: 50,
+    },
+  },
+};
+
+export const LowMatchRate: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: {
+      ...completedRun,
+      total_input: 100000,
+      total_matched: 12,
+      total_excluded: 99988,
+    },
+  },
+};
+
+export const ZeroMatches: Story = {
+  args: {
+    funnel: baseFunnel,
+    latestRun: {
+      ...completedRun,
+      total_matched: 0,
+      total_excluded: 83061,
+    },
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      description: undefined,
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const LongName: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      name: 'This is an extremely long funnel name that demonstrates how the card handles text overflow and wrapping in the header section',
+    },
+    latestRun: completedRun,
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    funnel: {
+      ...baseFunnel,
+      description: 'This is a very long description that explains in great detail what this funnel does, how it works, why it matters, and all the edge cases it handles. It should demonstrate how the card truncates long descriptions to maintain a clean layout. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    },
+    latestRun: completedRun,
+  },
+};
+
+// Domain-specific examples showing BRUTALLY GENERIC nature
+
+export const RecipeFunnel: Story = {
+  args: {
+    funnel: {
+      id: 'recipe-funnel-1',
+      name: 'Quick Easy Dinner Recommendations',
+      description: 'Filters recipes for vegetarian, gluten-free, quick prep, easy difficulty.',
+      status: 'active',
+      input_type: 'any',
+      stages: [
+        {
+          id: 'stage-1',
+          order: 0,
+          name: 'Dietary Restrictions',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'dietary_restrictions', operator: 'has_all', value: ['vegetarian', 'gluten-free'] },
+          ],
+          match_action: 'tag_continue',
+          no_match_action: 'exclude',
+          match_tags: ['meets_dietary_needs'],
+        },
+        {
+          id: 'stage-2',
+          order: 1,
+          name: 'Time Constraint',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'prep_time_minutes', operator: 'lte', value: 30 },
+          ],
+          match_action: 'tag_continue',
+          no_match_action: 'exclude',
+          match_tags: ['quick_prep'],
+        },
+        {
+          id: 'stage-3',
+          order: 2,
+          name: 'Difficulty Level',
+          filter_logic: 'OR',
+          rules: [
+            { field_path: 'difficulty', operator: 'in', value: ['easy', 'medium'] },
+          ],
+          match_action: 'output',
+          no_match_action: 'exclude',
+        },
+      ],
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-15T10:30:00Z',
+    },
+    latestRun: {
+      ...completedRun,
+      total_input: 5420,
+      total_matched: 87,
+      total_excluded: 5333,
+    },
+  },
+};
+
+export const LeadScoringFunnel: Story = {
+  args: {
+    funnel: {
+      id: 'lead-funnel-1',
+      name: 'Enterprise Lead Scoring',
+      description: 'Scores and qualifies enterprise leads based on company size, engagement, and fit.',
+      status: 'active',
+      input_type: 'any',
+      stages: [
+        {
+          id: 'stage-1',
+          order: 0,
+          name: 'Company Size',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'company.employee_count', operator: 'gte', value: 100 },
+          ],
+          match_action: 'tag_continue',
+          no_match_action: 'tag_continue',
+          match_tags: ['enterprise_size'],
+          no_match_tags: ['smb_size'],
+        },
+        {
+          id: 'stage-2',
+          order: 1,
+          name: 'Engagement Score',
+          filter_logic: 'OR',
+          rules: [
+            { field_path: 'engagement.email_opens', operator: 'gte', value: 5 },
+            { field_path: 'engagement.demo_requested', operator: 'is_true', value: null },
+          ],
+          match_action: 'tag_continue',
+          no_match_action: 'tag_continue',
+          match_tags: ['engaged'],
+        },
+        {
+          id: 'stage-3',
+          order: 2,
+          name: 'Final Qualification',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'tags', operator: 'has_all', value: ['enterprise_size', 'engaged'] },
+          ],
+          match_action: 'output',
+          no_match_action: 'continue',
+          match_tags: ['hot_lead'],
+        },
+      ],
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-15T10:30:00Z',
+    },
+    latestRun: {
+      ...completedRun,
+      total_input: 12500,
+      total_matched: 342,
+      total_excluded: 12158,
+    },
+  },
+};
+
+export const GitHubIssueFunnel: Story = {
+  args: {
+    funnel: {
+      id: 'github-funnel-1',
+      name: 'GitHub Issue Priority Triage',
+      description: 'Filters GitHub issues to identify high-priority items requiring immediate attention.',
+      status: 'active',
+      input_type: 'any',
+      stages: [
+        {
+          id: 'stage-1',
+          order: 0,
+          name: 'Filter PRs',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'is_pull_request', operator: 'is_false', value: null },
+          ],
+          match_action: 'continue',
+          no_match_action: 'exclude',
+        },
+        {
+          id: 'stage-2',
+          order: 1,
+          name: 'Priority Labels',
+          filter_logic: 'OR',
+          rules: [
+            { field_path: 'labels', operator: 'has_any', value: ['bug', 'security'] },
+          ],
+          match_action: 'tag_continue',
+          no_match_action: 'continue',
+          match_tags: ['high_priority'],
+        },
+        {
+          id: 'stage-3',
+          order: 2,
+          name: 'Community Interest',
+          filter_logic: 'AND',
+          rules: [
+            { field_path: 'comments_count', operator: 'gte', value: 5 },
+          ],
+          match_action: 'output',
+          no_match_action: 'output',
+        },
+      ],
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-15T10:30:00Z',
+    },
+    latestRun: {
+      ...completedRun,
+      total_input: 1847,
+      total_matched: 92,
+      total_excluded: 1755,
+    },
+  },
+};