@runtypelabs/react-flow 0.1.0

package/src/hooks/useRuntypeFlow.ts

@@ -0,0 +1,414 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import {
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  type OnNodesChange,
+  type OnEdgesChange,
+  type OnConnect,
+  type Connection,
+} from '@xyflow/react'
+import type { RuntypeClient } from '@runtypelabs/sdk'
+import type {
+  FlowStep,
+  RuntypeNode,
+  RuntypeEdge,
+  SavedFlow,
+  UseRuntypeFlowReturn,
+} from '../types'
+import {
+  flowStepsToNodes,
+  nodesToFlowSteps,
+  createEdgesFromNodes,
+  createDefaultStep,
+} from '../utils/adapter'
+import { autoLayout } from '../utils/layout'
+import type { FlowStepType } from '@travrse/shared'
+
+// ============================================================================
+// Hook Options
+// ============================================================================
+
+export interface UseRuntypeFlowOptions {
+  /** Runtype API client instance */
+  client: RuntypeClient
+  /** Initial flow ID to load */
+  flowId?: string
+  /** Initial flow name */
+  initialName?: string
+  /** Initial flow description */
+  initialDescription?: string
+  /** Initial steps */
+  initialSteps?: FlowStep[]
+  /** Callback when flow changes */
+  onChange?: (nodes: RuntypeNode[], edges: RuntypeEdge[]) => void
+  /** Auto-layout nodes on load */
+  autoLayoutOnLoad?: boolean
+}
+
+// ============================================================================
+// Main Hook
+// ============================================================================
+
+export function useRuntypeFlow(options: UseRuntypeFlowOptions): UseRuntypeFlowReturn {
+  const {
+    client,
+    flowId: initialFlowId,
+    initialName = '',
+    initialDescription = '',
+    initialSteps = [],
+    onChange,
+    autoLayoutOnLoad = true,
+  } = options
+
+  // State
+  const [flowId, setFlowId] = useState<string | null>(initialFlowId || null)
+  const [flowName, setFlowName] = useState(initialName)
+  const [flowDescription, setFlowDescription] = useState(initialDescription)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+
+  // React Flow state
+  const [nodes, setNodes, onNodesChange] = useNodesState<RuntypeNode>([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState<RuntypeEdge>([])
+
+  // Track last saved state for change detection
+  const lastSavedState = useRef<string>('')
+
+  // ============================================================================
+  // Handlers
+  // ============================================================================
+
+  const handleStepChange = useCallback(
+    (stepId: string, updates: Partial<FlowStep>) => {
+      setNodes((nds) =>
+        nds.map((node) => {
+          if (node.id === stepId) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                step: {
+                  ...node.data.step,
+                  ...updates,
+                  config: updates.config
+                    ? { ...node.data.step.config, ...updates.config }
+                    : node.data.step.config,
+                },
+              },
+            }
+          }
+          return node
+        })
+      )
+      setHasUnsavedChanges(true)
+    },
+    [setNodes]
+  )
+
+  const handleStepDelete = useCallback(
+    (stepId: string) => {
+      setNodes((nds) => nds.filter((node) => node.id !== stepId))
+      setEdges((eds) =>
+        eds.filter((edge) => edge.source !== stepId && edge.target !== stepId)
+      )
+      setHasUnsavedChanges(true)
+    },
+    [setNodes, setEdges]
+  )
+
+  const handleConnect: OnConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => addEdge({ ...connection, type: 'smoothstep' }, eds))
+      setHasUnsavedChanges(true)
+    },
+    [setEdges]
+  )
+
+  // ============================================================================
+  // API Operations
+  // ============================================================================
+
+  /**
+   * Load a flow by ID
+   */
+  const loadFlow = useCallback(
+    async (id: string) => {
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const flow = await client.flows.get(id)
+        
+        // Get flow steps
+        const stepsResponse = await client.flowSteps.getByFlow(id)
+        const steps: FlowStep[] = Array.isArray(stepsResponse) ? stepsResponse : []
+
+        // Convert to React Flow nodes
+        let newNodes = flowStepsToNodes(steps, {
+          onChange: handleStepChange,
+          onDelete: handleStepDelete,
+        })
+
+        // Auto-layout if enabled
+        if (autoLayoutOnLoad) {
+          const newEdges = createEdgesFromNodes(newNodes)
+          newNodes = autoLayout(newNodes, newEdges)
+        }
+
+        const newEdges = createEdgesFromNodes(newNodes)
+
+        setFlowId(id)
+        setFlowName(flow.name || '')
+        setFlowDescription(flow.description || '')
+        setNodes(newNodes)
+        setEdges(newEdges)
+        setHasUnsavedChanges(false)
+
+        // Store last saved state
+        lastSavedState.current = JSON.stringify(nodesToFlowSteps(newNodes))
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to load flow'))
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [client, handleStepChange, handleStepDelete, autoLayoutOnLoad, setNodes, setEdges]
+  )
+
+  /**
+   * Save the current flow
+   */
+  const saveFlow = useCallback(async (): Promise<SavedFlow> => {
+    if (!flowId) {
+      throw new Error('No flow ID. Use createFlow() to create a new flow first.')
+    }
+
+    setIsSaving(true)
+    setError(null)
+
+    try {
+      const steps = nodesToFlowSteps(nodes)
+
+      // Update flow metadata
+      await client.flows.update(flowId, {
+        name: flowName,
+        description: flowDescription,
+      })
+
+      // Update steps - delete existing and create new
+      const existingSteps = await client.flowSteps.getByFlow(flowId)
+      for (const step of existingSteps) {
+        await client.flowSteps.delete(step.id)
+      }
+
+      // Create new steps
+      for (const step of steps) {
+        await client.flowSteps.create({
+          flowId,
+          type: step.type,
+          name: step.name,
+          order: step.order,
+          enabled: step.enabled,
+          config: step.config,
+        })
+      }
+
+      setHasUnsavedChanges(false)
+      lastSavedState.current = JSON.stringify(steps)
+
+      return {
+        id: flowId,
+        name: flowName,
+        description: flowDescription,
+        steps,
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to save flow'))
+      throw err
+    } finally {
+      setIsSaving(false)
+    }
+  }, [flowId, flowName, flowDescription, nodes, client])
+
+  /**
+   * Create a new flow
+   */
+  const createFlow = useCallback(
+    async (name: string, description?: string): Promise<SavedFlow> => {
+      setIsSaving(true)
+      setError(null)
+
+      try {
+        const flow = await client.flows.create({
+          name,
+          description,
+          prompts: [],
+        })
+
+        setFlowId(flow.id)
+        setFlowName(name)
+        setFlowDescription(description || '')
+        setNodes([])
+        setEdges([])
+        setHasUnsavedChanges(false)
+        lastSavedState.current = '[]'
+
+        return {
+          id: flow.id,
+          name,
+          description,
+          steps: [],
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to create flow'))
+        throw err
+      } finally {
+        setIsSaving(false)
+      }
+    },
+    [client, setNodes, setEdges]
+  )
+
+  /**
+   * Delete a step
+   */
+  const deleteStep = useCallback(
+    (stepId: string) => {
+      handleStepDelete(stepId)
+    },
+    [handleStepDelete]
+  )
+
+  /**
+   * Update a step's configuration
+   */
+  const updateStep = useCallback(
+    (stepId: string, updates: Partial<FlowStep>) => {
+      handleStepChange(stepId, updates)
+    },
+    [handleStepChange]
+  )
+
+  /**
+   * Add a new step
+   */
+  const addStep = useCallback(
+    (type: FlowStepType, position?: { x: number; y: number }) => {
+      const newStep = createDefaultStep(type, nodes.length)
+
+      const newNode: RuntypeNode = {
+        id: newStep.id,
+        type: newStep.type,
+        position: position || { x: 400, y: nodes.length * 230 + 50 },
+        data: {
+          step: newStep,
+          label: newStep.name,
+          onChange: handleStepChange,
+          onDelete: handleStepDelete,
+        },
+        draggable: true,
+        selectable: true,
+      }
+
+      setNodes((nds) => [...nds, newNode])
+
+      // Add edge from previous node if exists
+      if (nodes.length > 0) {
+        const lastNode = nodes[nodes.length - 1]
+        setEdges((eds) => [
+          ...eds,
+          {
+            id: `edge-${lastNode.id}-${newNode.id}`,
+            source: lastNode.id,
+            target: newNode.id,
+            type: 'smoothstep',
+          },
+        ])
+      }
+
+      setHasUnsavedChanges(true)
+    },
+    [nodes, setNodes, setEdges, handleStepChange, handleStepDelete]
+  )
+
+  // ============================================================================
+  // Effects
+  // ============================================================================
+
+  // Load initial flow if flowId is provided
+  useEffect(() => {
+    if (initialFlowId) {
+      loadFlow(initialFlowId)
+    } else if (initialSteps.length > 0) {
+      // Initialize with provided steps
+      let newNodes = flowStepsToNodes(initialSteps, {
+        onChange: handleStepChange,
+        onDelete: handleStepDelete,
+      })
+
+      if (autoLayoutOnLoad) {
+        const newEdges = createEdgesFromNodes(newNodes)
+        newNodes = autoLayout(newNodes, newEdges)
+      }
+
+      const newEdges = createEdgesFromNodes(newNodes)
+
+      setNodes(newNodes)
+      setEdges(newEdges)
+    }
+  }, []) // Only run on mount
+
+  // Notify onChange when nodes/edges change
+  useEffect(() => {
+    onChange?.(nodes, edges)
+  }, [nodes, edges, onChange])
+
+  // Detect unsaved changes
+  useEffect(() => {
+    const currentState = JSON.stringify(nodesToFlowSteps(nodes))
+    if (lastSavedState.current && currentState !== lastSavedState.current) {
+      setHasUnsavedChanges(true)
+    }
+  }, [nodes])
+
+  // ============================================================================
+  // Return
+  // ============================================================================
+
+  return {
+    // React Flow state
+    nodes,
+    edges,
+    onNodesChange: onNodesChange as unknown as (changes: unknown) => void,
+    onEdgesChange: onEdgesChange as unknown as (changes: unknown) => void,
+    onConnect: handleConnect as unknown as (connection: unknown) => void,
+
+    // Flow metadata
+    flowName,
+    flowDescription,
+    flowId,
+    setFlowName,
+    setFlowDescription,
+
+    // API operations
+    loadFlow,
+    saveFlow,
+    createFlow,
+    deleteStep,
+    updateStep,
+    addStep,
+
+    // Status
+    isLoading,
+    isSaving,
+    error,
+    hasUnsavedChanges,
+  }
+}
+
+export default useRuntypeFlow
+

package/src/index.ts

@@ -0,0 +1,28 @@
+// Types
+export * from './types'
+
+// Components
+export { RuntypeFlowEditor } from './components/RuntypeFlowEditor'
+export { BaseNode } from './components/nodes/BaseNode'
+export { PromptNode } from './components/nodes/PromptNode'
+export { FetchUrlNode } from './components/nodes/FetchUrlNode'
+export { CodeNode } from './components/nodes/CodeNode'
+export { ConditionalNode } from './components/nodes/ConditionalNode'
+export { SendEmailNode } from './components/nodes/SendEmailNode'
+
+// Hooks
+export { useRuntypeFlow } from './hooks/useRuntypeFlow'
+export { useFlowValidation } from './hooks/useFlowValidation'
+
+// Utilities
+export {
+  flowStepsToNodes,
+  nodesToFlowSteps,
+  createEdgesFromNodes,
+  createDefaultStep,
+  getDefaultStepName,
+  generateStepId,
+  cloneStep,
+} from './utils/adapter'
+export { autoLayout, centerNodes, snapToGrid, getNodesBoundingBox } from './utils/layout'
+