@startsimpli/funnels 0.1.3 → 0.1.5

package/src/store/types.ts

@@ -0,0 +1,294 @@
+/**
+ * Store types for @startsimpli/funnels
+ *
+ * Generic Zustand store for managing funnel state.
+ * Works with any entity type - no product-specific logic.
+ */
+
+import type {
+  Funnel,
+  FunnelStage,
+  FunnelRun,
+  CreateFunnelInput,
+  UpdateFunnelInput,
+  CreateStageInput,
+  UpdateStageInput,
+} from '../types';
+
+import type {
+  FunnelListFilters,
+  PaginatedResponse,
+} from '../api/client';
+
+/**
+ * Store state interface
+ *
+ * Generic over entity type TEntity
+ */
+export interface FunnelStore<TEntity = any> {
+  // ============================================================================
+  // Data State
+  // ============================================================================
+
+  /** All loaded funnels */
+  funnels: Funnel<TEntity>[];
+
+  /** Currently selected funnel */
+  selectedFunnel: Funnel<TEntity> | null;
+
+  /** Currently selected stage (for editing) */
+  selectedStage: FunnelStage<TEntity> | null;
+
+  /** Funnel runs for selected funnel */
+  runs: FunnelRun[];
+
+  /** Pagination info */
+  pagination: {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    currentPage: number;
+    pageSize: number;
+  };
+
+  // ============================================================================
+  // UI State
+  // ============================================================================
+
+  /** Loading state */
+  isLoading: boolean;
+
+  /** Error state */
+  error: Error | null;
+
+  /** Dirty flag - unsaved changes */
+  isDirty: boolean;
+
+  /** Optimistic update rollback state */
+  rollbackState: {
+    funnels: Funnel<TEntity>[];
+    selectedFunnel: Funnel<TEntity> | null;
+  } | null;
+
+  // ============================================================================
+  // Funnel Actions
+  // ============================================================================
+
+  /**
+   * Load funnels with optional filters
+   *
+   * @param filters - Optional filters (status, owner, pagination, etc)
+   */
+  loadFunnels: (filters?: FunnelListFilters) => Promise<void>;
+
+  /**
+   * Select funnel for editing
+   *
+   * @param id - Funnel ID
+   */
+  selectFunnel: (id: string | null) => void;
+
+  /**
+   * Create new funnel
+   *
+   * @param data - Funnel creation data
+   * @returns Created funnel
+   */
+  createFunnel: (data: CreateFunnelInput<TEntity>) => Promise<Funnel<TEntity>>;
+
+  /**
+   * Update funnel (optimistic update)
+   *
+   * @param id - Funnel ID
+   * @param data - Update data
+   * @returns Updated funnel
+   */
+  updateFunnel: (
+    id: string,
+    data: Partial<UpdateFunnelInput<TEntity>>
+  ) => Promise<Funnel<TEntity>>;
+
+  /**
+   * Delete funnel (optimistic update)
+   *
+   * @param id - Funnel ID
+   */
+  deleteFunnel: (id: string) => Promise<void>;
+
+  /**
+   * Duplicate funnel
+   *
+   * @param id - Funnel ID to duplicate
+   * @returns New funnel
+   */
+  duplicateFunnel: (id: string) => Promise<Funnel<TEntity>>;
+
+  // ============================================================================
+  // Stage Actions
+  // ============================================================================
+
+  /**
+   * Select stage for editing
+   *
+   * @param stageId - Stage ID (null to clear selection)
+   */
+  selectStage: (stageId: string | null) => void;
+
+  /**
+   * Create new stage in funnel
+   *
+   * @param funnelId - Funnel ID
+   * @param data - Stage creation data
+   * @returns Created stage
+   */
+  createStage: (
+    funnelId: string,
+    data: CreateStageInput<TEntity>
+  ) => Promise<FunnelStage<TEntity>>;
+
+  /**
+   * Update stage (optimistic update)
+   *
+   * @param funnelId - Funnel ID
+   * @param stageId - Stage ID
+   * @param data - Update data
+   * @returns Updated stage
+   */
+  updateStage: (
+    funnelId: string,
+    stageId: string,
+    data: Partial<UpdateStageInput<TEntity>>
+  ) => Promise<FunnelStage<TEntity>>;
+
+  /**
+   * Delete stage (optimistic update)
+   *
+   * @param funnelId - Funnel ID
+   * @param stageId - Stage ID
+   */
+  deleteStage: (funnelId: string, stageId: string) => Promise<void>;
+
+  /**
+   * Reorder stages (optimistic update)
+   *
+   * @param funnelId - Funnel ID
+   * @param stageIds - New order of stage IDs
+   */
+  reorderStages: (funnelId: string, stageIds: string[]) => Promise<void>;
+
+  // ============================================================================
+  // Run Actions
+  // ============================================================================
+
+  /**
+   * Run funnel
+   *
+   * @param id - Funnel ID
+   * @param options - Run options
+   * @returns Created run
+   */
+  runFunnel: (
+    id: string,
+    options?: {
+      trigger_type?: 'manual' | 'scheduled' | 'webhook' | 'api';
+      metadata?: Record<string, any>;
+    }
+  ) => Promise<FunnelRun>;
+
+  /**
+   * Load funnel runs
+   *
+   * @param funnelId - Funnel ID
+   * @param filters - Optional filters
+   */
+  loadRuns: (
+    funnelId: string,
+    filters?: {
+      status?: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+      page?: number;
+      page_size?: number;
+    }
+  ) => Promise<void>;
+
+  /**
+   * Cancel running funnel
+   *
+   * @param runId - Run ID
+   */
+  cancelRun: (runId: string) => Promise<FunnelRun>;
+
+  // ============================================================================
+  // UI State Actions
+  // ============================================================================
+
+  /**
+   * Set dirty flag
+   *
+   * @param dirty - Dirty state
+   */
+  setDirty: (dirty: boolean) => void;
+
+  /**
+   * Clear error
+   */
+  clearError: () => void;
+
+  /**
+   * Reset store to initial state
+   */
+  reset: () => void;
+
+  // ============================================================================
+  // Internal Actions (for optimistic updates)
+  // ============================================================================
+
+  /**
+   * Save current state for rollback
+   * @internal
+   */
+  _saveRollbackState: () => void;
+
+  /**
+   * Rollback to saved state
+   * @internal
+   */
+  _rollback: () => void;
+
+  /**
+   * Clear rollback state
+   * @internal
+   */
+  _clearRollback: () => void;
+}
+
+/**
+ * Initial state factory
+ */
+export const createInitialState = <TEntity = any>(): Pick<
+  FunnelStore<TEntity>,
+  | 'funnels'
+  | 'selectedFunnel'
+  | 'selectedStage'
+  | 'runs'
+  | 'pagination'
+  | 'isLoading'
+  | 'error'
+  | 'isDirty'
+  | 'rollbackState'
+> => ({
+  funnels: [],
+  selectedFunnel: null,
+  selectedStage: null,
+  runs: [],
+  pagination: {
+    count: 0,
+    next: null,
+    previous: null,
+    currentPage: 1,
+    pageSize: 20,
+  },
+  isLoading: false,
+  error: null,
+  isDirty: false,
+  rollbackState: null,
+});

package/src/stories/CrossDomain.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FunnelCard } from '../components/FunnelCard/FunnelCard';
+import {
+  investorFields,
+  investorFunnelExample,
+  recipeFields,
+  recipeFunnelExample,
+  leadFields,
+  leadFunnelExample,
+} from './demo-data';
+
+const meta: Meta = {
+  title: 'Cross-Domain/Works with ANY Entity Type',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Demonstrates that @startsimpli/funnels works with ANY entity type - investors, recipes, leads, or whatever you need!',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FunnelCard>;
+
+export const InvestorFunnel: Story = {
+  render: () => (
+    <div style={{ padding: '2rem' }}>
+      <h2 style={{ marginBottom: '1rem' }}>Investor Filtering Funnel</h2>
+      <p style={{ color: '#666', marginBottom: '2rem' }}>
+        Target high-priority seed-stage VCs with strong SaaS focus and recent engagement
+      </p>
+      <FunnelCard
+        funnel={investorFunnelExample}
+        onEdit={() => console.log('Edit investor funnel')}
+        onRun={() => console.log('Run investor funnel')}
+        onDelete={() => console.log('Delete investor funnel')}
+      />
+      <div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f9fafb', borderRadius: '8px' }}>
+        <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Available Fields:</h3>
+        <ul style={{ fontSize: '0.875rem', lineHeight: '1.6' }}>
+          {investorFields.map((field) => (
+            <li key={field.name}>
+              <strong>{field.label}</strong> ({field.type}) - {field.description}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  ),
+};
+
+export const RecipeFunnel: Story = {
+  render: () => (
+    <div style={{ padding: '2rem' }}>
+      <h2 style={{ marginBottom: '1rem' }}>Recipe Filtering Funnel</h2>
+      <p style={{ color: '#666', marginBottom: '2rem' }}>
+        Find quick, healthy, easy recipes with high ratings
+      </p>
+      <FunnelCard
+        funnel={recipeFunnelExample}
+        onEdit={() => console.log('Edit recipe funnel')}
+        onRun={() => console.log('Run recipe funnel')}
+        onDelete={() => console.log('Delete recipe funnel')}
+      />
+      <div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f9fafb', borderRadius: '8px' }}>
+        <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Available Fields:</h3>
+        <ul style={{ fontSize: '0.875rem', lineHeight: '1.6' }}>
+          {recipeFields.map((field) => (
+            <li key={field.name}>
+              <strong>{field.label}</strong> ({field.type}) - {field.description}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  ),
+};
+
+export const LeadScoringFunnel: Story = {
+  render: () => (
+    <div style={{ padding: '2rem' }}>
+      <h2 style={{ marginBottom: '1rem' }}>Lead Scoring Funnel</h2>
+      <p style={{ color: '#666', marginBottom: '2rem' }}>
+        Target high-value enterprise leads with strong engagement
+      </p>
+      <FunnelCard
+        funnel={leadFunnelExample}
+        onEdit={() => console.log('Edit lead funnel')}
+        onRun={() => console.log('Run lead funnel')}
+        onDelete={() => console.log('Delete lead funnel')}
+      />
+      <div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f9fafb', borderRadius: '8px' }}>
+        <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Available Fields:</h3>
+        <ul style={{ fontSize: '0.875rem', lineHeight: '1.6' }}>
+          {leadFields.map((field) => (
+            <li key={field.name}>
+              <strong>{field.label}</strong> ({field.type}) - {field.description}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  ),
+};
+
+export const SideBySideComparison: Story = {
+  render: () => (
+    <div style={{ padding: '2rem' }}>
+      <h2 style={{ marginBottom: '1rem' }}>Side-by-Side: Same Component, Different Domains</h2>
+      <p style={{ color: '#666', marginBottom: '2rem' }}>
+        The exact same FunnelCard component works seamlessly across all entity types
+      </p>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
+        <div>
+          <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Investors</h3>
+          <FunnelCard
+            funnel={investorFunnelExample}
+            onEdit={() => console.log('Edit')}
+          />
+        </div>
+        <div>
+          <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Recipes</h3>
+          <FunnelCard
+            funnel={recipeFunnelExample}
+            onEdit={() => console.log('Edit')}
+          />
+        </div>
+        <div>
+          <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>Leads</h3>
+          <FunnelCard
+            funnel={leadFunnelExample}
+            onEdit={() => console.log('Edit')}
+          />
+        </div>
+      </div>
+      <div style={{
+        marginTop: '2rem',
+        padding: '1rem',
+        backgroundColor: '#ecfdf5',
+        borderLeft: '4px solid #10b981',
+        borderRadius: '4px'
+      }}>
+        <strong>That's the power of brutal genericity!</strong> The same component adapts to any domain.
+      </div>
+    </div>
+  ),
+};

package/src/stories/Welcome.stories.tsx

@@ -0,0 +1,81 @@
+export default {
+  title: 'Welcome to @startsimpli/funnels',
+};
+
+export const Introduction = () => (
+  <div style={{ padding: '2rem', maxWidth: '800px', fontFamily: 'system-ui, sans-serif' }}>
+    <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>@startsimpli/funnels</h1>
+    <p style={{ fontSize: '1.2rem', color: '#666', marginBottom: '2rem' }}>
+      Brutally generic filtering pipeline package for any Simpli product.
+    </p>
+
+    <h2 style={{ fontSize: '1.8rem', marginTop: '2rem', marginBottom: '1rem' }}>What is this?</h2>
+    <p style={{ lineHeight: '1.6', marginBottom: '1rem' }}>
+      A reusable package for building multi-stage filtering funnels that work with ANY entity type.
+      Create visual, interactive pipelines to filter and segment your data.
+    </p>
+
+    <h2 style={{ fontSize: '1.8rem', marginTop: '2rem', marginBottom: '1rem' }}>Why "brutally generic"?</h2>
+    <p style={{ lineHeight: '1.6', marginBottom: '1rem' }}>
+      This package doesn't care what you're filtering. It works equally well for:
+    </p>
+    <ul style={{ lineHeight: '1.8', marginLeft: '2rem', marginBottom: '1rem' }}>
+      <li>Investors and VC firms</li>
+      <li>Recipes and cooking content</li>
+      <li>Leads and sales prospects</li>
+      <li>Tasks and project items</li>
+      <li>...whatever entity type you need!</li>
+    </ul>
+
+    <h2 style={{ fontSize: '1.8rem', marginTop: '2rem', marginBottom: '1rem' }}>Key Features</h2>
+    <ul style={{ lineHeight: '1.8', marginLeft: '2rem', marginBottom: '1rem' }}>
+      <li><strong>Multi-stage filtering:</strong> Build complex pipelines with multiple stages</li>
+      <li><strong>Visual flow diagrams:</strong> See your funnel logic at a glance</li>
+      <li><strong>Dynamic rule builder:</strong> Create AND/OR logic without writing code</li>
+      <li><strong>Live preview:</strong> See matches in real-time as you build</li>
+      <li><strong>Run history:</strong> Track funnel executions and results</li>
+      <li><strong>Type-safe:</strong> Full TypeScript support</li>
+    </ul>
+
+    <h2 style={{ fontSize: '1.8rem', marginTop: '2rem', marginBottom: '1rem' }}>Explore the Components</h2>
+    <div style={{ display: 'grid', gap: '1rem', marginTop: '1rem' }}>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FunnelCard</strong> - Visual funnel cards with stats and status
+      </div>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FunnelStageBuilder</strong> - Drag-and-drop stage editor
+      </div>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FilterRuleEditor</strong> - Dynamic rule builder with field selection
+      </div>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FunnelPreview</strong> - Live preview of matches with sample data
+      </div>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FunnelVisualFlow</strong> - Interactive flow diagram
+      </div>
+      <div style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <strong>FunnelRunHistory</strong> - Track execution history and results
+      </div>
+    </div>
+
+    <h2 style={{ fontSize: '1.8rem', marginTop: '2rem', marginBottom: '1rem' }}>Getting Started</h2>
+    <p style={{ lineHeight: '1.6', marginBottom: '1rem' }}>
+      Check out the <strong>Cross-Domain</strong> stories to see how the same components work
+      with completely different entity types (investors, recipes, leads).
+    </p>
+    <p style={{ lineHeight: '1.6', marginBottom: '1rem' }}>
+      Then explore individual component stories to see all the features and variants.
+    </p>
+
+    <div style={{
+      marginTop: '2rem',
+      padding: '1rem',
+      backgroundColor: '#f0f9ff',
+      borderLeft: '4px solid #0284c7',
+      borderRadius: '4px'
+    }}>
+      <strong>Pro Tip:</strong> Use the Controls panel to interact with component props in real-time!
+    </div>
+  </div>
+);

package/src/stories/demo-data/index.ts

@@ -0,0 +1,3 @@
+export * from './investors';
+export * from './recipes';
+export * from './leads';