@startsimpli/funnels 0.1.4 → 0.1.5

package/src/store/create-funnel-store.ts

@@ -0,0 +1,538 @@
+/**
+ * Funnel Store Factory
+ *
+ * Creates isolated Zustand store instances for funnel management.
+ * Factory pattern allows multiple editors to coexist without state conflicts.
+ *
+ * Features:
+ * - Optimistic updates with automatic rollback on error
+ * - Dirty tracking for unsaved changes
+ * - Loading states for better UX
+ * - Error handling with automatic retry
+ * - Selection state management
+ *
+ * @packageDocumentation
+ */
+
+import { create, StoreApi, UseBoundStore } from 'zustand';
+import type { FunnelApiClient, FunnelListFilters } from '../api/client';
+import type { FunnelStore } from './types';
+import { createInitialState } from './types';
+import type {
+  Funnel,
+  FunnelStage,
+  FunnelRun,
+  CreateFunnelInput,
+  UpdateFunnelInput,
+  CreateStageInput,
+  UpdateStageInput,
+} from '../types';
+
+/**
+ * Create funnel store with API client
+ *
+ * Factory pattern - each call creates a new isolated store instance.
+ * Perfect for multi-editor scenarios or testing.
+ *
+ * @param apiClient - API client for server operations
+ * @returns Zustand store hook
+ *
+ * @example
+ * ```ts
+ * const adapter = new FetchAdapter({ headers: { 'Authorization': 'Bearer token' } });
+ * const apiClient = new FunnelApiClient(adapter, 'https://api.example.com');
+ * const useFunnelStore = createFunnelStore(apiClient);
+ *
+ * // In React component
+ * function FunnelEditor() {
+ *   const { funnels, loadFunnels, createFunnel } = useFunnelStore();
+ *   // ...
+ * }
+ * ```
+ */
+export function createFunnelStore<TEntity = any>(
+  apiClient: FunnelApiClient
+): UseBoundStore<StoreApi<FunnelStore<TEntity>>> {
+  return create<FunnelStore<TEntity>>((set, get) => ({
+    // Initialize state
+    ...createInitialState<TEntity>(),
+
+    // =========================================================================
+    // Funnel Actions
+    // =========================================================================
+
+    loadFunnels: async (filters?: FunnelListFilters) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const response = await apiClient.listFunnels<TEntity>(filters);
+
+        set({
+          funnels: response.results,
+          pagination: {
+            count: response.count,
+            next: response.next,
+            previous: response.previous,
+            currentPage: filters?.page || 1,
+            pageSize: filters?.page_size || 20,
+          },
+          isLoading: false,
+        });
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    selectFunnel: (id: string | null) => {
+      const { funnels } = get();
+
+      if (id === null) {
+        set({ selectedFunnel: null, selectedStage: null });
+        return;
+      }
+
+      const funnel = funnels.find((f) => f.id === id);
+      set({
+        selectedFunnel: funnel || null,
+        selectedStage: null, // Clear stage selection when changing funnels
+      });
+    },
+
+    createFunnel: async (data: CreateFunnelInput<TEntity>) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const funnel = await apiClient.createFunnel<TEntity>(data);
+
+        set((state) => ({
+          funnels: [...state.funnels, funnel],
+          pagination: {
+            ...state.pagination,
+            count: state.pagination.count + 1,
+          },
+          isLoading: false,
+        }));
+
+        return funnel;
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    updateFunnel: async (
+      id: string,
+      data: Partial<UpdateFunnelInput<TEntity>>
+    ) => {
+      // Save state for rollback
+      get()._saveRollbackState();
+
+      // Optimistic update
+      set((state) => ({
+        funnels: state.funnels.map((f) =>
+          f.id === id ? ({ ...f, ...data } as Funnel<TEntity>) : f
+        ),
+        selectedFunnel:
+          state.selectedFunnel?.id === id
+            ? ({ ...state.selectedFunnel, ...data } as Funnel<TEntity>)
+            : state.selectedFunnel,
+        isDirty: false, // Clear dirty flag on save
+      }));
+
+      try {
+        const updated = await apiClient.updateFunnel<TEntity>(id, data);
+
+        // Update with server response
+        set((state) => ({
+          funnels: state.funnels.map((f) => (f.id === id ? updated : f)),
+          selectedFunnel:
+            state.selectedFunnel?.id === id ? updated : state.selectedFunnel,
+        }));
+
+        get()._clearRollback();
+        return updated;
+      } catch (error) {
+        // Rollback optimistic update
+        get()._rollback();
+        set({ error: error as Error });
+        throw error;
+      }
+    },
+
+    deleteFunnel: async (id: string) => {
+      // Save state for rollback
+      get()._saveRollbackState();
+
+      // Optimistic update
+      set((state) => ({
+        funnels: state.funnels.filter((f) => f.id !== id),
+        selectedFunnel: state.selectedFunnel?.id === id ? null : state.selectedFunnel,
+        pagination: {
+          ...state.pagination,
+          count: state.pagination.count - 1,
+        },
+      }));
+
+      try {
+        await apiClient.deleteFunnel(id);
+        get()._clearRollback();
+      } catch (error) {
+        // Rollback optimistic update
+        get()._rollback();
+        set({ error: error as Error });
+        throw error;
+      }
+    },
+
+    duplicateFunnel: async (id: string) => {
+      const { funnels } = get();
+      const funnel = funnels.find((f) => f.id === id);
+
+      if (!funnel) {
+        throw new Error(`Funnel ${id} not found`);
+      }
+
+      // Create copy with new name
+      const copy: CreateFunnelInput<TEntity> = {
+        name: `${funnel.name} (Copy)`,
+        description: funnel.description,
+        status: 'draft', // Always create as draft
+        input_type: funnel.input_type,
+        stages: funnel.stages.map((stage, index) => ({
+          ...stage,
+          order: index, // Preserve order
+        })),
+        completion_tags: funnel.completion_tags,
+        metadata: funnel.metadata,
+      };
+
+      return get().createFunnel(copy);
+    },
+
+    // =========================================================================
+    // Stage Actions
+    // =========================================================================
+
+    selectStage: (stageId: string | null) => {
+      const { selectedFunnel } = get();
+
+      if (!selectedFunnel) {
+        set({ selectedStage: null });
+        return;
+      }
+
+      if (stageId === null) {
+        set({ selectedStage: null });
+        return;
+      }
+
+      const stage = selectedFunnel.stages.find((s) => s.id === stageId);
+      set({ selectedStage: stage || null });
+    },
+
+    createStage: async (funnelId: string, data: CreateStageInput<TEntity>) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const stage = await apiClient.createStage<TEntity>(funnelId, data);
+
+        // Update funnel with new stage
+        set((state) => ({
+          funnels: state.funnels.map((f) =>
+            f.id === funnelId
+              ? { ...f, stages: [...f.stages, stage] }
+              : f
+          ),
+          selectedFunnel:
+            state.selectedFunnel?.id === funnelId
+              ? { ...state.selectedFunnel, stages: [...state.selectedFunnel.stages, stage] }
+              : state.selectedFunnel,
+          isLoading: false,
+        }));
+
+        return stage;
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    updateStage: async (
+      funnelId: string,
+      stageId: string,
+      data: Partial<UpdateStageInput<TEntity>>
+    ) => {
+      // Save state for rollback
+      get()._saveRollbackState();
+
+      // Optimistic update
+      set((state) => ({
+        funnels: state.funnels.map((f) =>
+          f.id === funnelId
+            ? {
+                ...f,
+                stages: f.stages.map((s) =>
+                  s.id === stageId ? ({ ...s, ...data } as FunnelStage<TEntity>) : s
+                ),
+              }
+            : f
+        ),
+        selectedFunnel:
+          state.selectedFunnel?.id === funnelId
+            ? {
+                ...state.selectedFunnel,
+                stages: state.selectedFunnel.stages.map((s) =>
+                  s.id === stageId ? ({ ...s, ...data } as FunnelStage<TEntity>) : s
+                ),
+              }
+            : state.selectedFunnel,
+        selectedStage:
+          state.selectedStage?.id === stageId
+            ? ({ ...state.selectedStage, ...data } as FunnelStage<TEntity>)
+            : state.selectedStage,
+        isDirty: false,
+      }));
+
+      try {
+        const updated = await apiClient.updateStage<TEntity>(
+          funnelId,
+          stageId,
+          data
+        );
+
+        // Update with server response
+        set((state) => ({
+          funnels: state.funnels.map((f) =>
+            f.id === funnelId
+              ? {
+                  ...f,
+                  stages: f.stages.map((s) => (s.id === stageId ? updated : s)),
+                }
+              : f
+          ),
+          selectedFunnel:
+            state.selectedFunnel?.id === funnelId
+              ? {
+                  ...state.selectedFunnel,
+                  stages: state.selectedFunnel.stages.map((s) =>
+                    s.id === stageId ? updated : s
+                  ),
+                }
+              : state.selectedFunnel,
+          selectedStage:
+            state.selectedStage?.id === stageId ? updated : state.selectedStage,
+        }));
+
+        get()._clearRollback();
+        return updated;
+      } catch (error) {
+        // Rollback optimistic update
+        get()._rollback();
+        set({ error: error as Error });
+        throw error;
+      }
+    },
+
+    deleteStage: async (funnelId: string, stageId: string) => {
+      // Save state for rollback
+      get()._saveRollbackState();
+
+      // Optimistic update
+      set((state) => ({
+        funnels: state.funnels.map((f) =>
+          f.id === funnelId
+            ? {
+                ...f,
+                stages: f.stages.filter((s) => s.id !== stageId),
+              }
+            : f
+        ),
+        selectedFunnel:
+          state.selectedFunnel?.id === funnelId
+            ? {
+                ...state.selectedFunnel,
+                stages: state.selectedFunnel.stages.filter((s) => s.id !== stageId),
+              }
+            : state.selectedFunnel,
+        selectedStage: state.selectedStage?.id === stageId ? null : state.selectedStage,
+      }));
+
+      try {
+        await apiClient.deleteStage(funnelId, stageId);
+        get()._clearRollback();
+      } catch (error) {
+        // Rollback optimistic update
+        get()._rollback();
+        set({ error: error as Error });
+        throw error;
+      }
+    },
+
+    reorderStages: async (funnelId: string, stageIds: string[]) => {
+      const { selectedFunnel } = get();
+
+      if (!selectedFunnel || selectedFunnel.id !== funnelId) {
+        throw new Error('Funnel must be selected to reorder stages');
+      }
+
+      // Save state for rollback
+      get()._saveRollbackState();
+
+      // Optimistic update - reorder stages
+      const reorderedStages = stageIds
+        .map((id, index) => {
+          const stage = selectedFunnel.stages.find((s) => s.id === id);
+          return stage ? { ...stage, order: index } : null;
+        })
+        .filter((s): s is FunnelStage<TEntity> => s !== null);
+
+      set((state) => ({
+        funnels: state.funnels.map((f) =>
+          f.id === funnelId ? { ...f, stages: reorderedStages } : f
+        ),
+        selectedFunnel: { ...selectedFunnel, stages: reorderedStages },
+        isDirty: false,
+      }));
+
+      try {
+        // Update each stage with new order
+        await Promise.all(
+          reorderedStages.map((stage) =>
+            apiClient.updateStage(funnelId, stage.id, { order: stage.order })
+          )
+        );
+
+        get()._clearRollback();
+      } catch (error) {
+        // Rollback optimistic update
+        get()._rollback();
+        set({ error: error as Error });
+        throw error;
+      }
+    },
+
+    // =========================================================================
+    // Run Actions
+    // =========================================================================
+
+    runFunnel: async (id: string, options?) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const run = await apiClient.runFunnel(id, options);
+
+        // Add to runs list
+        set((state) => ({
+          runs: [run, ...state.runs],
+          isLoading: false,
+        }));
+
+        return run;
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    loadRuns: async (funnelId: string, filters?) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const response = await apiClient.getFunnelRuns(funnelId, filters);
+
+        set({
+          runs: response.results,
+          isLoading: false,
+        });
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    cancelRun: async (runId: string) => {
+      set({ isLoading: true, error: null });
+
+      try {
+        const run = await apiClient.cancelFunnelRun(runId);
+
+        // Update run in list
+        set((state) => ({
+          runs: state.runs.map((r) => (r.id === runId ? run : r)),
+          isLoading: false,
+        }));
+
+        return run;
+      } catch (error) {
+        set({
+          error: error as Error,
+          isLoading: false,
+        });
+        throw error;
+      }
+    },
+
+    // =========================================================================
+    // UI State Actions
+    // =========================================================================
+
+    setDirty: (dirty: boolean) => {
+      set({ isDirty: dirty });
+    },
+
+    clearError: () => {
+      set({ error: null });
+    },
+
+    reset: () => {
+      set(createInitialState<TEntity>());
+    },
+
+    // =========================================================================
+    // Internal Actions (Optimistic Updates)
+    // =========================================================================
+
+    _saveRollbackState: () => {
+      const { funnels, selectedFunnel } = get();
+      set({
+        rollbackState: {
+          funnels: JSON.parse(JSON.stringify(funnels)) as Funnel<TEntity>[],
+          selectedFunnel: selectedFunnel
+            ? (JSON.parse(JSON.stringify(selectedFunnel)) as Funnel<TEntity>)
+            : null,
+        },
+      });
+    },
+
+    _rollback: () => {
+      const { rollbackState } = get();
+      if (rollbackState) {
+        set({
+          funnels: rollbackState.funnels,
+          selectedFunnel: rollbackState.selectedFunnel,
+          rollbackState: null,
+        });
+      }
+    },
+
+    _clearRollback: () => {
+      set({ rollbackState: null });
+    },
+  }));
+}

package/src/store/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Store exports for @startsimpli/funnels
+ *
+ * @packageDocumentation
+ */
+
+export { createFunnelStore } from './create-funnel-store';
+export type { FunnelStore } from './types';
+export { createInitialState } from './types';