@stepflowjs/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+import { StepflowClientConfig, StepflowClient, StepExecution, Execution, ExecutionStatus, TriggerResult } from '@stepflowjs/client-ts';
+
+interface StepflowContextValue {
+    client: StepflowClient;
+    config: StepflowClientConfig;
+}
+interface StepflowProviderProps {
+    children: React.ReactNode;
+    config: StepflowClientConfig;
+}
+declare function StepflowProvider({ children, config, }: StepflowProviderProps): React.ReactElement;
+declare function useStepflow(): StepflowContextValue;
+
+interface UseWorkflowRunOptions {
+    /**
+     * The run ID to subscribe to
+     */
+    runId: string;
+    /**
+     * Public access token for the run
+     */
+    accessToken?: string;
+    /**
+     * Callback when a step completes
+     */
+    onStepComplete?: (step: StepExecution) => void;
+    /**
+     * Callback when the workflow completes
+     */
+    onComplete?: (result: unknown) => void;
+    /**
+     * Callback when the workflow fails
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Throttle updates (ms)
+     */
+    throttleMs?: number;
+    /**
+     * Enable/disable the subscription
+     */
+    enabled?: boolean;
+}
+interface UseWorkflowRunResult<TPayload = unknown, TResult = unknown> {
+    /**
+     * The current execution state
+     */
+    run: Execution<TPayload, TResult> | null;
+    /**
+     * Current execution status
+     */
+    status: ExecutionStatus;
+    /**
+     * Completed steps
+     */
+    steps: StepExecution[];
+    /**
+     * Execution metadata
+     */
+    metadata: Record<string, unknown>;
+    /**
+     * Error if any
+     */
+    error: Error | null;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Connection state
+     */
+    isConnected: boolean;
+    /**
+     * Refetch the run data
+     */
+    refetch: () => Promise<void>;
+}
+declare function useWorkflowRun<TPayload = unknown, TResult = unknown>(options: UseWorkflowRunOptions): UseWorkflowRunResult<TPayload, TResult>;
+
+interface UseWorkflowTriggerOptions {
+    /**
+     * The workflow ID to trigger
+     */
+    workflowId: string;
+    /**
+     * Callback on successful trigger
+     */
+    onSuccess?: (result: TriggerResult) => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+interface UseWorkflowTriggerResult<TPayload = unknown> {
+    /**
+     * Trigger the workflow with payload
+     */
+    trigger: (payload: TPayload, options?: TriggerOptions) => Promise<TriggerResult>;
+    /**
+     * The run ID from the last trigger
+     */
+    runId: string | null;
+    /**
+     * The execution ID from the last trigger
+     */
+    executionId: string | null;
+    /**
+     * Public access token for the run
+     */
+    accessToken: string | null;
+    /**
+     * Whether a trigger is in progress
+     */
+    isTriggering: boolean;
+    /**
+     * Error from the last trigger
+     */
+    error: Error | null;
+    /**
+     * Reset the state
+     */
+    reset: () => void;
+}
+interface TriggerOptions {
+    /**
+     * Custom run ID
+     */
+    runId?: string;
+    /**
+     * Additional metadata
+     */
+    metadata?: Record<string, unknown>;
+    /**
+     * Delay before execution (ms)
+     */
+    delay?: number;
+}
+declare function useWorkflowTrigger<TPayload = unknown>(options: UseWorkflowTriggerOptions): UseWorkflowTriggerResult<TPayload>;
+
+interface UseWorkflowStreamOptions<TPayload, TResult> {
+    /**
+     * The workflow ID to execute
+     */
+    workflowId: string;
+    /**
+     * The payload to send
+     */
+    payload: TPayload;
+    /**
+     * Auto-start the stream
+     */
+    autoStart?: boolean;
+    /**
+     * Callback on workflow completion
+     */
+    onComplete?: (result: TResult) => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+interface UseWorkflowStreamResult<TResult = unknown> {
+    /**
+     * Start the workflow stream
+     */
+    start: () => Promise<void>;
+    /**
+     * Stop/abort the stream
+     */
+    stop: () => void;
+    /**
+     * All received events
+     */
+    events: WorkflowEvent[];
+    /**
+     * Final result (when complete)
+     */
+    result: TResult | null;
+    /**
+     * Current status
+     */
+    status: ExecutionStatus;
+    /**
+     * Whether streaming is active
+     */
+    isStreaming: boolean;
+    /**
+     * Error if any
+     */
+    error: Error | null;
+    /**
+     * Reset the state
+     */
+    reset: () => void;
+}
+interface WorkflowEvent {
+    type: string;
+    data: unknown;
+    timestamp: Date;
+    stepName?: string;
+}
+declare function useWorkflowStream<TPayload = unknown, TResult = unknown>(options: UseWorkflowStreamOptions<TPayload, TResult>): UseWorkflowStreamResult<TResult>;
+
+export { StepflowProvider, type StepflowProviderProps, type TriggerOptions, type UseWorkflowRunOptions, type UseWorkflowRunResult, type UseWorkflowStreamOptions, type UseWorkflowStreamResult, type UseWorkflowTriggerOptions, type UseWorkflowTriggerResult, type WorkflowEvent, useStepflow, useWorkflowRun, useWorkflowStream, useWorkflowTrigger };

package/dist/index.js

@@ -0,0 +1,321 @@
+"use client";
+
+// src/providers/stepflow-provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { StepflowClient } from "@stepflowjs/client-ts";
+import { jsx } from "react/jsx-runtime";
+var StepflowContext = createContext(null);
+function StepflowProvider({
+  children,
+  config
+}) {
+  const client = useMemo(
+    () => new StepflowClient(config),
+    [config.baseUrl, config.apiKey, config.publicApiKey, config.wsUrl]
+  );
+  const value = useMemo(() => ({ client, config }), [client, config]);
+  return /* @__PURE__ */ jsx(StepflowContext.Provider, { value, children });
+}
+function useStepflow() {
+  const context = useContext(StepflowContext);
+  if (!context) {
+    throw new Error("useStepflow must be used within a StepflowProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-workflow-run.ts
+import { useState, useEffect, useCallback } from "react";
+function useWorkflowRun(options) {
+  const { client } = useStepflow();
+  const {
+    runId,
+    accessToken,
+    onStepComplete,
+    onComplete,
+    onError,
+    throttleMs,
+    enabled = true
+  } = options;
+  const [state, setState] = useState({
+    run: null,
+    status: "pending",
+    steps: [],
+    metadata: {},
+    error: null,
+    isLoading: true,
+    isConnected: false
+  });
+  const refetch = useCallback(async () => {
+    if (!enabled) return;
+    try {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      const run = await client.getRun(runId, {
+        accessToken
+      });
+      if (run) {
+        setState((prev) => ({
+          ...prev,
+          run,
+          status: run.status,
+          steps: run.steps,
+          metadata: run.metadata,
+          isLoading: false
+        }));
+      }
+    } catch (err) {
+      setState((prev) => ({
+        ...prev,
+        error: err instanceof Error ? err : new Error(String(err)),
+        isLoading: false
+      }));
+    }
+  }, [client, runId, accessToken, enabled]);
+  useEffect(() => {
+    if (!enabled) return;
+    refetch();
+    const unsubscribe = client.subscribeToRun(runId, {
+      accessToken,
+      throttleMs,
+      onUpdate: (run) => {
+        setState((prev) => ({
+          ...prev,
+          run,
+          status: run.status,
+          steps: run.steps,
+          metadata: run.metadata,
+          isLoading: false
+        }));
+      },
+      onStepComplete: (step) => {
+        setState((prev) => ({
+          ...prev,
+          steps: [...prev.steps.filter((s) => s.name !== step.name), step]
+        }));
+        onStepComplete?.(step);
+      },
+      onComplete: (result) => {
+        setState((prev) => ({
+          ...prev,
+          status: "completed",
+          isLoading: false
+        }));
+        onComplete?.(result);
+      },
+      onError: (error) => {
+        setState((prev) => ({
+          ...prev,
+          error,
+          status: "failed",
+          isLoading: false
+        }));
+        onError?.(error);
+      },
+      onConnect: () => {
+        setState((prev) => ({ ...prev, isConnected: true }));
+      },
+      onDisconnect: () => {
+        setState((prev) => ({ ...prev, isConnected: false }));
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [
+    client,
+    runId,
+    accessToken,
+    enabled,
+    throttleMs,
+    onStepComplete,
+    onComplete,
+    onError,
+    refetch
+  ]);
+  return {
+    ...state,
+    refetch
+  };
+}
+
+// src/hooks/use-workflow-trigger.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+function useWorkflowTrigger(options) {
+  const { client } = useStepflow();
+  const { workflowId, onSuccess, onError } = options;
+  const [state, setState] = useState2({
+    runId: null,
+    executionId: null,
+    accessToken: null,
+    isTriggering: false,
+    error: null
+  });
+  const trigger = useCallback2(
+    async (payload, triggerOptions) => {
+      setState((prev) => ({
+        ...prev,
+        isTriggering: true,
+        error: null
+      }));
+      try {
+        const result = await client.trigger(
+          workflowId,
+          payload,
+          triggerOptions
+        );
+        setState({
+          runId: result.runId,
+          executionId: result.executionId,
+          accessToken: result.publicAccessToken,
+          isTriggering: false,
+          error: null
+        });
+        onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState((prev) => ({
+          ...prev,
+          isTriggering: false,
+          error
+        }));
+        onError?.(error);
+        throw error;
+      }
+    },
+    [client, workflowId, onSuccess, onError]
+  );
+  const reset = useCallback2(() => {
+    setState({
+      runId: null,
+      executionId: null,
+      accessToken: null,
+      isTriggering: false,
+      error: null
+    });
+  }, []);
+  return {
+    trigger,
+    ...state,
+    reset
+  };
+}
+
+// src/hooks/use-workflow-stream.ts
+import { useState as useState3, useCallback as useCallback3, useRef, useEffect as useEffect2 } from "react";
+function useWorkflowStream(options) {
+  const { client } = useStepflow();
+  const {
+    workflowId,
+    payload,
+    autoStart = false,
+    onComplete,
+    onError
+  } = options;
+  const [state, setState] = useState3({
+    events: [],
+    result: null,
+    status: "pending",
+    isStreaming: false,
+    error: null
+  });
+  const abortControllerRef = useRef(null);
+  const start = useCallback3(async () => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = new AbortController();
+    setState((prev) => ({
+      ...prev,
+      events: [],
+      result: null,
+      status: "running",
+      isStreaming: true,
+      error: null
+    }));
+    try {
+      const stream = client.stream(workflowId, payload, {
+        signal: abortControllerRef.current.signal
+      });
+      for await (const event of stream) {
+        const workflowEvent = {
+          type: event.type,
+          data: event.data,
+          timestamp: /* @__PURE__ */ new Date(),
+          stepName: event.stepName
+        };
+        setState((prev) => ({
+          ...prev,
+          events: [...prev.events, workflowEvent]
+        }));
+        if (event.type === "execution:complete") {
+          const result = event.data;
+          setState((prev) => ({
+            ...prev,
+            result,
+            status: "completed",
+            isStreaming: false
+          }));
+          onComplete?.(result);
+        }
+        if (event.type === "execution:failed") {
+          const error = new Error(event.data.message);
+          setState((prev) => ({
+            ...prev,
+            error,
+            status: "failed",
+            isStreaming: false
+          }));
+          onError?.(error);
+        }
+      }
+    } catch (err) {
+      if (err.name === "AbortError") {
+        setState((prev) => ({ ...prev, isStreaming: false }));
+        return;
+      }
+      const error = err instanceof Error ? err : new Error(String(err));
+      setState((prev) => ({
+        ...prev,
+        error,
+        status: "failed",
+        isStreaming: false
+      }));
+      onError?.(error);
+    }
+  }, [client, workflowId, payload, onComplete, onError]);
+  const stop = useCallback3(() => {
+    abortControllerRef.current?.abort();
+    setState((prev) => ({ ...prev, isStreaming: false }));
+  }, []);
+  const reset = useCallback3(() => {
+    abortControllerRef.current?.abort();
+    setState({
+      events: [],
+      result: null,
+      status: "pending",
+      isStreaming: false,
+      error: null
+    });
+  }, []);
+  useEffect2(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [autoStart, start]);
+  return {
+    start,
+    stop,
+    reset,
+    ...state
+  };
+}
+export {
+  StepflowProvider,
+  useStepflow,
+  useWorkflowRun,
+  useWorkflowStream,
+  useWorkflowTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/providers/stepflow-provider.tsx","../src/hooks/use-workflow-run.ts","../src/hooks/use-workflow-trigger.ts","../src/hooks/use-workflow-stream.ts"],"sourcesContent":["// ============================================================================\n// StepflowProvider - React context for Stepflow client\n// ============================================================================\n\nimport React, { createContext, useContext, useMemo } from \"react\";\nimport { StepflowClient, type StepflowClientConfig } from \"@stepflowjs/client-ts\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface StepflowContextValue {\n  client: StepflowClient;\n  config: StepflowClientConfig;\n}\n\nconst StepflowContext = createContext<StepflowContextValue | null>(null);\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface StepflowProviderProps {\n  children: React.ReactNode;\n  config: StepflowClientConfig;\n}\n\nexport function StepflowProvider({\n  children,\n  config,\n}: StepflowProviderProps): React.ReactElement {\n  const client = useMemo(\n    () => new StepflowClient(config),\n    [config.baseUrl, config.apiKey, config.publicApiKey, config.wsUrl],\n  );\n\n  const value = useMemo(() => ({ client, config }), [client, config]);\n\n  return (\n    <StepflowContext.Provider value={value}>\n      {children}\n    </StepflowContext.Provider>\n  );\n}\n\n// ============================================================================\n// Hook\n// ============================================================================\n\nexport function useStepflow(): StepflowContextValue {\n  const context = useContext(StepflowContext);\n\n  if (!context) {\n    throw new Error(\"useStepflow must be used within a StepflowProvider\");\n  }\n\n  return context;\n}\n","// ============================================================================\n// useWorkflowRun - Subscribe to workflow run updates\n// ============================================================================\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { useStepflow } from \"../providers/stepflow-provider.js\";\nimport type {\n  Execution,\n  ExecutionStatus,\n  StepExecution,\n} from \"@stepflowjs/client-ts\";\n\nexport interface UseWorkflowRunOptions {\n  /**\n   * The run ID to subscribe to\n   */\n  runId: string;\n\n  /**\n   * Public access token for the run\n   */\n  accessToken?: string;\n\n  /**\n   * Callback when a step completes\n   */\n  onStepComplete?: (step: StepExecution) => void;\n\n  /**\n   * Callback when the workflow completes\n   */\n  onComplete?: (result: unknown) => void;\n\n  /**\n   * Callback when the workflow fails\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Throttle updates (ms)\n   */\n  throttleMs?: number;\n\n  /**\n   * Enable/disable the subscription\n   */\n  enabled?: boolean;\n}\n\nexport interface UseWorkflowRunResult<TPayload = unknown, TResult = unknown> {\n  /**\n   * The current execution state\n   */\n  run: Execution<TPayload, TResult> | null;\n\n  /**\n   * Current execution status\n   */\n  status: ExecutionStatus;\n\n  /**\n   * Completed steps\n   */\n  steps: StepExecution[];\n\n  /**\n   * Execution metadata\n   */\n  metadata: Record<string, unknown>;\n\n  /**\n   * Error if any\n   */\n  error: Error | null;\n\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n\n  /**\n   * Connection state\n   */\n  isConnected: boolean;\n\n  /**\n   * Refetch the run data\n   */\n  refetch: () => Promise<void>;\n}\n\nexport function useWorkflowRun<TPayload = unknown, TResult = unknown>(\n  options: UseWorkflowRunOptions,\n): UseWorkflowRunResult<TPayload, TResult> {\n  const { client } = useStepflow();\n  const {\n    runId,\n    accessToken,\n    onStepComplete,\n    onComplete,\n    onError,\n    throttleMs,\n    enabled = true,\n  } = options;\n\n  const [state, setState] = useState<{\n    run: Execution<TPayload, TResult> | null;\n    status: ExecutionStatus;\n    steps: StepExecution[];\n    metadata: Record<string, unknown>;\n    error: Error | null;\n    isLoading: boolean;\n    isConnected: boolean;\n  }>({\n    run: null,\n    status: \"pending\",\n    steps: [],\n    metadata: {},\n    error: null,\n    isLoading: true,\n    isConnected: false,\n  });\n\n  const refetch = useCallback(async () => {\n    if (!enabled) return;\n\n    try {\n      setState((prev) => ({ ...prev, isLoading: true }));\n      const run = await client.getRun<TPayload, TResult>(runId, {\n        accessToken,\n      });\n\n      if (run) {\n        setState((prev) => ({\n          ...prev,\n          run,\n          status: run.status,\n          steps: run.steps,\n          metadata: run.metadata,\n          isLoading: false,\n        }));\n      }\n    } catch (err) {\n      setState((prev) => ({\n        ...prev,\n        error: err instanceof Error ? err : new Error(String(err)),\n        isLoading: false,\n      }));\n    }\n  }, [client, runId, accessToken, enabled]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    // Initial fetch\n    refetch();\n\n    // Subscribe to updates\n    const unsubscribe = client.subscribeToRun<TPayload, TResult>(runId, {\n      accessToken,\n      throttleMs,\n      onUpdate: (run) => {\n        setState((prev) => ({\n          ...prev,\n          run,\n          status: run.status,\n          steps: run.steps,\n          metadata: run.metadata,\n          isLoading: false,\n        }));\n      },\n      onStepComplete: (step) => {\n        setState((prev) => ({\n          ...prev,\n          steps: [...prev.steps.filter((s) => s.name !== step.name), step],\n        }));\n        onStepComplete?.(step);\n      },\n      onComplete: (result) => {\n        setState((prev) => ({\n          ...prev,\n          status: \"completed\",\n          isLoading: false,\n        }));\n        onComplete?.(result);\n      },\n      onError: (error) => {\n        setState((prev) => ({\n          ...prev,\n          error,\n          status: \"failed\",\n          isLoading: false,\n        }));\n        onError?.(error);\n      },\n      onConnect: () => {\n        setState((prev) => ({ ...prev, isConnected: true }));\n      },\n      onDisconnect: () => {\n        setState((prev) => ({ ...prev, isConnected: false }));\n      },\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [\n    client,\n    runId,\n    accessToken,\n    enabled,\n    throttleMs,\n    onStepComplete,\n    onComplete,\n    onError,\n    refetch,\n  ]);\n\n  return {\n    ...state,\n    refetch,\n  };\n}\n","// ============================================================================\n// useWorkflowTrigger - Trigger a workflow and get access token\n// ============================================================================\n\nimport { useState, useCallback } from \"react\";\nimport { useStepflow } from \"../providers/stepflow-provider.js\";\nimport type { TriggerResult } from \"@stepflowjs/client-ts\";\n\nexport interface UseWorkflowTriggerOptions {\n  /**\n   * The workflow ID to trigger\n   */\n  workflowId: string;\n\n  /**\n   * Callback on successful trigger\n   */\n  onSuccess?: (result: TriggerResult) => void;\n\n  /**\n   * Callback on error\n   */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseWorkflowTriggerResult<TPayload = unknown> {\n  /**\n   * Trigger the workflow with payload\n   */\n  trigger: (\n    payload: TPayload,\n    options?: TriggerOptions,\n  ) => Promise<TriggerResult>;\n\n  /**\n   * The run ID from the last trigger\n   */\n  runId: string | null;\n\n  /**\n   * The execution ID from the last trigger\n   */\n  executionId: string | null;\n\n  /**\n   * Public access token for the run\n   */\n  accessToken: string | null;\n\n  /**\n   * Whether a trigger is in progress\n   */\n  isTriggering: boolean;\n\n  /**\n   * Error from the last trigger\n   */\n  error: Error | null;\n\n  /**\n   * Reset the state\n   */\n  reset: () => void;\n}\n\nexport interface TriggerOptions {\n  /**\n   * Custom run ID\n   */\n  runId?: string;\n\n  /**\n   * Additional metadata\n   */\n  metadata?: Record<string, unknown>;\n\n  /**\n   * Delay before execution (ms)\n   */\n  delay?: number;\n}\n\nexport function useWorkflowTrigger<TPayload = unknown>(\n  options: UseWorkflowTriggerOptions,\n): UseWorkflowTriggerResult<TPayload> {\n  const { client } = useStepflow();\n  const { workflowId, onSuccess, onError } = options;\n\n  const [state, setState] = useState<{\n    runId: string | null;\n    executionId: string | null;\n    accessToken: string | null;\n    isTriggering: boolean;\n    error: Error | null;\n  }>({\n    runId: null,\n    executionId: null,\n    accessToken: null,\n    isTriggering: false,\n    error: null,\n  });\n\n  const trigger = useCallback(\n    async (\n      payload: TPayload,\n      triggerOptions?: TriggerOptions,\n    ): Promise<TriggerResult> => {\n      setState((prev) => ({\n        ...prev,\n        isTriggering: true,\n        error: null,\n      }));\n\n      try {\n        const result = await client.trigger(\n          workflowId,\n          payload,\n          triggerOptions,\n        );\n\n        setState({\n          runId: result.runId,\n          executionId: result.executionId,\n          accessToken: result.publicAccessToken,\n          isTriggering: false,\n          error: null,\n        });\n\n        onSuccess?.(result);\n        return result;\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error(String(err));\n\n        setState((prev) => ({\n          ...prev,\n          isTriggering: false,\n          error,\n        }));\n\n        onError?.(error);\n        throw error;\n      }\n    },\n    [client, workflowId, onSuccess, onError],\n  );\n\n  const reset = useCallback(() => {\n    setState({\n      runId: null,\n      executionId: null,\n      accessToken: null,\n      isTriggering: false,\n      error: null,\n    });\n  }, []);\n\n  return {\n    trigger,\n    ...state,\n    reset,\n  };\n}\n","// ============================================================================\n// useWorkflowStream - Stream workflow execution with real-time events\n// ============================================================================\n\nimport { useState, useCallback, useRef, useEffect } from \"react\";\nimport { useStepflow } from \"../providers/stepflow-provider.js\";\nimport type { ExecutionStatus } from \"@stepflowjs/client-ts\";\n\nexport interface UseWorkflowStreamOptions<TPayload, TResult> {\n  /**\n   * The workflow ID to execute\n   */\n  workflowId: string;\n\n  /**\n   * The payload to send\n   */\n  payload: TPayload;\n\n  /**\n   * Auto-start the stream\n   */\n  autoStart?: boolean;\n\n  /**\n   * Callback on workflow completion\n   */\n  onComplete?: (result: TResult) => void;\n\n  /**\n   * Callback on error\n   */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseWorkflowStreamResult<TResult = unknown> {\n  /**\n   * Start the workflow stream\n   */\n  start: () => Promise<void>;\n\n  /**\n   * Stop/abort the stream\n   */\n  stop: () => void;\n\n  /**\n   * All received events\n   */\n  events: WorkflowEvent[];\n\n  /**\n   * Final result (when complete)\n   */\n  result: TResult | null;\n\n  /**\n   * Current status\n   */\n  status: ExecutionStatus;\n\n  /**\n   * Whether streaming is active\n   */\n  isStreaming: boolean;\n\n  /**\n   * Error if any\n   */\n  error: Error | null;\n\n  /**\n   * Reset the state\n   */\n  reset: () => void;\n}\n\nexport interface WorkflowEvent {\n  type: string;\n  data: unknown;\n  timestamp: Date;\n  stepName?: string;\n}\n\nexport function useWorkflowStream<TPayload = unknown, TResult = unknown>(\n  options: UseWorkflowStreamOptions<TPayload, TResult>,\n): UseWorkflowStreamResult<TResult> {\n  const { client } = useStepflow();\n  const {\n    workflowId,\n    payload,\n    autoStart = false,\n    onComplete,\n    onError,\n  } = options;\n\n  const [state, setState] = useState<{\n    events: WorkflowEvent[];\n    result: TResult | null;\n    status: ExecutionStatus;\n    isStreaming: boolean;\n    error: Error | null;\n  }>({\n    events: [],\n    result: null,\n    status: \"pending\",\n    isStreaming: false,\n    error: null,\n  });\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const start = useCallback(async () => {\n    // Abort any existing stream\n    abortControllerRef.current?.abort();\n    abortControllerRef.current = new AbortController();\n\n    setState((prev) => ({\n      ...prev,\n      events: [],\n      result: null,\n      status: \"running\",\n      isStreaming: true,\n      error: null,\n    }));\n\n    try {\n      const stream = client.stream<TPayload, TResult>(workflowId, payload, {\n        signal: abortControllerRef.current.signal,\n      });\n\n      for await (const event of stream) {\n        const workflowEvent: WorkflowEvent = {\n          type: event.type,\n          data: event.data,\n          timestamp: new Date(),\n          stepName: event.stepName,\n        };\n\n        setState((prev) => ({\n          ...prev,\n          events: [...prev.events, workflowEvent],\n        }));\n\n        if (event.type === \"execution:complete\") {\n          const result = event.data as TResult;\n          setState((prev) => ({\n            ...prev,\n            result,\n            status: \"completed\",\n            isStreaming: false,\n          }));\n          onComplete?.(result);\n        }\n\n        if (event.type === \"execution:failed\") {\n          const error = new Error((event.data as { message: string }).message);\n          setState((prev) => ({\n            ...prev,\n            error,\n            status: \"failed\",\n            isStreaming: false,\n          }));\n          onError?.(error);\n        }\n      }\n    } catch (err) {\n      if ((err as Error).name === \"AbortError\") {\n        setState((prev) => ({ ...prev, isStreaming: false }));\n        return;\n      }\n\n      const error = err instanceof Error ? err : new Error(String(err));\n      setState((prev) => ({\n        ...prev,\n        error,\n        status: \"failed\",\n        isStreaming: false,\n      }));\n      onError?.(error);\n    }\n  }, [client, workflowId, payload, onComplete, onError]);\n\n  const stop = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setState((prev) => ({ ...prev, isStreaming: false }));\n  }, []);\n\n  const reset = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setState({\n      events: [],\n      result: null,\n      status: \"pending\",\n      isStreaming: false,\n      error: null,\n    });\n  }, []);\n\n  useEffect(() => {\n    if (autoStart) {\n      start();\n    }\n\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, [autoStart, start]); // Only run on mount and autoStart change\n\n  return {\n    start,\n    stop,\n    reset,\n    ...state,\n  };\n}\n"],"mappings":"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","names":["useState","useCallback","useState","useCallback","useState","useCallback","useEffect","useState","useCallback","useEffect"]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@stepflowjs/react",
+  "version": "0.0.1",
+  "description": "React hooks for Stepflow workflow orchestration",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@stepflowjs/client-ts": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "tsup": "^8.5.1",
+    "vitest": "^4.0.17"
+  },
+  "license": "MIT",
+  "author": "Stepflow Contributors",
+  "repository": {
+    "type": "git",
+    "url": "https://stepflow-production.up.railway.app",
+    "directory": "packages/client-react"
+  },
+  "homepage": "https://stepflow-production.up.railway.app",
+  "bugs": {
+    "url": "https://stepflow-production.up.railway.app"
+  },
+  "keywords": [
+    "stepflow",
+    "workflow",
+    "orchestration",
+    "react",
+    "hooks",
+    "client",
+    "sdk"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "clean": "rm -rf dist"
+  }
+}