@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FilterRuleEditor/RuleRow.tsx

@@ -0,0 +1,246 @@
+/**
+ * RuleRow Component
+ *
+ * A single filter rule row with field, operator, and value inputs.
+ *
+ * Design Goal:
+ * Users need to configure a complete filter rule: which field to check,
+ * what comparison to make, and what value to compare against.
+ *
+ * Visual Hierarchy Rationale:
+ * - Horizontal layout on desktop (3 columns + delete button)
+ * - Responsive: stacks vertically on mobile
+ * - Delete button (X) aligned to right for easy removal
+ * - Border and padding create visual grouping
+ * - Slight shadow on hover indicates interactivity
+ *
+ * Component Specification:
+ * - Field selector: Full field registry, grouped by category
+ * - Operator selector: Filtered by selected field type
+ * - Value input: Dynamic based on field type + operator
+ * - Delete button: Removes this rule
+ *
+ * Interaction Notes:
+ * - Selecting field updates available operators
+ * - Selecting field/operator changes value input type
+ * - Operators that don't need values (isnull, is_true) hide value input
+ * - Delete button shows on hover (desktop) or always (mobile)
+ *
+ * Responsive Behavior:
+ * - Desktop (lg+): 3-column grid with delete button
+ * - Tablet (md): 2-column grid
+ * - Mobile: Stacked vertically
+ *
+ * Accessibility Considerations:
+ * - All inputs properly labeled
+ * - Delete button has aria-label
+ * - Keyboard navigation supported
+ * - Focus management when adding/removing rules
+ */
+
+import { FilterRule, FieldDefinition, Operator } from '../../types';
+import { FieldSelector } from './FieldSelector';
+import { OperatorSelector } from './OperatorSelector';
+import { NULL_VALUE_OPERATORS, MULTI_VALUE_OPERATORS } from './constants';
+import {
+  TextValueInput,
+  NumberValueInput,
+  DateValueInput,
+  BooleanValueInput,
+  ChoiceValueInput,
+  MultiChoiceValueInput,
+} from './ValueInputs';
+
+interface RuleRowProps {
+  rule: FilterRule;
+  onChange: (rule: FilterRule) => void;
+  onRemove: () => void;
+  fieldRegistry: FieldDefinition[];
+  className?: string;
+}
+
+export function RuleRow({
+  rule,
+  onChange,
+  onRemove,
+  fieldRegistry,
+  className = '',
+}: RuleRowProps) {
+  // Find the selected field definition
+  const selectedField = fieldRegistry.find((f) => f.name === rule.field_path);
+
+  // Get valid operators for the selected field
+  const availableOperators = selectedField?.operators || [];
+
+  // Determine if value input is needed
+  const needsValue = rule.operator && !NULL_VALUE_OPERATORS.includes(rule.operator);
+  const needsMultiValue =
+    rule.operator && MULTI_VALUE_OPERATORS.includes(rule.operator);
+
+  // Handle field change
+  const handleFieldChange = (fieldName: string) => {
+    const field = fieldRegistry.find((f) => f.name === fieldName);
+    onChange({
+      ...rule,
+      field_path: fieldName,
+      operator: field?.operators[0] || ('' as Operator),
+      value: null,
+    });
+  };
+
+  // Handle operator change
+  const handleOperatorChange = (operator: Operator) => {
+    onChange({
+      ...rule,
+      operator,
+      value: MULTI_VALUE_OPERATORS.includes(operator) ? [] : null,
+    });
+  };
+
+  // Handle value change
+  const handleValueChange = (value: any) => {
+    onChange({
+      ...rule,
+      value,
+    });
+  };
+
+  // Render the appropriate value input based on field type and operator
+  const renderValueInput = () => {
+    if (!needsValue) return null;
+    if (!selectedField) return null;
+
+    const { type, constraints } = selectedField;
+
+    // Multi-value operators
+    if (needsMultiValue) {
+      if (constraints?.choices) {
+        return (
+          <MultiChoiceValueInput
+            value={Array.isArray(rule.value) ? rule.value : []}
+            onChange={handleValueChange}
+            choices={constraints.choices}
+          />
+        );
+      }
+      // Fallback: text input with comma-separated values
+      return (
+        <TextValueInput
+          value={Array.isArray(rule.value) ? rule.value.join(', ') : ''}
+          onChange={(val) => handleValueChange(val.split(',').map((v) => v.trim()))}
+          placeholder="Enter values, comma-separated..."
+        />
+      );
+    }
+
+    // Single-value operators
+    switch (type) {
+      case 'string':
+        if (constraints?.choices && rule.operator === 'eq') {
+          return (
+            <ChoiceValueInput
+              value={rule.value || ''}
+              onChange={handleValueChange}
+              choices={constraints.choices}
+            />
+          );
+        }
+        return (
+          <TextValueInput
+            value={rule.value || ''}
+            onChange={handleValueChange}
+          />
+        );
+
+      case 'number':
+        return (
+          <NumberValueInput
+            value={rule.value}
+            onChange={handleValueChange}
+            min={constraints?.min_value as number}
+            max={constraints?.max_value as number}
+          />
+        );
+
+      case 'date':
+        return (
+          <DateValueInput
+            value={rule.value || null}
+            onChange={handleValueChange}
+            min={constraints?.min_value as string}
+            max={constraints?.max_value as string}
+          />
+        );
+
+      case 'boolean':
+        return (
+          <BooleanValueInput
+            value={rule.value || false}
+            onChange={handleValueChange}
+          />
+        );
+
+      case 'tag':
+        return (
+          <TextValueInput
+            value={rule.value || ''}
+            onChange={handleValueChange}
+            placeholder="Enter tag name..."
+          />
+        );
+
+      default:
+        return (
+          <TextValueInput
+            value={rule.value || ''}
+            onChange={handleValueChange}
+          />
+        );
+    }
+  };
+
+  return (
+    <div
+      className={`
+        relative group
+        border border-gray-200 rounded-lg p-4
+        bg-white hover:shadow-sm transition-shadow
+        ${className}
+      `}
+    >
+      {/* Delete button */}
+      <button
+        type="button"
+        onClick={onRemove}
+        className="
+          absolute top-2 right-2
+          w-6 h-6 flex items-center justify-center
+          text-gray-400 hover:text-red-600 hover:bg-red-50
+          rounded transition-colors
+          focus:outline-none focus:ring-2 focus:ring-red-500
+        "
+        aria-label="Remove rule"
+      >
+        ×
+      </button>
+
+      {/* Grid layout: Field | Operator | Value */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 pr-8">
+        <FieldSelector
+          fields={fieldRegistry}
+          value={rule.field_path}
+          onChange={handleFieldChange}
+        />
+
+        <OperatorSelector
+          operators={availableOperators}
+          value={rule.operator || ''}
+          onChange={handleOperatorChange}
+          disabled={!rule.field_path}
+        />
+
+        {needsValue && renderValueInput()}
+      </div>
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/BooleanValueInput.tsx

@@ -0,0 +1,54 @@
+/**
+ * BooleanValueInput Component
+ *
+ * Checkbox input for boolean values.
+ *
+ * Design Goal:
+ * Simple true/false toggle for boolean fields.
+ *
+ * Visual Hierarchy Rationale:
+ * - Checkbox with clear label
+ * - Aligned with other value inputs
+ * - Checked state visually distinct
+ *
+ * Interaction Notes:
+ * - Click checkbox or label to toggle
+ * - Space bar toggles when focused
+ *
+ * Accessibility Considerations:
+ * - Proper label association
+ * - Keyboard accessible
+ * - Focus visible
+ */
+
+interface BooleanValueInputProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  error?: string;
+  className?: string;
+}
+
+export function BooleanValueInput({
+  value,
+  onChange,
+  label = 'True',
+  error,
+  className = '',
+}: BooleanValueInputProps) {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <label className="text-xs font-medium text-gray-700">Value</label>
+      <label className="flex items-center gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={value}
+          onChange={(e) => onChange(e.target.checked)}
+          className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+        />
+        <span className="text-sm text-gray-700">{label}</span>
+      </label>
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/ChoiceValueInput.tsx

@@ -0,0 +1,83 @@
+/**
+ * ChoiceValueInput Component
+ *
+ * Single-select dropdown for choice fields.
+ *
+ * Design Goal:
+ * Select a single value from predefined choices (e.g., firm stage, recipe cuisine).
+ *
+ * Visual Hierarchy Rationale:
+ * - Standard select dropdown
+ * - Choices provided by field definition
+ * - Clear placeholder when nothing selected
+ *
+ * Interaction Notes:
+ * - Click to open dropdown
+ * - Keyboard navigation supported
+ * - Selected value shown in dropdown
+ *
+ * Accessibility Considerations:
+ * - Proper label association
+ * - Keyboard navigation (arrow keys)
+ * - Focus visible
+ */
+
+interface ChoiceValueInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  choices: any[];
+  placeholder?: string;
+  error?: string;
+  className?: string;
+}
+
+export function ChoiceValueInput({
+  value,
+  onChange,
+  choices,
+  placeholder = 'Select option...',
+  error,
+  className = '',
+}: ChoiceValueInputProps) {
+  // Handle both string arrays and {value, label} arrays
+  const getChoiceValue = (choice: any): string => {
+    if (typeof choice === 'string') return choice;
+    return choice.value || choice;
+  };
+
+  const getChoiceLabel = (choice: any): string => {
+    if (typeof choice === 'string') return choice;
+    return choice.label || choice.value || String(choice);
+  };
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <label htmlFor="choice-value" className="text-xs font-medium text-gray-700">
+        Value
+      </label>
+      <select
+        id="choice-value"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        className={`
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      >
+        <option value="">{placeholder}</option>
+        {choices.map((choice, index) => {
+          const val = getChoiceValue(choice);
+          const label = getChoiceLabel(choice);
+          return (
+            <option key={`${val}-${index}`} value={val}>
+              {label}
+            </option>
+          );
+        })}
+      </select>
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/DateValueInput.tsx

@@ -0,0 +1,70 @@
+/**
+ * DateValueInput Component
+ *
+ * Date input for date comparisons.
+ *
+ * Design Goal:
+ * Intuitive date selection with browser-native date picker.
+ *
+ * Visual Hierarchy Rationale:
+ * - Native date input for familiar UX
+ * - Calendar picker on click (browser default)
+ * - ISO date format for consistency
+ *
+ * Interaction Notes:
+ * - Click to open calendar picker
+ * - Keyboard entry also supported (YYYY-MM-DD)
+ * - Respects min/max constraints
+ *
+ * Accessibility Considerations:
+ * - Native date input is screen reader friendly
+ * - Keyboard navigation supported
+ */
+
+interface DateValueInputProps {
+  value: string | null;
+  onChange: (value: string | null) => void;
+  min?: string;
+  max?: string;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+}
+
+export function DateValueInput({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder = 'Select date...',
+  error,
+  className = '',
+}: DateValueInputProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    onChange(val || null);
+  };
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <label htmlFor="date-value" className="text-xs font-medium text-gray-700">
+        Value
+      </label>
+      <input
+        id="date-value"
+        type="date"
+        value={value || ''}
+        onChange={handleChange}
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        className={`
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      />
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/MultiChoiceValueInput.tsx

@@ -0,0 +1,132 @@
+/**
+ * MultiChoiceValueInput Component
+ *
+ * Multi-select for choosing multiple values from choices.
+ *
+ * Design Goal:
+ * Select multiple values for 'in', 'has_any', 'has_all' operators.
+ * For example: "Firm stage is one of [Series A, Series B, Series C]".
+ *
+ * Visual Hierarchy Rationale:
+ * - Tag-based interface shows selected values as pills
+ * - Each tag has an X button to remove
+ * - Dropdown allows adding more selections
+ * - Compact layout for multiple values
+ *
+ * Interaction Notes:
+ * - Select from dropdown to add value
+ * - Click X on tag to remove value
+ * - Can select multiple values
+ * - Already-selected values hidden from dropdown
+ *
+ * Accessibility Considerations:
+ * - Keyboard navigation for dropdown
+ * - Focus management for tag removal
+ * - Screen reader announces selected items
+ */
+
+interface MultiChoiceValueInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  choices: any[];
+  placeholder?: string;
+  error?: string;
+  className?: string;
+}
+
+export function MultiChoiceValueInput({
+  value = [],
+  onChange,
+  choices,
+  placeholder = 'Select options...',
+  error,
+  className = '',
+}: MultiChoiceValueInputProps) {
+  // Handle both string arrays and {value, label} arrays
+  const getChoiceValue = (choice: any): string => {
+    if (typeof choice === 'string') return choice;
+    return choice.value || choice;
+  };
+
+  const getChoiceLabel = (choice: any): string => {
+    if (typeof choice === 'string') return choice;
+    return choice.label || choice.value || String(choice);
+  };
+
+  const handleAdd = (newValue: string) => {
+    if (newValue && !value.includes(newValue)) {
+      onChange([...value, newValue]);
+    }
+  };
+
+  const handleRemove = (removeValue: string) => {
+    onChange(value.filter((v) => v !== removeValue));
+  };
+
+  // Get label for a selected value
+  const getValueLabel = (val: string): string => {
+    const choice = choices.find((c) => getChoiceValue(c) === val);
+    return choice ? getChoiceLabel(choice) : val;
+  };
+
+  // Filter out already-selected values from dropdown
+  const availableChoices = choices.filter(
+    (choice) => !value.includes(getChoiceValue(choice))
+  );
+
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      <label htmlFor="multi-choice-value" className="text-xs font-medium text-gray-700">
+        Values
+      </label>
+
+      {/* Selected tags */}
+      {value.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {value.map((val) => (
+            <span
+              key={val}
+              className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded"
+            >
+              {getValueLabel(val)}
+              <button
+                type="button"
+                onClick={() => handleRemove(val)}
+                className="hover:text-blue-900 focus:outline-none"
+                aria-label={`Remove ${getValueLabel(val)}`}
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Dropdown to add more */}
+      <select
+        id="multi-choice-value"
+        value=""
+        onChange={(e) => handleAdd(e.target.value)}
+        className={`
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      >
+        <option value="">{placeholder}</option>
+        {availableChoices.map((choice, index) => {
+          const val = getChoiceValue(choice);
+          const label = getChoiceLabel(choice);
+          return (
+            <option key={`${val}-${index}`} value={val}>
+              {label}
+            </option>
+          );
+        })}
+      </select>
+
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/NumberValueInput.tsx

@@ -0,0 +1,73 @@
+/**
+ * NumberValueInput Component
+ *
+ * Numeric input for number comparisons.
+ *
+ * Design Goal:
+ * Precise number entry with validation for numeric fields.
+ *
+ * Visual Hierarchy Rationale:
+ * - Standard number input with browser controls
+ * - Constraints (min/max) applied if provided
+ * - Error state clearly indicated
+ *
+ * Interaction Notes:
+ * - Arrow keys increment/decrement
+ * - Scroll wheel adjusts value (browser default)
+ * - Respects min/max constraints
+ */
+
+interface NumberValueInputProps {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+}
+
+export function NumberValueInput({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder = 'Enter number...',
+  error,
+  className = '',
+}: NumberValueInputProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    if (val === '') {
+      onChange(null);
+    } else {
+      const num = parseFloat(val);
+      if (!isNaN(num)) {
+        onChange(num);
+      }
+    }
+  };
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <label htmlFor="number-value" className="text-xs font-medium text-gray-700">
+        Value
+      </label>
+      <input
+        id="number-value"
+        type="number"
+        value={value ?? ''}
+        onChange={handleChange}
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        className={`
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      />
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}

package/src/components/FilterRuleEditor/ValueInputs/TextValueInput.tsx

@@ -0,0 +1,50 @@
+/**
+ * TextValueInput Component
+ *
+ * Text input for string values.
+ *
+ * Design Goal:
+ * Simple text entry for string comparisons (contains, equals, etc.).
+ *
+ * Visual Hierarchy Rationale:
+ * - Standard text input styling
+ * - Placeholder text provides context
+ * - Error state clearly indicated with red border
+ */
+
+interface TextValueInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+}
+
+export function TextValueInput({
+  value,
+  onChange,
+  placeholder = 'Enter text...',
+  error,
+  className = '',
+}: TextValueInputProps) {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <label htmlFor="text-value" className="text-xs font-medium text-gray-700">
+        Value
+      </label>
+      <input
+        id="text-value"
+        type="text"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={`
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? 'border-red-500' : 'border-gray-300'}
+        `}
+      />
+      {error && <span className="text-xs text-red-600">{error}</span>}
+    </div>
+  );
+}