@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FilterRuleEditor/FilterRuleEditor.stories.tsx

@@ -0,0 +1,462 @@
+/**
+ * FilterRuleEditor Storybook Stories
+ *
+ * Demonstrates the BRUTALLY GENERIC filter rule builder across different domains.
+ */
+
+import { useState } from 'react';
+import { FilterRuleEditor } from './FilterRuleEditor';
+import { FilterRule, FilterLogic, FieldDefinition } from '../../types';
+
+export default {
+  title: 'Components/FilterRuleEditor',
+  component: FilterRuleEditor,
+};
+
+// ============================================================================
+// Investor Field Registry
+// ============================================================================
+
+const investorFields: FieldDefinition[] = [
+  {
+    name: 'name',
+    label: 'Name',
+    type: 'string',
+    category: 'Profile',
+    operators: ['eq', 'ne', 'contains', 'startswith', 'isnotnull'],
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    type: 'string',
+    category: 'Profile',
+    operators: ['eq', 'contains', 'isnotnull'],
+  },
+  {
+    name: 'firm.name',
+    label: 'Firm Name',
+    type: 'string',
+    category: 'Investment',
+    operators: ['eq', 'contains', 'startswith'],
+  },
+  {
+    name: 'firm.stage',
+    label: 'Firm Stage',
+    type: 'string',
+    category: 'Investment',
+    operators: ['eq', 'ne', 'in'],
+    constraints: {
+      choices: ['Pre-Seed', 'Seed', 'Series A', 'Series B', 'Series C', 'Growth', 'Late Stage'],
+    },
+  },
+  {
+    name: 'firm.check_size_min',
+    label: 'Check Size Min ($)',
+    type: 'number',
+    category: 'Investment',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0 },
+  },
+  {
+    name: 'firm.check_size_max',
+    label: 'Check Size Max ($)',
+    type: 'number',
+    category: 'Investment',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0 },
+  },
+  {
+    name: 'metrics.icp_score',
+    label: 'ICP Score',
+    type: 'number',
+    category: 'Metrics',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0, max_value: 100 },
+  },
+  {
+    name: 'metrics.aum_usd',
+    label: 'AUM (USD)',
+    type: 'number',
+    category: 'Metrics',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0 },
+  },
+  {
+    name: 'tags',
+    label: 'Tags',
+    type: 'tag',
+    category: 'Metadata',
+    operators: ['has_tag', 'not_has_tag'],
+  },
+  {
+    name: 'last_contact_date',
+    label: 'Last Contact Date',
+    type: 'date',
+    category: 'Engagement',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+  },
+];
+
+// ============================================================================
+// Recipe Field Registry
+// ============================================================================
+
+const recipeFields: FieldDefinition[] = [
+  {
+    name: 'title',
+    label: 'Recipe Title',
+    type: 'string',
+    category: 'Basic Info',
+    operators: ['eq', 'contains', 'startswith'],
+  },
+  {
+    name: 'description',
+    label: 'Description',
+    type: 'string',
+    category: 'Basic Info',
+    operators: ['contains'],
+  },
+  {
+    name: 'cuisine',
+    label: 'Cuisine',
+    type: 'string',
+    category: 'Classification',
+    operators: ['eq', 'in'],
+    constraints: {
+      choices: ['Italian', 'French', 'Chinese', 'Japanese', 'Mexican', 'Indian', 'Thai', 'Greek'],
+    },
+  },
+  {
+    name: 'difficulty',
+    label: 'Difficulty Level',
+    type: 'string',
+    category: 'Classification',
+    operators: ['eq', 'in'],
+    constraints: {
+      choices: ['Easy', 'Medium', 'Hard', 'Expert'],
+    },
+  },
+  {
+    name: 'prep_time_minutes',
+    label: 'Prep Time (min)',
+    type: 'number',
+    category: 'Time',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0 },
+  },
+  {
+    name: 'cook_time_minutes',
+    label: 'Cook Time (min)',
+    type: 'number',
+    category: 'Time',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 0 },
+  },
+  {
+    name: 'servings',
+    label: 'Servings',
+    type: 'number',
+    category: 'Yield',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+    constraints: { min_value: 1 },
+  },
+  {
+    name: 'is_vegetarian',
+    label: 'Vegetarian',
+    type: 'boolean',
+    category: 'Dietary',
+    operators: ['eq', 'is_true', 'is_false'],
+  },
+  {
+    name: 'is_vegan',
+    label: 'Vegan',
+    type: 'boolean',
+    category: 'Dietary',
+    operators: ['eq', 'is_true', 'is_false'],
+  },
+  {
+    name: 'is_gluten_free',
+    label: 'Gluten Free',
+    type: 'boolean',
+    category: 'Dietary',
+    operators: ['eq', 'is_true', 'is_false'],
+  },
+  {
+    name: 'created_at',
+    label: 'Created Date',
+    type: 'date',
+    category: 'Metadata',
+    operators: ['eq', 'ne', 'gt', 'lt', 'gte', 'lte'],
+  },
+];
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Empty state - no rules yet
+ */
+export const Empty = () => {
+  const [rules, setRules] = useState<FilterRule[]>([]);
+  const [logic, setLogic] = useState<FilterLogic>('AND');
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <h2 className="text-2xl font-bold mb-4">Empty Filter Editor</h2>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={investorFields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs">
+        {JSON.stringify({ logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/**
+ * Investor filters - find high-fit Series A investors
+ */
+export const InvestorFilters = () => {
+  const [rules, setRules] = useState<FilterRule[]>([
+    {
+      field_path: 'firm.stage',
+      operator: 'in',
+      value: ['Series A', 'Series B'],
+    },
+    {
+      field_path: 'firm.check_size_min',
+      operator: 'gte',
+      value: 500000,
+    },
+    {
+      field_path: 'metrics.icp_score',
+      operator: 'gte',
+      value: 70,
+    },
+  ]);
+  const [logic, setLogic] = useState<FilterLogic>('AND');
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <h2 className="text-2xl font-bold mb-4">Investor Filters</h2>
+      <p className="text-gray-600 mb-6">
+        Find Series A/B investors with min $500K check size and ICP score 70+
+      </p>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={investorFields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">
+        {JSON.stringify({ logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/**
+ * Recipe filters - find quick vegetarian recipes
+ */
+export const RecipeFilters = () => {
+  const [rules, setRules] = useState<FilterRule[]>([
+    {
+      field_path: 'cuisine',
+      operator: 'in',
+      value: ['Italian', 'French', 'Japanese'],
+    },
+    {
+      field_path: 'difficulty',
+      operator: 'eq',
+      value: 'Easy',
+    },
+    {
+      field_path: 'prep_time_minutes',
+      operator: 'lte',
+      value: 30,
+    },
+    {
+      field_path: 'is_vegetarian',
+      operator: 'is_true',
+      value: null,
+    },
+  ]);
+  const [logic, setLogic] = useState<FilterLogic>('AND');
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <h2 className="text-2xl font-bold mb-4">Recipe Filters</h2>
+      <p className="text-gray-600 mb-6">
+        Find easy vegetarian recipes from Italian/French/Japanese cuisine, under 30 min prep
+      </p>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={recipeFields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">
+        {JSON.stringify({ logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/**
+ * OR logic - flexible matching
+ */
+export const OrLogic = () => {
+  const [rules, setRules] = useState<FilterRule[]>([
+    {
+      field_path: 'name',
+      operator: 'contains',
+      value: 'Ventures',
+    },
+    {
+      field_path: 'tags',
+      operator: 'has_tag',
+      value: 'hot-lead',
+    },
+    {
+      field_path: 'metrics.icp_score',
+      operator: 'gte',
+      value: 90,
+    },
+  ]);
+  const [logic, setLogic] = useState<FilterLogic>('OR');
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <h2 className="text-2xl font-bold mb-4">OR Logic Example</h2>
+      <p className="text-gray-600 mb-6">
+        Match if name contains "Ventures" OR has "hot-lead" tag OR ICP score is 90+
+      </p>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={investorFields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">
+        {JSON.stringify({ logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/**
+ * Complex filters - many rules
+ */
+export const ComplexFilters = () => {
+  const [rules, setRules] = useState<FilterRule[]>([
+    {
+      field_path: 'firm.stage',
+      operator: 'in',
+      value: ['Series A', 'Series B', 'Series C'],
+    },
+    {
+      field_path: 'firm.check_size_min',
+      operator: 'gte',
+      value: 1000000,
+    },
+    {
+      field_path: 'firm.check_size_max',
+      operator: 'lte',
+      value: 10000000,
+    },
+    {
+      field_path: 'metrics.icp_score',
+      operator: 'gte',
+      value: 80,
+    },
+    {
+      field_path: 'metrics.aum_usd',
+      operator: 'gte',
+      value: 100000000,
+    },
+    {
+      field_path: 'email',
+      operator: 'isnotnull',
+      value: null,
+    },
+  ]);
+  const [logic, setLogic] = useState<FilterLogic>('AND');
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <h2 className="text-2xl font-bold mb-4">Complex Filters</h2>
+      <p className="text-gray-600 mb-6">
+        Multiple conditions: stage, check size range, ICP score, AUM, and email presence
+      </p>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={investorFields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto max-h-96">
+        {JSON.stringify({ logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/**
+ * Interactive playground
+ */
+export const Playground = () => {
+  const [rules, setRules] = useState<FilterRule[]>([]);
+  const [logic, setLogic] = useState<FilterLogic>('AND');
+  const [domain, setDomain] = useState<'investor' | 'recipe'>('investor');
+
+  const fields = domain === 'investor' ? investorFields : recipeFields;
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-2xl font-bold">Filter Builder Playground</h2>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setDomain('investor')}
+            className={`px-4 py-2 rounded ${
+              domain === 'investor'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-200 text-gray-700'
+            }`}
+          >
+            Investor Domain
+          </button>
+          <button
+            onClick={() => setDomain('recipe')}
+            className={`px-4 py-2 rounded ${
+              domain === 'recipe'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-200 text-gray-700'
+            }`}
+          >
+            Recipe Domain
+          </button>
+        </div>
+      </div>
+      <FilterRuleEditor
+        rules={rules}
+        onChange={setRules}
+        fieldRegistry={fields}
+        logic={logic}
+        onLogicChange={setLogic}
+      />
+      <pre className="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto max-h-96">
+        {JSON.stringify({ domain, logic, rules }, null, 2)}
+      </pre>
+    </div>
+  );
+};