@startsimpli/funnels 0.1.4 → 0.1.6

package/src/components/FunnelStageBuilder/StageForm.tsx

@@ -0,0 +1,262 @@
+/**
+ * StageForm - Stage configuration form
+ *
+ * Features:
+ * - Stage name input
+ * - Description textarea
+ * - Filter logic toggle (AND/OR)
+ * - Match/no-match action dropdowns
+ * - Tags input
+ * - Filter rules editor
+ */
+
+import React, { useCallback, useState } from 'react';
+import { FunnelStage, FieldDefinition, FilterLogic, MatchAction, NoMatchAction, FilterRule } from '../../types';
+import { StageActions } from './StageActions';
+import { TagInput } from './TagInput';
+import { FilterRuleEditor } from '../FilterRuleEditor/FilterRuleEditor';
+
+export interface StageFormProps {
+  /** The stage being edited */
+  stage: FunnelStage;
+
+  /** Update stage */
+  onUpdate: (stage: FunnelStage) => void;
+
+  /** Available fields */
+  fieldRegistry: FieldDefinition[];
+}
+
+/**
+ * Debounce helper
+ */
+function useDebounce<T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number
+): T {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  return useCallback(
+    ((...args: any[]) => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+
+      const newTimeoutId = setTimeout(() => {
+        callback(...args);
+      }, delay);
+
+      setTimeoutId(newTimeoutId);
+    }) as T,
+    [callback, delay, timeoutId]
+  );
+}
+
+/**
+ * StageForm component
+ */
+export function StageForm({
+  stage,
+  onUpdate,
+  fieldRegistry,
+}: StageFormProps) {
+  // Local state for inputs (debounced updates)
+  const [name, setName] = useState(stage.name);
+  const [description, setDescription] = useState(stage.description || '');
+
+  // Debounced update handlers
+  const debouncedUpdateName = useDebounce((value: string) => {
+    onUpdate({ ...stage, name: value });
+  }, 300);
+
+  const debouncedUpdateDescription = useDebounce((value: string) => {
+    onUpdate({ ...stage, description: value });
+  }, 500);
+
+  /**
+   * Handle name change
+   */
+  const handleNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setName(value);
+    debouncedUpdateName(value);
+  }, [debouncedUpdateName]);
+
+  /**
+   * Handle description change
+   */
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setDescription(value);
+    debouncedUpdateDescription(value);
+  }, [debouncedUpdateDescription]);
+
+  /**
+   * Handle filter logic change
+   */
+  const handleFilterLogicChange = useCallback((logic: FilterLogic) => {
+    onUpdate({ ...stage, filter_logic: logic });
+  }, [stage, onUpdate]);
+
+  /**
+   * Handle match action change
+   */
+  const handleMatchActionChange = useCallback((action: MatchAction) => {
+    onUpdate({ ...stage, match_action: action });
+  }, [stage, onUpdate]);
+
+  /**
+   * Handle no match action change
+   */
+  const handleNoMatchActionChange = useCallback((action: NoMatchAction) => {
+    onUpdate({ ...stage, no_match_action: action });
+  }, [stage, onUpdate]);
+
+  /**
+   * Handle match tags change
+   */
+  const handleMatchTagsChange = useCallback((tags: string[]) => {
+    onUpdate({ ...stage, match_tags: tags });
+  }, [stage, onUpdate]);
+
+  /**
+   * Handle no match tags change
+   */
+  const handleNoMatchTagsChange = useCallback((tags: string[]) => {
+    onUpdate({ ...stage, no_match_tags: tags });
+  }, [stage, onUpdate]);
+
+  /**
+   * Handle filter rules change
+   */
+  const handleRulesChange = useCallback((rules: FilterRule[]) => {
+    onUpdate({ ...stage, rules });
+  }, [stage, onUpdate]);
+
+  return (
+    <div className="stage-form">
+      {/* Name input */}
+      <div className="form-group">
+        <label htmlFor={`stage-name-${stage.id}`} className="form-label">
+          Stage Name
+        </label>
+        <input
+          id={`stage-name-${stage.id}`}
+          type="text"
+          value={name}
+          onChange={handleNameChange}
+          className="form-input"
+          placeholder="e.g., High ICP Score"
+          required
+        />
+      </div>
+
+      {/* Description textarea */}
+      <div className="form-group">
+        <label htmlFor={`stage-desc-${stage.id}`} className="form-label">
+          Description
+        </label>
+        <textarea
+          id={`stage-desc-${stage.id}`}
+          value={description}
+          onChange={handleDescriptionChange}
+          className="form-textarea"
+          placeholder="Describe the purpose of this stage..."
+          rows={3}
+        />
+      </div>
+
+      {/* Filter logic toggle */}
+      <div className="form-group">
+        <label className="form-label">Filter Logic</label>
+        <div className="filter-logic-toggle">
+          <button
+            type="button"
+            onClick={() => handleFilterLogicChange('AND')}
+            className={`toggle-button ${stage.filter_logic === 'AND' ? 'active' : ''}`}
+          >
+            <input
+              type="radio"
+              name={`filter-logic-${stage.id}`}
+              value="AND"
+              checked={stage.filter_logic === 'AND'}
+              onChange={() => handleFilterLogicChange('AND')}
+              className="sr-only"
+            />
+            AND
+          </button>
+          <button
+            type="button"
+            onClick={() => handleFilterLogicChange('OR')}
+            className={`toggle-button ${stage.filter_logic === 'OR' ? 'active' : ''}`}
+          >
+            <input
+              type="radio"
+              name={`filter-logic-${stage.id}`}
+              value="OR"
+              checked={stage.filter_logic === 'OR'}
+              onChange={() => handleFilterLogicChange('OR')}
+              className="sr-only"
+            />
+            OR
+          </button>
+        </div>
+        <p className="form-hint">
+          {stage.filter_logic === 'AND'
+            ? 'All rules must match for this stage to pass'
+            : 'At least one rule must match for this stage to pass'}
+        </p>
+      </div>
+
+      {/* Stage actions */}
+      <StageActions
+        stage={stage}
+        onMatchActionChange={handleMatchActionChange}
+        onNoMatchActionChange={handleNoMatchActionChange}
+      />
+
+      {/* Match tags */}
+      {(stage.match_action === 'tag' || stage.match_action === 'tag_continue') && (
+        <div className="form-group">
+          <label className="form-label">Tags on Match</label>
+          <TagInput
+            tags={stage.match_tags || []}
+            onChange={handleMatchTagsChange}
+            placeholder="Add tag..."
+          />
+          <p className="form-hint">
+            Tags to add when rules match
+          </p>
+        </div>
+      )}
+
+      {/* No match tags */}
+      {stage.no_match_action === 'tag_exclude' && (
+        <div className="form-group">
+          <label className="form-label">Tags on No Match</label>
+          <TagInput
+            tags={stage.no_match_tags || []}
+            onChange={handleNoMatchTagsChange}
+            placeholder="Add tag..."
+          />
+          <p className="form-hint">
+            Tags to add when rules don't match
+          </p>
+        </div>
+      )}
+
+      {/* Filter rules section */}
+      <div className="form-group">
+        <div className="rules-header">
+          <label className="form-label">Filter Rules ({stage.rules.length})</label>
+        </div>
+
+        <FilterRuleEditor
+          rules={stage.rules}
+          onChange={handleRulesChange}
+          fieldRegistry={fieldRegistry}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,178 @@
+/**
+ * TagInput tests
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TagInput } from './TagInput';
+
+describe('TagInput', () => {
+  it('renders with no tags', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    expect(screen.getByPlaceholderText(/Add tag/i)).toBeInTheDocument();
+  });
+
+  it('renders existing tags', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={['tag1', 'tag2', 'tag3']} onChange={onChange} />);
+
+    expect(screen.getByText('tag1')).toBeInTheDocument();
+    expect(screen.getByText('tag2')).toBeInTheDocument();
+    expect(screen.getByText('tag3')).toBeInTheDocument();
+  });
+
+  it('adds tag on Enter key', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: 'newtag' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).toHaveBeenCalledWith(['newtag']);
+  });
+
+  it('adds tag on comma key', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: 'newtag' } });
+    fireEvent.keyDown(input, { key: ',' });
+
+    expect(onChange).toHaveBeenCalledWith(['newtag']);
+  });
+
+  it('adds tag on blur', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: 'newtag' } });
+    fireEvent.blur(input);
+
+    expect(onChange).toHaveBeenCalledWith(['newtag']);
+  });
+
+  it('trims whitespace from tags', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: '  newtag  ' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).toHaveBeenCalledWith(['newtag']);
+  });
+
+  it('converts tags to lowercase', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: 'NewTag' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).toHaveBeenCalledWith(['newtag']);
+  });
+
+  it('prevents duplicate tags', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={['existing']} onChange={onChange} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'existing' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('ignores empty tags', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i);
+    fireEvent.change(input, { target: { value: '   ' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('removes tag when remove button clicked', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={['tag1', 'tag2', 'tag3']} onChange={onChange} />);
+
+    // Click remove button for tag2
+    const removeButtons = screen.getAllByLabelText(/Remove tag/i);
+    fireEvent.click(removeButtons[1]);
+
+    expect(onChange).toHaveBeenCalledWith(['tag1', 'tag3']);
+  });
+
+  it('removes last tag on Backspace when input is empty', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={['tag1', 'tag2']} onChange={onChange} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.keyDown(input, { key: 'Backspace' });
+
+    expect(onChange).toHaveBeenCalledWith(['tag1']);
+  });
+
+  it('does not remove tag on Backspace when input has value', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={['tag1', 'tag2']} onChange={onChange} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'text' } });
+    fireEvent.keyDown(input, { key: 'Backspace' });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('clears input after adding tag', () => {
+    const onChange = vi.fn();
+
+    render(<TagInput tags={[]} onChange={onChange} />);
+
+    const input = screen.getByPlaceholderText(/Add tag/i) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'newtag' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(input.value).toBe('');
+  });
+
+  it('applies custom className', () => {
+    const onChange = vi.fn();
+
+    const { container } = render(
+      <TagInput tags={[]} onChange={onChange} className="custom-class" />
+    );
+
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+
+  it('uses custom placeholder', () => {
+    const onChange = vi.fn();
+
+    render(
+      <TagInput tags={[]} onChange={onChange} placeholder="Custom placeholder" />
+    );
+
+    expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
+  });
+});

package/src/components/FunnelStageBuilder/TagInput.tsx

@@ -0,0 +1,129 @@
+/**
+ * TagInput - Multi-tag input component
+ *
+ * Features:
+ * - Add tags with Enter or comma
+ * - Remove tags with click
+ * - Visual tag chips
+ * - Duplicate prevention
+ */
+
+import React, { useState, useCallback, KeyboardEvent } from 'react';
+
+export interface TagInputProps {
+  /** Current tags */
+  tags: string[];
+
+  /** Change handler */
+  onChange: (tags: string[]) => void;
+
+  /** Input placeholder */
+  placeholder?: string;
+
+  /** Optional CSS class */
+  className?: string;
+}
+
+/**
+ * TagInput component
+ */
+export function TagInput({
+  tags,
+  onChange,
+  placeholder = 'Add tag...',
+  className = '',
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  /**
+   * Add tag
+   */
+  const addTag = useCallback((tag: string) => {
+    const trimmed = tag.trim().toLowerCase();
+
+    if (!trimmed) {
+      return;
+    }
+
+    // Prevent duplicates
+    if (tags.includes(trimmed)) {
+      return;
+    }
+
+    onChange([...tags, trimmed]);
+    setInputValue('');
+  }, [tags, onChange]);
+
+  /**
+   * Remove tag
+   */
+  const removeTag = useCallback((index: number) => {
+    onChange(tags.filter((_, i) => i !== index));
+  }, [tags, onChange]);
+
+  /**
+   * Handle input key down
+   */
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+      // Remove last tag on backspace if input is empty
+      removeTag(tags.length - 1);
+    }
+  }, [inputValue, tags, addTag, removeTag]);
+
+  /**
+   * Handle input blur
+   */
+  const handleBlur = useCallback(() => {
+    if (inputValue) {
+      addTag(inputValue);
+    }
+  }, [inputValue, addTag]);
+
+  return (
+    <div className={`tag-input ${className}`}>
+      <div className="tag-input-container">
+        {/* Tag chips */}
+        {tags.map((tag, index) => (
+          <div key={index} className="tag-chip">
+            <span className="tag-text">{tag}</span>
+            <button
+              type="button"
+              onClick={() => removeTag(index)}
+              className="tag-remove"
+              aria-label={`Remove tag ${tag}`}
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M4 4l6 6M10 4l-6 6"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        ))}
+
+        {/* Input */}
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          placeholder={tags.length === 0 ? placeholder : ''}
+          className="tag-input-field"
+        />
+      </div>
+
+      {/* Hint */}
+      <p className="tag-input-hint">
+        Press Enter or comma to add tags
+      </p>
+    </div>
+  );
+}

package/src/components/FunnelStageBuilder/index.ts

@@ -0,0 +1,21 @@
+/**
+ * FunnelStageBuilder component exports
+ */
+
+export { FunnelStageBuilder } from './FunnelStageBuilder';
+export type { FunnelStageBuilderProps } from './FunnelStageBuilder';
+
+export { StageCard } from './StageCard';
+export type { StageCardProps } from './StageCard';
+
+export { StageForm } from './StageForm';
+export type { StageFormProps } from './StageForm';
+
+export { StageActions } from './StageActions';
+export type { StageActionsProps } from './StageActions';
+
+export { TagInput } from './TagInput';
+export type { TagInputProps } from './TagInput';
+
+export { AddStageButton } from './AddStageButton';
+export type { AddStageButtonProps } from './AddStageButton';

package/src/components/FunnelVisualFlow/FlowLegend.tsx

@@ -0,0 +1,77 @@
+/**
+ * FlowLegend Component
+ *
+ * Legend explaining the color coding of funnel stages.
+ *
+ * Design:
+ * - Minimal, non-intrusive panel in bottom-right
+ * - Color swatches with labels
+ * - Collapsible to save space
+ *
+ * Colors:
+ * - Blue: Continue to next stage
+ * - Red: Exclude entities
+ * - Yellow: Tag entities
+ * - Green: Final output
+ */
+
+import React, { useState } from 'react';
+import { Panel } from '@xyflow/react';
+
+export function FlowLegend() {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const legendItems = [
+    { color: '#3b82f6', label: 'Continue' },
+    { color: '#ef4444', label: 'Exclude' },
+    { color: '#eab308', label: 'Tag' },
+    { color: '#22c55e', label: 'Output' },
+  ];
+
+  return (
+    <Panel position="bottom-right" className="flow-legend-panel">
+      <div className="flow-legend">
+        <button
+          className="legend-toggle"
+          onClick={() => setIsExpanded(!isExpanded)}
+          aria-label={isExpanded ? 'Collapse legend' : 'Expand legend'}
+        >
+          <span className="legend-title">Legend</span>
+          <svg
+            className={`legend-chevron ${isExpanded ? 'expanded' : ''}`}
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 4.5L6 7.5L9 4.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+
+        {isExpanded && (
+          <div className="legend-items">
+            {legendItems.map((item) => (
+              <div key={item.label} className="legend-item">
+                <div
+                  className="legend-color"
+                  style={{
+                    backgroundColor: item.color,
+                    border: `2px solid ${item.color}`,
+                  }}
+                />
+                <span className="legend-label">{item.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Panel>
+  );
+}