@startsimpli/funnels 0.1.3 → 0.1.5

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

@@ -0,0 +1,312 @@
+/**
+ * FunnelStageBuilder Storybook stories
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { FunnelStageBuilder } from './FunnelStageBuilder';
+import { Funnel, FieldDefinition } from '../../types';
+import './FunnelStageBuilder.css';
+
+// Sample field registry
+const sampleFieldRegistry: FieldDefinition[] = [
+  // Firm fields
+  {
+    name: 'firm.name',
+    label: 'Firm Name',
+    type: 'string',
+    operators: ['eq', 'ne', 'contains', 'startswith'],
+    category: 'Firm',
+  },
+  {
+    name: 'firm.stage',
+    label: 'Investment Stage',
+    type: 'string',
+    operators: ['eq', 'ne', 'in', 'not_in'],
+    category: 'Firm',
+    constraints: {
+      choices: ['Pre-Seed', 'Seed', 'Series A', 'Series B', 'Series C+', 'Growth'],
+    },
+  },
+  {
+    name: 'firm.aum_usd',
+    label: 'AUM (USD)',
+    type: 'number',
+    operators: ['gt', 'lt', 'gte', 'lte'],
+    category: 'Firm',
+  },
+  {
+    name: 'firm.check_size_min',
+    label: 'Min Check Size',
+    type: 'number',
+    operators: ['gt', 'lt', 'gte', 'lte'],
+    category: 'Firm',
+  },
+  {
+    name: 'firm.check_size_max',
+    label: 'Max Check Size',
+    type: 'number',
+    operators: ['gt', 'lt', 'gte', 'lte'],
+    category: 'Firm',
+  },
+  // Investor fields
+  {
+    name: 'investor.name',
+    label: 'Investor Name',
+    type: 'string',
+    operators: ['eq', 'ne', 'contains', 'startswith'],
+    category: 'Investor',
+  },
+  {
+    name: 'investor.title',
+    label: 'Title',
+    type: 'string',
+    operators: ['eq', 'ne', 'contains'],
+    category: 'Investor',
+  },
+  {
+    name: 'investor.email',
+    label: 'Email',
+    type: 'string',
+    operators: ['eq', 'ne', 'contains', 'isnotnull'],
+    category: 'Investor',
+  },
+  {
+    name: 'investor.linkedin_url',
+    label: 'LinkedIn URL',
+    type: 'string',
+    operators: ['isnotnull', 'isnull', 'contains'],
+    category: 'Investor',
+  },
+  // Tag field
+  {
+    name: 'tags',
+    label: 'Tags',
+    type: 'tag',
+    operators: ['has_tag', 'not_has_tag'],
+    category: 'Metadata',
+  },
+];
+
+// Create empty funnel
+function createEmptyFunnel(): Funnel {
+  return {
+    id: 'funnel-1',
+    name: 'VC Outreach Funnel',
+    description: 'Filter and prioritize venture capital firms for outreach',
+    status: 'draft',
+    input_type: 'both',
+    stages: [],
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+}
+
+// Create funnel with sample stages
+function createSampleFunnel(): Funnel {
+  return {
+    id: 'funnel-1',
+    name: 'VC Outreach Funnel',
+    description: 'Filter and prioritize venture capital firms for outreach',
+    status: 'draft',
+    input_type: 'both',
+    stages: [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'High ICP Score',
+        description: 'Firms with strong ideal customer profile match',
+        filter_logic: 'AND',
+        rules: [
+          {
+            field_path: 'firm.stage',
+            operator: 'in',
+            value: ['Seed', 'Series A'],
+          },
+          {
+            field_path: 'firm.check_size_min',
+            operator: 'lte',
+            value: 500000,
+          },
+        ],
+        match_action: 'tag_continue',
+        no_match_action: 'continue',
+        match_tags: ['high-priority', 'icp-match'],
+      },
+      {
+        id: 'stage-2',
+        order: 1,
+        name: 'Has Contact Info',
+        description: 'Ensure we have investor email or LinkedIn',
+        filter_logic: 'OR',
+        rules: [
+          {
+            field_path: 'investor.email',
+            operator: 'isnotnull',
+            value: null,
+          },
+          {
+            field_path: 'investor.linkedin_url',
+            operator: 'isnotnull',
+            value: null,
+          },
+        ],
+        match_action: 'output',
+        no_match_action: 'exclude',
+        no_match_tags: ['no-contact-info'],
+      },
+    ],
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+}
+
+const meta: Meta<typeof FunnelStageBuilder> = {
+  title: 'Components/FunnelStageBuilder',
+  component: FunnelStageBuilder,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FunnelStageBuilder>;
+
+// Wrapper component for stateful interaction
+function InteractiveFunnelStageBuilder({ initialFunnel }: { initialFunnel: Funnel }) {
+  const [funnel, setFunnel] = useState(initialFunnel);
+
+  return (
+    <div>
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={setFunnel}
+        fieldRegistry={sampleFieldRegistry}
+      />
+
+      {/* Debug output */}
+      <details style={{ marginTop: '2rem', padding: '1rem', background: '#f9fafb', borderRadius: '8px' }}>
+        <summary style={{ cursor: 'pointer', fontWeight: 600 }}>Debug: Funnel State</summary>
+        <pre style={{ fontSize: '12px', overflow: 'auto', marginTop: '1rem' }}>
+          {JSON.stringify(funnel, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+}
+
+// Empty state
+export const EmptyState: Story = {
+  render: () => <InteractiveFunnelStageBuilder initialFunnel={createEmptyFunnel()} />,
+};
+
+// With sample stages
+export const WithSampleStages: Story = {
+  render: () => <InteractiveFunnelStageBuilder initialFunnel={createSampleFunnel()} />,
+};
+
+// Single stage
+export const SingleStage: Story = {
+  render: () => {
+    const funnel = createEmptyFunnel();
+    funnel.stages = [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'Stage 1',
+        description: '',
+        filter_logic: 'AND',
+        rules: [],
+        match_action: 'continue',
+        no_match_action: 'continue',
+      },
+    ];
+    return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
+  },
+};
+
+// Multiple stages (5+)
+export const MultipleStages: Story = {
+  render: () => {
+    const funnel = createEmptyFunnel();
+    funnel.stages = Array.from({ length: 5 }, (_, i) => ({
+      id: `stage-${i}`,
+      order: i,
+      name: `Stage ${i + 1}`,
+      description: `Description for stage ${i + 1}`,
+      filter_logic: 'AND' as const,
+      rules: [],
+      match_action: 'continue' as const,
+      no_match_action: 'continue' as const,
+    }));
+    return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
+  },
+};
+
+// Validation errors
+export const WithValidationErrors: Story = {
+  render: () => {
+    const funnel = createEmptyFunnel();
+    funnel.stages = [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'Duplicate Name',
+        filter_logic: 'AND',
+        rules: [],
+        match_action: 'continue',
+        no_match_action: 'continue',
+      },
+      {
+        id: 'stage-2',
+        order: 1,
+        name: 'Duplicate Name', // Duplicate!
+        filter_logic: 'AND',
+        rules: [],
+        match_action: 'continue',
+        no_match_action: 'continue',
+      },
+    ];
+    return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
+  },
+};
+
+// Different action combinations
+export const WithDifferentActions: Story = {
+  render: () => {
+    const funnel = createEmptyFunnel();
+    funnel.stages = [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'Tag & Continue',
+        filter_logic: 'AND',
+        rules: [],
+        match_action: 'tag_continue',
+        no_match_action: 'continue',
+        match_tags: ['qualified', 'high-priority'],
+      },
+      {
+        id: 'stage-2',
+        order: 1,
+        name: 'Output',
+        filter_logic: 'OR',
+        rules: [],
+        match_action: 'output',
+        no_match_action: 'exclude',
+      },
+      {
+        id: 'stage-3',
+        order: 2,
+        name: 'Tag & Exclude',
+        filter_logic: 'AND',
+        rules: [],
+        match_action: 'continue',
+        no_match_action: 'tag_exclude',
+        no_match_tags: ['rejected', 'low-priority'],
+      },
+    ];
+    return <InteractiveFunnelStageBuilder initialFunnel={funnel} />;
+  },
+};

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

@@ -0,0 +1,304 @@
+/**
+ * FunnelStageBuilder tests
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { FunnelStageBuilder } from './FunnelStageBuilder';
+import { Funnel, FieldDefinition } from '../../types';
+
+// Mock field registry
+const mockFieldRegistry: FieldDefinition[] = [
+  {
+    name: 'firm.stage',
+    label: 'Firm Stage',
+    type: 'string',
+    operators: ['eq', 'ne', 'in'],
+    category: 'Firm',
+  },
+  {
+    name: 'firm.aum_usd',
+    label: 'AUM (USD)',
+    type: 'number',
+    operators: ['gt', 'lt', 'gte', 'lte'],
+    category: 'Firm',
+  },
+];
+
+// Create test funnel
+function createTestFunnel(stageCount: number = 2): Funnel {
+  return {
+    id: 'funnel-1',
+    name: 'Test Funnel',
+    description: 'Test funnel',
+    status: 'draft',
+    input_type: 'contacts',
+    stages: Array.from({ length: stageCount }, (_, i) => ({
+      id: `stage-${i}`,
+      order: i,
+      name: `Stage ${i + 1}`,
+      description: '',
+      filter_logic: 'AND' as const,
+      rules: [],
+      match_action: 'continue' as const,
+      no_match_action: 'continue' as const,
+    })),
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+}
+
+describe('FunnelStageBuilder', () => {
+  it('renders with no stages (empty state)', () => {
+    const funnel = createTestFunnel(0);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    expect(screen.getByText(/No stages yet/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add Stage/i)).toBeInTheDocument();
+  });
+
+  it('renders with 1 stage', () => {
+    const funnel = createTestFunnel(1);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Text is split across multiple spans, so use getByText with regex
+    expect(screen.getByText(/Stage 1:/)).toBeInTheDocument();
+    expect(screen.getByText('Stage 1')).toBeInTheDocument();
+  });
+
+  it('renders with multiple stages', () => {
+    const funnel = createTestFunnel(3);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Check for stage numbers (text is split across spans)
+    expect(screen.getByText(/Stage 1:/)).toBeInTheDocument();
+    expect(screen.getByText(/Stage 2:/)).toBeInTheDocument();
+    expect(screen.getByText(/Stage 3:/)).toBeInTheDocument();
+  });
+
+  it('adds a new stage at the top', async () => {
+    const funnel = createTestFunnel(0);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Click add stage button
+    const addButton = screen.getByText(/Add Stage/i);
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          stages: expect.arrayContaining([
+            expect.objectContaining({
+              name: 'Stage 1',
+              order: 0,
+            }),
+          ]),
+        })
+      );
+    });
+  });
+
+  it('adds a new stage at the bottom', async () => {
+    const funnel = createTestFunnel(2);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Click add stage below button
+    const addButton = screen.getByText(/Add Stage Below/i);
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          stages: expect.arrayContaining([
+            expect.objectContaining({ name: 'Stage 1', order: 0 }),
+            expect.objectContaining({ name: 'Stage 2', order: 1 }),
+            expect.objectContaining({ name: 'Stage 3', order: 2 }),
+          ]),
+        })
+      );
+    });
+  });
+
+  it('removes a stage', async () => {
+    const funnel = createTestFunnel(2);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Find and click delete button for first stage
+    const deleteButtons = screen.getAllByLabelText(/Delete stage/i);
+    fireEvent.click(deleteButtons[0]);
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          stages: expect.arrayContaining([
+            expect.objectContaining({ name: 'Stage 2', order: 0 }), // Reordered
+          ]),
+        })
+      );
+    });
+  });
+
+  it('expands and collapses stages', () => {
+    const funnel = createTestFunnel(1);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Initially expanded (default)
+    expect(screen.getByLabelText(/Stage Name/i)).toBeInTheDocument();
+
+    // Click to collapse - find button by aria-expanded
+    const titleButton = screen.getByRole('button', { expanded: true });
+    fireEvent.click(titleButton);
+
+    // Should show summary instead
+    expect(screen.queryByLabelText(/Stage Name/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/Rules:/i)).toBeInTheDocument();
+
+    // Click to expand again
+    const collapsedButton = screen.getByRole('button', { expanded: false });
+    fireEvent.click(collapsedButton);
+    expect(screen.getByLabelText(/Stage Name/i)).toBeInTheDocument();
+  });
+
+  it('validates stage name uniqueness', async () => {
+    const funnel = createTestFunnel(2);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Get the first stage's name input
+    const nameInputs = screen.getAllByLabelText(/Stage Name/i);
+    const firstInput = nameInputs[0];
+
+    // Try to change name to match second stage
+    fireEvent.change(firstInput, { target: { value: 'Stage 2' } });
+
+    // Wait for debounce and validation
+    await waitFor(() => {
+      expect(screen.getByText(/Stage name must be unique/i)).toBeInTheDocument();
+    }, { timeout: 500 });
+  });
+
+  it('warns when stage has no rules', () => {
+    const funnel = createTestFunnel(1);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    // Should show warning
+    expect(screen.getByText(/Stage has no filter rules/i)).toBeInTheDocument();
+  });
+
+  it('updates stage name with debounce', async () => {
+    const funnel = createTestFunnel(1);
+    const onUpdate = vi.fn();
+
+    render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+      />
+    );
+
+    const nameInput = screen.getByLabelText(/Stage Name/i);
+    fireEvent.change(nameInput, { target: { value: 'Updated Stage Name' } });
+
+    // Should debounce (not called immediately)
+    expect(onUpdate).not.toHaveBeenCalled();
+
+    // Wait for debounce
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          stages: expect.arrayContaining([
+            expect.objectContaining({ name: 'Updated Stage Name' }),
+          ]),
+        })
+      );
+    }, { timeout: 500 });
+  });
+
+  it('applies custom className', () => {
+    const funnel = createTestFunnel(0);
+    const onUpdate = vi.fn();
+
+    const { container } = render(
+      <FunnelStageBuilder
+        funnel={funnel}
+        onUpdate={onUpdate}
+        fieldRegistry={mockFieldRegistry}
+        className="custom-class"
+      />
+    );
+
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});